acinguiux-ds-react-framework 0.1.16 → 0.1.19

package/build/cjs/components/Popconfirm/components/PopconfirmActions/PopconfirmActions.js

@@ -1,2 +1,2 @@
-"use strict";const l=require("react/jsx-runtime"),S=require("../../../../react-base/src/components/Popconfirm/Popconfirm.utils.js"),i=require("../../../../react-base/src/utils/sizesUtils.js"),q=require("../../Popconfirm.styles.js"),f=require("../../../Button/Button.js"),x=require("../../../Button/SentimentButton.js"),j=({actions:r,size:s,sentiment:b})=>l.jsx(q.PopconfirmActions,{$size:s,children:r==null?void 0:r.map(e=>{var p;const m=S.getButtonSentiment(b,(p=e.props)==null?void 0:p.variant);return m?l.jsx(x,{sentiment:m,size:i.getSmallerSize(s),onClick:e==null?void 0:e.action,label:e.label,...e.props},e.label):l.jsx(f,{size:i.getSmallerSize(s),onClick:e==null?void 0:e.action,label:e.label,...e.props},e.label)})});module.exports=j;
+"use strict";const s=require("react/jsx-runtime"),o=require("../../../../react-base/src/components/Popconfirm/Popconfirm.utils.js"),l=require("../../../../react-base/src/utils/sizesUtils.js"),c=require("../../Popconfirm.styles.js"),m=require("../../../Button/Button.js"),p=require("../../../Button/SentimentButton.js"),b=({actions:n,size:r,sentiment:t})=>s.jsx(c.PopconfirmActions,{$size:r,children:n?.map(e=>{const i=o.getButtonSentiment(t,e.props?.variant);return i?s.jsx(p,{sentiment:i,size:l.getSmallerSize(r),onClick:e?.action,label:e.label,...e.props},e.label):s.jsx(m,{size:l.getSmallerSize(r),onClick:e?.action,label:e.label,...e.props},e.label)})});module.exports=b;
 //# sourceMappingURL=PopconfirmActions.js.map

package/build/cjs/components/Popconfirm/components/PopconfirmActions/PopconfirmActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopconfirmActions.js","sources":["../../../../../../src/components/Popconfirm/components/PopconfirmActions/PopconfirmActions.tsx"],"sourcesContent":["import { PopconfirmUtils } from 'acinguiux-ds-react-base/components/Popconfirm';\nimport { getSmallerSize } from 'acinguiux-ds-react-base/utils/sizesUtils';\nimport { ButtonTypes } from 'acinguiux-ds-react-base/components/Button';\n\nimport * as Styled from '../../Popconfirm.styles';\nimport type { IPopconfirmActionsProps } from './PopconfirmActions.types';\nimport Button from '../../../Button/Button';\nimport SentimentButton from '../../../Button/SentimentButton';\n\nconst PopconfirmActions = ({ actions, size, sentiment }: IPopconfirmActionsProps) => (\n  <Styled.PopconfirmActions $size={size}>\n    {actions?.map((actionButton) => {\n      const buttonSentiment = PopconfirmUtils.getButtonSentiment(sentiment, actionButton.props?.variant);\n\n      if (!buttonSentiment) {\n        return (\n          <Button\n            key={actionButton.label}\n            size={getSmallerSize(size) as ButtonTypes.Size}\n            onClick={actionButton?.action}\n            label={actionButton.label}\n            {...actionButton.props}\n          />\n        );\n      }\n\n      return (\n        <SentimentButton\n          key={actionButton.label}\n          sentiment={buttonSentiment}\n          size={getSmallerSize(size) as ButtonTypes.Size}\n          onClick={actionButton?.action}\n          label={actionButton.label}\n          {...actionButton.props}\n        />\n      );\n    })}\n  </Styled.PopconfirmActions>\n);\n\nexport default PopconfirmActions;\n"],"names":["PopconfirmActions","actions","size","sentiment","jsx","Styled.PopconfirmActions","actionButton","buttonSentiment","PopconfirmUtils.getButtonSentiment","_a","SentimentButton","getSmallerSize","Button"],"mappings":"+TASMA,EAAoB,CAAC,CAAE,QAAAC,EAAS,KAAAC,EAAM,UAAAC,KAC1CC,EAAAA,IAACC,EAAAA,kBAAA,CAAyB,MAAOH,EAC9B,SAAAD,GAAA,YAAAA,EAAS,IAAKK,GAAiB,OAC9B,MAAMC,EAAkBC,EAAAA,mBAAmCL,GAAWM,EAAAH,EAAa,QAAb,YAAAG,EAAoB,OAAO,EAEjG,OAAKF,EAaHH,EAAAA,IAACM,EAAA,CAEC,UAAWH,EACX,KAAMI,EAAAA,eAAeT,CAAI,EACzB,QAASI,GAAA,YAAAA,EAAc,OACvB,MAAOA,EAAa,MACnB,GAAGA,EAAa,KAAA,EALZA,EAAa,KAAA,EAZlBF,EAAAA,IAACQ,EAAA,CAEC,KAAMD,EAAAA,eAAeT,CAAI,EACzB,QAASI,GAAA,YAAAA,EAAc,OACvB,MAAOA,EAAa,MACnB,GAAGA,EAAa,KAAA,EAJZA,EAAa,KAAA,CAmB1B,EAAC,CACH"}
+{"version":3,"file":"PopconfirmActions.js","sources":["../../../../../../src/components/Popconfirm/components/PopconfirmActions/PopconfirmActions.tsx"],"sourcesContent":["import { PopconfirmUtils } from 'acinguiux-ds-react-base/components/Popconfirm';\nimport { getSmallerSize } from 'acinguiux-ds-react-base/utils/sizesUtils';\nimport { ButtonTypes } from 'acinguiux-ds-react-base/components/Button';\n\nimport * as Styled from '../../Popconfirm.styles';\nimport type { IPopconfirmActionsProps } from './PopconfirmActions.types';\nimport Button from '../../../Button/Button';\nimport SentimentButton from '../../../Button/SentimentButton';\n\nconst PopconfirmActions = ({ actions, size, sentiment }: IPopconfirmActionsProps) => (\n  <Styled.PopconfirmActions $size={size}>\n    {actions?.map((actionButton) => {\n      const buttonSentiment = PopconfirmUtils.getButtonSentiment(sentiment, actionButton.props?.variant);\n\n      if (!buttonSentiment) {\n        return (\n          <Button\n            key={actionButton.label}\n            size={getSmallerSize(size) as ButtonTypes.Size}\n            onClick={actionButton?.action}\n            label={actionButton.label}\n            {...actionButton.props}\n          />\n        );\n      }\n\n      return (\n        <SentimentButton\n          key={actionButton.label}\n          sentiment={buttonSentiment}\n          size={getSmallerSize(size) as ButtonTypes.Size}\n          onClick={actionButton?.action}\n          label={actionButton.label}\n          {...actionButton.props}\n        />\n      );\n    })}\n  </Styled.PopconfirmActions>\n);\n\nexport default PopconfirmActions;\n"],"names":["PopconfirmActions","actions","size","sentiment","jsx","Styled.PopconfirmActions","actionButton","buttonSentiment","PopconfirmUtils.getButtonSentiment","SentimentButton","getSmallerSize","Button"],"mappings":"+TASMA,EAAoB,CAAC,CAAE,QAAAC,EAAS,KAAAC,EAAM,UAAAC,KAC1CC,EAAAA,IAACC,EAAAA,kBAAA,CAAyB,MAAOH,EAC9B,SAAAD,GAAS,IAAKK,GAAiB,CAC9B,MAAMC,EAAkBC,EAAAA,mBAAmCL,EAAWG,EAAa,OAAO,OAAO,EAEjG,OAAKC,EAaHH,EAAAA,IAACK,EAAA,CAEC,UAAWF,EACX,KAAMG,EAAAA,eAAeR,CAAI,EACzB,QAASI,GAAc,OACvB,MAAOA,EAAa,MACnB,GAAGA,EAAa,KAAA,EALZA,EAAa,KAAA,EAZlBF,EAAAA,IAACO,EAAA,CAEC,KAAMD,EAAAA,eAAeR,CAAI,EACzB,QAASI,GAAc,OACvB,MAAOA,EAAa,MACnB,GAAGA,EAAa,KAAA,EAJZA,EAAa,KAAA,CAmB1B,CAAC,CAAA,CACH"}

package/build/cjs/components/RadioButton/RadioButton.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),$=require("react"),q=require("classnames"),n=require("../../react-base/src/consts/index.js"),s=require("./RadioButton.styles.js"),B=require("../../react-base/src/consts/classes.js"),f=$.forwardRef(({className:d="",label:i,size:t=`${n.Sizes.Medium}`,wrapperProps:u,checked:a,disabled:r=!1,invalid:o=!1,multiline:c=!1,onChange:l=n.NOOP,...R},x)=>e.jsxs(s.RadioButtonWrapper,{$size:t,className:q(B.RADIO_BUTTON_CLASS,d),$disabled:r,$checked:a,$multiline:c,$invalid:o,...u,children:[e.jsx(s.RadioButton,{type:"radio",onChange:l,disabled:r,checked:a,tabIndex:0,"aria-invalid":o,ref:x,...R}),e.jsx(s.FakeRadio,{"aria-hidden":!0}),!!i&&e.jsx(s.RadioButtonLabel,{$size:t,children:i})]}));module.exports=f;
+"use strict";const e=require("react/jsx-runtime"),d=require("react"),q=require("classnames"),c=require("../../react-base/src/consts/index.js"),s=require("./RadioButton.styles.js"),f=require("../../react-base/src/consts/classes.js"),j=d.forwardRef(({id:t,className:l="",label:i,size:r=`${c.Sizes.Medium}`,wrapperProps:R,checked:o,disabled:a=!1,invalid:n=!1,multiline:x=!1,onChange:B=c.NOOP,...$},m)=>{const u=d.useId();return e.jsxs(s.RadioButtonWrapper,{$size:r,className:q(f.RADIO_BUTTON_CLASS,l),$disabled:a,$checked:o,$multiline:x,$invalid:n,...R,children:[e.jsx(s.RadioButton,{id:t??u,type:"radio",onChange:B,disabled:a,checked:o,tabIndex:0,"aria-invalid":n,ref:m,...$}),e.jsx(s.RadioButtonIcon,{"aria-hidden":!0}),!!i&&e.jsx(s.RadioButtonLabel,{htmlFor:t??u,$size:r,children:i})]})});module.exports=j;
 //# sourceMappingURL=RadioButton.js.map

package/build/cjs/components/RadioButton/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport classNames from 'classnames';\nimport { Sizes, NOOP, RADIO_BUTTON_CLASS } from 'acinguiux-ds-react-base/consts';\n\nimport * as Styled from './RadioButton.styles';\nimport type { IRadioButtonProps } from './RadioButton.types';\n\nconst RadioButton = forwardRef<HTMLInputElement, IRadioButtonProps>(\n  (\n    {\n      className = '',\n      label,\n      size = `${Sizes.Medium}`,\n      wrapperProps,\n      checked,\n      disabled = false,\n      invalid = false,\n      multiline = false,\n      onChange = NOOP,\n      ...rest\n    }: IRadioButtonProps,\n    ref,\n  ) => (\n    <Styled.RadioButtonWrapper\n      $size={size}\n      className={classNames(RADIO_BUTTON_CLASS, className)}\n      $disabled={disabled}\n      $checked={checked}\n      $multiline={multiline}\n      $invalid={invalid}\n      {...wrapperProps}\n    >\n      <Styled.RadioButton\n        type=\"radio\"\n        onChange={onChange}\n        disabled={disabled}\n        checked={checked}\n        tabIndex={0}\n        aria-invalid={invalid}\n        ref={ref}\n        {...rest}\n      />\n      <Styled.FakeRadio aria-hidden={true} />\n      {!!label && <Styled.RadioButtonLabel $size={size}>{label}</Styled.RadioButtonLabel>}\n    </Styled.RadioButtonWrapper>\n  ),\n);\n\nexport default RadioButton;\n"],"names":["RadioButton","forwardRef","className","label","size","Sizes","wrapperProps","checked","disabled","invalid","multiline","onChange","NOOP","rest","ref","jsxs","Styled.RadioButtonWrapper","classNames","RADIO_BUTTON_CLASS","jsx","Styled.RadioButton","Styled.FakeRadio","Styled.RadioButtonLabel"],"mappings":"wOAQMA,EAAcC,EAAAA,WAClB,CACE,CACE,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EAAO,GAAGC,QAAM,MAAM,GACtB,aAAAC,EACA,QAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EAAU,GACV,UAAAC,EAAY,GACZ,SAAAC,EAAWC,EAAAA,KACX,GAAGC,CAAA,EAELC,IAEAC,EAAAA,KAACC,EAAAA,mBAAA,CACC,MAAOZ,EACP,UAAWa,EAAWC,EAAAA,mBAAoBhB,CAAS,EACnD,UAAWM,EACX,SAAUD,EACV,WAAYG,EACZ,SAAUD,EACT,GAAGH,EAEJ,SAAA,CAAAa,EAAAA,IAACC,EAAAA,YAAA,CACC,KAAK,QACL,SAAAT,EACA,SAAAH,EACA,QAAAD,EACA,SAAU,EACV,eAAcE,EACd,IAAAK,EACC,GAAGD,CAAA,CAAA,EAENM,EAAAA,IAACE,EAAAA,UAAA,CAAiB,cAAa,EAAA,CAAM,EACpC,CAAC,CAAClB,GAASgB,EAAAA,IAACG,EAAAA,iBAAA,CAAwB,MAAOlB,EAAO,SAAAD,CAAA,CAAM,CAAA,CAAA,CAAA,CAG/D"}
+{"version":3,"file":"RadioButton.js","sources":["../../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import { forwardRef, useId } from 'react';\n\nimport classNames from 'classnames';\nimport { Sizes, NOOP, RADIO_BUTTON_CLASS } from 'acinguiux-ds-react-base/consts';\n\nimport * as Styled from './RadioButton.styles';\nimport type { IRadioButtonProps } from './RadioButton.types';\n\nconst RadioButton = forwardRef<HTMLInputElement, IRadioButtonProps>(\n  (\n    {\n      id,\n      className = '',\n      label,\n      size = `${Sizes.Medium}`,\n      wrapperProps,\n      checked,\n      disabled = false,\n      invalid = false,\n      multiline = false,\n      onChange = NOOP,\n      ...rest\n    }: IRadioButtonProps,\n    ref,\n  ) => {\n    const uid = useId();\n\n    return (\n      <Styled.RadioButtonWrapper\n        $size={size}\n        className={classNames(RADIO_BUTTON_CLASS, className)}\n        $disabled={disabled}\n        $checked={checked}\n        $multiline={multiline}\n        $invalid={invalid}\n        {...wrapperProps}\n      >\n        <Styled.RadioButton\n          id={id ?? uid}\n          type=\"radio\"\n          onChange={onChange}\n          disabled={disabled}\n          checked={checked}\n          tabIndex={0}\n          aria-invalid={invalid}\n          ref={ref}\n          {...rest}\n        />\n        <Styled.RadioButtonIcon aria-hidden={true} />\n        {!!label && (\n          <Styled.RadioButtonLabel htmlFor={id ?? uid} $size={size}>\n            {label}\n          </Styled.RadioButtonLabel>\n        )}\n      </Styled.RadioButtonWrapper>\n    );\n  },\n);\n\nexport default RadioButton;\n"],"names":["RadioButton","forwardRef","id","className","label","size","Sizes","wrapperProps","checked","disabled","invalid","multiline","onChange","NOOP","rest","ref","uid","useId","jsxs","Styled.RadioButtonWrapper","classNames","RADIO_BUTTON_CLASS","jsx","Styled.RadioButton","Styled.RadioButtonIcon","Styled.RadioButtonLabel"],"mappings":"wOAQMA,EAAcC,EAAAA,WAClB,CACE,CACE,GAAAC,EACA,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EAAO,GAAGC,QAAM,MAAM,GACtB,aAAAC,EACA,QAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EAAU,GACV,UAAAC,EAAY,GACZ,SAAAC,EAAWC,EAAAA,KACX,GAAGC,CAAA,EAELC,IACG,CACH,MAAMC,EAAMC,EAAAA,MAAA,EAEZ,OACEC,EAAAA,KAACC,EAAAA,mBAAA,CACC,MAAOd,EACP,UAAWe,EAAWC,EAAAA,mBAAoBlB,CAAS,EACnD,UAAWM,EACX,SAAUD,EACV,WAAYG,EACZ,SAAUD,EACT,GAAGH,EAEJ,SAAA,CAAAe,EAAAA,IAACC,EAAAA,YAAA,CACC,GAAIrB,GAAMc,EACV,KAAK,QACL,SAAAJ,EACA,SAAAH,EACA,QAAAD,EACA,SAAU,EACV,eAAcE,EACd,IAAAK,EACC,GAAGD,CAAA,CAAA,EAENQ,EAAAA,IAACE,EAAAA,gBAAA,CAAuB,cAAa,EAAA,CAAM,EAC1C,CAAC,CAACpB,GACDkB,MAACG,EAAAA,iBAAA,CAAwB,QAASvB,GAAMc,EAAK,MAAOX,EACjD,SAAAD,CAAA,CACH,CAAA,CAAA,CAAA,CAIR,CACF"}

package/build/cjs/components/RadioButton/RadioButton.styles.js

@@ -1,36 +1,33 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("styled-components"),p=require("../../react-base/src/utils/stylesUtils.js"),h=require("../../react-base/src/components/RadioButton/RadioButton.consts.js"),g=require("../../react-base/src/components/RadioButton/RadioButton.styles.js"),x=require("../../react-base/src/components/RadioButton/RadioButton.utils.js"),b=require("../../react-base/src/components/Input/Input.utils.js"),s=require("acinguiux-ds-fabrics"),F=require("../../react-base/src/utils/sizesUtils.js"),$=require("../../react-base/src/consts/index.js"),{consts:o}=h,a=r.styled.div`
-  ${g.FakeRadioButtonStyles};
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("styled-components"),p=require("../../react-base/src/utils/stylesUtils.js"),f=require("../../react-base/src/components/RadioButton/RadioButton.consts.js"),h=require("../../react-base/src/components/RadioButton/RadioButton.utils.js"),b=require("../../react-base/src/components/Input/Input.utils.js"),o=require("acinguiux-ds-fabrics"),v=require("../../react-base/src/utils/sizesUtils.js"),g=require("../../react-base/src/consts/index.js"),{consts:s}=f,i=r.styled.div`
+  position: relative;
+  border-radius: 100%;
+  pointer-events: none;
 `,n=r.styled.input`
-  ${g.RadioButtonStyles};
-`,S=r.styled.span`
-  ${({$size:e,theme:i})=>r.css`
-    ${i.typography("label",F.getLabelTypographySize(e))};
+  position: absolute;
+  opacity: 0;
+`,$=r.styled.label`
+  ${({$size:e,theme:a})=>r.css`
+    ${a.typography("label",v.getLabelTypographySize(e))};
   `};
-`,R=(e=!1,i=!1)=>e?"invalid":i?"none":"normal",k=r.styled.label`
-  ${({$size:e,$checked:i,$disabled:l,$invalid:d,$multiline:c,theme:u})=>{const t=(y=s.FabricsVariables.States.Resting,f=!1)=>x.getStyles(u,y,l,d,i||f);return r.css`
+`,x=(e=!1,a=!1)=>e?"invalid":a?"none":"normal",F=r.styled.div`
+  ${({$size:e,$checked:a,$disabled:c,$invalid:d,$multiline:l,theme:u})=>{const t=(y=o.FabricsVariables.States.Resting,S=!1)=>h.getStyles(u,y,c,d,a||S);return r.css`
+      position: relative;
       width: fit-content;
       display: flex;
       flex-direction: row;
-      align-items: ${c?"flex-start":"center"};
-      gap: ${o[e].labelSpacing}px;
-      cursor: ${l?"default":"pointer"};
+      align-items: ${l?"flex-start":"center"};
+      gap: ${s[e].labelSpacing}px;
 
-      ${!c&&r.css`
-        max-width: 100%;
+      ${!l&&r.css`
         min-width: 0;
       `};
 
-      ${n} {
-        height: ${o[e].size}px;
-        width: ${o[e].size}px;
-      }
-
-      ${S} {
-        ${p.getLabelFontStyles(u,l)};
-        ${c?r.css`
+      ${$} {
+        ${p.getLabelFontStyles(u,c)};
+        ${l?r.css`
               white-space: pre-line;
 
-              ${[`${$.Sizes.Large}`,`${$.Sizes.Medium}`].includes(e)&&r.css`
+              ${[`${g.Sizes.Large}`,`${g.Sizes.Medium}`].includes(e)&&r.css`
                 padding-top: 2px;
               `};
             `:r.css`
@@ -40,82 +37,95 @@
             `};
       }
 
-      ${a} {
-        height: ${o[e].size}px;
-        width: ${o[e].size}px;
-        pointer-events: ${l?"none":""};
-        ${b.getInputBorderStyles(e,R(d,i),!0)};
+      ${n} {
+        height: ${s[e].size}px;
+        width: ${s[e].size}px;
+      }
+
+      ${i} {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: ${s[e].size}px;
+        width: ${s[e].size}px;
+        ${b.getInputBorderStyles(e,x(d,a),!0)};
+        transition:
+          background-color 200ms,
+          border 200ms,
+          color 200ms;
+
         ${t()};
 
         &::after {
-          width: ${o[e].innerCircleSize}px;
-          height: ${o[e].innerCircleSize}px;
+          width: ${s[e].innerCircleSize}px;
+          height: ${s[e].innerCircleSize}px;
           content: '';
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
           border-radius: 100%;
           background-color: ${t().color};
+          opacity: 1;
+          transition:
+            opacity 200ms,
+            transform 200ms;
 
-          ${!i&&r.css`
-            display: none;
+          ${!a&&r.css`
+            opacity: 0;
           `}
         }
       }
 
-      ${!l&&r.css`
+      ${!c&&r.css`
         &:hover {
-          ${a} {
-            ${t(s.FabricsVariables.States.Hover)};
+          ${i} {
+            ${t(o.FabricsVariables.States.Hover)};
             &::after {
-              display: block;
-              background-color: ${t(s.FabricsVariables.States.Hover).color};
+              opacity: 1;
+              background-color: ${t(o.FabricsVariables.States.Hover).color};
             }
           }
         }
 
         &:active {
-          ${a} {
-            ${t(s.FabricsVariables.States.Press)};
+          ${i} {
+            ${t(o.FabricsVariables.States.Press)};
             &::after {
-              display: block;
-              background-color: ${t(s.FabricsVariables.States.Press).color};
-              width: ${o[e].innerCircleSize-2}px;
-              height: ${o[e].innerCircleSize-2}px;
+              opacity: 1;
+              transform: scale(0.95);
+              background-color: ${t(o.FabricsVariables.States.Press).color};
+              width: ${s[e].innerCircleSize-2}px;
+              height: ${s[e].innerCircleSize-2}px;
             }
           }
         }
 
-        ${n}:checked ~ ${a} {
+        ${n}:checked ~ ${i} {
           ${b.getInputBorderStyles(e,"none",!0)};
-          ${t(s.FabricsVariables.States.Resting,!0)};
+          ${t(o.FabricsVariables.States.Resting,!0)};
           &::after {
-            display: block;
-            background-color: ${t(s.FabricsVariables.States.Resting,!0).color};
+            opacity: 1;
+            background-color: ${t(o.FabricsVariables.States.Resting,!0).color};
           }
         }
 
-        ${n}:checked:hover ~ ${a} {
-          ${t(s.FabricsVariables.States.Hover,!0)};
+        ${n}:checked:hover ~ ${i} {
+          ${t(o.FabricsVariables.States.Hover,!0)};
           &::after {
-            display: block;
-            background-color: ${t(s.FabricsVariables.States.Hover,!0).color};
+            opacity: 1;
+            background-color: ${t(o.FabricsVariables.States.Hover,!0).color};
           }
         }
 
-        ${n}:checked:active ~ ${a} {
-          ${t(s.FabricsVariables.States.Press,!0)};
+        ${n}:checked:active ~ ${i} {
+          ${t(o.FabricsVariables.States.Press,!0)};
           &::after {
-            display: block;
-            background-color: ${t(s.FabricsVariables.States.Press,!0).color};
+            opacity: 1;
+            background-color: ${t(o.FabricsVariables.States.Press,!0).color};
           }
         }
       `}
 
-      ${n}:focus-visible ~ ${a} {
+      ${n}:focus-visible ~ ${i} {
         ${p.getFocusStyles(u)};
       }
     `}}
-`;exports.FakeRadio=a;exports.RadioButton=n;exports.RadioButtonLabel=S;exports.RadioButtonWrapper=k;
+`;exports.RadioButton=n;exports.RadioButtonIcon=i;exports.RadioButtonLabel=$;exports.RadioButtonWrapper=F;
 //# sourceMappingURL=RadioButton.styles.js.map

package/build/cjs/components/RadioButton/RadioButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.styles.js","sources":["../../../../src/components/RadioButton/RadioButton.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { getLabelFontStyles, getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\nimport {\n  RadioButtonUtils,\n  RadioButtonStyles,\n  RadioButtonConsts,\n} from 'acinguiux-ds-react-base/components/RadioButton';\nimport { InputUtils } from 'acinguiux-ds-react-base/components/Input';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { getLabelTypographySize } from 'acinguiux-ds-react-base/utils/sizesUtils';\nimport { Sizes } from 'acinguiux-ds-react-base/consts';\n\nimport type { IRadioButtonProps } from './RadioButton.types';\n\ntype RadioButtonWrapperPropKeys = 'checked' | 'disabled' | 'invalid' | 'multiline';\ntype WrapperProps = Required<PickTransient<IRadioButtonProps, 'size'>> &\n  PickTransient<IRadioButtonProps, RadioButtonWrapperPropKeys>;\n\nconst { consts } = RadioButtonConsts;\n\nconst FakeRadio = styled.div`\n  ${RadioButtonStyles.FakeRadioButtonStyles};\n`;\n\nconst RadioButton = styled.input`\n  ${RadioButtonStyles.RadioButtonStyles};\n`;\n\nconst RadioButtonLabel = styled.span<PickTransient<IRadioButtonProps, 'size'>>`\n  ${({ $size, theme }) => css`\n    ${theme.typography('label', getLabelTypographySize($size))};\n  `};\n`;\n\nconst getBorderKind = (invalid = false, checked = false) => {\n  if (invalid) {\n    return 'invalid';\n  }\n\n  if (checked) {\n    return 'none';\n  }\n\n  return 'normal';\n};\n\nconst RadioButtonWrapper = styled.label<WrapperProps>`\n  ${({ $size, $checked, $disabled, $invalid, $multiline, theme }) => {\n    const getStyles = (state: FabricsVariables.StateType = FabricsVariables.States.Resting, checked = false) =>\n      RadioButtonUtils.getStyles(theme, state, $disabled, $invalid, $checked || checked);\n\n    return css`\n      width: fit-content;\n      display: flex;\n      flex-direction: row;\n      align-items: ${$multiline ? 'flex-start' : 'center'};\n      gap: ${consts[$size].labelSpacing}px;\n      cursor: ${$disabled ? 'default' : 'pointer'};\n\n      ${!$multiline &&\n      css`\n        max-width: 100%;\n        min-width: 0;\n      `};\n\n      ${RadioButton} {\n        height: ${consts[$size].size}px;\n        width: ${consts[$size].size}px;\n      }\n\n      ${RadioButtonLabel} {\n        ${getLabelFontStyles(theme, $disabled)};\n        ${!$multiline\n          ? css`\n              white-space: nowrap;\n              text-overflow: ellipsis;\n              overflow: hidden;\n            `\n          : css`\n              white-space: pre-line;\n\n              ${[`${Sizes.Large}`, `${Sizes.Medium}`].includes($size) &&\n              css`\n                padding-top: 2px;\n              `};\n            `};\n      }\n\n      ${FakeRadio} {\n        height: ${consts[$size].size}px;\n        width: ${consts[$size].size}px;\n        pointer-events: ${$disabled ? 'none' : ''};\n        ${InputUtils.getInputBorderStyles($size, getBorderKind($invalid, $checked), true)};\n        ${getStyles()};\n\n        &::after {\n          width: ${consts[$size].innerCircleSize}px;\n          height: ${consts[$size].innerCircleSize}px;\n          content: '';\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n          border-radius: 100%;\n          background-color: ${getStyles().color};\n\n          ${!$checked &&\n          css`\n            display: none;\n          `}\n        }\n      }\n\n      ${!$disabled &&\n      css`\n        &:hover {\n          ${FakeRadio} {\n            ${getStyles(FabricsVariables.States.Hover)};\n            &::after {\n              display: block;\n              background-color: ${getStyles(FabricsVariables.States.Hover).color};\n            }\n          }\n        }\n\n        &:active {\n          ${FakeRadio} {\n            ${getStyles(FabricsVariables.States.Press)};\n            &::after {\n              display: block;\n              background-color: ${getStyles(FabricsVariables.States.Press).color};\n              width: ${consts[$size].innerCircleSize - 2}px;\n              height: ${consts[$size].innerCircleSize - 2}px;\n            }\n          }\n        }\n\n        ${RadioButton}:checked ~ ${FakeRadio} {\n          ${InputUtils.getInputBorderStyles($size, 'none', true)};\n          ${getStyles(FabricsVariables.States.Resting, true)};\n          &::after {\n            display: block;\n            background-color: ${getStyles(FabricsVariables.States.Resting, true).color};\n          }\n        }\n\n        ${RadioButton}:checked:hover ~ ${FakeRadio} {\n          ${getStyles(FabricsVariables.States.Hover, true)};\n          &::after {\n            display: block;\n            background-color: ${getStyles(FabricsVariables.States.Hover, true).color};\n          }\n        }\n\n        ${RadioButton}:checked:active ~ ${FakeRadio} {\n          ${getStyles(FabricsVariables.States.Press, true)};\n          &::after {\n            display: block;\n            background-color: ${getStyles(FabricsVariables.States.Press, true).color};\n          }\n        }\n      `}\n\n      ${RadioButton}:focus-visible ~ ${FakeRadio} {\n        ${getFocusStyles(theme)};\n      }\n    `;\n  }}\n`;\n\nexport { RadioButton, FakeRadio, RadioButtonWrapper, RadioButtonLabel };\n"],"names":["consts","RadioButtonConsts","FakeRadio","styled","RadioButtonStyles.FakeRadioButtonStyles","RadioButton","RadioButtonStyles.RadioButtonStyles","RadioButtonLabel","$size","theme","css","getLabelTypographySize","getBorderKind","invalid","checked","RadioButtonWrapper","$checked","$disabled","$invalid","$multiline","getStyles","state","FabricsVariables","RadioButtonUtils.getStyles","getLabelFontStyles","Sizes","InputUtils.getInputBorderStyles","getFocusStyles"],"mappings":"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"}
+{"version":3,"file":"RadioButton.styles.js","sources":["../../../../src/components/RadioButton/RadioButton.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { getLabelFontStyles, getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\nimport { RadioButtonUtils, RadioButtonConsts } from 'acinguiux-ds-react-base/components/RadioButton';\nimport { InputUtils } from 'acinguiux-ds-react-base/components/Input';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { getLabelTypographySize } from 'acinguiux-ds-react-base/utils/sizesUtils';\nimport { Sizes } from 'acinguiux-ds-react-base/consts';\n\nimport type { IRadioButtonProps } from './RadioButton.types';\n\ntype RadioButtonWrapperPropKeys = 'checked' | 'disabled' | 'invalid' | 'multiline';\ntype WrapperProps = Required<PickTransient<IRadioButtonProps, 'size'>> &\n  PickTransient<IRadioButtonProps, RadioButtonWrapperPropKeys>;\n\nconst { consts } = RadioButtonConsts;\n\nconst RadioButtonIcon = styled.div`\n  position: relative;\n  border-radius: 100%;\n  pointer-events: none;\n`;\n\nconst RadioButton = styled.input`\n  position: absolute;\n  opacity: 0;\n`;\n\nconst RadioButtonLabel = styled.label<PickTransient<IRadioButtonProps, 'size'>>`\n  ${({ $size, theme }) => css`\n    ${theme.typography('label', getLabelTypographySize($size))};\n  `};\n`;\n\nconst getBorderKind = (invalid = false, checked = false) => {\n  if (invalid) {\n    return 'invalid';\n  }\n\n  if (checked) {\n    return 'none';\n  }\n\n  return 'normal';\n};\n\nconst RadioButtonWrapper = styled.div<WrapperProps>`\n  ${({ $size, $checked, $disabled, $invalid, $multiline, theme }) => {\n    const getStyles = (state: FabricsVariables.StateType = FabricsVariables.States.Resting, checked = false) =>\n      RadioButtonUtils.getStyles(theme, state, $disabled, $invalid, $checked || checked);\n\n    return css`\n      position: relative;\n      width: fit-content;\n      display: flex;\n      flex-direction: row;\n      align-items: ${$multiline ? 'flex-start' : 'center'};\n      gap: ${consts[$size].labelSpacing}px;\n\n      ${!$multiline &&\n      css`\n        min-width: 0;\n      `};\n\n      ${RadioButtonLabel} {\n        ${getLabelFontStyles(theme, $disabled)};\n        ${!$multiline\n          ? css`\n              white-space: nowrap;\n              text-overflow: ellipsis;\n              overflow: hidden;\n            `\n          : css`\n              white-space: pre-line;\n\n              ${[`${Sizes.Large}`, `${Sizes.Medium}`].includes($size) &&\n              css`\n                padding-top: 2px;\n              `};\n            `};\n      }\n\n      ${RadioButton} {\n        height: ${consts[$size].size}px;\n        width: ${consts[$size].size}px;\n      }\n\n      ${RadioButtonIcon} {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: ${consts[$size].size}px;\n        width: ${consts[$size].size}px;\n        ${InputUtils.getInputBorderStyles($size, getBorderKind($invalid, $checked), true)};\n        transition:\n          background-color 200ms,\n          border 200ms,\n          color 200ms;\n\n        ${getStyles()};\n\n        &::after {\n          width: ${consts[$size].innerCircleSize}px;\n          height: ${consts[$size].innerCircleSize}px;\n          content: '';\n          border-radius: 100%;\n          background-color: ${getStyles().color};\n          opacity: 1;\n          transition:\n            opacity 200ms,\n            transform 200ms;\n\n          ${!$checked &&\n          css`\n            opacity: 0;\n          `}\n        }\n      }\n\n      ${!$disabled &&\n      css`\n        &:hover {\n          ${RadioButtonIcon} {\n            ${getStyles(FabricsVariables.States.Hover)};\n            &::after {\n              opacity: 1;\n              background-color: ${getStyles(FabricsVariables.States.Hover).color};\n            }\n          }\n        }\n\n        &:active {\n          ${RadioButtonIcon} {\n            ${getStyles(FabricsVariables.States.Press)};\n            &::after {\n              opacity: 1;\n              transform: scale(0.95);\n              background-color: ${getStyles(FabricsVariables.States.Press).color};\n              width: ${consts[$size].innerCircleSize - 2}px;\n              height: ${consts[$size].innerCircleSize - 2}px;\n            }\n          }\n        }\n\n        ${RadioButton}:checked ~ ${RadioButtonIcon} {\n          ${InputUtils.getInputBorderStyles($size, 'none', true)};\n          ${getStyles(FabricsVariables.States.Resting, true)};\n          &::after {\n            opacity: 1;\n            background-color: ${getStyles(FabricsVariables.States.Resting, true).color};\n          }\n        }\n\n        ${RadioButton}:checked:hover ~ ${RadioButtonIcon} {\n          ${getStyles(FabricsVariables.States.Hover, true)};\n          &::after {\n            opacity: 1;\n            background-color: ${getStyles(FabricsVariables.States.Hover, true).color};\n          }\n        }\n\n        ${RadioButton}:checked:active ~ ${RadioButtonIcon} {\n          ${getStyles(FabricsVariables.States.Press, true)};\n          &::after {\n            opacity: 1;\n            background-color: ${getStyles(FabricsVariables.States.Press, true).color};\n          }\n        }\n      `}\n\n      ${RadioButton}:focus-visible ~ ${RadioButtonIcon} {\n        ${getFocusStyles(theme)};\n      }\n    `;\n  }}\n`;\n\nexport { RadioButton, RadioButtonIcon, RadioButtonWrapper, RadioButtonLabel };\n"],"names":["consts","RadioButtonConsts","RadioButtonIcon","styled","RadioButton","RadioButtonLabel","$size","theme","css","getLabelTypographySize","getBorderKind","invalid","checked","RadioButtonWrapper","$checked","$disabled","$invalid","$multiline","getStyles","state","FabricsVariables","RadioButtonUtils.getStyles","getLabelFontStyles","Sizes","InputUtils.getInputBorderStyles","getFocusStyles"],"mappings":"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"}

package/build/cjs/components/Select/Select.js

@@ -1,2 +1,2 @@
-"use strict";const i=require("react/jsx-runtime"),s=require("react"),p=require("../../react-base/src/consts/index.js"),Oe=require("classnames"),Z=require("../../react-base/src/components/Select/Select.utils.js"),K=require("../Popover/Popover.js"),ee=require("../Icon/components/ChevronDown.js"),qe=require("../../hooks/useFocusRingOnKeyboard.js"),D=require("./Select.styles.js"),B=require("../ListItem/SelectListItem.js"),Ee=require("./hooks/useOptions.js"),Ie=require("./hooks/useElementRect.js"),je=require("./utils/strUtils.js"),ve=require("./utils/selection.js"),we=require("./utils/props.js"),De=require("../Flexbox/Flexbox.js"),$e=require("./components/SelectLoading.js"),Ge=require("../../react-base/src/consts/classes.js"),Ce=s.forwardRef(({id:te,defaultOpen:le,className:se,size:o=p.Sizes.Medium,mode:d="single",placeholder:re,loading:I=!1,invalid:F=!1,showSearch:$=!0,allowClear:h,placement:Me,disabled:b,options:ne,onFocus:ie,onBlur:ue,onClick:ae,children:ce,optionFilterProp:H="label",optionLabelProp:N="label",onSearch:j,onSelect:G,onDeselect:C,onClear:M,onChange:x,defaultValue:oe,suffix:X,value:de,style:fe,virtual:Re=!1,...pe},me)=>{var Q,Y;const m=s.useRef(null),xe=s.useRef(null),[q,g]=s.useState(le??!1),u=s.useId(),[_,R]=s.useState(!1),U=te??`select-${u}-input`,[a,L]=s.useState(""),[n,ge]=s.useState(()=>we.asArray(oe??de)),v=Ee.useOptions(ce,`select-${u}`,ne),f=s.useMemo(()=>v.flatMap(e=>e.isGroup?[e,...e.options]:[e]),[v]),y=s.useMemo(()=>a&&a.trim().length>0?f.filter(e=>(e==null?void 0:e.isGroup)||je.strIncludes(e==null?void 0:e[H],a)):f,[f,a,H]),r=s.useMemo(()=>y.filter(e=>e&&!e.isGroup&&e.disabled!==!0).map(e=>e.key),[y]),[S,w]=s.useState(null);s.useEffect(()=>{var e;w(((e=f.find(t=>!t.isGroup&&!t.disabled))==null?void 0:e.key)??null)},[f]);const V=s.useCallback(e=>{if(d==="single"){x==null||x(e.length===1?e[0]:null);return}x==null||x(e)},[d,x]),O=s.useCallback(e=>{const{current:t,added:l,removed:c}=ve.updateSelectedValues(n,e,d,h);l.forEach(T=>{const k=f.find(E=>!E.isGroup&&E.value===T);Z.isOption(k)&&G&&G(k.value,k)}),c.forEach(T=>{const k=f.find(E=>!E.isGroup&&E.value===T);Z.isOption(k)&&C&&C(k.value,k)}),ge(t),V(t),L(""),d==="single"&&g(!1)},[n,d,h,V,f,G,C]),z=s.useMemo(()=>n==null?void 0:n.map(e=>{var t;return((t=v.flatMap(l=>l.isGroup?l.options:[l]).find(l=>!l.isGroup&&l.value===e))==null?void 0:t[N])??e}),[v,n,N]);s.useEffect(()=>{var e;S&&((e=document.getElementById(S))==null||e.scrollIntoView({block:"nearest",inline:"nearest"}))},[S]);const P=Ie.useElementRect((Y=(Q=m.current)==null?void 0:Q.parentElement)==null?void 0:Y.parentElement);s.useImperativeHandle(me,()=>m.current);const{focusKind:Se,handleOnClick:ke,handleOnFocus:A,handleOnBlur:W,handleOnMouseDownCapture:he}=qe.useFocusRingOnKeyboard({inputRef:m,onFocus:ie,onBlur:ue,onClick:ae}),be=s.useCallback(e=>{var t,l;_||(!e.relatedTarget||!e.currentTarget.contains(e.relatedTarget)&&e.relatedTarget.id!==`select-${u}-controls`&&((t=e.relatedTarget.parentElement)==null?void 0:t.id)!==`select-${u}-options-container`?(L(""),W(e),g(!1)):(A(e),(l=m.current)==null||l.focus()))},[W,A,u,_]),J=s.useCallback(e=>{var t;if(!q&&["Enter","ArrowUp","ArrowDown"," "].includes(e.key)){e.preventDefault(),e.stopPropagation(),g(!0);return}if(e.key==="Escape"){e.preventDefault(),g(!1);return}if((t=m.current)==null||t.focus(),h&&(e.key==="Backspace"||e.key==="Delete")&&(!a||a.trim().length===0)&&n.length>0&&O(n[n.length-1]),r.length!==0){if(e.key==="Enter"||(!a||a.trim().length===0)&&e.key===" "){e.preventDefault();const l=f.find(c=>!c.isGroup&&c.key===S);O(l&&!(l!=null&&l.isGroup)?l.value??null:null)}e.key==="ArrowDown"&&(e.preventDefault(),w(l=>{const c=l?r.indexOf(l):-1;return c===-1||c===r.length-1?(r==null?void 0:r[0])??null:(r==null?void 0:r[c+1])??null})),e.key==="ArrowUp"&&(e.preventDefault(),w(l=>{const c=l?r.indexOf(l):-1;return c<=0?(r==null?void 0:r[r.length-1])??null:(r==null?void 0:r[c-1])??null}))}},[q,h,r,a,n,O,f,S]),ye=s.useCallback(e=>{const t=e.target.value;L(t),j==null||j(t)},[j]);return i.jsxs(K.Popover,{open:q,onOpenChange:g,children:[i.jsx("label",{htmlFor:U,id:`select-${u}-label`,tabIndex:-1,style:{position:"absolute",width:"1px",height:"1px",padding:"0px",margin:"-1px",overflow:"hidden",clip:"rect(0px, 0px, 0px, 0px)",whiteSpace:"nowrap",borderWidth:"0px"},children:n.join(", ")}),i.jsx(K.PopoverTrigger,{asChild:!0,children:i.jsx(D.SelectInput,{inputRef:m,"data-focused":Se,$mode:d,className:Oe(Ge.SELECT_CLASS,se),style:fe,size:o,allowReadOnlyClear:!0,readOnly:!$,onFocus:A,onBlur:be,wrapperProps:{onMouseDownCapture:e=>{R(!0),he(e)},onClick:e=>{var t;e.isDefaultPrevented()||(t=m.current)==null||t.click(),R(!1),ke(e)}},onClick:e=>{$&&!b&&!e.isDefaultPrevented()&&(g(!0),e.preventDefault()),R(!1),e.stopPropagation()},invalid:F,loading:I,disabled:b,onKeyDown:J,value:a,onChange:ye,name:"select-input",type:"text",customPrefix:d==="multiple"&&n.map((e,t)=>i.jsx(D.SelectTag,{sentiment:"information",$disabled:b,$invalid:F,size:o,closeButton:!b&&h,onCloseClick:()=>{O(e)},children:z[t]},`select-${u}-value-${e}`)),customSuffix:n.length>0&&d==="single"&&(!a||a.trim().length===0)&&i.jsx(D.SelectedSingleOptionLabel,{disabled:b,id:`select-${u}-value`,size:o,children:z[0]}),suffix:{transparent:!0,node:X?i.jsxs(De,{gap:"2px",children:[X,i.jsx(ee,{})]}):i.jsx(ee,{}),onClick:e=>{var l;const t=new Event("click",{bubbles:!0,cancelable:!0});$&&!b&&(g(c=>!c),t.preventDefault(),e.preventDefault()),(l=m.current)==null||l.dispatchEvent(t)}},placeholder:!a&&(n.length===0&&d==="single"||d==="multiple")?re:"",allowClear:h&&(e=>e!==""||n.length>0),onClear:()=>{O(null),M==null||M()},autoComplete:"off",autoCorrect:"off",multiple:d!=="single",spellCheck:"false","aria-autocomplete":"list",role:"combobox","aria-haspopup":"listbox","aria-controls":q?`select-${u}-controls`:void 0,"aria-labelledby":`select-${u}-label`,id:U,"aria-activedescendant":q?S??void 0:void 0,...pe})}),i.jsxs(D.SelectPopoverContent,{role:"listbox",align:"start",side:"bottom",ref:xe,style:{width:(P==null?void 0:P.width)??"auto"},size:o===p.Sizes.XSmall?p.Sizes.Small:o,sideOffset:4,alignOffset:0,tabIndex:-1,onOpenAutoFocus:e=>{e.preventDefault(),e.stopPropagation()},"aria-label":"Suggestions",id:`select-${u}-controls`,padding:!1,children:[i.jsx("div",{id:`select-${u}-options-container`,role:"presentation",tabIndex:-1,children:!I&&y.map(e=>e.isGroup&&y.some(t=>!t.isGroup&&t.key.startsWith(e.key))?i.jsx(B.SelectListItemHeader,{size:o===p.Sizes.XSmall?p.Sizes.Small:o,id:e.key,role:"group",label:e.label},e.key):e.isGroup?null:i.jsx(B.SelectListItem,{id:e.key,size:o===p.Sizes.XSmall?p.Sizes.Small:o,role:"option",tabIndex:-1,onMouseMove:()=>!e.disabled&&w(e.key),onClick:()=>!e.disabled&&O(e.value??null),onKeyDown:t=>J(t),selected:n.includes(e.value??null),"aria-selected":S===e.key,disabled:e.disabled,label:e.label},e.key))}),!I&&(y.length===0||y.every(e=>e.isGroup))&&i.jsx(B.SelectListItemHeader,{style:{textAlign:"center"},size:o===p.Sizes.XSmall?p.Sizes.Small:o,id:`select-${u}-options-not-found`,role:"alert","aria-live":"polite","aria-atomic":!0,"aria-label":"No options found",label:"No options found"}),I&&i.jsx($e.SelectLoading,{id:u,size:o})]})]})});module.exports=Ce;
+"use strict";const n=require("react/jsx-runtime"),t=require("react"),c=require("../../react-base/src/consts/index.js"),Oe=require("classnames"),U=require("../../react-base/src/components/Select/Select.utils.js"),J=require("../Popover/Popover.js"),Q=require("../Icon/components/ChevronDown.js"),qe=require("../../hooks/useFocusRingOnKeyboard.js"),q=require("./Select.styles.js"),je=require("../ListItem/ListItem.js"),Ee=require("./hooks/useOptions.js"),Ie=require("./hooks/useElementRect.js"),$e=require("./utils/strUtils.js"),we=require("./utils/selection.js"),Ge=require("./utils/props.js"),Re=require("../Flexbox/Flexbox.js"),Me=require("./components/SelectLoading.js"),De=require("./utils/keydown.js"),Y=require("../ListItem/ListItemHeader.js"),Te=require("../../react-base/src/consts/classes.js"),Ke=t.forwardRef(({id:Z,defaultOpen:ee,className:te,size:a=c.Sizes.Medium,mode:s="single",placeholder:le,loading:C=!1,invalid:K=!1,showSearch:j=!0,allowClear:g,placement:Pe,disabled:h,options:se,onFocus:ne,onBlur:re,onClick:ae,children:ie,optionFilterProp:P="label",optionLabelProp:L="label",optionSelectionType:oe,optionShowInputControls:ue,optionMutliline:ce=!1,onKeyDown:N,onSearch:A,onSelect:E,onDeselect:I,onClear:de,onChange:$,defaultValue:pe,suffix:B,value:x,style:fe,virtual:Le=!1,...be},ge)=>{const d=t.useRef(null),he=t.useRef(null),[y,m]=t.useState(ee??!1),r=t.useId(),[F,w]=t.useState(!1),H=Z??`select-${r}-input`,[o,G]=t.useState(""),[i,R]=t.useState(()=>Ge.asArray(pe??x)),O=Ee.useOptions(ie,`select-${r}`,se),u=t.useMemo(()=>O.flatMap(e=>e.isGroup?[e,...e.options]:[e]),[O]),S=t.useMemo(()=>o&&o.trim().length>0?u.filter(e=>e?.isGroup||$e.strIncludes(e?.[P],o)):u,[u,o,P]),V=t.useMemo(()=>S.filter(e=>e&&!e.isGroup&&e.disabled!==!0).map(e=>e.key),[S]),[f,M]=t.useState(null);t.useEffect(()=>{M(u.find(e=>!e.isGroup&&!e.disabled)?.key??null)},[u]);const X=t.useCallback(e=>{if(s==="single"){$?.(e.length===1?e[0]:null);return}$?.(e)},[s,$]);t.useEffect(()=>{s==="single"?R(x?[x]:[]):Array.isArray(x)&&R(x)},[x,s]);const v=t.useCallback(e=>{const{current:l,added:p,removed:Ce}=we.updateSelectedValues(i,e,s,g);p.forEach(T=>{const b=u.find(k=>!k.isGroup&&k.value===T);U.isOption(b)&&E&&E(b.value,b)}),Ce.forEach(T=>{const b=u.find(k=>!k.isGroup&&k.value===T);U.isOption(b)&&I&&I(b.value,b)}),R(l),X(l),G(""),s==="single"&&m(!1)},[i,s,g,X,u,E,I]),_=t.useMemo(()=>i?.map(e=>O.flatMap(l=>l.isGroup?l.options:[l]).find(l=>!l.isGroup&&l.value===e)?.[L]??e),[O,i,L]);t.useEffect(()=>{f&&document.getElementById(f)?.scrollIntoView({block:"nearest",inline:"nearest"})},[f]);const xe=Ie.useElementRect(d.current?.parentElement?.parentElement);t.useImperativeHandle(ge,()=>d.current);const{focusKind:me,handleOnClick:Se,handleOnFocus:D,handleOnBlur:W,handleOnMouseDownCapture:ye}=qe.useFocusRingOnKeyboard({inputRef:d,onFocus:ne,onBlur:re,onClick:ae}),ve=t.useCallback(e=>{F||(!e.relatedTarget||!e.currentTarget.contains(e.relatedTarget)&&e.relatedTarget.id!==`select-${r}-controls`&&e.relatedTarget.parentElement?.id!==`select-${r}-options-container`?(G(""),W(e),m(!1)):(D(e),d.current?.focus()))},[W,D,r,F]),z=t.useCallback(e=>{De.onKeyDownHandle(e,{isOpen:y,setIsOpen:m,input:d.current,allowClear:!!g,availableOptionKeys:V,searchValue:o,selectedNodeValues:i,selectNodeValue:v,flatOptions:u,currentNodeKey:f,setCurrentNodeKey:M}),N?.(e)},[N,y,g,V,o,i,v,u,f]),ke=t.useCallback(e=>{const l=e.target.value;G(l),A?.(l)},[A]);return n.jsxs(J.Popover,{open:y,onOpenChange:m,children:[n.jsx("label",{htmlFor:H,id:`select-${r}-label`,tabIndex:-1,style:{position:"absolute",width:"1px",height:"1px",padding:"0px",margin:"-1px",overflow:"hidden",clip:"rect(0px, 0px, 0px, 0px)",whiteSpace:"nowrap",borderWidth:"0px"},children:i.join(", ")}),n.jsx(J.PopoverTrigger,{asChild:!0,children:n.jsx(q.SelectInput,{inputRef:d,"data-focused":me,$mode:s,className:Oe(Te.SELECT_CLASS,te),style:fe,size:a,allowReadOnlyClear:!0,readOnly:!j,onFocus:D,onBlur:ve,wrapperProps:{onMouseDownCapture:e=>{w(!0),ye(e)},onClick:e=>{e.isDefaultPrevented()||d.current?.click(),w(!1),Se(e)}},onClick:e=>{j&&!h&&!e.isDefaultPrevented()&&(m(!0),e.preventDefault()),w(!1),e.stopPropagation()},invalid:K,loading:C,disabled:h,onKeyDown:z,value:o,onChange:ke,name:"select-input",type:"text",customPrefix:s==="multiple"&&i.map((e,l)=>n.jsx(q.SelectTag,{sentiment:"information",$disabled:h,$invalid:K,size:a,closeButton:!h&&g,onCloseClick:()=>{v(e)},children:_[l]},`select-${r}-value-${e}`)),customSuffix:i.length>0&&s==="single"&&(!o||o.trim().length===0)&&n.jsx(q.SelectedSingleOptionLabel,{disabled:h,id:`select-${r}-value`,size:a,children:_[0]}),suffix:{transparent:!0,node:B?n.jsxs(Re,{gap:"2px",children:[B,n.jsx(Q,{})]}):n.jsx(Q,{}),onClick:e=>{const l=new Event("click",{bubbles:!0,cancelable:!0});j&&!h&&(m(p=>!p),l.preventDefault(),e.preventDefault()),d.current?.dispatchEvent(l)}},placeholder:!o&&(i.length===0&&s==="single"||s==="multiple")?le:"",allowClear:g&&(e=>e!==""||i.length>0),onClear:()=>{v(null),de?.()},autoComplete:"off",autoCorrect:"off",multiple:s!=="single",spellCheck:"false","aria-autocomplete":"list",role:"combobox","aria-haspopup":"listbox","aria-controls":y?`select-${r}-controls`:void 0,"aria-labelledby":`select-${r}-label`,id:H,"aria-activedescendant":y?f??void 0:void 0,...be})}),n.jsxs(q.SelectPopoverContent,{role:"listbox",align:"start",side:"bottom",ref:he,style:{width:xe?.width??"auto"},size:a===c.Sizes.XSmall?c.Sizes.Small:a,sideOffset:4,alignOffset:0,tabIndex:-1,onOpenAutoFocus:e=>{e.preventDefault(),e.stopPropagation()},"aria-label":"Suggestions",id:`select-${r}-controls`,padding:!1,children:[n.jsx("div",{id:`select-${r}-options-container`,role:"presentation",tabIndex:-1,children:!C&&S.map((e,l)=>e.isGroup&&S.some(p=>!p.isGroup&&p.key.startsWith(e.key))?n.jsx(Y,{size:a===c.Sizes.XSmall?c.Sizes.Small:a,id:e.key,role:"group",label:e.label,divider:l!==0},e.key):e.isGroup?null:n.jsx(je,{id:e.key,size:a===c.Sizes.XSmall?c.Sizes.Small:a,role:"option",tabIndex:-1,onMouseMove:()=>!e.disabled&&M(e.key),onClick:()=>!e.disabled&&v(e.value??null),onKeyDown:p=>z(p),selected:i.includes(e.value??null),"aria-selected":f===e.key,disabled:e.disabled,multiline:ce,label:e.label,optionItem:!0,selectionType:oe??(!s||s==="single"?"radio":"checkbox"),showInputControls:ue},e.key))}),!C&&(S.length===0||S.every(e=>e.isGroup))&&n.jsx(Y,{style:{textAlign:"center"},size:a===c.Sizes.XSmall?c.Sizes.Small:a,id:`select-${r}-options-not-found`,role:"alert","aria-live":"polite","aria-atomic":!0,"aria-label":"No options found",label:"No options found",divider:!1}),C&&n.jsx(Me.SelectLoading,{id:r,size:a})]})]})});module.exports=Ke;
 //# sourceMappingURL=Select.js.map

package/build/cjs/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import {\n  type ChangeEventHandler,\n  type FocusEvent,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n  type ReactElement,\n} from 'react';\n\nimport { SELECT_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport classNames from 'classnames';\nimport { SelectUtils } from 'acinguiux-ds-react-base/components/Select';\n\nimport type { ISelectProps, ValueType } from './Select.types';\nimport { Popover, PopoverTrigger } from '../Popover/Popover';\nimport { ChevronDown } from '../Icon/components';\nimport { useFocusRingOnKeyboard } from '../../hooks/useFocusRingOnKeyboard';\nimport { SelectInput, SelectPopoverContent, SelectTag, SelectedSingleOptionLabel } from './Select.styles';\nimport { SelectListItem, SelectListItemHeader } from '../ListItem/SelectListItem';\nimport { useOptions } from './hooks/useOptions';\nimport { useElementRect } from './hooks/useElementRect';\nimport { strIncludes } from './utils/strUtils';\nimport { updateSelectedValues } from './utils/selection';\nimport { asArray } from './utils/props';\nimport Flexbox from '../Flexbox/Flexbox';\nimport { SelectLoading } from './components/SelectLoading';\n\nconst Select = forwardRef<HTMLInputElement, ISelectProps>(\n  (\n    {\n      id: idProp,\n      defaultOpen,\n      className,\n      size = Sizes.Medium,\n      mode = 'single',\n      placeholder,\n      loading = false,\n      invalid = false,\n      showSearch = true,\n      allowClear,\n      placement,\n      disabled,\n      options: originalOptions,\n      onFocus,\n      onBlur,\n      onClick,\n      children,\n      optionFilterProp = 'label',\n      optionLabelProp = 'label',\n      onSearch,\n      onSelect,\n      onDeselect,\n      onClear,\n      onChange,\n      defaultValue,\n      suffix,\n      value,\n      style,\n      // This prop is not used in the new Select implementation, but kept for compatibility.\n      // If you need virtualized options, please use the DeprecatedSelect component.\n      virtual: _virtual = false,\n      ...rest\n    }: ISelectProps,\n    ref,\n  ): ReactElement => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const optionsContainerRef = useRef<HTMLDivElement>(null);\n    const [isOpen, setIsOpen] = useState(defaultOpen ?? false);\n    const id = useId();\n    const [handled, setHandled] = useState(false);\n    const inputId = idProp ?? `select-${id}-input`;\n    const [searchValue, setSearchValue] = useState<string>('');\n    const [selectedNodeValues, setSelectedNodeValues] = useState<ValueType[]>(() => asArray(defaultValue ?? value));\n    const options = useOptions(children, `select-${id}`, originalOptions);\n    const flatOptions = useMemo(\n      () => options.flatMap((opt) => (opt.isGroup ? [opt, ...opt.options] : [opt])),\n      [options],\n    );\n    const filteredOptions = useMemo(\n      () =>\n        searchValue && searchValue.trim().length > 0\n          ? flatOptions.filter(\n              (opt) =>\n                opt?.isGroup ||\n                strIncludes(opt?.[optionFilterProp as keyof (typeof options)[number]] as string, searchValue),\n            )\n          : flatOptions,\n      [flatOptions, searchValue, optionFilterProp],\n    );\n    const availableOptionKeys = useMemo(\n      () => filteredOptions.filter((opt) => opt && !opt.isGroup && opt.disabled !== true).map((opt) => opt.key),\n      [filteredOptions],\n    );\n\n    const [currentNodeKey, setCurrentNodeKey] = useState<string | null>(null);\n\n    // Set the initial current node key to the first available option\n    useEffect(() => {\n      setCurrentNodeKey(flatOptions.find((opt) => !opt.isGroup && !opt.disabled)?.key ?? null);\n    }, [flatOptions]);\n\n    const handleOnChange = useCallback(\n      (newNodeValues: ValueType[]) => {\n        if (mode === 'single') {\n          onChange?.(newNodeValues.length === 1 ? newNodeValues[0] : null);\n          return;\n        }\n\n        onChange?.(newNodeValues);\n      },\n      [mode, onChange],\n    );\n\n    const selectNodeValue = useCallback(\n      (nodeValue: ValueType) => {\n        const {\n          current: newSelectedValues,\n          added,\n          removed,\n        } = updateSelectedValues(selectedNodeValues, nodeValue, mode, allowClear);\n\n        added.forEach((addedValue) => {\n          const addedOption = flatOptions.find((opt) => !opt.isGroup && opt.value === addedValue);\n          if (SelectUtils.isOption(addedOption) && onSelect) {\n            onSelect(addedOption.value, addedOption);\n          }\n        });\n        removed.forEach((removedValue) => {\n          const removedOption = flatOptions.find((opt) => !opt.isGroup && opt.value === removedValue);\n          if (SelectUtils.isOption(removedOption) && onDeselect) {\n            onDeselect(removedOption.value, removedOption);\n          }\n        });\n\n        setSelectedNodeValues(newSelectedValues);\n        handleOnChange(newSelectedValues);\n\n        setSearchValue('');\n        if (mode === 'single') {\n          setIsOpen(false);\n        }\n      },\n      [selectedNodeValues, mode, allowClear, handleOnChange, flatOptions, onSelect, onDeselect],\n    );\n\n    // define node values based on selected node keys\n    // This is used for the input label and for the selected tags in multiple mode.\n    const selectedNodeLabels = useMemo(\n      () =>\n        selectedNodeValues?.map(\n          (nodeValue) =>\n            (options\n              .flatMap((opt) => (opt.isGroup ? opt.options : [opt]))\n              .find((opt) => !opt.isGroup && opt.value === nodeValue)?.[\n              optionLabelProp as keyof (typeof options)[number]\n            ] ?? nodeValue) as string,\n        ),\n      [options, selectedNodeValues, optionLabelProp],\n    );\n\n    // Scroll to the current node when it changes; this is useful for keyboard navigation and for options that are not visible\n    // in the viewport.\n    useEffect(() => {\n      if (currentNodeKey) {\n        document.getElementById(currentNodeKey)?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n      }\n    }, [currentNodeKey]);\n\n    // Calculate the width of the input wrapper to set the width of the options container (popover content)\n    const inputWrapperRect = useElementRect(inputRef.current?.parentElement?.parentElement);\n\n    useImperativeHandle(ref, () => inputRef.current!);\n\n    const { focusKind, handleOnClick, handleOnFocus, handleOnBlur, handleOnMouseDownCapture } = useFocusRingOnKeyboard({\n      inputRef,\n      onFocus,\n      onBlur,\n      onClick,\n    });\n\n    const onBlurHandler = useCallback(\n      (event: FocusEvent<HTMLInputElement>) => {\n        if (handled) {\n          return;\n        }\n        // If the blur event is triggered by clicking outside the select options, close the dropdown\n        // If the related target is not part of the select options, close the dropdown\n        // If the related target is part of the select options, keep the dropdown open\n        if (\n          !event.relatedTarget ||\n          (!event.currentTarget.contains(event.relatedTarget) &&\n            (event.relatedTarget as HTMLElement).id !== `select-${id}-controls` &&\n            (event.relatedTarget as HTMLElement).parentElement?.id !== `select-${id}-options-container`)\n        ) {\n          setSearchValue('');\n          handleOnBlur(event);\n          setIsOpen(false);\n        } else {\n          handleOnFocus(event);\n          inputRef.current?.focus();\n        }\n      },\n      [handleOnBlur, handleOnFocus, id, handled],\n    );\n\n    const onkeydownHandler = useCallback(\n      (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (!isOpen && ['Enter', 'ArrowUp', 'ArrowDown', ' '].includes(event.key)) {\n          event.preventDefault();\n          event.stopPropagation();\n          setIsOpen(true);\n          return;\n        }\n\n        if (event.key === 'Escape') {\n          event.preventDefault();\n          setIsOpen(false);\n          return;\n        }\n\n        inputRef.current?.focus();\n\n        if (\n          allowClear &&\n          (event.key === 'Backspace' || event.key === 'Delete') &&\n          (!searchValue || searchValue.trim().length === 0) &&\n          selectedNodeValues.length > 0\n        ) {\n          selectNodeValue(selectedNodeValues[selectedNodeValues.length - 1]);\n        }\n\n        if (availableOptionKeys.length === 0) {\n          return;\n        }\n\n        if (event.key === 'Enter' || ((!searchValue || searchValue.trim().length === 0) && event.key === ' ')) {\n          event.preventDefault();\n          const currentNode = flatOptions.find((opt) => !opt.isGroup && opt.key === currentNodeKey);\n          selectNodeValue(currentNode && !currentNode?.isGroup ? (currentNode.value ?? null) : null);\n        }\n\n        if (event.key === 'ArrowDown') {\n          event.preventDefault();\n          setCurrentNodeKey((prevKey) => {\n            const currentNodeIdx = prevKey ? availableOptionKeys.indexOf(prevKey) : -1;\n            if (currentNodeIdx === -1 || currentNodeIdx === availableOptionKeys.length - 1) {\n              return availableOptionKeys?.[0] ?? null;\n            }\n\n            return availableOptionKeys?.[currentNodeIdx + 1] ?? null;\n          });\n        }\n\n        if (event.key === 'ArrowUp') {\n          event.preventDefault();\n          setCurrentNodeKey((prevKey) => {\n            const currentNodeIdx = prevKey ? availableOptionKeys.indexOf(prevKey) : -1;\n            if (currentNodeIdx <= 0) {\n              return availableOptionKeys?.[availableOptionKeys.length - 1] ?? null;\n            }\n            return availableOptionKeys?.[currentNodeIdx - 1] ?? null;\n          });\n        }\n      },\n      [\n        isOpen,\n        allowClear,\n        availableOptionKeys,\n        searchValue,\n        selectedNodeValues,\n        selectNodeValue,\n        flatOptions,\n        currentNodeKey,\n      ],\n    );\n\n    const handleSearchChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n      (event) => {\n        const newValue = event.target.value;\n\n        setSearchValue(newValue);\n        onSearch?.(newValue);\n      },\n      [onSearch],\n    );\n\n    return (\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <label\n          htmlFor={inputId}\n          id={`select-${id}-label`}\n          tabIndex={-1}\n          style={{\n            position: 'absolute',\n            width: '1px',\n            height: '1px',\n            padding: '0px',\n            margin: '-1px',\n            overflow: 'hidden',\n            clip: 'rect(0px, 0px, 0px, 0px)',\n            whiteSpace: 'nowrap',\n            borderWidth: '0px',\n          }}\n        >\n          {selectedNodeValues.join(', ')}\n        </label>\n        <PopoverTrigger asChild={true}>\n          <SelectInput\n            inputRef={inputRef}\n            data-focused={focusKind}\n            $mode={mode}\n            className={classNames(SELECT_CLASS, className)}\n            style={style}\n            size={size}\n            allowReadOnlyClear={true}\n            readOnly={!showSearch}\n            onFocus={handleOnFocus}\n            onBlur={onBlurHandler}\n            wrapperProps={{\n              onMouseDownCapture: (e) => {\n                setHandled(true);\n                handleOnMouseDownCapture(e);\n              },\n              onClick: (e) => {\n                if (!e.isDefaultPrevented()) {\n                  inputRef.current?.click();\n                }\n                setHandled(false);\n                handleOnClick(e);\n              },\n            }}\n            onClick={(e) => {\n              if (showSearch && !disabled && !e.isDefaultPrevented()) {\n                setIsOpen(true);\n                e.preventDefault();\n              }\n              setHandled(false);\n              e.stopPropagation();\n            }}\n            invalid={invalid}\n            loading={loading}\n            disabled={disabled}\n            onKeyDown={onkeydownHandler}\n            value={searchValue}\n            onChange={handleSearchChange}\n            name=\"select-input\"\n            type=\"text\"\n            customPrefix={\n              mode === 'multiple' &&\n              selectedNodeValues.map((sNodeValue, index) => (\n                <SelectTag\n                  sentiment=\"information\"\n                  $disabled={disabled}\n                  $invalid={invalid}\n                  size={size}\n                  closeButton={!disabled && allowClear}\n                  onCloseClick={() => {\n                    selectNodeValue(sNodeValue);\n                  }}\n                  key={`select-${id}-value-${sNodeValue}`}\n                >\n                  {selectedNodeLabels[index]}\n                </SelectTag>\n              ))\n            }\n            customSuffix={\n              selectedNodeValues.length > 0 &&\n              mode === 'single' &&\n              (!searchValue || searchValue.trim().length === 0) && (\n                <SelectedSingleOptionLabel disabled={disabled} id={`select-${id}-value`} size={size}>\n                  {selectedNodeLabels[0]}\n                </SelectedSingleOptionLabel>\n              )\n            }\n            suffix={{\n              transparent: true,\n              node: suffix ? (\n                <Flexbox gap=\"2px\">\n                  {suffix}\n                  <ChevronDown />\n                </Flexbox>\n              ) : (\n                <ChevronDown />\n              ),\n              onClick: (e) => {\n                const clickEvent = new Event('click', { bubbles: true, cancelable: true });\n                if (showSearch && !disabled) {\n                  setIsOpen((prev) => !prev);\n                  clickEvent.preventDefault();\n                  e.preventDefault();\n                }\n                inputRef.current?.dispatchEvent(clickEvent);\n              },\n            }}\n            placeholder={\n              !searchValue && ((selectedNodeValues.length === 0 && mode === 'single') || mode === 'multiple')\n                ? placeholder\n                : ''\n            }\n            allowClear={allowClear && ((val) => val !== '' || selectedNodeValues.length > 0)}\n            onClear={() => {\n              selectNodeValue(null);\n              onClear?.();\n            }}\n            autoComplete=\"off\"\n            autoCorrect=\"off\"\n            multiple={mode !== 'single'}\n            spellCheck=\"false\"\n            aria-autocomplete=\"list\"\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            aria-controls={isOpen ? `select-${id}-controls` : undefined}\n            aria-labelledby={`select-${id}-label`}\n            id={inputId}\n            aria-activedescendant={isOpen ? (currentNodeKey ?? undefined) : undefined}\n            {...rest}\n          />\n        </PopoverTrigger>\n        <SelectPopoverContent\n          role=\"listbox\"\n          align=\"start\"\n          side=\"bottom\"\n          ref={optionsContainerRef}\n          style={{\n            width: inputWrapperRect?.width ?? 'auto',\n          }}\n          size={size === Sizes.XSmall ? Sizes.Small : size}\n          sideOffset={4}\n          alignOffset={0}\n          tabIndex={-1}\n          onOpenAutoFocus={(e) => {\n            // prevent default focus behavior\n            e.preventDefault();\n            e.stopPropagation();\n          }}\n          aria-label=\"Suggestions\"\n          id={`select-${id}-controls`}\n          padding={false}\n        >\n          <div id={`select-${id}-options-container`} role=\"presentation\" tabIndex={-1}>\n            {!loading &&\n              filteredOptions.map((option) => {\n                if (option.isGroup && filteredOptions.some((opt) => !opt.isGroup && opt.key.startsWith(option.key))) {\n                  return (\n                    <SelectListItemHeader\n                      size={size === Sizes.XSmall ? Sizes.Small : size}\n                      key={option.key}\n                      id={option.key}\n                      role=\"group\"\n                      label={option.label}\n                    />\n                  );\n                } else if (!option.isGroup) {\n                  return (\n                    <SelectListItem\n                      id={option.key}\n                      size={size === Sizes.XSmall ? Sizes.Small : size}\n                      key={option.key}\n                      role=\"option\"\n                      tabIndex={-1}\n                      onMouseMove={() => !option.disabled && setCurrentNodeKey(option.key)}\n                      onClick={() => !option.disabled && selectNodeValue(option.value ?? null)}\n                      onKeyDown={(event) => onkeydownHandler(event as unknown as React.KeyboardEvent<HTMLInputElement>)}\n                      selected={selectedNodeValues.includes(option.value ?? null)}\n                      aria-selected={currentNodeKey === option.key}\n                      disabled={option.disabled}\n                      label={option.label}\n                    />\n                  );\n                }\n                return null;\n              })}\n          </div>\n          {!loading && (filteredOptions.length === 0 || filteredOptions.every((opt) => opt.isGroup)) && (\n            <SelectListItemHeader\n              style={{ textAlign: 'center' }}\n              size={size === Sizes.XSmall ? Sizes.Small : size}\n              id={`select-${id}-options-not-found`}\n              role=\"alert\"\n              aria-live=\"polite\"\n              aria-atomic={true}\n              aria-label=\"No options found\"\n              label=\"No options found\"\n            />\n          )}\n          {loading && <SelectLoading id={id} size={size} />}\n        </SelectPopoverContent>\n      </Popover>\n    );\n  },\n);\n\nexport default Select;\n"],"names":["Select","forwardRef","idProp","defaultOpen","className","size","Sizes","mode","placeholder","loading","invalid","showSearch","allowClear","placement","disabled","originalOptions","onFocus","onBlur","onClick","children","optionFilterProp","optionLabelProp","onSearch","onSelect","onDeselect","onClear","onChange","defaultValue","suffix","value","style","_virtual","rest","ref","inputRef","useRef","optionsContainerRef","isOpen","setIsOpen","useState","id","useId","handled","setHandled","inputId","searchValue","setSearchValue","selectedNodeValues","setSelectedNodeValues","asArray","options","useOptions","flatOptions","useMemo","opt","filteredOptions","strIncludes","availableOptionKeys","currentNodeKey","setCurrentNodeKey","useEffect","_a","handleOnChange","useCallback","newNodeValues","selectNodeValue","nodeValue","newSelectedValues","added","removed","updateSelectedValues","addedValue","addedOption","SelectUtils.isOption","removedValue","removedOption","selectedNodeLabels","inputWrapperRect","useElementRect","_b","useImperativeHandle","focusKind","handleOnClick","handleOnFocus","handleOnBlur","handleOnMouseDownCapture","useFocusRingOnKeyboard","onBlurHandler","event","onkeydownHandler","currentNode","prevKey","currentNodeIdx","handleSearchChange","newValue","jsxs","Popover","jsx","PopoverTrigger","SelectInput","classNames","SELECT_CLASS","sNodeValue","index","SelectTag","SelectedSingleOptionLabel","Flexbox","ChevronDown","clickEvent","prev","val","SelectPopoverContent","option","SelectListItemHeader","SelectListItem","SelectLoading"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import {\n  type ChangeEventHandler,\n  type FocusEvent,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n  type ReactElement,\n} from 'react';\n\nimport { SELECT_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport classNames from 'classnames';\nimport { SelectUtils } from 'acinguiux-ds-react-base/components/Select';\n\nimport type { ISelectProps, ValueType } from './Select.types';\nimport { Popover, PopoverTrigger } from '../Popover/Popover';\nimport { ChevronDown } from '../Icon/components';\nimport { useFocusRingOnKeyboard } from '../../hooks/useFocusRingOnKeyboard';\nimport { SelectInput, SelectPopoverContent, SelectTag, SelectedSingleOptionLabel } from './Select.styles';\nimport ListItem from '../ListItem/ListItem';\nimport { useOptions } from './hooks/useOptions';\nimport { useElementRect } from './hooks/useElementRect';\nimport { strIncludes } from './utils/strUtils';\nimport { updateSelectedValues } from './utils/selection';\nimport { asArray } from './utils/props';\nimport Flexbox from '../Flexbox/Flexbox';\nimport { SelectLoading } from './components/SelectLoading';\nimport { onKeyDownHandle } from './utils/keydown';\nimport ListItemHeader from '../ListItem/ListItemHeader';\n\nconst Select = forwardRef<HTMLInputElement, ISelectProps>(\n  (\n    {\n      id: idProp,\n      defaultOpen,\n      className,\n      size = Sizes.Medium,\n      mode = 'single',\n      placeholder,\n      loading = false,\n      invalid = false,\n      showSearch = true,\n      allowClear,\n      placement,\n      disabled,\n      options: originalOptions,\n      onFocus,\n      onBlur,\n      onClick,\n      children,\n      optionFilterProp = 'label',\n      optionLabelProp = 'label',\n      optionSelectionType,\n      optionShowInputControls,\n      optionMutliline = false,\n      onKeyDown,\n      onSearch,\n      onSelect,\n      onDeselect,\n      onClear,\n      onChange,\n      defaultValue,\n      suffix,\n      value,\n      style,\n      // This prop is not used in the new Select implementation, but kept for compatibility.\n      // If you need virtualized options, please use the DeprecatedSelect component.\n      virtual: _virtual = false,\n      ...rest\n    }: ISelectProps,\n    ref,\n  ): ReactElement => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const optionsContainerRef = useRef<HTMLDivElement>(null);\n    const [isOpen, setIsOpen] = useState(defaultOpen ?? false);\n    const id = useId();\n    const [handled, setHandled] = useState(false);\n    const inputId = idProp ?? `select-${id}-input`;\n    const [searchValue, setSearchValue] = useState<string>('');\n    const [selectedNodeValues, setSelectedNodeValues] = useState<ValueType[]>(() => asArray(defaultValue ?? value));\n    const options = useOptions(children, `select-${id}`, originalOptions);\n    const flatOptions = useMemo(\n      () => options.flatMap((opt) => (opt.isGroup ? [opt, ...opt.options] : [opt])),\n      [options],\n    );\n    const filteredOptions = useMemo(\n      () =>\n        searchValue && searchValue.trim().length > 0\n          ? flatOptions.filter(\n              (opt) =>\n                opt?.isGroup ||\n                strIncludes(opt?.[optionFilterProp as keyof (typeof options)[number]] as string, searchValue),\n            )\n          : flatOptions,\n      [flatOptions, searchValue, optionFilterProp],\n    );\n    const availableOptionKeys = useMemo(\n      () => filteredOptions.filter((opt) => opt && !opt.isGroup && opt.disabled !== true).map((opt) => opt.key),\n      [filteredOptions],\n    );\n\n    const [currentNodeKey, setCurrentNodeKey] = useState<string | null>(null);\n\n    // Set the initial current node key to the first available option\n    useEffect(() => {\n      setCurrentNodeKey(flatOptions.find((opt) => !opt.isGroup && !opt.disabled)?.key ?? null);\n    }, [flatOptions]);\n\n    const handleOnChange = useCallback(\n      (newNodeValues: ValueType[]) => {\n        if (mode === 'single') {\n          onChange?.(newNodeValues.length === 1 ? newNodeValues[0] : null);\n          return;\n        }\n\n        onChange?.(newNodeValues);\n      },\n      [mode, onChange],\n    );\n\n    useEffect(() => {\n      if (mode === 'single') {\n        setSelectedNodeValues(value ? [value] : []);\n      } else if (Array.isArray(value)) {\n        setSelectedNodeValues(value);\n      }\n    }, [value, mode]);\n\n    const selectNodeValue = useCallback(\n      (nodeValue: ValueType) => {\n        const {\n          current: newSelectedValues,\n          added,\n          removed,\n        } = updateSelectedValues(selectedNodeValues, nodeValue, mode, allowClear);\n\n        added.forEach((addedValue) => {\n          const addedOption = flatOptions.find((opt) => !opt.isGroup && opt.value === addedValue);\n          if (SelectUtils.isOption(addedOption) && onSelect) {\n            onSelect(addedOption.value, addedOption);\n          }\n        });\n        removed.forEach((removedValue) => {\n          const removedOption = flatOptions.find((opt) => !opt.isGroup && opt.value === removedValue);\n          if (SelectUtils.isOption(removedOption) && onDeselect) {\n            onDeselect(removedOption.value, removedOption);\n          }\n        });\n\n        setSelectedNodeValues(newSelectedValues);\n        handleOnChange(newSelectedValues);\n\n        setSearchValue('');\n        if (mode === 'single') {\n          setIsOpen(false);\n        }\n      },\n      [selectedNodeValues, mode, allowClear, handleOnChange, flatOptions, onSelect, onDeselect],\n    );\n\n    // define node values based on selected node keys\n    // This is used for the input label and for the selected tags in multiple mode.\n    const selectedNodeLabels = useMemo(\n      () =>\n        selectedNodeValues?.map(\n          (nodeValue) =>\n            (options\n              .flatMap((opt) => (opt.isGroup ? opt.options : [opt]))\n              .find((opt) => !opt.isGroup && opt.value === nodeValue)?.[\n              optionLabelProp as keyof (typeof options)[number]\n            ] ?? nodeValue) as string,\n        ),\n      [options, selectedNodeValues, optionLabelProp],\n    );\n\n    // Scroll to the current node when it changes; this is useful for keyboard navigation and for options that are not visible\n    // in the viewport.\n    useEffect(() => {\n      if (currentNodeKey) {\n        document.getElementById(currentNodeKey)?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n      }\n    }, [currentNodeKey]);\n\n    // Calculate the width of the input wrapper to set the width of the options container (popover content)\n    const inputWrapperRect = useElementRect(inputRef.current?.parentElement?.parentElement);\n\n    useImperativeHandle(ref, () => inputRef.current!);\n\n    const { focusKind, handleOnClick, handleOnFocus, handleOnBlur, handleOnMouseDownCapture } = useFocusRingOnKeyboard({\n      inputRef,\n      onFocus,\n      onBlur,\n      onClick,\n    });\n\n    const onBlurHandler = useCallback(\n      (event: FocusEvent<HTMLInputElement>) => {\n        if (handled) {\n          return;\n        }\n        // If the blur event is triggered by clicking outside the select options, close the dropdown\n        // If the related target is not part of the select options, close the dropdown\n        // If the related target is part of the select options, keep the dropdown open\n        if (\n          !event.relatedTarget ||\n          (!event.currentTarget.contains(event.relatedTarget) &&\n            (event.relatedTarget as HTMLElement).id !== `select-${id}-controls` &&\n            (event.relatedTarget as HTMLElement).parentElement?.id !== `select-${id}-options-container`)\n        ) {\n          setSearchValue('');\n          handleOnBlur(event);\n          setIsOpen(false);\n        } else {\n          handleOnFocus(event);\n          inputRef.current?.focus();\n        }\n      },\n      [handleOnBlur, handleOnFocus, id, handled],\n    );\n\n    const onkeydownHandler = useCallback(\n      (event: React.KeyboardEvent<HTMLInputElement>) => {\n        onKeyDownHandle(event, {\n          isOpen,\n          setIsOpen,\n          input: inputRef.current,\n          allowClear: Boolean(allowClear),\n          availableOptionKeys,\n          searchValue,\n          selectedNodeValues,\n          selectNodeValue,\n          flatOptions,\n          currentNodeKey,\n          setCurrentNodeKey,\n        });\n        onKeyDown?.(event);\n      },\n      [\n        onKeyDown,\n        isOpen,\n        allowClear,\n        availableOptionKeys,\n        searchValue,\n        selectedNodeValues,\n        selectNodeValue,\n        flatOptions,\n        currentNodeKey,\n      ],\n    );\n\n    const handleSearchChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n      (event) => {\n        const newValue = event.target.value;\n\n        setSearchValue(newValue);\n        onSearch?.(newValue);\n      },\n      [onSearch],\n    );\n\n    return (\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <label\n          htmlFor={inputId}\n          id={`select-${id}-label`}\n          tabIndex={-1}\n          style={{\n            position: 'absolute',\n            width: '1px',\n            height: '1px',\n            padding: '0px',\n            margin: '-1px',\n            overflow: 'hidden',\n            clip: 'rect(0px, 0px, 0px, 0px)',\n            whiteSpace: 'nowrap',\n            borderWidth: '0px',\n          }}\n        >\n          {selectedNodeValues.join(', ')}\n        </label>\n        <PopoverTrigger asChild={true}>\n          <SelectInput\n            inputRef={inputRef}\n            data-focused={focusKind}\n            $mode={mode}\n            className={classNames(SELECT_CLASS, className)}\n            style={style}\n            size={size}\n            allowReadOnlyClear={true}\n            readOnly={!showSearch}\n            onFocus={handleOnFocus}\n            onBlur={onBlurHandler}\n            wrapperProps={{\n              onMouseDownCapture: (e) => {\n                setHandled(true);\n                handleOnMouseDownCapture(e);\n              },\n              onClick: (e) => {\n                if (!e.isDefaultPrevented()) {\n                  inputRef.current?.click();\n                }\n                setHandled(false);\n                handleOnClick(e);\n              },\n            }}\n            onClick={(e) => {\n              if (showSearch && !disabled && !e.isDefaultPrevented()) {\n                setIsOpen(true);\n                e.preventDefault();\n              }\n              setHandled(false);\n              e.stopPropagation();\n            }}\n            invalid={invalid}\n            loading={loading}\n            disabled={disabled}\n            onKeyDown={onkeydownHandler}\n            value={searchValue}\n            onChange={handleSearchChange}\n            name=\"select-input\"\n            type=\"text\"\n            customPrefix={\n              mode === 'multiple' &&\n              selectedNodeValues.map((sNodeValue, index) => (\n                <SelectTag\n                  sentiment=\"information\"\n                  $disabled={disabled}\n                  $invalid={invalid}\n                  size={size}\n                  closeButton={!disabled && allowClear}\n                  onCloseClick={() => {\n                    selectNodeValue(sNodeValue);\n                  }}\n                  key={`select-${id}-value-${sNodeValue}`}\n                >\n                  {selectedNodeLabels[index]}\n                </SelectTag>\n              ))\n            }\n            customSuffix={\n              selectedNodeValues.length > 0 &&\n              mode === 'single' &&\n              (!searchValue || searchValue.trim().length === 0) && (\n                <SelectedSingleOptionLabel disabled={disabled} id={`select-${id}-value`} size={size}>\n                  {selectedNodeLabels[0]}\n                </SelectedSingleOptionLabel>\n              )\n            }\n            suffix={{\n              transparent: true,\n              node: suffix ? (\n                <Flexbox gap=\"2px\">\n                  {suffix}\n                  <ChevronDown />\n                </Flexbox>\n              ) : (\n                <ChevronDown />\n              ),\n              onClick: (e) => {\n                const clickEvent = new Event('click', { bubbles: true, cancelable: true });\n                if (showSearch && !disabled) {\n                  setIsOpen((prev) => !prev);\n                  clickEvent.preventDefault();\n                  e.preventDefault();\n                }\n                inputRef.current?.dispatchEvent(clickEvent);\n              },\n            }}\n            placeholder={\n              !searchValue && ((selectedNodeValues.length === 0 && mode === 'single') || mode === 'multiple')\n                ? placeholder\n                : ''\n            }\n            allowClear={allowClear && ((val) => val !== '' || selectedNodeValues.length > 0)}\n            onClear={() => {\n              selectNodeValue(null);\n              onClear?.();\n            }}\n            autoComplete=\"off\"\n            autoCorrect=\"off\"\n            multiple={mode !== 'single'}\n            spellCheck=\"false\"\n            aria-autocomplete=\"list\"\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            aria-controls={isOpen ? `select-${id}-controls` : undefined}\n            aria-labelledby={`select-${id}-label`}\n            id={inputId}\n            aria-activedescendant={isOpen ? (currentNodeKey ?? undefined) : undefined}\n            {...rest}\n          />\n        </PopoverTrigger>\n        <SelectPopoverContent\n          role=\"listbox\"\n          align=\"start\"\n          side=\"bottom\"\n          ref={optionsContainerRef}\n          style={{\n            width: inputWrapperRect?.width ?? 'auto',\n          }}\n          size={size === Sizes.XSmall ? Sizes.Small : size}\n          sideOffset={4}\n          alignOffset={0}\n          tabIndex={-1}\n          onOpenAutoFocus={(e) => {\n            // prevent default focus behavior\n            e.preventDefault();\n            e.stopPropagation();\n          }}\n          aria-label=\"Suggestions\"\n          id={`select-${id}-controls`}\n          padding={false}\n        >\n          <div id={`select-${id}-options-container`} role=\"presentation\" tabIndex={-1}>\n            {!loading &&\n              filteredOptions.map((option, i) => {\n                if (option.isGroup && filteredOptions.some((opt) => !opt.isGroup && opt.key.startsWith(option.key))) {\n                  return (\n                    <ListItemHeader\n                      size={size === Sizes.XSmall ? Sizes.Small : size}\n                      key={option.key}\n                      id={option.key}\n                      role=\"group\"\n                      label={option.label}\n                      divider={i !== 0}\n                    />\n                  );\n                } else if (!option.isGroup) {\n                  return (\n                    <ListItem\n                      id={option.key}\n                      size={size === Sizes.XSmall ? Sizes.Small : size}\n                      key={option.key}\n                      role=\"option\"\n                      tabIndex={-1}\n                      onMouseMove={() => !option.disabled && setCurrentNodeKey(option.key)}\n                      onClick={() => !option.disabled && selectNodeValue(option.value ?? null)}\n                      onKeyDown={(event) => onkeydownHandler(event as unknown as React.KeyboardEvent<HTMLInputElement>)}\n                      selected={selectedNodeValues.includes(option.value ?? null)}\n                      aria-selected={currentNodeKey === option.key}\n                      disabled={option.disabled}\n                      multiline={optionMutliline}\n                      label={option.label}\n                      optionItem={true}\n                      selectionType={optionSelectionType ?? (!mode || mode === 'single' ? 'radio' : 'checkbox')}\n                      showInputControls={optionShowInputControls}\n                    />\n                  );\n                }\n                return null;\n              })}\n          </div>\n          {!loading && (filteredOptions.length === 0 || filteredOptions.every((opt) => opt.isGroup)) && (\n            <ListItemHeader\n              style={{ textAlign: 'center' }}\n              size={size === Sizes.XSmall ? Sizes.Small : size}\n              id={`select-${id}-options-not-found`}\n              role=\"alert\"\n              aria-live=\"polite\"\n              aria-atomic={true}\n              aria-label=\"No options found\"\n              label=\"No options found\"\n              divider={false}\n            />\n          )}\n          {loading && <SelectLoading id={id} size={size} />}\n        </SelectPopoverContent>\n      </Popover>\n    );\n  },\n);\n\nexport default Select;\n"],"names":["Select","forwardRef","idProp","defaultOpen","className","size","Sizes","mode","placeholder","loading","invalid","showSearch","allowClear","placement","disabled","originalOptions","onFocus","onBlur","onClick","children","optionFilterProp","optionLabelProp","optionSelectionType","optionShowInputControls","optionMutliline","onKeyDown","onSearch","onSelect","onDeselect","onClear","onChange","defaultValue","suffix","value","style","_virtual","rest","ref","inputRef","useRef","optionsContainerRef","isOpen","setIsOpen","useState","id","useId","handled","setHandled","inputId","searchValue","setSearchValue","selectedNodeValues","setSelectedNodeValues","asArray","options","useOptions","flatOptions","useMemo","opt","filteredOptions","strIncludes","availableOptionKeys","currentNodeKey","setCurrentNodeKey","useEffect","handleOnChange","useCallback","newNodeValues","selectNodeValue","nodeValue","newSelectedValues","added","removed","updateSelectedValues","addedValue","addedOption","SelectUtils.isOption","removedValue","removedOption","selectedNodeLabels","inputWrapperRect","useElementRect","useImperativeHandle","focusKind","handleOnClick","handleOnFocus","handleOnBlur","handleOnMouseDownCapture","useFocusRingOnKeyboard","onBlurHandler","event","onkeydownHandler","onKeyDownHandle","handleSearchChange","newValue","jsxs","Popover","jsx","PopoverTrigger","SelectInput","classNames","SELECT_CLASS","sNodeValue","index","SelectTag","SelectedSingleOptionLabel","Flexbox","ChevronDown","clickEvent","prev","val","SelectPopoverContent","option","i","ListItemHeader","ListItem","SelectLoading"],"mappings":"iyBAkCMA,GAASC,EAAAA,WACb,CACE,CACE,GAAIC,EACJ,YAAAC,GACA,UAAAC,GACA,KAAAC,EAAOC,EAAAA,MAAM,OACb,KAAAC,EAAO,SACP,YAAAC,GACA,QAAAC,EAAU,GACV,QAAAC,EAAU,GACV,WAAAC,EAAa,GACb,WAAAC,EACA,UAAAC,GACA,SAAAC,EACA,QAASC,GACT,QAAAC,GACA,OAAAC,GACA,QAAAC,GACA,SAAAC,GACA,iBAAAC,EAAmB,QACnB,gBAAAC,EAAkB,QAClB,oBAAAC,GACA,wBAAAC,GACA,gBAAAC,GAAkB,GAClB,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,WAAAC,EACA,QAAAC,GACA,SAAAC,EACA,aAAAC,GACA,OAAAC,EACA,MAAAC,EACA,MAAAC,GAGA,QAASC,GAAW,GACpB,GAAGC,EAAA,EAELC,KACiB,CACjB,MAAMC,EAAWC,EAAAA,OAAyB,IAAI,EACxCC,GAAsBD,EAAAA,OAAuB,IAAI,EACjD,CAACE,EAAQC,CAAS,EAAIC,EAAAA,SAASxC,IAAe,EAAK,EACnDyC,EAAKC,EAAAA,MAAA,EACL,CAACC,EAASC,CAAU,EAAIJ,EAAAA,SAAS,EAAK,EACtCK,EAAU9C,GAAU,UAAU0C,CAAE,SAChC,CAACK,EAAaC,CAAc,EAAIP,EAAAA,SAAiB,EAAE,EACnD,CAACQ,EAAoBC,CAAqB,EAAIT,EAAAA,SAAsB,IAAMU,WAAQtB,IAAgBE,CAAK,CAAC,EACxGqB,EAAUC,GAAAA,WAAWpC,GAAU,UAAUyB,CAAE,GAAI7B,EAAe,EAC9DyC,EAAcC,EAAAA,QAClB,IAAMH,EAAQ,QAASI,GAASA,EAAI,QAAU,CAACA,EAAK,GAAGA,EAAI,OAAO,EAAI,CAACA,CAAG,CAAE,EAC5E,CAACJ,CAAO,CAAA,EAEJK,EAAkBF,EAAAA,QACtB,IACER,GAAeA,EAAY,OAAO,OAAS,EACvCO,EAAY,OACTE,GACCA,GAAK,SACLE,GAAAA,YAAYF,IAAMtC,CAAkD,EAAa6B,CAAW,CAAA,EAEhGO,EACN,CAACA,EAAaP,EAAa7B,CAAgB,CAAA,EAEvCyC,EAAsBJ,EAAAA,QAC1B,IAAME,EAAgB,OAAQD,GAAQA,GAAO,CAACA,EAAI,SAAWA,EAAI,WAAa,EAAI,EAAE,IAAKA,GAAQA,EAAI,GAAG,EACxG,CAACC,CAAe,CAAA,EAGZ,CAACG,EAAgBC,CAAiB,EAAIpB,EAAAA,SAAwB,IAAI,EAGxEqB,EAAAA,UAAU,IAAM,CACdD,EAAkBP,EAAY,KAAME,GAAQ,CAACA,EAAI,SAAW,CAACA,EAAI,QAAQ,GAAG,KAAO,IAAI,CACzF,EAAG,CAACF,CAAW,CAAC,EAEhB,MAAMS,EAAiBC,EAAAA,YACpBC,GAA+B,CAC9B,GAAI5D,IAAS,SAAU,CACrBuB,IAAWqC,EAAc,SAAW,EAAIA,EAAc,CAAC,EAAI,IAAI,EAC/D,MACF,CAEArC,IAAWqC,CAAa,CAC1B,EACA,CAAC5D,EAAMuB,CAAQ,CAAA,EAGjBkC,EAAAA,UAAU,IAAM,CACVzD,IAAS,SACX6C,EAAsBnB,EAAQ,CAACA,CAAK,EAAI,CAAA,CAAE,EACjC,MAAM,QAAQA,CAAK,GAC5BmB,EAAsBnB,CAAK,CAE/B,EAAG,CAACA,EAAO1B,CAAI,CAAC,EAEhB,MAAM6D,EAAkBF,EAAAA,YACrBG,GAAyB,CACxB,KAAM,CACJ,QAASC,EACT,MAAAC,EACA,QAAAC,EAAA,EACEC,GAAAA,qBAAqBtB,EAAoBkB,EAAW9D,EAAMK,CAAU,EAExE2D,EAAM,QAASG,GAAe,CAC5B,MAAMC,EAAcnB,EAAY,KAAME,GAAQ,CAACA,EAAI,SAAWA,EAAI,QAAUgB,CAAU,EAClFE,EAAAA,SAAqBD,CAAW,GAAKhD,GACvCA,EAASgD,EAAY,MAAOA,CAAW,CAE3C,CAAC,EACDH,GAAQ,QAASK,GAAiB,CAChC,MAAMC,EAAgBtB,EAAY,KAAME,GAAQ,CAACA,EAAI,SAAWA,EAAI,QAAUmB,CAAY,EACtFD,EAAAA,SAAqBE,CAAa,GAAKlD,GACzCA,EAAWkD,EAAc,MAAOA,CAAa,CAEjD,CAAC,EAED1B,EAAsBkB,CAAiB,EACvCL,EAAeK,CAAiB,EAEhCpB,EAAe,EAAE,EACb3C,IAAS,UACXmC,EAAU,EAAK,CAEnB,EACA,CAACS,EAAoB5C,EAAMK,EAAYqD,EAAgBT,EAAa7B,EAAUC,CAAU,CAAA,EAKpFmD,EAAqBtB,EAAAA,QACzB,IACEN,GAAoB,IACjBkB,GACEf,EACE,QAASI,GAASA,EAAI,QAAUA,EAAI,QAAU,CAACA,CAAG,CAAE,EACpD,KAAMA,GAAQ,CAACA,EAAI,SAAWA,EAAI,QAAUW,CAAS,IACtDhD,CACF,GAAKgD,CAAA,EAEX,CAACf,EAASH,EAAoB9B,CAAe,CAAA,EAK/C2C,EAAAA,UAAU,IAAM,CACVF,GACF,SAAS,eAAeA,CAAc,GAAG,eAAe,CAAE,MAAO,UAAW,OAAQ,UAAW,CAEnG,EAAG,CAACA,CAAc,CAAC,EAGnB,MAAMkB,GAAmBC,GAAAA,eAAe3C,EAAS,SAAS,eAAe,aAAa,EAEtF4C,EAAAA,oBAAoB7C,GAAK,IAAMC,EAAS,OAAQ,EAEhD,KAAM,CAAE,UAAA6C,GAAW,cAAAC,GAAe,cAAAC,EAAe,aAAAC,EAAc,yBAAAC,EAAA,EAA6BC,0BAAuB,CACjH,SAAAlD,EACA,QAAAtB,GACA,OAAAC,GACA,QAAAC,EAAA,CACD,EAEKuE,GAAgBvB,EAAAA,YACnBwB,GAAwC,CACnC5C,IAOF,CAAC4C,EAAM,eACN,CAACA,EAAM,cAAc,SAASA,EAAM,aAAa,GAC/CA,EAAM,cAA8B,KAAO,UAAU9C,CAAE,aACvD8C,EAAM,cAA8B,eAAe,KAAO,UAAU9C,CAAE,sBAEzEM,EAAe,EAAE,EACjBoC,EAAaI,CAAK,EAClBhD,EAAU,EAAK,IAEf2C,EAAcK,CAAK,EACnBpD,EAAS,SAAS,MAAA,GAEtB,EACA,CAACgD,EAAcD,EAAezC,EAAIE,CAAO,CAAA,EAGrC6C,EAAmBzB,EAAAA,YACtBwB,GAAiD,CAChDE,GAAAA,gBAAgBF,EAAO,CACrB,OAAAjD,EACA,UAAAC,EACA,MAAOJ,EAAS,QAChB,WAAY,EAAQ1B,EACpB,oBAAAiD,EACA,YAAAZ,EACA,mBAAAE,EACA,gBAAAiB,EACA,YAAAZ,EACA,eAAAM,EACA,kBAAAC,CAAA,CACD,EACDtC,IAAYiE,CAAK,CACnB,EACA,CACEjE,EACAgB,EACA7B,EACAiD,EACAZ,EACAE,EACAiB,EACAZ,EACAM,CAAA,CACF,EAGI+B,GAA2D3B,EAAAA,YAC9DwB,GAAU,CACT,MAAMI,EAAWJ,EAAM,OAAO,MAE9BxC,EAAe4C,CAAQ,EACvBpE,IAAWoE,CAAQ,CACrB,EACA,CAACpE,CAAQ,CAAA,EAGX,OACEqE,EAAAA,KAACC,EAAAA,QAAA,CAAQ,KAAMvD,EAAQ,aAAcC,EACnC,SAAA,CAAAuD,EAAAA,IAAC,QAAA,CACC,QAASjD,EACT,GAAI,UAAUJ,CAAE,SAChB,SAAU,GACV,MAAO,CACL,SAAU,WACV,MAAO,MACP,OAAQ,MACR,QAAS,MACT,OAAQ,OACR,SAAU,SACV,KAAM,2BACN,WAAY,SACZ,YAAa,KAAA,EAGd,SAAAO,EAAmB,KAAK,IAAI,CAAA,CAAA,EAE/B8C,EAAAA,IAACC,EAAAA,eAAA,CAAe,QAAS,GACvB,SAAAD,EAAAA,IAACE,EAAAA,YAAA,CACC,SAAA7D,EACA,eAAc6C,GACd,MAAO5E,EACP,UAAW6F,GAAWC,GAAAA,aAAcjG,EAAS,EAC7C,MAAA8B,GACA,KAAA7B,EACA,mBAAoB,GACpB,SAAU,CAACM,EACX,QAAS0E,EACT,OAAQI,GACR,aAAc,CACZ,mBAAqB,GAAM,CACzB1C,EAAW,EAAI,EACfwC,GAAyB,CAAC,CAC5B,EACA,QAAU,GAAM,CACT,EAAE,sBACLjD,EAAS,SAAS,MAAA,EAEpBS,EAAW,EAAK,EAChBqC,GAAc,CAAC,CACjB,CAAA,EAEF,QAAU,GAAM,CACVzE,GAAc,CAACG,GAAY,CAAC,EAAE,uBAChC4B,EAAU,EAAI,EACd,EAAE,eAAA,GAEJK,EAAW,EAAK,EAChB,EAAE,gBAAA,CACJ,EACA,QAAArC,EACA,QAAAD,EACA,SAAAK,EACA,UAAW6E,EACX,MAAO1C,EACP,SAAU4C,GACV,KAAK,eACL,KAAK,OACL,aACEtF,IAAS,YACT4C,EAAmB,IAAI,CAACmD,EAAYC,IAClCN,EAAAA,IAACO,EAAAA,UAAA,CACC,UAAU,cACV,UAAW1F,EACX,SAAUJ,EACV,KAAAL,EACA,YAAa,CAACS,GAAYF,EAC1B,aAAc,IAAM,CAClBwD,EAAgBkC,CAAU,CAC5B,EAGC,WAAmBC,CAAK,CAAA,EAFpB,UAAU3D,CAAE,UAAU0D,CAAU,EAAA,CAIxC,EAEH,aACEnD,EAAmB,OAAS,GAC5B5C,IAAS,WACR,CAAC0C,GAAeA,EAAY,OAAO,SAAW,IAC7CgD,MAACQ,EAAAA,0BAAA,CAA0B,SAAA3F,EAAoB,GAAI,UAAU8B,CAAE,SAAU,KAAAvC,EACtE,SAAA0E,EAAmB,CAAC,CAAA,CACvB,EAGJ,OAAQ,CACN,YAAa,GACb,KAAM/C,EACJ+D,OAACW,GAAA,CAAQ,IAAI,MACV,SAAA,CAAA1E,QACA2E,EAAA,CAAA,CAAY,CAAA,CAAA,CACf,QAECA,EAAA,EAAY,EAEf,QAAU,GAAM,CACd,MAAMC,EAAa,IAAI,MAAM,QAAS,CAAE,QAAS,GAAM,WAAY,GAAM,EACrEjG,GAAc,CAACG,IACjB4B,EAAWmE,GAAS,CAACA,CAAI,EACzBD,EAAW,eAAA,EACX,EAAE,eAAA,GAEJtE,EAAS,SAAS,cAAcsE,CAAU,CAC5C,CAAA,EAEF,YACE,CAAC3D,IAAiBE,EAAmB,SAAW,GAAK5C,IAAS,UAAaA,IAAS,YAChFC,GACA,GAEN,WAAYI,IAAgBkG,GAAQA,IAAQ,IAAM3D,EAAmB,OAAS,GAC9E,QAAS,IAAM,CACbiB,EAAgB,IAAI,EACpBvC,KAAA,CACF,EACA,aAAa,MACb,YAAY,MACZ,SAAUtB,IAAS,SACnB,WAAW,QACX,oBAAkB,OAClB,KAAK,WACL,gBAAc,UACd,gBAAekC,EAAS,UAAUG,CAAE,YAAc,OAClD,kBAAiB,UAAUA,CAAE,SAC7B,GAAII,EACJ,wBAAuBP,EAAUqB,GAAkB,OAAa,OAC/D,GAAG1B,EAAA,CAAA,EAER,EACA2D,EAAAA,KAACgB,EAAAA,qBAAA,CACC,KAAK,UACL,MAAM,QACN,KAAK,SACL,IAAKvE,GACL,MAAO,CACL,MAAOwC,IAAkB,OAAS,MAAA,EAEpC,KAAM3E,IAASC,EAAAA,MAAM,OAASA,EAAAA,MAAM,MAAQD,EAC5C,WAAY,EACZ,YAAa,EACb,SAAU,GACV,gBAAkB,GAAM,CAEtB,EAAE,eAAA,EACF,EAAE,gBAAA,CACJ,EACA,aAAW,cACX,GAAI,UAAUuC,CAAE,YAChB,QAAS,GAET,SAAA,CAAAqD,MAAC,MAAA,CAAI,GAAI,UAAUrD,CAAE,qBAAsB,KAAK,eAAe,SAAU,GACtE,UAACnC,GACAkD,EAAgB,IAAI,CAACqD,EAAQC,IACvBD,EAAO,SAAWrD,EAAgB,KAAMD,GAAQ,CAACA,EAAI,SAAWA,EAAI,IAAI,WAAWsD,EAAO,GAAG,CAAC,EAE9Ff,EAAAA,IAACiB,EAAA,CACC,KAAM7G,IAASC,EAAAA,MAAM,OAASA,EAAAA,MAAM,MAAQD,EAE5C,GAAI2G,EAAO,IACX,KAAK,QACL,MAAOA,EAAO,MACd,QAASC,IAAM,CAAA,EAJVD,EAAO,GAAA,EAONA,EAAO,QAsBZ,KApBHf,EAAAA,IAACkB,GAAA,CACC,GAAIH,EAAO,IACX,KAAM3G,IAASC,EAAAA,MAAM,OAASA,EAAAA,MAAM,MAAQD,EAE5C,KAAK,SACL,SAAU,GACV,YAAa,IAAM,CAAC2G,EAAO,UAAYjD,EAAkBiD,EAAO,GAAG,EACnE,QAAS,IAAM,CAACA,EAAO,UAAY5C,EAAgB4C,EAAO,OAAS,IAAI,EACvE,UAAYtB,GAAUC,EAAiBD,CAAyD,EAChG,SAAUvC,EAAmB,SAAS6D,EAAO,OAAS,IAAI,EAC1D,gBAAelD,IAAmBkD,EAAO,IACzC,SAAUA,EAAO,SACjB,UAAWxF,GACX,MAAOwF,EAAO,MACd,WAAY,GACZ,cAAe1F,KAAwB,CAACf,GAAQA,IAAS,SAAW,QAAU,YAC9E,kBAAmBgB,EAAA,EAbdyF,EAAO,GAAA,CAkBnB,CAAA,CACL,EACC,CAACvG,IAAYkD,EAAgB,SAAW,GAAKA,EAAgB,MAAOD,GAAQA,EAAI,OAAO,IACtFuC,EAAAA,IAACiB,EAAA,CACC,MAAO,CAAE,UAAW,QAAA,EACpB,KAAM7G,IAASC,EAAAA,MAAM,OAASA,EAAAA,MAAM,MAAQD,EAC5C,GAAI,UAAUuC,CAAE,qBAChB,KAAK,QACL,YAAU,SACV,cAAa,GACb,aAAW,mBACX,MAAM,mBACN,QAAS,EAAA,CAAA,EAGZnC,GAAWwF,EAAAA,IAACmB,GAAAA,cAAA,CAAc,GAAAxE,EAAQ,KAAAvC,CAAA,CAAY,CAAA,CAAA,CAAA,CACjD,EACF,CAEJ,CACF"}

package/build/cjs/components/Select/Select.styles.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("styled-components"),o=require("../../react-base/src/theme/types/layer.js"),t=require("../../react-base/src/components/Input/Input.consts.js"),s=require("../../react-base/src/components/Select/Select.consts.js"),g=require("../Popover/Popover.js"),m=require("../Loading/Loading.styles.js"),x=require("../TextInput/TextInput.styles.js"),b=require("../TextInput/TextInput.js"),h=require("../Tag/Tag.js"),a=require("../Tag/Tag.styles.js"),p=require("../Flexbox/Flexbox.styles.js"),$=require("../Text/components/Label/Label.js"),c=require("../Text/components/Label/Label.styles.js"),d=n.styled(h)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("styled-components"),o=require("../../react-base/src/theme/types/layer.js"),t=require("../../react-base/src/components/Input/Input.consts.js"),s=require("../../react-base/src/components/Select/Select.consts.js"),g=require("../Popover/Popover.js"),m=require("../Loading/Loading.styles.js"),x=require("../TextInput/TextInput.styles.js"),h=require("../TextInput/TextInput.js"),b=require("../Tag/Tag.js"),a=require("../Tag/Tag.styles.js"),c=require("../Flexbox/Flexbox.styles.js"),$=require("../Text/components/Label/Label.js"),p=require("../Text/components/Label/Label.styles.js"),d=n.styled(b)`
   ${({theme:i,$invalid:e,$disabled:l,size:r})=>n.css`
     &,
     & ${a.TagButton} {
@@ -6,7 +6,7 @@
     }
 
     ${l&&n.css`
-      & ${a.TagLabelContainer} > ${c.Label} {
+      & ${a.TagLabelContainer} > ${p.Label} {
         color: ${i.layer({disabled:l,sentiment:e?"negative":"information"})[o.Variables.TextOnFoundationStrong]};
       }
     `};
@@ -36,8 +36,10 @@
   `};
 `,u=n.styled($)`
   position: absolute;
-`,w=n.styled(b)(({$mode:i,size:e,readOnly:l})=>n.css`
+`,w=n.styled(h)(({$mode:i,size:e,readOnly:l})=>n.css`
     align-items: flex-start;
+    max-width: 100%;
+    overflow: hidden;
 
     ${l&&n.css`
       &,
@@ -58,7 +60,7 @@
       --select-clear-btn-size: ${t.consts[e??"medium"].iconSize+t.consts[e??"medium"].padding.inline*2+t.consts[e??"medium"].containerGap}px;
     }
 
-    ${p.Flexbox}:has(input) {
+    ${c.Flexbox}:has(input) {
       position: relative;
     }
 
@@ -75,7 +77,7 @@
     }
 
     ${i==="multiple"&&n.css`
-      ${p.Flexbox}:has(input) {
+      ${c.Flexbox}:has(input) {
         gap: ${s.newConsts[e??"medium"].gap}px;
         &:has(${d}) {
           padding: ${s.newConsts[e??"medium"].prefixPadding}px;
@@ -91,7 +93,7 @@
       }
     `}
 
-    ${c.Label} {
+    ${p.Label} {
       text-overflow: ellipsis;
     }
 
@@ -108,11 +110,6 @@
         min-width: 0;
         max-width: 100%;
         display: block;
-
-        ${c.Label} {
-          display: flex;
-          align-items: center;
-        }
       }
     }
   `),f={small:32,medium:40,large:48},S=n.styled(g.PopoverContent)`