@veeqo/ui 11.3.1 → 11.3.2

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

@@ -1,19 +1,22 @@
 'use strict';
 
 var React = require('react');
+var reactAriaComponents = require('react-aria-components');
 require('../../../hooks/useFocusVisible.cjs');
 var useId = require('../../../hooks/useId.cjs');
 require('lodash.throttle');
-var styled = require('./styled.cjs');
 var ListItemContent = require('./components/ListItemContent.cjs');
+var ListItem_module = require('./ListItem.module.scss.cjs');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const ListItem = ({ id, label, href, ...props }) => {
+const ListItem = ({ id, label, href, appearance = 'primary', ...props }) => {
     const idComputed = useId.useId({ id, prefix: 'list-item' });
-    return (React__default.default.createElement(styled.StyledListItem, { id: idComputed, textValue: label, href: href, ...props }, ({ selectionMode, allowsDragging, isSelected }) => (React__default.default.createElement(ListItemContent.ListItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, label: label, isLink: Boolean(href), ...props }))));
+    return (React__default.default.createElement(reactAriaComponents.ListBoxItem, { id: idComputed, textValue: label, href: href, className: buildClassnames.buildClassnames([ListItem_module.listItem, ListItem_module[`appearance-${appearance}`]]), ...props }, ({ selectionMode, allowsDragging, isSelected }) => (React__default.default.createElement(ListItemContent.ListItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, label: label, isLink: Boolean(href), appearance: appearance, ...props }))));
 };
 
 exports.ListItem = ListItem;

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.cjs","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../hooks';\nimport { StyledListItem } from './styled';\nimport { ListItemProps } from './types';\nimport { ListItemContent } from './components/ListItemContent';\n\nexport const ListItem = ({ id, label, href, ...props }: ListItemProps) => {\n  const idComputed = useId({ id, prefix: 'list-item' });\n  return (\n    <StyledListItem id={idComputed} textValue={label} href={href} {...props}>\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected }: ListBoxItemRenderProps) => (\n        <ListItemContent\n          selectionMode={selectionMode}\n          allowsDragging={allowsDragging}\n          isSelected={isSelected}\n          label={label}\n          isLink={Boolean(href)}\n          {...props}\n        />\n      )}\n    </StyledListItem>\n  );\n};\n"],"names":["useId","React","StyledListItem","ListItemContent"],"mappings":";;;;;;;;;;;;;AAOa,MAAA,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAiB,KAAI;AACvE,IAAA,MAAM,UAAU,GAAGA,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AACrD,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,qBAAc,EAAA,EAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAA,GAAM,KAAK,EAAA,EAEpE,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrED,sBAAC,CAAA,aAAA,CAAAE,+BAAe,EACd,EAAA,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EAAA,GACjB,KAAK,EAAA,CACT,CACH,CACc;AAErB;;;;"}
+{"version":3,"file":"ListItem.cjs","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItem, ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../hooks';\nimport { ListItemProps } from './types';\nimport { ListItemContent } from './components/ListItemContent';\nimport styles from './ListItem.module.scss';\nimport { buildClassnames } from '../../../utils';\n\nexport const ListItem = ({ id, label, href, appearance = 'primary', ...props }: 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.listItem, styles[`appearance-${appearance}`]])}\n      {...props}\n    >\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected }: ListBoxItemRenderProps) => (\n        <ListItemContent\n          selectionMode={selectionMode}\n          allowsDragging={allowsDragging}\n          isSelected={isSelected}\n          label={label}\n          isLink={Boolean(href)}\n          appearance={appearance}\n          {...props}\n        />\n      )}\n    </ListBoxItem>\n  );\n};\n"],"names":["useId","React","ListBoxItem","buildClassnames","styles","ListItemContent"],"mappings":";;;;;;;;;;;;;;;;MAQa,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,GAAG,SAAS,EAAE,GAAG,KAAK,EAAiB,KAAI;AAC/F,IAAA,MAAM,UAAU,GAAGA,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AAErD,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,+BAAW,EACV,EAAA,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAEC,+BAAe,CAAC,CAACC,eAAM,CAAC,QAAQ,EAAEA,eAAM,CAAC,cAAc,UAAU,CAAA,CAAE,CAAC,CAAC,CAAC,EAC7E,GAAA,KAAK,IAGR,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrEH,sBAAA,CAAA,aAAA,CAACI,+BAAe,EACd,EAAA,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,EAClB,GAAA,KAAK,GACT,CACH,CACW;AAElB;;;;"}

package/dist/components/SelectDropdown/ListItem/ListItem.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { ListItemProps } from './types';
-export declare const ListItem: ({ id, label, href, ...props }: ListItemProps) => React.JSX.Element;
+export declare const ListItem: ({ id, label, href, appearance, ...props }: ListItemProps) => React.JSX.Element;

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

@@ -1,13 +1,16 @@
 import React__default from 'react';
+import { ListBoxItem } from 'react-aria-components';
 import '../../../hooks/useFocusVisible.js';
 import { useId } from '../../../hooks/useId.js';
 import 'lodash.throttle';
-import { StyledListItem } from './styled.js';
 import { ListItemContent } from './components/ListItemContent.js';
+import styles from './ListItem.module.scss.js';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
 
-const ListItem = ({ id, label, href, ...props }) => {
+const ListItem = ({ id, label, href, appearance = 'primary', ...props }) => {
     const idComputed = useId({ id, prefix: 'list-item' });
-    return (React__default.createElement(StyledListItem, { id: idComputed, textValue: label, href: href, ...props }, ({ selectionMode, allowsDragging, isSelected }) => (React__default.createElement(ListItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, label: label, isLink: Boolean(href), ...props }))));
+    return (React__default.createElement(ListBoxItem, { id: idComputed, textValue: label, href: href, className: buildClassnames([styles.listItem, styles[`appearance-${appearance}`]]), ...props }, ({ selectionMode, allowsDragging, isSelected }) => (React__default.createElement(ListItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, label: label, isLink: Boolean(href), appearance: appearance, ...props }))));
 };
 
 export { ListItem };

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../hooks';\nimport { StyledListItem } from './styled';\nimport { ListItemProps } from './types';\nimport { ListItemContent } from './components/ListItemContent';\n\nexport const ListItem = ({ id, label, href, ...props }: ListItemProps) => {\n  const idComputed = useId({ id, prefix: 'list-item' });\n  return (\n    <StyledListItem id={idComputed} textValue={label} href={href} {...props}>\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected }: ListBoxItemRenderProps) => (\n        <ListItemContent\n          selectionMode={selectionMode}\n          allowsDragging={allowsDragging}\n          isSelected={isSelected}\n          label={label}\n          isLink={Boolean(href)}\n          {...props}\n        />\n      )}\n    </StyledListItem>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;AAOa,MAAA,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAiB,KAAI;AACvE,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AACrD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAA,GAAM,KAAK,EAAA,EAEpE,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrEA,cAAC,CAAA,aAAA,CAAA,eAAe,EACd,EAAA,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EAAA,GACjB,KAAK,EAAA,CACT,CACH,CACc;AAErB;;;;"}
+{"version":3,"file":"ListItem.js","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItem, ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../hooks';\nimport { ListItemProps } from './types';\nimport { ListItemContent } from './components/ListItemContent';\nimport styles from './ListItem.module.scss';\nimport { buildClassnames } from '../../../utils';\n\nexport const ListItem = ({ id, label, href, appearance = 'primary', ...props }: 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.listItem, styles[`appearance-${appearance}`]])}\n      {...props}\n    >\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected }: ListBoxItemRenderProps) => (\n        <ListItemContent\n          selectionMode={selectionMode}\n          allowsDragging={allowsDragging}\n          isSelected={isSelected}\n          label={label}\n          isLink={Boolean(href)}\n          appearance={appearance}\n          {...props}\n        />\n      )}\n    </ListBoxItem>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;MAQa,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,GAAG,SAAS,EAAE,GAAG,KAAK,EAAiB,KAAI;AAC/F,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AAErD,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,WAAW,EACV,EAAA,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,cAAc,UAAU,CAAA,CAAE,CAAC,CAAC,CAAC,EAC7E,GAAA,KAAK,IAGR,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrEA,cAAA,CAAA,aAAA,CAAC,eAAe,EACd,EAAA,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,EAClB,GAAA,KAAK,GACT,CACH,CACW;AAElB;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._listItem_y5fce_1 {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n}\n._listItem_y5fce_1._appearance-secondary_y5fce_7 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._listItem_y5fce_1[data-hovered] > div {\n  background-color: #f0f7fc;\n}\n._listItem_y5fce_1[data-pressed] > div {\n  background-color: #e3f0fa;\n}\n._listItem_y5fce_1[data-focused] {\n  outline: 0;\n}\n._listItem_y5fce_1[data-focus-visible] > div {\n  outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n  z-index: 1;\n  position: relative;\n}\n._listItem_y5fce_1[data-dragging] {\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--color-secondary-blue-base);\n}\n._listItem_y5fce_1[data-drop-target] {\n  background-color: var(--colors-secondary-green-base);\n  border-color: var(--colors-secondary-green-base);\n}\n._listItem_y5fce_1[data-disabled] {\n  cursor: not-allowed;\n  background-color: var(--colors-neutral-grey-light);\n  opacity: 0.75;\n}\n._listItem_y5fce_1 > div {\n  padding: var(--sizes-sm);\n  border-radius: var(--radius-base);\n}\n\n._linkIcon_y5fce_42 {\n  color: var(--colors-neutral-ink-base);\n}\n\n._infoContainer_y5fce_46 {\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_y5fce_46._hasItemInfoAndEndInfo_y5fce_54 {\n  grid-template-columns: auto 1fr 1fr;\n}\n._infoContainer_y5fce_46._hasItemInfoOnly_y5fce_57, ._infoContainer_y5fce_46._hasEndInfoOnly_y5fce_57 {\n  grid-template-columns: auto 1fr;\n}\n._infoContainer_y5fce_46 > *:last-child._justifyEnd_y5fce_60 {\n  justify-self: end;\n}\n._infoContainer_y5fce_46 > *:last-child._justifyStart_y5fce_63 {\n  justify-self: start;\n}");
+var styles = {"listItem":"_listItem_y5fce_1","appearance-secondary":"_appearance-secondary_y5fce_7","linkIcon":"_linkIcon_y5fce_42","infoContainer":"_infoContainer_y5fce_46","hasItemInfoAndEndInfo":"_hasItemInfoAndEndInfo_y5fce_54","hasItemInfoOnly":"_hasItemInfoOnly_y5fce_57","hasEndInfoOnly":"_hasEndInfoOnly_y5fce_57","justifyEnd":"_justifyEnd_y5fce_60","justifyStart":"_justifyStart_y5fce_63"};
+
+module.exports = styles;
+//# sourceMappingURL=ListItem.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.module.scss.cjs","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.module.scss"],"sourcesContent":[".listItem {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n\n  &.appearance-secondary {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n\n  &[data-hovered] > div {\n    background-color: #f0f7fc;\n  }\n\n  &[data-pressed] > div {\n    background-color: #e3f0fa;\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div {\n    outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: var(--colors-neutral-grey-base);\n    border-color: var(--color-secondary-blue-base);\n  }\n\n  &[data-drop-target] {\n    background-color: var(--colors-secondary-green-base);\n    border-color: var(--colors-secondary-green-base);\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: var(--colors-neutral-grey-light);\n    opacity: 0.75;\n  }\n\n  > div {\n    padding: var(--sizes-sm);\n    border-radius: var(--radius-base);\n  }\n}\n\n.linkIcon {\n  color: var(--colors-neutral-ink-base);\n}\n\n.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"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,gwDAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,sBAAA,CAAA,+BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../../_virtual/____insertStyle.js';
+
+insertStyle("._listItem_y5fce_1 {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n}\n._listItem_y5fce_1._appearance-secondary_y5fce_7 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._listItem_y5fce_1[data-hovered] > div {\n  background-color: #f0f7fc;\n}\n._listItem_y5fce_1[data-pressed] > div {\n  background-color: #e3f0fa;\n}\n._listItem_y5fce_1[data-focused] {\n  outline: 0;\n}\n._listItem_y5fce_1[data-focus-visible] > div {\n  outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n  z-index: 1;\n  position: relative;\n}\n._listItem_y5fce_1[data-dragging] {\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--color-secondary-blue-base);\n}\n._listItem_y5fce_1[data-drop-target] {\n  background-color: var(--colors-secondary-green-base);\n  border-color: var(--colors-secondary-green-base);\n}\n._listItem_y5fce_1[data-disabled] {\n  cursor: not-allowed;\n  background-color: var(--colors-neutral-grey-light);\n  opacity: 0.75;\n}\n._listItem_y5fce_1 > div {\n  padding: var(--sizes-sm);\n  border-radius: var(--radius-base);\n}\n\n._linkIcon_y5fce_42 {\n  color: var(--colors-neutral-ink-base);\n}\n\n._infoContainer_y5fce_46 {\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_y5fce_46._hasItemInfoAndEndInfo_y5fce_54 {\n  grid-template-columns: auto 1fr 1fr;\n}\n._infoContainer_y5fce_46._hasItemInfoOnly_y5fce_57, ._infoContainer_y5fce_46._hasEndInfoOnly_y5fce_57 {\n  grid-template-columns: auto 1fr;\n}\n._infoContainer_y5fce_46 > *:last-child._justifyEnd_y5fce_60 {\n  justify-self: end;\n}\n._infoContainer_y5fce_46 > *:last-child._justifyStart_y5fce_63 {\n  justify-self: start;\n}");
+var styles = {"listItem":"_listItem_y5fce_1","appearance-secondary":"_appearance-secondary_y5fce_7","linkIcon":"_linkIcon_y5fce_42","infoContainer":"_infoContainer_y5fce_46","hasItemInfoAndEndInfo":"_hasItemInfoAndEndInfo_y5fce_54","hasItemInfoOnly":"_hasItemInfoOnly_y5fce_57","hasEndInfoOnly":"_hasEndInfoOnly_y5fce_57","justifyEnd":"_justifyEnd_y5fce_60","justifyStart":"_justifyStart_y5fce_63"};
+
+export { styles as default };
+//# sourceMappingURL=ListItem.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.module.scss.js","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.module.scss"],"sourcesContent":[".listItem {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n\n  &.appearance-secondary {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n\n  &[data-hovered] > div {\n    background-color: #f0f7fc;\n  }\n\n  &[data-pressed] > div {\n    background-color: #e3f0fa;\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div {\n    outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: var(--colors-neutral-grey-base);\n    border-color: var(--color-secondary-blue-base);\n  }\n\n  &[data-drop-target] {\n    background-color: var(--colors-secondary-green-base);\n    border-color: var(--colors-secondary-green-base);\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: var(--colors-neutral-grey-light);\n    opacity: 0.75;\n  }\n\n  > div {\n    padding: var(--sizes-sm);\n    border-radius: var(--radius-base);\n  }\n}\n\n.linkIcon {\n  color: var(--colors-neutral-ink-base);\n}\n\n.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"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,gwDAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,sBAAA,CAAA,+BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}

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

@@ -2,33 +2,51 @@
 
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
+var buildClassnames = require('../../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var FlexCol = require('../../../Flex/FlexCol/FlexCol.cjs');
+var ArrowRightIcon = require('../../../../icons/design-system/components/ArrowRightIcon.cjs');
 var DragIndicatorIcon = require('../../../../icons/design-system/components/DragIndicatorIcon.cjs');
-var styled = require('../styled.cjs');
 var Text = require('../../../Text/Text.cjs');
-var Stack = require('../../../Stack/Stack.cjs');
-require('../../../Stack/types.cjs');
 var MiniAlert = require('../../../Alerts/MiniAlert/MiniAlert.cjs');
 var SelectionType = require('./SelectionType.cjs');
+var ListItem_module = require('../ListItem.module.scss.cjs');
+var FlexRow = require('../../../Flex/FlexRow/FlexRow.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const ListItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging = false, selectionMode = 'single', isLink, isSelected = false, }) => (React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", alignX: "between" },
-    React__default.default.createElement(styled.HorizontalContainer, null,
-        allowsDragging && React__default.default.createElement(DragIndicatorIcon.ReactComponent, { "data-testid": "drag-icon" }),
-        React__default.default.createElement(SelectionType.SelectionType, { selectionMode: selectionMode, isSelected: isSelected, isLink: isLink }),
-        mediaSlot,
-        React__default.default.createElement(styled.VerticalContainer, null,
-            React__default.default.createElement(styled.InfoContainer, { hasItemInfoSlot: Boolean(itemInfoSlot), hasEndInfoSlot: Boolean(endInfoSlot), "data-testid": "info-container" },
-                React__default.default.createElement(reactAriaComponents.Text, { slot: "label" },
-                    React__default.default.createElement(Text.Text, { variant: "body" }, label)),
-                itemInfoSlot,
-                endInfoSlot),
-            hint && (React__default.default.createElement(reactAriaComponents.Text, { slot: "description" },
-                React__default.default.createElement(Text.Text, { variant: "hintText" }, hint))),
-            alert && React__default.default.createElement(MiniAlert.MiniAlert, { title: alert.title, variant: alert.variant }))),
-    isLink && React__default.default.createElement(styled.LinkIcon, { "data-testid": "link-icon" })));
+const ListItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging = false, selectionMode = 'single', isLink, isSelected = false, }) => {
+    const getInfoContainerClassNames = React.useMemo(() => {
+        const base = ListItem_module.infoContainer;
+        if (itemInfoSlot && endInfoSlot) {
+            return buildClassnames.buildClassnames([base, ListItem_module.hasItemInfoAndEndInfo]);
+        }
+        if (itemInfoSlot) {
+            return buildClassnames.buildClassnames([base, ListItem_module.hasItemInfoOnly]);
+        }
+        if (endInfoSlot) {
+            return buildClassnames.buildClassnames([base, ListItem_module.hasEndInfoOnly]);
+        }
+        return buildClassnames.buildClassnames([base]);
+    }, [endInfoSlot, itemInfoSlot]);
+    return (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", justifyContent: "space-between", alignItems: "center", gap: "base" },
+        React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", gap: "base", style: { flexGrow: 1 } },
+            allowsDragging && React__default.default.createElement(DragIndicatorIcon.ReactComponent, { "data-testid": "drag-icon" }),
+            React__default.default.createElement(SelectionType.SelectionType, { selectionMode: selectionMode, isSelected: isSelected, isLink: isLink }),
+            mediaSlot,
+            React__default.default.createElement(FlexCol.FlexCol, { gap: "xs", style: { flexGrow: 1 } },
+                React__default.default.createElement("div", { className: getInfoContainerClassNames, "data-testid": "info-container" },
+                    React__default.default.createElement(reactAriaComponents.Text, { slot: "label" },
+                        React__default.default.createElement(Text.Text, { variant: "body" }, label)),
+                    itemInfoSlot,
+                    endInfoSlot && (React__default.default.createElement("div", { className: endInfoSlot ? ListItem_module.justifyEnd : ListItem_module.justifyStart }, endInfoSlot))),
+                hint && (React__default.default.createElement(reactAriaComponents.Text, { slot: "description" },
+                    React__default.default.createElement(Text.Text, { variant: "hintText" }, hint))),
+                alert && React__default.default.createElement(MiniAlert.MiniAlert, { title: alert.title, variant: alert.variant }))),
+        isLink && React__default.default.createElement(ArrowRightIcon.ReactComponent, { className: ListItem_module.linkIcon, "data-testid": "link-icon" })));
+};
 
 exports.ListItemContent = ListItemContent;
 //# sourceMappingURL=ListItemContent.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemContent.cjs","sources":["../../../../../src/components/SelectDropdown/ListItem/components/ListItemContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-aria-components';\nimport { DragIndicatorIcon } from '../../../../icons';\nimport { ListItemContentProps } from './types';\nimport { HorizontalContainer, InfoContainer, LinkIcon, VerticalContainer } from '../styled';\nimport { Text as VeeqoText } from '../../../Text';\nimport { Stack } from '../../../Stack';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\n\nexport const ListItemContent = ({\n  label,\n  hint,\n  itemInfoSlot,\n  endInfoSlot,\n  alert,\n  mediaSlot,\n  allowsDragging = false,\n  selectionMode = 'single',\n  isLink,\n  isSelected = false,\n}: ListItemContentProps) => (\n  <Stack direction=\"horizontal\" alignY=\"center\" alignX=\"between\">\n    <HorizontalContainer>\n      {allowsDragging && <DragIndicatorIcon data-testid=\"drag-icon\" />}\n      <SelectionType selectionMode={selectionMode} isSelected={isSelected} isLink={isLink} />\n      {mediaSlot}\n      <VerticalContainer>\n        <InfoContainer\n          hasItemInfoSlot={Boolean(itemInfoSlot)}\n          hasEndInfoSlot={Boolean(endInfoSlot)}\n          data-testid=\"info-container\"\n        >\n          <Text slot=\"label\">\n            <VeeqoText variant=\"body\">{label}</VeeqoText>\n          </Text>\n          {itemInfoSlot}\n          {endInfoSlot}\n        </InfoContainer>\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      </VerticalContainer>\n    </HorizontalContainer>\n    {isLink && <LinkIcon data-testid=\"link-icon\" />}\n  </Stack>\n);\n"],"names":["React","Stack","HorizontalContainer","DragIndicatorIcon","SelectionType","VerticalContainer","InfoContainer","Text","VeeqoText","MiniAlert","LinkIcon"],"mappings":";;;;;;;;;;;;;;;;MAUa,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,SAAS,EACT,cAAc,GAAG,KAAK,EACtB,aAAa,GAAG,QAAQ,EACxB,MAAM,EACN,UAAU,GAAG,KAAK,GACG,MACrBA,sBAAA,CAAA,aAAA,CAACC,WAAK,EAAC,EAAA,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAA;AAC5D,IAAAD,sBAAA,CAAA,aAAA,CAACE,0BAAmB,EAAA,IAAA;AACjB,QAAA,cAAc,IAAIF,sBAAA,CAAA,aAAA,CAACG,gCAAiB,EAAA,EAAA,aAAA,EAAa,WAAW,EAAG,CAAA;AAChE,QAAAH,sBAAA,CAAA,aAAA,CAACI,2BAAa,EAAA,EAAC,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA;QACtF,SAAS;AACV,QAAAJ,sBAAA,CAAA,aAAA,CAACK,wBAAiB,EAAA,IAAA;AAChB,YAAAL,sBAAA,CAAA,aAAA,CAACM,oBAAa,EACZ,EAAA,eAAe,EAAE,OAAO,CAAC,YAAY,CAAC,EACtC,cAAc,EAAE,OAAO,CAAC,WAAW,CAAC,iBACxB,gBAAgB,EAAA;AAE5B,gBAAAN,sBAAA,CAAA,aAAA,CAACO,wBAAI,EAAA,EAAC,IAAI,EAAC,OAAO,EAAA;oBAChBP,sBAAC,CAAA,aAAA,CAAAQ,SAAS,IAAC,OAAO,EAAC,MAAM,EAAE,EAAA,KAAK,CAAa,CACxC;gBACN,YAAY;AACZ,gBAAA,WAAW,CACE;AAEf,YAAA,IAAI,KACHR,sBAAA,CAAA,aAAA,CAACO,wBAAI,EAAC,EAAA,IAAI,EAAC,aAAa,EAAA;gBACtBP,sBAAC,CAAA,aAAA,CAAAQ,SAAS,IAAC,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CAC3C,CACR;AACA,YAAA,KAAK,IAAIR,sBAAC,CAAA,aAAA,CAAAS,mBAAS,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,CAAI,CACjD,CACA;IACrB,MAAM,IAAIT,qCAACU,eAAQ,EAAA,EAAA,aAAA,EAAa,WAAW,EAAG,CAAA,CACzC;;;;"}
+{"version":3,"file":"ListItemContent.cjs","sources":["../../../../../src/components/SelectDropdown/ListItem/components/ListItemContent.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 { ListItemContentProps } from './types';\nimport { Text as VeeqoText } from '../../../Text';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\nimport styles from '../ListItem.module.scss';\nimport { FlexRow } from '../../../Flex/FlexRow';\n\nexport const ListItemContent = ({\n  label,\n  hint,\n  itemInfoSlot,\n  endInfoSlot,\n  alert,\n  mediaSlot,\n  allowsDragging = false,\n  selectionMode = 'single',\n  isLink,\n  isSelected = false,\n}: ListItemContentProps) => {\n  const getInfoContainerClassNames = 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 flexWrap=\"nowrap\" justifyContent=\"space-between\" alignItems=\"center\" gap=\"base\">\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={getInfoContainerClassNames} data-testid=\"info-container\">\n            <Text slot=\"label\">\n              <VeeqoText variant=\"body\">{label}</VeeqoText>\n            </Text>\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":["useMemo","styles","buildClassnames","React","FlexRow","DragIndicatorIcon","SelectionType","FlexCol","Text","VeeqoText","MiniAlert","ArrowRightIcon"],"mappings":"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"}

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

@@ -1,28 +1,46 @@
-import React__default from 'react';
+import React__default, { useMemo } from 'react';
 import { Text } from 'react-aria-components';
+import { buildClassnames } from '../../../../utils/buildClassnames.js';
+import 'uid/secure';
+import { FlexCol } from '../../../Flex/FlexCol/FlexCol.js';
+import { ReactComponent as ArrowRightIcon } from '../../../../icons/design-system/components/ArrowRightIcon.js';
 import { ReactComponent as DragIndicatorIcon } from '../../../../icons/design-system/components/DragIndicatorIcon.js';
-import { HorizontalContainer, VerticalContainer, InfoContainer, LinkIcon } from '../styled.js';
 import { Text as Text$1 } from '../../../Text/Text.js';
-import { Stack } from '../../../Stack/Stack.js';
-import '../../../Stack/types.js';
 import { MiniAlert } from '../../../Alerts/MiniAlert/MiniAlert.js';
 import { SelectionType } from './SelectionType.js';
+import styles from '../ListItem.module.scss.js';
+import { FlexRow } from '../../../Flex/FlexRow/FlexRow.js';
 
-const ListItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging = false, selectionMode = 'single', isLink, isSelected = false, }) => (React__default.createElement(Stack, { direction: "horizontal", alignY: "center", alignX: "between" },
-    React__default.createElement(HorizontalContainer, null,
-        allowsDragging && React__default.createElement(DragIndicatorIcon, { "data-testid": "drag-icon" }),
-        React__default.createElement(SelectionType, { selectionMode: selectionMode, isSelected: isSelected, isLink: isLink }),
-        mediaSlot,
-        React__default.createElement(VerticalContainer, null,
-            React__default.createElement(InfoContainer, { hasItemInfoSlot: Boolean(itemInfoSlot), hasEndInfoSlot: Boolean(endInfoSlot), "data-testid": "info-container" },
-                React__default.createElement(Text, { slot: "label" },
-                    React__default.createElement(Text$1, { variant: "body" }, label)),
-                itemInfoSlot,
-                endInfoSlot),
-            hint && (React__default.createElement(Text, { slot: "description" },
-                React__default.createElement(Text$1, { variant: "hintText" }, hint))),
-            alert && React__default.createElement(MiniAlert, { title: alert.title, variant: alert.variant }))),
-    isLink && React__default.createElement(LinkIcon, { "data-testid": "link-icon" })));
+const ListItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging = false, selectionMode = 'single', isLink, isSelected = false, }) => {
+    const getInfoContainerClassNames = useMemo(() => {
+        const base = styles.infoContainer;
+        if (itemInfoSlot && endInfoSlot) {
+            return buildClassnames([base, styles.hasItemInfoAndEndInfo]);
+        }
+        if (itemInfoSlot) {
+            return buildClassnames([base, styles.hasItemInfoOnly]);
+        }
+        if (endInfoSlot) {
+            return buildClassnames([base, styles.hasEndInfoOnly]);
+        }
+        return buildClassnames([base]);
+    }, [endInfoSlot, itemInfoSlot]);
+    return (React__default.createElement(FlexRow, { flexWrap: "nowrap", justifyContent: "space-between", alignItems: "center", gap: "base" },
+        React__default.createElement(FlexRow, { flexWrap: "nowrap", gap: "base", style: { flexGrow: 1 } },
+            allowsDragging && React__default.createElement(DragIndicatorIcon, { "data-testid": "drag-icon" }),
+            React__default.createElement(SelectionType, { selectionMode: selectionMode, isSelected: isSelected, isLink: isLink }),
+            mediaSlot,
+            React__default.createElement(FlexCol, { gap: "xs", style: { flexGrow: 1 } },
+                React__default.createElement("div", { className: getInfoContainerClassNames, "data-testid": "info-container" },
+                    React__default.createElement(Text, { slot: "label" },
+                        React__default.createElement(Text$1, { variant: "body" }, label)),
+                    itemInfoSlot,
+                    endInfoSlot && (React__default.createElement("div", { className: endInfoSlot ? styles.justifyEnd : styles.justifyStart }, endInfoSlot))),
+                hint && (React__default.createElement(Text, { slot: "description" },
+                    React__default.createElement(Text$1, { variant: "hintText" }, hint))),
+                alert && React__default.createElement(MiniAlert, { title: alert.title, variant: alert.variant }))),
+        isLink && React__default.createElement(ArrowRightIcon, { className: styles.linkIcon, "data-testid": "link-icon" })));
+};
 
 export { ListItemContent };
 //# sourceMappingURL=ListItemContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemContent.js","sources":["../../../../../src/components/SelectDropdown/ListItem/components/ListItemContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-aria-components';\nimport { DragIndicatorIcon } from '../../../../icons';\nimport { ListItemContentProps } from './types';\nimport { HorizontalContainer, InfoContainer, LinkIcon, VerticalContainer } from '../styled';\nimport { Text as VeeqoText } from '../../../Text';\nimport { Stack } from '../../../Stack';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\n\nexport const ListItemContent = ({\n  label,\n  hint,\n  itemInfoSlot,\n  endInfoSlot,\n  alert,\n  mediaSlot,\n  allowsDragging = false,\n  selectionMode = 'single',\n  isLink,\n  isSelected = false,\n}: ListItemContentProps) => (\n  <Stack direction=\"horizontal\" alignY=\"center\" alignX=\"between\">\n    <HorizontalContainer>\n      {allowsDragging && <DragIndicatorIcon data-testid=\"drag-icon\" />}\n      <SelectionType selectionMode={selectionMode} isSelected={isSelected} isLink={isLink} />\n      {mediaSlot}\n      <VerticalContainer>\n        <InfoContainer\n          hasItemInfoSlot={Boolean(itemInfoSlot)}\n          hasEndInfoSlot={Boolean(endInfoSlot)}\n          data-testid=\"info-container\"\n        >\n          <Text slot=\"label\">\n            <VeeqoText variant=\"body\">{label}</VeeqoText>\n          </Text>\n          {itemInfoSlot}\n          {endInfoSlot}\n        </InfoContainer>\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      </VerticalContainer>\n    </HorizontalContainer>\n    {isLink && <LinkIcon data-testid=\"link-icon\" />}\n  </Stack>\n);\n"],"names":["React","VeeqoText"],"mappings":";;;;;;;;;;MAUa,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,SAAS,EACT,cAAc,GAAG,KAAK,EACtB,aAAa,GAAG,QAAQ,EACxB,MAAM,EACN,UAAU,GAAG,KAAK,GACG,MACrBA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAC,EAAA,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAA;AAC5D,IAAAA,cAAA,CAAA,aAAA,CAAC,mBAAmB,EAAA,IAAA;AACjB,QAAA,cAAc,IAAIA,cAAA,CAAA,aAAA,CAAC,iBAAiB,EAAA,EAAA,aAAA,EAAa,WAAW,EAAG,CAAA;AAChE,QAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EAAC,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA;QACtF,SAAS;AACV,QAAAA,cAAA,CAAA,aAAA,CAAC,iBAAiB,EAAA,IAAA;AAChB,YAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EACZ,EAAA,eAAe,EAAE,OAAO,CAAC,YAAY,CAAC,EACtC,cAAc,EAAE,OAAO,CAAC,WAAW,CAAC,iBACxB,gBAAgB,EAAA;AAE5B,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,OAAO,EAAA;oBAChBA,cAAC,CAAA,aAAA,CAAAC,MAAS,IAAC,OAAO,EAAC,MAAM,EAAE,EAAA,KAAK,CAAa,CACxC;gBACN,YAAY;AACZ,gBAAA,WAAW,CACE;AAEf,YAAA,IAAI,KACHD,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAC,aAAa,EAAA;gBACtBA,cAAC,CAAA,aAAA,CAAAC,MAAS,IAAC,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CAC3C,CACR;AACA,YAAA,KAAK,IAAID,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,CAAI,CACjD,CACA;IACrB,MAAM,IAAIA,6BAAC,QAAQ,EAAA,EAAA,aAAA,EAAa,WAAW,EAAG,CAAA,CACzC;;;;"}
+{"version":3,"file":"ListItemContent.js","sources":["../../../../../src/components/SelectDropdown/ListItem/components/ListItemContent.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 { ListItemContentProps } from './types';\nimport { Text as VeeqoText } from '../../../Text';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\nimport styles from '../ListItem.module.scss';\nimport { FlexRow } from '../../../Flex/FlexRow';\n\nexport const ListItemContent = ({\n  label,\n  hint,\n  itemInfoSlot,\n  endInfoSlot,\n  alert,\n  mediaSlot,\n  allowsDragging = false,\n  selectionMode = 'single',\n  isLink,\n  isSelected = false,\n}: ListItemContentProps) => {\n  const getInfoContainerClassNames = 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 flexWrap=\"nowrap\" justifyContent=\"space-between\" alignItems=\"center\" gap=\"base\">\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={getInfoContainerClassNames} data-testid=\"info-container\">\n            <Text slot=\"label\">\n              <VeeqoText variant=\"body\">{label}</VeeqoText>\n            </Text>\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"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var RadioIndicator = require('./RadioIndicator.cjs');
-var CheckboxIndicator = require('./CheckboxIndicator.cjs');
+var Radio = require('../../../Radio/Radio.cjs');
+var Checkbox = require('../../../Checkbox/Checkbox.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -12,8 +12,8 @@ const SelectionType = ({ selectionMode, isSelected, isLink }) => {
     if (isLink || selectionMode === 'none')
         return null;
     if (selectionMode === 'single')
-        return React__default.default.createElement(RadioIndicator.RadioIndicator, { checked: isSelected });
-    return React__default.default.createElement(CheckboxIndicator.CheckboxIndicator, { checked: isSelected });
+        return React__default.default.createElement(Radio.Radio, { checked: isSelected, onChange: () => { } });
+    return React__default.default.createElement(Checkbox.Checkbox, { checked: isSelected, onChange: () => { } });
 };
 
 exports.SelectionType = SelectionType;

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionType.cjs","sources":["../../../../../src/components/SelectDropdown/ListItem/components/SelectionType.tsx"],"sourcesContent":["import React from 'react';\nimport { RadioIndicator } from './RadioIndicator';\nimport { CheckboxIndicator } from './CheckboxIndicator';\n\ntype SelectionTypeProps = {\n  selectionMode: 'single' | 'multiple' | 'none';\n  isSelected: boolean;\n  isLink?: boolean;\n};\n\nexport const SelectionType = ({ selectionMode, isSelected, isLink }: SelectionTypeProps) => {\n  if (isLink || selectionMode === 'none') return null;\n\n  if (selectionMode === 'single') return <RadioIndicator checked={isSelected} />;\n\n  return <CheckboxIndicator checked={isSelected} />;\n};\n"],"names":["React","RadioIndicator","CheckboxIndicator"],"mappings":";;;;;;;;;;AAUO,MAAM,aAAa,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAsB,KAAI;AACzF,IAAA,IAAI,MAAM,IAAI,aAAa,KAAK,MAAM;AAAE,QAAA,OAAO,IAAI;IAEnD,IAAI,aAAa,KAAK,QAAQ;AAAE,QAAA,OAAOA,qCAACC,6BAAc,EAAA,EAAC,OAAO,EAAE,UAAU,GAAI;AAE9E,IAAA,OAAOD,qCAACE,mCAAiB,EAAA,EAAC,OAAO,EAAE,UAAU,GAAI;AACnD;;;;"}
+{"version":3,"file":"SelectionType.cjs","sources":["../../../../../src/components/SelectDropdown/ListItem/components/SelectionType.tsx"],"sourcesContent":["import React from 'react';\nimport { Radio } from '../../../Radio';\nimport { Checkbox } from '../../../Checkbox';\n\ntype SelectionTypeProps = {\n  selectionMode: 'single' | 'multiple' | 'none';\n  isSelected: boolean;\n  isLink?: boolean;\n};\n\nexport const SelectionType = ({ selectionMode, isSelected, isLink }: SelectionTypeProps) => {\n  if (isLink || selectionMode === 'none') return null;\n\n  if (selectionMode === 'single') return <Radio checked={isSelected} onChange={() => {}} />;\n\n  return <Checkbox checked={isSelected} onChange={() => {}} />;\n};\n"],"names":["React","Radio","Checkbox"],"mappings":";;;;;;;;;;AAUO,MAAM,aAAa,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAsB,KAAI;AACzF,IAAA,IAAI,MAAM,IAAI,aAAa,KAAK,MAAM;AAAE,QAAA,OAAO,IAAI;IAEnD,IAAI,aAAa,KAAK,QAAQ;AAAE,QAAA,OAAOA,sBAAC,CAAA,aAAA,CAAAC,WAAK,EAAC,EAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAO,GAAC,GAAI;AAEzF,IAAA,OAAOD,sBAAC,CAAA,aAAA,CAAAE,iBAAQ,EAAC,EAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAO,GAAC,GAAI;AAC9D;;;;"}

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

@@ -1,13 +1,13 @@
 import React__default from 'react';
-import { RadioIndicator } from './RadioIndicator.js';
-import { CheckboxIndicator } from './CheckboxIndicator.js';
+import { Radio } from '../../../Radio/Radio.js';
+import { Checkbox } from '../../../Checkbox/Checkbox.js';
 
 const SelectionType = ({ selectionMode, isSelected, isLink }) => {
     if (isLink || selectionMode === 'none')
         return null;
     if (selectionMode === 'single')
-        return React__default.createElement(RadioIndicator, { checked: isSelected });
-    return React__default.createElement(CheckboxIndicator, { checked: isSelected });
+        return React__default.createElement(Radio, { checked: isSelected, onChange: () => { } });
+    return React__default.createElement(Checkbox, { checked: isSelected, onChange: () => { } });
 };
 
 export { SelectionType };

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionType.js","sources":["../../../../../src/components/SelectDropdown/ListItem/components/SelectionType.tsx"],"sourcesContent":["import React from 'react';\nimport { RadioIndicator } from './RadioIndicator';\nimport { CheckboxIndicator } from './CheckboxIndicator';\n\ntype SelectionTypeProps = {\n  selectionMode: 'single' | 'multiple' | 'none';\n  isSelected: boolean;\n  isLink?: boolean;\n};\n\nexport const SelectionType = ({ selectionMode, isSelected, isLink }: SelectionTypeProps) => {\n  if (isLink || selectionMode === 'none') return null;\n\n  if (selectionMode === 'single') return <RadioIndicator checked={isSelected} />;\n\n  return <CheckboxIndicator checked={isSelected} />;\n};\n"],"names":["React"],"mappings":";;;;AAUO,MAAM,aAAa,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAsB,KAAI;AACzF,IAAA,IAAI,MAAM,IAAI,aAAa,KAAK,MAAM;AAAE,QAAA,OAAO,IAAI;IAEnD,IAAI,aAAa,KAAK,QAAQ;AAAE,QAAA,OAAOA,6BAAC,cAAc,EAAA,EAAC,OAAO,EAAE,UAAU,GAAI;AAE9E,IAAA,OAAOA,6BAAC,iBAAiB,EAAA,EAAC,OAAO,EAAE,UAAU,GAAI;AACnD;;;;"}
+{"version":3,"file":"SelectionType.js","sources":["../../../../../src/components/SelectDropdown/ListItem/components/SelectionType.tsx"],"sourcesContent":["import React from 'react';\nimport { Radio } from '../../../Radio';\nimport { Checkbox } from '../../../Checkbox';\n\ntype SelectionTypeProps = {\n  selectionMode: 'single' | 'multiple' | 'none';\n  isSelected: boolean;\n  isLink?: boolean;\n};\n\nexport const SelectionType = ({ selectionMode, isSelected, isLink }: SelectionTypeProps) => {\n  if (isLink || selectionMode === 'none') return null;\n\n  if (selectionMode === 'single') return <Radio checked={isSelected} onChange={() => {}} />;\n\n  return <Checkbox checked={isSelected} onChange={() => {}} />;\n};\n"],"names":["React"],"mappings":";;;;AAUO,MAAM,aAAa,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAsB,KAAI;AACzF,IAAA,IAAI,MAAM,IAAI,aAAa,KAAK,MAAM;AAAE,QAAA,OAAO,IAAI;IAEnD,IAAI,aAAa,KAAK,QAAQ;AAAE,QAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,KAAK,EAAC,EAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAO,GAAC,GAAI;AAEzF,IAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,QAAQ,EAAC,EAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAO,GAAC,GAAI;AAC9D;;;;"}

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

@@ -2,20 +2,20 @@
 
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
-var Stack = require('../../Stack/Stack.cjs');
-require('../../Stack/types.cjs');
+var FlexRow = require('../../Flex/FlexRow/FlexRow.cjs');
+var FlexCol = require('../../Flex/FlexCol/FlexCol.cjs');
 var Text = require('../../Text/Text.cjs');
-var styled = require('./styled.cjs');
 var ListItem = require('../ListItem/ListItem.cjs');
+var ListItemSection_module = require('./ListItemSection.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const ListItemSection = ({ label, hint, itemInfoSlot, items, children, ...props }) => (React__default.default.createElement(styled.StyledSection, { ...props },
+const ListItemSection = ({ label, hint, itemInfoSlot, items, children, ...props }) => (React__default.default.createElement(reactAriaComponents.Section, { className: ListItemSection_module.section, ...props },
     React__default.default.createElement(reactAriaComponents.Header, null,
-        React__default.default.createElement(Stack.Stack, { spacing: "xs" },
-            React__default.default.createElement(styled.InfoContainer, null,
+        React__default.default.createElement(FlexCol.FlexCol, { gap: "xs" },
+            React__default.default.createElement(FlexRow.FlexRow, null,
                 React__default.default.createElement(Text.Text, { variant: "body" }, label),
                 itemInfoSlot),
             hint && React__default.default.createElement(Text.Text, { variant: "hintText" }, hint))),

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemSection.cjs","sources":["../../../../src/components/SelectDropdown/ListItemSection/ListItemSection.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Collection, Header, SectionProps } from 'react-aria-components';\nimport { Stack } from '../../Stack';\nimport { Text as VeeqoText } from '../../Text';\nimport { InfoContainer, StyledSection } from './styled';\nimport { ListItemProps } from '../ListItem/types';\nimport { ListItem } from '../ListItem/ListItem';\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  ...props\n}: ListItemSectionProps) => (\n  <StyledSection {...props}>\n    <Header>\n      <Stack spacing=\"xs\">\n        <InfoContainer>\n          <VeeqoText variant=\"body\">{label}</VeeqoText>\n          {itemInfoSlot}\n        </InfoContainer>\n        {hint && <VeeqoText variant=\"hintText\">{hint}</VeeqoText>}\n      </Stack>\n    </Header>\n    {children}\n    {items && (\n      <Collection items={items}>{(item: ListItemProps) => <ListItem {...item} />}</Collection>\n    )}\n  </StyledSection>\n);\n"],"names":["React","StyledSection","Header","Stack","InfoContainer","VeeqoText","Collection","ListItem"],"mappings":";;;;;;;;;;;;;;AAea,MAAA,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACa,MACrBA,sBAAA,CAAA,aAAA,CAACC,oBAAa,EAAA,EAAA,GAAK,KAAK,EAAA;AACtB,IAAAD,sBAAA,CAAA,aAAA,CAACE,0BAAM,EAAA,IAAA;AACL,QAAAF,sBAAA,CAAA,aAAA,CAACG,WAAK,EAAA,EAAC,OAAO,EAAC,IAAI,EAAA;AACjB,YAAAH,sBAAA,CAAA,aAAA,CAACI,oBAAa,EAAA,IAAA;AACZ,gBAAAJ,sBAAA,CAAA,aAAA,CAACK,SAAS,EAAC,EAAA,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAa;AAC5C,gBAAA,YAAY,CACC;YACf,IAAI,IAAIL,sBAAC,CAAA,aAAA,CAAAK,SAAS,EAAC,EAAA,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CACnD,CACD;IACR,QAAQ;IACR,KAAK,KACJL,sBAAC,CAAA,aAAA,CAAAM,8BAAU,IAAC,KAAK,EAAE,KAAK,EAAA,EAAG,CAAC,IAAmB,KAAKN,sBAAC,CAAA,aAAA,CAAAO,iBAAQ,EAAK,EAAA,GAAA,IAAI,GAAI,CAAc,CACzF,CACa;;;;"}
+{"version":3,"file":"ListItemSection.cjs","sources":["../../../../src/components/SelectDropdown/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 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  ...props\n}: ListItemSectionProps) => (\n  <Section className={styles.section} {...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","styles","Header","FlexCol","FlexRow","VeeqoText","Collection","ListItem"],"mappings":";;;;;;;;;;;;;;AAgBO,MAAM,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACa,MACrBA,sBAAC,CAAA,aAAA,CAAAC,2BAAO,EAAC,EAAA,SAAS,EAAEC,sBAAM,CAAC,OAAO,KAAM,KAAK,EAAA;AAC3C,IAAAF,sBAAA,CAAA,aAAA,CAACG,0BAAM,EAAA,IAAA;AACL,QAAAH,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,YAAAJ,sBAAA,CAAA,aAAA,CAACK,eAAO,EAAA,IAAA;AACN,gBAAAL,sBAAA,CAAA,aAAA,CAACM,SAAS,EAAC,EAAA,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAa;AAC5C,gBAAA,YAAY,CACL;YACT,IAAI,IAAIN,sBAAC,CAAA,aAAA,CAAAM,SAAS,EAAC,EAAA,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CACjD,CACH;IACR,QAAQ;IACR,KAAK,KACJN,sBAAC,CAAA,aAAA,CAAAO,8BAAU,IAAC,KAAK,EAAE,KAAK,EAAA,EAAG,CAAC,IAAmB,KAAKP,sBAAC,CAAA,aAAA,CAAAQ,iBAAQ,EAAK,EAAA,GAAA,IAAI,GAAI,CAAc,CACzF,CACO;;;;"}

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

@@ -1,15 +1,15 @@
 import React__default from 'react';
-import { Header, Collection } from 'react-aria-components';
-import { Stack } from '../../Stack/Stack.js';
-import '../../Stack/types.js';
+import { Section, Header, Collection } from 'react-aria-components';
+import { FlexRow } from '../../Flex/FlexRow/FlexRow.js';
+import { FlexCol } from '../../Flex/FlexCol/FlexCol.js';
 import { Text } from '../../Text/Text.js';
-import { StyledSection, InfoContainer } from './styled.js';
 import { ListItem } from '../ListItem/ListItem.js';
+import styles from './ListItemSection.module.scss.js';
 
-const ListItemSection = ({ label, hint, itemInfoSlot, items, children, ...props }) => (React__default.createElement(StyledSection, { ...props },
+const ListItemSection = ({ label, hint, itemInfoSlot, items, children, ...props }) => (React__default.createElement(Section, { className: styles.section, ...props },
     React__default.createElement(Header, null,
-        React__default.createElement(Stack, { spacing: "xs" },
-            React__default.createElement(InfoContainer, null,
+        React__default.createElement(FlexCol, { gap: "xs" },
+            React__default.createElement(FlexRow, null,
                 React__default.createElement(Text, { variant: "body" }, label),
                 itemInfoSlot),
             hint && React__default.createElement(Text, { variant: "hintText" }, hint))),

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemSection.js","sources":["../../../../src/components/SelectDropdown/ListItemSection/ListItemSection.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Collection, Header, SectionProps } from 'react-aria-components';\nimport { Stack } from '../../Stack';\nimport { Text as VeeqoText } from '../../Text';\nimport { InfoContainer, StyledSection } from './styled';\nimport { ListItemProps } from '../ListItem/types';\nimport { ListItem } from '../ListItem/ListItem';\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  ...props\n}: ListItemSectionProps) => (\n  <StyledSection {...props}>\n    <Header>\n      <Stack spacing=\"xs\">\n        <InfoContainer>\n          <VeeqoText variant=\"body\">{label}</VeeqoText>\n          {itemInfoSlot}\n        </InfoContainer>\n        {hint && <VeeqoText variant=\"hintText\">{hint}</VeeqoText>}\n      </Stack>\n    </Header>\n    {children}\n    {items && (\n      <Collection items={items}>{(item: ListItemProps) => <ListItem {...item} />}</Collection>\n    )}\n  </StyledSection>\n);\n"],"names":["React","VeeqoText"],"mappings":";;;;;;;;AAea,MAAA,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACa,MACrBA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EAAA,GAAK,KAAK,EAAA;AACtB,IAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA;AACL,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,IAAI,EAAA;AACjB,YAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA;AACZ,gBAAAA,cAAA,CAAA,aAAA,CAACC,IAAS,EAAC,EAAA,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAa;AAC5C,gBAAA,YAAY,CACC;YACf,IAAI,IAAID,cAAC,CAAA,aAAA,CAAAC,IAAS,EAAC,EAAA,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CACnD,CACD;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,CACa;;;;"}
+{"version":3,"file":"ListItemSection.js","sources":["../../../../src/components/SelectDropdown/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 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  ...props\n}: ListItemSectionProps) => (\n  <Section className={styles.section} {...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":";;;;;;;;AAgBO,MAAM,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACa,MACrBA,cAAC,CAAA,aAAA,CAAA,OAAO,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,OAAO,KAAM,KAAK,EAAA;AAC3C,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;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._section_wlx0b_1 {\n  border-radius: var(--sizes-base);\n}");
+var styles = {"section":"_section_wlx0b_1"};
+
+module.exports = styles;
+//# sourceMappingURL=ListItemSection.module.scss.cjs.map

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

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

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

@@ -0,0 +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"};
+
+export { styles as default };
+//# sourceMappingURL=ListItemSection.module.scss.js.map

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

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

package/dist/components/SelectDropdown/SelectDropdown.cjs

@@ -1,14 +1,19 @@
 'use strict';
 
 var React = require('react');
+var reactAriaComponents = require('react-aria-components');
 var buildClassnames = require('../../utils/buildClassnames.cjs');
 require('uid/secure');
 var SelectedOption = require('./components/SelectedOption.cjs');
 var utils = require('./utils.cjs');
-var styled = require('./styled.cjs');
 var ListItemSection = require('./ListItemSection/ListItemSection.cjs');
 var ListItem = require('./ListItem/ListItem.cjs');
 var SelectDropdownState = require('./components/SelectDropdownState.cjs');
+var Dropdown = require('../Dropdown/Dropdown.cjs');
+var Search = require('../Search/Search.cjs');
+var Button = require('../Button/Button.cjs');
+var SelectDropdown_module = require('./SelectDropdown.module.scss.cjs');
+var form_module = require('../../utils/forms/form.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -32,15 +37,22 @@ const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple =
             setIsSelectOpen(false);
         }
     }, [options, hasSection, multiple, onChange]);
-    return (React__default.default.createElement(styled.StyledDropdown, { id: `select-dropdown-${id}`, className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.popover, className]), shouldShow: isSelectOpen, setShouldShow: setIsSelectOpen, useAnchorWidth: true, disabled: disabled, renderCta: (buttonProps, anchorRef) => (React__default.default.createElement(styled.StyledSelectButton, { ...buttonProps, hasError: hasError, compact: compact, type: "button", ref: anchorRef, className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.button, className]) },
+    return (React__default.default.createElement(Dropdown.Dropdown, { id: `select-dropdown-${id}`, className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.popover, SelectDropdown_module.dropdown, className]), shouldShow: isSelectOpen, setShouldShow: setIsSelectOpen, useAnchorWidth: true, disabled: disabled, renderCta: (buttonProps, anchorRef) => (React__default.default.createElement("button", { ...buttonProps, type: "button", ref: anchorRef, className: buildClassnames.buildClassnames([
+                className,
+                SelectDropdown_module.dropdownTrigger,
+                form_module.fullStyles,
+                form_module.base,
+                hasError && form_module.error,
+                compact && form_module.compact,
+            ]) },
             React__default.default.createElement(SelectedOption.SelectedOption, { placeholder: placeholder, options: selectedValues, selectionMode: selectionMode }))) },
         onSearchChange && (React__default.default.createElement(React__default.default.Fragment, null,
-            React__default.default.createElement(styled.StyledSearch, { value: searchValue, onChange: onSearchChange }),
-            React__default.default.createElement(styled.Separator, null))),
-        React__default.default.createElement(styled.StyledListBox, { className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.optionsContainer, className]), "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, "aria-describedby": ariaDescribedBy !== null && ariaDescribedBy !== undefined ? ariaDescribedBy : `${id}-hint`, selectionMode: selectionMode, items: options, onSelectionChange: onSelectionChange, selectedKeys: selectedValues.map((selectedValue) => selectedValue.id), renderEmptyState: () => (React__default.default.createElement(SelectDropdownState.SelectDropdownState, { isLoading: isLoading, emptyStateSlot: emptyStateSlot })), ...otherProps }, (item) => hasSection ? (React__default.default.createElement(ListItemSection.ListItemSection, { ...item })) : (React__default.default.createElement(ListItem.ListItem, { ...item }))), actions === null || actions === undefined ? undefined :
-        actions.map(({ label, ...actionProps }) => (React__default.default.createElement(React__default.default.Fragment, null,
-            React__default.default.createElement(styled.Separator, { key: `seperator-${label}` }),
-            React__default.default.createElement(styled.CTAButton, { key: label, ...actionProps }))))));
+            React__default.default.createElement(Search.Search, { className: SelectDropdown_module.search, value: searchValue, onChange: onSearchChange }),
+            React__default.default.createElement("hr", { className: SelectDropdown_module.separator }))),
+        React__default.default.createElement(reactAriaComponents.ListBox, { className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.optionsContainer, SelectDropdown_module.listBox, className]), "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, "aria-describedby": ariaDescribedBy !== null && ariaDescribedBy !== undefined ? ariaDescribedBy : `${id}-hint`, selectionMode: selectionMode, items: options, onSelectionChange: onSelectionChange, selectedKeys: selectedValues.map((selectedValue) => selectedValue.id), renderEmptyState: () => (React__default.default.createElement(SelectDropdownState.SelectDropdownState, { isLoading: isLoading, emptyStateSlot: emptyStateSlot })), ...otherProps }, (item) => hasSection ? (React__default.default.createElement(ListItemSection.ListItemSection, { ...item })) : (React__default.default.createElement(ListItem.ListItem, { ...item }))), actions === null || actions === undefined ? undefined :
+        actions.map(({ label, ...actionProps }) => (React__default.default.createElement(React.Fragment, { key: label },
+            React__default.default.createElement("hr", { className: SelectDropdown_module.separator, key: `seperator-${label}` }),
+            React__default.default.createElement(Button.Button, { className: SelectDropdown_module.ctaButton, variant: "flat", key: label, ...actionProps }))))));
 };
 
 exports.SelectDropdown = SelectDropdown;