@synerise/ds-format-picker 2.0.7 → 2.1.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.1.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-format-picker@2.0.7...@synerise/ds-format-picker@2.1.0) (2026-10-09)
+
+
+### Features
+
+* **format-picker:** placeholder and clear action ([8475163](https://github.com/Synerise/synerise-design/commit/8475163f9dbd02c1d60e3aaca30aa7ec3f49df78))
+
+
+
+
+
 ## [2.0.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-format-picker@2.0.6...@synerise/ds-format-picker@2.0.7) (2026-09-24)
 
 **Note:** Version bump only for package @synerise/ds-format-picker

package/CLAUDE.md

@@ -6,11 +6,12 @@
 
 ```
 src/
- FormatPicker.tsx — main component; trigger button + Dropdown shell
+ FormatPicker.tsx — main component; trigger button + Dropdown shell + optional clear icon
+ FormatPicker.styles.ts — trigger / clear-icon layout
  FomartPicker.types.ts — all types (NOTE: filename typo: Fomart vs Format)
  index.ts — public exports
  FormatSettings/
- FormatSettings.tsx — dropdown overlay: format buttons, currency picker, checkboxes, footer
+ FormatSettings.tsx — dropdown overlay: format buttons, currency menu (DropdownMenu), checkboxes, footer
  FormatSettings.types.ts — FormatSettingsProps (internal)
  FormatSettings.styles.ts — all styled components for the settings panel
  __specs__/
@@ -37,6 +38,8 @@ src/
 | `buttonType` | `string` | `'tertiary'` | Ant Design / DS button type for the trigger button |
 | `disabled` | `boolean` | — | Disables the trigger button and all controls inside the panel |
 | `maxFixedLength` | `number` | — | Upper bound for decimal places (increment is blocked when reached) |
+| `isEmpty` | `boolean` | `false` | No format chosen yet: trigger shows `texts.placeholder`; the panel still edits `format` |
+| `onClear` | `() => void` | — | If provided, renders a red `Close3S` clear icon (tooltip and `aria-label` `texts.clear`) in the trigger while a format is set and the picker is enabled |
 
 ### `FormatPickerProps`
 
@@ -56,7 +59,7 @@ Shape of the `format` prop:
 
 ### `FormatPickerTexts` (i18n defaults)
 
-All fields are `ReactNode` except `currencyMenuItemPrefix` which is `string`.
+All fields are `ReactNode` except `currencyMenuItemPrefix` and `clear`, which are `string`.
 
 | Key | Default |
 |-----|---------|
@@ -69,6 +72,8 @@ All fields are `ReactNode` except `currencyMenuItemPrefix` which is `string`.
 | `useSeparator` | `'Use 1000 separator'` |
 | `compactNumbers` | `'Use compact numbers'` |
 | `currencyMenuItemPrefix` | `'e.g.'` |
+| `placeholder` | `'Set format'` |
+| `clear` | `'Clear'` |
 
 ### `CurrencyConfig`
 
@@ -104,24 +109,24 @@ const [format, setFormat] = useState<FormattingValue>({
 
 `FormatSettings.styles.ts` — all styles for the dropdown panel. Uses `theme.palette` tokens (`white`, `grey-050`, `grey-100`, `grey-300`, `grey-500`, `grey-700`). Hardcoded `min-width: 268px` for the panel container.
 
-> **Note:** `SuffixWrapper` is imported from `@synerise/ds-list-item/dist/components/Text/Text.styles` — a fragile deep/internal path.
-
 ## Key dependencies
 
-- `@synerise/ds-dropdown` — wraps the whole component as a click-triggered dropdown overlay
+- `@synerise/ds-dropdown` — wraps the whole component as a click-triggered dropdown overlay; its `DropdownMenu` renders the currency list
 - `@synerise/ds-core` (`useDataFormat`) — `formatValue` utility that applies `NumberToFormatOptions`; requires `DSProvider` in the tree
 - `react-intl` — i18n for all labels; requires `IntlProvider` (supplied by `DSProvider`)
 - `@synerise/ds-button` + `@synerise/ds-button-group` — format-type buttons and decimal-place controls
 - `@synerise/ds-checkbox` — separator and compact-numbers checkboxes
 - `@synerise/ds-radio` — wraps the button-group for format-type selection (value binding)
-- `@synerise/ds-list-item` — currency dropdown rows
+- `@synerise/ds-list-item` — dev-only: the currency-list spec reads the row height from `LIST_ITEM_SIZE_MAPPING`
 
 ## Implementation notes
 
-- **Trigger button label** is always `"{texts.format} {getFormattedValue()}"` — e.g. `"Format 19,000.70"`. The `value` prop is purely for display.
+- **Trigger button label** is `"{texts.format} {getFormattedValue()}"` — e.g. `"Format 19,000.70"` — or `texts.placeholder` while `isEmpty`. The `value` prop is purely for display.
+- **Clear icon** follows `ds-completed-within`: a ghost `single-icon` button absolutely positioned at the trigger's right edge (`FormatPicker.styles.ts`), the trigger padded by 32px so the label never runs under it.
 - **`onFormattedValueChange`** fires via `useEffect` on every change to `format` or `value`; it is not fired on user interaction directly.
 - **`onSetDefault` is optional** — when omitted, the footer (grey bar with "Set default" button) is not rendered at all.
 - **`currenciesConfig` default** is `DEFAULT_CURRENCIES_CONFIG` defined in `FormatSettings.tsx`: USD, EUR, PLN, JPY. Not exported.
+- **Currency list** is a `DropdownMenu` (`@synerise/ds-dropdown`): it shows `CURRENCY_LIST_VISIBLE_ITEMS` (7) rows and scrolls the rest, and always carries the menu's built-in search. `currencyMatchesQuery` matches the label **and** the ISO code (`PLN`, `GBP`…), case-insensitively; "No results" is the menu's empty state. Each row's `suffixel` is the `currencyMenuItemPrefix` + example value.
 - **`CurrencyType` is typed as `string`** (not a union of specific codes). The README's `USD | EUR | PLN | JPY` is only the default config list, not a type constraint.
 - **Filename typo** — the types file is `FomartPicker.types.ts` (missing `t`). The import in `index.ts` matches the typo, so it works, but it should be fixed.
 - **Uses Vitest**.

package/README.md

@@ -49,10 +49,12 @@ import FormatPicker from '@synerise/ds-format-picker'
 | onSetDefault           | If provided, renders a "Set default" footer button     | `() => void`                                | -               |
 | onFormattedValueChange | Called whenever the formatted display value changes    | `(formattedValue: string) => void`          | -               |
 | text                   | Override any subset of UI labels                       | `Partial<FormatPickerTexts>`                | -               |
-| currenciesConfig       | Custom currency list for the cash dropdown             | `CurrencyConfig[]`                          | USD/EUR/PLN/JPY |
+| currenciesConfig       | Custom currency list for the cash dropdown; scrolls past 7 entries, searchable by label or ISO code | `CurrencyConfig[]` | USD/EUR/PLN/JPY |
 | buttonType             | DS button type for the trigger button                  | `string`                                    | `'tertiary'`    |
 | disabled               | Disables the trigger and all panel controls            | `boolean`                                   | -               |
 | maxFixedLength         | Upper bound for decimal places                         | `number`                                    | -               |
+| isEmpty                | No format chosen yet: the trigger shows `texts.placeholder`; the panel still edits `format` | `boolean` | `false` |
+| onClear                | If provided, renders a clear icon in the trigger while a format is set | `() => void` | - |
 
 ### Texts
 
@@ -67,6 +69,8 @@ import FormatPicker from '@synerise/ds-format-picker'
 | useSeparator   | Use 1000 separator checkbox label | `string \| ReactNode` | `Use 1000 separator` |
 | compactNumbers         | Compact numbers checkbox label                         | `string \| ReactNode`    | `Use compact numbers`  |
 | currencyMenuItemPrefix | Prefix shown before the example value in currency rows | `string`                 | `'e.g.'`               |
+| placeholder            | Trigger label while `isEmpty`                          | `string \| ReactNode`    | `Set format`           |
+| clear                  | Tooltip and accessible name of the clear icon          | `string`                 | `Clear`                |
 
 ### FormattingValue
 

package/dist/FomartPicker.types.d.ts

@@ -28,6 +28,10 @@ export type FormatPickerTexts = {
     useSeparator: ReactNode;
     compactNumbers: ReactNode;
     currencyMenuItemPrefix: string;
+    /** Trigger label while `isEmpty` is set. Optional so a full `FormatPickerTexts` object stays valid. */
+    placeholder?: ReactNode;
+    /** Tooltip and accessible name (`aria-label`) of the clear icon, so it must be a plain string. */
+    clear?: string;
 };
 export type FormatPickerProps = {
     format: FormattingValue;
@@ -44,4 +48,14 @@ export type FormatPickerProps = {
     buttonType?: ButtonType;
     disabled?: boolean;
     maxFixedLength?: number;
+    /**
+     * No format has been chosen yet: the trigger shows `texts.placeholder` instead of the formatted
+     * example. The settings panel still edits `format`, so pass the value editing should start from.
+     */
+    isEmpty?: boolean;
+    /**
+     * If provided, a clear icon is rendered inside the trigger while a format is set (`isEmpty` is
+     * falsy and the picker is enabled), mirroring `ds-completed-within`.
+     */
+    onClear?: () => void;
 };

package/dist/FormatPicker.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { FormatPickerProps } from './FomartPicker.types';
-declare const FormatPicker: ({ onUseSeparatorChange, onFixedLengthChange, onDataFormatChange, onCurrencyChange, onCompactNumbersChange, onSetDefault, onFormattedValueChange, value, format, text, currenciesConfig, buttonType, disabled, maxFixedLength, }: FormatPickerProps) => React.JSX.Element;
+declare const FormatPicker: ({ onUseSeparatorChange, onFixedLengthChange, onDataFormatChange, onCurrencyChange, onCompactNumbersChange, onSetDefault, onFormattedValueChange, value, format, text, currenciesConfig, buttonType, disabled, maxFixedLength, isEmpty, onClear, }: FormatPickerProps) => React.JSX.Element;
 export default FormatPicker;

package/dist/FormatPicker.js

@@ -1,10 +1,11 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo, useCallback, useEffect } from "react";
 import { useIntl } from "react-intl";
-import Button from "@synerise/ds-button";
 import { useDataFormat } from "@synerise/ds-core";
 import Dropdown from "@synerise/ds-dropdown";
-import Icon, { HashM } from "@synerise/ds-icon";
+import Icon, { HashM, Close3S } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { FormatPickerWrapper, TriggerButton, ClearButton } from "./FormatPicker.styles.js";
 import FormatSettings from "./FormatSettings/FormatSettings.js";
 const FormatPicker = ({
   onUseSeparatorChange,
@@ -20,7 +21,9 @@ const FormatPicker = ({
   currenciesConfig,
   buttonType = "tertiary",
   disabled,
-  maxFixedLength
+  maxFixedLength,
+  isEmpty = false,
+  onClear
 }) => {
   const intl = useIntl();
   const {
@@ -63,6 +66,14 @@ const FormatPicker = ({
       id: "DS.FORMAT-PICKER.COMPACT-NUMBERS",
       defaultMessage: "Use compact numbers"
     }),
+    placeholder: intl.formatMessage({
+      id: "DS.FORMAT-PICKER.PLACEHOLDER",
+      defaultMessage: "Set format"
+    }),
+    clear: intl.formatMessage({
+      id: "DS.FORMAT-PICKER.CLEAR",
+      defaultMessage: "Clear"
+    }),
     ...text
   }), [text, intl]);
   const getFormattedValue = useCallback((overrideOptions) => {
@@ -107,12 +118,16 @@ const FormatPicker = ({
   useEffect(() => {
     onFormattedValueChange && onFormattedValueChange(getFormattedValue());
   }, [getFormattedValue, onFormattedValueChange]);
-  return /* @__PURE__ */ jsx(Dropdown, { trigger: ["click"], disabled, overlay: /* @__PURE__ */ jsx(FormatSettings, { onCurrencyChange, onFixedLengthChange, onDataFormatChange, onCompactNumbersChange, onUseSeparatorChange, onSetDefault, format, text: texts, currenciesConfig, disabled, getFormattedValue, maxFixedLength }), placement: "topCenter", popoverProps: {
-    testId: "format-picker"
-  }, size: "auto", asChild: true, children: /* @__PURE__ */ jsxs(Button, { type: buttonType, mode: "icon-label", disabled, children: [
-    /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(HashM, {}) }),
-    `${texts.format} ${getFormattedValue()}`
-  ] }) });
+  const showClear = Boolean(onClear) && !isEmpty && !disabled;
+  return /* @__PURE__ */ jsxs(FormatPickerWrapper, { withClear: showClear, children: [
+    /* @__PURE__ */ jsx(Dropdown, { trigger: ["click"], disabled, overlay: /* @__PURE__ */ jsx(FormatSettings, { onCurrencyChange, onFixedLengthChange, onDataFormatChange, onCompactNumbersChange, onUseSeparatorChange, onSetDefault, format, text: texts, currenciesConfig, disabled, getFormattedValue, maxFixedLength }), placement: "topCenter", popoverProps: {
+      testId: "format-picker"
+    }, size: "auto", asChild: true, children: /* @__PURE__ */ jsxs(TriggerButton, { type: buttonType, mode: "icon-label", disabled, "data-testid": "ds-format-picker-trigger", children: [
+      /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(HashM, {}) }),
+      isEmpty ? texts.placeholder : `${texts.format} ${getFormattedValue()}`
+    ] }) }),
+    showClear && /* @__PURE__ */ jsx(Tooltip, { title: texts.clear, children: /* @__PURE__ */ jsx(ClearButton, { mode: "single-icon", type: "ghost", onClick: onClear, "aria-label": texts.clear, "data-testid": "ds-format-picker-clear", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Close3S, {}) }) }) })
+  ] });
 };
 export {
   FormatPicker as default

package/dist/FormatPicker.styles.d.ts

@@ -0,0 +1,6 @@
+import { StyledButton } from '@synerise/ds-button';
+export declare const TriggerButton: StyledButton;
+export declare const ClearButton: StyledButton;
+export declare const FormatPickerWrapper: import('styled-components').StyledComponent<"div", any, {
+    withClear: boolean;
+}, never>;

package/dist/FormatPicker.styles.js

@@ -0,0 +1,20 @@
+import styled, { css } from "styled-components";
+import Button from "@synerise/ds-button";
+import { IconContainer } from "@synerise/ds-icon";
+const TriggerButton = /* @__PURE__ */ styled(Button).withConfig({
+  displayName: "FormatPickerstyles__TriggerButton",
+  componentId: "sc-1sk419c-0"
+})(["transition:padding 0s;"]);
+const ClearButton = /* @__PURE__ */ styled(Button).withConfig({
+  displayName: "FormatPickerstyles__ClearButton",
+  componentId: "sc-1sk419c-1"
+})(["&&&{", "{svg{fill:", ";color:", ";}}&:hover{", "{svg{fill:", " !important;color:", " !important;}}}&:focus{.btn-focus{box-shadow:none;}}}"], IconContainer, (props) => props.theme.palette["red-600"], (props) => props.theme.palette["red-600"], IconContainer, (props) => props.theme.palette["red-600"], (props) => props.theme.palette["red-600"]);
+const FormatPickerWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "FormatPickerstyles__FormatPickerWrapper",
+  componentId: "sc-1sk419c-2"
+})(["display:inline-flex;align-items:center;position:relative;", ";"], (props) => props.withClear && css(["&&&{", "{padding-right:32px;}", "{background-color:transparent !important;position:absolute;right:0;}}"], TriggerButton, ClearButton));
+export {
+  ClearButton,
+  FormatPickerWrapper,
+  TriggerButton
+};

package/dist/FormatSettings/FormatSettings.js

@@ -1,15 +1,15 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
 import { useIntl } from "react-intl";
 import Button from "@synerise/ds-button";
 import ButtonGroup from "@synerise/ds-button-group";
 import Checkbox from "@synerise/ds-checkbox";
-import Dropdown from "@synerise/ds-dropdown";
+import { DropdownMenu } from "@synerise/ds-dropdown";
 import Icon, { CommaDecM, CommaIncM, AngleDownS, HashM, PercentM, Coin2M } from "@synerise/ds-icon";
 import Radio from "@synerise/ds-radio";
 import Tooltip from "@synerise/ds-tooltip";
 import { Title } from "@synerise/ds-typography";
-import { FormatSettingsContainer, FormatSettingsWrapper, FormatSettings as FormatSettings$1, WrapperButtons, FixedLengthButton, FormatOptions, DropdownTrigger, DropdownValue, DropdownWrapper, ListItem, FormatFooter } from "./FormatSettings.styles.js";
+import { CurrencyExample, FormatSettingsContainer, FormatSettingsWrapper, FormatSettings as FormatSettings$1, WrapperButtons, FixedLengthButton, FormatOptions, DropdownTrigger, DropdownValue, FormatFooter } from "./FormatSettings.styles.js";
 const DEFAULT_CURRENCIES_CONFIG = [{
   currency: "USD",
   label: "Dollar (US)"
@@ -23,6 +23,11 @@ const DEFAULT_CURRENCIES_CONFIG = [{
   currency: "JPY",
   label: "Yen (JP)"
 }];
+const CURRENCY_LIST_VISIBLE_ITEMS = 7;
+const currencyMatchesQuery = (item, query) => {
+  const needle = query.toLocaleLowerCase();
+  return item.text.toLocaleLowerCase().includes(needle) || item.currency.toLocaleLowerCase().includes(needle);
+};
 const getFormattingTypes = (intl, text) => [{
   format: "numeric",
   icon: /* @__PURE__ */ jsx(HashM, {}),
@@ -51,9 +56,6 @@ const FormatSettings = ({
   maxFixedLength
 }) => {
   const intl = useIntl();
-  const handleSelectCurrency = (currency) => {
-    onCurrencyChange(currency);
-  };
   const handleDecreaseFixedLength = useCallback(() => {
     if (format.fixedLength > 0) {
       onFixedLengthChange(format.fixedLength - 1);
@@ -69,6 +71,18 @@ const FormatSettings = ({
   const selectedCurrency = useMemo(() => {
     return currenciesConfig.find((currency) => currency.currency === format.currency);
   }, [currenciesConfig, format]);
+  const currencyItems = useMemo(() => currenciesConfig.map(({
+    currency,
+    label
+  }) => ({
+    key: currency,
+    text: label,
+    currency,
+    suffixel: /* @__PURE__ */ jsx(CurrencyExample, { children: `${text.currencyMenuItemPrefix} ${getFormattedValue({
+      currency
+    })}` }),
+    onClick: () => onCurrencyChange(currency)
+  })), [currenciesConfig, getFormattedValue, onCurrencyChange, text.currencyMenuItemPrefix]);
   return /* @__PURE__ */ jsxs(FormatSettingsContainer, { "data-testid": "ds-format-picker-overlay", children: [
     /* @__PURE__ */ jsxs(FormatSettingsWrapper, { children: [
       /* @__PURE__ */ jsx(Title, { level: 6, children: text.header }),
@@ -80,16 +94,9 @@ const FormatSettings = ({
         ] })
       ] }),
       /* @__PURE__ */ jsxs(FormatOptions, { children: [
-        format.dataFormat === "cash" && /* @__PURE__ */ jsx(Dropdown, { trigger: ["click"], disabled, hideOnItemClick: true, popoverProps: {
+        format.dataFormat === "cash" && /* @__PURE__ */ jsx(DropdownMenu, { dataSource: currencyItems, maxVisibleItems: CURRENCY_LIST_VISIBLE_ITEMS, withSearch: true, itemMatchesSearchQuery: currencyMatchesQuery, disabled, popoverProps: {
           testId: "format-picker-settings"
-        }, asChild: true, size: "match-trigger", overlay: /* @__PURE__ */ jsx(DropdownWrapper, { children: currenciesConfig.map(({
-          currency,
-          label
-        }) => /* @__PURE__ */ jsx(ListItem, { suffixel: `${text.currencyMenuItemPrefix} ${getFormattedValue({
-          currency
-        })}`, onClick: () => {
-          handleSelectCurrency(currency);
-        }, children: label }, currency)) }), children: /* @__PURE__ */ jsxs(DropdownTrigger, { "data-testid": "ds-format-picker-currency-trigger", children: [
+        }, asChild: true, size: "match-trigger", children: /* @__PURE__ */ jsxs(DropdownTrigger, { "data-testid": "ds-format-picker-currency-trigger", children: [
           /* @__PURE__ */ jsx(DropdownValue, { children: selectedCurrency?.label }),
           /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleDownS, {}) })
         ] }) }),

package/dist/FormatSettings/FormatSettings.styles.d.ts

@@ -1,5 +1,4 @@
 import { StyledButton } from '@synerise/ds-button';
-import { StyledListItem } from '@synerise/ds-list-item';
 export declare const FormatSettingsContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const FormatSettingsWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const FormatSettings: import('styled-components').StyledComponent<"div", any, {}, never>;
@@ -7,7 +6,6 @@ export declare const FormatOptions: import('styled-components').StyledComponent<
 export declare const FormatFooter: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const DropdownTrigger: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const DropdownValue: import('styled-components').StyledComponent<"span", any, {}, never>;
-export declare const DropdownWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
-export declare const ListItem: StyledListItem;
+export declare const CurrencyExample: import('styled-components').StyledComponent<"span", any, {}, never>;
 export declare const FixedLengthButton: StyledButton;
 export declare const WrapperButtons: import('styled-components').StyledComponent<({ className, style, children, title, description, size, fullWidth, buttonsPosition, disabled, splitMode, compact, error, }: import('@synerise/ds-button-group').ButtonGroupProps) => React.JSX.Element, any, {}, never>;

package/dist/FormatSettings/FormatSettings.styles.js

@@ -1,8 +1,6 @@
 import styled from "styled-components";
 import Button from "@synerise/ds-button";
 import ButtonGroup from "@synerise/ds-button-group";
-import DSListItem from "@synerise/ds-list-item";
-import { SuffixWrapper } from "@synerise/ds-list-item/dist/components/Text/Text.styles";
 const FormatSettingsContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "FormatSettingsstyles__FormatSettingsContainer",
   componentId: "sc-ipk0xd-0"
@@ -31,32 +29,27 @@ const DropdownValue = /* @__PURE__ */ styled.span.withConfig({
   displayName: "FormatSettingsstyles__DropdownValue",
   componentId: "sc-ipk0xd-6"
 })(["font-size:13px;line-height:18px;font-weight:400;color:", ";"], (props) => props.theme.palette["grey-700"]);
-const DropdownWrapper = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "FormatSettingsstyles__DropdownWrapper",
+const CurrencyExample = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "FormatSettingsstyles__CurrencyExample",
   componentId: "sc-ipk0xd-7"
-})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;width:100%;padding:8px;background:", ";"], (props) => props.theme.palette.white);
-const ListItem = /* @__PURE__ */ styled(DSListItem).withConfig({
-  displayName: "FormatSettingsstyles__ListItem",
-  componentId: "sc-ipk0xd-8"
-})(["font-weight:500;width:100%;color:", ";", "{color:", ";font-weight:400;}"], (props) => props.theme.palette["grey-700"], SuffixWrapper, (props) => props.theme.palette["grey-500"]);
+})(["color:", ";font-weight:400;"], (props) => props.theme.palette["grey-500"]);
 const FixedLengthButton = /* @__PURE__ */ styled(Button).withConfig({
   displayName: "FormatSettingsstyles__FixedLengthButton",
-  componentId: "sc-ipk0xd-9"
+  componentId: "sc-ipk0xd-8"
 })(["&&&{padding:4px;}"]);
 const WrapperButtons = /* @__PURE__ */ styled(ButtonGroup).withConfig({
   displayName: "FormatSettingsstyles__WrapperButtons",
-  componentId: "sc-ipk0xd-10"
+  componentId: "sc-ipk0xd-9"
 })(["&&&{padding-left:8px;}"]);
 export {
+  CurrencyExample,
   DropdownTrigger,
   DropdownValue,
-  DropdownWrapper,
   FixedLengthButton,
   FormatFooter,
   FormatOptions,
   FormatSettings,
   FormatSettingsContainer,
   FormatSettingsWrapper,
-  ListItem,
   WrapperButtons
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-format-picker",
-  "version": "2.0.7",
+  "version": "2.1.0",
   "description": "FormatPicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -42,15 +42,14 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^2.1.1",
-    "@synerise/ds-button-group": "^2.0.6",
-    "@synerise/ds-checkbox": "^2.0.6",
-    "@synerise/ds-dropdown": "^2.1.3",
-    "@synerise/ds-icon": "^2.2.0",
-    "@synerise/ds-list-item": "^2.1.3",
-    "@synerise/ds-radio": "^2.0.6",
-    "@synerise/ds-tooltip": "^2.0.6",
-    "@synerise/ds-typography": "^2.0.6",
+    "@synerise/ds-button": "^2.1.2",
+    "@synerise/ds-button-group": "^2.0.7",
+    "@synerise/ds-checkbox": "^2.0.7",
+    "@synerise/ds-dropdown": "^2.1.4",
+    "@synerise/ds-icon": "^2.2.1",
+    "@synerise/ds-radio": "^2.0.7",
+    "@synerise/ds-tooltip": "^2.0.7",
+    "@synerise/ds-typography": "^2.0.7",
     "@synerise/ds-utils": "^2.2.0"
   },
   "peerDependencies": {
@@ -60,5 +59,8 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "6b725db2b0de1a2dfc6e9a3744f6c2fb2a04cc04"
+  "devDependencies": {
+    "@synerise/ds-list-item": "^2.2.0"
+  },
+  "gitHead": "7331c532cf684b40b130328005359a348aa06976"
 }