@veeqo/ui 14.11.2 → 14.12.0-beta-1

package/dist/components/DateRangePicker/DateRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.js","sources":["../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from 'react';\nimport type { DateRange, DateValue } from 'react-aria-components';\nimport { Button } from '../Button';\nimport { Select } from '../Select';\nimport { DateInputField } from '../DateInputField';\nimport { RangeCalendar, useIsDateUnavailable } from '../Calendars';\nimport { Card } from '../Card';\nimport { theme } from '../../theme';\nimport { Stack } from '../Stack';\nimport { ComparePreviousPeriod } from './components/ComparePreviousPeriod';\nimport { DATE_RANGE_OPTIONS, DateRanges, checkForMatchingPreset, getDateRange } from './constants';\nimport { Divider } from './components/Divider';\nimport { DateRangePickerProps } from './types';\n\nexport const DateRangePicker = ({\n  // Style props\n  className,\n  style,\n  isDisabled,\n  // Customizable options\n  showDatePresets = true,\n  onReset,\n  // Calendar props\n  disabledRanges,\n  disallowWeekends,\n  maxValue,\n  minValue,\n  selectedPreset,\n  setSelectedPreset,\n  selectedRange,\n  setSelectedRange,\n  // Previous period props\n  'aria-describedby': ariaDescribedBy,\n  'aria-label': ariaLabel,\n  ...previousPeriodProps\n}: DateRangePickerProps) => {\n  const { isDateRangeUnavailable } = useIsDateUnavailable({\n    disabledRanges,\n    disallowWeekends,\n    maxValue,\n    minValue,\n  });\n\n  const updateRangePreset = (selectedValue: string) => {\n    setSelectedRange(getDateRange(DateRanges[selectedValue as DateRanges]));\n    setSelectedPreset(\n      DATE_RANGE_OPTIONS.find(({ value }) => value === selectedValue) || DATE_RANGE_OPTIONS[0],\n    );\n  };\n\n  const updateDateSegment = useCallback(\n    (slot: 'start' | 'end') => (value: DateValue | null) => {\n      if (!value) return;\n\n      const newRange = {\n        start: slot === 'start' ? value : selectedRange?.start,\n        end: slot === 'end' ? value : selectedRange?.end,\n      } as DateRange;\n\n      setSelectedRange(newRange);\n    },\n    [selectedRange?.end, selectedRange?.start, setSelectedRange],\n  );\n\n  const isDateRangeInvalid = useMemo(\n    () => isDateRangeUnavailable(selectedRange),\n    [isDateRangeUnavailable, selectedRange],\n  );\n\n  // Memoize finding preset since checkForMatchingPreset isn't quick.\n  const matchedPreset = useMemo(() => {\n    if (!selectedRange) return null;\n    return checkForMatchingPreset(selectedRange);\n  }, [selectedRange]);\n\n  useEffect(() => {\n    if (matchedPreset)\n      setSelectedPreset(matchedPreset); // If selected value is a preset, set it.\n    else setSelectedPreset(DATE_RANGE_OPTIONS[0]); // Otherwise, select \"custom\" option.\n  }, [matchedPreset, setSelectedPreset]);\n\n  return (\n    <Stack\n      direction=\"vertical\"\n      alignX=\"stretch\"\n      spacing=\"0\"\n      style={{ gap: theme.sizes.base, ...style }}\n      className={className}\n      aria-describedby={ariaDescribedBy}\n      aria-label={ariaLabel}\n    >\n      {showDatePresets && (\n        <Select\n          disabled={isDisabled}\n          label=\"Date Range\"\n          options={DATE_RANGE_OPTIONS}\n          value={selectedPreset?.value}\n          onChange={updateRangePreset}\n        />\n      )}\n\n      <DateInputField\n        isRangeInput\n        disabled={isDisabled}\n        label=\"Start date - End date\"\n        onChangeStartDate={updateDateSegment('start')}\n        onChangeEndDate={updateDateSegment('end')}\n        startValue={selectedRange && selectedRange.start}\n        endValue={selectedRange && selectedRange.end}\n        error={isDateRangeInvalid ? 'Range contains invalid dates' : undefined}\n        disabledRanges={disabledRanges}\n        disallowWeekends={disallowWeekends}\n        maxValue={maxValue}\n        minValue={minValue}\n      />\n\n      {previousPeriodProps.showPreviousPeriod && <ComparePreviousPeriod {...previousPeriodProps} />}\n\n      <Divider />\n\n      <Stack alignX=\"center\">\n        <RangeCalendar\n          aria-label=\"Selected Date Range\"\n          isDisabled={isDisabled}\n          value={selectedRange}\n          onChange={setSelectedRange}\n          disabledRanges={disabledRanges}\n          maxValue={maxValue}\n          minValue={minValue}\n          disallowWeekends={disallowWeekends}\n        />\n      </Stack>\n\n      {!!onReset && (\n        <>\n          <Divider />\n          <Card.Footer style={{ display: 'flex', justifyContent: 'end', padding: 0, margin: 0 }}>\n            <Button variant=\"default\" size=\"sm\" onClick={onReset} disabled={isDisabled}>\n              Reset\n            </Button>\n          </Card.Footer>\n        </>\n      )}\n    </Stack>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"DateRangePicker.js","sources":["../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from 'react';\nimport type { DateRange, DateValue } from 'react-aria-components';\nimport { Button } from '../Button';\nimport { Select } from '../Select';\nimport { DateInputField } from '../DateInputField';\nimport { RangeCalendar, useIsDateUnavailable } from '../Calendars';\nimport { Card } from '../Card';\nimport { theme } from '../../theme';\nimport { Stack } from '../Stack';\nimport { ComparePreviousPeriod } from './components/ComparePreviousPeriod';\nimport { DATE_RANGE_OPTIONS, DateRanges, checkForMatchingPreset, getDateRange } from './constants';\nimport { Divider } from './components/Divider';\nimport { DateRangePickerProps } from './types';\n\nexport const DateRangePicker = ({\n  // Style props\n  className,\n  style,\n  isDisabled,\n  // Customizable options\n  showDatePresets = true,\n  onReset,\n  // Calendar props\n  disabledRanges,\n  disallowWeekends,\n  maxValue,\n  minValue,\n  selectedPreset,\n  setSelectedPreset,\n  selectedRange,\n  setSelectedRange,\n  // Previous period props\n  'aria-describedby': ariaDescribedBy,\n  'aria-label': ariaLabel,\n  ...previousPeriodProps\n}: DateRangePickerProps) => {\n  const { isDateRangeUnavailable } = useIsDateUnavailable({\n    disabledRanges,\n    disallowWeekends,\n    maxValue,\n    minValue,\n  });\n\n  const updateRangePreset = (selectedValue: string) => {\n    setSelectedRange(getDateRange(DateRanges[selectedValue as DateRanges]));\n    setSelectedPreset(\n      DATE_RANGE_OPTIONS.find(({ value }) => value === selectedValue) || DATE_RANGE_OPTIONS[0],\n    );\n  };\n\n  const updateDateSegment = useCallback(\n    (slot: 'start' | 'end') => (value: DateValue) => {\n      const newRange = {\n        start: slot === 'start' ? value : selectedRange?.start,\n        end: slot === 'end' ? value : selectedRange?.end,\n      } as DateRange;\n\n      setSelectedRange(newRange);\n    },\n    [selectedRange?.end, selectedRange?.start, setSelectedRange],\n  );\n\n  const isDateRangeInvalid = useMemo(\n    () => isDateRangeUnavailable(selectedRange),\n    [isDateRangeUnavailable, selectedRange],\n  );\n\n  // Memoize finding preset since checkForMatchingPreset isn't quick.\n  const matchedPreset = useMemo(() => {\n    if (!selectedRange) return null;\n    return checkForMatchingPreset(selectedRange);\n  }, [selectedRange]);\n\n  useEffect(() => {\n    if (matchedPreset)\n      setSelectedPreset(matchedPreset); // If selected value is a preset, set it.\n    else setSelectedPreset(DATE_RANGE_OPTIONS[0]); // Otherwise, select \"custom\" option.\n  }, [matchedPreset, setSelectedPreset]);\n\n  return (\n    <Stack\n      direction=\"vertical\"\n      alignX=\"stretch\"\n      spacing=\"0\"\n      style={{ gap: theme.sizes.base, ...style }}\n      className={className}\n      aria-describedby={ariaDescribedBy}\n      aria-label={ariaLabel}\n    >\n      {showDatePresets && (\n        <Select\n          disabled={isDisabled}\n          label=\"Date Range\"\n          options={DATE_RANGE_OPTIONS}\n          value={selectedPreset?.value}\n          onChange={updateRangePreset}\n        />\n      )}\n\n      <DateInputField\n        isRangeInput\n        disabled={isDisabled}\n        label=\"Start date - End date\"\n        onChangeStartDate={updateDateSegment('start')}\n        onChangeEndDate={updateDateSegment('end')}\n        startValue={selectedRange && selectedRange.start}\n        endValue={selectedRange && selectedRange.end}\n        error={isDateRangeInvalid ? 'Range contains invalid dates' : undefined}\n        disabledRanges={disabledRanges}\n        disallowWeekends={disallowWeekends}\n        maxValue={maxValue}\n        minValue={minValue}\n      />\n\n      {previousPeriodProps.showPreviousPeriod && <ComparePreviousPeriod {...previousPeriodProps} />}\n\n      <Divider />\n\n      <Stack alignX=\"center\">\n        <RangeCalendar\n          aria-label=\"Selected Date Range\"\n          isDisabled={isDisabled}\n          value={selectedRange}\n          onChange={setSelectedRange}\n          disabledRanges={disabledRanges}\n          maxValue={maxValue}\n          minValue={minValue}\n          disallowWeekends={disallowWeekends}\n        />\n      </Stack>\n\n      {!!onReset && (\n        <>\n          <Divider />\n          <Card.Footer style={{ display: 'flex', justifyContent: 'end', padding: 0, margin: 0 }}>\n            <Button variant=\"default\" size=\"sm\" onClick={onReset} disabled={isDisabled}>\n              Reset\n            </Button>\n          </Card.Footer>\n        </>\n      )}\n    </Stack>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/DateRangePicker/components/Divider.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
-var React = require('react');
-var Divider_module = require('./Divider.module.scss.cjs');
+var styled = require('styled-components');
+var index = require('../../../theme/index.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Divider = () => React__default.default.createElement("div", { className: Divider_module.divider });
+const Divider = styled__default.default.div.withConfig({ displayName: "vui--Divider", componentId: "vui--ssvmxc" }) `margin:0 -${index.theme.sizes.base};border-top:1px solid ${index.theme.colors.neutral.grey.base};`;
 
 exports.Divider = Divider;
 //# sourceMappingURL=Divider.cjs.map

package/dist/components/DateRangePicker/components/Divider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.cjs","sources":["../../../../src/components/DateRangePicker/components/Divider.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './Divider.module.scss';\n\nexport const Divider = () => <div className={styles.divider} />;\n"],"names":["React","styles"],"mappings":";;;;;;;;;AAGO,MAAM,OAAO,GAAG,MAAMA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,cAAM,CAAC,OAAO;;;;"}
+{"version":3,"file":"Divider.cjs","sources":["../../../../src/components/DateRangePicker/components/Divider.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport const Divider = styled.div`\n  margin: 0 -${theme.sizes.base};\n  border-top: 1px solid ${theme.colors.neutral.grey.base};\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAGO,MAAM,OAAO,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA,EAClBC,WAAK,CAAC,KAAK,CAAC,IAAI,CAAA,sBAAA,EACLA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,CAAA;;;;"}

package/dist/components/DateRangePicker/components/Divider.d.ts

@@ -1,2 +1 @@
-import React from 'react';
-export declare const Divider: () => React.JSX.Element;
+export declare const Divider: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/DateRangePicker/components/Divider.js

@@ -1,7 +1,7 @@
-import React__default from 'react';
-import styles from './Divider.module.scss.js';
+import styled from 'styled-components';
+import { theme } from '../../../theme/index.js';
 
-const Divider = () => React__default.createElement("div", { className: styles.divider });
+const Divider = styled.div.withConfig({ displayName: "vui--Divider", componentId: "vui--ssvmxc" }) `margin:0 -${theme.sizes.base};border-top:1px solid ${theme.colors.neutral.grey.base};`;
 
 export { Divider };
 //# sourceMappingURL=Divider.js.map

package/dist/components/DateRangePicker/components/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sources":["../../../../src/components/DateRangePicker/components/Divider.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './Divider.module.scss';\n\nexport const Divider = () => <div className={styles.divider} />;\n"],"names":["React"],"mappings":";;;AAGO,MAAM,OAAO,GAAG,MAAMA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,OAAO;;;;"}
+{"version":3,"file":"Divider.js","sources":["../../../../src/components/DateRangePicker/components/Divider.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport const Divider = styled.div`\n  margin: 0 -${theme.sizes.base};\n  border-top: 1px solid ${theme.colors.neutral.grey.base};\n`;\n"],"names":[],"mappings":";;;AAGO,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA,EAClB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA,sBAAA,EACL,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,CAAA;;;;"}

package/dist/components/DescriptionList/DescriptionList.cjs

@@ -1,30 +1,38 @@
 'use strict';
 
 var React = require('react');
-var DescriptionList_module = require('./DescriptionList.module.scss.cjs');
+var styled = require('styled-components');
+var index = require('../../theme/index.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
+const List = styled__default.default.dl.withConfig({ displayName: "vui--List", componentId: "vui--syirga" }) `margin:unset;& > * + *{margin-top:${index.theme.sizes.base};}`;
+const Item = styled__default.default.div.withConfig({ displayName: "vui--Item", componentId: "vui--dz7dgm" }) `& > * + *{margin-top:${index.theme.sizes.xs};}`;
+const ItemRow = styled__default.default.div.withConfig({ displayName: "vui--ItemRow", componentId: "vui--1b0o5wp" }) `display:flex;justify-content:space-between;& > * + *{margin-left:${index.theme.sizes.base};}`;
+const DescriptionContainer = styled__default.default.div.withConfig({ displayName: "vui--DescriptionContainer", componentId: "vui--foltw8" }) `text-align:right;& > * + *{margin-top:${index.theme.sizes.xs};}`;
+const Term = styled__default.default.dt.withConfig({ displayName: "vui--Term", componentId: "vui--s2cfux" }) `font-family:${index.theme.text.bodyBold.fontFamily};font-size:${index.theme.text.bodyBold.fontSize};font-weight:${index.theme.text.bodyBold.fontWeight};line-height:${index.theme.text.bodyBold.lineHeight};color:${index.theme.text.bodyBold.color};`;
+const Description = styled__default.default.dd.withConfig({ displayName: "vui--Description", componentId: "vui--1915ejg" }) `margin-left:unset;font-family:${index.theme.text.body.fontFamily};font-size:${index.theme.text.body.fontSize};font-weight:${index.theme.text.body.fontWeight};line-height:${index.theme.text.body.lineHeight};color:${index.theme.text.body.color};`;
 const DescriptionList = ({ items, horizontal }) => {
     const renderDescription = (description) => {
         if (Array.isArray(description)) {
-            return description.map((d) => (React__default.default.createElement("dd", { className: DescriptionList_module.description, key: d }, d)));
+            return description.map((d) => React__default.default.createElement(Description, { key: d }, d));
         }
-        return React__default.default.createElement("dd", { className: DescriptionList_module.description }, description);
+        return React__default.default.createElement(Description, null, description);
     };
     const renderItem = (item) => {
         if (horizontal) {
-            return (React__default.default.createElement("div", { className: DescriptionList_module.itemRow, key: item.term },
-                React__default.default.createElement("dt", { className: DescriptionList_module.term }, item.term),
-                React__default.default.createElement("div", { className: DescriptionList_module.descriptionContainer }, renderDescription(item.description))));
+            return (React__default.default.createElement(ItemRow, { key: item.term },
+                React__default.default.createElement(Term, null, item.term),
+                React__default.default.createElement(DescriptionContainer, null, renderDescription(item.description))));
         }
-        return (React__default.default.createElement("div", { className: DescriptionList_module.item, key: item.term },
-            React__default.default.createElement("dt", { className: DescriptionList_module.term }, item.term),
+        return (React__default.default.createElement(Item, { key: item.term },
+            React__default.default.createElement(Term, null, item.term),
             renderDescription(item.description)));
     };
-    return React__default.default.createElement("dl", { className: DescriptionList_module.list }, items.map(renderItem));
+    return React__default.default.createElement(List, null, items.map(renderItem));
 };
 
 exports.DescriptionList = DescriptionList;

package/dist/components/DescriptionList/DescriptionList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionList.cjs","sources":["../../../src/components/DescriptionList/DescriptionList.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './DescriptionList.module.scss';\n\ntype DescriptionListItem = {\n  term: string;\n  description: string | string[];\n};\n\nexport interface DescriptionListProps {\n  items: DescriptionListItem[];\n  horizontal?: boolean;\n}\n\nexport const DescriptionList = ({ items, horizontal }: DescriptionListProps) => {\n  const renderDescription = (description: string | string[]) => {\n    if (Array.isArray(description)) {\n      return description.map((d) => (\n        <dd className={styles.description} key={d}>\n          {d}\n        </dd>\n      ));\n    }\n    return <dd className={styles.description}>{description}</dd>;\n  };\n\n  const renderItem = (item: DescriptionListItem) => {\n    if (horizontal) {\n      return (\n        <div className={styles.itemRow} key={item.term}>\n          <dt className={styles.term}>{item.term}</dt>\n          <div className={styles.descriptionContainer}>{renderDescription(item.description)}</div>\n        </div>\n      );\n    }\n    return (\n      <div className={styles.item} key={item.term}>\n        <dt className={styles.term}>{item.term}</dt>\n        {renderDescription(item.description)}\n      </div>\n    );\n  };\n\n  return <dl className={styles.list}>{items.map(renderItem)}</dl>;\n};\n"],"names":["React","styles"],"mappings":";;;;;;;;;AAaO,MAAM,eAAe,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAwB,KAAI;AAC7E,IAAA,MAAM,iBAAiB,GAAG,CAAC,WAA8B,KAAI;AAC3D,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;YAC9B,OAAO,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,MACvBA,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAEC,sBAAM,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,EAAA,EACtC,CAAC,CACC,CACN,CAAC;AACH,QAAA;QACD,OAAOD,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAEC,sBAAM,CAAC,WAAW,EAAA,EAAG,WAAW,CAAM;AAC9D,IAAA,CAAC;AAED,IAAA,MAAM,UAAU,GAAG,CAAC,IAAyB,KAAI;AAC/C,QAAA,IAAI,UAAU,EAAE;AACd,YAAA,QACED,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,sBAAM,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,IAAI,EAAA;gBAC5CD,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAEC,sBAAM,CAAC,IAAI,EAAA,EAAG,IAAI,CAAC,IAAI,CAAM;AAC5C,gBAAAD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,sBAAM,CAAC,oBAAoB,EAAA,EAAG,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAO,CACpF;AAET,QAAA;AACD,QAAA,QACED,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,sBAAM,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,IAAI,EAAA;YACzCD,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAEC,sBAAM,CAAC,IAAI,EAAA,EAAG,IAAI,CAAC,IAAI,CAAM;AAC3C,YAAA,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAChC;AAEV,IAAA,CAAC;AAED,IAAA,OAAOD,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAEC,sBAAM,CAAC,IAAI,EAAA,EAAG,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,CAAM;AACjE;;;;"}
+{"version":3,"file":"DescriptionList.cjs","sources":["../../../src/components/DescriptionList/DescriptionList.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../theme';\n\nconst List = styled.dl`\n  margin: unset;\n\n  & > * + * {\n    margin-top: ${theme.sizes.base};\n  }\n`;\n\nconst Item = styled.div`\n  & > * + * {\n    margin-top: ${theme.sizes.xs};\n  }\n`;\n\nconst ItemRow = styled.div`\n  display: flex;\n  justify-content: space-between;\n\n  & > * + * {\n    margin-left: ${theme.sizes.base};\n  }\n`;\n\nconst DescriptionContainer = styled.div`\n  text-align: right;\n\n  & > * + * {\n    margin-top: ${theme.sizes.xs};\n  }\n`;\n\nconst Term = styled.dt`\n  font-family: ${theme.text.bodyBold.fontFamily};\n  font-size: ${theme.text.bodyBold.fontSize};\n  font-weight: ${theme.text.bodyBold.fontWeight};\n  line-height: ${theme.text.bodyBold.lineHeight};\n  color: ${theme.text.bodyBold.color};\n`;\n\nconst Description = styled.dd`\n  margin-left: unset;\n\n  font-family: ${theme.text.body.fontFamily};\n  font-size: ${theme.text.body.fontSize};\n  font-weight: ${theme.text.body.fontWeight};\n  line-height: ${theme.text.body.lineHeight};\n  color: ${theme.text.body.color};\n`;\n\ntype DescriptionListItem = {\n  term: string;\n  description: string | string[];\n};\n\nexport interface DescriptionListProps {\n  items: DescriptionListItem[];\n  horizontal?: boolean;\n}\n\nexport const DescriptionList = ({ items, horizontal }: DescriptionListProps) => {\n  const renderDescription = (description: string | string[]) => {\n    if (Array.isArray(description)) {\n      return description.map((d) => <Description key={d}>{d}</Description>);\n    }\n    return <Description>{description}</Description>;\n  };\n\n  const renderItem = (item: DescriptionListItem) => {\n    if (horizontal) {\n      return (\n        <ItemRow key={item.term}>\n          <Term>{item.term}</Term>\n          <DescriptionContainer>{renderDescription(item.description)}</DescriptionContainer>\n        </ItemRow>\n      );\n    }\n    return (\n      <Item key={item.term}>\n        <Term>{item.term}</Term>\n        {renderDescription(item.description)}\n      </Item>\n    );\n  };\n\n  return <List>{items.map(renderItem)}</List>;\n};\n"],"names":["styled","theme","React"],"mappings":"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"}

package/dist/components/DescriptionList/DescriptionList.js

@@ -1,24 +1,31 @@
 import React__default from 'react';
-import styles from './DescriptionList.module.scss.js';
+import styled from 'styled-components';
+import { theme } from '../../theme/index.js';
 
+const List = styled.dl.withConfig({ displayName: "vui--List", componentId: "vui--syirga" }) `margin:unset;& > * + *{margin-top:${theme.sizes.base};}`;
+const Item = styled.div.withConfig({ displayName: "vui--Item", componentId: "vui--dz7dgm" }) `& > * + *{margin-top:${theme.sizes.xs};}`;
+const ItemRow = styled.div.withConfig({ displayName: "vui--ItemRow", componentId: "vui--1b0o5wp" }) `display:flex;justify-content:space-between;& > * + *{margin-left:${theme.sizes.base};}`;
+const DescriptionContainer = styled.div.withConfig({ displayName: "vui--DescriptionContainer", componentId: "vui--foltw8" }) `text-align:right;& > * + *{margin-top:${theme.sizes.xs};}`;
+const Term = styled.dt.withConfig({ displayName: "vui--Term", componentId: "vui--s2cfux" }) `font-family:${theme.text.bodyBold.fontFamily};font-size:${theme.text.bodyBold.fontSize};font-weight:${theme.text.bodyBold.fontWeight};line-height:${theme.text.bodyBold.lineHeight};color:${theme.text.bodyBold.color};`;
+const Description = styled.dd.withConfig({ displayName: "vui--Description", componentId: "vui--1915ejg" }) `margin-left:unset;font-family:${theme.text.body.fontFamily};font-size:${theme.text.body.fontSize};font-weight:${theme.text.body.fontWeight};line-height:${theme.text.body.lineHeight};color:${theme.text.body.color};`;
 const DescriptionList = ({ items, horizontal }) => {
     const renderDescription = (description) => {
         if (Array.isArray(description)) {
-            return description.map((d) => (React__default.createElement("dd", { className: styles.description, key: d }, d)));
+            return description.map((d) => React__default.createElement(Description, { key: d }, d));
         }
-        return React__default.createElement("dd", { className: styles.description }, description);
+        return React__default.createElement(Description, null, description);
     };
     const renderItem = (item) => {
         if (horizontal) {
-            return (React__default.createElement("div", { className: styles.itemRow, key: item.term },
-                React__default.createElement("dt", { className: styles.term }, item.term),
-                React__default.createElement("div", { className: styles.descriptionContainer }, renderDescription(item.description))));
+            return (React__default.createElement(ItemRow, { key: item.term },
+                React__default.createElement(Term, null, item.term),
+                React__default.createElement(DescriptionContainer, null, renderDescription(item.description))));
         }
-        return (React__default.createElement("div", { className: styles.item, key: item.term },
-            React__default.createElement("dt", { className: styles.term }, item.term),
+        return (React__default.createElement(Item, { key: item.term },
+            React__default.createElement(Term, null, item.term),
             renderDescription(item.description)));
     };
-    return React__default.createElement("dl", { className: styles.list }, items.map(renderItem));
+    return React__default.createElement(List, null, items.map(renderItem));
 };
 
 export { DescriptionList };

package/dist/components/DescriptionList/DescriptionList.js.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionList.js","sources":["../../../src/components/DescriptionList/DescriptionList.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './DescriptionList.module.scss';\n\ntype DescriptionListItem = {\n  term: string;\n  description: string | string[];\n};\n\nexport interface DescriptionListProps {\n  items: DescriptionListItem[];\n  horizontal?: boolean;\n}\n\nexport const DescriptionList = ({ items, horizontal }: DescriptionListProps) => {\n  const renderDescription = (description: string | string[]) => {\n    if (Array.isArray(description)) {\n      return description.map((d) => (\n        <dd className={styles.description} key={d}>\n          {d}\n        </dd>\n      ));\n    }\n    return <dd className={styles.description}>{description}</dd>;\n  };\n\n  const renderItem = (item: DescriptionListItem) => {\n    if (horizontal) {\n      return (\n        <div className={styles.itemRow} key={item.term}>\n          <dt className={styles.term}>{item.term}</dt>\n          <div className={styles.descriptionContainer}>{renderDescription(item.description)}</div>\n        </div>\n      );\n    }\n    return (\n      <div className={styles.item} key={item.term}>\n        <dt className={styles.term}>{item.term}</dt>\n        {renderDescription(item.description)}\n      </div>\n    );\n  };\n\n  return <dl className={styles.list}>{items.map(renderItem)}</dl>;\n};\n"],"names":["React"],"mappings":";;;AAaO,MAAM,eAAe,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAwB,KAAI;AAC7E,IAAA,MAAM,iBAAiB,GAAG,CAAC,WAA8B,KAAI;AAC3D,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;YAC9B,OAAO,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,MACvBA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,EAAA,EACtC,CAAC,CACC,CACN,CAAC;AACH,QAAA;QACD,OAAOA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,EAAG,WAAW,CAAM;AAC9D,IAAA,CAAC;AAED,IAAA,MAAM,UAAU,GAAG,CAAC,IAAyB,KAAI;AAC/C,QAAA,IAAI,UAAU,EAAE;AACd,YAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,IAAI,EAAA;gBAC5CA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,EAAG,IAAI,CAAC,IAAI,CAAM;AAC5C,gBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,EAAA,EAAG,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAO,CACpF;AAET,QAAA;AACD,QAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,IAAI,EAAA;YACzCA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,EAAG,IAAI,CAAC,IAAI,CAAM;AAC3C,YAAA,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAChC;AAEV,IAAA,CAAC;AAED,IAAA,OAAOA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,EAAG,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,CAAM;AACjE;;;;"}
+{"version":3,"file":"DescriptionList.js","sources":["../../../src/components/DescriptionList/DescriptionList.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../theme';\n\nconst List = styled.dl`\n  margin: unset;\n\n  & > * + * {\n    margin-top: ${theme.sizes.base};\n  }\n`;\n\nconst Item = styled.div`\n  & > * + * {\n    margin-top: ${theme.sizes.xs};\n  }\n`;\n\nconst ItemRow = styled.div`\n  display: flex;\n  justify-content: space-between;\n\n  & > * + * {\n    margin-left: ${theme.sizes.base};\n  }\n`;\n\nconst DescriptionContainer = styled.div`\n  text-align: right;\n\n  & > * + * {\n    margin-top: ${theme.sizes.xs};\n  }\n`;\n\nconst Term = styled.dt`\n  font-family: ${theme.text.bodyBold.fontFamily};\n  font-size: ${theme.text.bodyBold.fontSize};\n  font-weight: ${theme.text.bodyBold.fontWeight};\n  line-height: ${theme.text.bodyBold.lineHeight};\n  color: ${theme.text.bodyBold.color};\n`;\n\nconst Description = styled.dd`\n  margin-left: unset;\n\n  font-family: ${theme.text.body.fontFamily};\n  font-size: ${theme.text.body.fontSize};\n  font-weight: ${theme.text.body.fontWeight};\n  line-height: ${theme.text.body.lineHeight};\n  color: ${theme.text.body.color};\n`;\n\ntype DescriptionListItem = {\n  term: string;\n  description: string | string[];\n};\n\nexport interface DescriptionListProps {\n  items: DescriptionListItem[];\n  horizontal?: boolean;\n}\n\nexport const DescriptionList = ({ items, horizontal }: DescriptionListProps) => {\n  const renderDescription = (description: string | string[]) => {\n    if (Array.isArray(description)) {\n      return description.map((d) => <Description key={d}>{d}</Description>);\n    }\n    return <Description>{description}</Description>;\n  };\n\n  const renderItem = (item: DescriptionListItem) => {\n    if (horizontal) {\n      return (\n        <ItemRow key={item.term}>\n          <Term>{item.term}</Term>\n          <DescriptionContainer>{renderDescription(item.description)}</DescriptionContainer>\n        </ItemRow>\n      );\n    }\n    return (\n      <Item key={item.term}>\n        <Term>{item.term}</Term>\n        {renderDescription(item.description)}\n      </Item>\n    );\n  };\n\n  return <List>{items.map(renderItem)}</List>;\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/DetailPage/DetailPage.cjs

@@ -1,8 +1,7 @@
 'use strict';
 
 var React = require('react');
-var buildClassnames = require('../../utils/buildClassnames.cjs');
-var DetailPage_module = require('./DetailPage.module.scss.cjs');
+var styled = require('./styled.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -13,11 +12,8 @@ const DetailPage = ({ renderHeader, children }) => {
     const toggleSidebar = () => setShouldShowSidebar(!shouldShowSidebar);
     return (React__default.default.createElement("main", null,
         renderHeader(toggleSidebar, shouldShowSidebar),
-        React__default.default.createElement("div", { className: DetailPage_module.contentContainer },
-            React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
-                    DetailPage_module.columnGrid,
-                    shouldShowSidebar ? DetailPage_module.sidebarVisible : DetailPage_module.sidebarHidden,
-                ]) }, children))));
+        React__default.default.createElement(styled.ContentContainer, null,
+            React__default.default.createElement(styled.ColumnGrid, { showSidebar: shouldShowSidebar }, children))));
 };
 
 exports.DetailPage = DetailPage;

package/dist/components/DetailPage/DetailPage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DetailPage.cjs","sources":["../../../src/components/DetailPage/DetailPage.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport styles from './DetailPage.module.scss';\n\nexport interface PageHeaderProps {\n  renderHeader: (toggleSidebar: () => void, shouldShowSidebar?: boolean) => ReactNode;\n  children: ReactNode;\n}\n\nexport const DetailPage = ({ renderHeader, children }: PageHeaderProps) => {\n  const [shouldShowSidebar, setShouldShowSidebar] = useState(true);\n\n  const toggleSidebar = () => setShouldShowSidebar(!shouldShowSidebar);\n\n  return (\n    <main>\n      {renderHeader(toggleSidebar, shouldShowSidebar)}\n      <div className={styles.contentContainer}>\n        <div\n          className={buildClassnames([\n            styles.columnGrid,\n            shouldShowSidebar ? styles.sidebarVisible : styles.sidebarHidden,\n          ])}\n        >\n          {children}\n        </div>\n      </div>\n    </main>\n  );\n};\n"],"names":["useState","React","styles","buildClassnames"],"mappings":";;;;;;;;;;AAUO,MAAM,UAAU,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAmB,KAAI;IACxE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAGA,cAAQ,CAAC,IAAI,CAAC;IAEhE,MAAM,aAAa,GAAG,MAAM,oBAAoB,CAAC,CAAC,iBAAiB,CAAC;AAEpE,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA;AACG,QAAA,YAAY,CAAC,aAAa,EAAE,iBAAiB,CAAC;AAC/C,QAAAA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,iBAAM,CAAC,gBAAgB,EAAA;YACrCD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEE,+BAAe,CAAC;AACzB,oBAAAD,iBAAM,CAAC,UAAU;oBACjB,iBAAiB,GAAGA,iBAAM,CAAC,cAAc,GAAGA,iBAAM,CAAC,aAAa;AACjE,iBAAA,CAAC,IAED,QAAQ,CACL,CACF,CACD;AAEX;;;;"}
+{"version":3,"file":"DetailPage.cjs","sources":["../../../src/components/DetailPage/DetailPage.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { ColumnGrid, ContentContainer } from './styled';\n\nexport interface PageHeaderProps {\n  renderHeader: (toggleSidebar: () => void, shouldShowSidebar?: boolean) => ReactNode;\n  children: ReactNode;\n}\n\nexport const DetailPage = ({ renderHeader, children }: PageHeaderProps) => {\n  const [shouldShowSidebar, setShouldShowSidebar] = useState(true);\n\n  const toggleSidebar = () => setShouldShowSidebar(!shouldShowSidebar);\n\n  return (\n    <main>\n      {renderHeader(toggleSidebar, shouldShowSidebar)}\n      <ContentContainer>\n        <ColumnGrid showSidebar={shouldShowSidebar}>{children}</ColumnGrid>\n      </ContentContainer>\n    </main>\n  );\n};\n"],"names":["useState","React","ContentContainer","ColumnGrid"],"mappings":";;;;;;;;;AASO,MAAM,UAAU,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAmB,KAAI;IACxE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAGA,cAAQ,CAAC,IAAI,CAAC;IAEhE,MAAM,aAAa,GAAG,MAAM,oBAAoB,CAAC,CAAC,iBAAiB,CAAC;AAEpE,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA;AACG,QAAA,YAAY,CAAC,aAAa,EAAE,iBAAiB,CAAC;AAC/C,QAAAA,sBAAA,CAAA,aAAA,CAACC,uBAAgB,EAAA,IAAA;YACfD,sBAAA,CAAA,aAAA,CAACE,iBAAU,EAAA,EAAC,WAAW,EAAE,iBAAiB,EAAA,EAAG,QAAQ,CAAc,CAClD,CACd;AAEX;;;;"}

package/dist/components/DetailPage/DetailPage.js

@@ -1,17 +1,13 @@
 import React__default, { useState } from 'react';
-import { buildClassnames } from '../../utils/buildClassnames.js';
-import styles from './DetailPage.module.scss.js';
+import { ContentContainer, ColumnGrid } from './styled.js';
 
 const DetailPage = ({ renderHeader, children }) => {
     const [shouldShowSidebar, setShouldShowSidebar] = useState(true);
     const toggleSidebar = () => setShouldShowSidebar(!shouldShowSidebar);
     return (React__default.createElement("main", null,
         renderHeader(toggleSidebar, shouldShowSidebar),
-        React__default.createElement("div", { className: styles.contentContainer },
-            React__default.createElement("div", { className: buildClassnames([
-                    styles.columnGrid,
-                    shouldShowSidebar ? styles.sidebarVisible : styles.sidebarHidden,
-                ]) }, children))));
+        React__default.createElement(ContentContainer, null,
+            React__default.createElement(ColumnGrid, { showSidebar: shouldShowSidebar }, children))));
 };
 
 export { DetailPage };

package/dist/components/DetailPage/DetailPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailPage.js","sources":["../../../src/components/DetailPage/DetailPage.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport styles from './DetailPage.module.scss';\n\nexport interface PageHeaderProps {\n  renderHeader: (toggleSidebar: () => void, shouldShowSidebar?: boolean) => ReactNode;\n  children: ReactNode;\n}\n\nexport const DetailPage = ({ renderHeader, children }: PageHeaderProps) => {\n  const [shouldShowSidebar, setShouldShowSidebar] = useState(true);\n\n  const toggleSidebar = () => setShouldShowSidebar(!shouldShowSidebar);\n\n  return (\n    <main>\n      {renderHeader(toggleSidebar, shouldShowSidebar)}\n      <div className={styles.contentContainer}>\n        <div\n          className={buildClassnames([\n            styles.columnGrid,\n            shouldShowSidebar ? styles.sidebarVisible : styles.sidebarHidden,\n          ])}\n        >\n          {children}\n        </div>\n      </div>\n    </main>\n  );\n};\n"],"names":["React"],"mappings":";;;;AAUO,MAAM,UAAU,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAmB,KAAI;IACxE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;IAEhE,MAAM,aAAa,GAAG,MAAM,oBAAoB,CAAC,CAAC,iBAAiB,CAAC;AAEpE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA;AACG,QAAA,YAAY,CAAC,aAAa,EAAE,iBAAiB,CAAC;AAC/C,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAA;YACrCA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,oBAAA,MAAM,CAAC,UAAU;oBACjB,iBAAiB,GAAG,MAAM,CAAC,cAAc,GAAG,MAAM,CAAC,aAAa;AACjE,iBAAA,CAAC,IAED,QAAQ,CACL,CACF,CACD;AAEX;;;;"}
+{"version":3,"file":"DetailPage.js","sources":["../../../src/components/DetailPage/DetailPage.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { ColumnGrid, ContentContainer } from './styled';\n\nexport interface PageHeaderProps {\n  renderHeader: (toggleSidebar: () => void, shouldShowSidebar?: boolean) => ReactNode;\n  children: ReactNode;\n}\n\nexport const DetailPage = ({ renderHeader, children }: PageHeaderProps) => {\n  const [shouldShowSidebar, setShouldShowSidebar] = useState(true);\n\n  const toggleSidebar = () => setShouldShowSidebar(!shouldShowSidebar);\n\n  return (\n    <main>\n      {renderHeader(toggleSidebar, shouldShowSidebar)}\n      <ContentContainer>\n        <ColumnGrid showSidebar={shouldShowSidebar}>{children}</ColumnGrid>\n      </ContentContainer>\n    </main>\n  );\n};\n"],"names":["React"],"mappings":";;;AASO,MAAM,UAAU,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAmB,KAAI;IACxE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;IAEhE,MAAM,aAAa,GAAG,MAAM,oBAAoB,CAAC,CAAC,iBAAiB,CAAC;AAEpE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA;AACG,QAAA,YAAY,CAAC,aAAa,EAAE,iBAAiB,CAAC;AAC/C,QAAAA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,IAAA;YACfA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,WAAW,EAAE,iBAAiB,EAAA,EAAG,QAAQ,CAAc,CAClD,CACd;AAEX;;;;"}

package/dist/components/DetailPage/styled.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var styled = require('styled-components');
+var index = require('../../theme/index.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const { sizes, colors } = index.theme;
+const ColumnGrid = styled__default.default.div.withConfig({ displayName: "vui--ColumnGrid", componentId: "vui--2wnu9m" }) `width:100%;display:grid;grid-template-columns:${({ showSidebar = true }) => showSidebar ? `calc(100% - 312px - ${sizes.md}) 312px` : '100% 312px'};align-items:flex-start;grid-gap:${sizes.md};transition:all 0.2s ease-in-out;& > *:nth-child(2){opacity:${({ showSidebar = true }) => (showSidebar ? '1.0' : '0')};transition:opacity 0.2s;}`;
+const ContentContainer = styled__default.default.div.withConfig({ displayName: "vui--ContentContainer", componentId: "vui--nvukr5" }) `width:100%;box-sizing:border-box;padding:${sizes.md};overflow-x:hidden;background-color:${colors.neutral.grey.lightest};`;
+
+exports.ColumnGrid = ColumnGrid;
+exports.ContentContainer = ContentContainer;
+//# sourceMappingURL=styled.cjs.map

package/dist/components/DetailPage/styled.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/DetailPage/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\n\nconst { sizes, colors } = theme;\n\nexport const ColumnGrid = styled.div<any>`\n  width: 100%;\n  display: grid;\n  grid-template-columns: ${({ showSidebar = true }) =>\n    showSidebar ? `calc(100% - 312px - ${sizes.md}) 312px` : '100% 312px'};\n  align-items: flex-start;\n  grid-gap: ${sizes.md};\n  transition: all 0.2s ease-in-out;\n\n  & > *:nth-child(2) {\n    opacity: ${({ showSidebar = true }) => (showSidebar ? '1.0' : '0')};\n    transition: opacity 0.2s;\n  }\n`;\n\nexport const ContentContainer = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  padding: ${sizes.md};\n  overflow-x: hidden;\n  background-color: ${colors.neutral.grey.lightest};\n`;\n"],"names":["theme","styled"],"mappings":";;;;;;;;;AAGA,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAGA,WAAK;AAExB,MAAM,UAAU,GAAGC,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8CAAA,EAGT,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,KAC9C,WAAW,GAAG,CAAA,oBAAA,EAAuB,KAAK,CAAC,EAAE,CAAA,OAAA,CAAS,GAAG,YAAY,CAAA,iCAAA,EAE3D,KAAK,CAAC,EAAE,CAAA,4DAAA,EAIP,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,MAAM,WAAW,GAAG,KAAK,GAAG,GAAG,CAAC,CAAA,0BAAA;MAKzD,gBAAgB,GAAGA,uBAAM,CAAC,GAAG,8HAG7B,KAAK,CAAC,EAAE,CAAA,oCAAA,EAEC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;;;;;"}

package/dist/components/DetailPage/styled.d.ts

@@ -0,0 +1,2 @@
+export declare const ColumnGrid: import("styled-components").StyledComponent<"div", any, any, never>;
+export declare const ContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/DetailPage/styled.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import { theme } from '../../theme/index.js';
+
+const { sizes, colors } = theme;
+const ColumnGrid = styled.div.withConfig({ displayName: "vui--ColumnGrid", componentId: "vui--2wnu9m" }) `width:100%;display:grid;grid-template-columns:${({ showSidebar = true }) => showSidebar ? `calc(100% - 312px - ${sizes.md}) 312px` : '100% 312px'};align-items:flex-start;grid-gap:${sizes.md};transition:all 0.2s ease-in-out;& > *:nth-child(2){opacity:${({ showSidebar = true }) => (showSidebar ? '1.0' : '0')};transition:opacity 0.2s;}`;
+const ContentContainer = styled.div.withConfig({ displayName: "vui--ContentContainer", componentId: "vui--nvukr5" }) `width:100%;box-sizing:border-box;padding:${sizes.md};overflow-x:hidden;background-color:${colors.neutral.grey.lightest};`;
+
+export { ColumnGrid, ContentContainer };
+//# sourceMappingURL=styled.js.map

package/dist/components/DetailPage/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../src/components/DetailPage/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\n\nconst { sizes, colors } = theme;\n\nexport const ColumnGrid = styled.div<any>`\n  width: 100%;\n  display: grid;\n  grid-template-columns: ${({ showSidebar = true }) =>\n    showSidebar ? `calc(100% - 312px - ${sizes.md}) 312px` : '100% 312px'};\n  align-items: flex-start;\n  grid-gap: ${sizes.md};\n  transition: all 0.2s ease-in-out;\n\n  & > *:nth-child(2) {\n    opacity: ${({ showSidebar = true }) => (showSidebar ? '1.0' : '0')};\n    transition: opacity 0.2s;\n  }\n`;\n\nexport const ContentContainer = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  padding: ${sizes.md};\n  overflow-x: hidden;\n  background-color: ${colors.neutral.grey.lightest};\n`;\n"],"names":[],"mappings":";;;AAGA,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK;AAExB,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8CAAA,EAGT,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,KAC9C,WAAW,GAAG,CAAA,oBAAA,EAAuB,KAAK,CAAC,EAAE,CAAA,OAAA,CAAS,GAAG,YAAY,CAAA,iCAAA,EAE3D,KAAK,CAAC,EAAE,CAAA,4DAAA,EAIP,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,MAAM,WAAW,GAAG,KAAK,GAAG,GAAG,CAAC,CAAA,0BAAA;MAKzD,gBAAgB,GAAG,MAAM,CAAC,GAAG,8HAG7B,KAAK,CAAC,EAAE,CAAA,oCAAA,EAEC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;;;;"}

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

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._dropdownContainer_1spin_1 {\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  background-color: white;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  box-shadow: var(--shadows-md);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-base);\n}");
-var dropdownStyles = {"dropdownContainer":"_dropdownContainer_1spin_1"};
+___$insertStyle("._dropdownContainer_5j8e6_1 {\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n  background-color: white;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  box-shadow: var(--shadows-md);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-base);\n}");
+var dropdownStyles = {"dropdownContainer":"_dropdownContainer_5j8e6_1"};
 
 module.exports = dropdownStyles;
 //# sourceMappingURL=Dropdown.module.scss.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.module.scss.cjs","sources":["../../../src/components/Dropdown/Dropdown.module.scss"],"sourcesContent":[".dropdownContainer {\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  background-color: white;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  box-shadow: var(--shadows-md);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,oXAAA;AACA,qBAAA,CAAA,mBAAA,CAAA,4BAAA;;;;"}
+{"version":3,"file":"Dropdown.module.scss.cjs","sources":["../../../src/components/Dropdown/Dropdown.module.scss"],"sourcesContent":[".dropdownContainer {\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n  background-color: white;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  box-shadow: var(--shadows-md);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,oWAAA;AACA,qBAAA,CAAA,mBAAA,CAAA,4BAAA;;;;"}

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

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._dropdownContainer_1spin_1 {\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  background-color: white;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  box-shadow: var(--shadows-md);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-base);\n}");
-var dropdownStyles = {"dropdownContainer":"_dropdownContainer_1spin_1"};
+insertStyle("._dropdownContainer_5j8e6_1 {\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n  background-color: white;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  box-shadow: var(--shadows-md);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-base);\n}");
+var dropdownStyles = {"dropdownContainer":"_dropdownContainer_5j8e6_1"};
 
 export { dropdownStyles as default };
 //# sourceMappingURL=Dropdown.module.scss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.module.scss.js","sources":["../../../src/components/Dropdown/Dropdown.module.scss"],"sourcesContent":[".dropdownContainer {\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  background-color: white;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  box-shadow: var(--shadows-md);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,oXAAA;AACA,qBAAA,CAAA,mBAAA,CAAA,4BAAA;;;;"}
+{"version":3,"file":"Dropdown.module.scss.js","sources":["../../../src/components/Dropdown/Dropdown.module.scss"],"sourcesContent":[".dropdownContainer {\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n  background-color: white;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  box-shadow: var(--shadows-md);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,oWAAA;AACA,qBAAA,CAAA,mBAAA,CAAA,4BAAA;;;;"}

package/dist/components/FilterTag/FilterTag.cjs

@@ -5,15 +5,12 @@ var useDropdown = require('../../hooks/useDropdown.cjs');
 require('../../hooks/useFocusVisible.cjs');
 var buildClassnames = require('../../utils/buildClassnames.cjs');
 require('uid/secure');
-var assignCssVars = require('../../utils/assignCssVars.cjs');
 require('lodash.throttle');
 var colors = require('../../theme/modules/colors.cjs');
+var styled = require('./styled.cjs');
 var useHandleFocus = require('../Popover/hooks/useHandleFocus.cjs');
 var Text = require('../Text/Text.cjs');
 var AnimatedDropdown = require('../AnimatedDropdown/AnimatedDropdown.cjs');
-var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
-var DownArrowIcon = require('../../icons/design-system/components/DownArrowIcon.cjs');
-var FilterTag_module = require('./FilterTag.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -55,21 +52,17 @@ const FilterTag = ({ className, e2eClassName, label, text, iconSlot, fill = colo
     }, [onClickAway, closeDropdown, shouldCloseOnClickAway]);
     const shouldShowSimple = !content;
     if (shouldShowSimple) {
-        return (React__default.default.createElement("button", { type: "button", className: buildClassnames.buildClassnames([
-                FilterTag_module.container,
-                classNames === null || classNames === void 0 ? void 0 : classNames.container,
-                e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container,
-            ]), onClick: onClick },
-            label && (React__default.default.createElement(Text.Text, { className: FilterTag_module.groupLabel, variant: "subheadingSmallBold" }, `${label}:`)),
+        return (React__default.default.createElement(styled.Container, { className: buildClassnames.buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container]), onClick: onClick },
+            label && React__default.default.createElement(styled.GroupLabel, { variant: "subheadingSmallBold" }, `${label}:`),
             React__default.default.createElement(Text.Text, null, text),
-            React__default.default.createElement(CrossIcon.ReactComponent, { className: buildClassnames.buildClassnames([FilterTag_module.crossIcon, classNames === null || classNames === void 0 ? void 0 : classNames.cross, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.cross]), name: "cross", color: colors.colors.neutral.ink.base })));
+            React__default.default.createElement(styled.CrossIcon, { className: buildClassnames.buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.cross, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.cross]), name: "cross", color: colors.colors.neutral.ink.base })));
     }
-    return (React__default.default.createElement(AnimatedDropdown.AnimatedDropdown, { className: classNames.filterTagDropdown, shouldShowDropdown: shouldShowDropdown, onClickAway: handleClickAway, cta: React__default.default.createElement("button", { type: "button", className: buildClassnames.buildClassnames([FilterTag_module.container, classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container]), onClick: handleClick, ref: setAnchorElement },
-            label && (React__default.default.createElement(Text.Text, { className: FilterTag_module.groupLabel, variant: "subheadingSmallBold" }, `${label}:`)),
+    return (React__default.default.createElement(AnimatedDropdown.AnimatedDropdown, { className: classNames.filterTagDropdown, shouldShowDropdown: shouldShowDropdown, onClickAway: handleClickAway, cta: React__default.default.createElement(styled.Container, { className: classNames.container, onClick: handleClick, ref: setAnchorElement },
+            label && React__default.default.createElement(styled.GroupLabel, { variant: "subheadingSmallBold" }, `${label}:`),
             React__default.default.createElement(Text.Text, null, text),
-            React__default.default.createElement(DownArrowIcon.ReactComponent, { className: buildClassnames.buildClassnames([FilterTag_module.mainIcon, shouldShowDropdown && FilterTag_module.rotated]), color: colors.colors.neutral.ink.base, name: "downArrow" })) },
-        React__default.default.createElement("div", { className: FilterTag_module.content, ref: setPopperElement, onKeyDown: handleKeyDown },
-            React__default.default.createElement("div", { className: FilterTag_module.header, style: assignCssVars.assignCssVars({ headerColor: fill }) }, header || (React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(styled.MainIcon, { color: colors.colors.neutral.ink.base, name: "downArrow", "$shouldShow": shouldShowDropdown })) },
+        React__default.default.createElement(styled.Content, { ref: setPopperElement, onKeyDown: handleKeyDown },
+            React__default.default.createElement(styled.Header, { color: fill }, header || (React__default.default.createElement(React__default.default.Fragment, null,
                 iconSlot,
                 React__default.default.createElement(Text.Text, { variant: "bodyBold" }, label)))),
             content,

package/dist/components/FilterTag/FilterTag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterTag.cjs","sources":["../../../src/components/FilterTag/FilterTag.tsx"],"sourcesContent":["import React, { MouseEventHandler, useCallback, useState } from 'react';\nimport { useDropdown } from '../../hooks';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { FilterTagProps } from './types';\n\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { assignCssVars } from '../../utils/assignCssVars';\nimport { useHandleFocus } from '../Popover/hooks/useHandleFocus';\nimport { Text } from '../Text';\nimport { AnimatedDropdown as Dropdown } from '../AnimatedDropdown';\nimport { CrossIcon, DownArrowIcon } from '../../icons';\nimport styles from './FilterTag.module.scss';\n\nexport interface ClassNamesReturnPayload {\n  filterTagDropdown?: string;\n  container?: string;\n  cross?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  filterTagDropdown: prefix ? `${prefix}-filter-tag-dropdown` : undefined,\n  container: prefix ? `${prefix}-container` : undefined,\n  cross: prefix ? `${prefix}-cross` : undefined,\n});\n\nexport const FilterTag = ({\n  className,\n  e2eClassName,\n  label,\n  text,\n  iconSlot,\n  fill = colors.secondary.blue.base,\n  content,\n  footer,\n  header,\n  onClickAway,\n  onClick,\n  shouldCloseOnClickAway = true,\n}: FilterTagProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n\n  const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const { shouldShowDropdown, toggleShouldShowDropdown, closeDropdown } = useDropdown({\n    anchorElement,\n  });\n\n  const { handleKeyDown } = useHandleFocus({\n    popperElement,\n    anchorElement,\n    onClose: closeDropdown,\n  });\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    (event) => {\n      if (shouldShowDropdown) closeDropdown();\n      else toggleShouldShowDropdown();\n\n      if (onClickAway && shouldShowDropdown) onClickAway(event as any);\n    },\n    [shouldShowDropdown, closeDropdown, toggleShouldShowDropdown, onClickAway],\n  );\n\n  const handleClickAway = useCallback(\n    (event: any) => {\n      // Escape hatch to apply custom behavior when clicked away\n      if (onClickAway) onClickAway(event, closeDropdown);\n\n      // Default clickAway behavior (closes the dropdown)\n      if (shouldCloseOnClickAway) closeDropdown();\n    },\n    [onClickAway, closeDropdown, shouldCloseOnClickAway],\n  );\n\n  const shouldShowSimple = !content;\n\n  if (shouldShowSimple) {\n    return (\n      <button\n        type=\"button\"\n        className={buildClassnames([\n          styles.container,\n          classNames?.container,\n          e2eClassNames?.container,\n        ])}\n        onClick={onClick}\n      >\n        {label && (\n          <Text className={styles.groupLabel} variant=\"subheadingSmallBold\">{`${label}:`}</Text>\n        )}\n        <Text>{text}</Text>\n        <CrossIcon\n          className={buildClassnames([styles.crossIcon, classNames?.cross, e2eClassNames?.cross])}\n          name=\"cross\"\n          color={colors.neutral.ink.base}\n        />\n      </button>\n    );\n  }\n\n  return (\n    <Dropdown\n      className={classNames.filterTagDropdown}\n      shouldShowDropdown={shouldShowDropdown}\n      onClickAway={handleClickAway}\n      cta={\n        <button\n          type=\"button\"\n          className={buildClassnames([styles.container, classNames.container, e2eClassNames?.container])}\n          onClick={handleClick}\n          ref={setAnchorElement}\n        >\n          {label && (\n            <Text className={styles.groupLabel} variant=\"subheadingSmallBold\">{`${label}:`}</Text>\n          )}\n          <Text>{text}</Text>\n          <DownArrowIcon\n            className={buildClassnames([styles.mainIcon, shouldShowDropdown && styles.rotated])}\n            color={colors.neutral.ink.base}\n            name=\"downArrow\"\n          />\n        </button>\n      }\n    >\n      <div className={styles.content} ref={setPopperElement} onKeyDown={handleKeyDown}>\n        <div className={styles.header} style={assignCssVars({ headerColor: fill })}>\n          {header || (\n            <>\n              {iconSlot}\n              <Text variant=\"bodyBold\">{label}</Text>\n            </>\n          )}\n        </div>\n        {content}\n        {footer}\n      </div>\n    </Dropdown>\n  );\n};\n"],"names":["colors","useState","useDropdown","useHandleFocus","useCallback","React","buildClassnames","styles","Text","CrossIcon","Dropdown","DownArrowIcon","assignCssVars"],"mappings":"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"}
+{"version":3,"file":"FilterTag.cjs","sources":["../../../src/components/FilterTag/FilterTag.tsx"],"sourcesContent":["import React, { MouseEventHandler, useCallback, useState } from 'react';\nimport { useDropdown } from '../../hooks';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { FilterTagProps } from './types';\n\nimport {\n  Container,\n  Text,\n  Dropdown,\n  GroupLabel,\n  MainIcon,\n  CrossIcon,\n  Content,\n  Header,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { useHandleFocus } from '../Popover/hooks/useHandleFocus';\n\nexport interface ClassNamesReturnPayload {\n  filterTagDropdown?: string;\n  container?: string;\n  cross?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  filterTagDropdown: prefix ? `${prefix}-filter-tag-dropdown` : undefined,\n  container: prefix ? `${prefix}-container` : undefined,\n  cross: prefix ? `${prefix}-cross` : undefined,\n});\n\nexport const FilterTag = ({\n  className,\n  e2eClassName,\n  label,\n  text,\n  iconSlot,\n  fill = colors.secondary.blue.base,\n  content,\n  footer,\n  header,\n  onClickAway,\n  onClick,\n  shouldCloseOnClickAway = true,\n}: FilterTagProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n\n  const [anchorElement, setAnchorElement] = useState<HTMLDivElement | null>(null);\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const { shouldShowDropdown, toggleShouldShowDropdown, closeDropdown } = useDropdown({\n    anchorElement,\n  });\n\n  const { handleKeyDown } = useHandleFocus({\n    popperElement,\n    anchorElement,\n    onClose: closeDropdown,\n  });\n\n  const handleClick: MouseEventHandler<HTMLDivElement> = useCallback(\n    (event) => {\n      if (shouldShowDropdown) closeDropdown();\n      else toggleShouldShowDropdown();\n\n      if (onClickAway && shouldShowDropdown) onClickAway(event as any);\n    },\n    [shouldShowDropdown, closeDropdown, toggleShouldShowDropdown, onClickAway],\n  );\n\n  const handleClickAway = useCallback(\n    (event: any) => {\n      // Escape hatch to apply custom behavior when clicked away\n      if (onClickAway) onClickAway(event, closeDropdown);\n\n      // Default clickAway behavior (closes the dropdown)\n      if (shouldCloseOnClickAway) closeDropdown();\n    },\n    [onClickAway, closeDropdown, shouldCloseOnClickAway],\n  );\n\n  const shouldShowSimple = !content;\n\n  if (shouldShowSimple) {\n    return (\n      <Container\n        className={buildClassnames([classNames?.container, e2eClassNames?.container])}\n        onClick={onClick}\n      >\n        {label && <GroupLabel variant=\"subheadingSmallBold\">{`${label}:`}</GroupLabel>}\n        <Text>{text}</Text>\n        <CrossIcon\n          className={buildClassnames([classNames?.cross, e2eClassNames?.cross])}\n          name=\"cross\"\n          color={colors.neutral.ink.base}\n        />\n      </Container>\n    );\n  }\n\n  return (\n    <Dropdown\n      className={classNames.filterTagDropdown}\n      shouldShowDropdown={shouldShowDropdown}\n      onClickAway={handleClickAway}\n      cta={\n        <Container className={classNames.container} onClick={handleClick} ref={setAnchorElement}>\n          {label && <GroupLabel variant=\"subheadingSmallBold\">{`${label}:`}</GroupLabel>}\n          <Text>{text}</Text>\n          <MainIcon\n            color={colors.neutral.ink.base}\n            name=\"downArrow\"\n            $shouldShow={shouldShowDropdown}\n          />\n        </Container>\n      }\n    >\n      <Content ref={setPopperElement} onKeyDown={handleKeyDown}>\n        <Header color={fill}>\n          {header || (\n            <>\n              {iconSlot}\n              <Text variant=\"bodyBold\">{label}</Text>\n            </>\n          )}\n        </Header>\n        {content}\n        {footer}\n      </Content>\n    </Dropdown>\n  );\n};\n"],"names":["colors","useState","useDropdown","useHandleFocus","useCallback","React","Container","buildClassnames","GroupLabel","Text","CrossIcon","Dropdown","MainIcon","Content","Header"],"mappings":"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"}

package/dist/components/FilterTag/FilterTag.js

@@ -3,15 +3,12 @@ import { useDropdown } from '../../hooks/useDropdown.js';
 import '../../hooks/useFocusVisible.js';
 import { buildClassnames } from '../../utils/buildClassnames.js';
 import 'uid/secure';
-import { assignCssVars } from '../../utils/assignCssVars.js';
 import 'lodash.throttle';
 import { colors } from '../../theme/modules/colors.js';
+import { Container, GroupLabel, CrossIcon as StyledCrossIcon, MainIcon, Content, Header } from './styled.js';
 import { useHandleFocus } from '../Popover/hooks/useHandleFocus.js';
 import { Text } from '../Text/Text.js';
 import { AnimatedDropdown } from '../AnimatedDropdown/AnimatedDropdown.js';
-import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
-import { ReactComponent as DownArrowIcon } from '../../icons/design-system/components/DownArrowIcon.js';
-import styles from './FilterTag.module.scss.js';
 
 const generateClassNames = (prefix) => ({
     filterTagDropdown: prefix ? `${prefix}-filter-tag-dropdown` : undefined,
@@ -49,21 +46,17 @@ const FilterTag = ({ className, e2eClassName, label, text, iconSlot, fill = colo
     }, [onClickAway, closeDropdown, shouldCloseOnClickAway]);
     const shouldShowSimple = !content;
     if (shouldShowSimple) {
-        return (React__default.createElement("button", { type: "button", className: buildClassnames([
-                styles.container,
-                classNames === null || classNames === void 0 ? void 0 : classNames.container,
-                e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container,
-            ]), onClick: onClick },
-            label && (React__default.createElement(Text, { className: styles.groupLabel, variant: "subheadingSmallBold" }, `${label}:`)),
+        return (React__default.createElement(Container, { className: buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container]), onClick: onClick },
+            label && React__default.createElement(GroupLabel, { variant: "subheadingSmallBold" }, `${label}:`),
             React__default.createElement(Text, null, text),
-            React__default.createElement(CrossIcon, { className: buildClassnames([styles.crossIcon, classNames === null || classNames === void 0 ? void 0 : classNames.cross, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.cross]), name: "cross", color: colors.neutral.ink.base })));
+            React__default.createElement(StyledCrossIcon, { className: buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.cross, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.cross]), name: "cross", color: colors.neutral.ink.base })));
     }
-    return (React__default.createElement(AnimatedDropdown, { className: classNames.filterTagDropdown, shouldShowDropdown: shouldShowDropdown, onClickAway: handleClickAway, cta: React__default.createElement("button", { type: "button", className: buildClassnames([styles.container, classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container]), onClick: handleClick, ref: setAnchorElement },
-            label && (React__default.createElement(Text, { className: styles.groupLabel, variant: "subheadingSmallBold" }, `${label}:`)),
+    return (React__default.createElement(AnimatedDropdown, { className: classNames.filterTagDropdown, shouldShowDropdown: shouldShowDropdown, onClickAway: handleClickAway, cta: React__default.createElement(Container, { className: classNames.container, onClick: handleClick, ref: setAnchorElement },
+            label && React__default.createElement(GroupLabel, { variant: "subheadingSmallBold" }, `${label}:`),
             React__default.createElement(Text, null, text),
-            React__default.createElement(DownArrowIcon, { className: buildClassnames([styles.mainIcon, shouldShowDropdown && styles.rotated]), color: colors.neutral.ink.base, name: "downArrow" })) },
-        React__default.createElement("div", { className: styles.content, ref: setPopperElement, onKeyDown: handleKeyDown },
-            React__default.createElement("div", { className: styles.header, style: assignCssVars({ headerColor: fill }) }, header || (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(MainIcon, { color: colors.neutral.ink.base, name: "downArrow", "$shouldShow": shouldShowDropdown })) },
+        React__default.createElement(Content, { ref: setPopperElement, onKeyDown: handleKeyDown },
+            React__default.createElement(Header, { color: fill }, header || (React__default.createElement(React__default.Fragment, null,
                 iconSlot,
                 React__default.createElement(Text, { variant: "bodyBold" }, label)))),
             content,