@veeqo/ui 11.3.1 → 11.4.0

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;

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

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { useCallback, useState } from 'react';\nimport { Key, Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport {\n  CTAButton,\n  Separator,\n  StyledDropdown,\n  StyledSelectButton,\n  StyledListBox,\n  StyledSearch,\n} from './styled';\nimport { SelectDropdownItem, SelectDropdownProps } from './types';\nimport { ListItemSection, ListItemSectionProps } from './ListItemSection/ListItemSection';\nimport { ListItem } from './ListItem';\nimport { ListItemProps } from './ListItem/types';\nimport { SelectDropdownState } from './components/SelectDropdownState';\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  disabled,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  emptyStateSlot,\n  onSearchChange,\n  onChange,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownProps) => {\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n  const classNames = generateClassNames(className);\n\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n\n  const selectedValues = getSelectedValues(options, hasSection, value);\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys);\n      const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);\n\n      if (multiple) {\n        (onChange as (items: SelectDropdownItem[]) => void)(newSelectedValues);\n      } else {\n        (onChange as (item: SelectDropdownItem) => void)(newSelectedValues[0]);\n        setIsSelectOpen(false);\n      }\n    },\n    [options, hasSection, multiple, onChange],\n  );\n\n  return (\n    <StyledDropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      disabled={disabled}\n      renderCta={(buttonProps, anchorRef) => (\n        <StyledSelectButton\n          {...buttonProps}\n          hasError={hasError}\n          compact={compact}\n          type=\"button\"\n          ref={anchorRef}\n          className={buildClassnames([classNames?.button, className])}\n        >\n          <SelectedOption\n            placeholder={placeholder}\n            options={selectedValues}\n            selectionMode={selectionMode}\n          />\n        </StyledSelectButton>\n      )}\n    >\n      {onSearchChange && (\n        <>\n          <StyledSearch value={searchValue} onChange={onSearchChange} />\n          <Separator />\n        </>\n      )}\n      <StyledListBox\n        className={buildClassnames([classNames?.optionsContainer, className])}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        aria-describedby={ariaDescribedBy ?? `${id}-hint`}\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        {...otherProps}\n      >\n        {(item) =>\n          hasSection ? (\n            <ListItemSection {...(item as ListItemSectionProps)} />\n          ) : (\n            <ListItem {...(item as ListItemProps)} />\n          )\n        }\n      </StyledListBox>\n      {actions?.map(({ label, ...actionProps }) => (\n        <>\n          <Separator key={`seperator-${label}`} />\n          <CTAButton key={label} {...actionProps} />\n        </>\n      ))}\n    </StyledDropdown>\n  );\n};\n"],"names":["generateClassNames","useState","getSelectedValues","useCallback","React","StyledDropdown","buildClassnames","StyledSelectButton","SelectedOption","StyledSearch","Separator","StyledListBox","SelectDropdownState","ListItemSection","ListItem","CTAButton"],"mappings":"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"}
+{"version":3,"file":"SelectDropdown.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { Fragment, useCallback, useState } from 'react';\nimport { Key, ListBox, Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport { SelectDropdownItem, SelectDropdownProps } from './types';\nimport { ListItemSection, ListItemSectionProps } from './ListItemSection/ListItemSection';\nimport { ListItem } from './ListItem';\nimport { ListItemProps } from './ListItem/types';\nimport { SelectDropdownState } from './components/SelectDropdownState';\nimport { Dropdown } from '../Dropdown';\nimport { Search } from '../Search';\nimport { Button } from '../Button';\nimport styles from './SelectDropdown.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  disabled,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  emptyStateSlot,\n  onSearchChange,\n  onChange,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownProps) => {\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n  const classNames = generateClassNames(className);\n\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n\n  const selectedValues = getSelectedValues(options, hasSection, value);\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys);\n      const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);\n\n      if (multiple) {\n        (onChange as (items: SelectDropdownItem[]) => void)(newSelectedValues);\n      } else {\n        (onChange as (item: SelectDropdownItem) => void)(newSelectedValues[0]);\n        setIsSelectOpen(false);\n      }\n    },\n    [options, hasSection, multiple, onChange],\n  );\n\n  return (\n    <Dropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, styles.dropdown, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      disabled={disabled}\n      renderCta={(buttonProps, anchorRef) => (\n        <button\n          {...buttonProps}\n          type=\"button\"\n          ref={anchorRef}\n          className={buildClassnames([\n            className,\n            styles.dropdownTrigger,\n            formStyles.fullStyles,\n            formStyles.base,\n            hasError && formStyles.error,\n            compact && formStyles.compact,\n          ])}\n        >\n          <SelectedOption\n            placeholder={placeholder}\n            options={selectedValues}\n            selectionMode={selectionMode}\n          />\n        </button>\n      )}\n    >\n      {onSearchChange && (\n        <>\n          <Search className={styles.search} value={searchValue} onChange={onSearchChange} />\n          <hr className={styles.separator} />\n        </>\n      )}\n      <ListBox\n        className={buildClassnames([classNames?.optionsContainer, styles.listBox, className])}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        aria-describedby={ariaDescribedBy ?? `${id}-hint`}\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        {...otherProps}\n      >\n        {(item) =>\n          hasSection ? (\n            <ListItemSection {...(item as ListItemSectionProps)} />\n          ) : (\n            <ListItem {...(item as ListItemProps)} />\n          )\n        }\n      </ListBox>\n      {actions?.map(({ label, ...actionProps }) => (\n        <Fragment key={label}>\n          <hr className={styles.separator} key={`seperator-${label}`} />\n          <Button className={styles.ctaButton} variant=\"flat\" key={label} {...actionProps} />\n        </Fragment>\n      ))}\n    </Dropdown>\n  );\n};\n"],"names":["generateClassNames","useState","getSelectedValues","useCallback","React","Dropdown","buildClassnames","styles","formStyles","SelectedOption","Search","ListBox","SelectDropdownState","ListItemSection","ListItem","Fragment","Button"],"mappings":"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"}

package/dist/components/SelectDropdown/SelectDropdown.js

@@ -1,12 +1,17 @@
-import React__default, { useState, useCallback } from 'react';
+import React__default, { useState, useCallback, Fragment } from 'react';
+import { ListBox } from 'react-aria-components';
 import { buildClassnames } from '../../utils/buildClassnames.js';
 import 'uid/secure';
 import { SelectedOption } from './components/SelectedOption.js';
 import { getSelectedValues, generateClassNames } from './utils.js';
-import { StyledDropdown, StyledSelectButton, StyledSearch, Separator, StyledListBox, CTAButton } from './styled.js';
 import { ListItemSection } from './ListItemSection/ListItemSection.js';
 import { ListItem } from './ListItem/ListItem.js';
 import { SelectDropdownState } from './components/SelectDropdownState.js';
+import { Dropdown } from '../Dropdown/Dropdown.js';
+import { Search } from '../Search/Search.js';
+import { Button } from '../Button/Button.js';
+import styles from './SelectDropdown.module.scss.js';
+import formStyles from '../../utils/forms/form.module.scss.js';
 
 /* eslint-disable react/destructuring-assignment */
 const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, disabled, options, value, actions, isLoading = false, searchValue, emptyStateSlot, onSearchChange, onChange, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
@@ -26,15 +31,22 @@ const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple =
             setIsSelectOpen(false);
         }
     }, [options, hasSection, multiple, onChange]);
-    return (React__default.createElement(StyledDropdown, { id: `select-dropdown-${id}`, className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.popover, className]), shouldShow: isSelectOpen, setShouldShow: setIsSelectOpen, useAnchorWidth: true, disabled: disabled, renderCta: (buttonProps, anchorRef) => (React__default.createElement(StyledSelectButton, { ...buttonProps, hasError: hasError, compact: compact, type: "button", ref: anchorRef, className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.button, className]) },
+    return (React__default.createElement(Dropdown, { id: `select-dropdown-${id}`, className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.popover, styles.dropdown, className]), shouldShow: isSelectOpen, setShouldShow: setIsSelectOpen, useAnchorWidth: true, disabled: disabled, renderCta: (buttonProps, anchorRef) => (React__default.createElement("button", { ...buttonProps, type: "button", ref: anchorRef, className: buildClassnames([
+                className,
+                styles.dropdownTrigger,
+                formStyles.fullStyles,
+                formStyles.base,
+                hasError && formStyles.error,
+                compact && formStyles.compact,
+            ]) },
             React__default.createElement(SelectedOption, { placeholder: placeholder, options: selectedValues, selectionMode: selectionMode }))) },
         onSearchChange && (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(StyledSearch, { value: searchValue, onChange: onSearchChange }),
-            React__default.createElement(Separator, null))),
-        React__default.createElement(StyledListBox, { className: 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.createElement(SelectDropdownState, { isLoading: isLoading, emptyStateSlot: emptyStateSlot })), ...otherProps }, (item) => hasSection ? (React__default.createElement(ListItemSection, { ...item })) : (React__default.createElement(ListItem, { ...item }))), actions === null || actions === undefined ? undefined :
-        actions.map(({ label, ...actionProps }) => (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(Separator, { key: `seperator-${label}` }),
-            React__default.createElement(CTAButton, { key: label, ...actionProps }))))));
+            React__default.createElement(Search, { className: styles.search, value: searchValue, onChange: onSearchChange }),
+            React__default.createElement("hr", { className: styles.separator }))),
+        React__default.createElement(ListBox, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.optionsContainer, styles.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.createElement(SelectDropdownState, { isLoading: isLoading, emptyStateSlot: emptyStateSlot })), ...otherProps }, (item) => hasSection ? (React__default.createElement(ListItemSection, { ...item })) : (React__default.createElement(ListItem, { ...item }))), actions === null || actions === undefined ? undefined :
+        actions.map(({ label, ...actionProps }) => (React__default.createElement(Fragment, { key: label },
+            React__default.createElement("hr", { className: styles.separator, key: `seperator-${label}` }),
+            React__default.createElement(Button, { className: styles.ctaButton, variant: "flat", key: label, ...actionProps }))))));
 };
 
 export { SelectDropdown };

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

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { useCallback, useState } from 'react';\nimport { Key, Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport {\n  CTAButton,\n  Separator,\n  StyledDropdown,\n  StyledSelectButton,\n  StyledListBox,\n  StyledSearch,\n} from './styled';\nimport { SelectDropdownItem, SelectDropdownProps } from './types';\nimport { ListItemSection, ListItemSectionProps } from './ListItemSection/ListItemSection';\nimport { ListItem } from './ListItem';\nimport { ListItemProps } from './ListItem/types';\nimport { SelectDropdownState } from './components/SelectDropdownState';\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  disabled,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  emptyStateSlot,\n  onSearchChange,\n  onChange,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownProps) => {\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n  const classNames = generateClassNames(className);\n\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n\n  const selectedValues = getSelectedValues(options, hasSection, value);\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys);\n      const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);\n\n      if (multiple) {\n        (onChange as (items: SelectDropdownItem[]) => void)(newSelectedValues);\n      } else {\n        (onChange as (item: SelectDropdownItem) => void)(newSelectedValues[0]);\n        setIsSelectOpen(false);\n      }\n    },\n    [options, hasSection, multiple, onChange],\n  );\n\n  return (\n    <StyledDropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      disabled={disabled}\n      renderCta={(buttonProps, anchorRef) => (\n        <StyledSelectButton\n          {...buttonProps}\n          hasError={hasError}\n          compact={compact}\n          type=\"button\"\n          ref={anchorRef}\n          className={buildClassnames([classNames?.button, className])}\n        >\n          <SelectedOption\n            placeholder={placeholder}\n            options={selectedValues}\n            selectionMode={selectionMode}\n          />\n        </StyledSelectButton>\n      )}\n    >\n      {onSearchChange && (\n        <>\n          <StyledSearch value={searchValue} onChange={onSearchChange} />\n          <Separator />\n        </>\n      )}\n      <StyledListBox\n        className={buildClassnames([classNames?.optionsContainer, className])}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        aria-describedby={ariaDescribedBy ?? `${id}-hint`}\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        {...otherProps}\n      >\n        {(item) =>\n          hasSection ? (\n            <ListItemSection {...(item as ListItemSectionProps)} />\n          ) : (\n            <ListItem {...(item as ListItemProps)} />\n          )\n        }\n      </StyledListBox>\n      {actions?.map(({ label, ...actionProps }) => (\n        <>\n          <Separator key={`seperator-${label}`} />\n          <CTAButton key={label} {...actionProps} />\n        </>\n      ))}\n    </StyledDropdown>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"SelectDropdown.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { Fragment, useCallback, useState } from 'react';\nimport { Key, ListBox, Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport { SelectDropdownItem, SelectDropdownProps } from './types';\nimport { ListItemSection, ListItemSectionProps } from './ListItemSection/ListItemSection';\nimport { ListItem } from './ListItem';\nimport { ListItemProps } from './ListItem/types';\nimport { SelectDropdownState } from './components/SelectDropdownState';\nimport { Dropdown } from '../Dropdown';\nimport { Search } from '../Search';\nimport { Button } from '../Button';\nimport styles from './SelectDropdown.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  disabled,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  emptyStateSlot,\n  onSearchChange,\n  onChange,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownProps) => {\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n  const classNames = generateClassNames(className);\n\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n\n  const selectedValues = getSelectedValues(options, hasSection, value);\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys);\n      const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);\n\n      if (multiple) {\n        (onChange as (items: SelectDropdownItem[]) => void)(newSelectedValues);\n      } else {\n        (onChange as (item: SelectDropdownItem) => void)(newSelectedValues[0]);\n        setIsSelectOpen(false);\n      }\n    },\n    [options, hasSection, multiple, onChange],\n  );\n\n  return (\n    <Dropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, styles.dropdown, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      disabled={disabled}\n      renderCta={(buttonProps, anchorRef) => (\n        <button\n          {...buttonProps}\n          type=\"button\"\n          ref={anchorRef}\n          className={buildClassnames([\n            className,\n            styles.dropdownTrigger,\n            formStyles.fullStyles,\n            formStyles.base,\n            hasError && formStyles.error,\n            compact && formStyles.compact,\n          ])}\n        >\n          <SelectedOption\n            placeholder={placeholder}\n            options={selectedValues}\n            selectionMode={selectionMode}\n          />\n        </button>\n      )}\n    >\n      {onSearchChange && (\n        <>\n          <Search className={styles.search} value={searchValue} onChange={onSearchChange} />\n          <hr className={styles.separator} />\n        </>\n      )}\n      <ListBox\n        className={buildClassnames([classNames?.optionsContainer, styles.listBox, className])}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        aria-describedby={ariaDescribedBy ?? `${id}-hint`}\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        {...otherProps}\n      >\n        {(item) =>\n          hasSection ? (\n            <ListItemSection {...(item as ListItemSectionProps)} />\n          ) : (\n            <ListItem {...(item as ListItemProps)} />\n          )\n        }\n      </ListBox>\n      {actions?.map(({ label, ...actionProps }) => (\n        <Fragment key={label}>\n          <hr className={styles.separator} key={`seperator-${label}`} />\n          <Button className={styles.ctaButton} variant=\"flat\" key={label} {...actionProps} />\n        </Fragment>\n      ))}\n    </Dropdown>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._listBox_fnslz_1 {\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: var(--sizes-sm);\n  scroll-padding: var(--sizes-xs) 0;\n}\n._listBox_fnslz_1[data-empty] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n._dropdown_fnslz_13 {\n  padding: var(--sizes-none) !important;\n}\n\n._dropdownTrigger_fnslz_17 {\n  padding-right: var(--sizes-9);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%;\n}\n\n._separator_fnslz_24 {\n  height: var(--sizes-line);\n  background: var(--colors-neutral-grey-base);\n  border: none;\n  margin: var(--sizes-none) var(--sizes-none);\n  width: 100%;\n}\n\n._search_fnslz_32 {\n  margin: var(--sizes-sm) !important;\n}\n\n._ctaButton_fnslz_36 {\n  justify-content: start !important;\n  padding-left: var(--sizes-xs) !important;\n  margin: var(--sizes-sm) var(--sizes-xs) !important;\n  border-radius: var(--radius-base) !important;\n  font-size: var(--text-body-font-size) !important;\n}\n._ctaButton_fnslz_36 svg {\n  width: var(--sizes-md) !important;\n  height: var(--sizes-md) !important;\n}");
+var styles = {"listBox":"_listBox_fnslz_1","dropdown":"_dropdown_fnslz_13","dropdownTrigger":"_dropdownTrigger_fnslz_17","separator":"_separator_fnslz_24","search":"_search_fnslz_32","ctaButton":"_ctaButton_fnslz_36"};
+
+module.exports = styles;
+//# sourceMappingURL=SelectDropdown.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectDropdown.module.scss.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.module.scss"],"sourcesContent":[".listBox {\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\n// used important to override styled-component styles from Dropdown\n.dropdown {\n  padding: var(--sizes-none) !important;\n}\n\n.dropdownTrigger {\n  padding-right: var(--sizes-9);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%;\n}\n\n.separator {\n  height: var(--sizes-line);\n  background: var(--colors-neutral-grey-base);\n  border: none;\n  margin: var(--sizes-none) var(--sizes-none);\n  width: 100%;\n}\n\n// used important to override styled-component styles from Search\n.search {\n  margin: var(--sizes-sm) !important;\n}\n\n// used important to override styled-component styles from Button\n.ctaButton {\n  justify-content: start !important;\n  padding-left: var(--sizes-xs) !important;\n  margin: var(--sizes-sm) var(--sizes-xs) !important;\n  border-radius: var(--radius-base) !important;\n  font-size: var(--text-body-font-size) !important;\n  svg {\n    width: var(--sizes-md) !important;\n    height: var(--sizes-md) !important;\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,s0CAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,WAAA,CAAA,qBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._listBox_fnslz_1 {\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: var(--sizes-sm);\n  scroll-padding: var(--sizes-xs) 0;\n}\n._listBox_fnslz_1[data-empty] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n._dropdown_fnslz_13 {\n  padding: var(--sizes-none) !important;\n}\n\n._dropdownTrigger_fnslz_17 {\n  padding-right: var(--sizes-9);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%;\n}\n\n._separator_fnslz_24 {\n  height: var(--sizes-line);\n  background: var(--colors-neutral-grey-base);\n  border: none;\n  margin: var(--sizes-none) var(--sizes-none);\n  width: 100%;\n}\n\n._search_fnslz_32 {\n  margin: var(--sizes-sm) !important;\n}\n\n._ctaButton_fnslz_36 {\n  justify-content: start !important;\n  padding-left: var(--sizes-xs) !important;\n  margin: var(--sizes-sm) var(--sizes-xs) !important;\n  border-radius: var(--radius-base) !important;\n  font-size: var(--text-body-font-size) !important;\n}\n._ctaButton_fnslz_36 svg {\n  width: var(--sizes-md) !important;\n  height: var(--sizes-md) !important;\n}");
+var styles = {"listBox":"_listBox_fnslz_1","dropdown":"_dropdown_fnslz_13","dropdownTrigger":"_dropdownTrigger_fnslz_17","separator":"_separator_fnslz_24","search":"_search_fnslz_32","ctaButton":"_ctaButton_fnslz_36"};
+
+export { styles as default };
+//# sourceMappingURL=SelectDropdown.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectDropdown.module.scss.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.module.scss"],"sourcesContent":[".listBox {\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\n// used important to override styled-component styles from Dropdown\n.dropdown {\n  padding: var(--sizes-none) !important;\n}\n\n.dropdownTrigger {\n  padding-right: var(--sizes-9);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%;\n}\n\n.separator {\n  height: var(--sizes-line);\n  background: var(--colors-neutral-grey-base);\n  border: none;\n  margin: var(--sizes-none) var(--sizes-none);\n  width: 100%;\n}\n\n// used important to override styled-component styles from Search\n.search {\n  margin: var(--sizes-sm) !important;\n}\n\n// used important to override styled-component styles from Button\n.ctaButton {\n  justify-content: start !important;\n  padding-left: var(--sizes-xs) !important;\n  margin: var(--sizes-sm) var(--sizes-xs) !important;\n  border-radius: var(--radius-base) !important;\n  font-size: var(--text-body-font-size) !important;\n  svg {\n    width: var(--sizes-md) !important;\n    height: var(--sizes-md) !important;\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,s0CAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,WAAA,CAAA,qBAAA;;;;"}

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

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
+var FlexRow = require('../../Flex/FlexRow/FlexRow.cjs');
 var Text = require('../../Text/Text.cjs');
-var styled = require('../ListItem/styled.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -11,16 +11,14 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 const SelectedOption = ({ placeholder, options, selectionMode }) => {
     var _a, _b, _c;
     if (options.length === 0) {
-        return (React__default.default.createElement(styled.ItemInfoContainer, null,
-            React__default.default.createElement(Text.Text, { variant: "placeholder" }, placeholder)));
+        return React__default.default.createElement(Text.Text, { variant: "placeholder" }, placeholder);
     }
     if (selectionMode === 'single') {
-        return (React__default.default.createElement(styled.ItemInfoContainer, null,
+        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),
             ((_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(styled.ItemInfoContainer, null,
-        React__default.default.createElement(Text.Text, { variant: "placeholder" }, options.map((opt) => opt.label).join(', '))));
+    return React__default.default.createElement(Text.Text, { variant: "placeholder" }, 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 { Text } from '../../Text';\nimport { ItemInfoContainer } from '../ListItem/styled';\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 (\n      <ItemInfoContainer>\n        <Text variant=\"placeholder\">{placeholder}</Text>\n      </ItemInfoContainer>\n    );\n  }\n\n  if (selectionMode === 'single') {\n    return (\n      <ItemInfoContainer>\n        <Text variant=\"placeholder\">{options[0]?.label}</Text>\n        {options[0]?.itemInfoSlot && <Text variant=\"hintText\">{options[0]?.itemInfoSlot}</Text>}\n      </ItemInfoContainer>\n    );\n  }\n\n  return (\n    <ItemInfoContainer>\n      <Text variant=\"placeholder\">{options.map((opt: any) => opt.label).join(', ')}</Text>\n    </ItemInfoContainer>\n  );\n};\n"],"names":["React","ItemInfoContainer","Text"],"mappings":";;;;;;;;;;AAWO,MAAM,cAAc,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAuB,KAAI;;AAC7F,IAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;QACxB,QACEA,qCAACC,wBAAiB,EAAA,IAAA;YAChBD,sBAAC,CAAA,aAAA,CAAAE,SAAI,EAAC,EAAA,OAAO,EAAC,aAAa,IAAE,WAAW,CAAQ,CAC9B;AAEvB;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE;QAC9B,QACEF,qCAACC,wBAAiB,EAAA,IAAA;AAChB,YAAAD,sBAAA,CAAA,aAAA,CAACE,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,KAAIF,sBAAC,CAAA,aAAA,CAAAE,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,CACrE;AAEvB;IAED,QACEF,qCAACC,wBAAiB,EAAA,IAAA;QAChBD,sBAAC,CAAA,aAAA,CAAAE,SAAI,EAAC,EAAA,OAAO,EAAC,aAAa,EAAE,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,GAAQ,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ,CAClE;AAExB;;;;"}
+{"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;;;;"}

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

@@ -1,20 +1,18 @@
 import React__default from 'react';
+import { FlexRow } from '../../Flex/FlexRow/FlexRow.js';
 import { Text } from '../../Text/Text.js';
-import { ItemInfoContainer } from '../ListItem/styled.js';
 
 const SelectedOption = ({ placeholder, options, selectionMode }) => {
     var _a, _b, _c;
     if (options.length === 0) {
-        return (React__default.createElement(ItemInfoContainer, null,
-            React__default.createElement(Text, { variant: "placeholder" }, placeholder)));
+        return React__default.createElement(Text, { variant: "placeholder" }, placeholder);
     }
     if (selectionMode === 'single') {
-        return (React__default.createElement(ItemInfoContainer, null,
+        return (React__default.createElement(FlexRow, { gap: "sm" },
             React__default.createElement(Text, { variant: "placeholder" }, (_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(ItemInfoContainer, null,
-        React__default.createElement(Text, { variant: "placeholder" }, options.map((opt) => opt.label).join(', '))));
+    return React__default.createElement(Text, { variant: "placeholder" }, 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 { Text } from '../../Text';\nimport { ItemInfoContainer } from '../ListItem/styled';\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 (\n      <ItemInfoContainer>\n        <Text variant=\"placeholder\">{placeholder}</Text>\n      </ItemInfoContainer>\n    );\n  }\n\n  if (selectionMode === 'single') {\n    return (\n      <ItemInfoContainer>\n        <Text variant=\"placeholder\">{options[0]?.label}</Text>\n        {options[0]?.itemInfoSlot && <Text variant=\"hintText\">{options[0]?.itemInfoSlot}</Text>}\n      </ItemInfoContainer>\n    );\n  }\n\n  return (\n    <ItemInfoContainer>\n      <Text variant=\"placeholder\">{options.map((opt: any) => opt.label).join(', ')}</Text>\n    </ItemInfoContainer>\n  );\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,QACEA,6BAAC,iBAAiB,EAAA,IAAA;YAChBA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,aAAa,IAAE,WAAW,CAAQ,CAC9B;AAEvB;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE;QAC9B,QACEA,6BAAC,iBAAiB,EAAA,IAAA;AAChB,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,CACrE;AAEvB;IAED,QACEA,6BAAC,iBAAiB,EAAA,IAAA;QAChBA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,aAAa,EAAE,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,GAAQ,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ,CAClE;AAExB;;;;"}
+{"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;;;;"}

package/dist/utils/forms/form.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._fullStyles_1j3kl_1 {\n  /* Set default CSS custom properties */\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n}\n._fullStyles_1j3kl_1:disabled, ._fullStyles_1j3kl_1[data-disabled] {\n  opacity: 1;\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-light);\n  cursor: not-allowed;\n}\n._fullStyles_1j3kl_1._compact_1j3kl_13 {\n  --outline-size: 2px;\n  min-height: var(--sizes-8);\n}\n._fullStyles_1j3kl_1._error_1j3kl_17 {\n  --border-color: var(--colors-secondary-red-base);\n  --shadow-color: var(--colors-secondary-red-light);\n}\n._fullStyles_1j3kl_1:focus {\n  border-color: var(--border-color);\n  box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n  outline: 0;\n}\n._fullStyles_1j3kl_1::placeholder {\n  font-family: var(--text-placeholder-font-family);\n  font-style: var(--text-placeholder-font-style);\n  font-weight: var(--text-placeholder-font-weight);\n  font-size: var(--text-placeholder-font-size);\n  line-height: var(--text-placeholder-line-height);\n  color: var(--text-placeholder-color);\n  text-decoration: var(--text-placeholder-text-decoration);\n  letter-spacing: var(--text-placeholder-letter-spacing);\n}\n._fullStyles_1j3kl_1:invalid {\n  box-shadow: 0 0 0 var(--outline-size) var(--border-color);\n  border-color: var(--colors-secondary-red-base);\n}\n\n._base_1j3kl_41 {\n  font-family: var(--text-body-font-family);\n  font-style: var(--text-body-font-style);\n  font-weight: var(--text-body-font-weight);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n  text-decoration: var(--text-body-text-decoration);\n  letter-spacing: var(--text-body-letter-spacing);\n  appearance: none;\n  box-sizing: border-box;\n  background-color: white;\n  text-align: left;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: 1px solid var(--border-color);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n._base_1j3kl_41._inputGroup_1j3kl_62:first-child {\n  padding-right: calc(var(--sizes-3) - var(--sizes-1));\n}\n._base_1j3kl_41._inputGroup_1j3kl_62:last-child {\n  padding-left: var(--sizes-2);\n}\n._base_1j3kl_41._inputGroup_1j3kl_62:not(:first-child):not(:last-child) {\n  padding-inline: var(--sizes-2);\n}");
+var formStyles = {"fullStyles":"_fullStyles_1j3kl_1","compact":"_compact_1j3kl_13","error":"_error_1j3kl_17","base":"_base_1j3kl_41","inputGroup":"_inputGroup_1j3kl_62"};
+
+module.exports = formStyles;
+//# sourceMappingURL=form.module.scss.cjs.map

package/dist/utils/forms/form.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.module.scss.cjs","sources":["../../../src/utils/forms/form.module.scss"],"sourcesContent":[".fullStyles {\n  /* Set default CSS custom properties */\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n\n  &:disabled,\n  &[data-disabled] {\n    opacity: 1;\n    box-shadow: none;\n    background-color: var(--colors-neutral-grey-light);\n    cursor: not-allowed;\n  }\n\n  &.compact {\n    --outline-size: 2px;\n    min-height: var(--sizes-8);\n  }\n\n  &.error {\n    --border-color: var(--colors-secondary-red-base);\n    --shadow-color: var(--colors-secondary-red-light);\n  }\n\n  &:focus {\n    border-color: var(--border-color);\n    box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n    outline: 0;\n  }\n\n  &::placeholder {\n    font-family: var(--text-placeholder-font-family);\n    font-style: var(--text-placeholder-font-style);\n    font-weight: var(--text-placeholder-font-weight);\n    font-size: var(--text-placeholder-font-size);\n    line-height: var(--text-placeholder-line-height);\n    color: var(--text-placeholder-color);\n    text-decoration: var(--text-placeholder-text-decoration);\n    letter-spacing: var(--text-placeholder-letter-spacing);\n  }\n\n  &:invalid {\n    box-shadow: 0 0 0 var(--outline-size) var(--border-color);\n    border-color: var(--colors-secondary-red-base);\n  }\n}\n\n.base {\n  font-family: var(--text-body-font-family);\n  font-style: var(--text-body-font-style);\n  font-weight: var(--text-body-font-weight);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n  text-decoration: var(--text-body-text-decoration);\n  letter-spacing: var(--text-body-letter-spacing);\n\n  appearance: none;\n  box-sizing: border-box;\n\n  background-color: white;\n  text-align: left;\n\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: 1px solid var(--border-color);\n\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  &.inputGroup {\n    &:first-child {\n      padding-right: calc(var(--sizes-3) - var(--sizes-1));\n    }\n\n    &:last-child {\n      padding-left: var(--sizes-2);\n    }\n\n    &:not(:first-child):not(:last-child) {\n      padding-inline: var(--sizes-2);\n    }\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,43EAAA;AACA,iBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,sBAAA;;;;"}

package/dist/utils/forms/form.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._fullStyles_1j3kl_1 {\n  /* Set default CSS custom properties */\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n}\n._fullStyles_1j3kl_1:disabled, ._fullStyles_1j3kl_1[data-disabled] {\n  opacity: 1;\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-light);\n  cursor: not-allowed;\n}\n._fullStyles_1j3kl_1._compact_1j3kl_13 {\n  --outline-size: 2px;\n  min-height: var(--sizes-8);\n}\n._fullStyles_1j3kl_1._error_1j3kl_17 {\n  --border-color: var(--colors-secondary-red-base);\n  --shadow-color: var(--colors-secondary-red-light);\n}\n._fullStyles_1j3kl_1:focus {\n  border-color: var(--border-color);\n  box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n  outline: 0;\n}\n._fullStyles_1j3kl_1::placeholder {\n  font-family: var(--text-placeholder-font-family);\n  font-style: var(--text-placeholder-font-style);\n  font-weight: var(--text-placeholder-font-weight);\n  font-size: var(--text-placeholder-font-size);\n  line-height: var(--text-placeholder-line-height);\n  color: var(--text-placeholder-color);\n  text-decoration: var(--text-placeholder-text-decoration);\n  letter-spacing: var(--text-placeholder-letter-spacing);\n}\n._fullStyles_1j3kl_1:invalid {\n  box-shadow: 0 0 0 var(--outline-size) var(--border-color);\n  border-color: var(--colors-secondary-red-base);\n}\n\n._base_1j3kl_41 {\n  font-family: var(--text-body-font-family);\n  font-style: var(--text-body-font-style);\n  font-weight: var(--text-body-font-weight);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n  text-decoration: var(--text-body-text-decoration);\n  letter-spacing: var(--text-body-letter-spacing);\n  appearance: none;\n  box-sizing: border-box;\n  background-color: white;\n  text-align: left;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: 1px solid var(--border-color);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n._base_1j3kl_41._inputGroup_1j3kl_62:first-child {\n  padding-right: calc(var(--sizes-3) - var(--sizes-1));\n}\n._base_1j3kl_41._inputGroup_1j3kl_62:last-child {\n  padding-left: var(--sizes-2);\n}\n._base_1j3kl_41._inputGroup_1j3kl_62:not(:first-child):not(:last-child) {\n  padding-inline: var(--sizes-2);\n}");
+var formStyles = {"fullStyles":"_fullStyles_1j3kl_1","compact":"_compact_1j3kl_13","error":"_error_1j3kl_17","base":"_base_1j3kl_41","inputGroup":"_inputGroup_1j3kl_62"};
+
+export { formStyles as default };
+//# sourceMappingURL=form.module.scss.js.map