@synerise/ds-item-picker 1.17.0 → 1.17.2

package/dist/components/ItemPickerTrigger/Trigger.js

@@ -1,132 +1,92 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { forwardRef, useCallback, useMemo } from 'react';
-import Button from '@synerise/ds-button';
-import { theme } from '@synerise/ds-core';
-import Icon, { AngleDownS, Close3S, EditM, WarningFillM } from '@synerise/ds-icon';
-import { InformationCardTooltip } from '@synerise/ds-information-card';
-import Popconfirm from '@synerise/ds-popconfirm';
-import Tooltip from '@synerise/ds-tooltip';
-import { useDefaultTexts } from '../../hooks/useDefaultTexts';
-import * as S from './Trigger.styles';
-var Trigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var selected = _ref.selected,
-    clear = _ref.clear,
-    onClear = _ref.onClear,
-    opened = _ref.opened,
-    placeholder = _ref.placeholder,
-    placeholderIcon = _ref.placeholderIcon,
-    error = _ref.error,
-    disabled = _ref.disabled,
-    openDropdown = _ref.openDropdown,
-    closeDropdown = _ref.closeDropdown,
-    size = _ref.size,
-    changeButtonLabel = _ref.changeButtonLabel,
-    withChangeButton = _ref.withChangeButton,
-    clearConfirmTitle = _ref.clearConfirmTitle,
-    yesText = _ref.yesText,
-    noText = _ref.noText,
-    withClearConfirmation = _ref.withClearConfirmation,
-    texts = _ref.texts,
-    informationCardTooltipProps = _ref.informationCardTooltipProps;
-  var allTexts = useDefaultTexts(_extends({
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo } from "react";
+import Button from "@synerise/ds-button";
+import { theme } from "@synerise/ds-core";
+import Icon, { Close3S, WarningFillM, AngleDownS, EditM } from "@synerise/ds-icon";
+import { InformationCardTooltip } from "@synerise/ds-information-card";
+import Popconfirm from "@synerise/ds-popconfirm";
+import Tooltip from "@synerise/ds-tooltip";
+import { useDefaultTexts } from "../../hooks/useDefaultTexts.js";
+import { ClearIconWrapper, ClearWrapper, AngleIconWrapper, ChangeButtonWrapper, TriggerWrapper, Trigger as Trigger$1, Value, Prefix, ValueText, Placeholder, IconWrapper } from "./Trigger.styles.js";
+const Trigger = forwardRef(({
+  selected,
+  clear,
+  onClear,
+  opened,
+  placeholder,
+  placeholderIcon,
+  error,
+  disabled,
+  openDropdown,
+  closeDropdown,
+  size,
+  changeButtonLabel,
+  withChangeButton,
+  clearConfirmTitle,
+  yesText,
+  noText,
+  withClearConfirmation,
+  texts,
+  informationCardTooltipProps
+}, ref) => {
+  const allTexts = useDefaultTexts({
     yes: yesText,
     no: noText,
-    clearConfirmTitle: clearConfirmTitle,
-    changeButtonLabel: changeButtonLabel,
-    clear: clear
-  }, texts));
-  var handleClear = useCallback(function (event) {
+    clearConfirmTitle,
+    changeButtonLabel,
+    clear,
+    ...texts
+  });
+  const handleClear = useCallback((event) => {
     event.stopPropagation();
     closeDropdown();
     onClear && onClear();
   }, [onClear, closeDropdown]);
-  var renderClear = useMemo(function () {
-    var tooltip = /*#__PURE__*/React.createElement(Tooltip, {
-      title: allTexts.clear
-    }, /*#__PURE__*/React.createElement(S.ClearIconWrapper, {
-      onClick: function onClick(event) {
-        return withClearConfirmation && event.stopPropagation();
-      }
-    }, /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(Close3S, null),
-      color: theme.palette['red-600']
-    })));
+  const renderClear = useMemo(() => {
+    const tooltip = /* @__PURE__ */ jsx(Tooltip, { title: allTexts.clear, children: /* @__PURE__ */ jsx(ClearIconWrapper, { onClick: (event) => withClearConfirmation && event.stopPropagation(), children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Close3S, {}), color: theme.palette["red-600"] }) }) });
     if (selected) {
       if (withClearConfirmation) {
-        return /*#__PURE__*/React.createElement(Popconfirm, {
-          title: allTexts.clearConfirmTitle,
-          okButtonProps: {
-            onClick: handleClear
-          },
-          okText: allTexts.yes,
-          cancelText: allTexts.no,
-          icon: /*#__PURE__*/React.createElement(Icon, {
-            component: /*#__PURE__*/React.createElement(WarningFillM, null),
-            color: theme.palette['yellow-600']
-          })
-        }, tooltip);
+        return /* @__PURE__ */ jsx(Popconfirm, { title: allTexts.clearConfirmTitle, okButtonProps: {
+          onClick: handleClear
+        }, okText: allTexts.yes, cancelText: allTexts.no, icon: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(WarningFillM, {}), color: theme.palette["yellow-600"] }), children: tooltip });
       }
-      return /*#__PURE__*/React.createElement(S.ClearWrapper, {
-        onClick: handleClear,
-        "data-testid": "clear-icon"
-      }, tooltip);
+      return /* @__PURE__ */ jsx(ClearWrapper, { onClick: handleClear, "data-testid": "clear-icon", children: tooltip });
     }
     return null;
   }, [allTexts.clear, allTexts.clearConfirmTitle, allTexts.yes, allTexts.no, selected, withClearConfirmation, handleClear]);
-  var renderAngleIcon = useMemo(function () {
-    return size === 'small' && /*#__PURE__*/React.createElement(S.AngleIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
-      "data-testid": "angle-icon",
-      component: /*#__PURE__*/React.createElement(AngleDownS, null),
-      color: theme.palette['grey-600']
-    }));
+  const renderAngleIcon = useMemo(() => {
+    return size === "small" && /* @__PURE__ */ jsx(AngleIconWrapper, { children: /* @__PURE__ */ jsx(Icon, { "data-testid": "angle-icon", component: /* @__PURE__ */ jsx(AngleDownS, {}), color: theme.palette["grey-600"] }) });
   }, [size]);
-  var handleChangeButtonClick = useCallback(function (event) {
+  const handleChangeButtonClick = useCallback((event) => {
     event.stopPropagation();
     openDropdown();
   }, [openDropdown]);
-  var handleOpen = useCallback(function () {
-    if (!selected || selected && size === 'small' && !withClearConfirmation) {
+  const handleOpen = useCallback(() => {
+    if (!selected || selected && size === "small" && !withClearConfirmation) {
       openDropdown();
     }
   }, [selected, openDropdown, size, withClearConfirmation]);
-  var renderChangeButton = useMemo(function () {
-    return size === 'large' && withChangeButton && /*#__PURE__*/React.createElement(S.ChangeButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
-      disabled: disabled,
-      type: "ghost-primary",
-      mode: "icon-label",
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        component: /*#__PURE__*/React.createElement(EditM, null)
-      }),
-      onClick: handleChangeButtonClick
-    }, allTexts.changeButtonLabel));
+  const renderChangeButton = useMemo(() => {
+    return size === "large" && withChangeButton && /* @__PURE__ */ jsx(ChangeButtonWrapper, { children: /* @__PURE__ */ jsx(Button, { disabled, type: "ghost-primary", mode: "icon-label", icon: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(EditM, {}) }), onClick: handleChangeButtonClick, children: allTexts.changeButtonLabel }) });
   }, [size, disabled, withChangeButton, handleChangeButtonClick, allTexts.changeButtonLabel]);
-  var renderedTrigger = useMemo(function () {
-    return /*#__PURE__*/React.createElement(S.TriggerWrapper, {
-      tabIndex: selected ? undefined : 0,
-      size: size,
-      opened: opened,
-      disabled: disabled,
-      error: error,
-      onClick: handleOpen,
-      selected: Boolean(selected),
-      clearable: Boolean(onClear && renderClear),
-      ref: !informationCardTooltipProps ? ref : undefined
-    }, /*#__PURE__*/React.createElement(S.Trigger, {
-      size: size
-    }, selected ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.Value, null, selected.prefixel && /*#__PURE__*/React.createElement(S.Prefix, {
-      "data-testid": "value-prefixel"
-    }, /*#__PURE__*/React.createElement(React.Fragment, null, selected.prefixel)), /*#__PURE__*/React.createElement(S.ValueText, null, selected.text)), renderChangeButton) : /*#__PURE__*/React.createElement(S.Placeholder, {
-      size: size
-    }, placeholderIcon && /*#__PURE__*/React.createElement(S.Prefix, {
-      "data-testid": "placeholder-icon"
-    }, /*#__PURE__*/React.createElement(Icon, {
-      component: placeholderIcon
-    })), placeholder)), /*#__PURE__*/React.createElement(S.IconWrapper, {
-      size: size
-    }, onClear && renderClear, renderAngleIcon));
-  }, [disabled, error, handleOpen, informationCardTooltipProps, onClear, opened, placeholder, placeholderIcon, ref, renderAngleIcon, renderChangeButton, renderClear, selected, size]);
-  return informationCardTooltipProps ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InformationCardTooltip, _extends({
-    ref: ref
-  }, informationCardTooltipProps), renderedTrigger)) : renderedTrigger;
+  const renderedTrigger = useMemo(() => /* @__PURE__ */ jsxs(TriggerWrapper, { tabIndex: selected ? void 0 : 0, size, opened, disabled, error, onClick: handleOpen, selected: Boolean(selected), clearable: Boolean(onClear && renderClear), ref: !informationCardTooltipProps ? ref : void 0, children: [
+    /* @__PURE__ */ jsx(Trigger$1, { size, children: selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Value, { children: [
+        selected.prefixel && /* @__PURE__ */ jsx(Prefix, { "data-testid": "value-prefixel", children: /* @__PURE__ */ jsx(Fragment, { children: selected.prefixel }) }),
+        /* @__PURE__ */ jsx(ValueText, { children: selected.text })
+      ] }),
+      renderChangeButton
+    ] }) : /* @__PURE__ */ jsxs(Placeholder, { size, children: [
+      placeholderIcon && /* @__PURE__ */ jsx(Prefix, { "data-testid": "placeholder-icon", children: /* @__PURE__ */ jsx(Icon, { component: placeholderIcon }) }),
+      placeholder
+    ] }) }),
+    /* @__PURE__ */ jsxs(IconWrapper, { size, children: [
+      onClear && renderClear,
+      renderAngleIcon
+    ] })
+  ] }), [disabled, error, handleOpen, informationCardTooltipProps, onClear, opened, placeholder, placeholderIcon, ref, renderAngleIcon, renderChangeButton, renderClear, selected, size]);
+  return informationCardTooltipProps ? /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(InformationCardTooltip, { ref, ...informationCardTooltipProps, children: renderedTrigger }) }) : renderedTrigger;
 });
-export default Trigger;
+export {
+  Trigger as default
+};

package/dist/components/ItemPickerTrigger/Trigger.styles.d.ts

@@ -1,4 +1,4 @@
-import { type ItemPickerSize } from '../ItemPickerLegacy/ItemPickerLegacy.types';
+import { ItemPickerSize } from '../ItemPickerLegacy/ItemPickerLegacy.types';
 type TriggerWrapperProps = {
     opened: boolean;
     disabled?: boolean;
@@ -7,21 +7,21 @@ type TriggerWrapperProps = {
     selected: boolean;
     clearable: boolean;
 };
-export declare const ClearIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AngleIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ClearWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const ClearIconWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const AngleIconWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ClearWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const IconWrapper: import('styled-components').StyledComponent<"div", any, {
     size: ItemPickerSize;
 }, never>;
-export declare const Prefix: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Placeholder: import("styled-components").StyledComponent<"div", any, {
+export declare const Prefix: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Placeholder: import('styled-components').StyledComponent<"div", any, {
     size: ItemPickerSize;
 }, never>;
-export declare const Value: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Trigger: import("styled-components").StyledComponent<"div", any, {
+export declare const Value: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Trigger: import('styled-components').StyledComponent<"div", any, {
     size: ItemPickerSize;
 }, never>;
-export declare const TriggerWrapper: import("styled-components").StyledComponent<"div", any, TriggerWrapperProps, never>;
-export declare const ChangeButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ValueText: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const TriggerWrapper: import('styled-components').StyledComponent<"div", any, TriggerWrapperProps, never>;
+export declare const ChangeButtonWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ValueText: import('styled-components').StyledComponent<"span", any, {}, never>;
 export {};

package/dist/components/ItemPickerTrigger/Trigger.styles.js

@@ -1,138 +1,115 @@
-import styled, { css } from 'styled-components';
-var getDefaultStyles = function getDefaultStyles(props) {
-  if (props.size === 'small') {
-    return "box-shadow: inset 0 0 0 1px " + props.theme.palette['grey-400'] + ";";
+import styled, { css } from "styled-components";
+const getDefaultStyles = (props) => {
+  if (props.size === "small") {
+    return `box-shadow: inset 0 0 0 1px ${props.theme.palette["grey-400"]};`;
   }
-  return "border: 1px dashed " + props.theme.palette['grey-400'] + ";";
+  return `border: 1px dashed ${props.theme.palette["grey-400"]};`;
 };
-var getHoverStyles = function getHoverStyles(props) {
-  if (props.size === 'small') {
-    return "box-shadow: inset 0 0 0 1px " + props.theme.palette['grey-500'] + ";";
+const getHoverStyles = (props) => {
+  if (props.size === "small") {
+    return `box-shadow: inset 0 0 0 1px ${props.theme.palette["grey-500"]};`;
   }
-  return "border: 1px dashed " + props.theme.palette['grey-500'] + ";";
+  return `border: 1px dashed ${props.theme.palette["grey-500"]};`;
 };
-var getErrorStyles = function getErrorStyles(props) {
-  if (props.size === 'small') {
-    return "box-shadow: inset 0 0 0 1px " + props.theme.palette['red-600'] + ";";
+const getErrorStyles = (props) => {
+  if (props.size === "small") {
+    return `box-shadow: inset 0 0 0 1px ${props.theme.palette["red-600"]};`;
   }
-  return "border: 1px dashed " + props.theme.palette['red-600'] + ";";
+  return `border: 1px dashed ${props.theme.palette["red-600"]};`;
 };
-var getFocusStyles = function getFocusStyles(props) {
-  if (props.size === 'small') {
-    return "box-shadow: inset 0 0 0 2px " + props.theme.palette['blue-600'] + ";";
+const getFocusStyles = (props) => {
+  if (props.size === "small") {
+    return `box-shadow: inset 0 0 0 2px ${props.theme.palette["blue-600"]};`;
   }
-  return "border: 1px dashed " + props.theme.palette['blue-600'] + ";";
+  return `border: 1px dashed ${props.theme.palette["blue-600"]};`;
 };
-export var ClearIconWrapper = styled.div.withConfig({
+const ClearIconWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Triggerstyles__ClearIconWrapper",
   componentId: "sc-1t1uce7-0"
 })([""]);
-export var AngleIconWrapper = styled.div.withConfig({
+const AngleIconWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Triggerstyles__AngleIconWrapper",
   componentId: "sc-1t1uce7-1"
 })([""]);
-export var ClearWrapper = styled.div.withConfig({
+const ClearWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Triggerstyles__ClearWrapper",
   componentId: "sc-1t1uce7-2"
 })(["position:relative;display:flex;cursor:pointer;"]);
-export var IconWrapper = styled.div.withConfig({
+const IconWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Triggerstyles__IconWrapper",
   componentId: "sc-1t1uce7-3"
-})(["top:", ";right:", ";"], function (props) {
-  return props.size === 'small' ? '4px' : '12px';
-}, function (props) {
-  return props.size === 'small' ? '8px' : '12px';
-});
-export var Prefix = styled.div.withConfig({
+})(["top:", ";right:", ";"], (props) => props.size === "small" ? "4px" : "12px", (props) => props.size === "small" ? "8px" : "12px");
+const Prefix = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Triggerstyles__Prefix",
   componentId: "sc-1t1uce7-4"
 })(["width:24px;height:24px;margin-right:8px;display:flex;align-items:center;justify-content:center;"]);
-export var Placeholder = styled.div.withConfig({
+const Placeholder = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Triggerstyles__Placeholder",
   componentId: "sc-1t1uce7-5"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex:1;color:", ";padding:0 0 0 4px;", "{svg{fill:", ";color:", ";}}&:hover{color:", ";", "{svg{fill:", ";color:", ";}}}"], function (props) {
-  return props.theme.palette['grey-500'];
-}, Prefix, function (props) {
-  return props.theme.palette['grey-500'];
-}, function (props) {
-  return props.theme.palette['grey-500'];
-}, function (props) {
-  return props.size === 'large' ? props.theme.palette['grey-600'] : props.theme.palette['grey-500'];
-}, Prefix, function (props) {
-  return props.theme.palette['grey-600'];
-}, function (props) {
-  return props.theme.palette['grey-600'];
-});
-export var Value = styled.div.withConfig({
+})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex:1;color:", ";padding:0 0 0 4px;", "{svg{fill:", ";color:", ";}}&:hover{color:", ";", "{svg{fill:", ";color:", ";}}}"], (props) => props.theme.palette["grey-500"], Prefix, (props) => props.theme.palette["grey-500"], (props) => props.theme.palette["grey-500"], (props) => props.size === "large" ? props.theme.palette["grey-600"] : props.theme.palette["grey-500"], Prefix, (props) => props.theme.palette["grey-600"], (props) => props.theme.palette["grey-600"]);
+const Value = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Triggerstyles__Value",
   componentId: "sc-1t1uce7-6"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex:1;color:", ";max-width:100%;overflow:hidden;padding:0 0 0 4px;", "{svg{fill:", ";color:", ";}}"], function (props) {
-  return props.theme.palette['grey-800'];
-}, Prefix, function (props) {
-  return props.theme.palette['grey-600'];
-}, function (props) {
-  return props.theme.palette['grey-600'];
-});
-export var Trigger = styled.div.withConfig({
+})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex:1;color:", ";max-width:100%;overflow:hidden;padding:0 0 0 4px;", "{svg{fill:", ";color:", ";}}"], (props) => props.theme.palette["grey-800"], Prefix, (props) => props.theme.palette["grey-600"], (props) => props.theme.palette["grey-600"]);
+const Trigger = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Triggerstyles__Trigger",
   componentId: "sc-1t1uce7-7"
-})(["max-width:100%;width:100%;overflow:hidden;border-radius:3px;height:", ";display:flex;align-items:center;justify-content:flex-start;position:relative;transition:all 0.3s ease;font-weight:", ";"], function (props) {
-  return props.size === 'small' ? '32px' : '48px';
-}, function (props) {
-  return props.size === 'small' ? '400' : '500';
-});
-export var TriggerWrapper = styled.div.withConfig({
+})(["max-width:100%;width:100%;overflow:hidden;border-radius:3px;height:", ";display:flex;align-items:center;justify-content:flex-start;position:relative;transition:all 0.3s ease;font-weight:", ";"], (props) => props.size === "small" ? "32px" : "48px", (props) => props.size === "small" ? "400" : "500");
+const TriggerWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Triggerstyles__TriggerWrapper",
   componentId: "sc-1t1uce7-8"
-})(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;cursor:", ";pointer-events:", ";position:relative;border-radius:3px;transition:all 0.3s ease;padding ", ";background-color:", ";", " ", " &:hover{", ";", "}&:focus{background-color:", ";", ";}&&{", ";", " ", ";", ";}"], function (props) {
+})(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;cursor:", ";pointer-events:", ";position:relative;border-radius:3px;transition:all 0.3s ease;padding ", ";background-color:", ";", " ", " &:hover{", ";", "}&:focus{background-color:", ";", ";}&&{", ";", " ", ";", ";}"], (props) => {
   if (props.disabled) {
-    return 'not-allowed';
+    return "not-allowed";
   }
   if (props.selected) {
-    return 'default';
+    return "default";
   }
-  return 'pointer';
-}, function (props) {
-  return props.disabled ? 'none' : 'all';
-}, function (props) {
-  return props.size === 'small' ? '0 8px' : '0 12px';
-}, function (props) {
+  return "pointer";
+}, (props) => props.disabled ? "none" : "all", (props) => props.size === "small" ? "0 8px" : "0 12px", (props) => {
   if (props.disabled) {
-    return props.theme.palette['grey-100'];
+    return props.theme.palette["grey-100"];
   }
   if (props.error) {
-    return props.theme.palette['red-050'];
+    return props.theme.palette["red-050"];
   }
-  if (props.size === 'large') {
-    return 'transparent';
+  if (props.size === "large") {
+    return "transparent";
   }
   return props.theme.palette.white;
-}, function (props) {
-  return getDefaultStyles(props);
-}, function (props) {
-  return props.clearable && props.size === 'small' && "\n    " + AngleIconWrapper + " {\n      display: block; \n    }\n    " + ClearIconWrapper + " {\n      display: none; \n    }\n  ";
-}, function (props) {
-  return getHoverStyles(props);
-}, function (props) {
-  return props.clearable && props.size === 'small' && "\n      " + AngleIconWrapper + " {\n        display: none; \n      }\n      " + ClearIconWrapper + " {\n        display: block; \n      }\n    ";
-}, function (props) {
-  return props.theme.palette['blue-050'];
-}, function (props) {
-  return getFocusStyles(props);
-}, function (props) {
-  return props.selected && props.size === 'large' && css(["border:1px solid ", ";&:hover{border:1px solid ", ";}"], props.theme.palette['grey-300'], props.theme.palette['grey-400']);
-}, function (props) {
-  return props.opened && !props.error && css(["background-color:", ";", ";"], props.theme.palette['blue-050'], getFocusStyles(props));
-}, function (props) {
-  return Boolean(props.error) && css(["background-color:", ";", ""], props.theme.palette['red-050'], getErrorStyles(props));
-}, function (props) {
-  return Boolean(props.disabled) && css(["", "{opacity:0.4;}"], IconWrapper);
-});
-export var ChangeButtonWrapper = styled.div.withConfig({
+}, (props) => getDefaultStyles(props), (props) => props.clearable && props.size === "small" && `
+    ${AngleIconWrapper} {
+      display: block; 
+    }
+    ${ClearIconWrapper} {
+      display: none; 
+    }
+  `, (props) => getHoverStyles(props), (props) => props.clearable && props.size === "small" && `
+      ${AngleIconWrapper} {
+        display: none; 
+      }
+      ${ClearIconWrapper} {
+        display: block; 
+      }
+    `, (props) => props.theme.palette["blue-050"], (props) => getFocusStyles(props), (props) => props.selected && props.size === "large" && css(["border:1px solid ", ";&:hover{border:1px solid ", ";}"], props.theme.palette["grey-300"], props.theme.palette["grey-400"]), (props) => props.opened && !props.error && css(["background-color:", ";", ";"], props.theme.palette["blue-050"], getFocusStyles(props)), (props) => Boolean(props.error) && css(["background-color:", ";", ""], props.theme.palette["red-050"], getErrorStyles(props)), (props) => Boolean(props.disabled) && css(["", "{opacity:0.4;}"], IconWrapper));
+const ChangeButtonWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Triggerstyles__ChangeButtonWrapper",
   componentId: "sc-1t1uce7-9"
 })(["margin:0 4px 0 8px;"]);
-export var ValueText = styled.span.withConfig({
+const ValueText = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Triggerstyles__ValueText",
   componentId: "sc-1t1uce7-10"
-})(["text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"]);
+})(["text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"]);
+export {
+  AngleIconWrapper,
+  ChangeButtonWrapper,
+  ClearIconWrapper,
+  ClearWrapper,
+  IconWrapper,
+  Placeholder,
+  Prefix,
+  Trigger,
+  TriggerWrapper,
+  Value,
+  ValueText
+};

package/dist/components/ItemPickerTrigger/Trigger.types.d.ts

@@ -1,6 +1,6 @@
-import type { ReactNode } from 'react';
-import type { ListItemProps } from '@synerise/ds-list-item';
-import type { ItemPickerProps, ItemPickerSize } from '../ItemPickerLegacy/ItemPickerLegacy.types';
+import { ReactNode } from 'react';
+import { ListItemProps } from '@synerise/ds-list-item';
+import { ItemPickerProps, ItemPickerSize } from '../ItemPickerLegacy/ItemPickerLegacy.types';
 export type ItemPickerTriggerTexts = {
     yes: string;
     no: string;

package/dist/components/ItemPickerTrigger/Trigger.types.js

@@ -1 +1 @@
-export {};
+

package/dist/hooks/useDefaultTexts.d.ts

@@ -1,2 +1,2 @@
-import { type ItemPickerTexts } from '../components/ItemPickerNew/ItemPickerNew.types';
+import { ItemPickerTexts } from '../components/ItemPickerNew/ItemPickerNew.types';
 export declare const useDefaultTexts: (texts?: Partial<ItemPickerTexts>) => ItemPickerTexts;