ods-ant 0.4.0 → 0.5.0

package/dist-lib/forms/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../../src/ds/forms/Button.tsx"],"sourcesContent":["import { Button as AntButton } from 'antd';\nimport type { ButtonProps as AntButtonProps } from 'antd';\nimport { ConfigProvider } from 'antd';\nimport type { CSSProperties } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\ntype DSButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'tertiary-alt';\n\ntype RestrictedAntVisualProps = 'type' | 'variant' | 'color' | 'danger' | 'ghost';\n\nexport type ButtonProps = Omit<AntButtonProps, RestrictedAntVisualProps> & {\n  /** Design system button variant matching Figma design */\n  dsVariant?: DSButtonVariant;\n};\n\n// Unique ID for this component's style tag\nconst STYLE_ID = 'ds-button-styles';\n\n/**\n * DS Button wrapper that applies design system styling on top of Ant Design's Button.\n * Provides consistent visual appearance aligned with Figma design specifications.\n *\n * Variants:\n * - primary: Solid filled button (default)\n * - secondary: Outlined button\n * - tertiary: Text button\n * - tertiary-alt: Alternative text button\n *\n * @example\n * <Button>Primary</Button>\n * <Button dsVariant=\"secondary\">Secondary</Button>\n * <Button dsVariant=\"tertiary\">Tertiary</Button>\n * <Button disabled>Disabled</Button>\n */\nexport const Button = ({\n  dsVariant = 'primary',\n  disabled = false,\n  style: userStyle = {},\n  className: userClassName = '',\n  ...props\n}: ButtonProps) => {\n  // Ensure global styles are injected once\n  useEffect(() => {\n    if (typeof document !== 'undefined' && !document.getElementById(STYLE_ID)) {\n      const style = document.createElement('style');\n      style.id = STYLE_ID;\n      const { button } = dsSemanticTokens;\n      style.textContent = `\n        :root {\n          --ds-btn-primary: ${button.primary.default};\n          --ds-btn-primary-hover: ${button.primary.hover};\n          --ds-btn-primary-pressed: ${button.primary.pressed};\n          --ds-btn-primary-text: ${button.primary.text};\n          --ds-btn-primary-disabled-text: ${button.primary.disabledText};\n          --ds-btn-primary-disabled-bg: ${button.primary.disabledBg};\n\n          --ds-btn-secondary-text: ${button.secondary.defaultText};\n          --ds-btn-secondary-border: ${button.secondary.defaultBorder};\n          --ds-btn-secondary-bg: ${button.secondary.defaultBg};\n          --ds-btn-secondary-hover-text: ${button.secondary.hoverText};\n          --ds-btn-secondary-hover-border: ${button.secondary.hoverBorder};\n          --ds-btn-secondary-hover-bg: ${button.secondary.hoverBg};\n          --ds-btn-secondary-pressed-text: ${button.secondary.pressedText};\n          --ds-btn-secondary-pressed-border: ${button.secondary.pressedBorder};\n          --ds-btn-secondary-pressed-bg: ${button.secondary.pressedBg};\n          --ds-btn-secondary-disabled-text: ${button.secondary.disabledText};\n          --ds-btn-secondary-disabled-border: ${button.secondary.disabledBorder};\n          --ds-btn-secondary-disabled-bg: ${button.secondary.disabledBg};\n\n          --ds-btn-tertiary-text: ${button.tertiary.defaultText};\n          --ds-btn-tertiary-hover-text: ${button.tertiary.hoverText};\n          --ds-btn-tertiary-pressed-text: ${button.tertiary.pressedText};\n          --ds-btn-tertiary-disabled-text: ${button.tertiary.disabledText};\n\n          --ds-btn-tertiary-alt-text: ${button.tertiaryAlt.defaultText};\n          --ds-btn-tertiary-alt-hover-text: ${button.tertiaryAlt.hoverText};\n          --ds-btn-tertiary-alt-pressed-text: ${button.tertiaryAlt.pressedText};\n          --ds-btn-tertiary-alt-disabled-text: ${button.tertiaryAlt.disabledText};\n\n          --ds-btn-font-small-size: ${button.typography.small.fontSize};\n          --ds-btn-font-small-line-height: ${button.typography.small.lineHeight};\n          --ds-btn-font-small-letter-spacing: ${button.typography.small.letterSpacing};\n          --ds-btn-font-middle-size: ${button.typography.middle.fontSize};\n          --ds-btn-font-middle-line-height: ${button.typography.middle.lineHeight};\n          --ds-btn-font-middle-letter-spacing: ${button.typography.middle.letterSpacing};\n          --ds-btn-font-large-size: ${button.typography.large.fontSize};\n          --ds-btn-font-large-line-height: ${button.typography.large.lineHeight};\n          --ds-btn-font-large-letter-spacing: ${button.typography.large.letterSpacing};\n        }\n\n        [data-ds-variant].ant-btn {\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          font-weight: ${button.typography.fontWeight};\n          text-transform: ${button.typography.textTransform};\n          transition: none !important;\n          animation: none !important;\n          box-shadow: none !important;\n        }\n\n        [data-ds-variant].ant-btn:hover,\n        [data-ds-variant].ant-btn:active,\n        [data-ds-variant].ant-btn:focus,\n        [data-ds-variant].ant-btn:focus-visible,\n        [data-ds-variant].ant-btn.ant-btn-active {\n          box-shadow: none !important;\n          transition: none !important;\n          animation: none !important;\n        }\n\n        [data-ds-variant].ant-btn::before,\n        [data-ds-variant].ant-btn::after {\n          transition: none !important;\n          animation: none !important;\n          box-shadow: none !important;\n        }\n\n        [data-ds-variant].ant-btn.ant-wave::after,\n        [data-ds-variant].ant-btn .ant-wave::after {\n          animation: none !important;\n          opacity: 0 !important;\n        }\n\n        [data-ds-variant].ant-btn .ant-btn-icon {\n          width: 16px;\n          height: 16px;\n          min-width: 16px;\n          min-height: 16px;\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          color: inherit;\n          line-height: 1;\n          flex: 0 0 16px;\n        }\n\n        [data-ds-variant].ant-btn .ant-btn-icon > .anticon,\n        [data-ds-variant].ant-btn .ant-btn-icon > svg,\n        [data-ds-variant].ant-btn .ant-btn-icon > span > svg {\n          width: 16px !important;\n          height: 16px !important;\n          font-size: 16px !important;\n          line-height: 1;\n          display: block;\n          color: inherit;\n        }\n\n        [data-ds-variant].ant-btn .ant-btn-icon svg [fill]:not([fill=\"none\"]),\n        [data-ds-variant].ant-btn .ant-btn-icon svg path:not([fill=\"none\"]) {\n          fill: currentColor !important;\n        }\n\n        [data-ds-variant].ant-btn .ant-btn-icon svg [stroke]:not([stroke=\"none\"]) {\n          stroke: currentColor !important;\n        }\n\n        /* Optical centering for uppercase labels */\n        [data-ds-variant].ant-btn > span:not(.ant-btn-icon) {\n          display: inline-flex;\n          align-items: center;\n          transform: translateY(-0.5px);\n        }\n\n        [data-ds-variant].ant-btn.ant-btn-sm {\n          font-size: var(--ds-btn-font-small-size);\n          line-height: var(--ds-btn-font-small-line-height);\n          letter-spacing: var(--ds-btn-font-small-letter-spacing);\n        }\n\n        [data-ds-variant].ant-btn.ant-btn-lg {\n          font-size: var(--ds-btn-font-large-size);\n          line-height: var(--ds-btn-font-large-line-height);\n          letter-spacing: var(--ds-btn-font-large-letter-spacing);\n        }\n\n        [data-ds-variant].ant-btn:not(.ant-btn-sm):not(.ant-btn-lg) {\n          font-size: var(--ds-btn-font-middle-size);\n          line-height: var(--ds-btn-font-middle-line-height);\n          letter-spacing: var(--ds-btn-font-middle-letter-spacing);\n        }\n\n        /* Primary variant states */\n        [data-ds-variant=\"primary\"].ant-btn,\n        [data-ds-variant=\"primary\"].ant-btn.ant-btn-primary {\n          background-color: var(--ds-btn-primary) !important;\n          border-color: var(--ds-btn-primary) !important;\n          color: var(--ds-btn-primary-text) !important;\n        }\n\n        [data-ds-variant=\"primary\"].ant-btn:hover,\n        [data-ds-variant=\"primary\"].ant-btn.ant-btn-primary:hover {\n          background-color: var(--ds-btn-primary-hover) !important;\n          border-color: var(--ds-btn-primary-hover) !important;\n          color: var(--ds-btn-primary-text) !important;\n        }\n\n        [data-ds-variant=\"primary\"].ant-btn:active,\n        [data-ds-variant=\"primary\"].ant-btn.ant-btn-primary:active,\n        [data-ds-variant=\"primary\"].ant-btn.ant-btn-primary.ant-btn-active {\n          background-color: var(--ds-btn-primary-pressed) !important;\n          border-color: var(--ds-btn-primary-pressed) !important;\n          color: var(--ds-btn-primary-text) !important;\n        }\n\n        [data-ds-variant=\"primary\"].ant-btn:disabled,\n        [data-ds-variant=\"primary\"].ant-btn.ant-btn-disabled {\n          background-color: var(--ds-btn-primary-disabled-bg) !important;\n          border-color: var(--ds-btn-primary-disabled-bg) !important;\n          color: var(--ds-btn-primary-disabled-text) !important;\n        }\n\n        /* Secondary variant states */\n        [data-ds-variant=\"secondary\"].ant-btn {\n          border-color: var(--ds-btn-secondary-border) !important;\n          color: var(--ds-btn-secondary-text) !important;\n          background-color: var(--ds-btn-secondary-bg) !important;\n        }\n        \n        [data-ds-variant=\"secondary\"].ant-btn:hover {\n          border-color: var(--ds-btn-secondary-hover-border) !important;\n          color: var(--ds-btn-secondary-hover-text) !important;\n          background-color: var(--ds-btn-secondary-hover-bg) !important;\n        }\n\n        [data-ds-variant=\"secondary\"].ant-btn:active,\n        [data-ds-variant=\"secondary\"].ant-btn.ant-btn-active {\n          border-color: var(--ds-btn-secondary-pressed-border) !important;\n          color: var(--ds-btn-secondary-pressed-text) !important;\n          background-color: var(--ds-btn-secondary-pressed-bg) !important;\n        }\n        \n        [data-ds-variant=\"secondary\"].ant-btn:disabled,\n        [data-ds-variant=\"secondary\"].ant-btn.ant-btn-disabled {\n          border-color: var(--ds-btn-secondary-disabled-border) !important;\n          border-width: 2px !important;\n          border-style: solid !important;\n          color: var(--ds-btn-secondary-disabled-text) !important;\n          background-color: var(--ds-btn-secondary-disabled-bg) !important;\n        }\n        \n        /* Tertiary variant states */\n        [data-ds-variant=\"tertiary\"].ant-btn {\n          color: var(--ds-btn-tertiary-text) !important;\n          border: none !important;\n          background-color: transparent !important;\n        }\n        \n        [data-ds-variant=\"tertiary\"].ant-btn:hover {\n          color: var(--ds-btn-tertiary-hover-text) !important;\n          background-color: transparent !important;\n        }\n\n        [data-ds-variant=\"tertiary\"].ant-btn:active,\n        [data-ds-variant=\"tertiary\"].ant-btn.ant-btn-active {\n          color: var(--ds-btn-tertiary-pressed-text) !important;\n          background-color: transparent !important;\n        }\n        \n        [data-ds-variant=\"tertiary\"].ant-btn:disabled,\n        [data-ds-variant=\"tertiary\"].ant-btn.ant-btn-disabled {\n          color: var(--ds-btn-tertiary-disabled-text) !important;\n          background-color: transparent !important;\n        }\n\n        /* Tertiary-alt variant states */\n        [data-ds-variant=\"tertiary-alt\"].ant-btn {\n          color: var(--ds-btn-tertiary-alt-text) !important;\n          border: none !important;\n          background-color: transparent !important;\n        }\n\n        [data-ds-variant=\"tertiary-alt\"].ant-btn:hover {\n          color: var(--ds-btn-tertiary-alt-hover-text) !important;\n          background-color: transparent !important;\n        }\n\n        [data-ds-variant=\"tertiary-alt\"].ant-btn:active,\n        [data-ds-variant=\"tertiary-alt\"].ant-btn.ant-btn-active {\n          color: var(--ds-btn-tertiary-alt-pressed-text) !important;\n          background-color: transparent !important;\n        }\n\n        [data-ds-variant=\"tertiary-alt\"].ant-btn:disabled,\n        [data-ds-variant=\"tertiary-alt\"].ant-btn.ant-btn-disabled {\n          color: var(--ds-btn-tertiary-alt-disabled-text) !important;\n          background-color: transparent !important;\n        }\n      `;\n      document.head.appendChild(style);\n    }\n  }, []);\n\n  // Build inline styles based on variant\n  const getStyles = (): CSSProperties => {\n    const baseStyle: CSSProperties = {\n      ...userStyle,\n      boxShadow: 'none',\n      transition: 'none',\n      animation: 'none',\n      WebkitTapHighlightColor: 'transparent',\n    };\n\n    return baseStyle;\n  };\n\n  // For secondary and tertiary, use different Ant Design types\n  if (dsVariant === 'secondary') {\n    return (\n      <ConfigProvider wave={{ disabled: true }}>\n        <AntButton\n          type=\"default\"\n          disabled={disabled}\n          style={getStyles()}\n          className={userClassName}\n          data-ds-variant={dsVariant}\n          {...props}\n        />\n      </ConfigProvider>\n    );\n  }\n\n  if (dsVariant === 'tertiary' || dsVariant === 'tertiary-alt') {\n    return (\n      <ConfigProvider wave={{ disabled: true }}>\n        <AntButton\n          type=\"text\"\n          disabled={disabled}\n          style={getStyles()}\n          className={userClassName}\n          data-ds-variant={dsVariant}\n          {...props}\n        />\n      </ConfigProvider>\n    );\n  }\n\n  // Primary variant\n  return (\n    <ConfigProvider wave={{ disabled: true }}>\n      <AntButton\n        type=\"primary\"\n        disabled={disabled}\n        style={getStyles()}\n        className={userClassName}\n        data-ds-variant={dsVariant}\n        {...props}\n      />\n    </ConfigProvider>\n  );\n};\n\nButton.displayName = 'Button';\nButton.Group = AntButton.Group;\n"],"mappings":";;;;;AAiBA,IAAM,IAAW,oBAkBJ,KAAU,EACrB,eAAY,WACZ,cAAW,IACX,OAAO,IAAY,EAAE,EACrB,WAAW,IAAgB,IAC3B,GAAG,QACc;AAEjB,SAAgB;AACd,MAAI,OAAO,WAAa,OAAe,CAAC,SAAS,eAAe,EAAS,EAAE;GACzE,IAAM,IAAQ,SAAS,cAAc,QAAQ;AAC7C,KAAM,KAAK;GACX,IAAM,EAAE,cAAW;AAmPnB,GAlPA,EAAM,cAAc;;8BAEI,EAAO,QAAQ,QAAQ;oCACjB,EAAO,QAAQ,MAAM;sCACnB,EAAO,QAAQ,QAAQ;mCAC1B,EAAO,QAAQ,KAAK;4CACX,EAAO,QAAQ,aAAa;0CAC9B,EAAO,QAAQ,WAAW;;qCAE/B,EAAO,UAAU,YAAY;uCAC3B,EAAO,UAAU,cAAc;mCACnC,EAAO,UAAU,UAAU;2CACnB,EAAO,UAAU,UAAU;6CACzB,EAAO,UAAU,YAAY;yCACjC,EAAO,UAAU,QAAQ;6CACrB,EAAO,UAAU,YAAY;+CAC3B,EAAO,UAAU,cAAc;2CACnC,EAAO,UAAU,UAAU;8CACxB,EAAO,UAAU,aAAa;gDAC5B,EAAO,UAAU,eAAe;4CACpC,EAAO,UAAU,WAAW;;oCAEpC,EAAO,SAAS,YAAY;0CACtB,EAAO,SAAS,UAAU;4CACxB,EAAO,SAAS,YAAY;6CAC3B,EAAO,SAAS,aAAa;;wCAElC,EAAO,YAAY,YAAY;8CACzB,EAAO,YAAY,UAAU;gDAC3B,EAAO,YAAY,YAAY;iDAC9B,EAAO,YAAY,aAAa;;sCAE3C,EAAO,WAAW,MAAM,SAAS;6CAC1B,EAAO,WAAW,MAAM,WAAW;gDAChC,EAAO,WAAW,MAAM,cAAc;uCAC/C,EAAO,WAAW,OAAO,SAAS;8CAC3B,EAAO,WAAW,OAAO,WAAW;iDACjC,EAAO,WAAW,OAAO,cAAc;sCAClD,EAAO,WAAW,MAAM,SAAS;6CAC1B,EAAO,WAAW,MAAM,WAAW;gDAChC,EAAO,WAAW,MAAM,cAAc;;;;;;;yBAO7D,EAAO,WAAW,WAAW;4BAC1B,EAAO,WAAW,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAkMtD,SAAS,KAAK,YAAY,EAAM;;IAEjC,EAAE,CAAC;CAGN,IAAM,WASG;EAPL,GAAG;EACH,WAAW;EACX,YAAY;EACZ,WAAW;EACX,yBAAyB;EAGpB;AAmCT,QA/BI,MAAc,cAEd,kBAAC,GAAD;EAAgB,MAAM,EAAE,UAAU,IAAM;YACtC,kBAAC,GAAD;GACE,MAAK;GACK;GACV,OAAO,GAAW;GAClB,WAAW;GACX,mBAAiB;GACjB,GAAI;GACJ,CAAA;EACa,CAAA,GAIjB,MAAc,cAAc,MAAc,iBAE1C,kBAAC,GAAD;EAAgB,MAAM,EAAE,UAAU,IAAM;YACtC,kBAAC,GAAD;GACE,MAAK;GACK;GACV,OAAO,GAAW;GAClB,WAAW;GACX,mBAAiB;GACjB,GAAI;GACJ,CAAA;EACa,CAAA,GAMnB,kBAAC,GAAD;EAAgB,MAAM,EAAE,UAAU,IAAM;YACtC,kBAAC,GAAD;GACE,MAAK;GACK;GACV,OAAO,GAAW;GAClB,WAAW;GACX,mBAAiB;GACjB,GAAI;GACJ,CAAA;EACa,CAAA;;AAIrB,EAAO,cAAc,UACrB,EAAO,QAAQ,EAAU"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../src/ds/forms/Button.tsx"],"sourcesContent":["import { Button as AntButton } from 'antd';\nimport type { ButtonProps as AntButtonProps } from 'antd';\nimport { ConfigProvider } from 'antd';\nimport type { CSSProperties } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\ntype DSButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'tertiary-alt';\n\nexport type ButtonProps = AntButtonProps & {\n  /** Design system button variant matching Figma design */\n  dsVariant?: DSButtonVariant;\n};\n\n// Unique ID for this component's style tag\nconst STYLE_ID = 'ds-button-styles';\n\n/**\n * DS Button wrapper that applies design system styling on top of Ant Design's Button.\n * Provides consistent visual appearance aligned with Figma design specifications.\n *\n * Variants:\n * - primary: Solid filled button (default)\n * - secondary: Outlined button\n * - tertiary: Text button\n * - tertiary-alt: Alternative text button\n *\n * @example\n * <Button>Primary</Button>\n * <Button dsVariant=\"secondary\">Secondary</Button>\n * <Button dsVariant=\"tertiary\">Tertiary</Button>\n * <Button disabled>Disabled</Button>\n */\nexport const Button = ({\n  dsVariant = 'primary',\n  disabled = false,\n  style: userStyle = {},\n  className: userClassName = '',\n  type,\n  ...props\n}: ButtonProps) => {\n  // Ensure global styles are injected once\n  useEffect(() => {\n    if (typeof document !== 'undefined' && !document.getElementById(STYLE_ID)) {\n      const style = document.createElement('style');\n      style.id = STYLE_ID;\n      const { button } = dsSemanticTokens;\n      style.textContent = `\n        :root {\n          --ds-btn-primary: ${button.primary.default};\n          --ds-btn-primary-hover: ${button.primary.hover};\n          --ds-btn-primary-pressed: ${button.primary.pressed};\n          --ds-btn-primary-text: ${button.primary.text};\n          --ds-btn-primary-disabled-text: ${button.primary.disabledText};\n          --ds-btn-primary-disabled-bg: ${button.primary.disabledBg};\n\n          --ds-btn-secondary-text: ${button.secondary.defaultText};\n          --ds-btn-secondary-border: ${button.secondary.defaultBorder};\n          --ds-btn-secondary-bg: ${button.secondary.defaultBg};\n          --ds-btn-secondary-hover-text: ${button.secondary.hoverText};\n          --ds-btn-secondary-hover-border: ${button.secondary.hoverBorder};\n          --ds-btn-secondary-hover-bg: ${button.secondary.hoverBg};\n          --ds-btn-secondary-pressed-text: ${button.secondary.pressedText};\n          --ds-btn-secondary-pressed-border: ${button.secondary.pressedBorder};\n          --ds-btn-secondary-pressed-bg: ${button.secondary.pressedBg};\n          --ds-btn-secondary-disabled-text: ${button.secondary.disabledText};\n          --ds-btn-secondary-disabled-border: ${button.secondary.disabledBorder};\n          --ds-btn-secondary-disabled-bg: ${button.secondary.disabledBg};\n\n          --ds-btn-tertiary-text: ${button.tertiary.defaultText};\n          --ds-btn-tertiary-hover-text: ${button.tertiary.hoverText};\n          --ds-btn-tertiary-pressed-text: ${button.tertiary.pressedText};\n          --ds-btn-tertiary-disabled-text: ${button.tertiary.disabledText};\n\n          --ds-btn-tertiary-alt-text: ${button.tertiaryAlt.defaultText};\n          --ds-btn-tertiary-alt-hover-text: ${button.tertiaryAlt.hoverText};\n          --ds-btn-tertiary-alt-pressed-text: ${button.tertiaryAlt.pressedText};\n          --ds-btn-tertiary-alt-disabled-text: ${button.tertiaryAlt.disabledText};\n\n          --ds-btn-font-small-size: ${button.typography.small.fontSize};\n          --ds-btn-font-small-line-height: ${button.typography.small.lineHeight};\n          --ds-btn-font-small-letter-spacing: ${button.typography.small.letterSpacing};\n          --ds-btn-font-middle-size: ${button.typography.middle.fontSize};\n          --ds-btn-font-middle-line-height: ${button.typography.middle.lineHeight};\n          --ds-btn-font-middle-letter-spacing: ${button.typography.middle.letterSpacing};\n          --ds-btn-font-large-size: ${button.typography.large.fontSize};\n          --ds-btn-font-large-line-height: ${button.typography.large.lineHeight};\n          --ds-btn-font-large-letter-spacing: ${button.typography.large.letterSpacing};\n        }\n\n        [data-ds-variant].ant-btn {\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          font-weight: ${button.typography.fontWeight};\n          text-transform: ${button.typography.textTransform};\n          transition: none !important;\n          animation: none !important;\n          box-shadow: none !important;\n        }\n\n        [data-ds-variant].ant-btn:hover,\n        [data-ds-variant].ant-btn:active,\n        [data-ds-variant].ant-btn:focus,\n        [data-ds-variant].ant-btn:focus-visible,\n        [data-ds-variant].ant-btn.ant-btn-active {\n          box-shadow: none !important;\n          transition: none !important;\n          animation: none !important;\n        }\n\n        [data-ds-variant].ant-btn::before,\n        [data-ds-variant].ant-btn::after {\n          transition: none !important;\n          animation: none !important;\n          box-shadow: none !important;\n        }\n\n        [data-ds-variant].ant-btn.ant-wave::after,\n        [data-ds-variant].ant-btn .ant-wave::after {\n          animation: none !important;\n          opacity: 0 !important;\n        }\n\n        [data-ds-variant].ant-btn .ant-btn-icon {\n          width: 16px;\n          height: 16px;\n          min-width: 16px;\n          min-height: 16px;\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          color: inherit;\n          line-height: 1;\n          flex: 0 0 16px;\n        }\n\n        [data-ds-variant].ant-btn .ant-btn-icon > .anticon,\n        [data-ds-variant].ant-btn .ant-btn-icon > svg,\n        [data-ds-variant].ant-btn .ant-btn-icon > span > svg {\n          width: 16px !important;\n          height: 16px !important;\n          font-size: 16px !important;\n          line-height: 1;\n          display: block;\n          color: inherit;\n        }\n\n        [data-ds-variant].ant-btn .ant-btn-icon svg [fill]:not([fill=\"none\"]),\n        [data-ds-variant].ant-btn .ant-btn-icon svg path:not([fill=\"none\"]) {\n          fill: currentColor !important;\n        }\n\n        [data-ds-variant].ant-btn .ant-btn-icon svg [stroke]:not([stroke=\"none\"]) {\n          stroke: currentColor !important;\n        }\n\n        /* Optical centering for uppercase labels */\n        [data-ds-variant].ant-btn > span:not(.ant-btn-icon) {\n          display: inline-flex;\n          align-items: center;\n          transform: translateY(-0.5px);\n        }\n\n        [data-ds-variant].ant-btn.ant-btn-sm {\n          font-size: var(--ds-btn-font-small-size);\n          line-height: var(--ds-btn-font-small-line-height);\n          letter-spacing: var(--ds-btn-font-small-letter-spacing);\n        }\n\n        [data-ds-variant].ant-btn.ant-btn-lg {\n          font-size: var(--ds-btn-font-large-size);\n          line-height: var(--ds-btn-font-large-line-height);\n          letter-spacing: var(--ds-btn-font-large-letter-spacing);\n        }\n\n        [data-ds-variant].ant-btn:not(.ant-btn-sm):not(.ant-btn-lg) {\n          font-size: var(--ds-btn-font-middle-size);\n          line-height: var(--ds-btn-font-middle-line-height);\n          letter-spacing: var(--ds-btn-font-middle-letter-spacing);\n        }\n\n        /* Primary variant states */\n        [data-ds-variant=\"primary\"].ant-btn,\n        [data-ds-variant=\"primary\"].ant-btn.ant-btn-primary {\n          background-color: var(--ds-btn-primary) !important;\n          border-color: var(--ds-btn-primary) !important;\n          color: var(--ds-btn-primary-text) !important;\n        }\n\n        [data-ds-variant=\"primary\"].ant-btn:hover,\n        [data-ds-variant=\"primary\"].ant-btn.ant-btn-primary:hover {\n          background-color: var(--ds-btn-primary-hover) !important;\n          border-color: var(--ds-btn-primary-hover) !important;\n          color: var(--ds-btn-primary-text) !important;\n        }\n\n        [data-ds-variant=\"primary\"].ant-btn:active,\n        [data-ds-variant=\"primary\"].ant-btn.ant-btn-primary:active,\n        [data-ds-variant=\"primary\"].ant-btn.ant-btn-primary.ant-btn-active {\n          background-color: var(--ds-btn-primary-pressed) !important;\n          border-color: var(--ds-btn-primary-pressed) !important;\n          color: var(--ds-btn-primary-text) !important;\n        }\n\n        [data-ds-variant=\"primary\"].ant-btn:disabled,\n        [data-ds-variant=\"primary\"].ant-btn.ant-btn-disabled {\n          background-color: var(--ds-btn-primary-disabled-bg) !important;\n          border-color: var(--ds-btn-primary-disabled-bg) !important;\n          color: var(--ds-btn-primary-disabled-text) !important;\n        }\n\n        /* Secondary variant states */\n        [data-ds-variant=\"secondary\"].ant-btn {\n          border-color: var(--ds-btn-secondary-border) !important;\n          color: var(--ds-btn-secondary-text) !important;\n          background-color: var(--ds-btn-secondary-bg) !important;\n        }\n        \n        [data-ds-variant=\"secondary\"].ant-btn:hover {\n          border-color: var(--ds-btn-secondary-hover-border) !important;\n          color: var(--ds-btn-secondary-hover-text) !important;\n          background-color: var(--ds-btn-secondary-hover-bg) !important;\n        }\n\n        [data-ds-variant=\"secondary\"].ant-btn:active,\n        [data-ds-variant=\"secondary\"].ant-btn.ant-btn-active {\n          border-color: var(--ds-btn-secondary-pressed-border) !important;\n          color: var(--ds-btn-secondary-pressed-text) !important;\n          background-color: var(--ds-btn-secondary-pressed-bg) !important;\n        }\n        \n        [data-ds-variant=\"secondary\"].ant-btn:disabled,\n        [data-ds-variant=\"secondary\"].ant-btn.ant-btn-disabled {\n          border-color: var(--ds-btn-secondary-disabled-border) !important;\n          border-width: 2px !important;\n          border-style: solid !important;\n          color: var(--ds-btn-secondary-disabled-text) !important;\n          background-color: var(--ds-btn-secondary-disabled-bg) !important;\n        }\n        \n        /* Tertiary variant states */\n        [data-ds-variant=\"tertiary\"].ant-btn {\n          color: var(--ds-btn-tertiary-text) !important;\n          border: none !important;\n          background-color: transparent !important;\n        }\n        \n        [data-ds-variant=\"tertiary\"].ant-btn:hover {\n          color: var(--ds-btn-tertiary-hover-text) !important;\n          background-color: transparent !important;\n        }\n\n        [data-ds-variant=\"tertiary\"].ant-btn:active,\n        [data-ds-variant=\"tertiary\"].ant-btn.ant-btn-active {\n          color: var(--ds-btn-tertiary-pressed-text) !important;\n          background-color: transparent !important;\n        }\n        \n        [data-ds-variant=\"tertiary\"].ant-btn:disabled,\n        [data-ds-variant=\"tertiary\"].ant-btn.ant-btn-disabled {\n          color: var(--ds-btn-tertiary-disabled-text) !important;\n          background-color: transparent !important;\n        }\n\n        /* Tertiary-alt variant states */\n        [data-ds-variant=\"tertiary-alt\"].ant-btn {\n          color: var(--ds-btn-tertiary-alt-text) !important;\n          border: none !important;\n          background-color: transparent !important;\n        }\n\n        [data-ds-variant=\"tertiary-alt\"].ant-btn:hover {\n          color: var(--ds-btn-tertiary-alt-hover-text) !important;\n          background-color: transparent !important;\n        }\n\n        [data-ds-variant=\"tertiary-alt\"].ant-btn:active,\n        [data-ds-variant=\"tertiary-alt\"].ant-btn.ant-btn-active {\n          color: var(--ds-btn-tertiary-alt-pressed-text) !important;\n          background-color: transparent !important;\n        }\n\n        [data-ds-variant=\"tertiary-alt\"].ant-btn:disabled,\n        [data-ds-variant=\"tertiary-alt\"].ant-btn.ant-btn-disabled {\n          color: var(--ds-btn-tertiary-alt-disabled-text) !important;\n          background-color: transparent !important;\n        }\n      `;\n      document.head.appendChild(style);\n    }\n  }, []);\n\n  // Build inline styles based on variant\n  const getStyles = (): CSSProperties => {\n    const baseStyle: CSSProperties = {\n      ...userStyle,\n      boxShadow: 'none',\n      transition: 'none',\n      animation: 'none',\n      WebkitTapHighlightColor: 'transparent',\n    };\n\n    return baseStyle;\n  };\n\n  // For secondary and tertiary, use different Ant Design types\n  const resolvedType = type ?? (dsVariant === 'secondary' ? 'default' : dsVariant === 'tertiary' || dsVariant === 'tertiary-alt' ? 'text' : 'primary');\n\n  // DS variant supplies defaults while still allowing Ant overrides when passed.\n  if (dsVariant === 'secondary') {\n    return (\n      <ConfigProvider wave={{ disabled: true }}>\n        <AntButton\n          type={resolvedType}\n          disabled={disabled}\n          style={getStyles()}\n          className={userClassName}\n          data-ds-variant={dsVariant}\n          {...props}\n        />\n      </ConfigProvider>\n    );\n  }\n\n  if (dsVariant === 'tertiary' || dsVariant === 'tertiary-alt') {\n    return (\n      <ConfigProvider wave={{ disabled: true }}>\n        <AntButton\n          type={resolvedType}\n          disabled={disabled}\n          style={getStyles()}\n          className={userClassName}\n          data-ds-variant={dsVariant}\n          {...props}\n        />\n      </ConfigProvider>\n    );\n  }\n\n  // Primary variant\n  return (\n    <ConfigProvider wave={{ disabled: true }}>\n      <AntButton\n        type={resolvedType}\n        disabled={disabled}\n        style={getStyles()}\n        className={userClassName}\n        data-ds-variant={dsVariant}\n        {...props}\n      />\n    </ConfigProvider>\n  );\n};\n\nButton.displayName = 'Button';\nButton.Group = AntButton.Group;\n"],"mappings":";;;;;AAeA,IAAM,IAAW,oBAkBJ,KAAU,EACrB,eAAY,WACZ,cAAW,IACX,OAAO,IAAY,EAAE,EACrB,WAAW,IAAgB,IAC3B,SACA,GAAG,SAGH,QAAgB;AACd,KAAI,OAAO,WAAa,OAAe,CAAC,SAAS,eAAe,EAAS,EAAE;EACzE,IAAM,IAAQ,SAAS,cAAc,QAAQ;AAC7C,IAAM,KAAK;EACX,IAAM,EAAE,cAAW;AAmPnB,EAlPA,EAAM,cAAc;;8BAEI,EAAO,QAAQ,QAAQ;oCACjB,EAAO,QAAQ,MAAM;sCACnB,EAAO,QAAQ,QAAQ;mCAC1B,EAAO,QAAQ,KAAK;4CACX,EAAO,QAAQ,aAAa;0CAC9B,EAAO,QAAQ,WAAW;;qCAE/B,EAAO,UAAU,YAAY;uCAC3B,EAAO,UAAU,cAAc;mCACnC,EAAO,UAAU,UAAU;2CACnB,EAAO,UAAU,UAAU;6CACzB,EAAO,UAAU,YAAY;yCACjC,EAAO,UAAU,QAAQ;6CACrB,EAAO,UAAU,YAAY;+CAC3B,EAAO,UAAU,cAAc;2CACnC,EAAO,UAAU,UAAU;8CACxB,EAAO,UAAU,aAAa;gDAC5B,EAAO,UAAU,eAAe;4CACpC,EAAO,UAAU,WAAW;;oCAEpC,EAAO,SAAS,YAAY;0CACtB,EAAO,SAAS,UAAU;4CACxB,EAAO,SAAS,YAAY;6CAC3B,EAAO,SAAS,aAAa;;wCAElC,EAAO,YAAY,YAAY;8CACzB,EAAO,YAAY,UAAU;gDAC3B,EAAO,YAAY,YAAY;iDAC9B,EAAO,YAAY,aAAa;;sCAE3C,EAAO,WAAW,MAAM,SAAS;6CAC1B,EAAO,WAAW,MAAM,WAAW;gDAChC,EAAO,WAAW,MAAM,cAAc;uCAC/C,EAAO,WAAW,OAAO,SAAS;8CAC3B,EAAO,WAAW,OAAO,WAAW;iDACjC,EAAO,WAAW,OAAO,cAAc;sCAClD,EAAO,WAAW,MAAM,SAAS;6CAC1B,EAAO,WAAW,MAAM,WAAW;gDAChC,EAAO,WAAW,MAAM,cAAc;;;;;;;yBAO7D,EAAO,WAAW,WAAW;4BAC1B,EAAO,WAAW,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAkMtD,SAAS,KAAK,YAAY,EAAM;;GAEjC,EAAE,CAAC,EAoCF,EAAC,GAAD;CAAgB,MAAM,EAAE,UAAU,IAAM;WACtC,kBAAC,GAAD;EACE,MAtBa,MAAS,MAAc,cAAc,YAAY,MAAc,cAAc,MAAc,iBAAiB,SAAS;EAuBxH;EACV,OA5BC;GAPL,GAAG;GACH,WAAW;GACX,YAAY;GACZ,WAAW;GACX,yBAAyB;GAGpB;EA6BD,WAAW;EACX,mBAAiB;EACjB,GAAI;EACJ,CAAA;CACa,CAAA;AAmBvB,EAAO,cAAc,UACrB,EAAO,QAAQ,EAAU"}

package/dist-lib/forms/Cascader.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../useCustomIcon-DbSB56Pd.cjs`),t=require(`./FieldShell.cjs`),n=require(`../fieldProps-CuWfEbFx.cjs`),r=require(`../selectStyles-BFeXUMpO.cjs`);let i=require(`antd`),a=require(`react`),o=require(`react/jsx-runtime`);var s=`ds-cascader-styles`,c=`ds-cascader`,l=()=>e.n(`arrowButtonDown`,{size:10}),u=({suffixIcon:e,fieldLabel:u,fieldRequired:d,fieldDescription:f,fieldError:p,fieldActions:m,containerStyle:h,clear:g,clearable:_=!1,clearLabel:v,clearVisibility:y=`always`,onClear:b,onValueChange:x,clearToValue:S,id:C,...w})=>{let T=(0,a.useId)();(0,a.useEffect)(()=>{if(r.s(),typeof document<`u`&&!document.getElementById(s)){let e=document.createElement(`style`);e.id=s,e.textContent=`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../useCustomIcon-DbSB56Pd.cjs`),t=require(`./FieldShell.cjs`),n=require(`../fieldProps-CuWfEbFx.cjs`),r=require(`../selectStyles-KK5-1q0t.cjs`);let i=require(`antd`),a=require(`react`),o=require(`react/jsx-runtime`);var s=`ds-cascader-styles`,c=`ds-cascader`,l=()=>e.n(`arrowButtonDown`,{size:10}),u=({suffixIcon:e,fieldLabel:u,fieldRequired:d,fieldDescription:f,fieldError:p,fieldActions:m,containerStyle:h,clear:g,clearable:_=!1,clearLabel:v,clearVisibility:y=`always`,onClear:b,onValueChange:x,clearToValue:S,id:C,...w})=>{let T=(0,a.useId)();(0,a.useEffect)(()=>{if(r.c(),typeof document<`u`&&!document.getElementById(s)){let e=document.createElement(`style`);e.id=s,e.textContent=`
         .${c}.ant-select,
         .${c}.ant-select .ant-select-selector,
         .${c} .ant-select-selector {
@@ -33,5 +33,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../c
           min-width: 10px;
           min-height: 10px;
         }
-      `,document.head.appendChild(e)}},[]);let E=(0,a.useMemo)(()=>e===void 0?(0,o.jsx)(l,{}):e,[e]),D=r.c(c,r.t,w.className),O=!!(u||d||f||p||m||_||g||b),k=C??(O?T:void 0),A=k?`${k}-description`:void 0,j=k?`${k}-error`:void 0,M=g?.onClear??b,N=S===void 0?void 0:S,P=n.t(f?A:void 0,p?j:void 0),F=(0,o.jsx)(i.Cascader,{...w,id:k,className:D,suffixIcon:E,"aria-describedby":P,"aria-invalid":p?!0:void 0,onChange:(e,t)=>{w.onChange?.(e,t),x?.(e)}});return O?(0,o.jsx)(t.FieldShell,{label:u,required:d,htmlFor:k,description:f,descriptionId:A,error:p,errorId:j,clear:g,clearable:_,clearLabel:v,clearVisibility:y,clearValue:w.value,onClear:()=>{M?.(),x?.(N),w.onChange?.(N,[])},extraActions:m,style:h,children:F}):F};u.displayName=`Cascader`,exports.Cascader=u;
+      `,document.head.appendChild(e)}},[]);let E=(0,a.useMemo)(()=>e===void 0?(0,o.jsx)(l,{}):e,[e]),D=r.l(c,r.t,w.className),O=!!(u||d||f||p||m||_||g||b),k=C??(O?T:void 0),A=k?`${k}-description`:void 0,j=k?`${k}-error`:void 0,M=g?.onClear??b,N=S===void 0?void 0:S,P=n.t(f?A:void 0,p?j:void 0),F=(0,o.jsx)(i.Cascader,{...w,id:k,className:D,suffixIcon:E,"aria-describedby":P,"aria-invalid":p?!0:void 0,onChange:(e,t)=>{w.onChange?.(e,t),x?.(e)}});return O?(0,o.jsx)(t.FieldShell,{label:u,required:d,htmlFor:k,description:f,descriptionId:A,error:p,errorId:j,clear:g,clearable:_,clearLabel:v,clearVisibility:y,clearValue:w.value,onClear:()=>{M?.(),x?.(N),w.onChange?.(N,[])},extraActions:m,style:h,children:F}):F};u.displayName=`Cascader`,exports.Cascader=u;
 //# sourceMappingURL=Cascader.cjs.map

package/dist-lib/forms/Cascader.js

@@ -1,7 +1,7 @@
 import { n as e } from "../useCustomIcon-B-VUK-84.js";
 import { FieldShell as t } from "./FieldShell.js";
 import { t as n } from "../fieldProps-EeYy2kXb.js";
-import { c as r, s as i, t as a } from "../selectStyles-C8j5Vvgp.js";
+import { c as r, l as i, t as a } from "../selectStyles-7f37TvzD.js";
 import { Cascader as o } from "antd";
 import { useEffect as s, useId as c, useMemo as l } from "react";
 import { jsx as u } from "react/jsx-runtime";
@@ -9,7 +9,7 @@ import { jsx as u } from "react/jsx-runtime";
 var d = "ds-cascader-styles", f = "ds-cascader", p = () => e("arrowButtonDown", { size: 10 }), m = ({ suffixIcon: e, fieldLabel: m, fieldRequired: h, fieldDescription: g, fieldError: _, fieldActions: v, containerStyle: y, clear: b, clearable: x = !1, clearLabel: S, clearVisibility: C = "always", onClear: w, onValueChange: T, clearToValue: E, id: D, ...O }) => {
 	let k = c();
 	s(() => {
-		if (i(), typeof document < "u" && !document.getElementById(d)) {
+		if (r(), typeof document < "u" && !document.getElementById(d)) {
 			let e = document.createElement("style");
 			e.id = d, e.textContent = `
         .${f}.ant-select,
@@ -49,7 +49,7 @@ var d = "ds-cascader-styles", f = "ds-cascader", p = () => e("arrowButtonDown",
       `, document.head.appendChild(e);
 		}
 	}, []);
-	let A = l(() => e === void 0 ? /* @__PURE__ */ u(p, {}) : e, [e]), j = r(f, a, O.className), M = !!(m || h || g || _ || v || x || b || w), N = D ?? (M ? k : void 0), P = N ? `${N}-description` : void 0, F = N ? `${N}-error` : void 0, I = b?.onClear ?? w, L = E === void 0 ? void 0 : E, R = n(g ? P : void 0, _ ? F : void 0), z = /* @__PURE__ */ u(o, {
+	let A = l(() => e === void 0 ? /* @__PURE__ */ u(p, {}) : e, [e]), j = i(f, a, O.className), M = !!(m || h || g || _ || v || x || b || w), N = D ?? (M ? k : void 0), P = N ? `${N}-description` : void 0, F = N ? `${N}-error` : void 0, I = b?.onClear ?? w, L = E === void 0 ? void 0 : E, R = n(g ? P : void 0, _ ? F : void 0), z = /* @__PURE__ */ u(o, {
 		...O,
 		id: N,
 		className: j,

package/dist-lib/forms/ClearableAutoComplete.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../AutoComplete-gOMQxLvY.cjs`);let t=require(`react/jsx-runtime`);var n=({fieldLabel:n,fieldRequired:r,clear:i,clearable:a=!0,clearLabel:o,clearVisibility:s=`always`,onClear:c,onValueChange:l,value:u,containerStyle:d,fieldActions:f,id:p,className:m,style:h,...g})=>(0,t.jsx)(e.t,{id:p,value:u,className:m,fieldLabel:n,fieldRequired:r,fieldActions:f,containerStyle:d,clear:i,clearable:a,clearLabel:o,clearVisibility:s,onClear:c,onValueChange:l,style:{width:`100%`,...h},...g});exports.ClearableAutoComplete=n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../AutoComplete-C9LcpBRs.cjs`);let t=require(`react/jsx-runtime`);var n=({fieldLabel:n,fieldRequired:r,clear:i,clearable:a=!0,clearLabel:o,clearVisibility:s=`always`,onClear:c,onValueChange:l,value:u,containerStyle:d,fieldActions:f,id:p,className:m,style:h,...g})=>(0,t.jsx)(e.t,{id:p,value:u,className:m,fieldLabel:n,fieldRequired:r,fieldActions:f,containerStyle:d,clear:i,clearable:a,clearLabel:o,clearVisibility:s,onClear:c,onValueChange:l,style:{width:`100%`,...h},...g});exports.ClearableAutoComplete=n;
 //# sourceMappingURL=ClearableAutoComplete.cjs.map

package/dist-lib/forms/ClearableAutoComplete.js

@@ -1,4 +1,4 @@
-import { t as e } from "../AutoComplete-cpf8hCnK.js";
+import { t as e } from "../AutoComplete-CCYcFqfs.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/ds/forms/ClearableAutoComplete.tsx
 var n = ({ fieldLabel: n, fieldRequired: r, clear: i, clearable: a = !0, clearLabel: o, clearVisibility: s = "always", onClear: c, onValueChange: l, value: u, containerStyle: d, fieldActions: f, id: p, className: m, style: h, ...g }) => /* @__PURE__ */ t(e, {

package/dist-lib/forms/ClearableDatePicker.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../DatePicker-DTVtamsX.cjs`);require(`antd`);let t=require(`react/jsx-runtime`);var n=({fieldLabel:n,fieldRequired:r,clear:i,clearable:a=!0,clearLabel:o,clearVisibility:s=`always`,onClear:c,onValueChange:l,value:u,containerStyle:d,fieldActions:f,id:p,...m})=>(0,t.jsx)(e.n,{id:p,value:u,fieldLabel:n,fieldRequired:r,fieldActions:f,containerStyle:d,clear:i,clearable:a,clearLabel:o,clearVisibility:s,onClear:c,onValueChange:l,style:{width:`100%`,...m.style},...m});exports.ClearableDatePicker=n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../DatePicker-CQgt-WoB.cjs`);let t=require(`react/jsx-runtime`);var n=({fieldLabel:n,fieldRequired:r,clear:i,clearable:a=!0,clearLabel:o,clearVisibility:s=`always`,onClear:c,onValueChange:l,value:u,containerStyle:d,fieldActions:f,id:p,dsMaskEnabled:m,dsMaskSeparator:h,...g})=>(0,t.jsx)(e.n,{id:p,value:u,fieldLabel:n,fieldRequired:r,fieldActions:f,containerStyle:d,clear:i,clearable:a,clearLabel:o,clearVisibility:s,onClear:c,onValueChange:l,dsMaskEnabled:m,dsMaskSeparator:h,style:{width:`100%`,...g.style},...g});exports.ClearableDatePicker=n;
 //# sourceMappingURL=ClearableDatePicker.cjs.map

package/dist-lib/forms/ClearableDatePicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ClearableDatePicker.cjs","names":[],"sources":["../../src/ds/forms/ClearableDatePicker.tsx"],"sourcesContent":["import { DatePicker } from 'antd';\nimport type { CSSProperties, ReactNode } from 'react';\nimport type { Dayjs } from 'dayjs';\nimport type { ClearConfig, ClearVisibility } from './clearUtils';\nimport { DatePicker as DSDatePicker } from './DatePicker';\n\ntype DatePickerProps = React.ComponentProps<typeof DatePicker>;\n\nexport type ClearableDatePickerProps = Omit<DatePickerProps, 'onChange'> & {\n  fieldLabel: ReactNode;\n  fieldRequired?: boolean;\n  clear?: ClearConfig;\n  clearable?: boolean;\n  clearLabel?: ReactNode;\n  clearVisibility?: ClearVisibility;\n  onClear?: () => void;\n  onValueChange?: (nextValue: Dayjs | null) => void;\n  containerStyle?: CSSProperties;\n  fieldActions?: ReactNode;\n};\n\nexport const ClearableDatePicker = ({\n  fieldLabel,\n  fieldRequired,\n  clear,\n  clearable = true,\n  clearLabel,\n  clearVisibility = 'always',\n  onClear,\n  onValueChange,\n  value,\n  containerStyle,\n  fieldActions,\n  id,\n  ...pickerProps\n}: ClearableDatePickerProps) => {\n  return (\n    <DSDatePicker\n      id={id}\n      value={value}\n      fieldLabel={fieldLabel}\n      fieldRequired={fieldRequired}\n      fieldActions={fieldActions}\n      containerStyle={containerStyle}\n      clear={clear}\n      clearable={clearable}\n      clearLabel={clearLabel}\n      clearVisibility={clearVisibility}\n      onClear={onClear}\n      onValueChange={onValueChange}\n      style={{ width: '100%', ...pickerProps.style }}\n      {...pickerProps}\n    />\n  );\n};\n"],"mappings":"qMAqBA,IAAa,GAAuB,CAClC,aACA,gBACA,QACA,YAAY,GACZ,aACA,kBAAkB,SAClB,UACA,gBACA,QACA,iBACA,eACA,KACA,GAAG,MAGD,EAAA,EAAA,KAAC,EAAA,EAAD,CACM,KACG,QACK,aACG,gBACD,eACE,iBACT,QACI,YACC,aACK,kBACR,UACM,gBACf,MAAO,CAAE,MAAO,OAAQ,GAAG,EAAY,MAAO,CAC9C,GAAI,EACJ,CAAA"}
+{"version":3,"file":"ClearableDatePicker.cjs","names":[],"sources":["../../src/ds/forms/ClearableDatePicker.tsx"],"sourcesContent":["import type { DatePickerProps } from 'antd';\nimport type { CSSProperties, ReactNode } from 'react';\nimport type { Dayjs } from 'dayjs';\nimport type { ClearConfig, ClearVisibility } from './clearUtils';\nimport { DatePicker as DSDatePicker } from './DatePicker';\nimport type { DSDateSeparator } from './DatePicker';\n\nexport type ClearableDatePickerProps = Omit<DatePickerProps, 'onChange'> & {\n  fieldLabel: ReactNode;\n  fieldRequired?: boolean;\n  clear?: ClearConfig;\n  clearable?: boolean;\n  clearLabel?: ReactNode;\n  clearVisibility?: ClearVisibility;\n  onClear?: () => void;\n  onValueChange?: (nextValue: Dayjs | null) => void;\n  containerStyle?: CSSProperties;\n  fieldActions?: ReactNode;\n  value?: Dayjs | null;\n  /** Enable numeric-only input with auto-inserted date separator. Only applies to single date picker. Default: true. */\n  dsMaskEnabled?: boolean;\n  /** Separator character inserted between MM, DD, and YYYY segments. Default: '-'. */\n  dsMaskSeparator?: DSDateSeparator;\n};\n\nexport const ClearableDatePicker = ({\n  fieldLabel,\n  fieldRequired,\n  clear,\n  clearable = true,\n  clearLabel,\n  clearVisibility = 'always',\n  onClear,\n  onValueChange,\n  value,\n  containerStyle,\n  fieldActions,\n  id,\n  dsMaskEnabled,\n  dsMaskSeparator,\n  ...pickerProps\n}: ClearableDatePickerProps) => {\n  return (\n    <DSDatePicker\n      id={id}\n      value={value}\n      fieldLabel={fieldLabel}\n      fieldRequired={fieldRequired}\n      fieldActions={fieldActions}\n      containerStyle={containerStyle}\n      clear={clear}\n      clearable={clearable}\n      clearLabel={clearLabel}\n      clearVisibility={clearVisibility}\n      onClear={onClear}\n      onValueChange={onValueChange}\n      dsMaskEnabled={dsMaskEnabled}\n      dsMaskSeparator={dsMaskSeparator}\n      style={{ width: '100%', ...pickerProps.style }}\n      {...pickerProps}\n    />\n  );\n};\n"],"mappings":"qLAyBA,IAAa,GAAuB,CAClC,aACA,gBACA,QACA,YAAY,GACZ,aACA,kBAAkB,SAClB,UACA,gBACA,QACA,iBACA,eACA,KACA,gBACA,kBACA,GAAG,MAGD,EAAA,EAAA,KAAC,EAAA,EAAD,CACM,KACG,QACK,aACG,gBACD,eACE,iBACT,QACI,YACC,aACK,kBACR,UACM,gBACA,gBACE,kBACjB,MAAO,CAAE,MAAO,OAAQ,GAAG,EAAY,MAAO,CAC9C,GAAI,EACJ,CAAA"}

package/dist-lib/forms/ClearableDatePicker.js

@@ -1,8 +1,7 @@
-import { n as e } from "../DatePicker-BpjYibJF.js";
-import "antd";
+import { n as e } from "../DatePicker-LXjOxVN5.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/ds/forms/ClearableDatePicker.tsx
-var n = ({ fieldLabel: n, fieldRequired: r, clear: i, clearable: a = !0, clearLabel: o, clearVisibility: s = "always", onClear: c, onValueChange: l, value: u, containerStyle: d, fieldActions: f, id: p, ...m }) => /* @__PURE__ */ t(e, {
+var n = ({ fieldLabel: n, fieldRequired: r, clear: i, clearable: a = !0, clearLabel: o, clearVisibility: s = "always", onClear: c, onValueChange: l, value: u, containerStyle: d, fieldActions: f, id: p, dsMaskEnabled: m, dsMaskSeparator: h, ...g }) => /* @__PURE__ */ t(e, {
 	id: p,
 	value: u,
 	fieldLabel: n,
@@ -15,11 +14,13 @@ var n = ({ fieldLabel: n, fieldRequired: r, clear: i, clearable: a = !0, clearLa
 	clearVisibility: s,
 	onClear: c,
 	onValueChange: l,
+	dsMaskEnabled: m,
+	dsMaskSeparator: h,
 	style: {
 		width: "100%",
-		...m.style
+		...g.style
 	},
-	...m
+	...g
 });
 //#endregion
 export { n as ClearableDatePicker };

package/dist-lib/forms/ClearableDatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClearableDatePicker.js","names":[],"sources":["../../src/ds/forms/ClearableDatePicker.tsx"],"sourcesContent":["import { DatePicker } from 'antd';\nimport type { CSSProperties, ReactNode } from 'react';\nimport type { Dayjs } from 'dayjs';\nimport type { ClearConfig, ClearVisibility } from './clearUtils';\nimport { DatePicker as DSDatePicker } from './DatePicker';\n\ntype DatePickerProps = React.ComponentProps<typeof DatePicker>;\n\nexport type ClearableDatePickerProps = Omit<DatePickerProps, 'onChange'> & {\n  fieldLabel: ReactNode;\n  fieldRequired?: boolean;\n  clear?: ClearConfig;\n  clearable?: boolean;\n  clearLabel?: ReactNode;\n  clearVisibility?: ClearVisibility;\n  onClear?: () => void;\n  onValueChange?: (nextValue: Dayjs | null) => void;\n  containerStyle?: CSSProperties;\n  fieldActions?: ReactNode;\n};\n\nexport const ClearableDatePicker = ({\n  fieldLabel,\n  fieldRequired,\n  clear,\n  clearable = true,\n  clearLabel,\n  clearVisibility = 'always',\n  onClear,\n  onValueChange,\n  value,\n  containerStyle,\n  fieldActions,\n  id,\n  ...pickerProps\n}: ClearableDatePickerProps) => {\n  return (\n    <DSDatePicker\n      id={id}\n      value={value}\n      fieldLabel={fieldLabel}\n      fieldRequired={fieldRequired}\n      fieldActions={fieldActions}\n      containerStyle={containerStyle}\n      clear={clear}\n      clearable={clearable}\n      clearLabel={clearLabel}\n      clearVisibility={clearVisibility}\n      onClear={onClear}\n      onValueChange={onValueChange}\n      style={{ width: '100%', ...pickerProps.style }}\n      {...pickerProps}\n    />\n  );\n};\n"],"mappings":";;;;AAqBA,IAAa,KAAuB,EAClC,eACA,kBACA,UACA,eAAY,IACZ,eACA,qBAAkB,UAClB,YACA,kBACA,UACA,mBACA,iBACA,OACA,GAAG,QAGD,kBAAC,GAAD;CACM;CACG;CACK;CACG;CACD;CACE;CACT;CACI;CACC;CACK;CACR;CACM;CACf,OAAO;EAAE,OAAO;EAAQ,GAAG,EAAY;EAAO;CAC9C,GAAI;CACJ,CAAA"}
+{"version":3,"file":"ClearableDatePicker.js","names":[],"sources":["../../src/ds/forms/ClearableDatePicker.tsx"],"sourcesContent":["import type { DatePickerProps } from 'antd';\nimport type { CSSProperties, ReactNode } from 'react';\nimport type { Dayjs } from 'dayjs';\nimport type { ClearConfig, ClearVisibility } from './clearUtils';\nimport { DatePicker as DSDatePicker } from './DatePicker';\nimport type { DSDateSeparator } from './DatePicker';\n\nexport type ClearableDatePickerProps = Omit<DatePickerProps, 'onChange'> & {\n  fieldLabel: ReactNode;\n  fieldRequired?: boolean;\n  clear?: ClearConfig;\n  clearable?: boolean;\n  clearLabel?: ReactNode;\n  clearVisibility?: ClearVisibility;\n  onClear?: () => void;\n  onValueChange?: (nextValue: Dayjs | null) => void;\n  containerStyle?: CSSProperties;\n  fieldActions?: ReactNode;\n  value?: Dayjs | null;\n  /** Enable numeric-only input with auto-inserted date separator. Only applies to single date picker. Default: true. */\n  dsMaskEnabled?: boolean;\n  /** Separator character inserted between MM, DD, and YYYY segments. Default: '-'. */\n  dsMaskSeparator?: DSDateSeparator;\n};\n\nexport const ClearableDatePicker = ({\n  fieldLabel,\n  fieldRequired,\n  clear,\n  clearable = true,\n  clearLabel,\n  clearVisibility = 'always',\n  onClear,\n  onValueChange,\n  value,\n  containerStyle,\n  fieldActions,\n  id,\n  dsMaskEnabled,\n  dsMaskSeparator,\n  ...pickerProps\n}: ClearableDatePickerProps) => {\n  return (\n    <DSDatePicker\n      id={id}\n      value={value}\n      fieldLabel={fieldLabel}\n      fieldRequired={fieldRequired}\n      fieldActions={fieldActions}\n      containerStyle={containerStyle}\n      clear={clear}\n      clearable={clearable}\n      clearLabel={clearLabel}\n      clearVisibility={clearVisibility}\n      onClear={onClear}\n      onValueChange={onValueChange}\n      dsMaskEnabled={dsMaskEnabled}\n      dsMaskSeparator={dsMaskSeparator}\n      style={{ width: '100%', ...pickerProps.style }}\n      {...pickerProps}\n    />\n  );\n};\n"],"mappings":";;;AAyBA,IAAa,KAAuB,EAClC,eACA,kBACA,UACA,eAAY,IACZ,eACA,qBAAkB,UAClB,YACA,kBACA,UACA,mBACA,iBACA,OACA,kBACA,oBACA,GAAG,QAGD,kBAAC,GAAD;CACM;CACG;CACK;CACG;CACD;CACE;CACT;CACI;CACC;CACK;CACR;CACM;CACA;CACE;CACjB,OAAO;EAAE,OAAO;EAAQ,GAAG,EAAY;EAAO;CAC9C,GAAI;CACJ,CAAA"}

package/dist-lib/forms/ClearableTransfer.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../core-bPY3ouxp.cjs`),t=require(`../theme.cjs`),n=require(`./Button.cjs`),r=require(`../useCustomIcon-DbSB56Pd.cjs`),i=require(`./FieldShell.cjs`),a=require(`./Checkbox.cjs`);let o=require(`antd`),s=require(`react`),c=require(`react/jsx-runtime`);var l=`ds-transfer-styles`,u={assignment:{showSearch:!0,oneWay:!1},reconciliation:{showSearch:!0,oneWay:!0},review:{showSearch:!1,oneWay:!1},compact:{showSearch:!0,oneWay:!1}};function d(...e){return e.filter(Boolean).join(` `).trim()}function f(e){e.querySelectorAll(`.ant-transfer-list-checkbox.ant-checkbox-wrapper`).forEach(e=>{e.classList.add(`ds-checkbox`,`ds-checkbox-size-md`)}),e.querySelectorAll(`.ant-transfer-list-body-search-wrapper`).forEach(e=>{let t=e;t.style.padding=`8px 10px`}),e.querySelectorAll(`.ant-transfer-list-search`).forEach(e=>{let t=e;t.style.margin=`0`,t.style.width=`100%`})}function p(){if(typeof document>`u`)return;let{button:n,form:r,table:i}=t.dsSemanticTokens,a=document.getElementById(l);a||(a=document.createElement(`style`),a.id=l,document.head.appendChild(a)),a.textContent=`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../core-bPY3ouxp.cjs`),t=require(`../theme.cjs`),n=require(`./Button.cjs`),r=require(`../useCustomIcon-DbSB56Pd.cjs`),i=require(`./FieldShell.cjs`),a=require(`./Checkbox.cjs`);let o=require(`antd`),s=require(`react`),c=require(`react/jsx-runtime`);var l=`ds-transfer-styles`,u={assignment:{showSearch:!0,oneWay:!1},reconciliation:{showSearch:!0,oneWay:!0},review:{showSearch:!1,oneWay:!1},compact:{showSearch:!0,oneWay:!1}};function d(...e){return e.filter(Boolean).join(` `).trim()}function f(e){e.querySelectorAll(`.ant-transfer-list-checkbox.ant-checkbox-wrapper`).forEach(e=>{e.classList.add(`ds-checkbox`,`ds-checkbox-size-md`);let t=e.querySelector(`input[type="checkbox"]`);if(t instanceof HTMLInputElement&&!t.getAttribute(`aria-label`)){let n=e.closest(`.ant-transfer-list`)?.querySelector(`.ant-transfer-list-header-title`)?.textContent?.trim(),r=e.closest(`.ant-transfer-list-content-item`),i=r?.getAttribute(`title`)?.trim()||r?.textContent?.trim(),a=i?`Select ${i}`:n?`Select all ${n}`:`Select item`;t.setAttribute(`aria-label`,a)}}),e.querySelectorAll(`.ant-transfer-list-body-search-wrapper`).forEach(e=>{let t=e;t.style.padding=`8px 10px`}),e.querySelectorAll(`.ant-transfer-list-search`).forEach(e=>{let t=e;t.style.margin=`0`,t.style.width=`100%`})}function p(){if(typeof document>`u`)return;let{button:n,form:r,table:i}=t.dsSemanticTokens,a=document.getElementById(l);a||(a=document.createElement(`style`),a.id=l,document.head.appendChild(a)),a.textContent=`
     .ds-transfer {
       width: 100%;
       font-family: 'Nunito', sans-serif;

package/dist-lib/forms/ClearableTransfer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ClearableTransfer.cjs","names":[],"sources":["../../src/ds/forms/ClearableTransfer.tsx"],"sourcesContent":["import { Transfer as AntTransfer } from 'antd';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport { FieldShell } from './FieldShell';\nimport { Button } from './Button';\nimport { Checkbox } from './Checkbox';\nimport type { ClearConfig, ClearVisibility } from './clearUtils';\nimport type { DSFieldShellProps } from './fieldProps';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\nimport { CORE_COLORS } from '../../tokens/core';\nimport { Icon } from '../../utils/icons';\n\ntype AntTransferProps = React.ComponentProps<typeof AntTransfer>;\n\ntype TransferTargetKeys = AntTransferProps['targetKeys'];\n\nexport type DSTransferVariant = 'assignment' | 'reconciliation' | 'review' | 'compact';\n\nexport type TransferProps = AntTransferProps & DSFieldShellProps & {\n  onValueChange?: (nextValue: TransferTargetKeys) => void;\n  clearToValue?: TransferTargetKeys;\n  dsVariant?: DSTransferVariant;\n};\n\nexport type ClearableTransferProps = TransferProps & {\n  fieldLabel: ReactNode;\n  fieldRequired?: boolean;\n  clear?: ClearConfig;\n  clearable?: boolean;\n  clearLabel?: ReactNode;\n  clearVisibility?: ClearVisibility;\n  onClear?: () => void;\n  containerStyle?: CSSProperties;\n  fieldActions?: ReactNode;\n};\n\nconst STYLE_ID = 'ds-transfer-styles';\n\nconst DEFAULTS_BY_VARIANT: Record<DSTransferVariant, Pick<AntTransferProps, 'showSearch' | 'oneWay'>> = {\n  assignment: { showSearch: true, oneWay: false },\n  reconciliation: { showSearch: true, oneWay: true },\n  review: { showSearch: false, oneWay: false },\n  compact: { showSearch: true, oneWay: false },\n};\n\nfunction mergeClassNames(...classNames: Array<string | undefined>) {\n  return classNames.filter(Boolean).join(' ').trim();\n}\n\nfunction applyDSCheckboxClasses(root: HTMLElement) {\n  const wrappers = root.querySelectorAll('.ant-transfer-list-checkbox.ant-checkbox-wrapper');\n  wrappers.forEach((wrapper) => {\n    wrapper.classList.add('ds-checkbox', 'ds-checkbox-size-md');\n  });\n\n  const searchWrappers = root.querySelectorAll('.ant-transfer-list-body-search-wrapper');\n  searchWrappers.forEach((wrapper) => {\n    const element = wrapper as HTMLElement;\n    element.style.padding = '8px 10px';\n  });\n\n  const searchInputs = root.querySelectorAll('.ant-transfer-list-search');\n  searchInputs.forEach((input) => {\n    const element = input as HTMLElement;\n    element.style.margin = '0';\n    element.style.width = '100%';\n  });\n}\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\n  const { button, form, table } = dsSemanticTokens;\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n\n  style.textContent = `\n    .ds-transfer {\n      width: 100%;\n      font-family: 'Nunito', sans-serif;\n    }\n\n    .ds-transfer .ant-transfer {\n      display: flex;\n      gap: 12px;\n      align-items: stretch;\n    }\n\n    .ds-transfer .ant-transfer-list {\n      border: 1px solid ${button.secondary.defaultBorder};\n      border-radius: 8px;\n      min-width: 220px;\n      background: ${table.surface.base};\n      overflow: hidden;\n    }\n\n    .ds-transfer .ant-transfer-list-header {\n      background: ${table.surface.header};\n      border-bottom: 1px solid ${table.border.bodyDivider};\n      padding: 8px 10px;\n      min-height: 40px;\n    }\n\n    .ds-transfer .ant-transfer-list-header-title {\n      color: ${table.text.header};\n      font-size: 12px;\n      line-height: 16px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n    }\n\n    .ds-transfer .ant-transfer-list-header .ant-dropdown-trigger {\n      display: none !important;\n    }\n\n    .ds-transfer .ant-transfer-list .ant-transfer-list-body-search-wrapper {\n      padding: 8px 10px !important;\n    }\n\n    .ds-transfer .ant-transfer-list-search {\n      margin: 0;\n      width: 100%;\n      border-radius: 6px;\n    }\n\n    .ds-transfer .ant-transfer-list-content-item {\n      color: ${table.text.body};\n      min-height: 32px;\n      padding-inline: 10px;\n      transition: none !important;\n      position: relative;\n      border-inline-start: 4px solid transparent;\n    }\n\n    .ds-transfer .ant-transfer-list-content-item:hover {\n      background: ${table.surface.hover};\n    }\n\n    .ds-transfer .ant-transfer-list-content-item.ant-transfer-list-content-item-checked,\n    .ds-transfer .ant-transfer-list-content-item.ant-transfer-list-content-item-checked:hover,\n    .ds-transfer .ant-transfer-list-content-item.ant-transfer-list-content-item-checked:active,\n    .ds-transfer .ant-transfer-list-content-item:has(.ant-checkbox-checked),\n    .ds-transfer .ant-transfer-list-content-item:has(.ant-checkbox-checked):hover,\n    .ds-transfer .ant-transfer-list-content-item:has(.ant-checkbox-checked):active {\n      background: ${CORE_COLORS.accent.highlightSoft} !important;\n      background-color: ${CORE_COLORS.accent.highlightSoft} !important;\n      background-image: none !important;\n      border-inline-start-color: ${CORE_COLORS.accent.highlight} !important;\n      color: ${CORE_COLORS.text.strong} !important;\n      font-weight: 600 !important;\n    }\n\n    .ds-transfer .ant-transfer-actions,\n    .ds-transfer .ant-transfer-operation {\n      display: inline-flex;\n      flex-direction: column;\n      justify-content: center;\n      gap: 8px;\n      margin-inline: 12px;\n    }\n\n    .ds-transfer .ant-transfer-actions .ant-btn,\n    .ds-transfer .ant-transfer-operation .ant-btn {\n      border-radius: 6px;\n      border: 1px solid ${button.secondary.defaultBorder};\n      background: ${button.secondary.defaultBg};\n      color: ${button.secondary.defaultText};\n      min-width: 36px;\n      min-height: 32px;\n    }\n\n    .ds-transfer .ant-transfer-actions .ant-btn:hover,\n    .ds-transfer .ant-transfer-actions .ant-btn:focus,\n    .ds-transfer .ant-transfer-actions .ant-btn:active,\n    .ds-transfer .ant-transfer-operation .ant-btn:hover,\n    .ds-transfer .ant-transfer-operation .ant-btn:focus,\n    .ds-transfer .ant-transfer-operation .ant-btn:active {\n      border-color: ${button.secondary.hoverBorder};\n      color: ${button.secondary.hoverText};\n      background: ${button.secondary.hoverBg};\n    }\n\n    .ds-transfer .ant-transfer-actions .ant-btn .anticon,\n    .ds-transfer .ant-transfer-operation .ant-btn .anticon {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 16px;\n      height: 16px;\n      color: inherit;\n    }\n\n    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper {\n      border-color: ${button.secondary.defaultBorder};\n      border-radius: 6px;\n      background: ${button.secondary.defaultBg};\n      box-shadow: none;\n    }\n\n    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper:hover,\n    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper:focus,\n    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper:focus-within {\n      border-color: ${button.secondary.hoverBorder};\n      box-shadow: none;\n    }\n\n    .ds-transfer .ant-transfer-list-search .ant-input {\n      color: ${table.text.body};\n      background: transparent;\n    }\n\n    .ds-transfer .ant-transfer-list-search .ant-input::placeholder {\n      color: ${table.text.muted};\n      opacity: 1;\n    }\n\n    .ds-transfer .ant-transfer-list-search .ant-input-prefix .anticon,\n    .ds-transfer .ant-transfer-list-search .ant-input-suffix .anticon,\n    .ds-transfer .ant-transfer-list-header .anticon {\n      color: ${button.secondary.defaultText};\n      width: 14px;\n      height: 14px;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-inner {\n      border-color: ${button.secondary.defaultBorder};\n      border-radius: 4px;\n      width: 16px;\n      height: 16px;\n      background: ${button.secondary.defaultBg};\n    }\n\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-checked .ant-checkbox-inner,\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-indeterminate .ant-checkbox-inner {\n      background: ${button.primary.default};\n      border-color: ${button.primary.default};\n    }\n\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox:hover .ant-checkbox-inner,\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-wrapper:hover .ant-checkbox-inner {\n      border-color: ${button.secondary.hoverBorder};\n    }\n\n    .ds-transfer.ds-transfer--compact .ant-transfer {\n      gap: 8px;\n    }\n\n    .ds-transfer.ds-transfer--compact .ant-transfer-list {\n      min-width: 190px;\n    }\n\n    .ds-transfer.ds-transfer--compact .ant-transfer-list-header {\n      min-height: 34px;\n      padding: 6px 8px;\n    }\n\n    .ds-transfer.ds-transfer--compact .ant-transfer-list-content-item {\n      min-height: 28px;\n      padding-inline: 8px;\n      font-size: 12px;\n      line-height: 16px;\n    }\n\n    .ds-transfer.ds-transfer--review .ant-transfer-list-content-item {\n      cursor: default;\n    }\n\n    .ds-transfer.ds-transfer--review .ant-transfer-list {\n      background: ${form.surface.standard};\n    }\n  `;\n}\n\nexport const Transfer = ({\n  fieldLabel,\n  fieldRequired,\n  fieldDescription,\n  fieldError,\n  clear,\n  clearable = false,\n  clearLabel,\n  clearVisibility = 'always',\n  onClear,\n  onValueChange,\n  clearToValue = [],\n  targetKeys,\n  containerStyle,\n  fieldActions,\n  dsVariant = 'assignment',\n  className,\n  ...transferProps\n}: TransferProps) => {\n  const transferRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    injectStyles();\n\n    const root = transferRef.current;\n    if (!root || typeof MutationObserver === 'undefined') return;\n\n    applyDSCheckboxClasses(root);\n    const observer = new MutationObserver(() => {\n      applyDSCheckboxClasses(root);\n    });\n    observer.observe(root, { childList: true, subtree: true });\n\n    return () => observer.disconnect();\n  }, []);\n\n  const clearAction = clear?.onClear ?? onClear;\n  const defaults = DEFAULTS_BY_VARIANT[dsVariant];\n  const resolvedShowSearch = transferProps.showSearch ?? defaults.showSearch;\n  const resolvedOneWay = transferProps.oneWay ?? defaults.oneWay;\n  const resolvedActions =\n    transferProps.actions ??\n    (resolvedOneWay\n      ? [\n          <Button\n            key=\"move-right\"\n            dsVariant=\"secondary\"\n            size=\"small\"\n            icon={<Icon name=\"arrowRight1\" size={16} />}\n            aria-label=\"Move selected items to target list\"\n          />,\n        ]\n      : [\n          <Button\n            key=\"move-right\"\n            dsVariant=\"secondary\"\n            size=\"small\"\n            icon={<Icon name=\"arrowRight1\" size={16} />}\n            aria-label=\"Move selected items to target list\"\n          />,\n          <Button\n            key=\"move-left\"\n            dsVariant=\"secondary\"\n            size=\"small\"\n            icon={<Icon name=\"arrowLeft1\" size={16} />}\n            aria-label=\"Move selected items to source list\"\n          />,\n        ]);\n  const resolvedSelectionsIcon = transferProps.selectionsIcon ?? null;\n  const compactListStyle = dsVariant === 'compact' ? { width: 190, height: 176 } : undefined;\n  const userListStyle = transferProps.listStyle;\n  const resolvedListStyle =\n    typeof userListStyle === 'function'\n      ? userListStyle\n      : { ...compactListStyle, ...userListStyle };\n\n  const handleClear = () => {\n    clearAction?.();\n    onValueChange?.(clearToValue);\n    transferProps.onChange?.(clearToValue, 'left', []);\n  };\n\n  const shouldWrapInFieldShell = Boolean(\n    fieldLabel || fieldRequired || fieldDescription || fieldError || fieldActions || clearable || clear || onClear,\n  );\n\n  const transferNode = (\n    <div ref={transferRef}>\n      <span style={{ display: 'none' }} aria-hidden=\"true\">\n        <Checkbox />\n      </span>\n      <AntTransfer\n        {...transferProps}\n        className={mergeClassNames('ds-transfer', `ds-transfer--${dsVariant}`, className)}\n        data-ds-transfer-variant={dsVariant}\n        actions={resolvedActions}\n        selectionsIcon={resolvedSelectionsIcon}\n        showSearch={resolvedShowSearch}\n        oneWay={resolvedOneWay}\n        listStyle={resolvedListStyle}\n        targetKeys={targetKeys}\n        onChange={(nextTargetKeys, direction, moveKeys) => {\n          transferProps.onChange?.(nextTargetKeys, direction, moveKeys);\n          onValueChange?.(nextTargetKeys);\n        }}\n      />\n    </div>\n  );\n\n  if (!shouldWrapInFieldShell) {\n    return transferNode;\n  }\n\n  return (\n    <FieldShell\n      label={fieldLabel}\n      required={fieldRequired}\n      description={fieldDescription}\n      error={fieldError}\n      clear={{\n        enabled: clear?.enabled ?? clearable,\n        label: clear?.label ?? clearLabel,\n        visibility: clear?.visibility ?? clearVisibility,\n        onClear: handleClear,\n      }}\n      clearValue={targetKeys}\n      extraActions={fieldActions}\n      style={containerStyle}\n    >\n      {transferNode}\n    </FieldShell>\n  );\n};\n\nexport const ClearableTransfer = ({\n  clearable = true,\n  ...props\n}: ClearableTransferProps) => {\n  return <Transfer {...props} clearable={clearable} />;\n};\n"],"mappings":"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"}
+{"version":3,"file":"ClearableTransfer.cjs","names":[],"sources":["../../src/ds/forms/ClearableTransfer.tsx"],"sourcesContent":["import { Transfer as AntTransfer } from 'antd';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport { FieldShell } from './FieldShell';\nimport { Button } from './Button';\nimport { Checkbox } from './Checkbox';\nimport type { ClearConfig, ClearVisibility } from './clearUtils';\nimport type { DSFieldShellProps } from './fieldProps';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\nimport { CORE_COLORS } from '../../tokens/core';\nimport { Icon } from '../../utils/icons';\n\ntype AntTransferProps = React.ComponentProps<typeof AntTransfer>;\n\ntype TransferTargetKeys = AntTransferProps['targetKeys'];\n\nexport type DSTransferVariant = 'assignment' | 'reconciliation' | 'review' | 'compact';\n\nexport type TransferProps = AntTransferProps & DSFieldShellProps & {\n  onValueChange?: (nextValue: TransferTargetKeys) => void;\n  clearToValue?: TransferTargetKeys;\n  dsVariant?: DSTransferVariant;\n};\n\nexport type ClearableTransferProps = TransferProps & {\n  fieldLabel: ReactNode;\n  fieldRequired?: boolean;\n  clear?: ClearConfig;\n  clearable?: boolean;\n  clearLabel?: ReactNode;\n  clearVisibility?: ClearVisibility;\n  onClear?: () => void;\n  containerStyle?: CSSProperties;\n  fieldActions?: ReactNode;\n};\n\nconst STYLE_ID = 'ds-transfer-styles';\n\nconst DEFAULTS_BY_VARIANT: Record<DSTransferVariant, Pick<AntTransferProps, 'showSearch' | 'oneWay'>> = {\n  assignment: { showSearch: true, oneWay: false },\n  reconciliation: { showSearch: true, oneWay: true },\n  review: { showSearch: false, oneWay: false },\n  compact: { showSearch: true, oneWay: false },\n};\n\nfunction mergeClassNames(...classNames: Array<string | undefined>) {\n  return classNames.filter(Boolean).join(' ').trim();\n}\n\nfunction applyDSCheckboxClasses(root: HTMLElement) {\n  const wrappers = root.querySelectorAll('.ant-transfer-list-checkbox.ant-checkbox-wrapper');\n  wrappers.forEach((wrapper) => {\n    wrapper.classList.add('ds-checkbox', 'ds-checkbox-size-md');\n\n    const input = wrapper.querySelector('input[type=\"checkbox\"]');\n    if (input instanceof HTMLInputElement && !input.getAttribute('aria-label')) {\n      const list = wrapper.closest('.ant-transfer-list');\n      const listTitle = list?.querySelector('.ant-transfer-list-header-title')?.textContent?.trim();\n      const item = wrapper.closest('.ant-transfer-list-content-item');\n      const itemTitle = item?.getAttribute('title')?.trim() || item?.textContent?.trim();\n      const label = itemTitle\n        ? `Select ${itemTitle}`\n        : listTitle\n          ? `Select all ${listTitle}`\n          : 'Select item';\n      input.setAttribute('aria-label', label);\n    }\n  });\n\n  const searchWrappers = root.querySelectorAll('.ant-transfer-list-body-search-wrapper');\n  searchWrappers.forEach((wrapper) => {\n    const element = wrapper as HTMLElement;\n    element.style.padding = '8px 10px';\n  });\n\n  const searchInputs = root.querySelectorAll('.ant-transfer-list-search');\n  searchInputs.forEach((input) => {\n    const element = input as HTMLElement;\n    element.style.margin = '0';\n    element.style.width = '100%';\n  });\n}\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\n  const { button, form, table } = dsSemanticTokens;\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n\n  style.textContent = `\n    .ds-transfer {\n      width: 100%;\n      font-family: 'Nunito', sans-serif;\n    }\n\n    .ds-transfer .ant-transfer {\n      display: flex;\n      gap: 12px;\n      align-items: stretch;\n    }\n\n    .ds-transfer .ant-transfer-list {\n      border: 1px solid ${button.secondary.defaultBorder};\n      border-radius: 8px;\n      min-width: 220px;\n      background: ${table.surface.base};\n      overflow: hidden;\n    }\n\n    .ds-transfer .ant-transfer-list-header {\n      background: ${table.surface.header};\n      border-bottom: 1px solid ${table.border.bodyDivider};\n      padding: 8px 10px;\n      min-height: 40px;\n    }\n\n    .ds-transfer .ant-transfer-list-header-title {\n      color: ${table.text.header};\n      font-size: 12px;\n      line-height: 16px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n    }\n\n    .ds-transfer .ant-transfer-list-header .ant-dropdown-trigger {\n      display: none !important;\n    }\n\n    .ds-transfer .ant-transfer-list .ant-transfer-list-body-search-wrapper {\n      padding: 8px 10px !important;\n    }\n\n    .ds-transfer .ant-transfer-list-search {\n      margin: 0;\n      width: 100%;\n      border-radius: 6px;\n    }\n\n    .ds-transfer .ant-transfer-list-content-item {\n      color: ${table.text.body};\n      min-height: 32px;\n      padding-inline: 10px;\n      transition: none !important;\n      position: relative;\n      border-inline-start: 4px solid transparent;\n    }\n\n    .ds-transfer .ant-transfer-list-content-item:hover {\n      background: ${table.surface.hover};\n    }\n\n    .ds-transfer .ant-transfer-list-content-item.ant-transfer-list-content-item-checked,\n    .ds-transfer .ant-transfer-list-content-item.ant-transfer-list-content-item-checked:hover,\n    .ds-transfer .ant-transfer-list-content-item.ant-transfer-list-content-item-checked:active,\n    .ds-transfer .ant-transfer-list-content-item:has(.ant-checkbox-checked),\n    .ds-transfer .ant-transfer-list-content-item:has(.ant-checkbox-checked):hover,\n    .ds-transfer .ant-transfer-list-content-item:has(.ant-checkbox-checked):active {\n      background: ${CORE_COLORS.accent.highlightSoft} !important;\n      background-color: ${CORE_COLORS.accent.highlightSoft} !important;\n      background-image: none !important;\n      border-inline-start-color: ${CORE_COLORS.accent.highlight} !important;\n      color: ${CORE_COLORS.text.strong} !important;\n      font-weight: 600 !important;\n    }\n\n    .ds-transfer .ant-transfer-actions,\n    .ds-transfer .ant-transfer-operation {\n      display: inline-flex;\n      flex-direction: column;\n      justify-content: center;\n      gap: 8px;\n      margin-inline: 12px;\n    }\n\n    .ds-transfer .ant-transfer-actions .ant-btn,\n    .ds-transfer .ant-transfer-operation .ant-btn {\n      border-radius: 6px;\n      border: 1px solid ${button.secondary.defaultBorder};\n      background: ${button.secondary.defaultBg};\n      color: ${button.secondary.defaultText};\n      min-width: 36px;\n      min-height: 32px;\n    }\n\n    .ds-transfer .ant-transfer-actions .ant-btn:hover,\n    .ds-transfer .ant-transfer-actions .ant-btn:focus,\n    .ds-transfer .ant-transfer-actions .ant-btn:active,\n    .ds-transfer .ant-transfer-operation .ant-btn:hover,\n    .ds-transfer .ant-transfer-operation .ant-btn:focus,\n    .ds-transfer .ant-transfer-operation .ant-btn:active {\n      border-color: ${button.secondary.hoverBorder};\n      color: ${button.secondary.hoverText};\n      background: ${button.secondary.hoverBg};\n    }\n\n    .ds-transfer .ant-transfer-actions .ant-btn .anticon,\n    .ds-transfer .ant-transfer-operation .ant-btn .anticon {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 16px;\n      height: 16px;\n      color: inherit;\n    }\n\n    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper {\n      border-color: ${button.secondary.defaultBorder};\n      border-radius: 6px;\n      background: ${button.secondary.defaultBg};\n      box-shadow: none;\n    }\n\n    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper:hover,\n    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper:focus,\n    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper:focus-within {\n      border-color: ${button.secondary.hoverBorder};\n      box-shadow: none;\n    }\n\n    .ds-transfer .ant-transfer-list-search .ant-input {\n      color: ${table.text.body};\n      background: transparent;\n    }\n\n    .ds-transfer .ant-transfer-list-search .ant-input::placeholder {\n      color: ${table.text.muted};\n      opacity: 1;\n    }\n\n    .ds-transfer .ant-transfer-list-search .ant-input-prefix .anticon,\n    .ds-transfer .ant-transfer-list-search .ant-input-suffix .anticon,\n    .ds-transfer .ant-transfer-list-header .anticon {\n      color: ${button.secondary.defaultText};\n      width: 14px;\n      height: 14px;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-inner {\n      border-color: ${button.secondary.defaultBorder};\n      border-radius: 4px;\n      width: 16px;\n      height: 16px;\n      background: ${button.secondary.defaultBg};\n    }\n\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-checked .ant-checkbox-inner,\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-indeterminate .ant-checkbox-inner {\n      background: ${button.primary.default};\n      border-color: ${button.primary.default};\n    }\n\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox:hover .ant-checkbox-inner,\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-wrapper:hover .ant-checkbox-inner {\n      border-color: ${button.secondary.hoverBorder};\n    }\n\n    .ds-transfer.ds-transfer--compact .ant-transfer {\n      gap: 8px;\n    }\n\n    .ds-transfer.ds-transfer--compact .ant-transfer-list {\n      min-width: 190px;\n    }\n\n    .ds-transfer.ds-transfer--compact .ant-transfer-list-header {\n      min-height: 34px;\n      padding: 6px 8px;\n    }\n\n    .ds-transfer.ds-transfer--compact .ant-transfer-list-content-item {\n      min-height: 28px;\n      padding-inline: 8px;\n      font-size: 12px;\n      line-height: 16px;\n    }\n\n    .ds-transfer.ds-transfer--review .ant-transfer-list-content-item {\n      cursor: default;\n    }\n\n    .ds-transfer.ds-transfer--review .ant-transfer-list {\n      background: ${form.surface.standard};\n    }\n  `;\n}\n\nexport const Transfer = ({\n  fieldLabel,\n  fieldRequired,\n  fieldDescription,\n  fieldError,\n  clear,\n  clearable = false,\n  clearLabel,\n  clearVisibility = 'always',\n  onClear,\n  onValueChange,\n  clearToValue = [],\n  targetKeys,\n  containerStyle,\n  fieldActions,\n  dsVariant = 'assignment',\n  className,\n  ...transferProps\n}: TransferProps) => {\n  const transferRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    injectStyles();\n\n    const root = transferRef.current;\n    if (!root || typeof MutationObserver === 'undefined') return;\n\n    applyDSCheckboxClasses(root);\n    const observer = new MutationObserver(() => {\n      applyDSCheckboxClasses(root);\n    });\n    observer.observe(root, { childList: true, subtree: true });\n\n    return () => observer.disconnect();\n  }, []);\n\n  const clearAction = clear?.onClear ?? onClear;\n  const defaults = DEFAULTS_BY_VARIANT[dsVariant];\n  const resolvedShowSearch = transferProps.showSearch ?? defaults.showSearch;\n  const resolvedOneWay = transferProps.oneWay ?? defaults.oneWay;\n  const resolvedActions =\n    transferProps.actions ??\n    (resolvedOneWay\n      ? [\n          <Button\n            key=\"move-right\"\n            dsVariant=\"secondary\"\n            size=\"small\"\n            icon={<Icon name=\"arrowRight1\" size={16} />}\n            aria-label=\"Move selected items to target list\"\n          />,\n        ]\n      : [\n          <Button\n            key=\"move-right\"\n            dsVariant=\"secondary\"\n            size=\"small\"\n            icon={<Icon name=\"arrowRight1\" size={16} />}\n            aria-label=\"Move selected items to target list\"\n          />,\n          <Button\n            key=\"move-left\"\n            dsVariant=\"secondary\"\n            size=\"small\"\n            icon={<Icon name=\"arrowLeft1\" size={16} />}\n            aria-label=\"Move selected items to source list\"\n          />,\n        ]);\n  const resolvedSelectionsIcon = transferProps.selectionsIcon ?? null;\n  const compactListStyle = dsVariant === 'compact' ? { width: 190, height: 176 } : undefined;\n  const userListStyle = transferProps.listStyle;\n  const resolvedListStyle =\n    typeof userListStyle === 'function'\n      ? userListStyle\n      : { ...compactListStyle, ...userListStyle };\n\n  const handleClear = () => {\n    clearAction?.();\n    onValueChange?.(clearToValue);\n    transferProps.onChange?.(clearToValue, 'left', []);\n  };\n\n  const shouldWrapInFieldShell = Boolean(\n    fieldLabel || fieldRequired || fieldDescription || fieldError || fieldActions || clearable || clear || onClear,\n  );\n\n  const transferNode = (\n    <div ref={transferRef}>\n      <span style={{ display: 'none' }} aria-hidden=\"true\">\n        <Checkbox />\n      </span>\n      <AntTransfer\n        {...transferProps}\n        className={mergeClassNames('ds-transfer', `ds-transfer--${dsVariant}`, className)}\n        data-ds-transfer-variant={dsVariant}\n        actions={resolvedActions}\n        selectionsIcon={resolvedSelectionsIcon}\n        showSearch={resolvedShowSearch}\n        oneWay={resolvedOneWay}\n        listStyle={resolvedListStyle}\n        targetKeys={targetKeys}\n        onChange={(nextTargetKeys, direction, moveKeys) => {\n          transferProps.onChange?.(nextTargetKeys, direction, moveKeys);\n          onValueChange?.(nextTargetKeys);\n        }}\n      />\n    </div>\n  );\n\n  if (!shouldWrapInFieldShell) {\n    return transferNode;\n  }\n\n  return (\n    <FieldShell\n      label={fieldLabel}\n      required={fieldRequired}\n      description={fieldDescription}\n      error={fieldError}\n      clear={{\n        enabled: clear?.enabled ?? clearable,\n        label: clear?.label ?? clearLabel,\n        visibility: clear?.visibility ?? clearVisibility,\n        onClear: handleClear,\n      }}\n      clearValue={targetKeys}\n      extraActions={fieldActions}\n      style={containerStyle}\n    >\n      {transferNode}\n    </FieldShell>\n  );\n};\n\nexport const ClearableTransfer = ({\n  clearable = true,\n  ...props\n}: ClearableTransferProps) => {\n  return <Transfer {...props} clearable={clearable} />;\n};\n"],"mappings":"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"}

package/dist-lib/forms/ClearableTransfer.js

@@ -32,6 +32,11 @@ function p(...e) {
 function m(e) {
 	e.querySelectorAll(".ant-transfer-list-checkbox.ant-checkbox-wrapper").forEach((e) => {
 		e.classList.add("ds-checkbox", "ds-checkbox-size-md");
+		let t = e.querySelector("input[type=\"checkbox\"]");
+		if (t instanceof HTMLInputElement && !t.getAttribute("aria-label")) {
+			let n = e.closest(".ant-transfer-list")?.querySelector(".ant-transfer-list-header-title")?.textContent?.trim(), r = e.closest(".ant-transfer-list-content-item"), i = r?.getAttribute("title")?.trim() || r?.textContent?.trim(), a = i ? `Select ${i}` : n ? `Select all ${n}` : "Select item";
+			t.setAttribute("aria-label", a);
+		}
 	}), e.querySelectorAll(".ant-transfer-list-body-search-wrapper").forEach((e) => {
 		let t = e;
 		t.style.padding = "8px 10px";

package/dist-lib/forms/ClearableTransfer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClearableTransfer.js","names":[],"sources":["../../src/ds/forms/ClearableTransfer.tsx"],"sourcesContent":["import { Transfer as AntTransfer } from 'antd';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport { FieldShell } from './FieldShell';\nimport { Button } from './Button';\nimport { Checkbox } from './Checkbox';\nimport type { ClearConfig, ClearVisibility } from './clearUtils';\nimport type { DSFieldShellProps } from './fieldProps';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\nimport { CORE_COLORS } from '../../tokens/core';\nimport { Icon } from '../../utils/icons';\n\ntype AntTransferProps = React.ComponentProps<typeof AntTransfer>;\n\ntype TransferTargetKeys = AntTransferProps['targetKeys'];\n\nexport type DSTransferVariant = 'assignment' | 'reconciliation' | 'review' | 'compact';\n\nexport type TransferProps = AntTransferProps & DSFieldShellProps & {\n  onValueChange?: (nextValue: TransferTargetKeys) => void;\n  clearToValue?: TransferTargetKeys;\n  dsVariant?: DSTransferVariant;\n};\n\nexport type ClearableTransferProps = TransferProps & {\n  fieldLabel: ReactNode;\n  fieldRequired?: boolean;\n  clear?: ClearConfig;\n  clearable?: boolean;\n  clearLabel?: ReactNode;\n  clearVisibility?: ClearVisibility;\n  onClear?: () => void;\n  containerStyle?: CSSProperties;\n  fieldActions?: ReactNode;\n};\n\nconst STYLE_ID = 'ds-transfer-styles';\n\nconst DEFAULTS_BY_VARIANT: Record<DSTransferVariant, Pick<AntTransferProps, 'showSearch' | 'oneWay'>> = {\n  assignment: { showSearch: true, oneWay: false },\n  reconciliation: { showSearch: true, oneWay: true },\n  review: { showSearch: false, oneWay: false },\n  compact: { showSearch: true, oneWay: false },\n};\n\nfunction mergeClassNames(...classNames: Array<string | undefined>) {\n  return classNames.filter(Boolean).join(' ').trim();\n}\n\nfunction applyDSCheckboxClasses(root: HTMLElement) {\n  const wrappers = root.querySelectorAll('.ant-transfer-list-checkbox.ant-checkbox-wrapper');\n  wrappers.forEach((wrapper) => {\n    wrapper.classList.add('ds-checkbox', 'ds-checkbox-size-md');\n  });\n\n  const searchWrappers = root.querySelectorAll('.ant-transfer-list-body-search-wrapper');\n  searchWrappers.forEach((wrapper) => {\n    const element = wrapper as HTMLElement;\n    element.style.padding = '8px 10px';\n  });\n\n  const searchInputs = root.querySelectorAll('.ant-transfer-list-search');\n  searchInputs.forEach((input) => {\n    const element = input as HTMLElement;\n    element.style.margin = '0';\n    element.style.width = '100%';\n  });\n}\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\n  const { button, form, table } = dsSemanticTokens;\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n\n  style.textContent = `\n    .ds-transfer {\n      width: 100%;\n      font-family: 'Nunito', sans-serif;\n    }\n\n    .ds-transfer .ant-transfer {\n      display: flex;\n      gap: 12px;\n      align-items: stretch;\n    }\n\n    .ds-transfer .ant-transfer-list {\n      border: 1px solid ${button.secondary.defaultBorder};\n      border-radius: 8px;\n      min-width: 220px;\n      background: ${table.surface.base};\n      overflow: hidden;\n    }\n\n    .ds-transfer .ant-transfer-list-header {\n      background: ${table.surface.header};\n      border-bottom: 1px solid ${table.border.bodyDivider};\n      padding: 8px 10px;\n      min-height: 40px;\n    }\n\n    .ds-transfer .ant-transfer-list-header-title {\n      color: ${table.text.header};\n      font-size: 12px;\n      line-height: 16px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n    }\n\n    .ds-transfer .ant-transfer-list-header .ant-dropdown-trigger {\n      display: none !important;\n    }\n\n    .ds-transfer .ant-transfer-list .ant-transfer-list-body-search-wrapper {\n      padding: 8px 10px !important;\n    }\n\n    .ds-transfer .ant-transfer-list-search {\n      margin: 0;\n      width: 100%;\n      border-radius: 6px;\n    }\n\n    .ds-transfer .ant-transfer-list-content-item {\n      color: ${table.text.body};\n      min-height: 32px;\n      padding-inline: 10px;\n      transition: none !important;\n      position: relative;\n      border-inline-start: 4px solid transparent;\n    }\n\n    .ds-transfer .ant-transfer-list-content-item:hover {\n      background: ${table.surface.hover};\n    }\n\n    .ds-transfer .ant-transfer-list-content-item.ant-transfer-list-content-item-checked,\n    .ds-transfer .ant-transfer-list-content-item.ant-transfer-list-content-item-checked:hover,\n    .ds-transfer .ant-transfer-list-content-item.ant-transfer-list-content-item-checked:active,\n    .ds-transfer .ant-transfer-list-content-item:has(.ant-checkbox-checked),\n    .ds-transfer .ant-transfer-list-content-item:has(.ant-checkbox-checked):hover,\n    .ds-transfer .ant-transfer-list-content-item:has(.ant-checkbox-checked):active {\n      background: ${CORE_COLORS.accent.highlightSoft} !important;\n      background-color: ${CORE_COLORS.accent.highlightSoft} !important;\n      background-image: none !important;\n      border-inline-start-color: ${CORE_COLORS.accent.highlight} !important;\n      color: ${CORE_COLORS.text.strong} !important;\n      font-weight: 600 !important;\n    }\n\n    .ds-transfer .ant-transfer-actions,\n    .ds-transfer .ant-transfer-operation {\n      display: inline-flex;\n      flex-direction: column;\n      justify-content: center;\n      gap: 8px;\n      margin-inline: 12px;\n    }\n\n    .ds-transfer .ant-transfer-actions .ant-btn,\n    .ds-transfer .ant-transfer-operation .ant-btn {\n      border-radius: 6px;\n      border: 1px solid ${button.secondary.defaultBorder};\n      background: ${button.secondary.defaultBg};\n      color: ${button.secondary.defaultText};\n      min-width: 36px;\n      min-height: 32px;\n    }\n\n    .ds-transfer .ant-transfer-actions .ant-btn:hover,\n    .ds-transfer .ant-transfer-actions .ant-btn:focus,\n    .ds-transfer .ant-transfer-actions .ant-btn:active,\n    .ds-transfer .ant-transfer-operation .ant-btn:hover,\n    .ds-transfer .ant-transfer-operation .ant-btn:focus,\n    .ds-transfer .ant-transfer-operation .ant-btn:active {\n      border-color: ${button.secondary.hoverBorder};\n      color: ${button.secondary.hoverText};\n      background: ${button.secondary.hoverBg};\n    }\n\n    .ds-transfer .ant-transfer-actions .ant-btn .anticon,\n    .ds-transfer .ant-transfer-operation .ant-btn .anticon {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 16px;\n      height: 16px;\n      color: inherit;\n    }\n\n    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper {\n      border-color: ${button.secondary.defaultBorder};\n      border-radius: 6px;\n      background: ${button.secondary.defaultBg};\n      box-shadow: none;\n    }\n\n    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper:hover,\n    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper:focus,\n    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper:focus-within {\n      border-color: ${button.secondary.hoverBorder};\n      box-shadow: none;\n    }\n\n    .ds-transfer .ant-transfer-list-search .ant-input {\n      color: ${table.text.body};\n      background: transparent;\n    }\n\n    .ds-transfer .ant-transfer-list-search .ant-input::placeholder {\n      color: ${table.text.muted};\n      opacity: 1;\n    }\n\n    .ds-transfer .ant-transfer-list-search .ant-input-prefix .anticon,\n    .ds-transfer .ant-transfer-list-search .ant-input-suffix .anticon,\n    .ds-transfer .ant-transfer-list-header .anticon {\n      color: ${button.secondary.defaultText};\n      width: 14px;\n      height: 14px;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-inner {\n      border-color: ${button.secondary.defaultBorder};\n      border-radius: 4px;\n      width: 16px;\n      height: 16px;\n      background: ${button.secondary.defaultBg};\n    }\n\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-checked .ant-checkbox-inner,\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-indeterminate .ant-checkbox-inner {\n      background: ${button.primary.default};\n      border-color: ${button.primary.default};\n    }\n\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox:hover .ant-checkbox-inner,\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-wrapper:hover .ant-checkbox-inner {\n      border-color: ${button.secondary.hoverBorder};\n    }\n\n    .ds-transfer.ds-transfer--compact .ant-transfer {\n      gap: 8px;\n    }\n\n    .ds-transfer.ds-transfer--compact .ant-transfer-list {\n      min-width: 190px;\n    }\n\n    .ds-transfer.ds-transfer--compact .ant-transfer-list-header {\n      min-height: 34px;\n      padding: 6px 8px;\n    }\n\n    .ds-transfer.ds-transfer--compact .ant-transfer-list-content-item {\n      min-height: 28px;\n      padding-inline: 8px;\n      font-size: 12px;\n      line-height: 16px;\n    }\n\n    .ds-transfer.ds-transfer--review .ant-transfer-list-content-item {\n      cursor: default;\n    }\n\n    .ds-transfer.ds-transfer--review .ant-transfer-list {\n      background: ${form.surface.standard};\n    }\n  `;\n}\n\nexport const Transfer = ({\n  fieldLabel,\n  fieldRequired,\n  fieldDescription,\n  fieldError,\n  clear,\n  clearable = false,\n  clearLabel,\n  clearVisibility = 'always',\n  onClear,\n  onValueChange,\n  clearToValue = [],\n  targetKeys,\n  containerStyle,\n  fieldActions,\n  dsVariant = 'assignment',\n  className,\n  ...transferProps\n}: TransferProps) => {\n  const transferRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    injectStyles();\n\n    const root = transferRef.current;\n    if (!root || typeof MutationObserver === 'undefined') return;\n\n    applyDSCheckboxClasses(root);\n    const observer = new MutationObserver(() => {\n      applyDSCheckboxClasses(root);\n    });\n    observer.observe(root, { childList: true, subtree: true });\n\n    return () => observer.disconnect();\n  }, []);\n\n  const clearAction = clear?.onClear ?? onClear;\n  const defaults = DEFAULTS_BY_VARIANT[dsVariant];\n  const resolvedShowSearch = transferProps.showSearch ?? defaults.showSearch;\n  const resolvedOneWay = transferProps.oneWay ?? defaults.oneWay;\n  const resolvedActions =\n    transferProps.actions ??\n    (resolvedOneWay\n      ? [\n          <Button\n            key=\"move-right\"\n            dsVariant=\"secondary\"\n            size=\"small\"\n            icon={<Icon name=\"arrowRight1\" size={16} />}\n            aria-label=\"Move selected items to target list\"\n          />,\n        ]\n      : [\n          <Button\n            key=\"move-right\"\n            dsVariant=\"secondary\"\n            size=\"small\"\n            icon={<Icon name=\"arrowRight1\" size={16} />}\n            aria-label=\"Move selected items to target list\"\n          />,\n          <Button\n            key=\"move-left\"\n            dsVariant=\"secondary\"\n            size=\"small\"\n            icon={<Icon name=\"arrowLeft1\" size={16} />}\n            aria-label=\"Move selected items to source list\"\n          />,\n        ]);\n  const resolvedSelectionsIcon = transferProps.selectionsIcon ?? null;\n  const compactListStyle = dsVariant === 'compact' ? { width: 190, height: 176 } : undefined;\n  const userListStyle = transferProps.listStyle;\n  const resolvedListStyle =\n    typeof userListStyle === 'function'\n      ? userListStyle\n      : { ...compactListStyle, ...userListStyle };\n\n  const handleClear = () => {\n    clearAction?.();\n    onValueChange?.(clearToValue);\n    transferProps.onChange?.(clearToValue, 'left', []);\n  };\n\n  const shouldWrapInFieldShell = Boolean(\n    fieldLabel || fieldRequired || fieldDescription || fieldError || fieldActions || clearable || clear || onClear,\n  );\n\n  const transferNode = (\n    <div ref={transferRef}>\n      <span style={{ display: 'none' }} aria-hidden=\"true\">\n        <Checkbox />\n      </span>\n      <AntTransfer\n        {...transferProps}\n        className={mergeClassNames('ds-transfer', `ds-transfer--${dsVariant}`, className)}\n        data-ds-transfer-variant={dsVariant}\n        actions={resolvedActions}\n        selectionsIcon={resolvedSelectionsIcon}\n        showSearch={resolvedShowSearch}\n        oneWay={resolvedOneWay}\n        listStyle={resolvedListStyle}\n        targetKeys={targetKeys}\n        onChange={(nextTargetKeys, direction, moveKeys) => {\n          transferProps.onChange?.(nextTargetKeys, direction, moveKeys);\n          onValueChange?.(nextTargetKeys);\n        }}\n      />\n    </div>\n  );\n\n  if (!shouldWrapInFieldShell) {\n    return transferNode;\n  }\n\n  return (\n    <FieldShell\n      label={fieldLabel}\n      required={fieldRequired}\n      description={fieldDescription}\n      error={fieldError}\n      clear={{\n        enabled: clear?.enabled ?? clearable,\n        label: clear?.label ?? clearLabel,\n        visibility: clear?.visibility ?? clearVisibility,\n        onClear: handleClear,\n      }}\n      clearValue={targetKeys}\n      extraActions={fieldActions}\n      style={containerStyle}\n    >\n      {transferNode}\n    </FieldShell>\n  );\n};\n\nexport const ClearableTransfer = ({\n  clearable = true,\n  ...props\n}: ClearableTransferProps) => {\n  return <Transfer {...props} clearable={clearable} />;\n};\n"],"mappings":"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"}
+{"version":3,"file":"ClearableTransfer.js","names":[],"sources":["../../src/ds/forms/ClearableTransfer.tsx"],"sourcesContent":["import { Transfer as AntTransfer } from 'antd';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport { FieldShell } from './FieldShell';\nimport { Button } from './Button';\nimport { Checkbox } from './Checkbox';\nimport type { ClearConfig, ClearVisibility } from './clearUtils';\nimport type { DSFieldShellProps } from './fieldProps';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\nimport { CORE_COLORS } from '../../tokens/core';\nimport { Icon } from '../../utils/icons';\n\ntype AntTransferProps = React.ComponentProps<typeof AntTransfer>;\n\ntype TransferTargetKeys = AntTransferProps['targetKeys'];\n\nexport type DSTransferVariant = 'assignment' | 'reconciliation' | 'review' | 'compact';\n\nexport type TransferProps = AntTransferProps & DSFieldShellProps & {\n  onValueChange?: (nextValue: TransferTargetKeys) => void;\n  clearToValue?: TransferTargetKeys;\n  dsVariant?: DSTransferVariant;\n};\n\nexport type ClearableTransferProps = TransferProps & {\n  fieldLabel: ReactNode;\n  fieldRequired?: boolean;\n  clear?: ClearConfig;\n  clearable?: boolean;\n  clearLabel?: ReactNode;\n  clearVisibility?: ClearVisibility;\n  onClear?: () => void;\n  containerStyle?: CSSProperties;\n  fieldActions?: ReactNode;\n};\n\nconst STYLE_ID = 'ds-transfer-styles';\n\nconst DEFAULTS_BY_VARIANT: Record<DSTransferVariant, Pick<AntTransferProps, 'showSearch' | 'oneWay'>> = {\n  assignment: { showSearch: true, oneWay: false },\n  reconciliation: { showSearch: true, oneWay: true },\n  review: { showSearch: false, oneWay: false },\n  compact: { showSearch: true, oneWay: false },\n};\n\nfunction mergeClassNames(...classNames: Array<string | undefined>) {\n  return classNames.filter(Boolean).join(' ').trim();\n}\n\nfunction applyDSCheckboxClasses(root: HTMLElement) {\n  const wrappers = root.querySelectorAll('.ant-transfer-list-checkbox.ant-checkbox-wrapper');\n  wrappers.forEach((wrapper) => {\n    wrapper.classList.add('ds-checkbox', 'ds-checkbox-size-md');\n\n    const input = wrapper.querySelector('input[type=\"checkbox\"]');\n    if (input instanceof HTMLInputElement && !input.getAttribute('aria-label')) {\n      const list = wrapper.closest('.ant-transfer-list');\n      const listTitle = list?.querySelector('.ant-transfer-list-header-title')?.textContent?.trim();\n      const item = wrapper.closest('.ant-transfer-list-content-item');\n      const itemTitle = item?.getAttribute('title')?.trim() || item?.textContent?.trim();\n      const label = itemTitle\n        ? `Select ${itemTitle}`\n        : listTitle\n          ? `Select all ${listTitle}`\n          : 'Select item';\n      input.setAttribute('aria-label', label);\n    }\n  });\n\n  const searchWrappers = root.querySelectorAll('.ant-transfer-list-body-search-wrapper');\n  searchWrappers.forEach((wrapper) => {\n    const element = wrapper as HTMLElement;\n    element.style.padding = '8px 10px';\n  });\n\n  const searchInputs = root.querySelectorAll('.ant-transfer-list-search');\n  searchInputs.forEach((input) => {\n    const element = input as HTMLElement;\n    element.style.margin = '0';\n    element.style.width = '100%';\n  });\n}\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\n  const { button, form, table } = dsSemanticTokens;\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n\n  style.textContent = `\n    .ds-transfer {\n      width: 100%;\n      font-family: 'Nunito', sans-serif;\n    }\n\n    .ds-transfer .ant-transfer {\n      display: flex;\n      gap: 12px;\n      align-items: stretch;\n    }\n\n    .ds-transfer .ant-transfer-list {\n      border: 1px solid ${button.secondary.defaultBorder};\n      border-radius: 8px;\n      min-width: 220px;\n      background: ${table.surface.base};\n      overflow: hidden;\n    }\n\n    .ds-transfer .ant-transfer-list-header {\n      background: ${table.surface.header};\n      border-bottom: 1px solid ${table.border.bodyDivider};\n      padding: 8px 10px;\n      min-height: 40px;\n    }\n\n    .ds-transfer .ant-transfer-list-header-title {\n      color: ${table.text.header};\n      font-size: 12px;\n      line-height: 16px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n    }\n\n    .ds-transfer .ant-transfer-list-header .ant-dropdown-trigger {\n      display: none !important;\n    }\n\n    .ds-transfer .ant-transfer-list .ant-transfer-list-body-search-wrapper {\n      padding: 8px 10px !important;\n    }\n\n    .ds-transfer .ant-transfer-list-search {\n      margin: 0;\n      width: 100%;\n      border-radius: 6px;\n    }\n\n    .ds-transfer .ant-transfer-list-content-item {\n      color: ${table.text.body};\n      min-height: 32px;\n      padding-inline: 10px;\n      transition: none !important;\n      position: relative;\n      border-inline-start: 4px solid transparent;\n    }\n\n    .ds-transfer .ant-transfer-list-content-item:hover {\n      background: ${table.surface.hover};\n    }\n\n    .ds-transfer .ant-transfer-list-content-item.ant-transfer-list-content-item-checked,\n    .ds-transfer .ant-transfer-list-content-item.ant-transfer-list-content-item-checked:hover,\n    .ds-transfer .ant-transfer-list-content-item.ant-transfer-list-content-item-checked:active,\n    .ds-transfer .ant-transfer-list-content-item:has(.ant-checkbox-checked),\n    .ds-transfer .ant-transfer-list-content-item:has(.ant-checkbox-checked):hover,\n    .ds-transfer .ant-transfer-list-content-item:has(.ant-checkbox-checked):active {\n      background: ${CORE_COLORS.accent.highlightSoft} !important;\n      background-color: ${CORE_COLORS.accent.highlightSoft} !important;\n      background-image: none !important;\n      border-inline-start-color: ${CORE_COLORS.accent.highlight} !important;\n      color: ${CORE_COLORS.text.strong} !important;\n      font-weight: 600 !important;\n    }\n\n    .ds-transfer .ant-transfer-actions,\n    .ds-transfer .ant-transfer-operation {\n      display: inline-flex;\n      flex-direction: column;\n      justify-content: center;\n      gap: 8px;\n      margin-inline: 12px;\n    }\n\n    .ds-transfer .ant-transfer-actions .ant-btn,\n    .ds-transfer .ant-transfer-operation .ant-btn {\n      border-radius: 6px;\n      border: 1px solid ${button.secondary.defaultBorder};\n      background: ${button.secondary.defaultBg};\n      color: ${button.secondary.defaultText};\n      min-width: 36px;\n      min-height: 32px;\n    }\n\n    .ds-transfer .ant-transfer-actions .ant-btn:hover,\n    .ds-transfer .ant-transfer-actions .ant-btn:focus,\n    .ds-transfer .ant-transfer-actions .ant-btn:active,\n    .ds-transfer .ant-transfer-operation .ant-btn:hover,\n    .ds-transfer .ant-transfer-operation .ant-btn:focus,\n    .ds-transfer .ant-transfer-operation .ant-btn:active {\n      border-color: ${button.secondary.hoverBorder};\n      color: ${button.secondary.hoverText};\n      background: ${button.secondary.hoverBg};\n    }\n\n    .ds-transfer .ant-transfer-actions .ant-btn .anticon,\n    .ds-transfer .ant-transfer-operation .ant-btn .anticon {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 16px;\n      height: 16px;\n      color: inherit;\n    }\n\n    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper {\n      border-color: ${button.secondary.defaultBorder};\n      border-radius: 6px;\n      background: ${button.secondary.defaultBg};\n      box-shadow: none;\n    }\n\n    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper:hover,\n    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper:focus,\n    .ds-transfer .ant-transfer-list-search.ant-input-affix-wrapper:focus-within {\n      border-color: ${button.secondary.hoverBorder};\n      box-shadow: none;\n    }\n\n    .ds-transfer .ant-transfer-list-search .ant-input {\n      color: ${table.text.body};\n      background: transparent;\n    }\n\n    .ds-transfer .ant-transfer-list-search .ant-input::placeholder {\n      color: ${table.text.muted};\n      opacity: 1;\n    }\n\n    .ds-transfer .ant-transfer-list-search .ant-input-prefix .anticon,\n    .ds-transfer .ant-transfer-list-search .ant-input-suffix .anticon,\n    .ds-transfer .ant-transfer-list-header .anticon {\n      color: ${button.secondary.defaultText};\n      width: 14px;\n      height: 14px;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-inner {\n      border-color: ${button.secondary.defaultBorder};\n      border-radius: 4px;\n      width: 16px;\n      height: 16px;\n      background: ${button.secondary.defaultBg};\n    }\n\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-checked .ant-checkbox-inner,\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-indeterminate .ant-checkbox-inner {\n      background: ${button.primary.default};\n      border-color: ${button.primary.default};\n    }\n\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox:hover .ant-checkbox-inner,\n    .ds-transfer .ant-transfer-list-checkbox .ant-checkbox-wrapper:hover .ant-checkbox-inner {\n      border-color: ${button.secondary.hoverBorder};\n    }\n\n    .ds-transfer.ds-transfer--compact .ant-transfer {\n      gap: 8px;\n    }\n\n    .ds-transfer.ds-transfer--compact .ant-transfer-list {\n      min-width: 190px;\n    }\n\n    .ds-transfer.ds-transfer--compact .ant-transfer-list-header {\n      min-height: 34px;\n      padding: 6px 8px;\n    }\n\n    .ds-transfer.ds-transfer--compact .ant-transfer-list-content-item {\n      min-height: 28px;\n      padding-inline: 8px;\n      font-size: 12px;\n      line-height: 16px;\n    }\n\n    .ds-transfer.ds-transfer--review .ant-transfer-list-content-item {\n      cursor: default;\n    }\n\n    .ds-transfer.ds-transfer--review .ant-transfer-list {\n      background: ${form.surface.standard};\n    }\n  `;\n}\n\nexport const Transfer = ({\n  fieldLabel,\n  fieldRequired,\n  fieldDescription,\n  fieldError,\n  clear,\n  clearable = false,\n  clearLabel,\n  clearVisibility = 'always',\n  onClear,\n  onValueChange,\n  clearToValue = [],\n  targetKeys,\n  containerStyle,\n  fieldActions,\n  dsVariant = 'assignment',\n  className,\n  ...transferProps\n}: TransferProps) => {\n  const transferRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    injectStyles();\n\n    const root = transferRef.current;\n    if (!root || typeof MutationObserver === 'undefined') return;\n\n    applyDSCheckboxClasses(root);\n    const observer = new MutationObserver(() => {\n      applyDSCheckboxClasses(root);\n    });\n    observer.observe(root, { childList: true, subtree: true });\n\n    return () => observer.disconnect();\n  }, []);\n\n  const clearAction = clear?.onClear ?? onClear;\n  const defaults = DEFAULTS_BY_VARIANT[dsVariant];\n  const resolvedShowSearch = transferProps.showSearch ?? defaults.showSearch;\n  const resolvedOneWay = transferProps.oneWay ?? defaults.oneWay;\n  const resolvedActions =\n    transferProps.actions ??\n    (resolvedOneWay\n      ? [\n          <Button\n            key=\"move-right\"\n            dsVariant=\"secondary\"\n            size=\"small\"\n            icon={<Icon name=\"arrowRight1\" size={16} />}\n            aria-label=\"Move selected items to target list\"\n          />,\n        ]\n      : [\n          <Button\n            key=\"move-right\"\n            dsVariant=\"secondary\"\n            size=\"small\"\n            icon={<Icon name=\"arrowRight1\" size={16} />}\n            aria-label=\"Move selected items to target list\"\n          />,\n          <Button\n            key=\"move-left\"\n            dsVariant=\"secondary\"\n            size=\"small\"\n            icon={<Icon name=\"arrowLeft1\" size={16} />}\n            aria-label=\"Move selected items to source list\"\n          />,\n        ]);\n  const resolvedSelectionsIcon = transferProps.selectionsIcon ?? null;\n  const compactListStyle = dsVariant === 'compact' ? { width: 190, height: 176 } : undefined;\n  const userListStyle = transferProps.listStyle;\n  const resolvedListStyle =\n    typeof userListStyle === 'function'\n      ? userListStyle\n      : { ...compactListStyle, ...userListStyle };\n\n  const handleClear = () => {\n    clearAction?.();\n    onValueChange?.(clearToValue);\n    transferProps.onChange?.(clearToValue, 'left', []);\n  };\n\n  const shouldWrapInFieldShell = Boolean(\n    fieldLabel || fieldRequired || fieldDescription || fieldError || fieldActions || clearable || clear || onClear,\n  );\n\n  const transferNode = (\n    <div ref={transferRef}>\n      <span style={{ display: 'none' }} aria-hidden=\"true\">\n        <Checkbox />\n      </span>\n      <AntTransfer\n        {...transferProps}\n        className={mergeClassNames('ds-transfer', `ds-transfer--${dsVariant}`, className)}\n        data-ds-transfer-variant={dsVariant}\n        actions={resolvedActions}\n        selectionsIcon={resolvedSelectionsIcon}\n        showSearch={resolvedShowSearch}\n        oneWay={resolvedOneWay}\n        listStyle={resolvedListStyle}\n        targetKeys={targetKeys}\n        onChange={(nextTargetKeys, direction, moveKeys) => {\n          transferProps.onChange?.(nextTargetKeys, direction, moveKeys);\n          onValueChange?.(nextTargetKeys);\n        }}\n      />\n    </div>\n  );\n\n  if (!shouldWrapInFieldShell) {\n    return transferNode;\n  }\n\n  return (\n    <FieldShell\n      label={fieldLabel}\n      required={fieldRequired}\n      description={fieldDescription}\n      error={fieldError}\n      clear={{\n        enabled: clear?.enabled ?? clearable,\n        label: clear?.label ?? clearLabel,\n        visibility: clear?.visibility ?? clearVisibility,\n        onClear: handleClear,\n      }}\n      clearValue={targetKeys}\n      extraActions={fieldActions}\n      style={containerStyle}\n    >\n      {transferNode}\n    </FieldShell>\n  );\n};\n\nexport const ClearableTransfer = ({\n  clearable = true,\n  ...props\n}: ClearableTransferProps) => {\n  return <Transfer {...props} clearable={clearable} />;\n};\n"],"mappings":"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"}

package/dist-lib/forms/DatePicker.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../DatePicker-DTVtamsX.cjs`);exports.DS_DATE_FORMAT=e.t,exports.DatePicker=e.n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../DatePicker-CQgt-WoB.cjs`);exports.DS_DATE_FORMAT=e.t,exports.DatePicker=e.n;

package/dist-lib/forms/DatePicker.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../DatePicker-BpjYibJF.js";
+import { n as e, t } from "../DatePicker-LXjOxVN5.js";
 export { t as DS_DATE_FORMAT, e as DatePicker };

package/dist-lib/forms/Select.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../theme.cjs`),t=require(`../useCustomIcon-DbSB56Pd.cjs`),n=require(`./FieldShell.cjs`),r=require(`../fieldProps-CuWfEbFx.cjs`),i=require(`../selectStyles-BFeXUMpO.cjs`);let a=require(`antd`),o=require(`react`),s=require(`react/jsx-runtime`);var c=({className:c,popupClassName:l,classNames:u,suffixIcon:d,readOnly:f=!1,interactionState:p=`rest`,open:m,onOpenChange:h,onDropdownVisibleChange:g,fieldLabel:_,fieldRequired:v,fieldDescription:y,fieldError:b,fieldActions:x,containerStyle:S,clear:C,clearable:w=!1,clearLabel:T,clearVisibility:E=`always`,onClear:D,onValueChange:O,clearToValue:k,...A})=>{let j=(0,o.useId)(),[M,N]=(0,o.useState)(!!m);(0,o.useEffect)(()=>{i.s()},[]),(0,o.useEffect)(()=>{typeof m==`boolean`&&N(m)},[m]);let P=A.mode===`multiple`||A.mode===`tags`,F=i.c(i.t,p===`hover`?i.a:void 0,p===`focus`?i.i:void 0,f?i.o:void 0,c),I=i.c(i.n,P?i.r:void 0,u?.popup?.root,l),L=f?!1:m,R=!!(_||v||y||b||x||w||C||D),z=A.id??(R?j:void 0),B=z?`${z}-description`:void 0,V=z?`${z}-error`:void 0,H=k===void 0?void 0:k,U=C?.onClear??D,W={...u??{},popup:{...u?.popup??{},root:I}},G=d??(0,s.jsx)(t.t,{name:M?`arrowButtonUp`:`arrowButtonDown`,size:10,style:{color:e.dsSemanticTokens.input.text.focus}}),K=(e,t)=>{A.onChange?.(e,t),O?.(e)},q=()=>{U?.(),O?.(H),A.onChange?.(H,void 0)},J=r.t(y?B:void 0,b?V:void 0),Y=(0,s.jsx)(a.Select,{...A,id:z,open:L,suffixIcon:G,className:F,classNames:W,"aria-describedby":J,"aria-invalid":b?!0:void 0,onOpenChange:e=>{if(f&&e){N(!1);return}N(e),h?.(e),g?.(e)},onChange:K});return R?(0,s.jsx)(n.FieldShell,{label:_,required:v,htmlFor:z,description:y,descriptionId:B,error:b,errorId:V,clear:C,clearable:w,clearLabel:T,clearVisibility:E,clearValue:A.value,onClear:q,extraActions:x,style:S,children:Y}):Y};c.displayName=`Select`,exports.Select=c;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../theme.cjs`),t=require(`../useCustomIcon-DbSB56Pd.cjs`),n=require(`./FieldShell.cjs`),r=require(`../fieldProps-CuWfEbFx.cjs`),i=require(`../selectStyles-KK5-1q0t.cjs`);let a=require(`antd`),o=require(`react`),s=require(`react/jsx-runtime`);var c=({className:c,popupClassName:l,classNames:u,suffixIcon:d,readOnly:f=!1,interactionState:p=`rest`,dsSelectionDisplay:m=`pills`,open:h,onOpenChange:ee,onDropdownVisibleChange:g,maxTagCount:_,maxTagPlaceholder:v,fieldLabel:y,fieldRequired:b,fieldDescription:x,fieldError:S,fieldActions:C,containerStyle:w,clear:T,clearable:E=!1,clearLabel:D,clearVisibility:O=`always`,onClear:k,onValueChange:A,clearToValue:j,...M})=>{let N=(0,o.useId)(),[P,F]=(0,o.useState)(!!h);(0,o.useEffect)(()=>{i.c()},[]),(0,o.useEffect)(()=>{typeof h==`boolean`&&F(h)},[h]);let I=M.mode===`multiple`||M.mode===`tags`,L=i.l(i.t,I&&m===`count`?i.n:void 0,p===`hover`?i.o:void 0,p===`focus`?i.a:void 0,f?i.s:void 0,c),R=i.l(i.r,I?i.i:void 0,u?.popup?.root,l),z=f?!1:h,B=!!(y||b||x||S||C||E||T||k),V=M.id??(B?N:void 0),H=V?`${V}-description`:void 0,U=V?`${V}-error`:void 0,W=j===void 0?void 0:j,G=T?.onClear??k,K={...u??{},popup:{...u?.popup??{},root:R}},q=d??(0,s.jsx)(t.t,{name:P?`arrowButtonUp`:`arrowButtonDown`,size:10,style:{color:e.dsSemanticTokens.input.text.focus}}),J=(e,t)=>{M.onChange?.(e,t),A?.(e)},Y=()=>{G?.(),A?.(W),M.onChange?.(W,void 0)},X=r.t(x?H:void 0,S?U:void 0),Z=I&&m===`count`?0:_,Q=I&&m===`count`?e=>`${e.length} selected`:v,$=(0,s.jsx)(a.Select,{...M,id:V,open:z,suffixIcon:q,className:L,classNames:K,maxTagCount:Z,maxTagPlaceholder:Q,"aria-describedby":X,"aria-invalid":S?!0:void 0,onOpenChange:e=>{if(f&&e){F(!1);return}F(e),ee?.(e),g?.(e)},onChange:J});return B?(0,s.jsx)(n.FieldShell,{label:y,required:b,htmlFor:V,description:x,descriptionId:H,error:S,errorId:U,clear:T,clearable:E,clearLabel:D,clearVisibility:O,clearValue:M.value,onClear:Y,extraActions:C,style:w,children:$}):$};c.displayName=`Select`,exports.Select=c;
 //# sourceMappingURL=Select.cjs.map

package/dist-lib/forms/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","names":[],"sources":["../../src/ds/forms/Select.tsx"],"sourcesContent":["import { Select as AntSelect } from 'antd';\nimport type { SelectProps } from 'antd';\nimport { useEffect, useId, useState } from 'react';\nimport { Icon } from '../../utils/icons';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\nimport { FieldShell } from './FieldShell';\nimport type { DSFieldShellProps } from './fieldProps';\nimport { joinDescribedByIds } from './fieldProps';\nimport {\n  DS_SELECT_CLASS,\n  DS_SELECT_FORCE_FOCUS_CLASS,\n  DS_SELECT_FORCE_HOVER_CLASS,\n  DS_SELECT_READONLY_CLASS,\n  DS_SELECT_DROPDOWN_CLASS,\n  DS_SELECT_DROPDOWN_MULTI_CLASS,\n  ensureSelectStyles,\n  mergeClassNames,\n} from './selectStyles';\n\nexport type DSSelectInteractionState = 'rest' | 'hover' | 'focus';\n\nexport type DSSelectProps = SelectProps & {\n  readOnly?: boolean;\n  interactionState?: DSSelectInteractionState;\n};\n\nexport type SelectFieldProps = DSFieldShellProps & {\n  onValueChange?: (nextValue: SelectProps['value']) => void;\n  clearToValue?: SelectProps['value'];\n};\n\nexport const Select = ({\n  className: providedClassName,\n  popupClassName: providedPopupClassName,\n  classNames: providedClassNames,\n  suffixIcon,\n  readOnly = false,\n  interactionState = 'rest',\n  open,\n  onOpenChange,\n  onDropdownVisibleChange,\n  fieldLabel,\n  fieldRequired,\n  fieldDescription,\n  fieldError,\n  fieldActions,\n  containerStyle,\n  clear,\n  clearable = false,\n  clearLabel,\n  clearVisibility = 'always',\n  onClear,\n  onValueChange,\n  clearToValue,\n  ...props\n}: DSSelectProps & SelectFieldProps) => {\n  const generatedId = useId();\n  const [isOpen, setIsOpen] = useState<boolean>(Boolean(open));\n\n  useEffect(() => {\n    ensureSelectStyles();\n  }, []);\n\n  useEffect(() => {\n    if (typeof open === 'boolean') {\n      setIsOpen(open);\n    }\n  }, [open]);\n\n  const isMultiMode = props.mode === 'multiple' || props.mode === 'tags';\n  const mergedSelectClassName = mergeClassNames(\n    DS_SELECT_CLASS,\n    interactionState === 'hover' ? DS_SELECT_FORCE_HOVER_CLASS : undefined,\n    interactionState === 'focus' ? DS_SELECT_FORCE_FOCUS_CLASS : undefined,\n    readOnly ? DS_SELECT_READONLY_CLASS : undefined,\n    providedClassName,\n  );\n  const mergedPopupRootClass = mergeClassNames(\n    DS_SELECT_DROPDOWN_CLASS,\n    isMultiMode ? DS_SELECT_DROPDOWN_MULTI_CLASS : undefined,\n    (providedClassNames as any)?.popup?.root,\n    providedPopupClassName,\n  );\n  const resolvedOpen = readOnly ? false : open;\n  const shouldWrapInFieldShell = Boolean(\n    fieldLabel ||\n      fieldRequired ||\n      fieldDescription ||\n      fieldError ||\n      fieldActions ||\n      clearable ||\n      clear ||\n      onClear,\n  );\n  const controlId = props.id ?? (shouldWrapInFieldShell ? generatedId : undefined);\n  const descriptionId = controlId ? `${controlId}-description` : undefined;\n  const errorId = controlId ? `${controlId}-error` : undefined;\n  const clearValue = clearToValue === undefined ? undefined : clearToValue;\n  const clearAction = clear?.onClear ?? onClear;\n\n  const mergedClassNames = {\n    ...(providedClassNames ?? {}),\n    popup: {\n      ...((providedClassNames as any)?.popup ?? {}),\n      root: mergedPopupRootClass,\n    },\n  } as SelectProps['classNames'];\n\n  const resolvedSuffixIcon = suffixIcon ?? (\n    <Icon\n      name={isOpen ? 'arrowButtonUp' : 'arrowButtonDown'}\n      size={10}\n      style={{ color: dsSemanticTokens.input.text.focus }}\n    />\n  );\n\n  const handleChange = (nextValue: SelectProps['value'], option: Parameters<NonNullable<SelectProps['onChange']>>[1]) => {\n    props.onChange?.(nextValue, option);\n    onValueChange?.(nextValue);\n  };\n\n  const handleClear = () => {\n    clearAction?.();\n    onValueChange?.(clearValue);\n    props.onChange?.(clearValue, undefined as never);\n  };\n\n  const describedBy = joinDescribedByIds(\n    fieldDescription ? descriptionId : undefined,\n    fieldError ? errorId : undefined,\n  );\n\n  const control = (\n    <AntSelect\n      {...props}\n      id={controlId}\n      open={resolvedOpen}\n      suffixIcon={resolvedSuffixIcon}\n      className={mergedSelectClassName}\n      classNames={mergedClassNames}\n      aria-describedby={describedBy}\n      aria-invalid={fieldError ? true : undefined}\n      onOpenChange={(nextOpen) => {\n        if (readOnly && nextOpen) {\n          setIsOpen(false);\n          return;\n        }\n        setIsOpen(nextOpen);\n        onOpenChange?.(nextOpen);\n        onDropdownVisibleChange?.(nextOpen);\n      }}\n      onChange={handleChange}\n    />\n  );\n\n  if (!shouldWrapInFieldShell) {\n    return control;\n  }\n\n  return (\n    <FieldShell\n      label={fieldLabel}\n      required={fieldRequired}\n      htmlFor={controlId}\n      description={fieldDescription}\n      descriptionId={descriptionId}\n      error={fieldError}\n      errorId={errorId}\n      clear={clear}\n      clearable={clearable}\n      clearLabel={clearLabel}\n      clearVisibility={clearVisibility}\n      clearValue={props.value}\n      onClear={handleClear}\n      extraActions={fieldActions}\n      style={containerStyle}\n    >\n      {control}\n    </FieldShell>\n  );\n};\n\nSelect.displayName = 'Select';\n"],"mappings":"uWA+BA,IAAa,GAAU,CACrB,UAAW,EACX,eAAgB,EAChB,WAAY,EACZ,aACA,WAAW,GACX,mBAAmB,OACnB,OACA,eACA,0BACA,aACA,gBACA,mBACA,aACA,eACA,iBACA,QACA,YAAY,GACZ,aACA,kBAAkB,SAClB,UACA,gBACA,eACA,GAAG,KACmC,CACtC,IAAM,GAAA,EAAA,EAAA,QAAqB,CACrB,CAAC,EAAQ,IAAA,EAAA,EAAA,UAA+B,EAAQ,EAAM,EAE5D,EAAA,EAAA,eAAgB,CACd,EAAA,GAAoB,EACnB,EAAE,CAAC,EAEN,EAAA,EAAA,eAAgB,CACV,OAAO,GAAS,WAClB,EAAU,EAAK,EAEhB,CAAC,EAAK,CAAC,CAEV,IAAM,EAAc,EAAM,OAAS,YAAc,EAAM,OAAS,OAC1D,EAAwB,EAAA,EAC5B,EAAA,EACA,IAAqB,QAAU,EAAA,EAA8B,IAAA,GAC7D,IAAqB,QAAU,EAAA,EAA8B,IAAA,GAC7D,EAAW,EAAA,EAA2B,IAAA,GACtC,EACD,CACK,EAAuB,EAAA,EAC3B,EAAA,EACA,EAAc,EAAA,EAAiC,IAAA,GAC9C,GAA4B,OAAO,KACpC,EACD,CACK,EAAe,EAAW,GAAQ,EAClC,EAAyB,GAC7B,GACE,GACA,GACA,GACA,GACA,GACA,GACA,GAEE,EAAY,EAAM,KAAO,EAAyB,EAAc,IAAA,IAChE,EAAgB,EAAY,GAAG,EAAU,cAAgB,IAAA,GACzD,EAAU,EAAY,GAAG,EAAU,QAAU,IAAA,GAC7C,EAAa,IAAiB,IAAA,GAAY,IAAA,GAAY,EACtD,EAAc,GAAO,SAAW,EAEhC,EAAmB,CACvB,GAAI,GAAsB,EAAE,CAC5B,MAAO,CACL,GAAK,GAA4B,OAAS,EAAE,CAC5C,KAAM,EACP,CACF,CAEK,EAAqB,IACzB,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,KAAM,EAAS,gBAAkB,kBACjC,KAAM,GACN,MAAO,CAAE,MAAO,EAAA,iBAAiB,MAAM,KAAK,MAAO,CACnD,CAAA,CAGE,GAAgB,EAAiC,IAAgE,CACrH,EAAM,WAAW,EAAW,EAAO,CACnC,IAAgB,EAAU,EAGtB,MAAoB,CACxB,KAAe,CACf,IAAgB,EAAW,CAC3B,EAAM,WAAW,EAAY,IAAA,GAAmB,EAG5C,EAAc,EAAA,EAClB,EAAmB,EAAgB,IAAA,GACnC,EAAa,EAAU,IAAA,GACxB,CAEK,GACJ,EAAA,EAAA,KAAC,EAAA,OAAD,CACE,GAAI,EACJ,GAAI,EACJ,KAAM,EACN,WAAY,EACZ,UAAW,EACX,WAAY,EACZ,mBAAkB,EAClB,eAAc,EAAa,GAAO,IAAA,GAClC,aAAe,GAAa,CAC1B,GAAI,GAAY,EAAU,CACxB,EAAU,GAAM,CAChB,OAEF,EAAU,EAAS,CACnB,IAAe,EAAS,CACxB,IAA0B,EAAS,EAErC,SAAU,EACV,CAAA,CAOJ,OAJK,GAKH,EAAA,EAAA,KAAC,EAAA,WAAD,CACE,MAAO,EACP,SAAU,EACV,QAAS,EACT,YAAa,EACE,gBACf,MAAO,EACE,UACF,QACI,YACC,aACK,kBACjB,WAAY,EAAM,MAClB,QAAS,EACT,aAAc,EACd,MAAO,WAEN,EACU,CAAA,CAtBN,GA0BX,EAAO,YAAc"}
+{"version":3,"file":"Select.cjs","names":[],"sources":["../../src/ds/forms/Select.tsx"],"sourcesContent":["import { Select as AntSelect } from 'antd';\nimport type { SelectProps } from 'antd';\nimport { useEffect, useId, useState } from 'react';\nimport { Icon } from '../../utils/icons';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\nimport { FieldShell } from './FieldShell';\nimport type { DSFieldShellProps } from './fieldProps';\nimport { joinDescribedByIds } from './fieldProps';\nimport {\n  DS_SELECT_CLASS,\n  DS_SELECT_COUNT_DISPLAY_CLASS,\n  DS_SELECT_FORCE_FOCUS_CLASS,\n  DS_SELECT_FORCE_HOVER_CLASS,\n  DS_SELECT_READONLY_CLASS,\n  DS_SELECT_DROPDOWN_CLASS,\n  DS_SELECT_DROPDOWN_MULTI_CLASS,\n  ensureSelectStyles,\n  mergeClassNames,\n} from './selectStyles';\n\nexport type DSSelectInteractionState = 'rest' | 'hover' | 'focus';\nexport type DSSelectSelectionDisplay = 'pills' | 'count';\n\nexport type DSSelectProps = SelectProps & {\n  readOnly?: boolean;\n  interactionState?: DSSelectInteractionState;\n  /** Controls how selected values render in multiple/tags mode. */\n  dsSelectionDisplay?: DSSelectSelectionDisplay;\n};\n\nexport type SelectFieldProps = DSFieldShellProps & {\n  onValueChange?: (nextValue: SelectProps['value']) => void;\n  clearToValue?: SelectProps['value'];\n};\n\nexport const Select = ({\n  className: providedClassName,\n  popupClassName: providedPopupClassName,\n  classNames: providedClassNames,\n  suffixIcon,\n  readOnly = false,\n  interactionState = 'rest',\n  dsSelectionDisplay = 'pills',\n  open,\n  onOpenChange,\n  onDropdownVisibleChange,\n  maxTagCount: providedMaxTagCount,\n  maxTagPlaceholder: providedMaxTagPlaceholder,\n  fieldLabel,\n  fieldRequired,\n  fieldDescription,\n  fieldError,\n  fieldActions,\n  containerStyle,\n  clear,\n  clearable = false,\n  clearLabel,\n  clearVisibility = 'always',\n  onClear,\n  onValueChange,\n  clearToValue,\n  ...props\n}: DSSelectProps & SelectFieldProps) => {\n  const generatedId = useId();\n  const [isOpen, setIsOpen] = useState<boolean>(Boolean(open));\n\n  useEffect(() => {\n    ensureSelectStyles();\n  }, []);\n\n  useEffect(() => {\n    if (typeof open === 'boolean') {\n      setIsOpen(open);\n    }\n  }, [open]);\n\n  const isMultiMode = props.mode === 'multiple' || props.mode === 'tags';\n  const mergedSelectClassName = mergeClassNames(\n    DS_SELECT_CLASS,\n    isMultiMode && dsSelectionDisplay === 'count' ? DS_SELECT_COUNT_DISPLAY_CLASS : undefined,\n    interactionState === 'hover' ? DS_SELECT_FORCE_HOVER_CLASS : undefined,\n    interactionState === 'focus' ? DS_SELECT_FORCE_FOCUS_CLASS : undefined,\n    readOnly ? DS_SELECT_READONLY_CLASS : undefined,\n    providedClassName,\n  );\n  const mergedPopupRootClass = mergeClassNames(\n    DS_SELECT_DROPDOWN_CLASS,\n    isMultiMode ? DS_SELECT_DROPDOWN_MULTI_CLASS : undefined,\n    (providedClassNames as any)?.popup?.root,\n    providedPopupClassName,\n  );\n  const resolvedOpen = readOnly ? false : open;\n  const shouldWrapInFieldShell = Boolean(\n    fieldLabel ||\n      fieldRequired ||\n      fieldDescription ||\n      fieldError ||\n      fieldActions ||\n      clearable ||\n      clear ||\n      onClear,\n  );\n  const controlId = props.id ?? (shouldWrapInFieldShell ? generatedId : undefined);\n  const descriptionId = controlId ? `${controlId}-description` : undefined;\n  const errorId = controlId ? `${controlId}-error` : undefined;\n  const clearValue = clearToValue === undefined ? undefined : clearToValue;\n  const clearAction = clear?.onClear ?? onClear;\n\n  const mergedClassNames = {\n    ...(providedClassNames ?? {}),\n    popup: {\n      ...((providedClassNames as any)?.popup ?? {}),\n      root: mergedPopupRootClass,\n    },\n  } as SelectProps['classNames'];\n\n  const resolvedSuffixIcon = suffixIcon ?? (\n    <Icon\n      name={isOpen ? 'arrowButtonUp' : 'arrowButtonDown'}\n      size={10}\n      style={{ color: dsSemanticTokens.input.text.focus }}\n    />\n  );\n\n  const handleChange = (nextValue: SelectProps['value'], option: Parameters<NonNullable<SelectProps['onChange']>>[1]) => {\n    props.onChange?.(nextValue, option);\n    onValueChange?.(nextValue);\n  };\n\n  const handleClear = () => {\n    clearAction?.();\n    onValueChange?.(clearValue);\n    props.onChange?.(clearValue, undefined as never);\n  };\n\n  const describedBy = joinDescribedByIds(\n    fieldDescription ? descriptionId : undefined,\n    fieldError ? errorId : undefined,\n  );\n\n  const resolvedMaxTagCount =\n    isMultiMode && dsSelectionDisplay === 'count' ? 0 : providedMaxTagCount;\n  const resolvedMaxTagPlaceholder: SelectProps['maxTagPlaceholder'] =\n    isMultiMode && dsSelectionDisplay === 'count'\n      ? (omittedValues) => `${omittedValues.length} selected`\n      : providedMaxTagPlaceholder;\n\n  const control = (\n    <AntSelect\n      {...props}\n      id={controlId}\n      open={resolvedOpen}\n      suffixIcon={resolvedSuffixIcon}\n      className={mergedSelectClassName}\n      classNames={mergedClassNames}\n      maxTagCount={resolvedMaxTagCount}\n      maxTagPlaceholder={resolvedMaxTagPlaceholder}\n      aria-describedby={describedBy}\n      aria-invalid={fieldError ? true : undefined}\n      onOpenChange={(nextOpen) => {\n        if (readOnly && nextOpen) {\n          setIsOpen(false);\n          return;\n        }\n        setIsOpen(nextOpen);\n        onOpenChange?.(nextOpen);\n        onDropdownVisibleChange?.(nextOpen);\n      }}\n      onChange={handleChange}\n    />\n  );\n\n  if (!shouldWrapInFieldShell) {\n    return control;\n  }\n\n  return (\n    <FieldShell\n      label={fieldLabel}\n      required={fieldRequired}\n      htmlFor={controlId}\n      description={fieldDescription}\n      descriptionId={descriptionId}\n      error={fieldError}\n      errorId={errorId}\n      clear={clear}\n      clearable={clearable}\n      clearLabel={clearLabel}\n      clearVisibility={clearVisibility}\n      clearValue={props.value}\n      onClear={handleClear}\n      extraActions={fieldActions}\n      style={containerStyle}\n    >\n      {control}\n    </FieldShell>\n  );\n};\n\nSelect.displayName = 'Select';\n"],"mappings":"uWAmCA,IAAa,GAAU,CACrB,UAAW,EACX,eAAgB,EAChB,WAAY,EACZ,aACA,WAAW,GACX,mBAAmB,OACnB,qBAAqB,QACrB,OACA,gBACA,0BACA,YAAa,EACb,kBAAmB,EACnB,aACA,gBACA,mBACA,aACA,eACA,iBACA,QACA,YAAY,GACZ,aACA,kBAAkB,SAClB,UACA,gBACA,eACA,GAAG,KACmC,CACtC,IAAM,GAAA,EAAA,EAAA,QAAqB,CACrB,CAAC,EAAQ,IAAA,EAAA,EAAA,UAA+B,EAAQ,EAAM,EAE5D,EAAA,EAAA,eAAgB,CACd,EAAA,GAAoB,EACnB,EAAE,CAAC,EAEN,EAAA,EAAA,eAAgB,CACV,OAAO,GAAS,WAClB,EAAU,EAAK,EAEhB,CAAC,EAAK,CAAC,CAEV,IAAM,EAAc,EAAM,OAAS,YAAc,EAAM,OAAS,OAC1D,EAAwB,EAAA,EAC5B,EAAA,EACA,GAAe,IAAuB,QAAU,EAAA,EAAgC,IAAA,GAChF,IAAqB,QAAU,EAAA,EAA8B,IAAA,GAC7D,IAAqB,QAAU,EAAA,EAA8B,IAAA,GAC7D,EAAW,EAAA,EAA2B,IAAA,GACtC,EACD,CACK,EAAuB,EAAA,EAC3B,EAAA,EACA,EAAc,EAAA,EAAiC,IAAA,GAC9C,GAA4B,OAAO,KACpC,EACD,CACK,EAAe,EAAW,GAAQ,EAClC,EAAyB,GAC7B,GACE,GACA,GACA,GACA,GACA,GACA,GACA,GAEE,EAAY,EAAM,KAAO,EAAyB,EAAc,IAAA,IAChE,EAAgB,EAAY,GAAG,EAAU,cAAgB,IAAA,GACzD,EAAU,EAAY,GAAG,EAAU,QAAU,IAAA,GAC7C,EAAa,IAAiB,IAAA,GAAY,IAAA,GAAY,EACtD,EAAc,GAAO,SAAW,EAEhC,EAAmB,CACvB,GAAI,GAAsB,EAAE,CAC5B,MAAO,CACL,GAAK,GAA4B,OAAS,EAAE,CAC5C,KAAM,EACP,CACF,CAEK,EAAqB,IACzB,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,KAAM,EAAS,gBAAkB,kBACjC,KAAM,GACN,MAAO,CAAE,MAAO,EAAA,iBAAiB,MAAM,KAAK,MAAO,CACnD,CAAA,CAGE,GAAgB,EAAiC,IAAgE,CACrH,EAAM,WAAW,EAAW,EAAO,CACnC,IAAgB,EAAU,EAGtB,MAAoB,CACxB,KAAe,CACf,IAAgB,EAAW,CAC3B,EAAM,WAAW,EAAY,IAAA,GAAmB,EAG5C,EAAc,EAAA,EAClB,EAAmB,EAAgB,IAAA,GACnC,EAAa,EAAU,IAAA,GACxB,CAEK,EACJ,GAAe,IAAuB,QAAU,EAAI,EAChD,EACJ,GAAe,IAAuB,QACjC,GAAkB,GAAG,EAAc,OAAO,WAC3C,EAEA,GACJ,EAAA,EAAA,KAAC,EAAA,OAAD,CACE,GAAI,EACJ,GAAI,EACJ,KAAM,EACN,WAAY,EACZ,UAAW,EACX,WAAY,EACZ,YAAa,EACb,kBAAmB,EACnB,mBAAkB,EAClB,eAAc,EAAa,GAAO,IAAA,GAClC,aAAe,GAAa,CAC1B,GAAI,GAAY,EAAU,CACxB,EAAU,GAAM,CAChB,OAEF,EAAU,EAAS,CACnB,KAAe,EAAS,CACxB,IAA0B,EAAS,EAErC,SAAU,EACV,CAAA,CAOJ,OAJK,GAKH,EAAA,EAAA,KAAC,EAAA,WAAD,CACE,MAAO,EACP,SAAU,EACV,QAAS,EACT,YAAa,EACE,gBACf,MAAO,EACE,UACF,QACI,YACC,aACK,kBACjB,WAAY,EAAM,MAClB,QAAS,EACT,aAAc,EACd,MAAO,WAEN,EACU,CAAA,CAtBN,GA0BX,EAAO,YAAc"}

package/dist-lib/forms/Select.js

@@ -2,66 +2,68 @@ import { dsSemanticTokens as e } from "../theme.js";
 import { t } from "../useCustomIcon-B-VUK-84.js";
 import { FieldShell as n } from "./FieldShell.js";
 import { t as r } from "../fieldProps-EeYy2kXb.js";
-import { a as ee, c as i, i as a, n as o, o as s, r as c, s as l, t as u } from "../selectStyles-C8j5Vvgp.js";
+import { a as ee, c as i, i as a, l as o, n as te, o as s, r as c, s as l, t as u } from "../selectStyles-7f37TvzD.js";
 import { Select as d } from "antd";
 import { useEffect as f, useId as p, useState as m } from "react";
 import { jsx as h } from "react/jsx-runtime";
 //#region src/ds/forms/Select.tsx
-var g = ({ className: g, popupClassName: _, classNames: v, suffixIcon: y, readOnly: b = !1, interactionState: x = "rest", open: S, onOpenChange: C, onDropdownVisibleChange: w, fieldLabel: T, fieldRequired: E, fieldDescription: D, fieldError: O, fieldActions: k, containerStyle: A, clear: j, clearable: M = !1, clearLabel: N, clearVisibility: P = "always", onClear: F, onValueChange: I, clearToValue: L, ...R }) => {
-	let z = p(), [B, V] = m(!!S);
+var g = ({ className: g, popupClassName: ne, classNames: _, suffixIcon: v, readOnly: y = !1, interactionState: b = "rest", dsSelectionDisplay: x = "pills", open: S, onOpenChange: C, onDropdownVisibleChange: w, maxTagCount: T, maxTagPlaceholder: re, fieldLabel: E, fieldRequired: D, fieldDescription: O, fieldError: k, fieldActions: A, containerStyle: j, clear: M, clearable: N = !1, clearLabel: P, clearVisibility: F = "always", onClear: I, onValueChange: L, clearToValue: R, ...z }) => {
+	let B = p(), [V, H] = m(!!S);
 	f(() => {
-		l();
+		i();
 	}, []), f(() => {
-		typeof S == "boolean" && V(S);
+		typeof S == "boolean" && H(S);
 	}, [S]);
-	let H = R.mode === "multiple" || R.mode === "tags", U = i(u, x === "hover" ? ee : void 0, x === "focus" ? a : void 0, b ? s : void 0, g), W = i(o, H ? c : void 0, v?.popup?.root, _), G = b ? !1 : S, K = !!(T || E || D || O || k || M || j || F), q = R.id ?? (K ? z : void 0), J = q ? `${q}-description` : void 0, Y = q ? `${q}-error` : void 0, X = L === void 0 ? void 0 : L, Z = j?.onClear ?? F, Q = {
-		...v ?? {},
+	let U = z.mode === "multiple" || z.mode === "tags", W = o(u, U && x === "count" ? te : void 0, b === "hover" ? s : void 0, b === "focus" ? ee : void 0, y ? l : void 0, g), G = o(c, U ? a : void 0, _?.popup?.root, ne), K = y ? !1 : S, q = !!(E || D || O || k || A || N || M || I), J = z.id ?? (q ? B : void 0), Y = J ? `${J}-description` : void 0, X = J ? `${J}-error` : void 0, Z = R === void 0 ? void 0 : R, ie = M?.onClear ?? I, Q = {
+		..._ ?? {},
 		popup: {
-			...v?.popup ?? {},
-			root: W
+			..._?.popup ?? {},
+			root: G
 		}
-	}, te = y ?? /* @__PURE__ */ h(t, {
-		name: B ? "arrowButtonUp" : "arrowButtonDown",
+	}, ae = v ?? /* @__PURE__ */ h(t, {
+		name: V ? "arrowButtonUp" : "arrowButtonDown",
 		size: 10,
 		style: { color: e.input.text.focus }
-	}), ne = (e, t) => {
-		R.onChange?.(e, t), I?.(e);
-	}, re = () => {
-		Z?.(), I?.(X), R.onChange?.(X, void 0);
-	}, ie = r(D ? J : void 0, O ? Y : void 0), $ = /* @__PURE__ */ h(d, {
-		...R,
-		id: q,
-		open: G,
-		suffixIcon: te,
-		className: U,
+	}), oe = (e, t) => {
+		z.onChange?.(e, t), L?.(e);
+	}, se = () => {
+		ie?.(), L?.(Z), z.onChange?.(Z, void 0);
+	}, ce = r(O ? Y : void 0, k ? X : void 0), le = U && x === "count" ? 0 : T, ue = U && x === "count" ? (e) => `${e.length} selected` : re, $ = /* @__PURE__ */ h(d, {
+		...z,
+		id: J,
+		open: K,
+		suffixIcon: ae,
+		className: W,
 		classNames: Q,
-		"aria-describedby": ie,
-		"aria-invalid": O ? !0 : void 0,
+		maxTagCount: le,
+		maxTagPlaceholder: ue,
+		"aria-describedby": ce,
+		"aria-invalid": k ? !0 : void 0,
 		onOpenChange: (e) => {
-			if (b && e) {
-				V(!1);
+			if (y && e) {
+				H(!1);
 				return;
 			}
-			V(e), C?.(e), w?.(e);
+			H(e), C?.(e), w?.(e);
 		},
-		onChange: ne
+		onChange: oe
 	});
-	return K ? /* @__PURE__ */ h(n, {
-		label: T,
-		required: E,
-		htmlFor: q,
-		description: D,
-		descriptionId: J,
-		error: O,
-		errorId: Y,
-		clear: j,
-		clearable: M,
-		clearLabel: N,
-		clearVisibility: P,
-		clearValue: R.value,
-		onClear: re,
-		extraActions: k,
-		style: A,
+	return q ? /* @__PURE__ */ h(n, {
+		label: E,
+		required: D,
+		htmlFor: J,
+		description: O,
+		descriptionId: Y,
+		error: k,
+		errorId: X,
+		clear: M,
+		clearable: N,
+		clearLabel: P,
+		clearVisibility: F,
+		clearValue: z.value,
+		onClear: se,
+		extraActions: A,
+		style: j,
 		children: $
 	}) : $;
 };