# Changelog

## 0.22.0-beta

- Update: `PromoHero` accepts a `ReactElement` as `image`, rendered in place of the `img` tag
    - An inline `svg` element is sized the same as a string `image` src
- BugFix: Fixed `Tabs` overflow folding — tabs no longer wrap or show the `...` pill when they fit, and re-fold when a tab's width changes (count badge update, web font load)
- Update: `Accordion` supports a `dense` prop for a compact trigger row
    - `dense` (default `false`) tightens the trigger padding and drops the title to the `headline-h5` scale

## 0.21.0-beta

- **Breaking change**: `Anchor` (and `PageAnchor`) now use `aria-label`, `aria-labelledby`, `aria-description`, `aria-describedby` attributes instead of `a11yLabel`, `a11yLabeledBy`, `a11yDescription` and `a11yDescribedBy` that were never applied and were removed from their interfaces.
- BugFix: `Modal` without `maxWidth` no longer overflows the viewport on mobile
- Feature: New `NestedNavigation` component family for popover-hosted, multilevel drill-in navigation
    - Designed to be composed inside `Popover.Overlay`, but works standalone too
    - Fully localised
- **Breaking Change**: The `@shoptet/css` package merged into `@shoptet/ui`
  - New root exports: `tokens` and `legacyTokens` (previously from `@shoptet/css`);
  - New subpath exports: `@shoptet/ui/index.less` and `@shoptet/ui/fonts.css`.
- Fix: `ColorPalette`, `ColorPaletteSwatch`, `ReorderableListing`, `ReorderableListingItem` and `Toolbar` are now exported from the package.

- Feature: New `ColorSelect` component — a `ColorPalette` in a responsive overlay: an anchored popover on desktop, a full-screen dialog sheet on mobile
    - `trigger` render prop receives `props` to spread onto the element plus `value` / `open`; the consumer renders and styles it
    - Owns the selected color (`value` / `defaultValue` / `onChange`, hex without `#`) and the overlay open state (`open` / `defaultOpen` / `onOpenChange`); selection and palette edits survive close/reopen
    - Forwards the `ColorPalette` content props, plus `label` for the overlay accessible name and `disabled` for the trigger
    - Fully localised (cs-CZ, de-DE, hu-HU, pl-PL, ro-RO, sk-SK, vi-VN, en-US)

- **Breaking change — `Status` removed**: The legacy `Status` component (and its `StatusProps` type) has been removed. Use `StatusIndicator` instead. `StatusIndicator` renders `.status-indicator` markup (with `.status-indicator--{state}` state modifiers) rather than the old `.status` / `.status--{state}` classes. The `state` union changed to `neutral | notice | positive | warning | critical | informative`; map old states as: `default`/`returned`/`unpaid`/`trackingReturned` → `neutral`, `waiting`/`trackingDeliver` → `notice`, `success`/`paid`/`trackingDelivered` → `positive`, `warning`/`overPaid`/`trackingCreated` → `warning`, `error`/`badAmount`/`trackingRefused`/`trackingCanceled` → `critical`, `informative` → `informative`. For visual parity with the old plain colored dot, pass `symbol={false}`.

- Update: `Button`, the form field family and `CheckboxField` become themeable through new component tokens
    - `border-radius` reads `--borderRadius--button`, `--borderRadius--formField` and `--borderRadius--checkboxField`; defaults are the historical hardcoded values (0 / 0 / 3px), generated into `tokens.css` from `tokens.config.ts`
    - the field family, its row floor (`Form.less`), the in-field loader, the colour picker and the password strength indicator size themselves from `--size--formField` — the control's CONTENT height (24px), to which each consumer adds the two border widths, so the stock 26px box is unchanged
    - nothing renders differently in the package: a theme that overrides these tokens is what changes the look

## 0.20.0-beta

- BugFix: `NumberInput`/`CounterInput` now emit `onChange` for numbers with trailing fractional zeros (e.g. `0.10` → `0.1`; previously held until blur), and the controlled value echoing back no longer reformats the text mid-edit (`0.250` no longer collapses to `0.25` while typing)

- **DOM change — hidden field labels**: `FieldLabel`/`FormRowLabel` drop react-aria `VisuallyHidden` (its `position: absolute` broke layouts). `visuallyHidden`/`labelHidden: true` → label not rendered; `'keepSpace'` → empty `.v2FormField__labelText` span keeps the space. Accessible name moves to `aria-label` on the input; `TextField`/`PasswordField` now pass `label` to the inner input.
  - **Impact on tests**: update queries/snapshots asserting hidden-label markup; `TextField`/`PasswordField` inputs always carry `aria-label`.

- BugFix: Fixed `PerexBox` silently ignoring the `href` prop when `src` was omitted, by making `href` only assignable together with `src` (TypeScript)

- BugFix: `MultiSelect` "select all" now toggles only non-disabled options; already-selected disabled options are left untouched (also applies to keyboard Ctrl/Cmd+A). Public API unchanged.

- Feature: New `Toolbar` component for grouping related interactive controls into an accessible toolbar
    - Accepts `label` or `labeledBy` (one is required) for the `aria-label` / `aria-labelledby` on the `role="toolbar"` element
    - Accepts `orientation` (`'horizontal'` | `'vertical'`, default `'horizontal'`) — controls layout direction and the overflow scroll axis
    - Missing accessible label logs a `console.error` in development only; the component still renders normally in production
    - Exposes `Toolbar.Group` sub-component for grouping related controls within the toolbar — accepts `label` for `aria-label` on the `role="group"` element
- Feature: New `Menu` component for accessible dropdown action menus
    - `trigger` render prop receives button props/state to render any trigger element (e.g. `Button`, `IconButton`)
    - `Menu.Item` renders an action row (`onAction`, `disabled`, `destructive`) with `Menu.Item.Cell` for icon/label layout; `Menu.Divider` separates groups
    - `Menu.Submenu` nests a further `Menu.List` behind a trigger item, supporting unlimited nesting depth
    - Supports controlled (`open` + `onOpenChange`) and uncontrolled (`defaultOpen`) usage, plus `disabled` and `placement`
    - `compact` prop tightens item padding for dense layouts (e.g. icon-only triggers)
    - Full keyboard navigation (Arrow keys, Enter/Space to activate, Escape to close and return focus to the trigger) and ARIA menu semantics

- **Breaking change**: `ContextMenu` is now built on top of the new `Menu` component internally
    - Removed the `divider` prop from `ContextMenu.Item` (`ContextMenuMenuItemProps`) — no replacement is currently exposed on `ContextMenu` itself
    - Everything else on `ContextMenu`'s public API is unchanged
- Update: `Popover.Overlay` now accepts an `elevation` prop (`'default'` | `'high'` | `'low'`, default `'default'`) to control the box-shadow intensity, backed by new `high`/`low` shadow tokens

- Feature: New headless core `Select` and `Combobox` components in `@shoptet/ui-core-web`, with owned keyboard navigation, typeahead, dialog-hosted lists, editable search, and virtual-focus support
  - `Popover.Overlay` and `FloatingPanel` accept `modal` (default `true`); set `modal={false}` when focus remains outside the overlay, such as in an editable combobox
- Feature: New headless core `Dialog` component in `@shoptet/ui-core-web`, with dismissal, focus containment and restore, scroll lock, and accessible title wiring
- Update: `InputDialog` DOM change: the overlay gains an unclassed underlay wrapper element (public API and rendered classes unchanged)
- Update: `SingleSelect` search virtualization supports dynamic row heights and keyboard navigation across off-screen rows
  - The trigger keeps its field label in the accessible name, and every option carries an explicit `aria-selected` so VoiceOver announces selection state

- Update: `DataList` items highlight the virtually focused option (`data-active`) the same way as hovered/focused ones
- Feature: New `SegmentedControl` component for compact mutual-exclusion selection built on top of `RadioGroup`
    - Accepts `options`, `getOptionValue`, and `getOptionLabel` — same accessor pattern as `SingleSelect`
    - `mode` prop (`'textOnly'` | `'iconText'` | `'iconOnly'`, default `'textOnly'`) controls segment layout; `'iconText'` and `'iconOnly'` require `getOptionIcon` and are not available in `sm` size
    - `size` prop (`'lg'` | `'md'` | `'sm'`, default `'md'`) — `lg` 48 px, `md` 32 px, `sm` 26 px outer height
    - `getOptionDisabled` disables individual segments; `disabled` disables the whole group
    - `renderOptionSuffix` appends any ReactNode (e.g. `Tag` counter) after the default icon+label; `renderOption` replaces the entire segment content for fully custom layouts
    - Supports controlled (`value` + `onChange`) and uncontrolled (`defaultValue`) usage
    - Passes unknown props through to the underlying `RadioGroup` via `...rest`

- Feature: New `ReorderableListing` component: Container for 2–N sortable rows with an optional `footer` slot (any ReactNode, e.g. an action button). Requires an `aria-label`. Rows reorder via accessible drag-and-drop (React Aria hooks via the core-web `ReorderableListing` primitive), can be hidden without deletion, and may carry non-draggable subitems that move with their parent. Ships with the presentational `ReorderableListingItem` row, supporting `parent`/`subitem` modes and `default`/`hover`/`disabled`/`hidden`/`dragging` states. Controlled (`items` + `onReorder`) and uncontrolled (`defaultItems`) usage supported.

- **Breaking change**: Removed the `getZipCodePattern` export.

- **DOM change — `Status`**: The rendered HTML structure changed. When `label` or `tooltip` is provided, the indicator is now wrapped in a `<span role="status">` live region with an adjacent label span. When neither is provided, the component renders a bare `<span>` with no wrapper (same as before for the pure-indicator case).
  - **Impact on CSS**: Direct-child selectors targeting `.status` from a parent (e.g. `.parent > .status`) will break when a label or tooltip is present, because `.status` is no longer a direct child.
  - **Impact on tests**: DOM queries asserting on specific element counts or structure around `Status` may need updating.
  - **Impact on layout**: Flex/grid parents now receive a `<span class="status__container">` instead of a bare `.status` span when label or tooltip is used — verify spacing/alignment in affected layouts.
  - **New behavior**: State changes are announced to screen readers via `aria-live="polite"` when a label or tooltip is present.

- Update: `PhoneInput` now renders `type='tel'` (was `text`). Public API unchanged
- Update: `PhoneField` now groups the country selector, dial code and number input in a single semantic `<fieldset>` (a11y improvement). Public API and layout unchanged.
- Update: `Modal` exposes `role="dialog"`, `aria-modal="true"`, and `aria-labelledby` (wired to `Modal.Header` via shared `titleId` context) on the dialog panel and restores focus when closed via `FocusScope restoreFocus`

- **Update**: `RadioField` options no longer wrap the radio input in a `<label>`. Each option now renders a standalone `input[type=radio]` (with `aria-label` and an `id`) and an associated sibling `<label for>` for the click affordance, improving accessibility and cross-platform parity. The accessible name is always present even when the visible label is omitted (e.g. image options).

- Feature: New `ColorPalette` component — popover color picker with a read-only theme palette and an editable user palette
  - Accepts `themeColors` / `myColors` (+ `onMyColorsChange`), group labels, optional `title`, and a single selection across both groups via `value` / `defaultValue` + `onChange` (hex without `#`)
  - User palette toggles between a swatch grid and edit rows (hex input + native color picker + remove) with an "Add color" button; the theme group offers an "Add" action that copies the selected theme color into the user palette
  - Per-color `validation` map (`warning` / `error`); render inside a `Popover.Overlay` — popover hosting stays with the consumer
  - Keyboard: every swatch is a Tab stop, Arrow keys move focus within a group (wrapping, disabled swatches skipped), selection is indicated by border + checkmark (color-blind safe)

- Feature: New `ColorPaletteSwatch` component — standalone selectable color chip with `selected`, `disabled` and `validation` states; light colors automatically get a dark checkmark and a hairline border

## 0.19.0-beta

- Update: added support for nested submenus via `SubmenuTrigger` + `Menu.Popover` / `Menu.List`

- Feature: New core `Toast` primitive in `@shoptet/ui-core-web` (`Toast`, `Toast.Root`, `Toast.Title`, `Toast.Description`)
  - Enter/exit driven by `[data-state='opened'|'closed']` on the root element with CSS keyframes; honors `prefers-reduced-motion: reduce` by collapsing the animation duration to `0ms`
  - `Toast.Root` defaults to `role='status'` (override with `role='alert'` for assertive announcements), sets `aria-atomic='true'`, and waits for the exit animation via `useOnAnimationEnd` before firing `onExitComplete` so the queue can drop the entry cleanly
  - `Toast.Title` and `Toast.Description` register a stable `id` (via `useId`) with the container; `Toast.Root` automatically wires `aria-labelledby` / `aria-describedby` only when the corresponding slot is rendered
  
- Update: `SystemMessage` now renders on top of the core `Toast` primitive from `@shoptet/ui-core-web` (with `open={true}`)
  - Public API is unchanged (`level`, `title`, `description`, `controls`, `renderDescription`)
  - Title and description are now associated with the toast root via `aria-labelledby` / `aria-describedby` (a11y improvement) in addition to `role='status'` and `aria-atomic='true'`
  - No visual or layout changes — DOM structure and CSS class names remain the same; new attributes (`role`, `aria-atomic`, `aria-labelledby`, `aria-describedby`, `data-state`) and CSS keyframes (`systemMessageSlideIn` / `systemMessageSlideOut`) plus a `prefers-reduced-motion` block were added to support the toast lifecycle


- Feature: `MultiSelectField` now accepts an internal `UNSAFE_addon` prop for rendering an addon to the right of the input (mirroring `SingleSelectField`)
- Feature: `RangeField` now accepts an internal `UNSAFE_addon` prop for rendering an addon to the right of the input (mirroring `SingleSelectField`)

- Feature: New `Divider` component for rendering a semantic separator between content sections
  - Supports `horizontal` (default) and `vertical` orientations via the `orientation` prop

- Update: `Textarea` accessibility and `Field` integration improvements
  - Integrates with `Field` context — inherits `disabled`, `readOnly`, `required`, and `invalid` state from a parent `<Field>`
  - Sets `aria-invalid` and `aria-required` automatically based on state
  - Now requires an accessible label — pass `label` or wrap in `<Field>` with `<Field.Label>`; throws otherwise

- Feature: New `CounterInput` component — number input with inline increment/decrement buttons
  - Controlled (`value` + `onChange`) and uncontrolled (`defaultValue`) modes
  - `min`, `max`, `step` props with buttons auto-disabled at boundaries
  - Width variants: `xs` (default), `sm`, `md`
  - States: enabled, focused, disabled, error, warning
  - Optional `afterComponent` slot rendered after the control
  - Fully localised increment/decrement ARIA labels (cs-CZ, de-DE, hu-HU, pl-PL, ro-RO, sk-SK, vi-VN, en-US)
- Feature: New `CounterField` component — `CounterInput` wrapped in `FormRow` with label, hint, error and warning helper text
- Feature: New icon `shp-plus-small`

- Update: `Tooltip` now respects `prefers-reduced-motion` for entry/exit animations, and the arrow is marked `aria-hidden` so screen readers skip it. Public API unchanged.

- Feature: New `CategoryFilter` component for navigating hierarchical category trees
  - Accepts a generic `options` tree with selector functions: `getOptionValue`, `getOptionLabel`, `getOptionChildren`
  - Controlled (`value` + `onChange`) and uncontrolled (`defaultValue`) modes; active path is computed internally from the selected value
  - `onChange` receives the selected item's id (`string | number`)
  - Navigation links via `getOptionLinkProps` returning `{ href, onClick, target }` — router-agnostic, compatible with Inertia's `useInertiaLink`
  - Configurable root icon via `rootIcon` (pass `false` to hide); per-item menu icons via `getOptionIcon` selector
  - Dropdown auto-closes on selection (configurable via `closeOnAction`)
  - Fully localised (cs-CZ, de-DE, hu-HU, pl-PL, ro-RO, sk-SK, vi-VN, en-US)

- Refactor Tokens:
  - **Breaking change**: Renamed `IconType` to `IconName` across our codebase

## 0.18.4-beta

- Fix: package.json now correctly specifies `main` and `exports` fields to point to the build output, ensuring proper module resolution in various environments.

## 0.18.3-beta

- Feature: New `CodeSnippet` component for displaying code or URLs with a copy-to-clipboard button
    - Accepts `children` as the displayed content and an optional `copyValue` for the clipboard text
    - Optional `maxLines` prop collapses long content with a fade overlay and a "Show more / Show less" toggle
    - Optional `isUrl` prop switches the font from JetBrains Mono to Inter (better suited for URLs)
    - Optional `onCopy` callback fired on successful clipboard write
    - Optional `onCopyError` callback fired when the clipboard write fails (e.g. permission denied)
    - Fully localised (cs-CZ, de-DE, hu-HU, pl-PL, ro-RO, sk-SK, vi-VN, en-US)
- Feature: JetBrains Mono font added (weights 100–800, normal and italic)
- Feature: New `ImageCrop` component for interactive image cropping with rectangular or round stencil, configurable aspect ratio, wrapper sizing, and `CropperRef` access through `ref` and `onChange`.
- Feature: New `Image` component with aspect-ratio control, size presets (sm/md/lg), and responsive mode for admin usage.
- Feature: Added image export helpers `cropImageToCanvas`, `cropImageToBlob`, and `cropImageToFile`, together with exported types `CropImageExportOptions`, `CropResult`, and `PixelCropArea`.
- Update: `FileInput.Item` now optionally renders an image thumbnail preview (for image files) when `showImagePreview` is enabled (default: `false`), while preserving the existing filename button and click-to-replace behavior.
- Update: Added image preview source detection utility `getImagePreviewSource` (used by `FileInput.Item` when `showImagePreview` is enabled) for data URLs and common image file extensions.
- Fix: `FileField` now correctly propagates `error` and `warning` booleans to each `FileInput.Item` for both string and per-file array helper messages.
- Fix: `labelHidden` is now passed to `FormRow` in `FileField` and is no longer forwarded to the native `<input>` element.
- Update: Added/adjusted `FileField` preview styles, including button-based preview rendering and 4:3 aspect-ratio-based sizing.
- Added support for vertical orientation in `RadioGroup` and `RadioField` components.
- `SingleSelect` and `SingleSelectField` now support virtualization for improved performance with large datasets.

## 0.18.2-beta

- Feature: New icons `shp-ai`, `shp-calendar-check`, and `shp-sales-channels`
- Update: Improved unavailable-date handling in `DatePicker` input and `DateField` by exposing disabled days more clearly and preventing month navigation when no selectable date exists in adjacent months.
- Feature: New `Tree` component for displaying hierarchical data is now available.
- Feature: New `ContextMenu` component for displaying contextual actions is now available.
- Update: `Section` component now supports additional header content
- Update: `IconButton` extended with prop `iconSize` which determines icon size inside button

## 0.18.1-beta

- Fix: Improved `NumberInput` component to better handle partial number inputs during typing with enhanced validation and automatic normalization:
    - Added support for partial inputs like "+", "-", ".", "," while typing
    - Implemented automatic locale-based formatting on blur for valid numeric input
    - Enhanced paste operation handling with character-by-character validation
    - Added internal state management to independently handle display value and parsed numeric value

## 0.18.0-beta

- Fix: Added fallback to `PhoneField` country names for unsupported locales

- Exported 11 new standalone input components (`Checkbox`, `ColorInput`, `DatePicker`, `EmailInput`, `MultiSelect`, `NumberInput`, `PasswordInput`, `PhoneInput`, `SearchInput`, `SingleSelect`, `Textarea`, `TextInput`) and their corresponding TypeScript types

- Update: Added optional `divider` prop to `H3`

- **Breaking change:** `DateField`
    - Deleted prop `dialogLabel`
    - Added prop `label` typed as `string`

- **Breaking change:** `ColorField`
    - Deleted prop `loading`

- **Breaking change:** `FormRow`, `CheckboxField`, `ColorField`, `DateField`, `EmailField`, `FileField`, `MultiSelectField`, `NumberField`, `PasswordField`, `PhoneField`, `RangeField`, `SingleSelectField`, `StaticField`, `SwitchField`, `TextField`, `TextareaField`
    - Deleted prop `UNSAFE_noMargins`

## 0.17.0-beta

- Update: Possibility to add `name` attribute to `SingleSelectField`
- Feature: New `RangeInput` and `RangeField` components
- **Breaking change**: `RadioFieldOption` and `Radio` removed. Use `RadioField`, `RadioGroup` or `RadioOption` instead

- Added new components `RadioGroup` and `RadioOption`

- **Breaking change**: Refactored `RadioField` component API:
  - The props have changed to align with the new `RadioGroup` API.
  - Old props such as `options`, `onChange`, and structure of option definitions have been replaced or significantly modified.
  - Usage now requires passing options and handlers compatible with `RadioGroup`.
  - See the updated documentation/examples for migration guidance.

- **Breaking change**: `Card` props `title` and `footer` removed
- **Breaking change**: Created `Card` subcomponents `Card.Header`, `Card.Title`, `Card.Content` and `Card.Footer`

- **Breaking change:**: New callback structure in `NumberField`
    - `onChange?: (value: number | null, event?: React.ChangeEvent<HTMLInputElement>) => void;`
    - `onBlur?: (value: number | null, event?: React.FocusEvent<HTMLInputElement>) => void;`
    - `onFocus?: (value: number | null, event?: React.FocusEvent<HTMLInputElement>) => void;`

- **Breaking change:**: Using the `LocalizationProvider` is now mandatory when using the library. Make sure to wrap your application with it and provide the locale prop with one of the supported locales.

## 0.16.1-beta

- BugFix: Fixed `useScreenHasMinWidth` hook not working in cross-origin iframes.

## 0.16.0-beta

- **Breaking change**: Introduced branded type `RichText` to restrict passing content to props in following components: `description` prop in `ActionCard`, `description` prop in `CTABanner`, `hint` prop in `FormRowHelperText`, `description` prop in `LandingPage.Section` and `summary` prop in `Table.Pagination`
- **Breaking change**: Changed type of the following props to `string`: `title` prop in `LandingPage.Section`, `title` prop in `ReviewCard`, `title` prop in `Section`
- Update: Removed styles causing animation on hover in `SystemMessage`

## 0.15.0-beta

- **Breaking change**: `SingleSelectInput` has renamed prop `getTextLabel` to `getOptionLabel`
- **Breaking change**: `SingleSelectInput` has renamed prop `getKey` to `getOptionValue`
- **Breaking change**: `SingleSelectInput` has renamed prop `getChildren` to `getGroupOptions`
- **Breaking change**: `SingleSelectInput` has renamed prop `disabledKeys` to `disabledValues`
- **Breaking change**: `MultiSelect` has renamed prop `getTextLabel` to `getOptionLabel`
- **Breaking change**: `MultiSelect` has renamed prop `getKey` to `getOptionValue`
- **Breaking change**: `MultiSelect` has renamed prop `getChildren` to `getGroupOptions`
- **Breaking change**: `MultiSelect` has renamed prop `disabledKeys` to `disabledValues`
- **Breaking change**: Added translations for the following components in supported locales: `FileField`, `InputDialog`, `PasswordField`, `PhoneField`, `SingleSelectInput`, `Filter`, `DatePicker`, `MultiSelect`, `SectionControls`, `MassActions`, `Pagination.Jump`, `Pagination.Limits`, `TableBody.Empty`, `TableEmpty` and `TableFilterCollapsible`

## 0.14.3-beta

- Update: The `<SystemMessage/>` component now has a new prop `renderDescription`, which defines how the description is wrapped—useful for providing complex HTML.

## 0.14.2-beta

- Fix: `MultiSelectField` in `dropdown` variant would not open on large breakpoints
- Fix: Use the width of the topmost window for breakpoint computation (e.g. for components in `iframe`s)
- Added support for React 19

## 0.14.1-beta

- Update: `variant` prop to `Typography` components.
- Fix: `FileField` now does not infinitely rerender on value change in controlled mode.
- Fix: `FileField` now correctly detects duplicated files.

## 0.14.0-alpha

- **Breaking change**: `SelectField` and `Select` are now removed.
- **Breaking change**: `StatsCard` icon to accept any icon from library's icon set.
- Added optional `maxWidth` prop to `Modal`, which sets the maximal width of modal container to 600px.

## 0.13.0-alpha

- **Breaking Change**: Renamed `setActiveTabId` handler prop in `Tabs` to `onTabChange` and added triggered event
- Added optional `url` attribute to `TabType`
- The `PromoHero` and `USPCard` components now have `imageFit` prop to control image fit
- Added optional `isNumeric` prop to `Tag`, which applies the same width to all numeric characters
- BugFix: `SingleSelect` to properly use controlled state instead of local one when value set to null.
- Update: `SearchInput` added `xs` size
- Update: `SingleSelectField` now has `nullable` property to be able to select nothing in `picker` mode.
- Update: `SingleSelectField` `renderValue` function now passes down labelId for improved accessibility.
- Deprecation: `SelectField` is now deprecated, use `SingleSelectField` instead.

## 0.12.0-alpha

- **Breaking Change**: Refactored `useTabsOverflow` hook (renamed from `usePriorityPlusNavigation`)
- Added new `Preview` and `Preview.Image` components.
- Added size xs and xxs tokens for `Grid`, `Spacer` and `Stack` components.
- Added `isFullWidth` prop to `FormRow`, which allows the row to span the full width of its container.
- Allow `Buttons` and `Anchors` in `Modal.Footer`
- Bugfix: Corrected `PasswordField` interaction with Safari's password manager
- Bugfix: `Tabs` to properly recalculate overflowed tabs on resize
- Bugfix: Form fields with `width` prop `full` (`NumberField`, `SelectAddField`, `SelectField`, `SingleSelectField`, `TextField` and `TextareaField`) now stretch through their whole container when applied.

## 0.11.2-alpha

- Value of `SingleSelectField`  is now a generic (extending `string | number`)
- `SelectAdd` now uses `SingleSelectInput` component
- Added a new `balance` type to `TableCell` and `TableHeaderCell` component.

## 0.11.1-alpha

- BugFix: SingleSelect to properly use prop state of value and query props instead of local one when set to null.
- Added option of `250` to `ItemsPerPage` of the `Pagination` component.

## 0.11.0-alpha

- **Breaking change:** Removed export of input components like `Checkbox`, `Switch` or `Select` - use their `*Field` counterparts instead.
- **Breaking change:** Fix: typography components no longer expose `className` prop.
- Buttons of `ActionCard` now support full Anchor/Button interfaces.

## 0.10.1-alpha

- Added `shp-link-on`, `shp-link-off`, `shp-csv`, `shp-isdoc` icons
- Added a new `MultiSelectField` component
- Added `SingleSelectField` component

## 0.10.0-alpha

- **Breaking change:** Refactored `DateField` component with a different api as opposed to previously used native date input
- Added `LocalizationProvider` through which it is possible to override the language of `DateField` and other accesibility related translations in the components

## 0.9.0-alpha

- **Breaking change:** Typography components use appearance instead of `as`;
- **Breaking change:** Split `Text` into `Paragraph` (previously `as='p'`) and `Text` components (previously `as='span'`)
- **Breaking change:** Split `Modal` component into `Modal` component with `Header`, `Content` and `Footer` sub-components;
- Add `Strong` typography component
- Added `ReviewCard` component;

## 0.8.1-alpha

- Added `shp-multishop` icon
- New `Avatar` component
- Allow `SearchInput` icon to be hidden
- Exposed `FormRow.Label` sub-component
- Improve `IconButton` accessibility and display tooltip on hover when label is provided

## 0.8.0-alpha

- Added `shp-code`, `shp-drag`, `shp-inspect`, `shp-layout` and `shp-logout` icons
- **Breaking change:** Rename `activeTabId` and `setActiveTabId` props in `Tabs`

## 0.7.0-alpha

- **Breaking change:** Removed `invalid` prop, invalid state is triggered by the `error` prop in form fields
- Added `warning` prop to form inputs to display a border in warning state
- Added `filled` prop to `PasswordField` component & ability to show/hide password
- **Breaking change:** Rename RadioFiled to RadioFieldOption
- **Breaking change:** Rename RadioGroupField to RadioField
- **Breaking change** SystemMessage no longer parses `description` as html string
- Improve `Stepper` component to improve fitting of long labels
- Display `Loader` in Button component when `isLoading` prop is true
- Added `Loader`  in `IconButton` component when `isLoading` prop is true
- Fix cursor for `Tabs` links
- `SearchInput` primitive component added
- Added `tooltipPlacement` prop to `RatingsOverview` component
- **Breaking change:** Reduced `DropdownButton` props to relevant ones; `variant` prop to have only `primary` and `secondary` options.
- **Breaking change:** Removed Input and TextArea components (instead use respective *Field components)
- **Breaking change:** Changed defaults for `Stack` `align` to `stretch` and `orientation` to `stretch`
- Bugfix: `Dropdown.Item` now renders even if wrapped in another component
- Change secondary css in `Tag`
- Add size to `Tag`
- Added icon `shoptet-symbol`
- **Breaking change:** Rename `Toggle` to `Switch`
- **Breaking change:** Rename `ToggleButton` to `Toggle`
- Added PrintPosition component

## 0.6.2-alpha

- Fix `Tabs` overflow dropdown styling

## 0.6.1-alpha

- Fix Build
- Added `FileFiled` component, together with `getFileName` and `getFileExtension` utils
- SystemMessage's props `description` is now a `ReactNode`

## 0.6.0-alpha

- Added SelectAddField component
- **Breaking change**: moved Option to a separate component
- **Breaking change**: in Select component options became a prop
- Added `title` attribute for `Icon` component
- Added `ReactNode` type to `LabelAfter` component
- Added Radio and RadioGroupField components
- Added `TableEmpty` component (placeholder for empty tables)
- **Breaking change**: Changed mapping of gap prop in `Stack`, `Spacer` and `Grid` components
- Moved `Status` component to UI Kit
- **Breaking change**: Removed icons: `package-closed`, `package-open`
- Added icon: `parcels`
- Changed icon: `products`
- Added `disabled` prop to `Modal` buttons
- **Breaking change**: Renamed `addon` prop to `UNSAFE_addon` in `TextField`, `TextareaField` and `NumberField`
- Added `warning` and `hint` props for all input components
- Added `RatingsOverview` component
- Added `List.BasicItem` component
- **Breaking change**: Changed `text` prop to `children`, `imgSrc` to `src` and `url` to `href` in `PerexBox` component

## 0.5.0-alpha

- **Breaking change**: `size` prop change to `width` on inputs fields, textarea, and select components
- For `List` added possibility to enable/disable divider per item
- Change composedPath in `useOutsideElementClick`
- Added `TableHeaderCellTitle` component

## 0.4.0-alpha

- **Breaking change**: Change children prop for CTABanner
- **Breaking change**: Change children prop for USPCard
- **Breaking change**: Refactored Dropdown into DropdownButton with adjusted API
- **Breaking change**: Removed Popover component
- Add `Accordion` component
- Add `secondary` and `action` to `variant` props for `IconButton` component
- Add `Grid` component
- Add `Stepper` component
- Add `List` component
- Add `Tag` component
- Add `ActionCard` component
- SelectField supports list as options (in addition to a record)
- Add `Stack` component
- Add `Spacer` component
- **Breaking change**: Rename `ResponsiveGridProps` to `GridProps`
- Add `Checkbox` component
- Implemented indeterminate state for `CheckboxField`
- Add `:host` to root css variables

## 0.3.1-alpha

- Remove shoptet `@shoptet/css` from dependencies

## 0.3.0-alpha

- Added item wrapping to `Tabs`.
- Added Typography component [minor].
- Add Icon component.
- Change icon props from string to IconType in IconButton.
- Add variant to IconButton.
- Added Anchor component.
- **Breaking change**: Removed labelAfter prop from Toggle component
- **Breaking change**: Renamed Spinner to Loader and loader appearance update.
- **Breaking change**: Remove size from CheckboxField and RadioField
- **Breaking change**: Rename TableHeader and TableHeaderCell
- **Breaking change**: Rename TableHead to TableHeader
- **Breaking change**: ButtonLink component was removed (use Anchor with a `button` prop instead)
- Add default lang For PhoneField
- **Breaking change**: Removed Help component
- Add isLoading to Button
- Add Promo Hero component.
- Add `USPCard` component
- Add `CTABanner` component
- Add and unifying Variant, Size and Level types
- **Breaking change**: Change size props for Loader and Text

## 0.2.0-alpha

- Add License to files.
- **Breaking change**: Removed classname prop from all ui Table components.
- **Breaking change**: Removed classname prop from all ui Field components.
- **Breaking change**: Removed classname prop from all ui Button components.
- **Breaking change**: Removed classname prop from the rest of the ui components.
- **Breaking change**: Renamed Spinner to Loader and loader appearance update.