acinguiux-ds-react-framework 0.0.6 → 0.0.7

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

@@ -1,15 +1,16 @@
-import g, { css as l } from "styled-components";
-import { States as d } from "acinguiux-ds-fabrics";
-import { getFocusStyles as $, rotate as f } from "../../utils/styleUtils.js";
-import { rcSelectDropdownSlideUpIn as b, rcSelectDropdownSlideUpOut as m } from "./utils/styleUtils.js";
-import { getSelectedOptionTagStyles as h } from "./utils/selectedOptionTagStyleUtils.js";
-import { getLabelFontStyles as v, getPlaceholderFontStyles as w } from "../../react-base/src/utils/stylesUtils.js";
-import { consts as p } from "../../react-base/src/components/Select/Select.consts.js";
-import { Sizes as x, ZIndexes as u } from "../../react-base/src/consts.js";
-import { useStyles as S } from "../../react-base/src/components/Tooltip/Tooltip.utils.js";
-import * as y from "../../react-base/src/globalComponents/Input/Input.utils.js";
-const { getWrapperStyles: k, getInputBorderStyles: L, getInputColorStyles: T, getBaseElementStyles: B } = y, s = l(
-  ({ theme: o }) => l`
+import v, { css as p } from "styled-components";
+import { States as n, Sentiments as s, Prominences as g, Surfaces as m } from "acinguiux-ds-fabrics";
+import { getFocusStyles as S, rotate as w } from "../../utils/styleUtils.js";
+import { rcSelectDropdownSlideUpIn as x, rcSelectDropdownSlideUpOut as y } from "./utils/styleUtils.js";
+import { getSelectedOptionTagStyles as k } from "./utils/selectedOptionTagStyleUtils.js";
+import { getLabelFontStyles as B, getPlaceholderFontStyles as L } from "../../react-base/src/utils/stylesUtils.js";
+import { consts as u } from "../../react-base/src/components/Select/Select.consts.js";
+import { Sizes as b, ZIndexes as f } from "../../react-base/src/consts.js";
+import { LayerColor as d } from "../../react-base/src/theme/theme.js";
+import { useStyles as D } from "../../react-base/src/components/Tooltip/Tooltip.utils.js";
+import * as T from "../../react-base/src/globalComponents/Input/Input.utils.js";
+const { getWrapperStyles: I, getInputBorderStyles: z, getInputColorStyles: H, getBaseElementStyles: O, getFabricLayerColor: c } = T, h = p(
+  ({ theme: o }) => p`
     ${o.paragraph.small.normal};
     color: ${o.onSurface.surface.default.text.strong};
     border: none;
@@ -25,14 +26,14 @@ const { getWrapperStyles: k, getInputBorderStyles: L, getInputColorStyles: T, ge
       display: none;
     }
   `
-), D = l`
-  ${({ prefixCls: o, size: r, disabled: e, $emphasis: a, theme: t }) => {
-  const i = p[r], n = (c = d.Default) => h(c, e, a);
-  return l`
+), _ = p`
+  ${({ prefixCls: o, size: r, disabled: t, $emphasis: e, theme: i }) => {
+  const l = u[r], a = ($ = n.Default) => k($, t, e);
+  return p`
       &-multiple .${o}-selector {
         display: flex;
         flex-wrap: wrap;
-        padding: ${i.multi.padding};
+        padding: ${l.multi.padding};
 
         .${o}-selection-overflow {
           position: relative;
@@ -40,36 +41,41 @@ const { getWrapperStyles: k, getInputBorderStyles: L, getInputColorStyles: T, ge
           flex-wrap: wrap;
           gap: 6px;
           width: 100%;
+          white-space: nowrap;
 
           &-item {
             flex: none;
             max-width: 100%;
             align-self: center;
           }
+
+          .${o}-selection-search-input {
+            margin-left: ${r === b.Large ? "8px" : "6px"};
+          }
         }
 
         .${o}-selection-item {
-          ${r === x.XSmall ? t.label.small.normal : t.label.medium.normal};
+          ${r === b.XSmall ? i.label.small.normal : i.label.medium.normal};
 
           display: flex;
           align-items: center;
-          gap: ${i.tag.gap}px;
-          padding: ${i.tag.paddingTopBottom}px ${i.tag.paddingRight}px ${i.tag.paddingTopBottom}px
-            ${i.tag.paddingLeft}px;
+          gap: ${l.tag.gap}px;
+          padding: ${l.tag.paddingTopBottom}px ${l.tag.paddingRight}px ${l.tag.paddingTopBottom}px
+            ${l.tag.paddingLeft}px;
           border-radius: 4px;
-          ${n()};
+          ${a()};
 
           &:hover {
-            ${n(d.Hover)};
+            ${a(n.Hover)};
 
-            ${e && l`
-              background-color: ${n().backgroundColor};
-              color: ${n().color};
+            ${t && p`
+              background-color: ${a().backgroundColor};
+              color: ${a().color};
             `}
           }
 
           &:active {
-            ${n(d.Active)};
+            ${a(n.Active)};
           }
 
           &:first-child {
@@ -95,7 +101,7 @@ const { getWrapperStyles: k, getInputBorderStyles: L, getInputColorStyles: T, ge
           position: absolute;
           top: 50%;
           transform: translateY(-50%);
-          margin-left: ${i.tag.paddingLeft}px;
+          margin-left: ${l.tag.paddingLeft}px;
         }
 
         .${o}-selection-search {
@@ -109,7 +115,7 @@ const { getWrapperStyles: k, getInputBorderStyles: L, getInputColorStyles: T, ge
           }
 
           &-mirror {
-            z-index: ${u.SELECT};
+            z-index: ${f.SELECT};
             white-space: nowrap;
             position: absolute;
             left: 10px;
@@ -119,23 +125,23 @@ const { getWrapperStyles: k, getInputBorderStyles: L, getInputColorStyles: T, ge
         }
 
         .${o}-selection-search-input {
-          ${s};
+          ${h};
           cursor: pointer;
         }
       }
     `;
 }}
-`, z = l(({ prefixCls: o, size: r }) => {
-  const e = p[r];
-  return l`
+`, E = p(({ prefixCls: o, size: r }) => {
+  const t = u[r];
+  return p`
     &-single .${o}-selector {
       display: flex;
       position: relative;
-      padding: ${e.default.paddingTopBottom}px ${e.default.paddingRight}px ${e.default.paddingTopBottom}px
-        ${e.default.paddingLeft}px;
+      padding: ${t.default.paddingTopBottom}px ${t.default.paddingRight}px ${t.default.paddingTopBottom}px
+        ${t.default.paddingLeft}px;
 
       .${o}-selection-search-input {
-        ${s};
+        ${h};
         cursor: pointer;
 
         &:disabled {
@@ -163,33 +169,33 @@ const { getWrapperStyles: k, getInputBorderStyles: L, getInputColorStyles: T, ge
 
       .${o}-selection-item {
         display: inline-block;
-        width: calc(100% - (${e.default.paddingLeft}px + ${e.default.paddingRight}px));
+        width: calc(100% - (${t.default.paddingLeft}px + ${t.default.paddingRight}px));
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
     }
   `;
-}), I = l(({ size: o, prefixCls: r, disabled: e, theme: a }) => {
-  const t = p[o];
-  return l`
+}), R = p(({ size: o, prefixCls: r, theme: t }) => {
+  const e = u[o];
+  return p`
     &-item {
-      ${a.paragraph.small.normal};
+      ${t.paragraph.small.normal};
       &-group {
-        ${a.label.small.normal}
+        ${t.label.small.normal}
         position: relative;
-        padding: ${t.group.paddingTop}px ${t.group.paddingRight}px ${t.group.paddingBottom}px
-          ${t.group.paddingLeft}px;
-        color: ${a.onSurface.surface.default.text.subtle};
+        padding: ${e.group.paddingTop}px ${e.group.paddingRight}px ${e.group.paddingBottom}px
+          ${e.group.paddingLeft}px;
+        color: ${t.onSurface.surface.default.text.subtle};
 
         ::after {
           content: '';
           position: absolute;
           height: 1px;
           bottom: 4px;
-          left: ${t.group.paddingLeft}px;
-          right: ${t.group.paddingRight}px;
-          background-color: ${a.onSurface.surface.default.border.subtle};
+          left: ${e.group.paddingLeft}px;
+          right: ${e.group.paddingRight}px;
+          background-color: ${t.onSurface.surface.default.border.subtle};
         }
       }
 
@@ -199,41 +205,41 @@ const { getWrapperStyles: k, getInputBorderStyles: L, getInputColorStyles: T, ge
       }
 
       &-option {
-        ${a.paragraph.small.normal};
+        ${t.paragraph.small.normal};
         position: relative;
-        padding: ${t.option.paddingTopBottom}px ${t.option.paddingRight}px ${t.option.paddingTopBottom}px
-          ${t.option.paddingLeft}px;
+        padding: ${e.option.paddingTopBottom}px ${e.option.paddingRight}px ${e.option.paddingTopBottom}px
+          ${e.option.paddingLeft}px;
         border-radius: 4px;
-        background: ${a.onSurface.surface.default.background};
-        color: ${e ? a.onSurface.inactive.default.text.subtle : a.onSurface.surface.default.text.strong};
-        cursor: ${e ? "not-allowed" : "pointer"};
-
-        &:hover {
-          background: ${e ? a.onSurface.surface.default.background : a.onSurface.surface.hover.background};
-        }
-
-        &:active,
+        background: ${c(t, d.BackgroundSurface)()};
+        color: ${c(t, d.TextOnSurfaceStrong)(n.Default)};
+        cursor: pointer;
+        
+        /* NOTE: This should have &:hover style but for limitation we have in rc-select, we are implementing &-active instead */
         &-active {
-          background: ${a.onSurface.surface.active.background};
+          background: ${c(t, d.BackgroundSurface)(n.Hover)};
+        
+          &:active {
+            background: ${c(t, d.BackgroundSurface)(n.Active)};
+          }
         }
 
         .${r}-item-option-state {
           display: none;
           position: absolute;
-          right: ${t.icon.right}px;
-          top: ${t.icon.top}px;
+          right: ${e.icon.right}px;
+          top: ${e.icon.top}px;
           pointer-events: none;
         }
 
         &-selected {
-          background: ${a.onSentiment.default.subtle.selected.default.background};
+          background: ${c(t, d.BackgroundSentiment)(n.Default, s.Selected, g.Subtle)};
 
           &:hover {
-            background: ${a.onSentiment.default.subtle.selected.hover.background};
+            background: ${c(t, d.BackgroundSentiment)(n.Hover, s.Selected, g.Subtle)};
           }
 
           &:active {
-            background: ${a.onSentiment.default.subtle.selected.active.background};
+            background: ${c(t, d.BackgroundSentiment)(n.Active, s.Selected, g.Subtle)};
           }
 
           .${r}-item-option-state {
@@ -242,12 +248,12 @@ const { getWrapperStyles: k, getInputBorderStyles: L, getInputColorStyles: T, ge
         }
 
         &-disabled {
-          background: ${a.onSurface.surface.default.background};
-          color: ${a.onSurface.inactive.default.text.subtle};
+          background: ${c(t, d.BackgroundSurface)(n.Default, s.Neutral, g.Subtle, m.Inactive)};
+          color: ${c(t, d.TextOnSurfaceSubtle)(n.Default, s.Neutral, g.Subtle, m.Inactive)};
           cursor: not-allowed;
 
           &:hover {
-            background: ${a.onSurface.surface.default.background};
+            background: ${c(t, d.BackgroundSurface)(n.Default, s.Neutral, g.Subtle, m.Inactive)};
           }
         }
       }
@@ -257,44 +263,44 @@ const { getWrapperStyles: k, getInputBorderStyles: L, getInputColorStyles: T, ge
       }
     }
   `;
-}), j = g.div`
-  ${({ prefixCls: o, size: r, disabled: e, $invalid: a, theme: t }) => {
-  const i = p[r], n = (c) => T(c, e, a);
-  return l`
+}), Z = v.div`
+  ${({ prefixCls: o, size: r, disabled: t, $invalid: e, theme: i }) => {
+  const l = u[r], a = ($) => H($, t, e);
+  return p`
       .${o} {
-        ${I};
+        ${R};
       }
 
       &.${o} {
         display: inline-block;
-        min-height: ${i.default.height}px;
-        cursor: ${e ? "not-allowed" : "pointer"};
-        ${k};
-        ${L(r, !0)};
-        ${B(t, r, e)};
-        ${n()};
+        min-height: ${l.default.height}px;
+        cursor: ${t ? "not-allowed" : "pointer"};
+        ${I};
+        ${z(r, !0)};
+        ${O(i, r, t)};
+        ${a()};
 
-        ${D};
-        ${z};
+        ${_};
+        ${E};
 
         &:hover {
-          border-color: ${e ? n().borderColor : n(d.Hover).borderColor};
-          color: ${e ? n().color : n(d.Hover).color};
+          border-color: ${t ? a().borderColor : a(n.Hover).borderColor};
+          color: ${t ? a().color : a(n.Hover).color};
 
           .${o}-clear button {
-            background-color: ${n(d.Hover).backgroundColor};
+            background-color: ${a(n.Hover).backgroundColor};
           }
         }
 
-        ${a && l`
+        ${e && p`
           &,
           &:hover {
-            ${v(t, e)};
+            ${B(i, t)};
           }
         `}
 
-        &-focused {
-          ${$(t)};
+        &-focused:has(*:focus-visible) {
+          ${S(i)};
         }
 
         .${o}-selector {
@@ -306,19 +312,19 @@ const { getWrapperStyles: k, getInputBorderStyles: L, getInputColorStyles: T, ge
           border-radius: 6px;
 
           &:hover {
-            background-color: ${e ? n().backgroundColor : n(d.Hover).backgroundColor};
+            background-color: ${t ? a().backgroundColor : a(n.Hover).backgroundColor};
           }
         }
 
         .${o}-selection-placeholder {
-          ${w(t, e)};
+          ${L(i, t)};
         }
 
         .${o}-clear {
           position: absolute;
 
           /* 28px is the size of the chevronDown button (24px) plus the 4px gap */
-          right: calc( ${i.icon.right}px + 28px);
+          right: calc( ${l.icon.right}px + 28px);
           top: 50%;
           display: flex;
           transform: translateY(-50%);
@@ -331,14 +337,14 @@ const { getWrapperStyles: k, getInputBorderStyles: L, getInputColorStyles: T, ge
             min-height: auto;
             height: 24px;
             width: 24px;
-            color: ${t.onSurface.surface.default.text.strong};
+            color: ${i.onSurface.surface.default.text.strong};
             padding: 0;
             border: none;
-            background-color: ${n().backgroundColor};
-            cursor: ${e ? "not-allowed" : "pointer"};
+            background-color: ${a().backgroundColor};
+            cursor: ${t ? "not-allowed" : "pointer"};
 
             &:hover {
-              background-color: ${n().backgroundColor};
+              background-color: ${a().backgroundColor};
             }
           }
         }
@@ -349,28 +355,28 @@ const { getWrapperStyles: k, getInputBorderStyles: L, getInputColorStyles: T, ge
           }
 
           .${o}-arrow {
-            color: ${t.onSurface.surface.default.text.subtle};
+            color: ${i.onSurface.surface.default.text.subtle};
             position: absolute;
-            right: ${i.icon.right}px;
+            right: ${l.icon.right}px;
             top: 50%;
             display: flex;
             gap: 8px;
             height: 24px;
             transform: translateY(-50%);
-            cursor: ${e ? "not-allowed" : "pointer"};
+            cursor: ${t ? "not-allowed" : "pointer"};
             pointer-events: none;
 
             &-loading {
               &::before {
                 content: '';
                 display: inline-block;
-                width: ${p[r].default.loading}px;
-                height: ${p[r].default.loading}px;
-                margin-top: ${p[r].default.loadingMargin}px;
+                width: ${u[r].default.loading}px;
+                height: ${u[r].default.loading}px;
+                margin-top: ${u[r].default.loadingMargin}px;
                 border-radius: 100%;
-                border: 2px solid ${t.onSurface.surface.default.border.subtle};
-                border-top-color: ${t.onSurface.surface.default.border.strong};
-                animation: ${f} 0.8s linear infinite;
+                border: 2px solid ${i.onSurface.surface.default.border.subtle};
+                border-top-color: ${i.onSurface.surface.default.border.strong};
+                animation: ${w} 0.8s linear infinite;
                 box-sizing: border-box;
               }
             }
@@ -379,10 +385,10 @@ const { getWrapperStyles: k, getInputBorderStyles: L, getInputColorStyles: T, ge
 
         /* ============== Dropdown =============== */
         &-dropdown {
-          z-index: ${u.SELECT};
+          z-index: ${f.SELECT};
           position: absolute;
           border: none;
-          background-color: ${t.onSurface.surface.default.background};
+          background-color: ${i.onSurface.surface.default.background};
         }
 
         &-dropdown > div,
@@ -391,7 +397,7 @@ const { getWrapperStyles: k, getInputBorderStyles: L, getInputColorStyles: T, ge
           padding: 8px;
           margin-top: 2px;
           border-radius: 6px;
-          ${S(t)};
+          ${D(i)};
         }
 
         &-dropdown-hidden,
@@ -440,14 +446,14 @@ const { getWrapperStyles: k, getInputBorderStyles: L, getInputColorStyles: T, ge
 
         &-slide-up-enter.${o}-slide-up-enter-active, &-slide-up-appear.${o}-slide-up-appear-active {
           &.${o}-placement-bottomLeft {
-            animation-name: ${b};
+            animation-name: ${x};
             animation-play-state: running;
           }
         }
 
         &-slide-up-leave.${o}-slide-up-leave-active {
           &.${o}-placement-bottomLeft {
-            animation-name: ${m};
+            animation-name: ${y};
             animation-play-state: running;
           }
         }
@@ -470,6 +476,6 @@ const { getWrapperStyles: k, getInputBorderStyles: L, getInputColorStyles: T, ge
 }}
 `;
 export {
-  j as Select
+  Z as Select
 };
 //# sourceMappingURL=Select.styles.js.map

package/build/esm/components/Select/Select.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.js","sources":["../../../../src/components/Select/Select.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\r\nimport {\r\n  ZIndexes,\r\n  InputUtils,\r\n  getPlaceholderFontStyles,\r\n  Transient,\r\n  getLabelFontStyles,\r\n  SelectConsts,\r\n  TooltipUtils,\r\n  Sizes,\r\n} from 'acinguiux-ds-react-base';\r\nimport { StateType, States } from 'acinguiux-ds-fabrics';\r\n\r\nimport { rotate, getFocusStyles } from '../../utils/styleUtils';\r\nimport { rcSelectDropdownSlideUpIn, rcSelectDropdownSlideUpOut } from './utils/styleUtils';\r\nimport { ISelectProps } from './Select.types';\r\nimport { getSelectedOptionTagStyles } from './utils/selectedOptionTagStyleUtils';\r\n\r\ntype SelectProps = Required<Pick<ISelectProps, 'size' | 'prefixCls' | 'disabled'>> &\r\n  Transient<Pick<ISelectProps, 'emphasis'>, 'emphasis'>;\r\n\r\nconst { getWrapperStyles, getInputBorderStyles, getInputColorStyles, getBaseElementStyles } = InputUtils;\r\n\r\nconst baseSearchInput = css<SelectProps>(\r\n  ({ theme }) => css`\r\n    ${theme.paragraph.small.normal};\r\n    color: ${theme.onSurface.surface.default.text.strong};\r\n    border: none;\r\n    outline: none;\r\n    background: transparent;\r\n    width: 100%;\r\n    margin: 0;\r\n\r\n    &::-webkit-search-decoration,\r\n    &::-webkit-search-cancel-button,\r\n    &::-webkit-search-results-button,\r\n    &::-webkit-search-results-decoration {\r\n      display: none;\r\n    }\r\n  `,\r\n);\r\n\r\nconst Multiple = css<SelectProps>`\r\n  ${({ prefixCls, size, disabled, $emphasis, theme }) => {\r\n    const sizes = SelectConsts.consts[size];\r\n    const getStyles = (state: StateType = States.Default) => getSelectedOptionTagStyles(state, disabled, $emphasis);\r\n\r\n    return css`\r\n      &-multiple .${prefixCls}-selector {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        padding: ${sizes.multi.padding};\r\n\r\n        .${prefixCls}-selection-overflow {\r\n          position: relative;\r\n          display: flex;\r\n          flex-wrap: wrap;\r\n          gap: 6px;\r\n          width: 100%;\r\n\r\n          &-item {\r\n            flex: none;\r\n            max-width: 100%;\r\n            align-self: center;\r\n          }\r\n        }\r\n\r\n        .${prefixCls}-selection-item {\r\n          ${size === Sizes.XSmall ? theme.label.small.normal : theme.label.medium.normal};\r\n\r\n          display: flex;\r\n          align-items: center;\r\n          gap: ${sizes.tag.gap}px;\r\n          padding: ${sizes.tag.paddingTopBottom}px ${sizes.tag.paddingRight}px ${sizes.tag.paddingTopBottom}px\r\n            ${sizes.tag.paddingLeft}px;\r\n          border-radius: 4px;\r\n          ${getStyles()};\r\n\r\n          &:hover {\r\n            ${getStyles(States.Hover)};\r\n\r\n            ${disabled &&\r\n      css`\r\n              background-color: ${getStyles().backgroundColor};\r\n              color: ${getStyles().color};\r\n            `}\r\n          }\r\n\r\n          &:active {\r\n            ${getStyles(States.Active)};\r\n          }\r\n\r\n          &:first-child {\r\n            margin-left: 0;\r\n          }\r\n\r\n          &-content {\r\n            text-overflow: ellipsis;\r\n            overflow: hidden;\r\n          }\r\n\r\n          &-remove {\r\n            display: flex;\r\n            cursor: pointer;\r\n          }\r\n\r\n          &-disabled {\r\n            cursor: not-allowed;\r\n          }\r\n        }\r\n\r\n        .${prefixCls}-selection-placeholder {\r\n          position: absolute;\r\n          top: 50%;\r\n          transform: translateY(-50%);\r\n          margin-left: ${sizes.tag.paddingLeft}px;\r\n        }\r\n\r\n        .${prefixCls}-selection-search {\r\n          position: relative;\r\n          max-width: 100%;\r\n\r\n          &-input,\r\n          &-mirror {\r\n            padding: 0;\r\n            font-family: system-ui;\r\n          }\r\n\r\n          &-mirror {\r\n            z-index: ${ZIndexes.SELECT};\r\n            white-space: nowrap;\r\n            position: absolute;\r\n            left: 10px;\r\n            top: 0;\r\n            visibility: hidden;\r\n          }\r\n        }\r\n\r\n        .${prefixCls}-selection-search-input {\r\n          ${baseSearchInput};\r\n          cursor: pointer;\r\n        }\r\n      }\r\n    `;\r\n  }}\r\n`;\r\n\r\nconst Single = css<SelectProps>(({ prefixCls, size }) => {\r\n  const sizes = SelectConsts.consts[size];\r\n\r\n  return css`\r\n    &-single .${prefixCls}-selector {\r\n      display: flex;\r\n      position: relative;\r\n      padding: ${sizes.default.paddingTopBottom}px ${sizes.default.paddingRight}px ${sizes.default.paddingTopBottom}px\r\n        ${sizes.default.paddingLeft}px;\r\n\r\n      .${prefixCls}-selection-search-input {\r\n        ${baseSearchInput};\r\n        cursor: pointer;\r\n\r\n        &:disabled {\r\n          cursor: not-allowed;\r\n        }\r\n      }\r\n\r\n      .${prefixCls}-selection-search {\r\n        width: 100%;\r\n\r\n        &-input {\r\n          width: 100%;\r\n        }\r\n      }\r\n\r\n      .${prefixCls}-selection-item, .${prefixCls}-selection-placeholder {\r\n        position: absolute;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n      }\r\n\r\n      .${prefixCls}-selection-placeholder {\r\n        width: 100%;\r\n      }\r\n\r\n      .${prefixCls}-selection-item {\r\n        display: inline-block;\r\n        width: calc(100% - (${sizes.default.paddingLeft}px + ${sizes.default.paddingRight}px));\r\n        white-space: nowrap;\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n      }\r\n    }\r\n  `;\r\n});\r\n\r\nconst Option = css<SelectProps>(({ size, prefixCls, disabled, theme }) => {\r\n  const sizes = SelectConsts.consts[size];\r\n\r\n  return css`\r\n    &-item {\r\n      ${theme.paragraph.small.normal};\r\n      &-group {\r\n        ${theme.label.small.normal}\r\n        position: relative;\r\n        padding: ${sizes.group.paddingTop}px ${sizes.group.paddingRight}px ${sizes.group.paddingBottom}px\r\n          ${sizes.group.paddingLeft}px;\r\n        color: ${theme.onSurface.surface.default.text.subtle};\r\n\r\n        ::after {\r\n          content: '';\r\n          position: absolute;\r\n          height: 1px;\r\n          bottom: 4px;\r\n          left: ${sizes.group.paddingLeft}px;\r\n          right: ${sizes.group.paddingRight}px;\r\n          background-color: ${theme.onSurface.surface.default.border.subtle};\r\n        }\r\n      }\r\n\r\n      &-option-content {\r\n        text-overflow: ellipsis;\r\n        overflow: hidden;\r\n      }\r\n\r\n      &-option {\r\n        ${theme.paragraph.small.normal};\r\n        position: relative;\r\n        padding: ${sizes.option.paddingTopBottom}px ${sizes.option.paddingRight}px ${sizes.option.paddingTopBottom}px\r\n          ${sizes.option.paddingLeft}px;\r\n        border-radius: 4px;\r\n        background: ${theme.onSurface.surface.default.background};\r\n        color: ${disabled ? theme.onSurface.inactive.default.text.subtle : theme.onSurface.surface.default.text.strong};\r\n        cursor: ${disabled ? 'not-allowed' : 'pointer'};\r\n\r\n        &:hover {\r\n          background: ${disabled\r\n      ? theme.onSurface.surface.default.background\r\n      : theme.onSurface.surface.hover.background};\r\n        }\r\n\r\n        &:active,\r\n        &-active {\r\n          background: ${theme.onSurface.surface.active.background};\r\n        }\r\n\r\n        .${prefixCls}-item-option-state {\r\n          display: none;\r\n          position: absolute;\r\n          right: ${sizes.icon.right}px;\r\n          top: ${sizes.icon.top}px;\r\n          pointer-events: none;\r\n        }\r\n\r\n        &-selected {\r\n          background: ${theme.onSentiment.default.subtle.selected.default.background};\r\n\r\n          &:hover {\r\n            background: ${theme.onSentiment.default.subtle.selected.hover.background};\r\n          }\r\n\r\n          &:active {\r\n            background: ${theme.onSentiment.default.subtle.selected.active.background};\r\n          }\r\n\r\n          .${prefixCls}-item-option-state {\r\n            display: inline;\r\n          }\r\n        }\r\n\r\n        &-disabled {\r\n          background: ${theme.onSurface.surface.default.background};\r\n          color: ${theme.onSurface.inactive.default.text.subtle};\r\n          cursor: not-allowed;\r\n\r\n          &:hover {\r\n            background: ${theme.onSurface.surface.default.background};\r\n          }\r\n        }\r\n      }\r\n\r\n      &-empty {\r\n        text-align: center;\r\n      }\r\n    }\r\n  `;\r\n});\r\n\r\nconst Select = styled.div<SelectProps & Transient<Pick<ISelectProps, 'invalid' | 'emphasis'>, 'invalid' | 'emphasis'>>`\r\n  ${({ prefixCls, size, disabled, $invalid, theme }) => {\r\n    const sizes = SelectConsts.consts[size];\r\n    const getStyles = (state?: StateType) => getInputColorStyles(state, disabled, $invalid);\r\n\r\n    return css`\r\n      .${prefixCls} {\r\n        ${Option};\r\n      }\r\n\r\n      &.${prefixCls} {\r\n        display: inline-block;\r\n        min-height: ${sizes.default.height}px;\r\n        cursor: ${disabled ? 'not-allowed' : 'pointer'};\r\n        ${getWrapperStyles};\r\n        ${getInputBorderStyles(size, true)};\r\n        ${getBaseElementStyles(theme, size, disabled)};\r\n        ${getStyles()};\r\n\r\n        ${Multiple};\r\n        ${Single};\r\n\r\n        &:hover {\r\n          border-color: ${disabled ? getStyles().borderColor : getStyles(States.Hover).borderColor};\r\n          color: ${disabled ? getStyles().color : getStyles(States.Hover).color};\r\n\r\n          .${prefixCls}-clear button {\r\n            background-color: ${getStyles(States.Hover).backgroundColor};\r\n          }\r\n        }\r\n\r\n        ${$invalid &&\r\n      css`\r\n          &,\r\n          &:hover {\r\n            ${getLabelFontStyles(theme, disabled)};\r\n          }\r\n        `}\r\n\r\n        &-focused {\r\n          ${getFocusStyles(theme)};\r\n        }\r\n\r\n        .${prefixCls}-selector {\r\n          position: relative;\r\n          display: flex;\r\n          align-items: center;\r\n          width: 100%;\r\n          height: 100%;\r\n          border-radius: 6px;\r\n\r\n          &:hover {\r\n            background-color: ${disabled ? getStyles().backgroundColor : getStyles(States.Hover).backgroundColor};\r\n          }\r\n        }\r\n\r\n        .${prefixCls}-selection-placeholder {\r\n          ${getPlaceholderFontStyles(theme, disabled)};\r\n        }\r\n\r\n        .${prefixCls}-clear {\r\n          position: absolute;\r\n\r\n          /* 28px is the size of the chevronDown button (24px) plus the 4px gap */\r\n          right: calc( ${sizes.icon.right}px + 28px);\r\n          top: 50%;\r\n          display: flex;\r\n          transform: translateY(-50%);\r\n          border-radius: 4px;\r\n\r\n          button {\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            min-height: auto;\r\n            height: 24px;\r\n            width: 24px;\r\n            color: ${theme.onSurface.surface.default.text.strong};\r\n            padding: 0;\r\n            border: none;\r\n            background-color: ${getStyles().backgroundColor};\r\n            cursor: ${disabled ? 'not-allowed' : 'pointer'};\r\n\r\n            &:hover {\r\n              background-color: ${getStyles().backgroundColor};\r\n            }\r\n          }\r\n        }\r\n\r\n        &-show-arrow {\r\n          &.${prefixCls}-multiple .${prefixCls}-selector {\r\n            padding-right: 28px;\r\n          }\r\n\r\n          .${prefixCls}-arrow {\r\n            color: ${theme.onSurface.surface.default.text.subtle};\r\n            position: absolute;\r\n            right: ${sizes.icon.right}px;\r\n            top: 50%;\r\n            display: flex;\r\n            gap: 8px;\r\n            height: 24px;\r\n            transform: translateY(-50%);\r\n            cursor: ${disabled ? 'not-allowed' : 'pointer'};\r\n            pointer-events: none;\r\n\r\n            &-loading {\r\n              &::before {\r\n                content: '';\r\n                display: inline-block;\r\n                width: ${SelectConsts.consts[size].default.loading}px;\r\n                height: ${SelectConsts.consts[size].default.loading}px;\r\n                margin-top: ${SelectConsts.consts[size].default.loadingMargin}px;\r\n                border-radius: 100%;\r\n                border: 2px solid ${theme.onSurface.surface.default.border.subtle};\r\n                border-top-color: ${theme.onSurface.surface.default.border.strong};\r\n                animation: ${rotate} 0.8s linear infinite;\r\n                box-sizing: border-box;\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        /* ============== Dropdown =============== */\r\n        &-dropdown {\r\n          z-index: ${ZIndexes.SELECT};\r\n          position: absolute;\r\n          border: none;\r\n          background-color: ${theme.onSurface.surface.default.background};\r\n        }\r\n\r\n        &-dropdown > div,\r\n        &-dropdown:hover > div {\r\n          width: 100%;\r\n          padding: 8px;\r\n          margin-top: 2px;\r\n          border-radius: 6px;\r\n          ${TooltipUtils.useStyles(theme)};\r\n        }\r\n\r\n        &-dropdown-hidden,\r\n        &-dropdown-hidden:hover {\r\n          display: none;\r\n        }\r\n      }\r\n\r\n      .${prefixCls}-selection__choice-zoom {\r\n        transition: all 0.3s;\r\n      }\r\n\r\n      .${prefixCls}-selection__choice-zoom-appear {\r\n        opacity: 0;\r\n        transform: scale(0.5);\r\n\r\n        &&-active {\r\n          opacity: 1;\r\n          transform: scale(1);\r\n        }\r\n      }\r\n\r\n      .${prefixCls}-selection__choice-zoom-leave {\r\n        opacity: 1;\r\n        transform: scale(1);\r\n\r\n        &&-active {\r\n          opacity: 0;\r\n          transform: scale(0.5);\r\n        }\r\n      }\r\n\r\n      .${prefixCls}-dropdown {\r\n        &-slide-up-enter,\r\n        &-slide-up-appear {\r\n          opacity: 0;\r\n          animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);\r\n          animation-play-state: paused;\r\n        }\r\n\r\n        &-slide-up-leave {\r\n          opacity: 1;\r\n          animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);\r\n          animation-play-state: paused;\r\n        }\r\n\r\n        &-slide-up-enter.${prefixCls}-slide-up-enter-active, &-slide-up-appear.${prefixCls}-slide-up-appear-active {\r\n          &.${prefixCls}-placement-bottomLeft {\r\n            animation-name: ${rcSelectDropdownSlideUpIn};\r\n            animation-play-state: running;\r\n          }\r\n        }\r\n\r\n        &-slide-up-leave.${prefixCls}-slide-up-leave-active {\r\n          &.${prefixCls}-placement-bottomLeft {\r\n            animation-name: ${rcSelectDropdownSlideUpOut};\r\n            animation-play-state: running;\r\n          }\r\n        }\r\n\r\n        &-slide-up-enter.${prefixCls}-slide-up-enter-active, &-slide-up-appear.${prefixCls}-slide-up-appear-active {\r\n          &.${prefixCls}-placement-topLeft {\r\n            animation-name: rcSelectDropdownSlideDownIn;\r\n            animation-play-state: running;\r\n          }\r\n        }\r\n\r\n        &-slide-up-leave.${prefixCls}-slide-up-leave-active {\r\n          &.${prefixCls}-placement-topLeft {\r\n            animation-name: rcSelectDropdownSlideDownOut;\r\n            animation-play-state: running;\r\n          }\r\n        }\r\n      }\r\n    `;\r\n  }}\r\n`;\r\n\r\nexport { Select };\r\n"],"names":["getWrapperStyles","getInputBorderStyles","getInputColorStyles","getBaseElementStyles","InputUtils","baseSearchInput","css","theme","Multiple","prefixCls","size","disabled","$emphasis","sizes","SelectConsts.consts","getStyles","state","States","getSelectedOptionTagStyles","Sizes","ZIndexes","Single","Option","Select","styled","$invalid","getLabelFontStyles","getFocusStyles","getPlaceholderFontStyles","rotate","TooltipUtils.useStyles","rcSelectDropdownSlideUpIn","rcSelectDropdownSlideUpOut"],"mappings":"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"}
+{"version":3,"file":"Select.styles.js","sources":["../../../../src/components/Select/Select.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n  ZIndexes,\n  InputUtils,\n  getPlaceholderFontStyles,\n  Transient,\n  getLabelFontStyles,\n  SelectConsts,\n  TooltipUtils,\n  Sizes,\n  LayerColor,\n} from 'acinguiux-ds-react-base';\nimport { StateType, States, Surfaces, Sentiments, Prominences } from 'acinguiux-ds-fabrics';\n\nimport { rotate, getFocusStyles } from '../../utils/styleUtils';\nimport { rcSelectDropdownSlideUpIn, rcSelectDropdownSlideUpOut } from './utils/styleUtils';\nimport { ISelectProps } from './Select.types';\nimport { getSelectedOptionTagStyles } from './utils/selectedOptionTagStyleUtils';\n\ntype SelectProps = Required<Pick<ISelectProps, 'size' | 'prefixCls' | 'disabled'>> &\n  Transient<Pick<ISelectProps, 'emphasis'>, 'emphasis'>;\n\nconst { getWrapperStyles, getInputBorderStyles, getInputColorStyles, getBaseElementStyles, getFabricLayerColor } = InputUtils;\n\nconst baseSearchInput = css<SelectProps>(\n  ({ theme }) => css`\n    ${theme.paragraph.small.normal};\n    color: ${theme.onSurface.surface.default.text.strong};\n    border: none;\n    outline: none;\n    background: transparent;\n    width: 100%;\n    margin: 0;\n\n    &::-webkit-search-decoration,\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-results-button,\n    &::-webkit-search-results-decoration {\n      display: none;\n    }\n  `,\n);\n\nconst Multiple = css<SelectProps>`\n  ${({ prefixCls, size, disabled, $emphasis, theme }) => {\n    const sizes = SelectConsts.consts[size];\n    const getStyles = (state: StateType = States.Default) => getSelectedOptionTagStyles(state, disabled, $emphasis);\n\n    return css`\n      &-multiple .${prefixCls}-selector {\n        display: flex;\n        flex-wrap: wrap;\n        padding: ${sizes.multi.padding};\n\n        .${prefixCls}-selection-overflow {\n          position: relative;\n          display: flex;\n          flex-wrap: wrap;\n          gap: 6px;\n          width: 100%;\n          white-space: nowrap;\n\n          &-item {\n            flex: none;\n            max-width: 100%;\n            align-self: center;\n          }\n\n          .${prefixCls}-selection-search-input {\n            margin-left: ${size === Sizes.Large ? '8px' : '6px'};\n          }\n        }\n\n        .${prefixCls}-selection-item {\n          ${size === Sizes.XSmall ? theme.label.small.normal : theme.label.medium.normal};\n\n          display: flex;\n          align-items: center;\n          gap: ${sizes.tag.gap}px;\n          padding: ${sizes.tag.paddingTopBottom}px ${sizes.tag.paddingRight}px ${sizes.tag.paddingTopBottom}px\n            ${sizes.tag.paddingLeft}px;\n          border-radius: 4px;\n          ${getStyles()};\n\n          &:hover {\n            ${getStyles(States.Hover)};\n\n            ${disabled &&\n      css`\n              background-color: ${getStyles().backgroundColor};\n              color: ${getStyles().color};\n            `}\n          }\n\n          &:active {\n            ${getStyles(States.Active)};\n          }\n\n          &:first-child {\n            margin-left: 0;\n          }\n\n          &-content {\n            text-overflow: ellipsis;\n            overflow: hidden;\n          }\n\n          &-remove {\n            display: flex;\n            cursor: pointer;\n          }\n\n          &-disabled {\n            cursor: not-allowed;\n          }\n        }\n\n        .${prefixCls}-selection-placeholder {\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          margin-left: ${sizes.tag.paddingLeft}px;\n        }\n\n        .${prefixCls}-selection-search {\n          position: relative;\n          max-width: 100%;\n\n          &-input,\n          &-mirror {\n            padding: 0;\n            font-family: system-ui;\n          }\n\n          &-mirror {\n            z-index: ${ZIndexes.SELECT};\n            white-space: nowrap;\n            position: absolute;\n            left: 10px;\n            top: 0;\n            visibility: hidden;\n          }\n        }\n\n        .${prefixCls}-selection-search-input {\n          ${baseSearchInput};\n          cursor: pointer;\n        }\n      }\n    `;\n  }}\n`;\n\nconst Single = css<SelectProps>(({ prefixCls, size }) => {\n  const sizes = SelectConsts.consts[size];\n\n  return css`\n    &-single .${prefixCls}-selector {\n      display: flex;\n      position: relative;\n      padding: ${sizes.default.paddingTopBottom}px ${sizes.default.paddingRight}px ${sizes.default.paddingTopBottom}px\n        ${sizes.default.paddingLeft}px;\n\n      .${prefixCls}-selection-search-input {\n        ${baseSearchInput};\n        cursor: pointer;\n\n        &:disabled {\n          cursor: not-allowed;\n        }\n      }\n\n      .${prefixCls}-selection-search {\n        width: 100%;\n\n        &-input {\n          width: 100%;\n        }\n      }\n\n      .${prefixCls}-selection-item, .${prefixCls}-selection-placeholder {\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n      }\n\n      .${prefixCls}-selection-placeholder {\n        width: 100%;\n      }\n\n      .${prefixCls}-selection-item {\n        display: inline-block;\n        width: calc(100% - (${sizes.default.paddingLeft}px + ${sizes.default.paddingRight}px));\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    }\n  `;\n});\n\nconst Option = css<SelectProps>(({ size, prefixCls, theme }) => {\n  const sizes = SelectConsts.consts[size];\n\n  return css`\n    &-item {\n      ${theme.paragraph.small.normal};\n      &-group {\n        ${theme.label.small.normal}\n        position: relative;\n        padding: ${sizes.group.paddingTop}px ${sizes.group.paddingRight}px ${sizes.group.paddingBottom}px\n          ${sizes.group.paddingLeft}px;\n        color: ${theme.onSurface.surface.default.text.subtle};\n\n        ::after {\n          content: '';\n          position: absolute;\n          height: 1px;\n          bottom: 4px;\n          left: ${sizes.group.paddingLeft}px;\n          right: ${sizes.group.paddingRight}px;\n          background-color: ${theme.onSurface.surface.default.border.subtle};\n        }\n      }\n\n      &-option-content {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n\n      &-option {\n        ${theme.paragraph.small.normal};\n        position: relative;\n        padding: ${sizes.option.paddingTopBottom}px ${sizes.option.paddingRight}px ${sizes.option.paddingTopBottom}px\n          ${sizes.option.paddingLeft}px;\n        border-radius: 4px;\n        background: ${getFabricLayerColor(theme, LayerColor.BackgroundSurface)()};\n        color: ${getFabricLayerColor(theme, LayerColor.TextOnSurfaceStrong)(States.Default)};\n        cursor: pointer;\n        \n        /* NOTE: This should have &:hover style but for limitation we have in rc-select, we are implementing &-active instead */\n        &-active {\n          background: ${getFabricLayerColor(theme, LayerColor.BackgroundSurface)(States.Hover)};\n        \n          &:active {\n            background: ${getFabricLayerColor(theme, LayerColor.BackgroundSurface)(States.Active)};\n          }\n        }\n\n        .${prefixCls}-item-option-state {\n          display: none;\n          position: absolute;\n          right: ${sizes.icon.right}px;\n          top: ${sizes.icon.top}px;\n          pointer-events: none;\n        }\n\n        &-selected {\n          background: ${getFabricLayerColor(theme, LayerColor.BackgroundSentiment)(States.Default, Sentiments.Selected, Prominences.Subtle)};\n\n          &:hover {\n            background: ${getFabricLayerColor(theme, LayerColor.BackgroundSentiment)(States.Hover, Sentiments.Selected, Prominences.Subtle)};\n          }\n\n          &:active {\n            background: ${getFabricLayerColor(theme, LayerColor.BackgroundSentiment)(States.Active, Sentiments.Selected, Prominences.Subtle)};\n          }\n\n          .${prefixCls}-item-option-state {\n            display: inline;\n          }\n        }\n\n        &-disabled {\n          background: ${getFabricLayerColor(theme, LayerColor.BackgroundSurface)(States.Default, Sentiments.Neutral, Prominences.Subtle, Surfaces.Inactive)};\n          color: ${getFabricLayerColor(theme, LayerColor.TextOnSurfaceSubtle)(States.Default, Sentiments.Neutral, Prominences.Subtle, Surfaces.Inactive)};\n          cursor: not-allowed;\n\n          &:hover {\n            background: ${getFabricLayerColor(theme, LayerColor.BackgroundSurface)(States.Default, Sentiments.Neutral, Prominences.Subtle, Surfaces.Inactive)};\n          }\n        }\n      }\n\n      &-empty {\n        text-align: center;\n      }\n    }\n  `;\n});\n\nconst Select = styled.div<SelectProps & Transient<Pick<ISelectProps, 'invalid' | 'emphasis'>, 'invalid' | 'emphasis'>>`\n  ${({ prefixCls, size, disabled, $invalid, theme }) => {\n    const sizes = SelectConsts.consts[size];\n    const getStyles = (state?: StateType) => getInputColorStyles(state, disabled, $invalid);\n\n    return css`\n      .${prefixCls} {\n        ${Option};\n      }\n\n      &.${prefixCls} {\n        display: inline-block;\n        min-height: ${sizes.default.height}px;\n        cursor: ${disabled ? 'not-allowed' : 'pointer'};\n        ${getWrapperStyles};\n        ${getInputBorderStyles(size, true)};\n        ${getBaseElementStyles(theme, size, disabled)};\n        ${getStyles()};\n\n        ${Multiple};\n        ${Single};\n\n        &:hover {\n          border-color: ${disabled ? getStyles().borderColor : getStyles(States.Hover).borderColor};\n          color: ${disabled ? getStyles().color : getStyles(States.Hover).color};\n\n          .${prefixCls}-clear button {\n            background-color: ${getStyles(States.Hover).backgroundColor};\n          }\n        }\n\n        ${$invalid &&\n      css`\n          &,\n          &:hover {\n            ${getLabelFontStyles(theme, disabled)};\n          }\n        `}\n\n        &-focused:has(*:focus-visible) {\n          ${getFocusStyles(theme)};\n        }\n\n        .${prefixCls}-selector {\n          position: relative;\n          display: flex;\n          align-items: center;\n          width: 100%;\n          height: 100%;\n          border-radius: 6px;\n\n          &:hover {\n            background-color: ${disabled ? getStyles().backgroundColor : getStyles(States.Hover).backgroundColor};\n          }\n        }\n\n        .${prefixCls}-selection-placeholder {\n          ${getPlaceholderFontStyles(theme, disabled)};\n        }\n\n        .${prefixCls}-clear {\n          position: absolute;\n\n          /* 28px is the size of the chevronDown button (24px) plus the 4px gap */\n          right: calc( ${sizes.icon.right}px + 28px);\n          top: 50%;\n          display: flex;\n          transform: translateY(-50%);\n          border-radius: 4px;\n\n          button {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: auto;\n            height: 24px;\n            width: 24px;\n            color: ${theme.onSurface.surface.default.text.strong};\n            padding: 0;\n            border: none;\n            background-color: ${getStyles().backgroundColor};\n            cursor: ${disabled ? 'not-allowed' : 'pointer'};\n\n            &:hover {\n              background-color: ${getStyles().backgroundColor};\n            }\n          }\n        }\n\n        &-show-arrow {\n          &.${prefixCls}-multiple .${prefixCls}-selector {\n            padding-right: 28px;\n          }\n\n          .${prefixCls}-arrow {\n            color: ${theme.onSurface.surface.default.text.subtle};\n            position: absolute;\n            right: ${sizes.icon.right}px;\n            top: 50%;\n            display: flex;\n            gap: 8px;\n            height: 24px;\n            transform: translateY(-50%);\n            cursor: ${disabled ? 'not-allowed' : 'pointer'};\n            pointer-events: none;\n\n            &-loading {\n              &::before {\n                content: '';\n                display: inline-block;\n                width: ${SelectConsts.consts[size].default.loading}px;\n                height: ${SelectConsts.consts[size].default.loading}px;\n                margin-top: ${SelectConsts.consts[size].default.loadingMargin}px;\n                border-radius: 100%;\n                border: 2px solid ${theme.onSurface.surface.default.border.subtle};\n                border-top-color: ${theme.onSurface.surface.default.border.strong};\n                animation: ${rotate} 0.8s linear infinite;\n                box-sizing: border-box;\n              }\n            }\n          }\n        }\n\n        /* ============== Dropdown =============== */\n        &-dropdown {\n          z-index: ${ZIndexes.SELECT};\n          position: absolute;\n          border: none;\n          background-color: ${theme.onSurface.surface.default.background};\n        }\n\n        &-dropdown > div,\n        &-dropdown:hover > div {\n          width: 100%;\n          padding: 8px;\n          margin-top: 2px;\n          border-radius: 6px;\n          ${TooltipUtils.useStyles(theme)};\n        }\n\n        &-dropdown-hidden,\n        &-dropdown-hidden:hover {\n          display: none;\n        }\n      }\n\n      .${prefixCls}-selection__choice-zoom {\n        transition: all 0.3s;\n      }\n\n      .${prefixCls}-selection__choice-zoom-appear {\n        opacity: 0;\n        transform: scale(0.5);\n\n        &&-active {\n          opacity: 1;\n          transform: scale(1);\n        }\n      }\n\n      .${prefixCls}-selection__choice-zoom-leave {\n        opacity: 1;\n        transform: scale(1);\n\n        &&-active {\n          opacity: 0;\n          transform: scale(0.5);\n        }\n      }\n\n      .${prefixCls}-dropdown {\n        &-slide-up-enter,\n        &-slide-up-appear {\n          opacity: 0;\n          animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);\n          animation-play-state: paused;\n        }\n\n        &-slide-up-leave {\n          opacity: 1;\n          animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);\n          animation-play-state: paused;\n        }\n\n        &-slide-up-enter.${prefixCls}-slide-up-enter-active, &-slide-up-appear.${prefixCls}-slide-up-appear-active {\n          &.${prefixCls}-placement-bottomLeft {\n            animation-name: ${rcSelectDropdownSlideUpIn};\n            animation-play-state: running;\n          }\n        }\n\n        &-slide-up-leave.${prefixCls}-slide-up-leave-active {\n          &.${prefixCls}-placement-bottomLeft {\n            animation-name: ${rcSelectDropdownSlideUpOut};\n            animation-play-state: running;\n          }\n        }\n\n        &-slide-up-enter.${prefixCls}-slide-up-enter-active, &-slide-up-appear.${prefixCls}-slide-up-appear-active {\n          &.${prefixCls}-placement-topLeft {\n            animation-name: rcSelectDropdownSlideDownIn;\n            animation-play-state: running;\n          }\n        }\n\n        &-slide-up-leave.${prefixCls}-slide-up-leave-active {\n          &.${prefixCls}-placement-topLeft {\n            animation-name: rcSelectDropdownSlideDownOut;\n            animation-play-state: running;\n          }\n        }\n      }\n    `;\n  }}\n`;\n\nexport { Select };\n"],"names":["getWrapperStyles","getInputBorderStyles","getInputColorStyles","getBaseElementStyles","getFabricLayerColor","InputUtils","baseSearchInput","css","theme","Multiple","prefixCls","size","disabled","$emphasis","sizes","SelectConsts.consts","getStyles","state","States","getSelectedOptionTagStyles","Sizes","ZIndexes","Single","Option","LayerColor","Sentiments","Prominences","Surfaces","Select","styled","$invalid","getLabelFontStyles","getFocusStyles","getPlaceholderFontStyles","rotate","TooltipUtils.useStyles","rcSelectDropdownSlideUpIn","rcSelectDropdownSlideUpOut"],"mappings":"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"}

package/build/esm/components/Select/components/ClearButton/ClearButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClearButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Select/components/ClearButton/ClearButton.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,WAAW,+CAwBhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ClearButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Select/components/ClearButton/ClearButton.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,WAAW,+CA6BhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/build/esm/components/Select/components/ClearButton/ClearButton.js

@@ -1,19 +1,34 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { ClearIcon as o } from "../Icons/Icons.js";
-const i = () => /* @__PURE__ */ n("button", { type: "button", onKeyDown: (t) => {
-  var e;
-  if (t.key !== " " && t.key !== "Enter")
-    return;
-  t.stopPropagation(), (e = t.target.parentElement) == null || e.dispatchEvent(
-    new MouseEvent("mousedown", {
-      view: window,
-      bubbles: !0,
-      cancelable: !0,
-      buttons: 1
-    })
+import a from "../../../Button/Button.js";
+import { Variants as i, Sizes as s } from "../../../../react-base/src/consts.js";
+const b = () => {
+  const n = (t) => {
+    var e;
+    if (t.key !== " " && t.key !== "Enter")
+      return;
+    t.stopPropagation(), (e = t.target.parentElement) == null || e.dispatchEvent(
+      new MouseEvent("mousedown", {
+        view: window,
+        bubbles: !0,
+        cancelable: !0,
+        buttons: 1
+      })
+    );
+  };
+  return /* @__PURE__ */ r(
+    a,
+    {
+      variant: i.Transparent,
+      icon: /* @__PURE__ */ r(o, {}),
+      onKeyDown: n,
+      "aria-label": "Clear",
+      size: s.XSmall,
+      iconOnly: !0
+    }
   );
-}, "aria-label": "Clear", children: /* @__PURE__ */ n(o, {}) });
+};
 export {
-  i as default
+  b as default
 };
 //# sourceMappingURL=ClearButton.js.map

package/build/esm/components/Select/components/ClearButton/ClearButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClearButton.js","sources":["../../../../../../src/components/Select/components/ClearButton/ClearButton.tsx"],"sourcesContent":["import React, { KeyboardEvent } from 'react';\r\n\r\nimport { ClearIcon } from '../Icons/Icons';\r\n\r\nconst ClearButton = () => {\r\n  const onClick = (e: KeyboardEvent) => {\r\n    if (e.key !== ' ' && e.key !== 'Enter') {\r\n      return;\r\n    }\r\n\r\n    e.stopPropagation();\r\n\r\n    const target = e.target as HTMLButtonElement;\r\n    target.parentElement?.dispatchEvent(\r\n      new MouseEvent('mousedown', {\r\n        view: window,\r\n        bubbles: true,\r\n        cancelable: true,\r\n        buttons: 1,\r\n      }),\r\n    );\r\n  };\r\n\r\n  return (\r\n    <button type=\"button\" onKeyDown={onClick} aria-label=\"Clear\">\r\n      <ClearIcon />\r\n    </button>\r\n  );\r\n};\r\n\r\nexport default ClearButton;\r\n"],"names":["ClearButton","jsx","e","_a","ClearIcon"],"mappings":";;AAIA,MAAMA,IAAc,MAoBhB,gBAAAC,EAAC,UAAO,EAAA,MAAK,UAAS,WAnBR,CAACC,MAAqB;;AACpC,MAAIA,EAAE,QAAQ,OAAOA,EAAE,QAAQ;AAC7B;AAGF,EAAAA,EAAE,gBAAgB,IAGlBC,IADeD,EAAE,OACV,kBAAP,QAAAC,EAAsB;AAAA,IACpB,IAAI,WAAW,aAAa;AAAA,MAC1B,MAAM;AAAA,MACN,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,SAAS;AAAA,IAAA,CACV;AAAA;AACH,GAI0C,cAAW,SACnD,UAAC,gBAAAF,EAAAG,GAAA,CAAU,CAAA,EACb,CAAA;"}
+{"version":3,"file":"ClearButton.js","sources":["../../../../../../src/components/Select/components/ClearButton/ClearButton.tsx"],"sourcesContent":["import React, { KeyboardEvent } from 'react';\n\nimport { Sizes, Variants } from 'acinguiux-ds-react-base';\n\nimport { ClearIcon } from '../Icons/Icons';\nimport Button from '../../../Button/Button';\n\nconst ClearButton = () => {\n  const onClick = (e: KeyboardEvent) => {\n    if (e.key !== ' ' && e.key !== 'Enter') {\n      return;\n    }\n\n    e.stopPropagation();\n\n    const target = e.target as HTMLButtonElement;\n    target.parentElement?.dispatchEvent(\n      new MouseEvent('mousedown', {\n        view: window,\n        bubbles: true,\n        cancelable: true,\n        buttons: 1,\n      }),\n    );\n  };\n\n  return (\n    <Button\n      variant={Variants.Transparent}\n      icon={<ClearIcon />}\n      onKeyDown={onClick}\n      aria-label=\"Clear\"\n      size={Sizes.XSmall}\n      iconOnly\n    />\n  );\n};\n\nexport default ClearButton;\n"],"names":["ClearButton","onClick","e","_a","jsx","Button","Variants","ClearIcon","Sizes"],"mappings":";;;;AAOA,MAAMA,IAAc,MAAM;AAClB,QAAAC,IAAU,CAACC,MAAqB;;AACpC,QAAIA,EAAE,QAAQ,OAAOA,EAAE,QAAQ;AAC7B;AAGF,IAAAA,EAAE,gBAAgB,IAGlBC,IADeD,EAAE,OACV,kBAAP,QAAAC,EAAsB;AAAA,MACpB,IAAI,WAAW,aAAa;AAAA,QAC1B,MAAM;AAAA,QACN,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,SAAS;AAAA,MACV,CAAA;AAAA;AAAA,EAEL;AAGE,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASC,EAAS;AAAA,MAClB,wBAAOC,GAAU,EAAA;AAAA,MACjB,WAAWN;AAAA,MACX,cAAW;AAAA,MACX,MAAMO,EAAM;AAAA,MACZ,UAAQ;AAAA,IAAA;AAAA,EACV;AAEJ;"}

package/build/esm/components/Select/components/Icons/Icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icons.js","sources":["../../../../../../src/components/Select/components/Icons/Icons.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\r\n\r\nimport { Check, ChevronSmallDown, Cross } from '../../../Icon/components';\r\n\r\nexport const ArrowIcon = (): ReactElement => <ChevronSmallDown width={24} height={24} />;\r\n\r\nexport const SelectedIcon = (): ReactElement => <Check width={24} height={24} />;\r\n\r\nexport const ClearIcon = (): ReactElement => <Cross width={20} height={20} />;\r\n\r\nexport const RemoveIcon = (): ReactElement => <Cross width={20} height={20} />;\r\n"],"names":["ArrowIcon","jsx","ChevronSmallDown","SelectedIcon","Check","ClearIcon","Cross","RemoveIcon"],"mappings":";;;;AAIO,MAAMA,IAAY,MAAoB,gBAAAC,EAACC,KAAiB,OAAO,IAAI,QAAQ,IAAI,GAEzEC,IAAe,MAAoB,gBAAAF,EAACG,KAAM,OAAO,IAAI,QAAQ,IAAI,GAEjEC,IAAY,MAAoB,gBAAAJ,EAACK,KAAM,OAAO,IAAI,QAAQ,IAAI,GAE9DC,IAAa,MAAoB,gBAAAN,EAACK,KAAM,OAAO,IAAI,QAAQ,GAAI,CAAA;"}
+{"version":3,"file":"Icons.js","sources":["../../../../../../src/components/Select/components/Icons/Icons.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\n\nimport { Check, ChevronSmallDown, Cross } from '../../../Icon/components';\n\nexport const ArrowIcon = (): ReactElement => <ChevronSmallDown width={24} height={24} />;\n\nexport const SelectedIcon = (): ReactElement => <Check width={24} height={24} />;\n\nexport const ClearIcon = (): ReactElement => <Cross width={20} height={20} />;\n\nexport const RemoveIcon = (): ReactElement => <Cross width={20} height={20} />;\n"],"names":["ArrowIcon","jsx","ChevronSmallDown","SelectedIcon","Check","ClearIcon","Cross","RemoveIcon"],"mappings":";;;;AAIO,MAAMA,IAAY,MAAoB,gBAAAC,EAACC,KAAiB,OAAO,IAAI,QAAQ,GAAI,CAAA,GAEzEC,IAAe,MAAoB,gBAAAF,EAACG,KAAM,OAAO,IAAI,QAAQ,GAAI,CAAA,GAEjEC,IAAY,MAAoB,gBAAAJ,EAACK,KAAM,OAAO,IAAI,QAAQ,GAAI,CAAA,GAE9DC,IAAa,MAAoB,gBAAAN,EAACK,KAAM,OAAO,IAAI,QAAQ,GAAI,CAAA;"}