@veeqo/ui 15.15.1 → 15.15.3

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.cjs","sources":["../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from 'react';\nimport type { DateRange, DateValue } from 'react-aria-components';\nimport { Action } from '../Action';\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';\nimport styles from './DateRangePicker.module.scss';\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 className={styles.resetFooter}>\n            <Action variant=\"default\" size=\"sm\" onClick={onReset} disabled={isDisabled}>\n              Reset\n            </Action>\n          </Card.Footer>\n        </>\n      )}\n    </Stack>\n  );\n};\n"],"names":["useIsDateUnavailable","getDateRange","DateRanges","DATE_RANGE_OPTIONS","useCallback","useMemo","checkForMatchingPreset","useEffect","React","Stack","theme","Select","DateInputField","ComparePreviousPeriod","Divider","RangeCalendar","Card","styles","Action"],"mappings":"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"}
+{"version":3,"file":"DateRangePicker.cjs","sources":["../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport type { DateRange, DateValue } from 'react-aria-components';\nimport { Action } from '../Action';\nimport { Select } from '../Select';\nimport { DateInputField } from '../DateInputField';\nimport { RangeCalendar, useIsDateUnavailable } from '../Calendars';\nimport { Card } from '../Card';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { ComparePreviousPeriod } from './components/ComparePreviousPeriod';\nimport { DATE_RANGE_OPTIONS, DateRanges, checkForMatchingPreset, getDateRange } from './constants';\nimport { Divider } from './components/Divider';\nimport { DateRangePickerProps } from './types';\nimport styles from './DateRangePicker.module.scss';\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 [isCalendarFocused, setIsCalendarFocused] = useState(false);\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    <FlexCol\n      gap=\"base\"\n      alignItems=\"stretch\"\n      style={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        isOpen={isCalendarFocused}\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      <FlexCol\n        alignItems=\"center\"\n        gap=\"base\"\n        onFocus={() => setIsCalendarFocused(true)}\n        onBlur={(e) => {\n          const related = e.relatedTarget;\n          if (!e.currentTarget.contains(related instanceof Node ? related : null)) {\n            setIsCalendarFocused(false);\n          }\n        }}\n      >\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      </FlexCol>\n\n      {!!onReset && (\n        <>\n          <Divider />\n          <Card.Footer className={styles.resetFooter}>\n            <Action variant=\"default\" size=\"sm\" onClick={onReset} disabled={isDisabled}>\n              Reset\n            </Action>\n          </Card.Footer>\n        </>\n      )}\n    </FlexCol>\n  );\n};\n"],"names":["useState","useIsDateUnavailable","getDateRange","DateRanges","DATE_RANGE_OPTIONS","useCallback","useMemo","checkForMatchingPreset","useEffect","React","FlexCol","Select","DateInputField","ComparePreviousPeriod","Divider","RangeCalendar","Card","styles","Action"],"mappings":"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"}

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -1,4 +1,4 @@
-import React__default, { useCallback, useMemo, useEffect } from 'react';
+import React__default, { useState, useCallback, useMemo, useEffect } from 'react';
 import { Action } from '../Action/Action.js';
 import { Select } from '../Select/Select.js';
 import { DateInputField } from '../DateInputField/index.js';
@@ -9,11 +9,11 @@ import '@internationalized/date';
 import '../Calendars/types.js';
 import '../Calendars/data/constants.js';
 import '../Button/Button.js';
-import { Stack } from '../Stack/Stack.js';
+import '../Stack/Stack.js';
 import '../Calendars/components/subcomponents/CalendarHeading.js';
 import { useIsDateUnavailable } from '../Calendars/data/useIsDateUnavailable.js';
 import { Card } from '../Card/Card.js';
-import { theme } from '../../theme/index.js';
+import { FlexCol } from '../Flex/FlexCol/FlexCol.js';
 import { ComparePreviousPeriod } from './components/ComparePreviousPeriod.js';
 import { checkForMatchingPreset, DATE_RANGE_OPTIONS, getDateRange, DateRanges } from './constants.js';
 import { Divider } from './components/Divider.js';
@@ -28,6 +28,7 @@ showDatePresets = true, onReset,
 disabledRanges, disallowWeekends, maxValue, minValue, selectedPreset, setSelectedPreset, selectedRange, setSelectedRange, 
 // Previous period props
 'aria-describedby': ariaDescribedBy, 'aria-label': ariaLabel, ...previousPeriodProps }) => {
+    const [isCalendarFocused, setIsCalendarFocused] = useState(false);
     const { isDateRangeUnavailable } = useIsDateUnavailable({
         disabledRanges,
         disallowWeekends,
@@ -60,12 +61,17 @@ disabledRanges, disallowWeekends, maxValue, minValue, selectedPreset, setSelecte
         else
             setSelectedPreset(DATE_RANGE_OPTIONS[0]); // Otherwise, select "custom" option.
     }, [matchedPreset, setSelectedPreset]);
-    return (React__default.createElement(Stack, { direction: "vertical", alignX: "stretch", spacing: "0", style: { gap: theme.sizes.base, ...style }, className: className, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel },
+    return (React__default.createElement(FlexCol, { gap: "base", alignItems: "stretch", style: style, className: className, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel },
         showDatePresets && (React__default.createElement(Select, { disabled: isDisabled, label: "Date Range", options: DATE_RANGE_OPTIONS, value: selectedPreset === null || selectedPreset === void 0 ? void 0 : selectedPreset.value, onChange: updateRangePreset })),
-        React__default.createElement(DateInputField, { isRangeInput: true, disabled: isDisabled, label: "Start date - End date", onChangeStartDate: updateDateSegment('start'), onChangeEndDate: updateDateSegment('end'), startValue: selectedRange && selectedRange.start, endValue: selectedRange && selectedRange.end, error: isDateRangeInvalid ? 'Range contains invalid dates' : undefined, disabledRanges: disabledRanges, disallowWeekends: disallowWeekends, maxValue: maxValue, minValue: minValue }),
+        React__default.createElement(DateInputField, { isRangeInput: true, disabled: isDisabled, isOpen: isCalendarFocused, label: "Start date - End date", onChangeStartDate: updateDateSegment('start'), onChangeEndDate: updateDateSegment('end'), startValue: selectedRange && selectedRange.start, endValue: selectedRange && selectedRange.end, error: isDateRangeInvalid ? 'Range contains invalid dates' : undefined, disabledRanges: disabledRanges, disallowWeekends: disallowWeekends, maxValue: maxValue, minValue: minValue }),
         previousPeriodProps.showPreviousPeriod && React__default.createElement(ComparePreviousPeriod, { ...previousPeriodProps }),
         React__default.createElement(Divider, null),
-        React__default.createElement(Stack, { alignX: "center" },
+        React__default.createElement(FlexCol, { alignItems: "center", gap: "base", onFocus: () => setIsCalendarFocused(true), onBlur: (e) => {
+                const related = e.relatedTarget;
+                if (!e.currentTarget.contains(related instanceof Node ? related : null)) {
+                    setIsCalendarFocused(false);
+                }
+            } },
             React__default.createElement(RangeCalendar, { "aria-label": "Selected Date Range", isDisabled: isDisabled, value: selectedRange, onChange: setSelectedRange, disabledRanges: disabledRanges, maxValue: maxValue, minValue: minValue, disallowWeekends: disallowWeekends })),
         !!onReset && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(Divider, null),

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 { Action } from '../Action';\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';\nimport styles from './DateRangePicker.module.scss';\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 className={styles.resetFooter}>\n            <Action variant=\"default\" size=\"sm\" onClick={onReset} disabled={isDisabled}>\n              Reset\n            </Action>\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, useState } from 'react';\nimport type { DateRange, DateValue } from 'react-aria-components';\nimport { Action } from '../Action';\nimport { Select } from '../Select';\nimport { DateInputField } from '../DateInputField';\nimport { RangeCalendar, useIsDateUnavailable } from '../Calendars';\nimport { Card } from '../Card';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { ComparePreviousPeriod } from './components/ComparePreviousPeriod';\nimport { DATE_RANGE_OPTIONS, DateRanges, checkForMatchingPreset, getDateRange } from './constants';\nimport { Divider } from './components/Divider';\nimport { DateRangePickerProps } from './types';\nimport styles from './DateRangePicker.module.scss';\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 [isCalendarFocused, setIsCalendarFocused] = useState(false);\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    <FlexCol\n      gap=\"base\"\n      alignItems=\"stretch\"\n      style={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        isOpen={isCalendarFocused}\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      <FlexCol\n        alignItems=\"center\"\n        gap=\"base\"\n        onFocus={() => setIsCalendarFocused(true)}\n        onBlur={(e) => {\n          const related = e.relatedTarget;\n          if (!e.currentTarget.contains(related instanceof Node ? related : null)) {\n            setIsCalendarFocused(false);\n          }\n        }}\n      >\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      </FlexCol>\n\n      {!!onReset && (\n        <>\n          <Divider />\n          <Card.Footer className={styles.resetFooter}>\n            <Action variant=\"default\" size=\"sm\" onClick={onReset} disabled={isDisabled}>\n              Reset\n            </Action>\n          </Card.Footer>\n        </>\n      )}\n    </FlexCol>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/Toggle/Toggle.cjs

@@ -15,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  */
 const Toggle = React.forwardRef(({ id, className, name, switched, small, onClick = () => { }, disabled, ariaLabel, inputPosition = 'right', ...choiceProps }, ref) => {
     const componentId = React.useMemo(() => id !== null && id !== void 0 ? id : generateId.generateId('toggle'), [id]);
-    return (React__default.default.createElement(Choice.Choice, { htmlFor: componentId, inputPosition: inputPosition, ...choiceProps },
+    return (React__default.default.createElement(Choice.Choice, { htmlFor: componentId, inputPosition: inputPosition, labelVariant: "bodyBold", className: Toggle_module.choice, ...choiceProps },
         React__default.default.createElement("span", { className: buildClassnames.buildClassnames([Toggle_module.wrapper, className]) },
             React__default.default.createElement("span", { className: buildClassnames.buildClassnames([
                     Toggle_module.switch,

package/dist/components/Toggle/Toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.cjs","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { generateId } from '../../utils/generateId';\nimport { ToggleProps } from './types';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport styles from './Toggle.module.scss';\n\n/**\n * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.\n */\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n  (\n    {\n      id,\n      className,\n      name,\n      switched,\n      small,\n      onClick = () => {},\n      disabled,\n      ariaLabel,\n      inputPosition = 'right',\n      ...choiceProps\n    }: ToggleProps,\n    ref,\n  ) => {\n    const componentId = useMemo(() => id ?? generateId('toggle'), [id]);\n    return (\n      <Choice\n        htmlFor={componentId}\n        inputPosition={inputPosition}\n        {...(choiceProps as ForwardedChoiceProps)}\n      >\n        <span className={buildClassnames([styles.wrapper, className])}>\n          <span\n            className={buildClassnames([\n              styles.switch,\n              small ? styles.small : undefined,\n              disabled ? styles.disabled : undefined,\n              switched ? styles.switched : undefined,\n            ])}\n          >\n            <input\n              id={componentId}\n              role=\"switch\"\n              type=\"checkbox\"\n              name={name}\n              aria-label={ariaLabel}\n              checked={!!switched}\n              onChange={(e) => (disabled ? undefined : onClick(e))}\n              disabled={disabled}\n              ref={ref}\n              className={styles.input}\n            />\n            <span className={styles.slider} />\n          </span>\n        </span>\n      </Choice>\n    );\n  },\n);\n"],"names":["forwardRef","useMemo","generateId","React","Choice","buildClassnames","styles"],"mappings":";;;;;;;;;;;;AAQA;;AAEG;AACI,MAAM,MAAM,GAAGA,gBAAU,CAC9B,CACE,EACE,EAAE,EACF,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,MAAK,EAAE,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,OAAO,EACvB,GAAG,WAAW,EACF,EACd,GAAG,KACD;IACF,MAAM,WAAW,GAAGC,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACnE,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,aAAa,EAAA,GACvB,WAAoC,EAAA;QAEzCD,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEE,+BAAe,CAAC,CAACC,aAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAAA;YAC3DH,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAEE,+BAAe,CAAC;AACzB,oBAAAC,aAAM,CAAC,MAAM;oBACb,KAAK,GAAGA,aAAM,CAAC,KAAK,GAAG,SAAS;oBAChC,QAAQ,GAAGA,aAAM,CAAC,QAAQ,GAAG,SAAS;oBACtC,QAAQ,GAAGA,aAAM,CAAC,QAAQ,GAAG,SAAS;iBACvC,CAAC,EAAA;gBAEFH,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EAAA,YAAA,EACE,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,CAAC,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAEG,aAAM,CAAC,KAAK,EAAA,CACvB;gBACFH,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEG,aAAM,CAAC,MAAM,GAAI,CAC7B,CACF,CACA;AAEb,CAAC;;;;"}
+{"version":3,"file":"Toggle.cjs","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { generateId } from '../../utils/generateId';\nimport { ToggleProps } from './types';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport styles from './Toggle.module.scss';\n\n/**\n * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.\n */\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n  (\n    {\n      id,\n      className,\n      name,\n      switched,\n      small,\n      onClick = () => {},\n      disabled,\n      ariaLabel,\n      inputPosition = 'right',\n      ...choiceProps\n    }: ToggleProps,\n    ref,\n  ) => {\n    const componentId = useMemo(() => id ?? generateId('toggle'), [id]);\n    return (\n      <Choice\n        htmlFor={componentId}\n        inputPosition={inputPosition}\n        labelVariant=\"bodyBold\"\n        className={styles.choice}\n        {...(choiceProps as ForwardedChoiceProps)}\n      >\n        <span className={buildClassnames([styles.wrapper, className])}>\n          <span\n            className={buildClassnames([\n              styles.switch,\n              small ? styles.small : undefined,\n              disabled ? styles.disabled : undefined,\n              switched ? styles.switched : undefined,\n            ])}\n          >\n            <input\n              id={componentId}\n              role=\"switch\"\n              type=\"checkbox\"\n              name={name}\n              aria-label={ariaLabel}\n              checked={!!switched}\n              onChange={(e) => (disabled ? undefined : onClick(e))}\n              disabled={disabled}\n              ref={ref}\n              className={styles.input}\n            />\n            <span className={styles.slider} />\n          </span>\n        </span>\n      </Choice>\n    );\n  },\n);\n"],"names":["forwardRef","useMemo","generateId","React","Choice","styles","buildClassnames"],"mappings":";;;;;;;;;;;;AAQA;;AAEG;AACI,MAAM,MAAM,GAAGA,gBAAU,CAC9B,CACE,EACE,EAAE,EACF,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,MAAK,EAAE,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,OAAO,EACvB,GAAG,WAAW,EACF,EACd,GAAG,KACD;IACF,MAAM,WAAW,GAAGC,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IACnE,QACEC,qCAACC,aAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAC,UAAU,EACvB,SAAS,EAAEC,aAAM,CAAC,MAAM,EAAA,GACnB,WAAoC,EAAA;QAEzCF,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEG,+BAAe,CAAC,CAACD,aAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAAA;YAC3DF,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAEG,+BAAe,CAAC;AACzB,oBAAAD,aAAM,CAAC,MAAM;oBACb,KAAK,GAAGA,aAAM,CAAC,KAAK,GAAG,SAAS;oBAChC,QAAQ,GAAGA,aAAM,CAAC,QAAQ,GAAG,SAAS;oBACtC,QAAQ,GAAGA,aAAM,CAAC,QAAQ,GAAG,SAAS;iBACvC,CAAC,EAAA;gBAEFF,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EAAA,YAAA,EACE,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,CAAC,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAEE,aAAM,CAAC,KAAK,EAAA,CACvB;gBACFF,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEE,aAAM,CAAC,MAAM,GAAI,CAC7B,CACF,CACA;AAEb,CAAC;;;;"}

package/dist/components/Toggle/Toggle.js

@@ -9,7 +9,7 @@ import styles from './Toggle.module.scss.js';
  */
 const Toggle = forwardRef(({ id, className, name, switched, small, onClick = () => { }, disabled, ariaLabel, inputPosition = 'right', ...choiceProps }, ref) => {
     const componentId = useMemo(() => id !== null && id !== void 0 ? id : generateId('toggle'), [id]);
-    return (React__default.createElement(Choice, { htmlFor: componentId, inputPosition: inputPosition, ...choiceProps },
+    return (React__default.createElement(Choice, { htmlFor: componentId, inputPosition: inputPosition, labelVariant: "bodyBold", className: styles.choice, ...choiceProps },
         React__default.createElement("span", { className: buildClassnames([styles.wrapper, className]) },
             React__default.createElement("span", { className: buildClassnames([
                     styles.switch,

package/dist/components/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { generateId } from '../../utils/generateId';\nimport { ToggleProps } from './types';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport styles from './Toggle.module.scss';\n\n/**\n * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.\n */\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n  (\n    {\n      id,\n      className,\n      name,\n      switched,\n      small,\n      onClick = () => {},\n      disabled,\n      ariaLabel,\n      inputPosition = 'right',\n      ...choiceProps\n    }: ToggleProps,\n    ref,\n  ) => {\n    const componentId = useMemo(() => id ?? generateId('toggle'), [id]);\n    return (\n      <Choice\n        htmlFor={componentId}\n        inputPosition={inputPosition}\n        {...(choiceProps as ForwardedChoiceProps)}\n      >\n        <span className={buildClassnames([styles.wrapper, className])}>\n          <span\n            className={buildClassnames([\n              styles.switch,\n              small ? styles.small : undefined,\n              disabled ? styles.disabled : undefined,\n              switched ? styles.switched : undefined,\n            ])}\n          >\n            <input\n              id={componentId}\n              role=\"switch\"\n              type=\"checkbox\"\n              name={name}\n              aria-label={ariaLabel}\n              checked={!!switched}\n              onChange={(e) => (disabled ? undefined : onClick(e))}\n              disabled={disabled}\n              ref={ref}\n              className={styles.input}\n            />\n            <span className={styles.slider} />\n          </span>\n        </span>\n      </Choice>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;;AAQA;;AAEG;AACI,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,EAAE,EACF,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,MAAK,EAAE,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,OAAO,EACvB,GAAG,WAAW,EACF,EACd,GAAG,KACD;IACF,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAI,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACnE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,aAAa,EAAA,GACvB,WAAoC,EAAA;QAEzCA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAAA;YAC3DA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,oBAAA,MAAM,CAAC,MAAM;oBACb,KAAK,GAAG,MAAM,CAAC,KAAK,GAAG,SAAS;oBAChC,QAAQ,GAAG,MAAM,CAAC,QAAQ,GAAG,SAAS;oBACtC,QAAQ,GAAG,MAAM,CAAC,QAAQ,GAAG,SAAS;iBACvC,CAAC,EAAA;gBAEFA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EAAA,YAAA,EACE,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,CAAC,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,MAAM,CAAC,KAAK,EAAA,CACvB;gBACFA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,MAAM,GAAI,CAC7B,CACF,CACA;AAEb,CAAC;;;;"}
+{"version":3,"file":"Toggle.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { generateId } from '../../utils/generateId';\nimport { ToggleProps } from './types';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport styles from './Toggle.module.scss';\n\n/**\n * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.\n */\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n  (\n    {\n      id,\n      className,\n      name,\n      switched,\n      small,\n      onClick = () => {},\n      disabled,\n      ariaLabel,\n      inputPosition = 'right',\n      ...choiceProps\n    }: ToggleProps,\n    ref,\n  ) => {\n    const componentId = useMemo(() => id ?? generateId('toggle'), [id]);\n    return (\n      <Choice\n        htmlFor={componentId}\n        inputPosition={inputPosition}\n        labelVariant=\"bodyBold\"\n        className={styles.choice}\n        {...(choiceProps as ForwardedChoiceProps)}\n      >\n        <span className={buildClassnames([styles.wrapper, className])}>\n          <span\n            className={buildClassnames([\n              styles.switch,\n              small ? styles.small : undefined,\n              disabled ? styles.disabled : undefined,\n              switched ? styles.switched : undefined,\n            ])}\n          >\n            <input\n              id={componentId}\n              role=\"switch\"\n              type=\"checkbox\"\n              name={name}\n              aria-label={ariaLabel}\n              checked={!!switched}\n              onChange={(e) => (disabled ? undefined : onClick(e))}\n              disabled={disabled}\n              ref={ref}\n              className={styles.input}\n            />\n            <span className={styles.slider} />\n          </span>\n        </span>\n      </Choice>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;;AAQA;;AAEG;AACI,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,EAAE,EACF,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,MAAK,EAAE,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,OAAO,EACvB,GAAG,WAAW,EACF,EACd,GAAG,KACD;IACF,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAI,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IACnE,QACEA,6BAAC,MAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAC,UAAU,EACvB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAA,GACnB,WAAoC,EAAA;QAEzCA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAAA;YAC3DA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,oBAAA,MAAM,CAAC,MAAM;oBACb,KAAK,GAAG,MAAM,CAAC,KAAK,GAAG,SAAS;oBAChC,QAAQ,GAAG,MAAM,CAAC,QAAQ,GAAG,SAAS;oBACtC,QAAQ,GAAG,MAAM,CAAC,QAAQ,GAAG,SAAS;iBACvC,CAAC,EAAA;gBAEFA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EAAA,YAAA,EACE,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,CAAC,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,MAAM,CAAC,KAAK,EAAA,CACvB;gBACFA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,MAAM,GAAI,CAC7B,CACF,CACA;AAEb,CAAC;;;;"}

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

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._wrapper_cgf30_1 {\n  display: inline-block;\n  user-select: none;\n}\n\n._switch_cgf30_6 {\n  display: flex;\n  position: relative;\n  height: 36px;\n  width: 72px;\n  z-index: 1;\n}\n._switch_cgf30_6._small_cgf30_13 {\n  height: 28px;\n  width: 56px;\n}\n\n._input_cgf30_18 {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-base);\n  z-index: 2;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n._input_cgf30_18:disabled {\n  cursor: not-allowed;\n}\n._input_cgf30_18:focus-visible + ._slider_cgf30_31 {\n  box-shadow: 0 0 0 4px var(--colors-brand-blue-light);\n}\n._input_cgf30_18:checked + ._slider_cgf30_31 {\n  background-color: var(--colors-secondary-blue-base);\n}\n._input_cgf30_18:disabled + ._slider_cgf30_31 {\n  background-color: var(--colors-neutral-grey-base);\n}\n._input_cgf30_18:checked:disabled + ._slider_cgf30_31 {\n  background-color: var(--colors-secondary-blue-light);\n}\n._input_cgf30_18:checked + ._slider_cgf30_31::after, ._input_cgf30_18:checked + ._slider_cgf30_31 svg {\n  transform: translateX(36px);\n}\n._small_cgf30_13 ._input_cgf30_18:checked + ._slider_cgf30_31::after, ._small_cgf30_13 ._input_cgf30_18:checked + ._slider_cgf30_31 svg {\n  transform: translateX(28px);\n}\n\n._slider_cgf30_31 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 18px;\n  background-color: var(--colors-neutral-grey-dark);\n  transition: 0.3s;\n}\n._slider_cgf30_31::after {\n  content: \"\";\n  position: absolute;\n  border-radius: 50%;\n  background-color: white;\n  transition: 0.3s;\n  height: 28px;\n  width: 28px;\n  left: var(--sizes-xs);\n  bottom: var(--sizes-xs);\n}\n._small_cgf30_13 ._slider_cgf30_31::after {\n  height: 22px;\n  width: 22px;\n  left: 3px;\n  bottom: 3px;\n}\n._disabled_cgf30_77 ._slider_cgf30_31::after {\n  background-color: white;\n}\n._disabled_cgf30_77._switched_cgf30_80 ._slider_cgf30_31::after {\n  background-color: var(--colors-secondary-blue-lightest);\n}");
-var styles = {"wrapper":"_wrapper_cgf30_1","switch":"_switch_cgf30_6","small":"_small_cgf30_13","input":"_input_cgf30_18","slider":"_slider_cgf30_31","disabled":"_disabled_cgf30_77","switched":"_switched_cgf30_80"};
+___$insertStyle("._wrapper_141gi_1 {\n  display: inline-block;\n  user-select: none;\n}\n\n._switch_141gi_6 {\n  display: flex;\n  position: relative;\n  height: 36px;\n  width: 72px;\n  z-index: 1;\n}\n._switch_141gi_6._small_141gi_13 {\n  height: 28px;\n  width: 56px;\n}\n\n._input_141gi_18 {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-base);\n  z-index: 2;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n._input_141gi_18:disabled {\n  cursor: not-allowed;\n}\n._input_141gi_18:focus-visible + ._slider_141gi_31 {\n  box-shadow: 0 0 0 4px var(--colors-brand-blue-light);\n}\n._input_141gi_18:checked + ._slider_141gi_31 {\n  background-color: var(--colors-secondary-blue-base);\n}\n._input_141gi_18:disabled + ._slider_141gi_31 {\n  background-color: var(--colors-neutral-grey-base);\n}\n._input_141gi_18:checked:disabled + ._slider_141gi_31 {\n  background-color: var(--colors-secondary-blue-light);\n}\n._input_141gi_18:checked + ._slider_141gi_31::after, ._input_141gi_18:checked + ._slider_141gi_31 svg {\n  transform: translateX(36px);\n}\n._small_141gi_13 ._input_141gi_18:checked + ._slider_141gi_31::after, ._small_141gi_13 ._input_141gi_18:checked + ._slider_141gi_31 svg {\n  transform: translateX(28px);\n}\n\n._slider_141gi_31 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 18px;\n  background-color: var(--colors-neutral-grey-dark);\n  transition: 0.3s;\n}\n._slider_141gi_31::after {\n  content: \"\";\n  position: absolute;\n  border-radius: 50%;\n  background-color: white;\n  transition: 0.3s;\n  height: 28px;\n  width: 28px;\n  left: var(--sizes-xs);\n  bottom: var(--sizes-xs);\n}\n._small_141gi_13 ._slider_141gi_31::after {\n  height: 22px;\n  width: 22px;\n  left: 3px;\n  bottom: 3px;\n}\n._disabled_141gi_77 ._slider_141gi_31::after {\n  background-color: white;\n}\n._disabled_141gi_77._switched_141gi_80 ._slider_141gi_31::after {\n  background-color: var(--colors-secondary-blue-lightest);\n}\n\n._choice_141gi_84 {\n  --choice-tooltip-icon-color: var(--colors-neutral-ink-base);\n  --choice-hint-gap: var(--sizes-xs);\n}");
+var styles = {"wrapper":"_wrapper_141gi_1","switch":"_switch_141gi_6","small":"_small_141gi_13","input":"_input_141gi_18","slider":"_slider_141gi_31","disabled":"_disabled_141gi_77","switched":"_switched_141gi_80","choice":"_choice_141gi_84"};
 
 module.exports = styles;
 //# sourceMappingURL=Toggle.module.scss.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.module.scss.cjs","sources":["../../../src/components/Toggle/Toggle.module.scss"],"sourcesContent":[".wrapper {\n  display: inline-block;\n  user-select: none;\n}\n\n.switch {\n  display: flex;\n  position: relative;\n  height: 36px;\n  width: 72px;\n  z-index: 1;\n\n  &.small {\n    height: 28px;\n    width: 56px;\n  }\n}\n\n.input {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-base);\n  z-index: 2;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus-visible + .slider {\n    box-shadow: 0 0 0 4px var(--colors-brand-blue-light);\n  }\n\n  &:checked + .slider {\n    background-color: var(--colors-secondary-blue-base);\n  }\n\n  &:disabled + .slider {\n    background-color: var(--colors-neutral-grey-base);\n  }\n\n  &:checked:disabled + .slider {\n    background-color: var(--colors-secondary-blue-light);\n  }\n\n  &:checked + .slider::after,\n  &:checked + .slider svg {\n    transform: translateX(36px);\n  }\n\n  .small &:checked + .slider::after,\n  .small &:checked + .slider svg {\n    transform: translateX(28px);\n  }\n}\n\n.slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 18px;\n  background-color: var(--colors-neutral-grey-dark);\n  transition: 0.3s;\n\n  &::after {\n    content: '';\n    position: absolute;\n    border-radius: 50%;\n    background-color: white;\n    transition: 0.3s;\n    height: 28px;\n    width: 28px;\n    left: var(--sizes-xs);\n    bottom: var(--sizes-xs);\n  }\n\n  .small &::after {\n    height: 22px;\n    width: 22px;\n    left: 3px;\n    bottom: 3px;\n  }\n\n  .disabled &::after {\n    background-color: white;\n  }\n\n  .disabled.switched &::after {\n    background-color: var(--colors-secondary-blue-lightest);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,o9DAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}
+{"version":3,"file":"Toggle.module.scss.cjs","sources":["../../../src/components/Toggle/Toggle.module.scss"],"sourcesContent":[".wrapper {\n  display: inline-block;\n  user-select: none;\n}\n\n.switch {\n  display: flex;\n  position: relative;\n  height: 36px;\n  width: 72px;\n  z-index: 1;\n\n  &.small {\n    height: 28px;\n    width: 56px;\n  }\n}\n\n.input {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-base);\n  z-index: 2;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus-visible + .slider {\n    box-shadow: 0 0 0 4px var(--colors-brand-blue-light);\n  }\n\n  &:checked + .slider {\n    background-color: var(--colors-secondary-blue-base);\n  }\n\n  &:disabled + .slider {\n    background-color: var(--colors-neutral-grey-base);\n  }\n\n  &:checked:disabled + .slider {\n    background-color: var(--colors-secondary-blue-light);\n  }\n\n  &:checked + .slider::after,\n  &:checked + .slider svg {\n    transform: translateX(36px);\n  }\n\n  .small &:checked + .slider::after,\n  .small &:checked + .slider svg {\n    transform: translateX(28px);\n  }\n}\n\n.slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 18px;\n  background-color: var(--colors-neutral-grey-dark);\n  transition: 0.3s;\n\n  &::after {\n    content: '';\n    position: absolute;\n    border-radius: 50%;\n    background-color: white;\n    transition: 0.3s;\n    height: 28px;\n    width: 28px;\n    left: var(--sizes-xs);\n    bottom: var(--sizes-xs);\n  }\n\n  .small &::after {\n    height: 22px;\n    width: 22px;\n    left: 3px;\n    bottom: 3px;\n  }\n\n  .disabled &::after {\n    background-color: white;\n  }\n\n  .disabled.switched &::after {\n    background-color: var(--colors-secondary-blue-lightest);\n  }\n}\n\n.choice {\n  --choice-tooltip-icon-color: var(--colors-neutral-ink-base);\n  --choice-hint-gap: var(--sizes-xs);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,qlEAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,QAAA,CAAA,kBAAA;;;;"}

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

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._wrapper_cgf30_1 {\n  display: inline-block;\n  user-select: none;\n}\n\n._switch_cgf30_6 {\n  display: flex;\n  position: relative;\n  height: 36px;\n  width: 72px;\n  z-index: 1;\n}\n._switch_cgf30_6._small_cgf30_13 {\n  height: 28px;\n  width: 56px;\n}\n\n._input_cgf30_18 {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-base);\n  z-index: 2;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n._input_cgf30_18:disabled {\n  cursor: not-allowed;\n}\n._input_cgf30_18:focus-visible + ._slider_cgf30_31 {\n  box-shadow: 0 0 0 4px var(--colors-brand-blue-light);\n}\n._input_cgf30_18:checked + ._slider_cgf30_31 {\n  background-color: var(--colors-secondary-blue-base);\n}\n._input_cgf30_18:disabled + ._slider_cgf30_31 {\n  background-color: var(--colors-neutral-grey-base);\n}\n._input_cgf30_18:checked:disabled + ._slider_cgf30_31 {\n  background-color: var(--colors-secondary-blue-light);\n}\n._input_cgf30_18:checked + ._slider_cgf30_31::after, ._input_cgf30_18:checked + ._slider_cgf30_31 svg {\n  transform: translateX(36px);\n}\n._small_cgf30_13 ._input_cgf30_18:checked + ._slider_cgf30_31::after, ._small_cgf30_13 ._input_cgf30_18:checked + ._slider_cgf30_31 svg {\n  transform: translateX(28px);\n}\n\n._slider_cgf30_31 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 18px;\n  background-color: var(--colors-neutral-grey-dark);\n  transition: 0.3s;\n}\n._slider_cgf30_31::after {\n  content: \"\";\n  position: absolute;\n  border-radius: 50%;\n  background-color: white;\n  transition: 0.3s;\n  height: 28px;\n  width: 28px;\n  left: var(--sizes-xs);\n  bottom: var(--sizes-xs);\n}\n._small_cgf30_13 ._slider_cgf30_31::after {\n  height: 22px;\n  width: 22px;\n  left: 3px;\n  bottom: 3px;\n}\n._disabled_cgf30_77 ._slider_cgf30_31::after {\n  background-color: white;\n}\n._disabled_cgf30_77._switched_cgf30_80 ._slider_cgf30_31::after {\n  background-color: var(--colors-secondary-blue-lightest);\n}");
-var styles = {"wrapper":"_wrapper_cgf30_1","switch":"_switch_cgf30_6","small":"_small_cgf30_13","input":"_input_cgf30_18","slider":"_slider_cgf30_31","disabled":"_disabled_cgf30_77","switched":"_switched_cgf30_80"};
+insertStyle("._wrapper_141gi_1 {\n  display: inline-block;\n  user-select: none;\n}\n\n._switch_141gi_6 {\n  display: flex;\n  position: relative;\n  height: 36px;\n  width: 72px;\n  z-index: 1;\n}\n._switch_141gi_6._small_141gi_13 {\n  height: 28px;\n  width: 56px;\n}\n\n._input_141gi_18 {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-base);\n  z-index: 2;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n._input_141gi_18:disabled {\n  cursor: not-allowed;\n}\n._input_141gi_18:focus-visible + ._slider_141gi_31 {\n  box-shadow: 0 0 0 4px var(--colors-brand-blue-light);\n}\n._input_141gi_18:checked + ._slider_141gi_31 {\n  background-color: var(--colors-secondary-blue-base);\n}\n._input_141gi_18:disabled + ._slider_141gi_31 {\n  background-color: var(--colors-neutral-grey-base);\n}\n._input_141gi_18:checked:disabled + ._slider_141gi_31 {\n  background-color: var(--colors-secondary-blue-light);\n}\n._input_141gi_18:checked + ._slider_141gi_31::after, ._input_141gi_18:checked + ._slider_141gi_31 svg {\n  transform: translateX(36px);\n}\n._small_141gi_13 ._input_141gi_18:checked + ._slider_141gi_31::after, ._small_141gi_13 ._input_141gi_18:checked + ._slider_141gi_31 svg {\n  transform: translateX(28px);\n}\n\n._slider_141gi_31 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 18px;\n  background-color: var(--colors-neutral-grey-dark);\n  transition: 0.3s;\n}\n._slider_141gi_31::after {\n  content: \"\";\n  position: absolute;\n  border-radius: 50%;\n  background-color: white;\n  transition: 0.3s;\n  height: 28px;\n  width: 28px;\n  left: var(--sizes-xs);\n  bottom: var(--sizes-xs);\n}\n._small_141gi_13 ._slider_141gi_31::after {\n  height: 22px;\n  width: 22px;\n  left: 3px;\n  bottom: 3px;\n}\n._disabled_141gi_77 ._slider_141gi_31::after {\n  background-color: white;\n}\n._disabled_141gi_77._switched_141gi_80 ._slider_141gi_31::after {\n  background-color: var(--colors-secondary-blue-lightest);\n}\n\n._choice_141gi_84 {\n  --choice-tooltip-icon-color: var(--colors-neutral-ink-base);\n  --choice-hint-gap: var(--sizes-xs);\n}");
+var styles = {"wrapper":"_wrapper_141gi_1","switch":"_switch_141gi_6","small":"_small_141gi_13","input":"_input_141gi_18","slider":"_slider_141gi_31","disabled":"_disabled_141gi_77","switched":"_switched_141gi_80","choice":"_choice_141gi_84"};
 
 export { styles as default };
 //# sourceMappingURL=Toggle.module.scss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.module.scss.js","sources":["../../../src/components/Toggle/Toggle.module.scss"],"sourcesContent":[".wrapper {\n  display: inline-block;\n  user-select: none;\n}\n\n.switch {\n  display: flex;\n  position: relative;\n  height: 36px;\n  width: 72px;\n  z-index: 1;\n\n  &.small {\n    height: 28px;\n    width: 56px;\n  }\n}\n\n.input {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-base);\n  z-index: 2;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus-visible + .slider {\n    box-shadow: 0 0 0 4px var(--colors-brand-blue-light);\n  }\n\n  &:checked + .slider {\n    background-color: var(--colors-secondary-blue-base);\n  }\n\n  &:disabled + .slider {\n    background-color: var(--colors-neutral-grey-base);\n  }\n\n  &:checked:disabled + .slider {\n    background-color: var(--colors-secondary-blue-light);\n  }\n\n  &:checked + .slider::after,\n  &:checked + .slider svg {\n    transform: translateX(36px);\n  }\n\n  .small &:checked + .slider::after,\n  .small &:checked + .slider svg {\n    transform: translateX(28px);\n  }\n}\n\n.slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 18px;\n  background-color: var(--colors-neutral-grey-dark);\n  transition: 0.3s;\n\n  &::after {\n    content: '';\n    position: absolute;\n    border-radius: 50%;\n    background-color: white;\n    transition: 0.3s;\n    height: 28px;\n    width: 28px;\n    left: var(--sizes-xs);\n    bottom: var(--sizes-xs);\n  }\n\n  .small &::after {\n    height: 22px;\n    width: 22px;\n    left: 3px;\n    bottom: 3px;\n  }\n\n  .disabled &::after {\n    background-color: white;\n  }\n\n  .disabled.switched &::after {\n    background-color: var(--colors-secondary-blue-lightest);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,o9DAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}
+{"version":3,"file":"Toggle.module.scss.js","sources":["../../../src/components/Toggle/Toggle.module.scss"],"sourcesContent":[".wrapper {\n  display: inline-block;\n  user-select: none;\n}\n\n.switch {\n  display: flex;\n  position: relative;\n  height: 36px;\n  width: 72px;\n  z-index: 1;\n\n  &.small {\n    height: 28px;\n    width: 56px;\n  }\n}\n\n.input {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-base);\n  z-index: 2;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus-visible + .slider {\n    box-shadow: 0 0 0 4px var(--colors-brand-blue-light);\n  }\n\n  &:checked + .slider {\n    background-color: var(--colors-secondary-blue-base);\n  }\n\n  &:disabled + .slider {\n    background-color: var(--colors-neutral-grey-base);\n  }\n\n  &:checked:disabled + .slider {\n    background-color: var(--colors-secondary-blue-light);\n  }\n\n  &:checked + .slider::after,\n  &:checked + .slider svg {\n    transform: translateX(36px);\n  }\n\n  .small &:checked + .slider::after,\n  .small &:checked + .slider svg {\n    transform: translateX(28px);\n  }\n}\n\n.slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 18px;\n  background-color: var(--colors-neutral-grey-dark);\n  transition: 0.3s;\n\n  &::after {\n    content: '';\n    position: absolute;\n    border-radius: 50%;\n    background-color: white;\n    transition: 0.3s;\n    height: 28px;\n    width: 28px;\n    left: var(--sizes-xs);\n    bottom: var(--sizes-xs);\n  }\n\n  .small &::after {\n    height: 22px;\n    width: 22px;\n    left: 3px;\n    bottom: 3px;\n  }\n\n  .disabled &::after {\n    background-color: white;\n  }\n\n  .disabled.switched &::after {\n    background-color: var(--colors-secondary-blue-lightest);\n  }\n}\n\n.choice {\n  --choice-tooltip-icon-color: var(--colors-neutral-ink-base);\n  --choice-hint-gap: var(--sizes-xs);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,qlEAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,QAAA,CAAA,kBAAA;;;;"}

package/dist/icons/design-system/icons.figma.batch.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="@figma/code-connect/figma-types" />
+import figma from 'figma';
+declare const _default: {
+    id: any;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "15.15.1",
+  "version": "15.15.3",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",
@@ -43,6 +43,8 @@
     "tags:update": "git fetch --tags && git push --follow-tags",
     "changelog:update": "npm run tags:update && auto-changelog -p && bash ./scripts/ai-changelog.sh && git add CHANGELOG.md NEW_CHANGELOG.md && (git diff --cached --quiet || git commit -m \"Update CHANGELOG and NEW_CHANGELOG\")",
     "figma:export": "rimraf ./src/icons/design-system/imports && dotenv figma-export use-config scripts/figma-export/.figmaexportrc.icons.js ",
+    "figma:publish": "if [ ! -f ./.env ]; then echo 'Error: .env not found — copy .env.sample to .env and set FIGMA_TOKEN' >&2; exit 1; fi; set -a && . ./.env && set +a; if [ -z \"$FIGMA_TOKEN\" ]; then echo 'Error: FIGMA_TOKEN is empty — set it in .env' >&2; exit 1; fi; FIGMA_ACCESS_TOKEN=\"$FIGMA_TOKEN\" npx figma connect publish --force",
+    "icons:code-connect": "node scripts/figma-export/generate-icon-code-connect.js",
     "figma:export-integrations": "rimraf ./imports/integrations && dotenv figma-export use-config scripts/figma-export/.figmaexportrc.integrations.js -- --type=all",
     "figma:export-integrations:accounting": "rimraf ./imports/integrations/accounting && dotenv figma-export use-config scripts/figma-export/.figmaexportrc.integrations.js -- --type=accounting",
     "figma:export-integrations:carriers": "rimraf ./imports/integrations/carriers && dotenv figma-export use-config scripts/figma-export/.figmaexportrc.integrations.js -- --type=carriers",