@veeqo/ui 12.4.0-beta-9 → 12.5.0

package/dist/components/SelectDropdown/components/ItemContent/ItemContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemContent.js","sources":["../../../../../src/components/SelectDropdown/components/ItemContent/ItemContent.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Text } from 'react-aria-components';\nimport { buildClassnames } from '../../../../utils';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { ArrowRightIcon, DragIndicatorIcon } from '../../../../icons';\nimport { ItemContentProps } from './types';\nimport { Text as VeeqoText } from '../../../Text';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\nimport styles from './ItemContent.module.scss';\nimport { FlexRow } from '../../../Flex/FlexRow';\n\nexport const ItemContent = ({\n  label,\n  hint,\n  itemInfoSlot,\n  endInfoSlot,\n  alert,\n  mediaSlot,\n  allowsDragging = false,\n  selectionMode = 'single',\n  isLink,\n  isSelected = false,\n  itemType,\n}: ItemContentProps) => {\n  const infoContainerClassNames = useMemo(() => {\n    const base = styles.infoContainer;\n\n    if (itemInfoSlot && endInfoSlot) {\n      return buildClassnames([base, styles.hasItemInfoAndEndInfo]);\n    }\n\n    if (itemInfoSlot) {\n      return buildClassnames([base, styles.hasItemInfoOnly]);\n    }\n\n    if (endInfoSlot) {\n      return buildClassnames([base, styles.hasEndInfoOnly]);\n    }\n\n    return buildClassnames([base]);\n  }, [endInfoSlot, itemInfoSlot]);\n\n  return (\n    <FlexRow\n      flexWrap=\"nowrap\"\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      gap=\"base\"\n      style={{ flexGrow: 1 }}\n    >\n      <FlexRow flexWrap=\"nowrap\" gap=\"base\" style={{ flexGrow: 1 }}>\n        {allowsDragging && <DragIndicatorIcon data-testid=\"drag-icon\" />}\n        <SelectionType selectionMode={selectionMode} isSelected={isSelected} isLink={isLink} />\n        {mediaSlot}\n        <FlexCol gap=\"xs\" style={{ flexGrow: 1 }}>\n          <div className={infoContainerClassNames} data-testid=\"info-container\">\n            {itemType === 'grid' ? (\n              <VeeqoText variant=\"body\">{label}</VeeqoText>\n            ) : (\n              <Text slot=\"label\">\n                <VeeqoText variant=\"body\">{label}</VeeqoText>\n              </Text>\n            )}\n            {itemInfoSlot}\n            {endInfoSlot && (\n              <div className={endInfoSlot ? styles.justifyEnd : styles.justifyStart}>\n                {endInfoSlot}\n              </div>\n            )}\n          </div>\n\n          {hint && (\n            <Text slot=\"description\">\n              <VeeqoText variant=\"hintText\">{hint}</VeeqoText>\n            </Text>\n          )}\n          {alert && <MiniAlert title={alert.title} variant={alert.variant} />}\n        </FlexCol>\n      </FlexRow>\n      {isLink && <ArrowRightIcon className={styles.linkIcon} data-testid=\"link-icon\" />}\n    </FlexRow>\n  );\n};\n"],"names":["React","VeeqoText","Text"],"mappings":"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"}
+{"version":3,"file":"ItemContent.js","sources":["../../../../../src/components/SelectDropdown/components/ItemContent/ItemContent.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Text } from 'react-aria-components';\nimport { buildClassnames } from '../../../../utils';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { ArrowRightIcon, DragIndicatorIcon } from '../../../../icons';\nimport { ItemContentProps } from './types';\nimport { Text as VeeqoText } from '../../../Text';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\nimport styles from './ItemContent.module.scss';\nimport { FlexRow } from '../../../Flex/FlexRow';\n\nexport const ItemContent = ({\n  label,\n  hint,\n  itemInfoSlot,\n  endInfoSlot,\n  alert,\n  mediaSlot,\n  allowsDragging = false,\n  selectionMode = 'single',\n  isLink,\n  isSelected = false,\n  isHovered = false,\n  itemType,\n}: ItemContentProps) => {\n  const infoContainerClassNames = useMemo(() => {\n    const base = styles.infoContainer;\n\n    if (itemInfoSlot && endInfoSlot) {\n      return buildClassnames([base, styles.hasItemInfoAndEndInfo]);\n    }\n\n    if (itemInfoSlot) {\n      return buildClassnames([base, styles.hasItemInfoOnly]);\n    }\n\n    if (endInfoSlot) {\n      return buildClassnames([base, styles.hasEndInfoOnly]);\n    }\n\n    return buildClassnames([base]);\n  }, [endInfoSlot, itemInfoSlot]);\n\n  return (\n    <FlexRow\n      flexWrap=\"nowrap\"\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      gap=\"base\"\n      style={{ flexGrow: 1 }}\n    >\n      <FlexRow flexWrap=\"nowrap\" gap=\"base\" style={{ flexGrow: 1 }}>\n        {allowsDragging && <DragIndicatorIcon data-testid=\"drag-icon\" />}\n        <SelectionType selectionMode={selectionMode} isSelected={isSelected} isLink={isLink} />\n        {mediaSlot}\n        <FlexCol gap=\"xs\" style={{ flexGrow: 1 }}>\n          <div className={infoContainerClassNames} data-testid=\"info-container\">\n            {itemType === 'grid' ? (\n              <VeeqoText variant={isHovered ? 'bodyBold' : 'body'}>{label}</VeeqoText>\n            ) : (\n              <Text slot=\"label\">\n                <VeeqoText variant={isHovered ? 'bodyBold' : 'body'}>{label}</VeeqoText>\n              </Text>\n            )}\n            {itemInfoSlot}\n            {endInfoSlot && (\n              <div className={endInfoSlot ? styles.justifyEnd : styles.justifyStart}>\n                {endInfoSlot}\n              </div>\n            )}\n          </div>\n\n          {hint && (\n            <Text slot=\"description\">\n              <VeeqoText variant=\"body\">{hint}</VeeqoText>\n            </Text>\n          )}\n          {alert && <MiniAlert title={alert.title} variant={alert.variant} />}\n        </FlexCol>\n      </FlexRow>\n      {isLink && <ArrowRightIcon className={styles.linkIcon} data-testid=\"link-icon\" />}\n    </FlexRow>\n  );\n};\n"],"names":["React","VeeqoText","Text"],"mappings":"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"}

package/dist/components/SelectDropdown/components/ItemContent/ItemContent.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._infoContainer_khhvq_1 {\n  display: grid;\n  gap: var(--sizes-sm);\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n}\n._infoContainer_khhvq_1._hasItemInfoAndEndInfo_khhvq_9 {\n  grid-template-columns: auto 1fr 1fr;\n}\n._infoContainer_khhvq_1._hasItemInfoOnly_khhvq_12, ._infoContainer_khhvq_1._hasEndInfoOnly_khhvq_12 {\n  grid-template-columns: auto 1fr;\n}\n._infoContainer_khhvq_1 > *:last-child._justifyEnd_khhvq_15 {\n  justify-self: end;\n}\n._infoContainer_khhvq_1 > *:last-child._justifyStart_khhvq_18 {\n  justify-self: start;\n}\n\n._linkIcon_khhvq_22 {\n  color: var(--colors-neutral-ink-base);\n}");
-var styles = {"infoContainer":"_infoContainer_khhvq_1","hasItemInfoAndEndInfo":"_hasItemInfoAndEndInfo_khhvq_9","hasItemInfoOnly":"_hasItemInfoOnly_khhvq_12","hasEndInfoOnly":"_hasEndInfoOnly_khhvq_12","justifyEnd":"_justifyEnd_khhvq_15","justifyStart":"_justifyStart_khhvq_18","linkIcon":"_linkIcon_khhvq_22"};
+___$insertStyle("._infoContainer_1oi71_1 {\n  display: grid;\n  gap: var(--sizes-sm);\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n}\n._infoContainer_1oi71_1._hasItemInfoAndEndInfo_1oi71_9 {\n  grid-template-columns: auto 1fr 1fr;\n}\n._infoContainer_1oi71_1._hasItemInfoAndEndInfo_1oi71_9 span {\n  font-size: var(--text-body-font-size);\n}\n._infoContainer_1oi71_1._hasItemInfoOnly_1oi71_15, ._infoContainer_1oi71_1._hasEndInfoOnly_1oi71_15 {\n  grid-template-columns: auto 1fr;\n}\n._infoContainer_1oi71_1._hasItemInfoOnly_1oi71_15 span, ._infoContainer_1oi71_1._hasEndInfoOnly_1oi71_15 span {\n  font-size: var(--text-body-font-size);\n}\n._infoContainer_1oi71_1 > *:last-child._justifyEnd_1oi71_21 {\n  justify-self: end;\n}\n._infoContainer_1oi71_1 > *:last-child._justifyStart_1oi71_24 {\n  justify-self: start;\n}\n\n._linkIcon_1oi71_28 {\n  color: var(--colors-neutral-ink-base);\n}");
+var styles = {"infoContainer":"_infoContainer_1oi71_1","hasItemInfoAndEndInfo":"_hasItemInfoAndEndInfo_1oi71_9","hasItemInfoOnly":"_hasItemInfoOnly_1oi71_15","hasEndInfoOnly":"_hasEndInfoOnly_1oi71_15","justifyEnd":"_justifyEnd_1oi71_21","justifyStart":"_justifyStart_1oi71_24","linkIcon":"_linkIcon_1oi71_28"};
 
 module.exports = styles;
 //# sourceMappingURL=ItemContent.module.scss.cjs.map

package/dist/components/SelectDropdown/components/ItemContent/ItemContent.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ItemContent.module.scss.cjs","sources":["../../../../../src/components/SelectDropdown/components/ItemContent/ItemContent.module.scss"],"sourcesContent":[".infoContainer {\n  display: grid;\n  gap: var(--sizes-sm);\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  &.hasItemInfoAndEndInfo {\n    grid-template-columns: auto 1fr 1fr;\n  }\n\n  &.hasItemInfoOnly,\n  &.hasEndInfoOnly {\n    grid-template-columns: auto 1fr;\n  }\n\n  > *:last-child {\n    &.justifyEnd {\n      justify-self: end;\n    }\n\n    &.justifyStart {\n      justify-self: start;\n    }\n  }\n}\n\n.linkIcon {\n  color: var(--colors-neutral-ink-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,2nBAAA;AACA,aAAA,CAAA,eAAA,CAAA,wBAAA,CAAA,uBAAA,CAAA,gCAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}
+{"version":3,"file":"ItemContent.module.scss.cjs","sources":["../../../../../src/components/SelectDropdown/components/ItemContent/ItemContent.module.scss"],"sourcesContent":[".infoContainer {\n  display: grid;\n  gap: var(--sizes-sm);\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  &.hasItemInfoAndEndInfo {\n    grid-template-columns: auto 1fr 1fr;\n\n    span {\n      font-size: var(--text-body-font-size);\n    }\n  }\n\n  &.hasItemInfoOnly,\n  &.hasEndInfoOnly {\n    grid-template-columns: auto 1fr;\n\n    span {\n      font-size: var(--text-body-font-size);\n    }\n  }\n\n  > *:last-child {\n    &.justifyEnd {\n      justify-self: end;\n    }\n\n    &.justifyStart {\n      justify-self: start;\n    }\n  }\n}\n\n.linkIcon {\n  color: var(--colors-neutral-ink-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,q4BAAA;AACA,aAAA,CAAA,eAAA,CAAA,wBAAA,CAAA,uBAAA,CAAA,gCAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

package/dist/components/SelectDropdown/components/ItemContent/ItemContent.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../../../_virtual/____insertStyle.js';
 
-insertStyle("._infoContainer_khhvq_1 {\n  display: grid;\n  gap: var(--sizes-sm);\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n}\n._infoContainer_khhvq_1._hasItemInfoAndEndInfo_khhvq_9 {\n  grid-template-columns: auto 1fr 1fr;\n}\n._infoContainer_khhvq_1._hasItemInfoOnly_khhvq_12, ._infoContainer_khhvq_1._hasEndInfoOnly_khhvq_12 {\n  grid-template-columns: auto 1fr;\n}\n._infoContainer_khhvq_1 > *:last-child._justifyEnd_khhvq_15 {\n  justify-self: end;\n}\n._infoContainer_khhvq_1 > *:last-child._justifyStart_khhvq_18 {\n  justify-self: start;\n}\n\n._linkIcon_khhvq_22 {\n  color: var(--colors-neutral-ink-base);\n}");
-var styles = {"infoContainer":"_infoContainer_khhvq_1","hasItemInfoAndEndInfo":"_hasItemInfoAndEndInfo_khhvq_9","hasItemInfoOnly":"_hasItemInfoOnly_khhvq_12","hasEndInfoOnly":"_hasEndInfoOnly_khhvq_12","justifyEnd":"_justifyEnd_khhvq_15","justifyStart":"_justifyStart_khhvq_18","linkIcon":"_linkIcon_khhvq_22"};
+insertStyle("._infoContainer_1oi71_1 {\n  display: grid;\n  gap: var(--sizes-sm);\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n}\n._infoContainer_1oi71_1._hasItemInfoAndEndInfo_1oi71_9 {\n  grid-template-columns: auto 1fr 1fr;\n}\n._infoContainer_1oi71_1._hasItemInfoAndEndInfo_1oi71_9 span {\n  font-size: var(--text-body-font-size);\n}\n._infoContainer_1oi71_1._hasItemInfoOnly_1oi71_15, ._infoContainer_1oi71_1._hasEndInfoOnly_1oi71_15 {\n  grid-template-columns: auto 1fr;\n}\n._infoContainer_1oi71_1._hasItemInfoOnly_1oi71_15 span, ._infoContainer_1oi71_1._hasEndInfoOnly_1oi71_15 span {\n  font-size: var(--text-body-font-size);\n}\n._infoContainer_1oi71_1 > *:last-child._justifyEnd_1oi71_21 {\n  justify-self: end;\n}\n._infoContainer_1oi71_1 > *:last-child._justifyStart_1oi71_24 {\n  justify-self: start;\n}\n\n._linkIcon_1oi71_28 {\n  color: var(--colors-neutral-ink-base);\n}");
+var styles = {"infoContainer":"_infoContainer_1oi71_1","hasItemInfoAndEndInfo":"_hasItemInfoAndEndInfo_1oi71_9","hasItemInfoOnly":"_hasItemInfoOnly_1oi71_15","hasEndInfoOnly":"_hasEndInfoOnly_1oi71_15","justifyEnd":"_justifyEnd_1oi71_21","justifyStart":"_justifyStart_1oi71_24","linkIcon":"_linkIcon_1oi71_28"};
 
 export { styles as default };
 //# sourceMappingURL=ItemContent.module.scss.js.map

package/dist/components/SelectDropdown/components/ItemContent/ItemContent.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemContent.module.scss.js","sources":["../../../../../src/components/SelectDropdown/components/ItemContent/ItemContent.module.scss"],"sourcesContent":[".infoContainer {\n  display: grid;\n  gap: var(--sizes-sm);\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  &.hasItemInfoAndEndInfo {\n    grid-template-columns: auto 1fr 1fr;\n  }\n\n  &.hasItemInfoOnly,\n  &.hasEndInfoOnly {\n    grid-template-columns: auto 1fr;\n  }\n\n  > *:last-child {\n    &.justifyEnd {\n      justify-self: end;\n    }\n\n    &.justifyStart {\n      justify-self: start;\n    }\n  }\n}\n\n.linkIcon {\n  color: var(--colors-neutral-ink-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,2nBAAA;AACA,aAAA,CAAA,eAAA,CAAA,wBAAA,CAAA,uBAAA,CAAA,gCAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}
+{"version":3,"file":"ItemContent.module.scss.js","sources":["../../../../../src/components/SelectDropdown/components/ItemContent/ItemContent.module.scss"],"sourcesContent":[".infoContainer {\n  display: grid;\n  gap: var(--sizes-sm);\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  &.hasItemInfoAndEndInfo {\n    grid-template-columns: auto 1fr 1fr;\n\n    span {\n      font-size: var(--text-body-font-size);\n    }\n  }\n\n  &.hasItemInfoOnly,\n  &.hasEndInfoOnly {\n    grid-template-columns: auto 1fr;\n\n    span {\n      font-size: var(--text-body-font-size);\n    }\n  }\n\n  > *:last-child {\n    &.justifyEnd {\n      justify-self: end;\n    }\n\n    &.justifyStart {\n      justify-self: start;\n    }\n  }\n}\n\n.linkIcon {\n  color: var(--colors-neutral-ink-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,q4BAAA;AACA,aAAA,CAAA,eAAA,CAAA,wBAAA,CAAA,uBAAA,CAAA,gCAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

package/dist/components/SelectDropdown/components/ItemContent/types.d.ts

@@ -6,6 +6,8 @@ export type ItemContentProps = BaseItemProps & {
     selectionMode?: 'single' | 'multiple' | 'none';
     /** shows item in selected state */
     isSelected?: boolean;
+    /** shows item in hovered state */
+    isHovered?: boolean;
     /** Renders icon to indicate item is a link */
     isLink?: boolean;
     /** type of item  */

package/dist/components/SelectDropdown/components/ListItem/ListItem.cjs

@@ -16,7 +16,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const ListItem = ({ id, label, href, appearance = 'primary', className, ...props }) => {
     const idComputed = useId.useId({ id, prefix: 'list-item' });
-    return (React__default.default.createElement(reactAriaComponents.ListBoxItem, { id: idComputed, textValue: label, href: href, className: buildClassnames.buildClassnames([item_module.item, item_module[`appearance-${appearance}`], className]), ...props }, ({ selectionMode, allowsDragging, isSelected }) => (React__default.default.createElement(ItemContent.ItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, label: label, isLink: Boolean(href), appearance: appearance, itemType: "list", ...props }))));
+    return (React__default.default.createElement(reactAriaComponents.ListBoxItem, { id: idComputed, textValue: label, href: href, className: buildClassnames.buildClassnames([item_module.item, item_module[`appearance-${appearance}`], className]), ...props }, ({ selectionMode, allowsDragging, isSelected, isHovered }) => (React__default.default.createElement(ItemContent.ItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, isHovered: isHovered, label: label, isLink: Boolean(href), appearance: appearance, itemType: "list", ...props }))));
 };
 
 exports.ListItem = ListItem;

package/dist/components/SelectDropdown/components/ListItem/ListItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.cjs","sources":["../../../../../src/components/SelectDropdown/components/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItem, ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../../hooks';\nimport { ListItemProps } from './types';\nimport { ItemContent } from '../ItemContent';\nimport { buildClassnames } from '../../../../utils';\n\nimport styles from '../item.module.scss';\n\nexport const ListItem = ({\n  id,\n  label,\n  href,\n  appearance = 'primary',\n  className,\n  ...props\n}: ListItemProps) => {\n  const idComputed = useId({ id, prefix: 'list-item' });\n\n  return (\n    <ListBoxItem\n      id={idComputed}\n      textValue={label}\n      href={href}\n      className={buildClassnames([styles.item, styles[`appearance-${appearance}`], className])}\n      {...props}\n    >\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected }: ListBoxItemRenderProps) => (\n        <ItemContent\n          selectionMode={selectionMode}\n          allowsDragging={allowsDragging}\n          isSelected={isSelected}\n          label={label}\n          isLink={Boolean(href)}\n          appearance={appearance}\n          itemType=\"list\"\n          {...props}\n        />\n      )}\n    </ListBoxItem>\n  );\n};\n"],"names":["useId","React","ListBoxItem","buildClassnames","styles","ItemContent"],"mappings":";;;;;;;;;;;;;;;;MASa,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAU,GAAG,SAAS,EACtB,SAAS,EACT,GAAG,KAAK,EACM,KAAI;AAClB,IAAA,MAAM,UAAU,GAAGA,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AAErD,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,+BAAW,IACV,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAEC,+BAAe,CAAC,CAACC,WAAM,CAAC,IAAI,EAAEA,WAAM,CAAC,CAAc,WAAA,EAAA,UAAU,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC,KACpF,KAAK,EAAA,EAGR,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrEH,sBAAC,CAAA,aAAA,CAAAI,uBAAW,IACV,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EACrB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAC,MAAM,EACX,GAAA,KAAK,GACT,CACH,CACW;AAElB;;;;"}
+{"version":3,"file":"ListItem.cjs","sources":["../../../../../src/components/SelectDropdown/components/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItem, ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../../hooks';\nimport { ListItemProps } from './types';\nimport { ItemContent } from '../ItemContent';\nimport { buildClassnames } from '../../../../utils';\n\nimport styles from '../item.module.scss';\n\nexport const ListItem = ({\n  id,\n  label,\n  href,\n  appearance = 'primary',\n  className,\n  ...props\n}: ListItemProps) => {\n  const idComputed = useId({ id, prefix: 'list-item' });\n\n  return (\n    <ListBoxItem\n      id={idComputed}\n      textValue={label}\n      href={href}\n      className={buildClassnames([styles.item, styles[`appearance-${appearance}`], className])}\n      {...props}\n    >\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected, isHovered }: ListBoxItemRenderProps) => (\n        <ItemContent\n          selectionMode={selectionMode}\n          allowsDragging={allowsDragging}\n          isSelected={isSelected}\n          isHovered={isHovered}\n          label={label}\n          isLink={Boolean(href)}\n          appearance={appearance}\n          itemType=\"list\"\n          {...props}\n        />\n      )}\n    </ListBoxItem>\n  );\n};\n"],"names":["useId","React","ListBoxItem","buildClassnames","styles","ItemContent"],"mappings":";;;;;;;;;;;;;;;;MASa,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAU,GAAG,SAAS,EACtB,SAAS,EACT,GAAG,KAAK,EACM,KAAI;AAClB,IAAA,MAAM,UAAU,GAAGA,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;IAErD,QACEC,qCAACC,+BAAW,EAAA,EACV,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAEC,+BAAe,CAAC,CAACC,WAAM,CAAC,IAAI,EAAEA,WAAM,CAAC,CAAA,WAAA,EAAc,UAAU,CAAE,CAAA,CAAC,EAAE,SAAS,CAAC,CAAC,EACpF,GAAA,KAAK,IAGR,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAA0B,MAChFH,sBAAA,CAAA,aAAA,CAACI,uBAAW,EACV,EAAA,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EACrB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAC,MAAM,EAAA,GACX,KAAK,EACT,CAAA,CACH,CACW;AAElB;;;;"}

package/dist/components/SelectDropdown/components/ListItem/ListItem.js

@@ -6,11 +6,11 @@ import 'lodash.throttle';
 import { ItemContent } from '../ItemContent/ItemContent.js';
 import { buildClassnames } from '../../../../utils/buildClassnames.js';
 import 'uid/secure';
-import styles from '../item.module.scss.js';
+import itemStyles from '../item.module.scss.js';
 
 const ListItem = ({ id, label, href, appearance = 'primary', className, ...props }) => {
     const idComputed = useId({ id, prefix: 'list-item' });
-    return (React__default.createElement(ListBoxItem, { id: idComputed, textValue: label, href: href, className: buildClassnames([styles.item, styles[`appearance-${appearance}`], className]), ...props }, ({ selectionMode, allowsDragging, isSelected }) => (React__default.createElement(ItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, label: label, isLink: Boolean(href), appearance: appearance, itemType: "list", ...props }))));
+    return (React__default.createElement(ListBoxItem, { id: idComputed, textValue: label, href: href, className: buildClassnames([itemStyles.item, itemStyles[`appearance-${appearance}`], className]), ...props }, ({ selectionMode, allowsDragging, isSelected, isHovered }) => (React__default.createElement(ItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, isHovered: isHovered, label: label, isLink: Boolean(href), appearance: appearance, itemType: "list", ...props }))));
 };
 
 export { ListItem };

package/dist/components/SelectDropdown/components/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../../../../src/components/SelectDropdown/components/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItem, ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../../hooks';\nimport { ListItemProps } from './types';\nimport { ItemContent } from '../ItemContent';\nimport { buildClassnames } from '../../../../utils';\n\nimport styles from '../item.module.scss';\n\nexport const ListItem = ({\n  id,\n  label,\n  href,\n  appearance = 'primary',\n  className,\n  ...props\n}: ListItemProps) => {\n  const idComputed = useId({ id, prefix: 'list-item' });\n\n  return (\n    <ListBoxItem\n      id={idComputed}\n      textValue={label}\n      href={href}\n      className={buildClassnames([styles.item, styles[`appearance-${appearance}`], className])}\n      {...props}\n    >\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected }: ListBoxItemRenderProps) => (\n        <ItemContent\n          selectionMode={selectionMode}\n          allowsDragging={allowsDragging}\n          isSelected={isSelected}\n          label={label}\n          isLink={Boolean(href)}\n          appearance={appearance}\n          itemType=\"list\"\n          {...props}\n        />\n      )}\n    </ListBoxItem>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;MASa,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAU,GAAG,SAAS,EACtB,SAAS,EACT,GAAG,KAAK,EACM,KAAI;AAClB,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AAErD,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,WAAW,IACV,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAc,WAAA,EAAA,UAAU,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC,KACpF,KAAK,EAAA,EAGR,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrEA,cAAC,CAAA,aAAA,CAAA,WAAW,IACV,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EACrB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAC,MAAM,EACX,GAAA,KAAK,GACT,CACH,CACW;AAElB;;;;"}
+{"version":3,"file":"ListItem.js","sources":["../../../../../src/components/SelectDropdown/components/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItem, ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../../hooks';\nimport { ListItemProps } from './types';\nimport { ItemContent } from '../ItemContent';\nimport { buildClassnames } from '../../../../utils';\n\nimport styles from '../item.module.scss';\n\nexport const ListItem = ({\n  id,\n  label,\n  href,\n  appearance = 'primary',\n  className,\n  ...props\n}: ListItemProps) => {\n  const idComputed = useId({ id, prefix: 'list-item' });\n\n  return (\n    <ListBoxItem\n      id={idComputed}\n      textValue={label}\n      href={href}\n      className={buildClassnames([styles.item, styles[`appearance-${appearance}`], className])}\n      {...props}\n    >\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected, isHovered }: ListBoxItemRenderProps) => (\n        <ItemContent\n          selectionMode={selectionMode}\n          allowsDragging={allowsDragging}\n          isSelected={isSelected}\n          isHovered={isHovered}\n          label={label}\n          isLink={Boolean(href)}\n          appearance={appearance}\n          itemType=\"list\"\n          {...props}\n        />\n      )}\n    </ListBoxItem>\n  );\n};\n"],"names":["React","styles"],"mappings":";;;;;;;;;;MASa,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAU,GAAG,SAAS,EACtB,SAAS,EACT,GAAG,KAAK,EACM,KAAI;AAClB,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;IAErD,QACEA,6BAAC,WAAW,EAAA,EACV,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,eAAe,CAAC,CAACC,UAAM,CAAC,IAAI,EAAEA,UAAM,CAAC,CAAA,WAAA,EAAc,UAAU,CAAE,CAAA,CAAC,EAAE,SAAS,CAAC,CAAC,EACpF,GAAA,KAAK,IAGR,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAA0B,MAChFD,cAAA,CAAA,aAAA,CAAC,WAAW,EACV,EAAA,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EACrB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAC,MAAM,EAAA,GACX,KAAK,EACT,CAAA,CACH,CACW;AAElB;;;;"}

package/dist/components/SelectDropdown/components/ListItemSection/ListItemSection.cjs

@@ -15,7 +15,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const ListItemSection = ({ label, hint, itemInfoSlot, items, children, className, ...props }) => (React__default.default.createElement(reactAriaComponents.Section, { className: buildClassnames.buildClassnames([ListItemSection_module.section, className]), ...props },
-    React__default.default.createElement(reactAriaComponents.Header, null,
+    React__default.default.createElement(reactAriaComponents.Header, { className: ListItemSection_module.sectionHeader },
         React__default.default.createElement(FlexCol.FlexCol, { gap: "xs" },
             React__default.default.createElement(FlexRow.FlexRow, null,
                 React__default.default.createElement(Text.Text, { variant: "body" }, label),

package/dist/components/SelectDropdown/components/ListItemSection/ListItemSection.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemSection.cjs","sources":["../../../../../src/components/SelectDropdown/components/ListItemSection/ListItemSection.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Collection, Header, Section, SectionProps } from 'react-aria-components';\nimport { FlexRow } from '../../../Flex/FlexRow';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { Text as VeeqoText } from '../../../Text';\nimport { ListItemProps } from '../ListItem/types';\nimport { ListItem } from '../ListItem/ListItem';\nimport { buildClassnames } from '../../../../utils';\nimport styles from './ListItemSection.module.scss';\n\nexport type ListItemSectionProps = Omit<SectionProps<ListItemProps>, 'items'> & {\n  label: string;\n  hint?: string;\n  itemInfoSlot?: ReactElement;\n  items?: ListItemProps[];\n};\n\nexport const ListItemSection = ({\n  label,\n  hint,\n  itemInfoSlot,\n  items,\n  children,\n  className,\n  ...props\n}: ListItemSectionProps) => (\n  <Section className={buildClassnames([styles.section, className])} {...props}>\n    <Header>\n      <FlexCol gap=\"xs\">\n        <FlexRow>\n          <VeeqoText variant=\"body\">{label}</VeeqoText>\n          {itemInfoSlot}\n        </FlexRow>\n        {hint && <VeeqoText variant=\"hintText\">{hint}</VeeqoText>}\n      </FlexCol>\n    </Header>\n    {children}\n    {items && (\n      <Collection items={items}>{(item: ListItemProps) => <ListItem {...item} />}</Collection>\n    )}\n  </Section>\n);\n"],"names":["React","Section","buildClassnames","styles","Header","FlexCol","FlexRow","VeeqoText","Collection","ListItem"],"mappings":";;;;;;;;;;;;;;;;AAiBa,MAAA,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACa,MACrBA,qCAACC,2BAAO,EAAA,EAAC,SAAS,EAAEC,+BAAe,CAAC,CAACC,sBAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,KAAM,KAAK,EAAA;AACzE,IAAAH,sBAAA,CAAA,aAAA,CAACI,0BAAM,EAAA,IAAA;AACL,QAAAJ,sBAAA,CAAA,aAAA,CAACK,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,YAAAL,sBAAA,CAAA,aAAA,CAACM,eAAO,EAAA,IAAA;AACN,gBAAAN,sBAAA,CAAA,aAAA,CAACO,SAAS,EAAC,EAAA,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAa;AAC5C,gBAAA,YAAY,CACL;YACT,IAAI,IAAIP,sBAAC,CAAA,aAAA,CAAAO,SAAS,EAAC,EAAA,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CACjD,CACH;IACR,QAAQ;IACR,KAAK,KACJP,sBAAC,CAAA,aAAA,CAAAQ,8BAAU,IAAC,KAAK,EAAE,KAAK,EAAA,EAAG,CAAC,IAAmB,KAAKR,sBAAC,CAAA,aAAA,CAAAS,iBAAQ,EAAK,EAAA,GAAA,IAAI,GAAI,CAAc,CACzF,CACO;;;;"}
+{"version":3,"file":"ListItemSection.cjs","sources":["../../../../../src/components/SelectDropdown/components/ListItemSection/ListItemSection.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Collection, Header, Section, SectionProps } from 'react-aria-components';\nimport { FlexRow } from '../../../Flex/FlexRow';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { Text as VeeqoText } from '../../../Text';\nimport { ListItemProps } from '../ListItem/types';\nimport { ListItem } from '../ListItem/ListItem';\nimport { buildClassnames } from '../../../../utils';\nimport styles from './ListItemSection.module.scss';\n\nexport type ListItemSectionProps = Omit<SectionProps<ListItemProps>, 'items'> & {\n  label: string;\n  hint?: string;\n  itemInfoSlot?: ReactElement;\n  items?: ListItemProps[];\n};\n\nexport const ListItemSection = ({\n  label,\n  hint,\n  itemInfoSlot,\n  items,\n  children,\n  className,\n  ...props\n}: ListItemSectionProps) => (\n  <Section className={buildClassnames([styles.section, className])} {...props}>\n    <Header className={styles.sectionHeader}>\n      <FlexCol gap=\"xs\">\n        <FlexRow>\n          <VeeqoText variant=\"body\">{label}</VeeqoText>\n          {itemInfoSlot}\n        </FlexRow>\n        {hint && <VeeqoText variant=\"hintText\">{hint}</VeeqoText>}\n      </FlexCol>\n    </Header>\n    {children}\n    {items && (\n      <Collection items={items}>{(item: ListItemProps) => <ListItem {...item} />}</Collection>\n    )}\n  </Section>\n);\n"],"names":["React","Section","buildClassnames","styles","Header","FlexCol","FlexRow","VeeqoText","Collection","ListItem"],"mappings":";;;;;;;;;;;;;;;;AAiBa,MAAA,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACa,MACrBA,qCAACC,2BAAO,EAAA,EAAC,SAAS,EAAEC,+BAAe,CAAC,CAACC,sBAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,KAAM,KAAK,EAAA;AACzE,IAAAH,sBAAA,CAAA,aAAA,CAACI,0BAAM,EAAC,EAAA,SAAS,EAAED,sBAAM,CAAC,aAAa,EAAA;AACrC,QAAAH,sBAAA,CAAA,aAAA,CAACK,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,YAAAL,sBAAA,CAAA,aAAA,CAACM,eAAO,EAAA,IAAA;AACN,gBAAAN,sBAAA,CAAA,aAAA,CAACO,SAAS,EAAC,EAAA,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAa;AAC5C,gBAAA,YAAY,CACL;YACT,IAAI,IAAIP,sBAAC,CAAA,aAAA,CAAAO,SAAS,EAAC,EAAA,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CACjD,CACH;IACR,QAAQ;IACR,KAAK,KACJP,sBAAC,CAAA,aAAA,CAAAQ,8BAAU,IAAC,KAAK,EAAE,KAAK,EAAA,EAAG,CAAC,IAAmB,KAAKR,sBAAC,CAAA,aAAA,CAAAS,iBAAQ,EAAK,EAAA,GAAA,IAAI,GAAI,CAAc,CACzF,CACO;;;;"}

package/dist/components/SelectDropdown/components/ListItemSection/ListItemSection.js

@@ -9,7 +9,7 @@ import 'uid/secure';
 import styles from './ListItemSection.module.scss.js';
 
 const ListItemSection = ({ label, hint, itemInfoSlot, items, children, className, ...props }) => (React__default.createElement(Section, { className: buildClassnames([styles.section, className]), ...props },
-    React__default.createElement(Header, null,
+    React__default.createElement(Header, { className: styles.sectionHeader },
         React__default.createElement(FlexCol, { gap: "xs" },
             React__default.createElement(FlexRow, null,
                 React__default.createElement(Text, { variant: "body" }, label),

package/dist/components/SelectDropdown/components/ListItemSection/ListItemSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemSection.js","sources":["../../../../../src/components/SelectDropdown/components/ListItemSection/ListItemSection.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Collection, Header, Section, SectionProps } from 'react-aria-components';\nimport { FlexRow } from '../../../Flex/FlexRow';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { Text as VeeqoText } from '../../../Text';\nimport { ListItemProps } from '../ListItem/types';\nimport { ListItem } from '../ListItem/ListItem';\nimport { buildClassnames } from '../../../../utils';\nimport styles from './ListItemSection.module.scss';\n\nexport type ListItemSectionProps = Omit<SectionProps<ListItemProps>, 'items'> & {\n  label: string;\n  hint?: string;\n  itemInfoSlot?: ReactElement;\n  items?: ListItemProps[];\n};\n\nexport const ListItemSection = ({\n  label,\n  hint,\n  itemInfoSlot,\n  items,\n  children,\n  className,\n  ...props\n}: ListItemSectionProps) => (\n  <Section className={buildClassnames([styles.section, className])} {...props}>\n    <Header>\n      <FlexCol gap=\"xs\">\n        <FlexRow>\n          <VeeqoText variant=\"body\">{label}</VeeqoText>\n          {itemInfoSlot}\n        </FlexRow>\n        {hint && <VeeqoText variant=\"hintText\">{hint}</VeeqoText>}\n      </FlexCol>\n    </Header>\n    {children}\n    {items && (\n      <Collection items={items}>{(item: ListItemProps) => <ListItem {...item} />}</Collection>\n    )}\n  </Section>\n);\n"],"names":["React","VeeqoText"],"mappings":";;;;;;;;;;AAiBa,MAAA,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACa,MACrBA,6BAAC,OAAO,EAAA,EAAC,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,KAAM,KAAK,EAAA;AACzE,IAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA;AACL,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;AACN,gBAAAA,cAAA,CAAA,aAAA,CAACC,IAAS,EAAC,EAAA,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAa;AAC5C,gBAAA,YAAY,CACL;YACT,IAAI,IAAID,cAAC,CAAA,aAAA,CAAAC,IAAS,EAAC,EAAA,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CACjD,CACH;IACR,QAAQ;IACR,KAAK,KACJD,cAAC,CAAA,aAAA,CAAA,UAAU,IAAC,KAAK,EAAE,KAAK,EAAA,EAAG,CAAC,IAAmB,KAAKA,cAAC,CAAA,aAAA,CAAA,QAAQ,EAAK,EAAA,GAAA,IAAI,GAAI,CAAc,CACzF,CACO;;;;"}
+{"version":3,"file":"ListItemSection.js","sources":["../../../../../src/components/SelectDropdown/components/ListItemSection/ListItemSection.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Collection, Header, Section, SectionProps } from 'react-aria-components';\nimport { FlexRow } from '../../../Flex/FlexRow';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { Text as VeeqoText } from '../../../Text';\nimport { ListItemProps } from '../ListItem/types';\nimport { ListItem } from '../ListItem/ListItem';\nimport { buildClassnames } from '../../../../utils';\nimport styles from './ListItemSection.module.scss';\n\nexport type ListItemSectionProps = Omit<SectionProps<ListItemProps>, 'items'> & {\n  label: string;\n  hint?: string;\n  itemInfoSlot?: ReactElement;\n  items?: ListItemProps[];\n};\n\nexport const ListItemSection = ({\n  label,\n  hint,\n  itemInfoSlot,\n  items,\n  children,\n  className,\n  ...props\n}: ListItemSectionProps) => (\n  <Section className={buildClassnames([styles.section, className])} {...props}>\n    <Header className={styles.sectionHeader}>\n      <FlexCol gap=\"xs\">\n        <FlexRow>\n          <VeeqoText variant=\"body\">{label}</VeeqoText>\n          {itemInfoSlot}\n        </FlexRow>\n        {hint && <VeeqoText variant=\"hintText\">{hint}</VeeqoText>}\n      </FlexCol>\n    </Header>\n    {children}\n    {items && (\n      <Collection items={items}>{(item: ListItemProps) => <ListItem {...item} />}</Collection>\n    )}\n  </Section>\n);\n"],"names":["React","VeeqoText"],"mappings":";;;;;;;;;;AAiBa,MAAA,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACa,MACrBA,6BAAC,OAAO,EAAA,EAAC,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,KAAM,KAAK,EAAA;AACzE,IAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,aAAa,EAAA;AACrC,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;AACN,gBAAAA,cAAA,CAAA,aAAA,CAACC,IAAS,EAAC,EAAA,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAa;AAC5C,gBAAA,YAAY,CACL;YACT,IAAI,IAAID,cAAC,CAAA,aAAA,CAAAC,IAAS,EAAC,EAAA,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CACjD,CACH;IACR,QAAQ;IACR,KAAK,KACJD,cAAC,CAAA,aAAA,CAAA,UAAU,IAAC,KAAK,EAAE,KAAK,EAAA,EAAG,CAAC,IAAmB,KAAKA,cAAC,CAAA,aAAA,CAAA,QAAQ,EAAK,EAAA,GAAA,IAAI,GAAI,CAAc,CACzF,CACO;;;;"}

package/dist/components/SelectDropdown/components/ListItemSection/ListItemSection.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._section_wlx0b_1 {\n  border-radius: var(--sizes-base);\n}");
-var styles = {"section":"_section_wlx0b_1"};
+___$insertStyle("._section_r14jl_1 {\n  border-radius: var(--sizes-base);\n}\n\n._sectionHeader_r14jl_5 {\n  min-height: var(--sizes-10);\n  padding: var(--sizes-sm) var(--sizes-sm);\n}");
+var styles = {"section":"_section_r14jl_1","sectionHeader":"_sectionHeader_r14jl_5"};
 
 module.exports = styles;
 //# sourceMappingURL=ListItemSection.module.scss.cjs.map

package/dist/components/SelectDropdown/components/ListItemSection/ListItemSection.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemSection.module.scss.cjs","sources":["../../../../../src/components/SelectDropdown/components/ListItemSection/ListItemSection.module.scss"],"sourcesContent":[".section {\n  border-radius: var(--sizes-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,6DAAA;;;;;"}
+{"version":3,"file":"ListItemSection.module.scss.cjs","sources":["../../../../../src/components/SelectDropdown/components/ListItemSection/ListItemSection.module.scss"],"sourcesContent":[".section {\n  border-radius: var(--sizes-base);\n}\n\n.sectionHeader {\n  min-height: var(--sizes-10);\n  padding: var(--sizes-sm) var(--sizes-sm);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,0KAAA;;;;;"}

package/dist/components/SelectDropdown/components/ListItemSection/ListItemSection.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../../../_virtual/____insertStyle.js';
 
-insertStyle("._section_wlx0b_1 {\n  border-radius: var(--sizes-base);\n}");
-var styles = {"section":"_section_wlx0b_1"};
+insertStyle("._section_r14jl_1 {\n  border-radius: var(--sizes-base);\n}\n\n._sectionHeader_r14jl_5 {\n  min-height: var(--sizes-10);\n  padding: var(--sizes-sm) var(--sizes-sm);\n}");
+var styles = {"section":"_section_r14jl_1","sectionHeader":"_sectionHeader_r14jl_5"};
 
 export { styles as default };
 //# sourceMappingURL=ListItemSection.module.scss.js.map

package/dist/components/SelectDropdown/components/ListItemSection/ListItemSection.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemSection.module.scss.js","sources":["../../../../../src/components/SelectDropdown/components/ListItemSection/ListItemSection.module.scss"],"sourcesContent":[".section {\n  border-radius: var(--sizes-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,6DAAA;;;;;"}
+{"version":3,"file":"ListItemSection.module.scss.js","sources":["../../../../../src/components/SelectDropdown/components/ListItemSection/ListItemSection.module.scss"],"sourcesContent":[".section {\n  border-radius: var(--sizes-base);\n}\n\n.sectionHeader {\n  min-height: var(--sizes-10);\n  padding: var(--sizes-sm) var(--sizes-sm);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,0KAAA;;;;;"}

package/dist/components/SelectDropdown/components/OptionsContainers/GridList.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var reactAriaComponents = require('react-aria-components');
+var React = require('react');
+var GridItem = require('../GridItem/GridItem.cjs');
+var buildClassnames = require('../../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var OptionsContainer_module = require('./OptionsContainer.module.scss.cjs');
+var SelectDropdownState = require('../SelectDropdownState.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const GridList = ({ id, className, options, onSelectionChange, selectedValues, selectionMode, emptyStateSlot, isLoading = false, ariaDescribedBy, ariaLabelledBy, ...otherProps }) => (React__default.default.createElement(reactAriaComponents.GridList, { className: buildClassnames.buildClassnames([className, OptionsContainer_module.container]), selectionMode: selectionMode, items: options, onSelectionChange: onSelectionChange, selectedKeys: selectedValues.map((selectedValue) => selectedValue.id), renderEmptyState: () => (React__default.default.createElement(SelectDropdownState.SelectDropdownState, { isLoading: isLoading, emptyStateSlot: emptyStateSlot })), "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, "aria-describedby": ariaDescribedBy !== null && ariaDescribedBy !== undefined ? ariaDescribedBy : `${id}-hint`, ...otherProps }, (item) => React__default.default.createElement(GridItem.GridItem, { ...item })));
+
+exports.GridList = GridList;
+//# sourceMappingURL=GridList.cjs.map

package/dist/components/SelectDropdown/components/OptionsContainers/GridList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridList.cjs","sources":["../../../../../src/components/SelectDropdown/components/OptionsContainers/GridList.tsx"],"sourcesContent":["import { GridList as AriaGridList, Key } from 'react-aria-components';\nimport React from 'react';\nimport { GridItem } from '../GridItem';\nimport { GridListProps } from './types';\nimport { buildClassnames } from '../../../../utils';\n\nimport styles from './OptionsContainer.module.scss';\nimport { SelectDropdownState } from '../SelectDropdownState';\n\nexport const GridList = ({\n  id,\n  className,\n  options,\n  onSelectionChange,\n  selectedValues,\n  selectionMode,\n  emptyStateSlot,\n  isLoading = false,\n  ariaDescribedBy,\n  ariaLabelledBy,\n  ...otherProps\n}: GridListProps) => (\n  <AriaGridList\n    className={buildClassnames([className, styles.container])}\n    selectionMode={selectionMode}\n    items={options}\n    onSelectionChange={onSelectionChange}\n    selectedKeys={selectedValues.map((selectedValue) => selectedValue.id) as Key[]}\n    renderEmptyState={() => (\n      <SelectDropdownState isLoading={isLoading} emptyStateSlot={emptyStateSlot} />\n    )}\n    aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n    aria-describedby={ariaDescribedBy ?? `${id}-hint`}\n    {...otherProps}\n  >\n    {(item) => <GridItem {...item} />}\n  </AriaGridList>\n);\n"],"names":["React","AriaGridList","buildClassnames","styles","SelectDropdownState","GridItem"],"mappings":";;;;;;;;;;;;;;AASO,MAAM,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,SAAS,EACT,OAAO,EACP,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,cAAc,EACd,SAAS,GAAG,KAAK,EACjB,eAAe,EACf,cAAc,EACd,GAAG,UAAU,EACC,MACdA,sBAAA,CAAA,aAAA,CAACC,4BAAY,EAAA,EACX,SAAS,EAAEC,+BAAe,CAAC,CAAC,SAAS,EAAEC,uBAAM,CAAC,SAAS,CAAC,CAAC,EACzD,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,OAAO,EACd,iBAAiB,EAAE,iBAAiB,EACpC,YAAY,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,aAAa,KAAK,aAAa,CAAC,EAAE,CAAU,EAC9E,gBAAgB,EAAE,OAChBH,sBAAC,CAAA,aAAA,CAAAI,uCAAmB,EAAC,EAAA,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,cAAc,EAAI,CAAA,CAC9E,qBACgB,cAAc,KAAA,IAAA,IAAd,cAAc,KAAA,SAAA,GAAd,cAAc,GAAI,CAAG,EAAA,EAAE,CAAQ,MAAA,CAAA,EAAA,kBAAA,EAC9B,eAAe,KAAA,IAAA,IAAf,eAAe,KAAA,SAAA,GAAf,eAAe,GAAI,GAAG,EAAE,CAAA,KAAA,CAAO,EAC7C,GAAA,UAAU,EAEb,EAAA,CAAC,IAAI,KAAKJ,sBAAC,CAAA,aAAA,CAAAK,iBAAQ,EAAK,EAAA,GAAA,IAAI,EAAI,CAAA,CACpB;;;;"}

package/dist/components/SelectDropdown/components/OptionsContainers/GridList.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { GridListProps } from './types';
+export declare const GridList: ({ id, className, options, onSelectionChange, selectedValues, selectionMode, emptyStateSlot, isLoading, ariaDescribedBy, ariaLabelledBy, ...otherProps }: GridListProps) => React.JSX.Element;

package/dist/components/SelectDropdown/components/OptionsContainers/GridList.js

@@ -0,0 +1,12 @@
+import { GridList as GridList$1 } from 'react-aria-components';
+import React__default from 'react';
+import { GridItem } from '../GridItem/GridItem.js';
+import { buildClassnames } from '../../../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from './OptionsContainer.module.scss.js';
+import { SelectDropdownState } from '../SelectDropdownState.js';
+
+const GridList = ({ id, className, options, onSelectionChange, selectedValues, selectionMode, emptyStateSlot, isLoading = false, ariaDescribedBy, ariaLabelledBy, ...otherProps }) => (React__default.createElement(GridList$1, { className: buildClassnames([className, styles.container]), selectionMode: selectionMode, items: options, onSelectionChange: onSelectionChange, selectedKeys: selectedValues.map((selectedValue) => selectedValue.id), renderEmptyState: () => (React__default.createElement(SelectDropdownState, { isLoading: isLoading, emptyStateSlot: emptyStateSlot })), "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, "aria-describedby": ariaDescribedBy !== null && ariaDescribedBy !== undefined ? ariaDescribedBy : `${id}-hint`, ...otherProps }, (item) => React__default.createElement(GridItem, { ...item })));
+
+export { GridList };
+//# sourceMappingURL=GridList.js.map

package/dist/components/SelectDropdown/components/OptionsContainers/GridList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridList.js","sources":["../../../../../src/components/SelectDropdown/components/OptionsContainers/GridList.tsx"],"sourcesContent":["import { GridList as AriaGridList, Key } from 'react-aria-components';\nimport React from 'react';\nimport { GridItem } from '../GridItem';\nimport { GridListProps } from './types';\nimport { buildClassnames } from '../../../../utils';\n\nimport styles from './OptionsContainer.module.scss';\nimport { SelectDropdownState } from '../SelectDropdownState';\n\nexport const GridList = ({\n  id,\n  className,\n  options,\n  onSelectionChange,\n  selectedValues,\n  selectionMode,\n  emptyStateSlot,\n  isLoading = false,\n  ariaDescribedBy,\n  ariaLabelledBy,\n  ...otherProps\n}: GridListProps) => (\n  <AriaGridList\n    className={buildClassnames([className, styles.container])}\n    selectionMode={selectionMode}\n    items={options}\n    onSelectionChange={onSelectionChange}\n    selectedKeys={selectedValues.map((selectedValue) => selectedValue.id) as Key[]}\n    renderEmptyState={() => (\n      <SelectDropdownState isLoading={isLoading} emptyStateSlot={emptyStateSlot} />\n    )}\n    aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n    aria-describedby={ariaDescribedBy ?? `${id}-hint`}\n    {...otherProps}\n  >\n    {(item) => <GridItem {...item} />}\n  </AriaGridList>\n);\n"],"names":["React","AriaGridList"],"mappings":";;;;;;;;AASO,MAAM,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,SAAS,EACT,OAAO,EACP,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,cAAc,EACd,SAAS,GAAG,KAAK,EACjB,eAAe,EACf,cAAc,EACd,GAAG,UAAU,EACC,MACdA,cAAA,CAAA,aAAA,CAACC,UAAY,EAAA,EACX,SAAS,EAAE,eAAe,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,EACzD,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,OAAO,EACd,iBAAiB,EAAE,iBAAiB,EACpC,YAAY,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,aAAa,KAAK,aAAa,CAAC,EAAE,CAAU,EAC9E,gBAAgB,EAAE,OAChBD,cAAC,CAAA,aAAA,CAAA,mBAAmB,EAAC,EAAA,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,cAAc,EAAI,CAAA,CAC9E,qBACgB,cAAc,KAAA,IAAA,IAAd,cAAc,KAAA,SAAA,GAAd,cAAc,GAAI,CAAG,EAAA,EAAE,CAAQ,MAAA,CAAA,EAAA,kBAAA,EAC9B,eAAe,KAAA,IAAA,IAAf,eAAe,KAAA,SAAA,GAAf,eAAe,GAAI,GAAG,EAAE,CAAA,KAAA,CAAO,EAC7C,GAAA,UAAU,EAEb,EAAA,CAAC,IAAI,KAAKA,cAAC,CAAA,aAAA,CAAA,QAAQ,EAAK,EAAA,GAAA,IAAI,EAAI,CAAA,CACpB;;;;"}

package/dist/components/SelectDropdown/components/OptionsContainers/ListBox.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var buildClassnames = require('../../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var OptionsContainer_module = require('./OptionsContainer.module.scss.cjs');
+var SelectDropdownState = require('../SelectDropdownState.cjs');
+var ListItemSection = require('../ListItemSection/ListItemSection.cjs');
+var ListItem = require('../ListItem/ListItem.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const ListBox = ({ id, className, ariaLabelledBy, ariaDescribedBy, selectionMode, options, onSelectionChange, selectedValues, isLoading = false, emptyStateSlot, hasSection, ...otherProps }) => (React__default.default.createElement(reactAriaComponents.ListBox, { className: buildClassnames.buildClassnames([className, OptionsContainer_module.container]), selectionMode: selectionMode, items: options, onSelectionChange: onSelectionChange, selectedKeys: selectedValues.map((selectedValue) => selectedValue.id), renderEmptyState: () => (React__default.default.createElement(SelectDropdownState.SelectDropdownState, { isLoading: isLoading, emptyStateSlot: emptyStateSlot })), "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, "aria-describedby": ariaDescribedBy !== null && ariaDescribedBy !== undefined ? ariaDescribedBy : `${id}-hint`, ...otherProps }, (item) => hasSection ? (React__default.default.createElement(ListItemSection.ListItemSection, { ...item })) : (React__default.default.createElement(ListItem.ListItem, { ...item }))));
+
+exports.ListBox = ListBox;
+//# sourceMappingURL=ListBox.cjs.map

package/dist/components/SelectDropdown/components/OptionsContainers/ListBox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBox.cjs","sources":["../../../../../src/components/SelectDropdown/components/OptionsContainers/ListBox.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBox as AriaListBox, Key } from 'react-aria-components';\nimport { buildClassnames } from '../../../../utils';\n\nimport styles from './OptionsContainer.module.scss';\nimport { SelectDropdownState } from '../SelectDropdownState';\nimport { ListItemSection } from '../ListItemSection';\nimport { ListItem } from '../ListItem';\nimport { ListItemProps } from '../ListItem/types';\nimport { ListItemSectionProps } from '../ListItemSection/ListItemSection';\nimport { ListBoxProps } from './types';\n\nexport const ListBox = ({\n  id,\n  className,\n  ariaLabelledBy,\n  ariaDescribedBy,\n  selectionMode,\n  options,\n  onSelectionChange,\n  selectedValues,\n  isLoading = false,\n  emptyStateSlot,\n  hasSection,\n  ...otherProps\n}: ListBoxProps) => (\n  <AriaListBox\n    className={buildClassnames([className, styles.container])}\n    selectionMode={selectionMode}\n    items={options}\n    onSelectionChange={onSelectionChange}\n    selectedKeys={selectedValues.map((selectedValue) => selectedValue.id) as Key[]}\n    renderEmptyState={() => (\n      <SelectDropdownState isLoading={isLoading} emptyStateSlot={emptyStateSlot} />\n    )}\n    aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n    aria-describedby={ariaDescribedBy ?? `${id}-hint`}\n    {...otherProps}\n  >\n    {(item) =>\n      hasSection ? (\n        <ListItemSection {...(item as ListItemSectionProps)} />\n      ) : (\n        <ListItem {...(item as ListItemProps)} />\n      )\n    }\n  </AriaListBox>\n);\n"],"names":["React","AriaListBox","buildClassnames","styles","SelectDropdownState","ListItemSection","ListItem"],"mappings":";;;;;;;;;;;;;;;AAYO,MAAM,OAAO,GAAG,CAAC,EACtB,EAAE,EACF,SAAS,EACT,cAAc,EACd,eAAe,EACf,aAAa,EACb,OAAO,EACP,iBAAiB,EACjB,cAAc,EACd,SAAS,GAAG,KAAK,EACjB,cAAc,EACd,UAAU,EACV,GAAG,UAAU,EACA,MACbA,sBAAA,CAAA,aAAA,CAACC,2BAAW,EAAA,EACV,SAAS,EAAEC,+BAAe,CAAC,CAAC,SAAS,EAAEC,uBAAM,CAAC,SAAS,CAAC,CAAC,EACzD,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,OAAO,EACd,iBAAiB,EAAE,iBAAiB,EACpC,YAAY,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,aAAa,KAAK,aAAa,CAAC,EAAE,CAAU,EAC9E,gBAAgB,EAAE,OAChBH,sBAAC,CAAA,aAAA,CAAAI,uCAAmB,EAAC,EAAA,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,cAAc,EAAA,CAAI,CAC9E,EAAA,iBAAA,EACgB,cAAc,KAAd,IAAA,IAAA,cAAc,KAAd,SAAA,GAAA,cAAc,GAAI,CAAG,EAAA,EAAE,CAAQ,MAAA,CAAA,EAAA,kBAAA,EAC9B,eAAe,KAAf,IAAA,IAAA,eAAe,KAAf,SAAA,GAAA,eAAe,GAAI,CAAA,EAAG,EAAE,CAAA,KAAA,CAAO,KAC7C,UAAU,EAAA,EAEb,CAAC,IAAI,KACJ,UAAU,IACRJ,sBAAC,CAAA,aAAA,CAAAK,+BAAe,OAAM,IAA6B,EAAA,CAAI,KAEvDL,sBAAC,CAAA,aAAA,CAAAM,iBAAQ,OAAM,IAAsB,EAAA,CAAI,CAC1C,CAES;;;;"}

package/dist/components/SelectDropdown/components/OptionsContainers/ListBox.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ListBoxProps } from './types';
+export declare const ListBox: ({ id, className, ariaLabelledBy, ariaDescribedBy, selectionMode, options, onSelectionChange, selectedValues, isLoading, emptyStateSlot, hasSection, ...otherProps }: ListBoxProps) => React.JSX.Element;

package/dist/components/SelectDropdown/components/OptionsContainers/ListBox.js

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import { ListBox as ListBox$1 } from 'react-aria-components';
+import { buildClassnames } from '../../../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from './OptionsContainer.module.scss.js';
+import { SelectDropdownState } from '../SelectDropdownState.js';
+import { ListItemSection } from '../ListItemSection/ListItemSection.js';
+import { ListItem } from '../ListItem/ListItem.js';
+
+const ListBox = ({ id, className, ariaLabelledBy, ariaDescribedBy, selectionMode, options, onSelectionChange, selectedValues, isLoading = false, emptyStateSlot, hasSection, ...otherProps }) => (React__default.createElement(ListBox$1, { className: buildClassnames([className, styles.container]), selectionMode: selectionMode, items: options, onSelectionChange: onSelectionChange, selectedKeys: selectedValues.map((selectedValue) => selectedValue.id), renderEmptyState: () => (React__default.createElement(SelectDropdownState, { isLoading: isLoading, emptyStateSlot: emptyStateSlot })), "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, "aria-describedby": ariaDescribedBy !== null && ariaDescribedBy !== undefined ? ariaDescribedBy : `${id}-hint`, ...otherProps }, (item) => hasSection ? (React__default.createElement(ListItemSection, { ...item })) : (React__default.createElement(ListItem, { ...item }))));
+
+export { ListBox };
+//# sourceMappingURL=ListBox.js.map

package/dist/components/SelectDropdown/components/OptionsContainers/ListBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBox.js","sources":["../../../../../src/components/SelectDropdown/components/OptionsContainers/ListBox.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBox as AriaListBox, Key } from 'react-aria-components';\nimport { buildClassnames } from '../../../../utils';\n\nimport styles from './OptionsContainer.module.scss';\nimport { SelectDropdownState } from '../SelectDropdownState';\nimport { ListItemSection } from '../ListItemSection';\nimport { ListItem } from '../ListItem';\nimport { ListItemProps } from '../ListItem/types';\nimport { ListItemSectionProps } from '../ListItemSection/ListItemSection';\nimport { ListBoxProps } from './types';\n\nexport const ListBox = ({\n  id,\n  className,\n  ariaLabelledBy,\n  ariaDescribedBy,\n  selectionMode,\n  options,\n  onSelectionChange,\n  selectedValues,\n  isLoading = false,\n  emptyStateSlot,\n  hasSection,\n  ...otherProps\n}: ListBoxProps) => (\n  <AriaListBox\n    className={buildClassnames([className, styles.container])}\n    selectionMode={selectionMode}\n    items={options}\n    onSelectionChange={onSelectionChange}\n    selectedKeys={selectedValues.map((selectedValue) => selectedValue.id) as Key[]}\n    renderEmptyState={() => (\n      <SelectDropdownState isLoading={isLoading} emptyStateSlot={emptyStateSlot} />\n    )}\n    aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n    aria-describedby={ariaDescribedBy ?? `${id}-hint`}\n    {...otherProps}\n  >\n    {(item) =>\n      hasSection ? (\n        <ListItemSection {...(item as ListItemSectionProps)} />\n      ) : (\n        <ListItem {...(item as ListItemProps)} />\n      )\n    }\n  </AriaListBox>\n);\n"],"names":["React","AriaListBox"],"mappings":";;;;;;;;;AAYO,MAAM,OAAO,GAAG,CAAC,EACtB,EAAE,EACF,SAAS,EACT,cAAc,EACd,eAAe,EACf,aAAa,EACb,OAAO,EACP,iBAAiB,EACjB,cAAc,EACd,SAAS,GAAG,KAAK,EACjB,cAAc,EACd,UAAU,EACV,GAAG,UAAU,EACA,MACbA,cAAA,CAAA,aAAA,CAACC,SAAW,EAAA,EACV,SAAS,EAAE,eAAe,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,EACzD,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,OAAO,EACd,iBAAiB,EAAE,iBAAiB,EACpC,YAAY,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,aAAa,KAAK,aAAa,CAAC,EAAE,CAAU,EAC9E,gBAAgB,EAAE,OAChBD,cAAC,CAAA,aAAA,CAAA,mBAAmB,EAAC,EAAA,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,cAAc,EAAA,CAAI,CAC9E,EAAA,iBAAA,EACgB,cAAc,KAAd,IAAA,IAAA,cAAc,KAAd,SAAA,GAAA,cAAc,GAAI,CAAG,EAAA,EAAE,CAAQ,MAAA,CAAA,EAAA,kBAAA,EAC9B,eAAe,KAAf,IAAA,IAAA,eAAe,KAAf,SAAA,GAAA,eAAe,GAAI,CAAA,EAAG,EAAE,CAAA,KAAA,CAAO,KAC7C,UAAU,EAAA,EAEb,CAAC,IAAI,KACJ,UAAU,IACRA,cAAC,CAAA,aAAA,CAAA,eAAe,OAAM,IAA6B,EAAA,CAAI,KAEvDA,cAAC,CAAA,aAAA,CAAA,QAAQ,OAAM,IAAsB,EAAA,CAAI,CAC1C,CAES;;;;"}

package/dist/components/SelectDropdown/components/OptionsContainers/OptionsContainer.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._container_jvp9b_1 {\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: var(--sizes-sm);\n  scroll-padding: var(--sizes-xs) 0;\n}\n._container_jvp9b_1[data-empty] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}");
+var styles = {"container":"_container_jvp9b_1"};
+
+module.exports = styles;
+//# sourceMappingURL=OptionsContainer.module.scss.cjs.map

package/dist/components/SelectDropdown/components/OptionsContainers/OptionsContainer.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsContainer.module.scss.cjs","sources":["../../../../../src/components/SelectDropdown/components/OptionsContainers/OptionsContainer.module.scss"],"sourcesContent":[".container {\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: var(--sizes-sm);\n  scroll-padding: var(--sizes-xs) 0;\n\n  &[data-empty] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,sPAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA;;;;"}

package/dist/components/SelectDropdown/components/OptionsContainers/OptionsContainer.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../../../_virtual/____insertStyle.js';
+
+insertStyle("._container_jvp9b_1 {\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: var(--sizes-sm);\n  scroll-padding: var(--sizes-xs) 0;\n}\n._container_jvp9b_1[data-empty] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}");
+var styles = {"container":"_container_jvp9b_1"};
+
+export { styles as default };
+//# sourceMappingURL=OptionsContainer.module.scss.js.map

package/dist/components/SelectDropdown/components/OptionsContainers/OptionsContainer.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsContainer.module.scss.js","sources":["../../../../../src/components/SelectDropdown/components/OptionsContainers/OptionsContainer.module.scss"],"sourcesContent":[".container {\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: var(--sizes-sm);\n  scroll-padding: var(--sizes-xs) 0;\n\n  &[data-empty] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,sPAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA;;;;"}

package/dist/components/SelectDropdown/components/OptionsContainers/types.d.ts

@@ -0,0 +1,25 @@
+import { ReactElement } from 'react';
+import { Selection, GridListProps as AriaGridListProps, ListBoxProps as AriaListBoxProps } from 'react-aria-components';
+import { ListItemSectionProps } from '../ListItemSection/ListItemSection';
+import { GridItemProps } from '../GridItem/types';
+import { ListItemProps } from '../ListItem/types';
+type ListProps = {
+    id?: string;
+    className?: string;
+    selectionMode: 'single' | 'multiple';
+    emptyStateSlot?: ReactElement;
+    isLoading?: boolean;
+    onSelectionChange: (keys: Selection) => void;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+};
+export type GridListProps = ListProps & Omit<AriaGridListProps<GridItemProps>, 'items' | 'selectedValues'> & {
+    options: GridItemProps[];
+    selectedValues: GridItemProps[];
+};
+export type ListBoxProps = ListProps & Omit<AriaListBoxProps<ListItemProps | ListItemSectionProps>, 'items' | 'selectedValues'> & {
+    options: (ListItemProps | ListItemSectionProps)[];
+    selectedValues: (ListItemProps | ListItemSectionProps)[];
+    hasSection?: boolean;
+};
+export {};

package/dist/components/SelectDropdown/components/SelectDropdownState.cjs

@@ -1,7 +1,10 @@
 'use strict';
 
 var React = require('react');
-var Loader = require('../../Loader/Loader.cjs');
+var FlexCol = require('../../Flex/FlexCol/FlexCol.cjs');
+var Skeleton = require('../../Skeleton/Skeleton.cjs');
+var Text = require('../../Text/Text.cjs');
+var InboxIcon = require('../../../icons/design-system/components/InboxIcon.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -9,10 +12,15 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const SelectDropdownState = ({ isLoading, emptyStateSlot }) => {
     if (isLoading)
-        return React__default.default.createElement(Loader.Loader, null);
+        return (React__default.default.createElement(FlexCol.FlexCol, { flexGrow: "1" },
+            React__default.default.createElement(Skeleton.Skeleton, { width: "100%", height: "32px" }),
+            React__default.default.createElement(Skeleton.Skeleton, { width: "100%", height: "32px" }),
+            React__default.default.createElement(Skeleton.Skeleton, { width: "100%", height: "32px" })));
     if (emptyStateSlot)
         return emptyStateSlot;
-    return React__default.default.createElement("span", null, "No items found");
+    return (React__default.default.createElement(FlexCol.FlexCol, { flexGrow: "1", alignItems: "center", justifyContent: "center", gap: "sm" },
+        React__default.default.createElement(InboxIcon.ReactComponent, null),
+        React__default.default.createElement(Text.Text, null, "No items found")));
 };
 
 exports.SelectDropdownState = SelectDropdownState;

package/dist/components/SelectDropdown/components/SelectDropdownState.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdownState.cjs","sources":["../../../../src/components/SelectDropdown/components/SelectDropdownState.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Loader } from '../../Loader';\n\ntype SelectDropdownStateProps = {\n  isLoading: boolean;\n  emptyStateSlot?: ReactElement;\n};\n\nexport const SelectDropdownState = ({ isLoading, emptyStateSlot }: SelectDropdownStateProps) => {\n  if (isLoading) return <Loader />;\n  if (emptyStateSlot) return emptyStateSlot;\n\n  return <span>No items found</span>;\n};\n"],"names":["React","Loader"],"mappings":";;;;;;;;;AAQa,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,EAA4B,KAAI;AAC7F,IAAA,IAAI,SAAS;QAAE,OAAOA,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,IAAA,CAAG;AAChC,IAAA,IAAI,cAAc;AAAE,QAAA,OAAO,cAAc;AAEzC,IAAA,OAAOD,oEAA2B;AACpC;;;;"}
+{"version":3,"file":"SelectDropdownState.cjs","sources":["../../../../src/components/SelectDropdown/components/SelectDropdownState.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { Skeleton } from '../../Skeleton';\nimport { Text } from '../../Text';\nimport { InboxIcon } from '../../../icons';\n\ntype SelectDropdownStateProps = {\n  isLoading: boolean;\n  emptyStateSlot?: ReactElement;\n};\n\nexport const SelectDropdownState = ({ isLoading, emptyStateSlot }: SelectDropdownStateProps) => {\n  if (isLoading)\n    return (\n      <FlexCol flexGrow=\"1\">\n        <Skeleton width=\"100%\" height=\"32px\" />\n        <Skeleton width=\"100%\" height=\"32px\" />\n        <Skeleton width=\"100%\" height=\"32px\" />\n      </FlexCol>\n    );\n  if (emptyStateSlot) return emptyStateSlot;\n\n  return (\n    <FlexCol flexGrow=\"1\" alignItems=\"center\" justifyContent=\"center\" gap=\"sm\">\n      <InboxIcon />\n      <Text>No items found</Text>\n    </FlexCol>\n  );\n};\n"],"names":["React","FlexCol","Skeleton","InboxIcon","Text"],"mappings":";;;;;;;;;;;;AAWa,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,EAA4B,KAAI;AAC7F,IAAA,IAAI,SAAS;AACX,QAAA,QACEA,sBAAC,CAAA,aAAA,CAAAC,eAAO,EAAC,EAAA,QAAQ,EAAC,GAAG,EAAA;YACnBD,sBAAC,CAAA,aAAA,CAAAE,iBAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAG,CAAA;YACvCF,sBAAC,CAAA,aAAA,CAAAE,iBAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAG,CAAA;AACvC,YAAAF,sBAAA,CAAA,aAAA,CAACE,iBAAQ,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAA,CAAG,CAC/B;AAEd,IAAA,IAAI,cAAc;AAAE,QAAA,OAAO,cAAc;AAEzC,IAAA,QACEF,sBAAC,CAAA,aAAA,CAAAC,eAAO,IAAC,QAAQ,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAA;AACxE,QAAAD,sBAAA,CAAA,aAAA,CAACG,wBAAS,EAAG,IAAA,CAAA;AACb,QAAAH,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAA,IAAA,EAAA,gBAAA,CAAsB,CACnB;AAEd;;;;"}

package/dist/components/SelectDropdown/components/SelectDropdownState.js

@@ -1,12 +1,20 @@
 import React__default from 'react';
-import { Loader } from '../../Loader/Loader.js';
+import { FlexCol } from '../../Flex/FlexCol/FlexCol.js';
+import { Skeleton } from '../../Skeleton/Skeleton.js';
+import { Text } from '../../Text/Text.js';
+import { ReactComponent as InboxIcon } from '../../../icons/design-system/components/InboxIcon.js';
 
 const SelectDropdownState = ({ isLoading, emptyStateSlot }) => {
     if (isLoading)
-        return React__default.createElement(Loader, null);
+        return (React__default.createElement(FlexCol, { flexGrow: "1" },
+            React__default.createElement(Skeleton, { width: "100%", height: "32px" }),
+            React__default.createElement(Skeleton, { width: "100%", height: "32px" }),
+            React__default.createElement(Skeleton, { width: "100%", height: "32px" })));
     if (emptyStateSlot)
         return emptyStateSlot;
-    return React__default.createElement("span", null, "No items found");
+    return (React__default.createElement(FlexCol, { flexGrow: "1", alignItems: "center", justifyContent: "center", gap: "sm" },
+        React__default.createElement(InboxIcon, null),
+        React__default.createElement(Text, null, "No items found")));
 };
 
 export { SelectDropdownState };

package/dist/components/SelectDropdown/components/SelectDropdownState.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdownState.js","sources":["../../../../src/components/SelectDropdown/components/SelectDropdownState.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Loader } from '../../Loader';\n\ntype SelectDropdownStateProps = {\n  isLoading: boolean;\n  emptyStateSlot?: ReactElement;\n};\n\nexport const SelectDropdownState = ({ isLoading, emptyStateSlot }: SelectDropdownStateProps) => {\n  if (isLoading) return <Loader />;\n  if (emptyStateSlot) return emptyStateSlot;\n\n  return <span>No items found</span>;\n};\n"],"names":["React"],"mappings":";;;AAQa,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,EAA4B,KAAI;AAC7F,IAAA,IAAI,SAAS;QAAE,OAAOA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,CAAG;AAChC,IAAA,IAAI,cAAc;AAAE,QAAA,OAAO,cAAc;AAEzC,IAAA,OAAOA,4DAA2B;AACpC;;;;"}
+{"version":3,"file":"SelectDropdownState.js","sources":["../../../../src/components/SelectDropdown/components/SelectDropdownState.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { Skeleton } from '../../Skeleton';\nimport { Text } from '../../Text';\nimport { InboxIcon } from '../../../icons';\n\ntype SelectDropdownStateProps = {\n  isLoading: boolean;\n  emptyStateSlot?: ReactElement;\n};\n\nexport const SelectDropdownState = ({ isLoading, emptyStateSlot }: SelectDropdownStateProps) => {\n  if (isLoading)\n    return (\n      <FlexCol flexGrow=\"1\">\n        <Skeleton width=\"100%\" height=\"32px\" />\n        <Skeleton width=\"100%\" height=\"32px\" />\n        <Skeleton width=\"100%\" height=\"32px\" />\n      </FlexCol>\n    );\n  if (emptyStateSlot) return emptyStateSlot;\n\n  return (\n    <FlexCol flexGrow=\"1\" alignItems=\"center\" justifyContent=\"center\" gap=\"sm\">\n      <InboxIcon />\n      <Text>No items found</Text>\n    </FlexCol>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AAWa,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,EAA4B,KAAI;AAC7F,IAAA,IAAI,SAAS;AACX,QAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EAAC,EAAA,QAAQ,EAAC,GAAG,EAAA;YACnBA,cAAC,CAAA,aAAA,CAAA,QAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAG,CAAA;YACvCA,cAAC,CAAA,aAAA,CAAA,QAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAG,CAAA;AACvC,YAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAA,CAAG,CAC/B;AAEd,IAAA,IAAI,cAAc;AAAE,QAAA,OAAO,cAAc;AAEzC,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,QAAQ,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAA;AACxE,QAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAG,IAAA,CAAA;AACb,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,IAAA,EAAA,gBAAA,CAAsB,CACnB;AAEd;;;;"}

package/dist/components/SelectDropdown/components/SelectedOption.cjs

@@ -15,10 +15,10 @@ const SelectedOption = ({ placeholder, options, selectionMode }) => {
     }
     if (selectionMode === 'single') {
         return (React__default.default.createElement(FlexRow.FlexRow, { gap: "sm" },
-            React__default.default.createElement(Text.Text, { variant: "placeholder" }, (_a = options[0]) === null || _a === undefined ? undefined : _a.label),
+            React__default.default.createElement(Text.Text, { variant: "body" }, (_a = options[0]) === null || _a === undefined ? undefined : _a.label),
             ((_b = options[0]) === null || _b === undefined ? undefined : _b.itemInfoSlot) && React__default.default.createElement(Text.Text, { variant: "hintText" }, (_c = options[0]) === null || _c === undefined ? undefined : _c.itemInfoSlot)));
     }
-    return React__default.default.createElement(Text.Text, { variant: "placeholder" }, options.map((opt) => opt.label).join(', '));
+    return React__default.default.createElement(Text.Text, { variant: "body" }, options.map((opt) => opt.label).join(', '));
 };
 
 exports.SelectedOption = SelectedOption;

package/dist/components/SelectDropdown/components/SelectedOption.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectedOption.cjs","sources":["../../../../src/components/SelectDropdown/components/SelectedOption.tsx"],"sourcesContent":["import React from 'react';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { SelectDropdownItem } from '../types';\n\ntype SelectedOptionProps = {\n  placeholder: string;\n  options: SelectDropdownItem[];\n  selectionMode: 'single' | 'multiple';\n};\n\nexport const SelectedOption = ({ placeholder, options, selectionMode }: SelectedOptionProps) => {\n  if (options.length === 0) {\n    return <Text variant=\"placeholder\">{placeholder}</Text>;\n  }\n\n  if (selectionMode === 'single') {\n    return (\n      <FlexRow gap=\"sm\">\n        <Text variant=\"placeholder\">{options[0]?.label}</Text>\n        {options[0]?.itemInfoSlot && <Text variant=\"hintText\">{options[0]?.itemInfoSlot}</Text>}\n      </FlexRow>\n    );\n  }\n\n  return <Text variant=\"placeholder\">{options.map((opt: any) => opt.label).join(', ')}</Text>;\n};\n"],"names":["React","Text","FlexRow"],"mappings":";;;;;;;;;;AAWO,MAAM,cAAc,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAuB,KAAI;;AAC7F,IAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;QACxB,OAAOA,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAC,EAAA,OAAO,EAAC,aAAa,EAAA,EAAE,WAAW,CAAQ;AACxD;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE;AAC9B,QAAA,QACED,sBAAC,CAAA,aAAA,CAAAE,eAAO,EAAC,EAAA,GAAG,EAAC,IAAI,EAAA;AACf,YAAAF,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAC,OAAO,EAAC,aAAa,EAAA,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,KAAK,CAAQ;YACrD,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,gDAAE,YAAY,KAAID,sBAAC,CAAA,aAAA,CAAAC,SAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAA,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,YAAY,CAAQ,CAC/E;AAEb;IAED,OAAOD,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAC,OAAO,EAAC,aAAa,EAAA,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,GAAQ,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ;AAC7F;;;;"}
+{"version":3,"file":"SelectedOption.cjs","sources":["../../../../src/components/SelectDropdown/components/SelectedOption.tsx"],"sourcesContent":["import React from 'react';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { SelectDropdownItem } from '../types';\n\ntype SelectedOptionProps = {\n  placeholder: string;\n  options: SelectDropdownItem[];\n  selectionMode: 'single' | 'multiple';\n};\n\nexport const SelectedOption = ({ placeholder, options, selectionMode }: SelectedOptionProps) => {\n  if (options.length === 0) {\n    return <Text variant=\"placeholder\">{placeholder}</Text>;\n  }\n\n  if (selectionMode === 'single') {\n    return (\n      <FlexRow gap=\"sm\">\n        <Text variant=\"body\">{options[0]?.label}</Text>\n        {options[0]?.itemInfoSlot && <Text variant=\"hintText\">{options[0]?.itemInfoSlot}</Text>}\n      </FlexRow>\n    );\n  }\n\n  return <Text variant=\"body\">{options.map((opt: any) => opt.label).join(', ')}</Text>;\n};\n"],"names":["React","Text","FlexRow"],"mappings":";;;;;;;;;;AAWO,MAAM,cAAc,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAuB,KAAI;;AAC7F,IAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;QACxB,OAAOA,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAC,EAAA,OAAO,EAAC,aAAa,EAAA,EAAE,WAAW,CAAQ;AACxD;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE;AAC9B,QAAA,QACED,sBAAC,CAAA,aAAA,CAAAE,eAAO,EAAC,EAAA,GAAG,EAAC,IAAI,EAAA;AACf,YAAAF,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,KAAK,CAAQ;YAC9C,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,gDAAE,YAAY,KAAID,sBAAC,CAAA,aAAA,CAAAC,SAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAA,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,YAAY,CAAQ,CAC/E;AAEb;IAED,OAAOD,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,GAAQ,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ;AACtF;;;;"}

package/dist/components/SelectDropdown/components/SelectedOption.js

@@ -9,10 +9,10 @@ const SelectedOption = ({ placeholder, options, selectionMode }) => {
     }
     if (selectionMode === 'single') {
         return (React__default.createElement(FlexRow, { gap: "sm" },
-            React__default.createElement(Text, { variant: "placeholder" }, (_a = options[0]) === null || _a === undefined ? undefined : _a.label),
+            React__default.createElement(Text, { variant: "body" }, (_a = options[0]) === null || _a === undefined ? undefined : _a.label),
             ((_b = options[0]) === null || _b === undefined ? undefined : _b.itemInfoSlot) && React__default.createElement(Text, { variant: "hintText" }, (_c = options[0]) === null || _c === undefined ? undefined : _c.itemInfoSlot)));
     }
-    return React__default.createElement(Text, { variant: "placeholder" }, options.map((opt) => opt.label).join(', '));
+    return React__default.createElement(Text, { variant: "body" }, options.map((opt) => opt.label).join(', '));
 };
 
 export { SelectedOption };

package/dist/components/SelectDropdown/components/SelectedOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectedOption.js","sources":["../../../../src/components/SelectDropdown/components/SelectedOption.tsx"],"sourcesContent":["import React from 'react';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { SelectDropdownItem } from '../types';\n\ntype SelectedOptionProps = {\n  placeholder: string;\n  options: SelectDropdownItem[];\n  selectionMode: 'single' | 'multiple';\n};\n\nexport const SelectedOption = ({ placeholder, options, selectionMode }: SelectedOptionProps) => {\n  if (options.length === 0) {\n    return <Text variant=\"placeholder\">{placeholder}</Text>;\n  }\n\n  if (selectionMode === 'single') {\n    return (\n      <FlexRow gap=\"sm\">\n        <Text variant=\"placeholder\">{options[0]?.label}</Text>\n        {options[0]?.itemInfoSlot && <Text variant=\"hintText\">{options[0]?.itemInfoSlot}</Text>}\n      </FlexRow>\n    );\n  }\n\n  return <Text variant=\"placeholder\">{options.map((opt: any) => opt.label).join(', ')}</Text>;\n};\n"],"names":["React"],"mappings":";;;;AAWO,MAAM,cAAc,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAuB,KAAI;;AAC7F,IAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;QACxB,OAAOA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,aAAa,EAAA,EAAE,WAAW,CAAQ;AACxD;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE;AAC9B,QAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EAAC,EAAA,GAAG,EAAC,IAAI,EAAA;AACf,YAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,aAAa,EAAA,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,KAAK,CAAQ;YACrD,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,gDAAE,YAAY,KAAIA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAA,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,YAAY,CAAQ,CAC/E;AAEb;IAED,OAAOA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,aAAa,EAAA,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,GAAQ,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ;AAC7F;;;;"}
+{"version":3,"file":"SelectedOption.js","sources":["../../../../src/components/SelectDropdown/components/SelectedOption.tsx"],"sourcesContent":["import React from 'react';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { SelectDropdownItem } from '../types';\n\ntype SelectedOptionProps = {\n  placeholder: string;\n  options: SelectDropdownItem[];\n  selectionMode: 'single' | 'multiple';\n};\n\nexport const SelectedOption = ({ placeholder, options, selectionMode }: SelectedOptionProps) => {\n  if (options.length === 0) {\n    return <Text variant=\"placeholder\">{placeholder}</Text>;\n  }\n\n  if (selectionMode === 'single') {\n    return (\n      <FlexRow gap=\"sm\">\n        <Text variant=\"body\">{options[0]?.label}</Text>\n        {options[0]?.itemInfoSlot && <Text variant=\"hintText\">{options[0]?.itemInfoSlot}</Text>}\n      </FlexRow>\n    );\n  }\n\n  return <Text variant=\"body\">{options.map((opt: any) => opt.label).join(', ')}</Text>;\n};\n"],"names":["React"],"mappings":";;;;AAWO,MAAM,cAAc,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAuB,KAAI;;AAC7F,IAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;QACxB,OAAOA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,aAAa,EAAA,EAAE,WAAW,CAAQ;AACxD;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE;AAC9B,QAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EAAC,EAAA,GAAG,EAAC,IAAI,EAAA;AACf,YAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,KAAK,CAAQ;YAC9C,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,gDAAE,YAAY,KAAIA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAA,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,YAAY,CAAQ,CAC/E;AAEb;IAED,OAAOA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,GAAQ,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ;AACtF;;;;"}

package/dist/components/SelectDropdown/components/item.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._item_19dv4_1 {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n}\n._item_19dv4_1._appearance-secondary_19dv4_7 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._item_19dv4_1[data-hovered] > div, ._item_19dv4_1[data-hovered] > div:first-of-type[role=gridcell] > :first-child {\n  background-color: #f0f7fc;\n}\n._item_19dv4_1[data-pressed] > div, ._item_19dv4_1[data-pressed] > div:first-of-type[role=gridcell] > :first-child {\n  background-color: #e3f0fa;\n}\n._item_19dv4_1[data-focused] {\n  outline: 0;\n}\n._item_19dv4_1[data-focus-visible] > div, ._item_19dv4_1[data-focus-visible] > div:first-of-type[role=gridcell] > :first-child {\n  outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n  z-index: 1;\n  position: relative;\n}\n._item_19dv4_1[data-dragging] {\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--color-secondary-blue-base);\n}\n._item_19dv4_1[data-drop-target] {\n  background-color: var(--colors-secondary-green-base);\n  border-color: var(--colors-secondary-green-base);\n}\n._item_19dv4_1[data-disabled] {\n  cursor: not-allowed;\n  background-color: var(--colors-neutral-grey-light);\n  opacity: 0.75;\n}\n._item_19dv4_1 > div,\n._item_19dv4_1 > div:first-of-type[role=gridcell] > :first-child {\n  padding: var(--sizes-sm);\n  border-radius: var(--radius-base);\n}");
-var styles = {"item":"_item_19dv4_1","appearance-secondary":"_appearance-secondary_19dv4_7"};
+___$insertStyle("._item_1dwbl_1 {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n}\n._item_1dwbl_1._appearance-secondary_1dwbl_7 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._item_1dwbl_1[data-hovered] > div, ._item_1dwbl_1[data-hovered] > div:first-of-type[role=gridcell] > :first-child {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._item_1dwbl_1[data-pressed] > div, ._item_1dwbl_1[data-pressed] > div:first-of-type[role=gridcell] > :first-child {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._item_1dwbl_1[data-focused] {\n  outline: 0;\n}\n._item_1dwbl_1[data-focus-visible] > div, ._item_1dwbl_1[data-focus-visible] > div:first-of-type[role=gridcell] > :first-child {\n  outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n  z-index: 1;\n  position: relative;\n}\n._item_1dwbl_1[data-dragging] {\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--color-secondary-blue-base);\n}\n._item_1dwbl_1[data-drop-target] {\n  background-color: var(--colors-secondary-green-base);\n  border-color: var(--colors-secondary-green-base);\n}\n._item_1dwbl_1[data-disabled] {\n  cursor: not-allowed;\n  background-color: var(--colors-neutral-grey-light);\n  opacity: 0.75;\n}\n._item_1dwbl_1 > div,\n._item_1dwbl_1 > div:first-of-type[role=gridcell] > :first-child {\n  padding: var(--sizes-sm);\n  border-radius: var(--radius-base);\n}");
+var itemStyles = {"item":"_item_1dwbl_1","appearance-secondary":"_appearance-secondary_1dwbl_7"};
 
-module.exports = styles;
+module.exports = itemStyles;
 //# sourceMappingURL=item.module.scss.cjs.map