@veeqo/ui 14.11.1 → 14.12.0-beta-1

package/dist/components/Calendars/components/RangeCalendar/RangeCalendar.js

@@ -1,11 +1,10 @@
 import React__default from 'react';
-import { RangeCalendar as RangeCalendar$1 } from 'react-aria-components';
+import { StyledRangeCalendar } from './styled.js';
 import { CalendarGrid } from '../subcomponents/CalendarGrid/CalendarGrid.js';
 import { visibleDurationMap } from '../../data/constants.js';
 import { useRangeCalendarState } from '../../data/useRangeCalendar.js';
 import { CalendarHeader } from '../subcomponents/CalendarHeader.js';
 import { useIsDateUnavailable } from '../../data/useIsDateUnavailable.js';
-import styles from './RangeCalendar.module.scss.js';
 
 const RangeCalendar = ({ value, onChange, isDisabled, ...props }) => {
     const { level, focusedDate, setFocusedDate, currentYear, onFocusMonth, onFocusYear, handleSwitchLevel, } = useRangeCalendarState(value);
@@ -15,7 +14,7 @@ const RangeCalendar = ({ value, onChange, isDisabled, ...props }) => {
         maxValue: props.maxValue,
         minValue: props.minValue,
     });
-    return (React__default.createElement(RangeCalendar$1, { className: styles.rangeCalendar, focusedValue: focusedDate, onFocusChange: setFocusedDate, isDateUnavailable: isDateUnavailable, visibleDuration: visibleDurationMap[level], value: value, onChange: onChange, isDisabled: isDisabled, ...props },
+    return (React__default.createElement(StyledRangeCalendar, { focusedValue: focusedDate, onFocusChange: setFocusedDate, isDateUnavailable: isDateUnavailable, visibleDuration: visibleDurationMap[level], value: value, onChange: onChange, isDisabled: isDisabled, ...props },
         React__default.createElement(CalendarHeader, { currentYear: currentYear, level: level, handleSwitchLevel: handleSwitchLevel, isDisabled: isDisabled }),
         React__default.createElement(CalendarGrid, { level: level, currentYear: currentYear, onFocusMonth: onFocusMonth, onFocusYear: onFocusYear })));
 };

package/dist/components/Calendars/components/RangeCalendar/RangeCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeCalendar.js","sources":["../../../../../src/components/Calendars/components/RangeCalendar/RangeCalendar.tsx"],"sourcesContent":["import React from 'react';\n\nimport { RangeCalendar as RARangeCalendar } from 'react-aria-components';\nimport type { DateRange, DateValue, RangeCalendarProps } from 'react-aria-components';\n\nimport { DateValidationProps } from '../../../DateInputField/types';\nimport { CalendarGrid } from '../subcomponents/CalendarGrid';\nimport { visibleDurationMap } from '../../data/constants';\nimport { useRangeCalendarState } from '../../data/useRangeCalendar';\nimport { CalendarHeader } from '../subcomponents/CalendarHeader';\nimport { useIsDateUnavailable } from '../../data/useIsDateUnavailable';\nimport styles from './RangeCalendar.module.scss';\n\nexport type CalendarProps = RangeCalendarProps<DateValue> & {\n  value: DateRange | null | undefined;\n  onChange?: RangeCalendarProps<DateValue>['onChange'];\n} & React.RefAttributes<HTMLDivElement> & {\n    'aria-label': string;\n  } & DateValidationProps;\n\nexport const RangeCalendar = ({ value, onChange, isDisabled, ...props }: CalendarProps) => {\n  const {\n    level,\n    focusedDate,\n    setFocusedDate,\n    currentYear,\n    onFocusMonth,\n    onFocusYear,\n    handleSwitchLevel,\n  } = useRangeCalendarState(value);\n\n  const { isDateUnavailable } = useIsDateUnavailable({\n    disabledRanges: props.disabledRanges,\n    disallowWeekends: props.disallowWeekends,\n    maxValue: props.maxValue,\n    minValue: props.minValue,\n  });\n\n  return (\n    <RARangeCalendar\n      className={styles.rangeCalendar}\n      focusedValue={focusedDate}\n      onFocusChange={setFocusedDate}\n      isDateUnavailable={isDateUnavailable}\n      visibleDuration={visibleDurationMap[level]}\n      value={value}\n      onChange={onChange}\n      isDisabled={isDisabled}\n      {...props}\n    >\n      <CalendarHeader\n        currentYear={currentYear}\n        level={level}\n        handleSwitchLevel={handleSwitchLevel}\n        isDisabled={isDisabled}\n      />\n\n      <CalendarGrid\n        level={level}\n        currentYear={currentYear}\n        onFocusMonth={onFocusMonth}\n        onFocusYear={onFocusYear}\n      />\n    </RARangeCalendar>\n  );\n};\n"],"names":["React","RARangeCalendar"],"mappings":";;;;;;;;;AAoBO,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAiB,KAAI;IACxF,MAAM,EACJ,KAAK,EACL,WAAW,EACX,cAAc,EACd,WAAW,EACX,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,GAAG,qBAAqB,CAAC,KAAK,CAAC;AAEhC,IAAA,MAAM,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,CAAC;QACjD,cAAc,EAAE,KAAK,CAAC,cAAc;QACpC,gBAAgB,EAAE,KAAK,CAAC,gBAAgB;QACxC,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;AACzB,KAAA,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAACC,eAAe,IACd,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,YAAY,EAAE,WAAW,EACzB,aAAa,EAAE,cAAc,EAC7B,iBAAiB,EAAE,iBAAiB,EACpC,eAAe,EAAE,kBAAkB,CAAC,KAAK,CAAC,EAC1C,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,KAClB,KAAK,EAAA;AAET,QAAAD,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,UAAU,EAAA,CACtB;QAEFA,cAAA,CAAA,aAAA,CAAC,YAAY,IACX,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EAAA,CACxB,CACc;AAEtB;;;;"}
+{"version":3,"file":"RangeCalendar.js","sources":["../../../../../src/components/Calendars/components/RangeCalendar/RangeCalendar.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { DateRange, DateValue, RangeCalendarProps } from 'react-aria-components';\n\nimport { DateValidationProps } from '../../../DateInputField/types';\nimport { StyledRangeCalendar } from './styled';\nimport { CalendarGrid } from '../subcomponents/CalendarGrid';\nimport { visibleDurationMap } from '../../data/constants';\nimport { useRangeCalendarState } from '../../data/useRangeCalendar';\nimport { CalendarHeader } from '../subcomponents/CalendarHeader';\nimport { useIsDateUnavailable } from '../../data/useIsDateUnavailable';\n\nexport type CalendarProps = RangeCalendarProps<DateValue> & {\n  value: DateRange | null | undefined;\n  onChange?: RangeCalendarProps<DateValue>['onChange'];\n} & React.RefAttributes<HTMLDivElement> & {\n    'aria-label': string;\n  } & DateValidationProps;\n\nexport const RangeCalendar = ({ value, onChange, isDisabled, ...props }: CalendarProps) => {\n  const {\n    level,\n    focusedDate,\n    setFocusedDate,\n    currentYear,\n    onFocusMonth,\n    onFocusYear,\n    handleSwitchLevel,\n  } = useRangeCalendarState(value);\n\n  const { isDateUnavailable } = useIsDateUnavailable({\n    disabledRanges: props.disabledRanges,\n    disallowWeekends: props.disallowWeekends,\n    maxValue: props.maxValue,\n    minValue: props.minValue,\n  });\n\n  return (\n    <StyledRangeCalendar\n      focusedValue={focusedDate}\n      onFocusChange={setFocusedDate}\n      isDateUnavailable={isDateUnavailable}\n      visibleDuration={visibleDurationMap[level]}\n      value={value}\n      onChange={onChange}\n      isDisabled={isDisabled}\n      {...props}\n    >\n      <CalendarHeader\n        currentYear={currentYear}\n        level={level}\n        handleSwitchLevel={handleSwitchLevel}\n        isDisabled={isDisabled}\n      />\n\n      <CalendarGrid\n        level={level}\n        currentYear={currentYear}\n        onFocusMonth={onFocusMonth}\n        onFocusYear={onFocusYear}\n      />\n    </StyledRangeCalendar>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AAmBO,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAiB,KAAI;IACxF,MAAM,EACJ,KAAK,EACL,WAAW,EACX,cAAc,EACd,WAAW,EACX,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,GAAG,qBAAqB,CAAC,KAAK,CAAC;AAEhC,IAAA,MAAM,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,CAAC;QACjD,cAAc,EAAE,KAAK,CAAC,cAAc;QACpC,gBAAgB,EAAE,KAAK,CAAC,gBAAgB;QACxC,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;AACzB,KAAA,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,mBAAmB,EAAA,EAClB,YAAY,EAAE,WAAW,EACzB,aAAa,EAAE,cAAc,EAC7B,iBAAiB,EAAE,iBAAiB,EACpC,eAAe,EAAE,kBAAkB,CAAC,KAAK,CAAC,EAC1C,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,KAClB,KAAK,EAAA;AAET,QAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,UAAU,EAAA,CACtB;QAEFA,cAAA,CAAA,aAAA,CAAC,YAAY,IACX,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EAAA,CACxB,CACkB;AAE1B;;;;"}

package/dist/components/Calendars/components/RangeCalendar/styled.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var reactAriaComponents = require('react-aria-components');
+var styled = require('styled-components');
+var CalendarStyles = require('../subcomponents/CalendarStyles/CalendarStyles.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const StyledRangeCalendar = styled__default.default(reactAriaComponents.RangeCalendar).withConfig({ displayName: "vui--StyledRangeCalendar", componentId: "vui--1dva9jw" }) `${CalendarStyles.SharedCalendarStyles};`;
+
+exports.StyledRangeCalendar = StyledRangeCalendar;
+//# sourceMappingURL=styled.cjs.map

package/dist/components/Calendars/components/RangeCalendar/styled.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../../../src/components/Calendars/components/RangeCalendar/styled.ts"],"sourcesContent":["import { RangeCalendar } from 'react-aria-components';\nimport styled from 'styled-components';\nimport { SharedCalendarStyles } from '../subcomponents/CalendarStyles/CalendarStyles';\n\nexport const StyledRangeCalendar = styled(RangeCalendar)`\n  ${SharedCalendarStyles};\n`;\n"],"names":["styled","RangeCalendar","SharedCalendarStyles"],"mappings":";;;;;;;;;;AAIO,MAAM,mBAAmB,GAAGA,uBAAM,CAACC,iCAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,0BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EACpDC,mCAAoB,CAAA,CAAA;;;;"}

package/dist/components/Calendars/components/RangeCalendar/styled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledRangeCalendar: import("styled-components").StyledComponent<(<T extends import("react-aria-components").DateValue>(props: import("react-aria-components").RangeCalendarProps<T> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>), any, {}, never>;

package/dist/components/Calendars/components/RangeCalendar/styled.js

@@ -0,0 +1,8 @@
+import { RangeCalendar } from 'react-aria-components';
+import styled from 'styled-components';
+import { SharedCalendarStyles } from '../subcomponents/CalendarStyles/CalendarStyles.js';
+
+const StyledRangeCalendar = styled(RangeCalendar).withConfig({ displayName: "vui--StyledRangeCalendar", componentId: "vui--1dva9jw" }) `${SharedCalendarStyles};`;
+
+export { StyledRangeCalendar };
+//# sourceMappingURL=styled.js.map

package/dist/components/Calendars/components/RangeCalendar/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../../src/components/Calendars/components/RangeCalendar/styled.ts"],"sourcesContent":["import { RangeCalendar } from 'react-aria-components';\nimport styled from 'styled-components';\nimport { SharedCalendarStyles } from '../subcomponents/CalendarStyles/CalendarStyles';\n\nexport const StyledRangeCalendar = styled(RangeCalendar)`\n  ${SharedCalendarStyles};\n`;\n"],"names":[],"mappings":";;;;AAIO,MAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,0BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EACpD,oBAAoB,CAAA,CAAA;;;;"}

package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/DodecadeCalendar.cjs

@@ -2,14 +2,14 @@
 
 var React = require('react');
 var Grid = require('../../../../../Grid/Grid.cjs');
-var SubCalendarOption_module = require('./SubCalendarOption.module.scss.cjs');
+var styled = require('./styled.cjs');
 var utils = require('./utils.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const DodecadeCalendar = ({ currentYear, onFocusYear }) => (React__default.default.createElement(Grid.Grid, { columns: 3, spacing: "sm", role: "grid" }, utils.getYearsAround(currentYear).map((year) => (React__default.default.createElement("button", { type: "button", className: SubCalendarOption_module.subCalendarOption, key: `year-option-${year}`, "aria-label": `Go to ${year}`, onClick: onFocusYear(year) }, year)))));
+const DodecadeCalendar = ({ currentYear, onFocusYear }) => (React__default.default.createElement(Grid.Grid, { columns: 3, spacing: "sm", role: "grid" }, utils.getYearsAround(currentYear).map((year) => (React__default.default.createElement(styled.SubCalendarOption, { key: `year-option-${year}`, "aria-label": `Go to ${year}`, onClick: onFocusYear(year) }, year)))));
 
 exports.DodecadeCalendar = DodecadeCalendar;
 //# sourceMappingURL=DodecadeCalendar.cjs.map

package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/DodecadeCalendar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DodecadeCalendar.cjs","sources":["../../../../../../../src/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/DodecadeCalendar.tsx"],"sourcesContent":["import React from 'react';\nimport { Grid } from '../../../../../Grid';\nimport styles from './SubCalendarOption.module.scss';\nimport { getYearsAround } from './utils';\n\ntype DodecadeCalendarProps = {\n  currentYear: number;\n  onFocusYear: (year: number) => () => void;\n};\n\nexport const DodecadeCalendar = ({ currentYear, onFocusYear }: DodecadeCalendarProps) => (\n  <Grid columns={3} spacing=\"sm\" role=\"grid\">\n    {getYearsAround(currentYear).map((year) => (\n      <button\n        type=\"button\"\n        className={styles.subCalendarOption}\n        key={`year-option-${year}`}\n        aria-label={`Go to ${year}`}\n        onClick={onFocusYear(year)}\n      >\n        {year}\n      </button>\n    ))}\n  </Grid>\n);\n"],"names":["React","Grid","getYearsAround","styles"],"mappings":";;;;;;;;;;;AAUO,MAAM,gBAAgB,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,EAAyB,MAClFA,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAC,OAAO,EAAE,CAAC,EAAE,OAAO,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAA,EACvCC,oBAAc,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,MACpCF,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAEG,wBAAM,CAAC,iBAAiB,EACnC,GAAG,EAAE,eAAe,IAAI,CAAA,CAAE,EAAA,YAAA,EACd,CAAA,MAAA,EAAS,IAAI,CAAA,CAAE,EAC3B,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,EAAA,EAEzB,IAAI,CACE,CACV,CAAC,CACG;;;;"}
+{"version":3,"file":"DodecadeCalendar.cjs","sources":["../../../../../../../src/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/DodecadeCalendar.tsx"],"sourcesContent":["import React from 'react';\nimport { Grid } from '../../../../../Grid';\nimport { SubCalendarOption } from './styled';\nimport { getYearsAround } from './utils';\n\ntype DodecadeCalendarProps = {\n  currentYear: number;\n  onFocusYear: (year: number) => () => void;\n};\n\nexport const DodecadeCalendar = ({ currentYear, onFocusYear }: DodecadeCalendarProps) => (\n  <Grid columns={3} spacing=\"sm\" role=\"grid\">\n    {getYearsAround(currentYear).map((year) => (\n      <SubCalendarOption\n        key={`year-option-${year}`}\n        aria-label={`Go to ${year}`}\n        onClick={onFocusYear(year)}\n      >\n        {year}\n      </SubCalendarOption>\n    ))}\n  </Grid>\n);\n"],"names":["React","Grid","getYearsAround","SubCalendarOption"],"mappings":";;;;;;;;;;;AAUO,MAAM,gBAAgB,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,EAAyB,MAClFA,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAC,OAAO,EAAE,CAAC,EAAE,OAAO,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAA,EACvCC,oBAAc,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,MACpCF,sBAAA,CAAA,aAAA,CAACG,wBAAiB,EAAA,EAChB,GAAG,EAAE,CAAA,YAAA,EAAe,IAAI,EAAE,EAAA,YAAA,EACd,CAAA,MAAA,EAAS,IAAI,CAAA,CAAE,EAC3B,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,EAAA,EAEzB,IAAI,CACa,CACrB,CAAC,CACG;;;;"}

package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/DodecadeCalendar.js

@@ -1,9 +1,9 @@
 import React__default from 'react';
 import { Grid } from '../../../../../Grid/Grid.js';
-import styles from './SubCalendarOption.module.scss.js';
+import { SubCalendarOption } from './styled.js';
 import { getYearsAround } from './utils.js';
 
-const DodecadeCalendar = ({ currentYear, onFocusYear }) => (React__default.createElement(Grid, { columns: 3, spacing: "sm", role: "grid" }, getYearsAround(currentYear).map((year) => (React__default.createElement("button", { type: "button", className: styles.subCalendarOption, key: `year-option-${year}`, "aria-label": `Go to ${year}`, onClick: onFocusYear(year) }, year)))));
+const DodecadeCalendar = ({ currentYear, onFocusYear }) => (React__default.createElement(Grid, { columns: 3, spacing: "sm", role: "grid" }, getYearsAround(currentYear).map((year) => (React__default.createElement(SubCalendarOption, { key: `year-option-${year}`, "aria-label": `Go to ${year}`, onClick: onFocusYear(year) }, year)))));
 
 export { DodecadeCalendar };
 //# sourceMappingURL=DodecadeCalendar.js.map

package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/DodecadeCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DodecadeCalendar.js","sources":["../../../../../../../src/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/DodecadeCalendar.tsx"],"sourcesContent":["import React from 'react';\nimport { Grid } from '../../../../../Grid';\nimport styles from './SubCalendarOption.module.scss';\nimport { getYearsAround } from './utils';\n\ntype DodecadeCalendarProps = {\n  currentYear: number;\n  onFocusYear: (year: number) => () => void;\n};\n\nexport const DodecadeCalendar = ({ currentYear, onFocusYear }: DodecadeCalendarProps) => (\n  <Grid columns={3} spacing=\"sm\" role=\"grid\">\n    {getYearsAround(currentYear).map((year) => (\n      <button\n        type=\"button\"\n        className={styles.subCalendarOption}\n        key={`year-option-${year}`}\n        aria-label={`Go to ${year}`}\n        onClick={onFocusYear(year)}\n      >\n        {year}\n      </button>\n    ))}\n  </Grid>\n);\n"],"names":["React"],"mappings":";;;;;AAUO,MAAM,gBAAgB,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,EAAyB,MAClFA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAE,CAAC,EAAE,OAAO,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAA,EACvC,cAAc,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,MACpCA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,iBAAiB,EACnC,GAAG,EAAE,eAAe,IAAI,CAAA,CAAE,EAAA,YAAA,EACd,CAAA,MAAA,EAAS,IAAI,CAAA,CAAE,EAC3B,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,EAAA,EAEzB,IAAI,CACE,CACV,CAAC,CACG;;;;"}
+{"version":3,"file":"DodecadeCalendar.js","sources":["../../../../../../../src/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/DodecadeCalendar.tsx"],"sourcesContent":["import React from 'react';\nimport { Grid } from '../../../../../Grid';\nimport { SubCalendarOption } from './styled';\nimport { getYearsAround } from './utils';\n\ntype DodecadeCalendarProps = {\n  currentYear: number;\n  onFocusYear: (year: number) => () => void;\n};\n\nexport const DodecadeCalendar = ({ currentYear, onFocusYear }: DodecadeCalendarProps) => (\n  <Grid columns={3} spacing=\"sm\" role=\"grid\">\n    {getYearsAround(currentYear).map((year) => (\n      <SubCalendarOption\n        key={`year-option-${year}`}\n        aria-label={`Go to ${year}`}\n        onClick={onFocusYear(year)}\n      >\n        {year}\n      </SubCalendarOption>\n    ))}\n  </Grid>\n);\n"],"names":["React"],"mappings":";;;;;AAUO,MAAM,gBAAgB,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,EAAyB,MAClFA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAE,CAAC,EAAE,OAAO,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAA,EACvC,cAAc,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,MACpCA,cAAA,CAAA,aAAA,CAAC,iBAAiB,EAAA,EAChB,GAAG,EAAE,CAAA,YAAA,EAAe,IAAI,EAAE,EAAA,YAAA,EACd,CAAA,MAAA,EAAS,IAAI,CAAA,CAAE,EAC3B,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,EAAA,EAEzB,IAAI,CACa,CACrB,CAAC,CACG;;;;"}

package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/YearCalendar.cjs

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var Grid = require('../../../../../Grid/Grid.cjs');
-var SubCalendarOption_module = require('./SubCalendarOption.module.scss.cjs');
+var styled = require('./styled.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -10,7 +10,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 const YearCalendar = ({ onFocusMonth }) => {
-    return (React__default.default.createElement(Grid.Grid, { columns: 3, spacing: "sm", role: "grid" }, MONTHS.map((month, monthIndex) => (React__default.default.createElement("button", { type: "button", className: SubCalendarOption_module.subCalendarOption, key: `month-option-${month}`, "aria-label": `Go to ${month}`, onClick: onFocusMonth(monthIndex) }, month)))));
+    return (React__default.default.createElement(Grid.Grid, { columns: 3, spacing: "sm", role: "grid" }, MONTHS.map((month, monthIndex) => (React__default.default.createElement(styled.SubCalendarOption, { key: `month-option-${month}`, "aria-label": `Go to ${month}`, onClick: onFocusMonth(monthIndex) }, month)))));
 };
 
 exports.YearCalendar = YearCalendar;

package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/YearCalendar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"YearCalendar.cjs","sources":["../../../../../../../src/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/YearCalendar.tsx"],"sourcesContent":["import React from 'react';\nimport { Grid } from '../../../../../Grid';\nimport styles from './SubCalendarOption.module.scss';\n\ntype MonthCalendarProps = {\n  onFocusMonth: (monthIndex: number) => () => void;\n};\n\nconst MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n\nexport const YearCalendar = ({ onFocusMonth }: MonthCalendarProps) => {\n  return (\n    <Grid columns={3} spacing=\"sm\" role=\"grid\">\n      {MONTHS.map((month, monthIndex) => (\n        <button\n          type=\"button\"\n          className={styles.subCalendarOption}\n          key={`month-option-${month}`}\n          aria-label={`Go to ${month}`}\n          onClick={onFocusMonth(monthIndex)}\n        >\n          {month}\n        </button>\n      ))}\n    </Grid>\n  );\n};\n"],"names":["React","Grid","styles"],"mappings":";;;;;;;;;;AAQA,MAAM,MAAM,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;MAEtF,YAAY,GAAG,CAAC,EAAE,YAAY,EAAsB,KAAI;AACnE,IAAA,QACEA,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAC,OAAO,EAAE,CAAC,EAAE,OAAO,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAA,EACvC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,UAAU,MAC5BD,iDACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAEE,wBAAM,CAAC,iBAAiB,EACnC,GAAG,EAAE,CAAA,aAAA,EAAgB,KAAK,CAAA,CAAE,EAAA,YAAA,EAChB,CAAA,MAAA,EAAS,KAAK,CAAA,CAAE,EAC5B,OAAO,EAAE,YAAY,CAAC,UAAU,CAAC,EAAA,EAEhC,KAAK,CACC,CACV,CAAC,CACG;AAEX;;;;"}
+{"version":3,"file":"YearCalendar.cjs","sources":["../../../../../../../src/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/YearCalendar.tsx"],"sourcesContent":["import React from 'react';\nimport { Grid } from '../../../../../Grid';\nimport { SubCalendarOption } from './styled';\n\ntype MonthCalendarProps = {\n  onFocusMonth: (monthIndex: number) => () => void;\n};\n\nconst MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n\nexport const YearCalendar = ({ onFocusMonth }: MonthCalendarProps) => {\n  return (\n    <Grid columns={3} spacing=\"sm\" role=\"grid\">\n      {MONTHS.map((month, monthIndex) => (\n        <SubCalendarOption\n          key={`month-option-${month}`}\n          aria-label={`Go to ${month}`}\n          onClick={onFocusMonth(monthIndex)}\n        >\n          {month}\n        </SubCalendarOption>\n      ))}\n    </Grid>\n  );\n};\n"],"names":["React","Grid","SubCalendarOption"],"mappings":";;;;;;;;;;AAQA,MAAM,MAAM,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;MAEtF,YAAY,GAAG,CAAC,EAAE,YAAY,EAAsB,KAAI;IACnE,QACEA,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAC,OAAO,EAAE,CAAC,EAAE,OAAO,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAA,EACvC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,UAAU,MAC5BD,sBAAA,CAAA,aAAA,CAACE,wBAAiB,EAAA,EAChB,GAAG,EAAE,CAAA,aAAA,EAAgB,KAAK,CAAA,CAAE,EAAA,YAAA,EAChB,CAAA,MAAA,EAAS,KAAK,CAAA,CAAE,EAC5B,OAAO,EAAE,YAAY,CAAC,UAAU,CAAC,EAAA,EAEhC,KAAK,CACY,CACrB,CAAC,CACG;AAEX;;;;"}

package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/YearCalendar.js

@@ -1,10 +1,10 @@
 import React__default from 'react';
 import { Grid } from '../../../../../Grid/Grid.js';
-import styles from './SubCalendarOption.module.scss.js';
+import { SubCalendarOption } from './styled.js';
 
 const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 const YearCalendar = ({ onFocusMonth }) => {
-    return (React__default.createElement(Grid, { columns: 3, spacing: "sm", role: "grid" }, MONTHS.map((month, monthIndex) => (React__default.createElement("button", { type: "button", className: styles.subCalendarOption, key: `month-option-${month}`, "aria-label": `Go to ${month}`, onClick: onFocusMonth(monthIndex) }, month)))));
+    return (React__default.createElement(Grid, { columns: 3, spacing: "sm", role: "grid" }, MONTHS.map((month, monthIndex) => (React__default.createElement(SubCalendarOption, { key: `month-option-${month}`, "aria-label": `Go to ${month}`, onClick: onFocusMonth(monthIndex) }, month)))));
 };
 
 export { YearCalendar };

package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/YearCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"YearCalendar.js","sources":["../../../../../../../src/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/YearCalendar.tsx"],"sourcesContent":["import React from 'react';\nimport { Grid } from '../../../../../Grid';\nimport styles from './SubCalendarOption.module.scss';\n\ntype MonthCalendarProps = {\n  onFocusMonth: (monthIndex: number) => () => void;\n};\n\nconst MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n\nexport const YearCalendar = ({ onFocusMonth }: MonthCalendarProps) => {\n  return (\n    <Grid columns={3} spacing=\"sm\" role=\"grid\">\n      {MONTHS.map((month, monthIndex) => (\n        <button\n          type=\"button\"\n          className={styles.subCalendarOption}\n          key={`month-option-${month}`}\n          aria-label={`Go to ${month}`}\n          onClick={onFocusMonth(monthIndex)}\n        >\n          {month}\n        </button>\n      ))}\n    </Grid>\n  );\n};\n"],"names":["React"],"mappings":";;;;AAQA,MAAM,MAAM,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;MAEtF,YAAY,GAAG,CAAC,EAAE,YAAY,EAAsB,KAAI;AACnE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAE,CAAC,EAAE,OAAO,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAA,EACvC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,UAAU,MAC5BA,yCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,iBAAiB,EACnC,GAAG,EAAE,CAAA,aAAA,EAAgB,KAAK,CAAA,CAAE,EAAA,YAAA,EAChB,CAAA,MAAA,EAAS,KAAK,CAAA,CAAE,EAC5B,OAAO,EAAE,YAAY,CAAC,UAAU,CAAC,EAAA,EAEhC,KAAK,CACC,CACV,CAAC,CACG;AAEX;;;;"}
+{"version":3,"file":"YearCalendar.js","sources":["../../../../../../../src/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/YearCalendar.tsx"],"sourcesContent":["import React from 'react';\nimport { Grid } from '../../../../../Grid';\nimport { SubCalendarOption } from './styled';\n\ntype MonthCalendarProps = {\n  onFocusMonth: (monthIndex: number) => () => void;\n};\n\nconst MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n\nexport const YearCalendar = ({ onFocusMonth }: MonthCalendarProps) => {\n  return (\n    <Grid columns={3} spacing=\"sm\" role=\"grid\">\n      {MONTHS.map((month, monthIndex) => (\n        <SubCalendarOption\n          key={`month-option-${month}`}\n          aria-label={`Go to ${month}`}\n          onClick={onFocusMonth(monthIndex)}\n        >\n          {month}\n        </SubCalendarOption>\n      ))}\n    </Grid>\n  );\n};\n"],"names":["React"],"mappings":";;;;AAQA,MAAM,MAAM,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;MAEtF,YAAY,GAAG,CAAC,EAAE,YAAY,EAAsB,KAAI;IACnE,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAE,CAAC,EAAE,OAAO,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAA,EACvC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,UAAU,MAC5BA,cAAA,CAAA,aAAA,CAAC,iBAAiB,EAAA,EAChB,GAAG,EAAE,CAAA,aAAA,EAAgB,KAAK,CAAA,CAAE,EAAA,YAAA,EAChB,CAAA,MAAA,EAAS,KAAK,CAAA,CAAE,EAC5B,OAAO,EAAE,YAAY,CAAC,UAAU,CAAC,EAAA,EAEhC,KAAK,CACY,CACrB,CAAC,CACG;AAEX;;;;"}

package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var styled = require('styled-components');
+var utils = require('../../../../../../theme/utils.cjs');
+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 SubCalendarOption = styled__default.default.button.withConfig({ displayName: "vui--SubCalendarOption", componentId: "vui--140wlkz" }) `display:flex;flex-direction:column;justify-content:center;align-items:center;${utils.getTextStyles(index.theme.text.body)};width:60px;height:32px;padding:0;border:none;outline:none;border-radius:${index.theme.radius.md};background-color:white;&:hover{cursor:pointer;background-color:${index.theme.colors.neutral.grey.base};}&:focus-visible,&:active{color:white;background-color:${index.theme.colors.secondary.blue.base};&:not([data-selected]){outline:2px solid ${index.theme.colors.secondary.blue.light};}}`;
+
+exports.SubCalendarOption = SubCalendarOption;
+//# sourceMappingURL=styled.cjs.map

package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../../../../../src/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { getTextStyles } from 'Theme/utils';\nimport { theme } from 'Theme';\n\nexport const SubCalendarOption = styled.button`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  ${getTextStyles(theme.text.body)};\n\n  width: 60px;\n  height: 32px;\n  padding: 0;\n\n  border: none;\n  outline: none;\n  border-radius: ${theme.radius.md};\n  background-color: white;\n\n  &:hover {\n    cursor: pointer;\n    background-color: ${theme.colors.neutral.grey.base};\n  }\n\n  &:focus-visible,\n  &:active {\n    color: white;\n    background-color: ${theme.colors.secondary.blue.base};\n\n    &:not([data-selected]) {\n      outline: 2px solid ${theme.colors.secondary.blue.light};\n    }\n  }\n`;\n"],"names":["styled","getTextStyles","theme"],"mappings":";;;;;;;;;;AAIO,MAAM,iBAAiB,GAAGA,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,wBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,6EAAA,EAM1CC,mBAAa,CAACC,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA,yEAAA,EAQfA,WAAK,CAAC,MAAM,CAAC,EAAE,CAAA,gEAAA,EAKVA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,wDAAA,EAM9BA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,0CAAA,EAG7BA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,GAAA;;;;"}

package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.d.ts

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

package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { getTextStyles } from '../../../../../../theme/utils.js';
+import { theme } from '../../../../../../theme/index.js';
+
+const SubCalendarOption = styled.button.withConfig({ displayName: "vui--SubCalendarOption", componentId: "vui--140wlkz" }) `display:flex;flex-direction:column;justify-content:center;align-items:center;${getTextStyles(theme.text.body)};width:60px;height:32px;padding:0;border:none;outline:none;border-radius:${theme.radius.md};background-color:white;&:hover{cursor:pointer;background-color:${theme.colors.neutral.grey.base};}&:focus-visible,&:active{color:white;background-color:${theme.colors.secondary.blue.base};&:not([data-selected]){outline:2px solid ${theme.colors.secondary.blue.light};}}`;
+
+export { SubCalendarOption };
+//# sourceMappingURL=styled.js.map

package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../../../../src/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { getTextStyles } from 'Theme/utils';\nimport { theme } from 'Theme';\n\nexport const SubCalendarOption = styled.button`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  ${getTextStyles(theme.text.body)};\n\n  width: 60px;\n  height: 32px;\n  padding: 0;\n\n  border: none;\n  outline: none;\n  border-radius: ${theme.radius.md};\n  background-color: white;\n\n  &:hover {\n    cursor: pointer;\n    background-color: ${theme.colors.neutral.grey.base};\n  }\n\n  &:focus-visible,\n  &:active {\n    color: white;\n    background-color: ${theme.colors.secondary.blue.base};\n\n    &:not([data-selected]) {\n      outline: 2px solid ${theme.colors.secondary.blue.light};\n    }\n  }\n`;\n"],"names":[],"mappings":";;;;AAIO,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,wBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,6EAAA,EAM1C,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA,yEAAA,EAQf,KAAK,CAAC,MAAM,CAAC,EAAE,CAAA,gEAAA,EAKV,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,wDAAA,EAM9B,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,0CAAA,EAG7B,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,GAAA;;;;"}

package/dist/components/Calendars/components/subcomponents/CalendarStyles/CalendarStyles.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var styled = require('styled-components');
+var index = require('../../../../../theme/index.cjs');
+var buttonStyles = require('./buttonStyles.cjs');
+var calendarCellStyles = require('./calendarCellStyles.cjs');
+var headerStyles = require('./headerStyles.cjs');
+
+const SharedCalendarStyles = styled.css `width:fit-content;max-width:100%;min-width:225px;color:${index.theme.colors.neutral.ink.base};font-size:14px;font-family:${index.theme.fontFamily};${headerStyles.headerStyles} ${buttonStyles.buttonStyles} ${calendarCellStyles.calenderCellStyles} & table{height:fit-content;border-collapse:separate;border-spacing:0 ${index.theme.sizes.xs};& td{padding:0;&:has(div[data-today='true']){& > div{border:1px solid ${index.theme.colors.neutral.ink.lightest};}&:has(div[data-selected]){background-color:${index.theme.colors.secondary.blue.base};& > div{border:1px solid ${index.theme.colors.secondary.blue.darkest};border-radius:${index.theme.radius.md};}&:has(div[data-selection-start]){border-start-start-radius:6px;border-end-start-radius:6px;}&:has(div[data-selection-end]){border-start-end-radius:6px;border-end-end-radius:6px;}}}}}`;
+
+exports.SharedCalendarStyles = SharedCalendarStyles;
+//# sourceMappingURL=CalendarStyles.cjs.map

package/dist/components/Calendars/components/subcomponents/CalendarStyles/CalendarStyles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarStyles.cjs","sources":["../../../../../../src/components/Calendars/components/subcomponents/CalendarStyles/CalendarStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport { theme } from '../../../../../theme';\nimport { buttonStyles } from './buttonStyles';\nimport { calenderCellStyles } from './calendarCellStyles';\nimport { headerStyles } from './headerStyles';\n\nexport const SharedCalendarStyles = css`\n  width: fit-content;\n  max-width: 100%;\n  min-width: 225px;\n\n  color: ${theme.colors.neutral.ink.base};\n  font-size: 14px;\n  font-family: ${theme.fontFamily};\n\n  ${headerStyles}\n\n  ${buttonStyles}\n\n  ${calenderCellStyles}\n\n  & table {\n    height: fit-content;\n\n    border-collapse: separate;\n    border-spacing: 0 ${theme.sizes.xs};\n\n    & td {\n      padding: 0;\n\n      /*\n       * Selectors for today border (has to apply to wrapping td (cannot be targetted directly\n       * need to go through :has to get data attributes about the cell)).\n       */\n      &:has(div[data-today='true']) {\n        & > div {\n          border: 1px solid ${theme.colors.neutral.ink.lightest};\n        }\n\n        &:has(div[data-selected]) {\n          background-color: ${theme.colors.secondary.blue.base};\n\n          & > div {\n            border: 1px solid ${theme.colors.secondary.blue.darkest};\n            border-radius: ${theme.radius.md};\n          }\n\n          &:has(div[data-selection-start]) {\n            border-start-start-radius: 6px;\n            border-end-start-radius: 6px;\n          }\n\n          &:has(div[data-selection-end]) {\n            border-start-end-radius: 6px;\n            border-end-end-radius: 6px;\n          }\n        }\n      }\n    }\n  }\n`;\n"],"names":["css","theme","headerStyles","buttonStyles","calenderCellStyles"],"mappings":";;;;;;;;AAOO,MAAM,oBAAoB,GAAGA,UAAG,CAAA,CAAA,uDAAA,EAK5BC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,4BAAA,EAEvBA,WAAK,CAAC,UAAU,CAAA,CAAA,EAE7BC,yBAAY,CAAA,CAAA,EAEZC,yBAAY,CAAA,CAAA,EAEZC,qCAAkB,CAAA,sEAAA,EAMEH,WAAK,CAAC,KAAK,CAAC,EAAE,0EAWRA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,6CAAA,EAIjCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,0BAAA,EAG9BA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAA,eAAA,EACtCA,WAAK,CAAC,MAAM,CAAC,EAAE;;;;"}

package/dist/components/Calendars/components/subcomponents/CalendarStyles/CalendarStyles.d.ts

@@ -0,0 +1 @@
+export declare const SharedCalendarStyles: import("styled-components").FlattenSimpleInterpolation;

package/dist/components/Calendars/components/subcomponents/CalendarStyles/CalendarStyles.js

@@ -0,0 +1,10 @@
+import { css } from 'styled-components';
+import { theme } from '../../../../../theme/index.js';
+import { buttonStyles } from './buttonStyles.js';
+import { calenderCellStyles } from './calendarCellStyles.js';
+import { headerStyles } from './headerStyles.js';
+
+const SharedCalendarStyles = css `width:fit-content;max-width:100%;min-width:225px;color:${theme.colors.neutral.ink.base};font-size:14px;font-family:${theme.fontFamily};${headerStyles} ${buttonStyles} ${calenderCellStyles} & table{height:fit-content;border-collapse:separate;border-spacing:0 ${theme.sizes.xs};& td{padding:0;&:has(div[data-today='true']){& > div{border:1px solid ${theme.colors.neutral.ink.lightest};}&:has(div[data-selected]){background-color:${theme.colors.secondary.blue.base};& > div{border:1px solid ${theme.colors.secondary.blue.darkest};border-radius:${theme.radius.md};}&:has(div[data-selection-start]){border-start-start-radius:6px;border-end-start-radius:6px;}&:has(div[data-selection-end]){border-start-end-radius:6px;border-end-end-radius:6px;}}}}}`;
+
+export { SharedCalendarStyles };
+//# sourceMappingURL=CalendarStyles.js.map

package/dist/components/Calendars/components/subcomponents/CalendarStyles/CalendarStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarStyles.js","sources":["../../../../../../src/components/Calendars/components/subcomponents/CalendarStyles/CalendarStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\n\nimport { theme } from '../../../../../theme';\nimport { buttonStyles } from './buttonStyles';\nimport { calenderCellStyles } from './calendarCellStyles';\nimport { headerStyles } from './headerStyles';\n\nexport const SharedCalendarStyles = css`\n  width: fit-content;\n  max-width: 100%;\n  min-width: 225px;\n\n  color: ${theme.colors.neutral.ink.base};\n  font-size: 14px;\n  font-family: ${theme.fontFamily};\n\n  ${headerStyles}\n\n  ${buttonStyles}\n\n  ${calenderCellStyles}\n\n  & table {\n    height: fit-content;\n\n    border-collapse: separate;\n    border-spacing: 0 ${theme.sizes.xs};\n\n    & td {\n      padding: 0;\n\n      /*\n       * Selectors for today border (has to apply to wrapping td (cannot be targetted directly\n       * need to go through :has to get data attributes about the cell)).\n       */\n      &:has(div[data-today='true']) {\n        & > div {\n          border: 1px solid ${theme.colors.neutral.ink.lightest};\n        }\n\n        &:has(div[data-selected]) {\n          background-color: ${theme.colors.secondary.blue.base};\n\n          & > div {\n            border: 1px solid ${theme.colors.secondary.blue.darkest};\n            border-radius: ${theme.radius.md};\n          }\n\n          &:has(div[data-selection-start]) {\n            border-start-start-radius: 6px;\n            border-end-start-radius: 6px;\n          }\n\n          &:has(div[data-selection-end]) {\n            border-start-end-radius: 6px;\n            border-end-end-radius: 6px;\n          }\n        }\n      }\n    }\n  }\n`;\n"],"names":[],"mappings":";;;;;;AAOO,MAAM,oBAAoB,GAAG,GAAG,CAAA,CAAA,uDAAA,EAK5B,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,4BAAA,EAEvB,KAAK,CAAC,UAAU,CAAA,CAAA,EAE7B,YAAY,CAAA,CAAA,EAEZ,YAAY,CAAA,CAAA,EAEZ,kBAAkB,CAAA,sEAAA,EAME,KAAK,CAAC,KAAK,CAAC,EAAE,0EAWR,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,6CAAA,EAIjC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,0BAAA,EAG9B,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAA,eAAA,EACtC,KAAK,CAAC,MAAM,CAAC,EAAE;;;;"}

package/dist/components/Calendars/components/subcomponents/CalendarStyles/buttonStyles.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var styled = require('styled-components');
+var index = require('../../../../../theme/index.cjs');
+
+const buttonStyles = styled.css `.react-aria-Button{color:${index.theme.colors.neutral.ink.base};background-color:transparent;border-color:transparent;box-shadow:none;cursor:pointer;height:40px;padding:0 8px;border-radius:8px;font-size:16px;line-height:16px;outline:0;--outline-width:4px;svg{width:${index.theme.sizes.base};height:${index.theme.sizes.base};}&:active,&:focus-visible{box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.blue.light};}&:active,&:hover{background-color:${index.theme.colors.neutral.grey.light};}&:disabled{background-color:transparent;border-color:transparent;user-select:none;color:${index.theme.colors.neutral.grey.base};cursor:default;}}`;
+
+exports.buttonStyles = buttonStyles;
+//# sourceMappingURL=buttonStyles.cjs.map

package/dist/components/Calendars/components/subcomponents/CalendarStyles/buttonStyles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonStyles.cjs","sources":["../../../../../../src/components/Calendars/components/subcomponents/CalendarStyles/buttonStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { theme } from '../../../../../theme';\n\nexport const buttonStyles = css`\n  .react-aria-Button {\n    color: ${theme.colors.neutral.ink.base};\n    background-color: transparent;\n\n    border-color: transparent;\n    box-shadow: none;\n\n    cursor: pointer;\n\n    height: 40px;\n    padding: 0 8px;\n    border-radius: 8px;\n    font-size: 16px;\n    line-height: 16px;\n    outline: 0;\n\n    --outline-width: 4px;\n\n    svg {\n      width: ${theme.sizes.base};\n      height: ${theme.sizes.base};\n    }\n\n    &:active,\n    &:focus-visible {\n      box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n    }\n\n    &:active,\n    &:hover {\n      background-color: ${theme.colors.neutral.grey.light};\n    }\n\n    &:disabled {\n      background-color: transparent;\n      border-color: transparent;\n      user-select: none;\n      color: ${theme.colors.neutral.grey.base};\n      cursor: default;\n    }\n  }\n`;\n"],"names":["css","theme"],"mappings":";;;;;AAGO,MAAM,YAAY,GAAGA,UAAG,CAAA,CAAA,yBAAA,EAElBC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,0MAAA,EAkB3BA,WAAK,CAAC,KAAK,CAAC,IAAI,CAAA,QAAA,EACfA,WAAK,CAAC,KAAK,CAAC,IAAI,CAAA,gEAAA,EAKeA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,oCAAA,EAKtDA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,0FAAA,EAO1CA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA;;;;"}

package/dist/components/Calendars/components/subcomponents/CalendarStyles/buttonStyles.d.ts

@@ -0,0 +1 @@
+export declare const buttonStyles: import("styled-components").FlattenSimpleInterpolation;

package/dist/components/Calendars/components/subcomponents/CalendarStyles/buttonStyles.js

@@ -0,0 +1,7 @@
+import { css } from 'styled-components';
+import { theme } from '../../../../../theme/index.js';
+
+const buttonStyles = css `.react-aria-Button{color:${theme.colors.neutral.ink.base};background-color:transparent;border-color:transparent;box-shadow:none;cursor:pointer;height:40px;padding:0 8px;border-radius:8px;font-size:16px;line-height:16px;outline:0;--outline-width:4px;svg{width:${theme.sizes.base};height:${theme.sizes.base};}&:active,&:focus-visible{box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.blue.light};}&:active,&:hover{background-color:${theme.colors.neutral.grey.light};}&:disabled{background-color:transparent;border-color:transparent;user-select:none;color:${theme.colors.neutral.grey.base};cursor:default;}}`;
+
+export { buttonStyles };
+//# sourceMappingURL=buttonStyles.js.map

package/dist/components/Calendars/components/subcomponents/CalendarStyles/buttonStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonStyles.js","sources":["../../../../../../src/components/Calendars/components/subcomponents/CalendarStyles/buttonStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { theme } from '../../../../../theme';\n\nexport const buttonStyles = css`\n  .react-aria-Button {\n    color: ${theme.colors.neutral.ink.base};\n    background-color: transparent;\n\n    border-color: transparent;\n    box-shadow: none;\n\n    cursor: pointer;\n\n    height: 40px;\n    padding: 0 8px;\n    border-radius: 8px;\n    font-size: 16px;\n    line-height: 16px;\n    outline: 0;\n\n    --outline-width: 4px;\n\n    svg {\n      width: ${theme.sizes.base};\n      height: ${theme.sizes.base};\n    }\n\n    &:active,\n    &:focus-visible {\n      box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n    }\n\n    &:active,\n    &:hover {\n      background-color: ${theme.colors.neutral.grey.light};\n    }\n\n    &:disabled {\n      background-color: transparent;\n      border-color: transparent;\n      user-select: none;\n      color: ${theme.colors.neutral.grey.base};\n      cursor: default;\n    }\n  }\n`;\n"],"names":[],"mappings":";;;AAGO,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA,yBAAA,EAElB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,0MAAA,EAkB3B,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA,QAAA,EACf,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA,gEAAA,EAKe,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,oCAAA,EAKtD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,0FAAA,EAO1C,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA;;;;"}

package/dist/components/Calendars/components/subcomponents/CalendarStyles/calendarCellStyles.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var styled = require('styled-components');
+var index = require('../../../../../theme/index.cjs');
+
+const calenderCellStyles = styled.css `.react-aria-CalendarCell{width:30px;line-height:30px;border-radius:${index.theme.radius.md};border:1px solid transparent;cursor:pointer;text-align:center;&[data-hovered]{background-color:${index.theme.colors.neutral.grey.base};}&[data-focus-visible],&[data-focused]{outline:2px solid ${index.theme.colors.secondary.blue.light};}&[data-selected]{background:${index.theme.colors.secondary.blue.base};color:white;border-radius:0;&[data-focus-visible]{outline-color:${index.theme.colors.secondary.blue.light};}}&[data-outside-month],&[data-disabled]{cursor:not-allowed;}&[data-unavailable]{cursor:not-allowed;text-decoration:line-through;color:${index.theme.colors.secondary.red.dark};&:hover{background-color:inherit;}}&[data-outside-month],&[data-disabled]{color:${index.theme.colors.neutral.ink.lightest};}&[data-selection-start]{border-start-start-radius:6px;border-end-start-radius:6px;}&[data-selection-end]{border-start-end-radius:6px;border-end-end-radius:6px;}}`;
+
+exports.calenderCellStyles = calenderCellStyles;
+//# sourceMappingURL=calendarCellStyles.cjs.map

package/dist/components/Calendars/components/subcomponents/CalendarStyles/calendarCellStyles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendarCellStyles.cjs","sources":["../../../../../../src/components/Calendars/components/subcomponents/CalendarStyles/calendarCellStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { theme } from '../../../../../theme';\n\nexport const calenderCellStyles = css`\n  .react-aria-CalendarCell {\n    width: 30px;\n    line-height: 30px;\n    border-radius: ${theme.radius.md};\n    border: 1px solid transparent;\n\n    cursor: pointer;\n    text-align: center;\n\n    /**\n     * Data Attribute styling: https://react-spectrum.adobe.com/react-aria/RangeCalendar.html#calendarcell-1\n     */\n\n    &[data-hovered] {\n      background-color: ${theme.colors.neutral.grey.base};\n    }\n\n    &[data-focus-visible],\n    &[data-focused] {\n      outline: 2px solid ${theme.colors.secondary.blue.light};\n    }\n\n    /**\n     * Selection Styles\n     */\n\n    &[data-selected] {\n      background: ${theme.colors.secondary.blue.base};\n      color: white;\n      border-radius: 0;\n\n      &[data-focus-visible] {\n        outline-color: ${theme.colors.secondary.blue.light};\n      }\n    }\n\n    &[data-outside-month],\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n\n    &[data-unavailable] {\n      cursor: not-allowed;\n      text-decoration: line-through;\n      color: ${theme.colors.secondary.red.dark};\n\n      &:hover {\n        background-color: inherit;\n      }\n    }\n\n    &[data-outside-month],\n    &[data-disabled] {\n      color: ${theme.colors.neutral.ink.lightest};\n    }\n\n    // First and last selected elements.\n\n    &[data-selection-start] {\n      border-start-start-radius: 6px;\n      border-end-start-radius: 6px;\n    }\n\n    &[data-selection-end] {\n      border-start-end-radius: 6px;\n      border-end-end-radius: 6px;\n    }\n  }\n`;\n"],"names":["css","theme"],"mappings":";;;;;AAGO,MAAM,kBAAkB,GAAGA,UAAG,CAAA,CAAA,mEAAA,EAIhBC,WAAK,CAAC,MAAM,CAAC,EAAE,CAAA,gGAAA,EAWVA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,0DAAA,EAK7BA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,8BAAA,EAQxCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,iEAAA,EAK3BA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,wIAAA,EAY3CA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,oFAS/BA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;;;;"}

package/dist/components/Calendars/components/subcomponents/CalendarStyles/calendarCellStyles.d.ts

@@ -0,0 +1 @@
+export declare const calenderCellStyles: import("styled-components").FlattenSimpleInterpolation;

package/dist/components/Calendars/components/subcomponents/CalendarStyles/calendarCellStyles.js

@@ -0,0 +1,7 @@
+import { css } from 'styled-components';
+import { theme } from '../../../../../theme/index.js';
+
+const calenderCellStyles = css `.react-aria-CalendarCell{width:30px;line-height:30px;border-radius:${theme.radius.md};border:1px solid transparent;cursor:pointer;text-align:center;&[data-hovered]{background-color:${theme.colors.neutral.grey.base};}&[data-focus-visible],&[data-focused]{outline:2px solid ${theme.colors.secondary.blue.light};}&[data-selected]{background:${theme.colors.secondary.blue.base};color:white;border-radius:0;&[data-focus-visible]{outline-color:${theme.colors.secondary.blue.light};}}&[data-outside-month],&[data-disabled]{cursor:not-allowed;}&[data-unavailable]{cursor:not-allowed;text-decoration:line-through;color:${theme.colors.secondary.red.dark};&:hover{background-color:inherit;}}&[data-outside-month],&[data-disabled]{color:${theme.colors.neutral.ink.lightest};}&[data-selection-start]{border-start-start-radius:6px;border-end-start-radius:6px;}&[data-selection-end]{border-start-end-radius:6px;border-end-end-radius:6px;}}`;
+
+export { calenderCellStyles };
+//# sourceMappingURL=calendarCellStyles.js.map

package/dist/components/Calendars/components/subcomponents/CalendarStyles/calendarCellStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendarCellStyles.js","sources":["../../../../../../src/components/Calendars/components/subcomponents/CalendarStyles/calendarCellStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { theme } from '../../../../../theme';\n\nexport const calenderCellStyles = css`\n  .react-aria-CalendarCell {\n    width: 30px;\n    line-height: 30px;\n    border-radius: ${theme.radius.md};\n    border: 1px solid transparent;\n\n    cursor: pointer;\n    text-align: center;\n\n    /**\n     * Data Attribute styling: https://react-spectrum.adobe.com/react-aria/RangeCalendar.html#calendarcell-1\n     */\n\n    &[data-hovered] {\n      background-color: ${theme.colors.neutral.grey.base};\n    }\n\n    &[data-focus-visible],\n    &[data-focused] {\n      outline: 2px solid ${theme.colors.secondary.blue.light};\n    }\n\n    /**\n     * Selection Styles\n     */\n\n    &[data-selected] {\n      background: ${theme.colors.secondary.blue.base};\n      color: white;\n      border-radius: 0;\n\n      &[data-focus-visible] {\n        outline-color: ${theme.colors.secondary.blue.light};\n      }\n    }\n\n    &[data-outside-month],\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n\n    &[data-unavailable] {\n      cursor: not-allowed;\n      text-decoration: line-through;\n      color: ${theme.colors.secondary.red.dark};\n\n      &:hover {\n        background-color: inherit;\n      }\n    }\n\n    &[data-outside-month],\n    &[data-disabled] {\n      color: ${theme.colors.neutral.ink.lightest};\n    }\n\n    // First and last selected elements.\n\n    &[data-selection-start] {\n      border-start-start-radius: 6px;\n      border-end-start-radius: 6px;\n    }\n\n    &[data-selection-end] {\n      border-start-end-radius: 6px;\n      border-end-end-radius: 6px;\n    }\n  }\n`;\n"],"names":[],"mappings":";;;AAGO,MAAM,kBAAkB,GAAG,GAAG,CAAA,CAAA,mEAAA,EAIhB,KAAK,CAAC,MAAM,CAAC,EAAE,CAAA,gGAAA,EAWV,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,0DAAA,EAK7B,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,8BAAA,EAQxC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,iEAAA,EAK3B,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,wIAAA,EAY3C,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,oFAS/B,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;;;;"}

package/dist/components/Calendars/components/subcomponents/CalendarStyles/headerStyles.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var styled = require('styled-components');
+var utils = require('../../../../../theme/utils.cjs');
+var index = require('../../../../../theme/index.cjs');
+
+const headerStyles = styled.css `& header{display:flex;align-items:center;margin:0 4px 0.5rem 4px;.react-aria-Heading{flex:1;margin:0;text-align:center;${utils.getTextStyles(index.theme.text.headingSmall)}}}.react-aria-CalendarHeaderCell{padding-bottom:${index.theme.sizes.sm};}`;
+
+exports.headerStyles = headerStyles;
+//# sourceMappingURL=headerStyles.cjs.map

package/dist/components/Calendars/components/subcomponents/CalendarStyles/headerStyles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"headerStyles.cjs","sources":["../../../../../../src/components/Calendars/components/subcomponents/CalendarStyles/headerStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { getTextStyles } from 'Theme/utils';\nimport { theme } from 'Theme';\n\nexport const headerStyles = css`\n  & header {\n    display: flex;\n    align-items: center;\n    margin: 0 4px 0.5rem 4px;\n\n    .react-aria-Heading {\n      flex: 1;\n      margin: 0;\n      text-align: center;\n\n      ${getTextStyles(theme.text.headingSmall)}\n    }\n  }\n\n  .react-aria-CalendarHeaderCell {\n    padding-bottom: ${theme.sizes.sm};\n  }\n`;\n"],"names":["css","getTextStyles","theme"],"mappings":";;;;;;MAIa,YAAY,GAAGA,UAAG,CAAA,CAAA,uHAAA,EAWvBC,mBAAa,CAACC,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA,gDAAA,EAKxBA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,EAAA;;;;"}

package/dist/components/Calendars/components/subcomponents/CalendarStyles/headerStyles.d.ts

@@ -0,0 +1 @@
+export declare const headerStyles: import("styled-components").FlattenSimpleInterpolation;

package/dist/components/Calendars/components/subcomponents/CalendarStyles/headerStyles.js

@@ -0,0 +1,8 @@
+import { css } from 'styled-components';
+import { getTextStyles } from '../../../../../theme/utils.js';
+import { theme } from '../../../../../theme/index.js';
+
+const headerStyles = css `& header{display:flex;align-items:center;margin:0 4px 0.5rem 4px;.react-aria-Heading{flex:1;margin:0;text-align:center;${getTextStyles(theme.text.headingSmall)}}}.react-aria-CalendarHeaderCell{padding-bottom:${theme.sizes.sm};}`;
+
+export { headerStyles };
+//# sourceMappingURL=headerStyles.js.map

package/dist/components/Calendars/components/subcomponents/CalendarStyles/headerStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"headerStyles.js","sources":["../../../../../../src/components/Calendars/components/subcomponents/CalendarStyles/headerStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { getTextStyles } from 'Theme/utils';\nimport { theme } from 'Theme';\n\nexport const headerStyles = css`\n  & header {\n    display: flex;\n    align-items: center;\n    margin: 0 4px 0.5rem 4px;\n\n    .react-aria-Heading {\n      flex: 1;\n      margin: 0;\n      text-align: center;\n\n      ${getTextStyles(theme.text.headingSmall)}\n    }\n  }\n\n  .react-aria-CalendarHeaderCell {\n    padding-bottom: ${theme.sizes.sm};\n  }\n`;\n"],"names":[],"mappings":";;;;MAIa,YAAY,GAAG,GAAG,CAAA,CAAA,uHAAA,EAWvB,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA,gDAAA,EAKxB,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,EAAA;;;;"}

package/dist/components/Calendars/components/subcomponents/CalendarStyles/index.d.ts

@@ -0,0 +1 @@
+export { SharedCalendarStyles } from './CalendarStyles';

package/dist/components/CardHeader/CardHeader.cjs

@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const CardHeader = ({ id, title, subtitle, titleSlot, headerVariant = 'headingSmall', action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }) => (React__default.default.createElement("header", { className: CardHeader_module.header },
-    React__default.default.createElement("div", { className: CardHeader_module.headerGrid },
+    React__default.default.createElement("div", { className: CardHeader_module.headerActions },
         titleSlot || (React__default.default.createElement(Text.Text, { id: id, variant: headerVariant }, title)),
         action && (React__default.default.createElement(Button.Button, { variant: "link", onClick: action.onClick }, action.title)),
         actionSlot,

package/dist/components/CardHeader/CardHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.cjs","sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport styles from './CardHeader.module.scss';\nimport { HeaderVariant } from '../Text/types';\nimport { DownArrowIcon, UpArrowIcon, CrossIcon } from '../../icons';\n\ntype CardHeaderAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport interface CardHeaderProps {\n  id?: string;\n  title?: string;\n  subtitle?: string;\n  titleSlot?: React.ReactNode;\n  headerVariant?: HeaderVariant;\n  action?: CardHeaderAction;\n  actionSlot?: React.ReactNode;\n  isCollapsed?: boolean;\n  onClickCollapse?: () => void;\n  onClickClose?: () => void;\n}\n\nexport const CardHeader = ({\n  id,\n  title,\n  subtitle,\n  titleSlot,\n  headerVariant = 'headingSmall',\n  action,\n  actionSlot,\n  isCollapsed,\n  onClickCollapse,\n  onClickClose,\n}: CardHeaderProps) => (\n  <header className={styles.header}>\n    <div className={styles.headerGrid}>\n      {titleSlot || (\n        <Text id={id} variant={headerVariant}>\n          {title}\n        </Text>\n      )}\n      {action && (\n        <Button variant=\"link\" onClick={action.onClick}>\n          {action.title}\n        </Button>\n      )}\n      {actionSlot}\n      {onClickCollapse && (\n        <Button\n          variant=\"flat\"\n          iconSlot={isCollapsed ? <DownArrowIcon /> : <UpArrowIcon />}\n          onClick={onClickCollapse}\n        />\n      )}\n      {onClickClose && (\n        <Button\n          variant=\"flat\"\n          iconSlot={<CrossIcon />}\n          onClick={onClickClose}\n          aria-label=\"Close\"\n          type=\"button\"\n        />\n      )}\n    </div>\n    {subtitle && <Text variant=\"subheadingSmall\">{subtitle}</Text>}\n  </header>\n);\n"],"names":["React","styles","Text","Button","DownArrowIcon","UpArrowIcon","CrossIcon"],"mappings":";;;;;;;;;;;;;;AA0BO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,cAAc,EAC9B,MAAM,EACN,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACI,MAChBA,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAEC,iBAAM,CAAC,MAAM,EAAA;AAC9B,IAAAD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,iBAAM,CAAC,UAAU,EAAA;AAC9B,QAAA,SAAS,KACRD,sBAAA,CAAA,aAAA,CAACE,SAAI,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAA,EACjC,KAAK,CACD,CACR;AACA,QAAA,MAAM,KACLF,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdH,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,WAAW,GAAGH,sBAAA,CAAA,aAAA,CAACI,4BAAa,EAAA,IAAA,CAAG,GAAGJ,sBAAA,CAAA,aAAA,CAACK,0BAAW,EAAA,IAAA,CAAG,EAC3D,OAAO,EAAE,eAAe,GACxB,CACH;QACA,YAAY,KACXL,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEH,sBAAA,CAAA,aAAA,CAACM,wBAAS,OAAG,EACvB,OAAO,EAAE,YAAY,EAAA,YAAA,EACV,OAAO,EAClB,IAAI,EAAC,QAAQ,EAAA,CACb,CACH,CACG;AACL,IAAA,QAAQ,IAAIN,sBAAA,CAAA,aAAA,CAACE,SAAI,EAAA,EAAC,OAAO,EAAC,iBAAiB,EAAA,EAAE,QAAQ,CAAQ,CACvD;;;;"}
+{"version":3,"file":"CardHeader.cjs","sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport styles from './CardHeader.module.scss';\nimport { HeaderVariant } from '../Text/types';\nimport { DownArrowIcon, UpArrowIcon, CrossIcon } from '../../icons';\n\ntype CardHeaderAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport interface CardHeaderProps {\n  id?: string;\n  title?: string;\n  subtitle?: string;\n  titleSlot?: React.ReactNode;\n  headerVariant?: HeaderVariant;\n  action?: CardHeaderAction;\n  actionSlot?: React.ReactNode;\n  isCollapsed?: boolean;\n  onClickCollapse?: () => void;\n  onClickClose?: () => void;\n}\n\nexport const CardHeader = ({\n  id,\n  title,\n  subtitle,\n  titleSlot,\n  headerVariant = 'headingSmall',\n  action,\n  actionSlot,\n  isCollapsed,\n  onClickCollapse,\n  onClickClose,\n}: CardHeaderProps) => (\n  <header className={styles.header}>\n    <div className={styles.headerActions}>\n      {titleSlot || (\n        <Text id={id} variant={headerVariant}>\n          {title}\n        </Text>\n      )}\n      {action && (\n        <Button variant=\"link\" onClick={action.onClick}>\n          {action.title}\n        </Button>\n      )}\n      {actionSlot}\n      {onClickCollapse && (\n        <Button\n          variant=\"flat\"\n          iconSlot={isCollapsed ? <DownArrowIcon /> : <UpArrowIcon />}\n          onClick={onClickCollapse}\n        />\n      )}\n      {onClickClose && (\n        <Button\n          variant=\"flat\"\n          iconSlot={<CrossIcon />}\n          onClick={onClickClose}\n          aria-label=\"Close\"\n          type=\"button\"\n        />\n      )}\n    </div>\n    {subtitle && <Text variant=\"subheadingSmall\">{subtitle}</Text>}\n  </header>\n);\n"],"names":["React","styles","Text","Button","DownArrowIcon","UpArrowIcon","CrossIcon"],"mappings":";;;;;;;;;;;;;;AA0BO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,cAAc,EAC9B,MAAM,EACN,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACI,MAChBA,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAEC,iBAAM,CAAC,MAAM,EAAA;AAC9B,IAAAD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,iBAAM,CAAC,aAAa,EAAA;AACjC,QAAA,SAAS,KACRD,sBAAA,CAAA,aAAA,CAACE,SAAI,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAA,EACjC,KAAK,CACD,CACR;AACA,QAAA,MAAM,KACLF,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdH,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,WAAW,GAAGH,sBAAA,CAAA,aAAA,CAACI,4BAAa,EAAA,IAAA,CAAG,GAAGJ,sBAAA,CAAA,aAAA,CAACK,0BAAW,EAAA,IAAA,CAAG,EAC3D,OAAO,EAAE,eAAe,GACxB,CACH;QACA,YAAY,KACXL,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEH,sBAAA,CAAA,aAAA,CAACM,wBAAS,OAAG,EACvB,OAAO,EAAE,YAAY,EAAA,YAAA,EACV,OAAO,EAClB,IAAI,EAAC,QAAQ,EAAA,CACb,CACH,CACG;AACL,IAAA,QAAQ,IAAIN,sBAAA,CAAA,aAAA,CAACE,SAAI,EAAA,EAAC,OAAO,EAAC,iBAAiB,EAAA,EAAE,QAAQ,CAAQ,CACvD;;;;"}

package/dist/components/CardHeader/CardHeader.js

@@ -7,7 +7,7 @@ import { ReactComponent as DownArrowIcon } from '../../icons/design-system/compo
 import { ReactComponent as UpArrowIcon } from '../../icons/design-system/components/UpArrowIcon.js';
 
 const CardHeader = ({ id, title, subtitle, titleSlot, headerVariant = 'headingSmall', action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }) => (React__default.createElement("header", { className: styles.header },
-    React__default.createElement("div", { className: styles.headerGrid },
+    React__default.createElement("div", { className: styles.headerActions },
         titleSlot || (React__default.createElement(Text, { id: id, variant: headerVariant }, title)),
         action && (React__default.createElement(Button, { variant: "link", onClick: action.onClick }, action.title)),
         actionSlot,

package/dist/components/CardHeader/CardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.js","sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport styles from './CardHeader.module.scss';\nimport { HeaderVariant } from '../Text/types';\nimport { DownArrowIcon, UpArrowIcon, CrossIcon } from '../../icons';\n\ntype CardHeaderAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport interface CardHeaderProps {\n  id?: string;\n  title?: string;\n  subtitle?: string;\n  titleSlot?: React.ReactNode;\n  headerVariant?: HeaderVariant;\n  action?: CardHeaderAction;\n  actionSlot?: React.ReactNode;\n  isCollapsed?: boolean;\n  onClickCollapse?: () => void;\n  onClickClose?: () => void;\n}\n\nexport const CardHeader = ({\n  id,\n  title,\n  subtitle,\n  titleSlot,\n  headerVariant = 'headingSmall',\n  action,\n  actionSlot,\n  isCollapsed,\n  onClickCollapse,\n  onClickClose,\n}: CardHeaderProps) => (\n  <header className={styles.header}>\n    <div className={styles.headerGrid}>\n      {titleSlot || (\n        <Text id={id} variant={headerVariant}>\n          {title}\n        </Text>\n      )}\n      {action && (\n        <Button variant=\"link\" onClick={action.onClick}>\n          {action.title}\n        </Button>\n      )}\n      {actionSlot}\n      {onClickCollapse && (\n        <Button\n          variant=\"flat\"\n          iconSlot={isCollapsed ? <DownArrowIcon /> : <UpArrowIcon />}\n          onClick={onClickCollapse}\n        />\n      )}\n      {onClickClose && (\n        <Button\n          variant=\"flat\"\n          iconSlot={<CrossIcon />}\n          onClick={onClickClose}\n          aria-label=\"Close\"\n          type=\"button\"\n        />\n      )}\n    </div>\n    {subtitle && <Text variant=\"subheadingSmall\">{subtitle}</Text>}\n  </header>\n);\n"],"names":["React"],"mappings":";;;;;;;;AA0BO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,cAAc,EAC9B,MAAM,EACN,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACI,MAChBA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAE,MAAM,CAAC,MAAM,EAAA;AAC9B,IAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,UAAU,EAAA;AAC9B,QAAA,SAAS,KACRA,cAAA,CAAA,aAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAA,EACjC,KAAK,CACD,CACR;AACA,QAAA,MAAM,KACLA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,WAAW,GAAGA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA,CAAG,GAAGA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA,CAAG,EAC3D,OAAO,EAAE,eAAe,GACxB,CACH;QACA,YAAY,KACXA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,OAAG,EACvB,OAAO,EAAE,YAAY,EAAA,YAAA,EACV,OAAO,EAClB,IAAI,EAAC,QAAQ,EAAA,CACb,CACH,CACG;AACL,IAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,iBAAiB,EAAA,EAAE,QAAQ,CAAQ,CACvD;;;;"}
+{"version":3,"file":"CardHeader.js","sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport styles from './CardHeader.module.scss';\nimport { HeaderVariant } from '../Text/types';\nimport { DownArrowIcon, UpArrowIcon, CrossIcon } from '../../icons';\n\ntype CardHeaderAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport interface CardHeaderProps {\n  id?: string;\n  title?: string;\n  subtitle?: string;\n  titleSlot?: React.ReactNode;\n  headerVariant?: HeaderVariant;\n  action?: CardHeaderAction;\n  actionSlot?: React.ReactNode;\n  isCollapsed?: boolean;\n  onClickCollapse?: () => void;\n  onClickClose?: () => void;\n}\n\nexport const CardHeader = ({\n  id,\n  title,\n  subtitle,\n  titleSlot,\n  headerVariant = 'headingSmall',\n  action,\n  actionSlot,\n  isCollapsed,\n  onClickCollapse,\n  onClickClose,\n}: CardHeaderProps) => (\n  <header className={styles.header}>\n    <div className={styles.headerActions}>\n      {titleSlot || (\n        <Text id={id} variant={headerVariant}>\n          {title}\n        </Text>\n      )}\n      {action && (\n        <Button variant=\"link\" onClick={action.onClick}>\n          {action.title}\n        </Button>\n      )}\n      {actionSlot}\n      {onClickCollapse && (\n        <Button\n          variant=\"flat\"\n          iconSlot={isCollapsed ? <DownArrowIcon /> : <UpArrowIcon />}\n          onClick={onClickCollapse}\n        />\n      )}\n      {onClickClose && (\n        <Button\n          variant=\"flat\"\n          iconSlot={<CrossIcon />}\n          onClick={onClickClose}\n          aria-label=\"Close\"\n          type=\"button\"\n        />\n      )}\n    </div>\n    {subtitle && <Text variant=\"subheadingSmall\">{subtitle}</Text>}\n  </header>\n);\n"],"names":["React"],"mappings":";;;;;;;;AA0BO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,cAAc,EAC9B,MAAM,EACN,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACI,MAChBA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAE,MAAM,CAAC,MAAM,EAAA;AAC9B,IAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,aAAa,EAAA;AACjC,QAAA,SAAS,KACRA,cAAA,CAAA,aAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAA,EACjC,KAAK,CACD,CACR;AACA,QAAA,MAAM,KACLA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,WAAW,GAAGA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA,CAAG,GAAGA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA,CAAG,EAC3D,OAAO,EAAE,eAAe,GACxB,CACH;QACA,YAAY,KACXA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,OAAG,EACvB,OAAO,EAAE,YAAY,EAAA,YAAA,EACV,OAAO,EAClB,IAAI,EAAC,QAAQ,EAAA,CACb,CACH,CACG;AACL,IAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,iBAAiB,EAAA,EAAE,QAAQ,CAAQ,CACvD;;;;"}

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

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._header_pke2d_1 {\n  padding-top: var(--sizes-md);\n  padding-right: var(--sizes-md);\n  padding-left: var(--sizes-md);\n  margin-bottom: var(--sizes-md);\n}\n._header_pke2d_1 > * + * {\n  margin-top: var(--sizes-xs);\n}\n\n._headerGrid_pke2d_11 {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n._headerGrid_pke2d_11 > *:first-child {\n  flex: 1;\n}");
-var styles = {"header":"_header_pke2d_1","headerGrid":"_headerGrid_pke2d_11"};
+___$insertStyle("._header_176rk_1 {\n  padding-top: var(--sizes-md);\n  padding-right: var(--sizes-md);\n  padding-left: var(--sizes-md);\n  margin-bottom: var(--sizes-md);\n}\n._header_176rk_1 > * + * {\n  margin-top: var(--sizes-xs);\n}\n\n._headerActions_176rk_11 {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n._headerActions_176rk_11 > *:first-child {\n  flex: 1;\n}");
+var styles = {"header":"_header_176rk_1","headerActions":"_headerActions_176rk_11"};
 
 module.exports = styles;
 //# sourceMappingURL=CardHeader.module.scss.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.module.scss.cjs","sources":["../../../src/components/CardHeader/CardHeader.module.scss"],"sourcesContent":[".header {\n  padding-top: var(--sizes-md);\n  padding-right: var(--sizes-md);\n  padding-left: var(--sizes-md);\n  margin-bottom: var(--sizes-md);\n\n  & > * + * {\n    margin-top: var(--sizes-xs);\n  }\n}\n\n.headerGrid {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n\n  & > *:first-child {\n    flex: 1;\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,6XAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA;;;;"}
+{"version":3,"file":"CardHeader.module.scss.cjs","sources":["../../../src/components/CardHeader/CardHeader.module.scss"],"sourcesContent":[".header {\n  padding-top: var(--sizes-md);\n  padding-right: var(--sizes-md);\n  padding-left: var(--sizes-md);\n  margin-bottom: var(--sizes-md);\n\n  & > * + * {\n    margin-top: var(--sizes-xs);\n  }\n}\n\n.headerActions {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n\n  & > *:first-child {\n    flex: 1;\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,mYAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,eAAA,CAAA,yBAAA;;;;"}

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

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._header_pke2d_1 {\n  padding-top: var(--sizes-md);\n  padding-right: var(--sizes-md);\n  padding-left: var(--sizes-md);\n  margin-bottom: var(--sizes-md);\n}\n._header_pke2d_1 > * + * {\n  margin-top: var(--sizes-xs);\n}\n\n._headerGrid_pke2d_11 {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n._headerGrid_pke2d_11 > *:first-child {\n  flex: 1;\n}");
-var styles = {"header":"_header_pke2d_1","headerGrid":"_headerGrid_pke2d_11"};
+insertStyle("._header_176rk_1 {\n  padding-top: var(--sizes-md);\n  padding-right: var(--sizes-md);\n  padding-left: var(--sizes-md);\n  margin-bottom: var(--sizes-md);\n}\n._header_176rk_1 > * + * {\n  margin-top: var(--sizes-xs);\n}\n\n._headerActions_176rk_11 {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n._headerActions_176rk_11 > *:first-child {\n  flex: 1;\n}");
+var styles = {"header":"_header_176rk_1","headerActions":"_headerActions_176rk_11"};
 
 export { styles as default };
 //# sourceMappingURL=CardHeader.module.scss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.module.scss.js","sources":["../../../src/components/CardHeader/CardHeader.module.scss"],"sourcesContent":[".header {\n  padding-top: var(--sizes-md);\n  padding-right: var(--sizes-md);\n  padding-left: var(--sizes-md);\n  margin-bottom: var(--sizes-md);\n\n  & > * + * {\n    margin-top: var(--sizes-xs);\n  }\n}\n\n.headerGrid {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n\n  & > *:first-child {\n    flex: 1;\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,6XAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA;;;;"}
+{"version":3,"file":"CardHeader.module.scss.js","sources":["../../../src/components/CardHeader/CardHeader.module.scss"],"sourcesContent":[".header {\n  padding-top: var(--sizes-md);\n  padding-right: var(--sizes-md);\n  padding-left: var(--sizes-md);\n  margin-bottom: var(--sizes-md);\n\n  & > * + * {\n    margin-top: var(--sizes-xs);\n  }\n}\n\n.headerActions {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n\n  & > *:first-child {\n    flex: 1;\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,mYAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,eAAA,CAAA,yBAAA;;;;"}

package/dist/components/CopyToClipboard/CopyToClipboard.cjs

@@ -1,20 +1,25 @@
 'use strict';
 
 var React = require('react');
+var styled = require('styled-components');
 var Tooltip = require('../Tooltip/Tooltip.cjs');
 var colors = require('../../theme/modules/colors.cjs');
 var ClipboardIcon = require('../../icons/design-system/components/ClipboardIcon.cjs');
 var SuccessIcon = require('../../icons/design-system/components/SuccessIcon.cjs');
 var sizes = require('../../theme/modules/sizes.cjs');
 var Button = require('../Button/Button.cjs');
-var buildClassnames = require('../../utils/buildClassnames.cjs');
-var CopyToClipboard_module = require('./CopyToClipboard.module.scss.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 iconSizes = { width: sizes.sizes.base, height: sizes.sizes.base };
+/**
+ * Created in here to fix orders table sizes. Bad pattern to use in main button component, as
+ * touch target is below A11y guidelines.
+ */
+const XSButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--XSButton", componentId: "vui--e6p1xr" }) `padding:1px;height:unset;span{height:${sizes.sizes.base};width:${sizes.sizes.base};top:unset;}`;
 /**
  * A dynamic button to facilitate copying text to a users' keyboard when clicked.
  */
@@ -28,7 +33,7 @@ const CopyToClipboard = ({ className, text, onCopy }) => {
         setTimeout(() => setCopied(false), 2500);
     }, [onCopy, text]);
     return (React__default.default.createElement(Tooltip.Tooltip, { text: copied ? 'Copied!' : 'Copy to clipboard' },
-        React__default.default.createElement(Button.Button, { variant: "flat", size: "sm", className: buildClassnames.buildClassnames([CopyToClipboard_module.xsButton, className]), "aria-label": `${copied ? 'Copied' : 'Copy'} "${text}" to clipboard`, iconSlot: copied ? (React__default.default.createElement(SuccessIcon.ReactComponent, { color: colors.colors.secondary.green.base, ...iconSizes })) : (React__default.default.createElement(ClipboardIcon.ReactComponent, { color: colors.colors.secondary.blue.base, ...iconSizes })), onClick: handleCopy })));
+        React__default.default.createElement(XSButton, { variant: "flat", size: "sm", className: className, "aria-label": `${copied ? 'Copied' : 'Copy'} "${text}" to clipboard`, iconSlot: copied ? (React__default.default.createElement(SuccessIcon.ReactComponent, { color: colors.colors.secondary.green.base, ...iconSizes })) : (React__default.default.createElement(ClipboardIcon.ReactComponent, { color: colors.colors.secondary.blue.base, ...iconSizes })), onClick: handleCopy })));
 };
 
 exports.CopyToClipboard = CopyToClipboard;

package/dist/components/CopyToClipboard/CopyToClipboard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboard.cjs","sources":["../../../src/components/CopyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { Tooltip } from '../Tooltip';\nimport { colors } from '../../theme/modules/colors';\nimport { SuccessIcon, ClipboardIcon } from '../../icons';\nimport { sizes } from '../../theme/modules/sizes';\nimport { Button } from '../Button';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport styles from './CopyToClipboard.module.scss';\n\nexport interface CopyToClipboardProps {\n  className?: string;\n  text: string;\n  onCopy?: () => void;\n}\n\nconst iconSizes = { width: sizes.base, height: sizes.base };\n\n/**\n * A dynamic button to facilitate copying text to a users' keyboard when clicked.\n */\nexport const CopyToClipboard = ({ className, text, onCopy }: CopyToClipboardProps) => {\n  const [copied, setCopied] = React.useState(false);\n\n  const handleCopy = useCallback(() => {\n    navigator.clipboard.writeText(text);\n    if (onCopy) onCopy();\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2500);\n  }, [onCopy, text]);\n\n  return (\n    <Tooltip text={copied ? 'Copied!' : 'Copy to clipboard'}>\n      <Button\n        variant=\"flat\"\n        size=\"sm\"\n        className={buildClassnames([styles.xsButton, className])}\n        aria-label={`${copied ? 'Copied' : 'Copy'} \"${text}\" to clipboard`}\n        iconSlot={\n          copied ? (\n            <SuccessIcon color={colors.secondary.green.base} {...iconSizes} />\n          ) : (\n            <ClipboardIcon color={colors.secondary.blue.base} {...iconSizes} />\n          )\n        }\n        onClick={handleCopy}\n      />\n    </Tooltip>\n  );\n};\n"],"names":["sizes","React","useCallback","Tooltip","Button","buildClassnames","styles","SuccessIcon","colors","ClipboardIcon"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAM,SAAS,GAAG,EAAE,KAAK,EAAEA,WAAK,CAAC,IAAI,EAAE,MAAM,EAAEA,WAAK,CAAC,IAAI,EAAE;AAE3D;;AAEG;AACI,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAwB,KAAI;AACnF,IAAA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGC,sBAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;AAEjD,IAAA,MAAM,UAAU,GAAGC,iBAAW,CAAC,MAAK;AAClC,QAAA,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;AACnC,QAAA,IAAI,MAAM;AAAE,YAAA,MAAM,EAAE;QACpB,SAAS,CAAC,IAAI,CAAC;QACf,UAAU,CAAC,MAAM,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;AAC1C,IAAA,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;AAElB,IAAA,QACED,sBAAA,CAAA,aAAA,CAACE,eAAO,EAAA,EAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,mBAAmB,EAAA;AACrD,QAAAF,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,SAAS,EAAEC,+BAAe,CAAC,CAACC,sBAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,gBAC5C,CAAA,EAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA,EAAA,EAAK,IAAI,CAAA,cAAA,CAAgB,EAClE,QAAQ,EACN,MAAM,IACJL,sBAAA,CAAA,aAAA,CAACM,0BAAW,EAAA,EAAC,KAAK,EAAEC,aAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAA,GAAM,SAAS,EAAA,CAAI,KAElEP,sBAAA,CAAA,aAAA,CAACQ,4BAAa,EAAA,EAAC,KAAK,EAAED,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAA,GAAM,SAAS,EAAA,CAAI,CACpE,EAEH,OAAO,EAAE,UAAU,EAAA,CACnB,CACM;AAEd;;;;"}
+{"version":3,"file":"CopyToClipboard.cjs","sources":["../../../src/components/CopyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport styled from 'styled-components';\nimport { Tooltip } from '../Tooltip';\nimport { colors } from '../../theme/modules/colors';\nimport { SuccessIcon, ClipboardIcon } from '../../icons';\nimport { sizes } from '../../theme/modules/sizes';\nimport { Button } from '../Button';\n\nexport interface CopyToClipboardProps {\n  className?: string;\n  text: string;\n  onCopy?: () => void;\n}\n\nconst iconSizes = { width: sizes.base, height: sizes.base };\n\n/**\n * Created in here to fix orders table sizes. Bad pattern to use in main button component, as\n * touch target is below A11y guidelines.\n */\nconst XSButton = styled(Button)`\n  padding: 1px;\n  height: unset;\n\n  span {\n    height: ${sizes.base};\n    width: ${sizes.base};\n    top: unset;\n  }\n`;\n\n/**\n * A dynamic button to facilitate copying text to a users' keyboard when clicked.\n */\nexport const CopyToClipboard = ({ className, text, onCopy }: CopyToClipboardProps) => {\n  const [copied, setCopied] = React.useState(false);\n\n  const handleCopy = useCallback(() => {\n    navigator.clipboard.writeText(text);\n    if (onCopy) onCopy();\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2500);\n  }, [onCopy, text]);\n\n  return (\n    <Tooltip text={copied ? 'Copied!' : 'Copy to clipboard'}>\n      <XSButton\n        variant=\"flat\"\n        size=\"sm\"\n        className={className}\n        aria-label={`${copied ? 'Copied' : 'Copy'} \"${text}\" to clipboard`}\n        iconSlot={\n          copied ? (\n            <SuccessIcon color={colors.secondary.green.base} {...iconSizes} />\n          ) : (\n            <ClipboardIcon color={colors.secondary.blue.base} {...iconSizes} />\n          )\n        }\n        onClick={handleCopy}\n      />\n    </Tooltip>\n  );\n};\n"],"names":["sizes","styled","Button","React","useCallback","Tooltip","SuccessIcon","colors","ClipboardIcon"],"mappings":";;;;;;;;;;;;;;;;AAeA,MAAM,SAAS,GAAG,EAAE,KAAK,EAAEA,WAAK,CAAC,IAAI,EAAE,MAAM,EAAEA,WAAK,CAAC,IAAI,EAAE;AAE3D;;;AAGG;AACH,MAAM,QAAQ,GAAGC,uBAAM,CAACC,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qCAAA,EAKjBF,WAAK,CAAC,IAAI,CAAA,OAAA,EACXA,WAAK,CAAC,IAAI,cAGtB;AAED;;AAEG;AACI,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAwB,KAAI;AACnF,IAAA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGG,sBAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;AAEjD,IAAA,MAAM,UAAU,GAAGC,iBAAW,CAAC,MAAK;AAClC,QAAA,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;AACnC,QAAA,IAAI,MAAM;AAAE,YAAA,MAAM,EAAE;QACpB,SAAS,CAAC,IAAI,CAAC;QACf,UAAU,CAAC,MAAM,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;AAC1C,IAAA,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;AAElB,IAAA,QACED,sBAAA,CAAA,aAAA,CAACE,eAAO,EAAA,EAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,mBAAmB,EAAA;AACrD,QAAAF,sBAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACP,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,SAAS,EAAE,SAAS,EAAA,YAAA,EACR,CAAA,EAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA,EAAA,EAAK,IAAI,CAAA,cAAA,CAAgB,EAClE,QAAQ,EACN,MAAM,IACJA,sBAAA,CAAA,aAAA,CAACG,0BAAW,EAAA,EAAC,KAAK,EAAEC,aAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAA,GAAM,SAAS,EAAA,CAAI,KAElEJ,sBAAA,CAAA,aAAA,CAACK,4BAAa,EAAA,EAAC,KAAK,EAAED,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAA,GAAM,SAAS,EAAA,CAAI,CACpE,EAEH,OAAO,EAAE,UAAU,EAAA,CACnB,CACM;AAEd;;;;"}