@veeqo/ui 14.11.0-beta-4 → 14.11.1-beta-3

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._heading-xxl_12ds0_1 {\n  font-family: var(--text-heading-xxl-font-family);\n  font-style: var(--text-heading-xxl-font-style);\n  font-weight: var(--text-heading-xxl-font-weight);\n  font-size: var(--text-heading-xxl-font-size);\n  line-height: var(--text-heading-xxl-line-height);\n  color: var(--text-heading-xxl-color);\n  text-decoration: var(--text-heading-xxl-text-decoration);\n  letter-spacing: var(--text-heading-xxl-letter-spacing);\n}\n\n._heading-xl_12ds0_12 {\n  font-family: var(--text-heading-xl-font-family);\n  font-style: var(--text-heading-xl-font-style);\n  font-weight: var(--text-heading-xl-font-weight);\n  font-size: var(--text-heading-xl-font-size);\n  line-height: var(--text-heading-xl-line-height);\n  color: var(--text-heading-xl-color);\n  text-decoration: var(--text-heading-xl-text-decoration);\n  letter-spacing: var(--text-heading-xl-letter-spacing);\n}\n\n._heading-large_12ds0_23 {\n  font-family: var(--text-heading-large-font-family);\n  font-style: var(--text-heading-large-font-style);\n  font-weight: var(--text-heading-large-font-weight);\n  font-size: var(--text-heading-large-font-size);\n  line-height: var(--text-heading-large-line-height);\n  color: var(--text-heading-large-color);\n  text-decoration: var(--text-heading-large-text-decoration);\n  letter-spacing: var(--text-heading-large-letter-spacing);\n}\n\n._heading-medium_12ds0_34 {\n  font-family: var(--text-heading-medium-font-family);\n  font-style: var(--text-heading-medium-font-style);\n  font-weight: var(--text-heading-medium-font-weight);\n  font-size: var(--text-heading-medium-font-size);\n  line-height: var(--text-heading-medium-line-height);\n  color: var(--text-heading-medium-color);\n  text-decoration: var(--text-heading-medium-text-decoration);\n  letter-spacing: var(--text-heading-medium-letter-spacing);\n}\n\n._heading-small_12ds0_45 {\n  font-family: var(--text-heading-small-font-family);\n  font-style: var(--text-heading-small-font-style);\n  font-weight: var(--text-heading-small-font-weight);\n  font-size: var(--text-heading-small-font-size);\n  line-height: var(--text-heading-small-line-height);\n  color: var(--text-heading-small-color);\n  text-decoration: var(--text-heading-small-text-decoration);\n  letter-spacing: var(--text-heading-small-letter-spacing);\n}\n\n._heading-table_12ds0_56 {\n  font-family: var(--text-heading-table-font-family);\n  font-style: var(--text-heading-table-font-style);\n  font-weight: var(--text-heading-table-font-weight);\n  font-size: var(--text-heading-table-font-size);\n  line-height: var(--text-heading-table-line-height);\n  color: var(--text-heading-table-color);\n  text-decoration: var(--text-heading-table-text-decoration);\n  letter-spacing: var(--text-heading-table-letter-spacing);\n}\n\n._subheading-large_12ds0_67 {\n  font-family: var(--text-subheading-large-font-family);\n  font-style: var(--text-subheading-large-font-style);\n  font-weight: var(--text-subheading-large-font-weight);\n  font-size: var(--text-subheading-large-font-size);\n  line-height: var(--text-subheading-large-line-height);\n  color: var(--text-subheading-large-color);\n  text-decoration: var(--text-subheading-large-text-decoration);\n  letter-spacing: var(--text-subheading-large-letter-spacing);\n}\n\n._subheading-medium_12ds0_78 {\n  font-family: var(--text-subheading-medium-font-family);\n  font-style: var(--text-subheading-medium-font-style);\n  font-weight: var(--text-subheading-medium-font-weight);\n  font-size: var(--text-subheading-medium-font-size);\n  line-height: var(--text-subheading-medium-line-height);\n  color: var(--text-subheading-medium-color);\n  text-decoration: var(--text-subheading-medium-text-decoration);\n  letter-spacing: var(--text-subheading-medium-letter-spacing);\n}\n\n._subheading-small_12ds0_89 {\n  font-family: var(--text-subheading-small-font-family);\n  font-style: var(--text-subheading-small-font-style);\n  font-weight: var(--text-subheading-small-font-weight);\n  font-size: var(--text-subheading-small-font-size);\n  line-height: var(--text-subheading-small-line-height);\n  color: var(--text-subheading-small-color);\n  text-decoration: var(--text-subheading-small-text-decoration);\n  letter-spacing: var(--text-subheading-small-letter-spacing);\n}\n\n._subheading-small-bold_12ds0_100 {\n  font-family: var(--text-subheading-small-bold-font-family);\n  font-style: var(--text-subheading-small-bold-font-style);\n  font-weight: var(--text-subheading-small-bold-font-weight);\n  font-size: var(--text-subheading-small-bold-font-size);\n  line-height: var(--text-subheading-small-bold-line-height);\n  color: var(--text-subheading-small-bold-color);\n  text-decoration: var(--text-subheading-small-bold-text-decoration);\n  letter-spacing: var(--text-subheading-small-bold-letter-spacing);\n}\n\n._body_12ds0_111 {\n  font-family: var(--text-body-font-family);\n  font-style: var(--text-body-font-style);\n  font-weight: var(--text-body-font-weight);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n  text-decoration: var(--text-body-text-decoration);\n  letter-spacing: var(--text-body-letter-spacing);\n}\n\n._body-small_12ds0_122 {\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  font-size: var(--text-body-small-font-size);\n  line-height: var(--text-body-small-line-height);\n  color: var(--text-body-small-color);\n  text-decoration: var(--text-body-small-text-decoration);\n  letter-spacing: var(--text-body-small-letter-spacing);\n}\n\n._body-bold_12ds0_133 {\n  font-family: var(--text-body-bold-font-family);\n  font-style: var(--text-body-bold-font-style);\n  font-weight: var(--text-body-bold-font-weight);\n  font-size: var(--text-body-bold-font-size);\n  line-height: var(--text-body-bold-line-height);\n  color: var(--text-body-bold-color);\n  text-decoration: var(--text-body-bold-text-decoration);\n  letter-spacing: var(--text-body-bold-letter-spacing);\n}\n\n._body-bold-dark_12ds0_144 {\n  font-family: var(--text-body-bold-dark-font-family);\n  font-style: var(--text-body-bold-dark-font-style);\n  font-weight: var(--text-body-bold-dark-font-weight);\n  font-size: var(--text-body-bold-dark-font-size);\n  line-height: var(--text-body-bold-dark-line-height);\n  color: var(--text-body-bold-dark-color);\n  text-decoration: var(--text-body-bold-dark-text-decoration);\n  letter-spacing: var(--text-body-bold-dark-letter-spacing);\n}\n\n._body-small-bold_12ds0_155 {\n  font-family: var(--text-body-small-bold-font-family);\n  font-style: var(--text-body-small-bold-font-style);\n  font-weight: var(--text-body-small-bold-font-weight);\n  font-size: var(--text-body-small-bold-font-size);\n  line-height: var(--text-body-small-bold-line-height);\n  color: var(--text-body-small-bold-color);\n  text-decoration: var(--text-body-small-bold-text-decoration);\n  letter-spacing: var(--text-body-small-bold-letter-spacing);\n}\n\n._button_12ds0_166 {\n  font-family: var(--text-button-font-family);\n  font-style: var(--text-button-font-style);\n  font-weight: var(--text-button-font-weight);\n  font-size: var(--text-button-font-size);\n  line-height: var(--text-button-line-height);\n  color: var(--text-button-color);\n  text-decoration: var(--text-button-text-decoration);\n  letter-spacing: var(--text-button-letter-spacing);\n}\n\n._button-small_12ds0_177 {\n  font-family: var(--text-button-small-font-family);\n  font-style: var(--text-button-small-font-style);\n  font-weight: var(--text-button-small-font-weight);\n  font-size: var(--text-button-small-font-size);\n  line-height: var(--text-button-small-line-height);\n  color: var(--text-button-small-color);\n  text-decoration: var(--text-button-small-text-decoration);\n  letter-spacing: var(--text-button-small-letter-spacing);\n}\n\n._link-large_12ds0_188 {\n  font-family: var(--text-link-large-font-family);\n  font-style: var(--text-link-large-font-style);\n  font-weight: var(--text-link-large-font-weight);\n  font-size: var(--text-link-large-font-size);\n  line-height: var(--text-link-large-line-height);\n  color: var(--text-link-large-color);\n  text-decoration: var(--text-link-large-text-decoration);\n  letter-spacing: var(--text-link-large-letter-spacing);\n}\n\n._link-medium_12ds0_199 {\n  font-family: var(--text-link-medium-font-family);\n  font-style: var(--text-link-medium-font-style);\n  font-weight: var(--text-link-medium-font-weight);\n  font-size: var(--text-link-medium-font-size);\n  line-height: var(--text-link-medium-line-height);\n  color: var(--text-link-medium-color);\n  text-decoration: var(--text-link-medium-text-decoration);\n  letter-spacing: var(--text-link-medium-letter-spacing);\n}\n\n._link_12ds0_188 {\n  font-family: var(--text-link-font-family);\n  font-style: var(--text-link-font-style);\n  font-weight: var(--text-link-font-weight);\n  font-size: var(--text-link-font-size);\n  line-height: var(--text-link-line-height);\n  color: var(--text-link-color);\n  text-decoration: var(--text-link-text-decoration);\n  letter-spacing: var(--text-link-letter-spacing);\n}\n\n._link-small_12ds0_221 {\n  font-family: var(--text-link-small-font-family);\n  font-style: var(--text-link-small-font-style);\n  font-weight: var(--text-link-small-font-weight);\n  font-size: var(--text-link-small-font-size);\n  line-height: var(--text-link-small-line-height);\n  color: var(--text-link-small-color);\n  text-decoration: var(--text-link-small-text-decoration);\n  letter-spacing: var(--text-link-small-letter-spacing);\n}\n\n._input-label_12ds0_232 {\n  font-family: var(--text-input-label-font-family);\n  font-style: var(--text-input-label-font-style);\n  font-weight: var(--text-input-label-font-weight);\n  font-size: var(--text-input-label-font-size);\n  line-height: var(--text-input-label-line-height);\n  color: var(--text-input-label-color);\n  text-decoration: var(--text-input-label-text-decoration);\n  letter-spacing: var(--text-input-label-letter-spacing);\n}\n\n._input-label-small_12ds0_243 {\n  font-family: var(--text-input-label-small-font-family);\n  font-style: var(--text-input-label-small-font-style);\n  font-weight: var(--text-input-label-small-font-weight);\n  font-size: var(--text-input-label-small-font-size);\n  line-height: var(--text-input-label-small-line-height);\n  color: var(--text-input-label-small-color);\n  text-decoration: var(--text-input-label-small-text-decoration);\n  letter-spacing: var(--text-input-label-small-letter-spacing);\n}\n\n._hint-text_12ds0_254 {\n  font-family: var(--text-hint-text-font-family);\n  font-style: var(--text-hint-text-font-style);\n  font-weight: var(--text-hint-text-font-weight);\n  font-size: var(--text-hint-text-font-size);\n  line-height: var(--text-hint-text-line-height);\n  color: var(--text-hint-text-color);\n  text-decoration: var(--text-hint-text-text-decoration);\n  letter-spacing: var(--text-hint-text-letter-spacing);\n}\n\n._placeholder_12ds0_265 {\n  font-family: var(--text-placeholder-font-family);\n  font-style: var(--text-placeholder-font-style);\n  font-weight: var(--text-placeholder-font-weight);\n  font-size: var(--text-placeholder-font-size);\n  line-height: var(--text-placeholder-line-height);\n  color: var(--text-placeholder-color);\n  text-decoration: var(--text-placeholder-text-decoration);\n  letter-spacing: var(--text-placeholder-letter-spacing);\n}\n\n._placeholder-small_12ds0_276 {\n  font-family: var(--text-placeholder-small-font-family);\n  font-style: var(--text-placeholder-small-font-style);\n  font-weight: var(--text-placeholder-small-font-weight);\n  font-size: var(--text-placeholder-small-font-size);\n  line-height: var(--text-placeholder-small-line-height);\n  color: var(--text-placeholder-small-color);\n  text-decoration: var(--text-placeholder-small-text-decoration);\n  letter-spacing: var(--text-placeholder-small-letter-spacing);\n}\n\n._placeholder-code_12ds0_287 {\n  font-family: var(--text-placeholder-code-font-family);\n  font-style: var(--text-placeholder-code-font-style);\n  font-weight: var(--text-placeholder-code-font-weight);\n  font-size: var(--text-placeholder-code-font-size);\n  line-height: var(--text-placeholder-code-line-height);\n  color: var(--text-placeholder-code-color);\n  text-decoration: var(--text-placeholder-code-text-decoration);\n  letter-spacing: var(--text-placeholder-code-letter-spacing);\n}\n\n._placeholder-code-small_12ds0_298 {\n  font-family: var(--text-placeholder-code-small-font-family);\n  font-style: var(--text-placeholder-code-small-font-style);\n  font-weight: var(--text-placeholder-code-small-font-weight);\n  font-size: var(--text-placeholder-code-small-font-size);\n  line-height: var(--text-placeholder-code-small-line-height);\n  color: var(--text-placeholder-code-small-color);\n  text-decoration: var(--text-placeholder-code-small-text-decoration);\n  letter-spacing: var(--text-placeholder-code-small-letter-spacing);\n}\n\n._error_12ds0_309 {\n  font-family: var(--text-error-font-family);\n  font-style: var(--text-error-font-style);\n  font-weight: var(--text-error-font-weight);\n  font-size: var(--text-error-font-size);\n  line-height: var(--text-error-line-height);\n  color: var(--text-error-color);\n  text-decoration: var(--text-error-text-decoration);\n  letter-spacing: var(--text-error-letter-spacing);\n}\n\n._error-small_12ds0_320 {\n  font-family: var(--text-error-small-font-family);\n  font-style: var(--text-error-small-font-style);\n  font-weight: var(--text-error-small-font-weight);\n  font-size: var(--text-error-small-font-size);\n  line-height: var(--text-error-small-line-height);\n  color: var(--text-error-small-color);\n  text-decoration: var(--text-error-small-text-decoration);\n  letter-spacing: var(--text-error-small-letter-spacing);\n}\n\n._success-small_12ds0_331 {\n  font-family: var(--text-success-small-font-family);\n  font-style: var(--text-success-small-font-style);\n  font-weight: var(--text-success-small-font-weight);\n  font-size: var(--text-success-small-font-size);\n  line-height: var(--text-success-small-line-height);\n  color: var(--text-success-small-color);\n  text-decoration: var(--text-success-small-text-decoration);\n  letter-spacing: var(--text-success-small-letter-spacing);\n}\n\n._dateRangeGroup_12ds0_342 {\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n  font-family: var(--text-body-font-family);\n  font-style: var(--text-body-font-style);\n  font-weight: var(--text-body-font-weight);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n  text-decoration: var(--text-body-text-decoration);\n  letter-spacing: var(--text-body-letter-spacing);\n  appearance: none;\n  box-sizing: border-box;\n  background-color: white;\n  text-align: left;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border: 1px solid var(--border-color);\n  border-radius: var(--radius-base);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--sizes-sm);\n  z-index: 1;\n}\n._dateRangeGroup_12ds0_342:disabled, ._dateRangeGroup_12ds0_342[data-disabled] {\n  opacity: 1;\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-light);\n  cursor: not-allowed;\n}\n._dateRangeGroup_12ds0_342._compact_12ds0_374 {\n  min-height: var(--sizes-8);\n  --outline-size: 2px;\n}\n._dateRangeGroup_12ds0_342._error_12ds0_309 {\n  --border-color: var(--colors-secondary-red-base);\n  --shadow-color: var(--colors-secondary-red-light);\n}\n._dateRangeGroup_12ds0_342[data-focus-within] {\n  box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n  border-color: var(--colors-secondary-blue-base);\n}\n._dateRangeGroup_12ds0_342:has(*[data-invalid]) {\n  box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-red-light);\n  border: 1px solid var(--colors-secondary-red-base);\n}\n._dateRangeGroup_12ds0_342 *[data-placeholder],\n._dateRangeGroup_12ds0_342 *[data-placeholder] + div,\n._dateRangeGroup_12ds0_342 *:has(*[data-placeholder]) ~ .date-range-input-splitter {\n  color: var(--colors-neutral-ink-light);\n}\n._dateRangeGroup_12ds0_342 .react-aria-DateInput {\n  display: flex;\n  align-items: center;\n  cursor: text;\n  caret-color: transparent;\n}\n._dateRangeGroup_12ds0_342 .react-aria-DateInput .react-aria-DateSegment {\n  padding: 0 1px;\n  border-radius: var(--radius-base);\n}\n._dateRangeGroup_12ds0_342 .react-aria-DateInput .react-aria-DateSegment[data-focused] {\n  color: white;\n  background-color: var(--colors-secondary-blue-dark);\n}\n._dateRangeGroup_12ds0_342 .react-aria-DateInput .react-aria-DateSegment[data-focused][data-invalid] {\n  background-color: var(--colors-secondary-red-lightest);\n}\n._dateRangeGroup_12ds0_342 .react-aria-DateInput .react-aria-DateSegment[data-invalid] {\n  font-weight: bold;\n  color: var(--colors-secondary-red-dark);\n}\n._dateRangeGroup_12ds0_342 .react-aria-DateInput .react-aria-DateSegment:focus-visible {\n  outline: none;\n}");
+var styles = {"error":"_error_12ds0_309","dateRangeGroup":"_dateRangeGroup_12ds0_342"};
+
+export { styles as default };
+//# sourceMappingURL=DateInputField.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateInputField.module.scss.js","sources":["../../../src/components/DateInputField/DateInputField.module.scss"],"sourcesContent":["@use '../../utils/forms/form-variables' as form;\n@use '../../theme/scss/text.module.scss' as text;\n\n.dateRangeGroup {\n  @include form.defaults;\n  @include text.body;\n\n  appearance: none;\n  box-sizing: border-box;\n\n  background-color: white;\n  text-align: left;\n\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border: 1px solid var(--border-color);\n  border-radius: var(--radius-base);\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  &:disabled,\n  &[data-disabled] {\n    opacity: 1;\n    box-shadow: none;\n    background-color: var(--colors-neutral-grey-light);\n    cursor: not-allowed;\n  }\n\n  &.compact {\n    min-height: var(--sizes-8);\n\n    @include form.compact;\n  }\n\n  &.error {\n    @include form.error;\n  }\n\n  gap: var(--sizes-sm);\n  z-index: 1;\n\n  &[data-focus-within] {\n    box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:has(*[data-invalid]) {\n    box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-red-light);\n    border: 1px solid var(--colors-secondary-red-base);\n  }\n\n  *[data-placeholder],\n  *[data-placeholder] + div,\n  *:has(*[data-placeholder]) ~ :global(.date-range-input-splitter) {\n    color: var(--colors-neutral-ink-light);\n  }\n\n  :global(.react-aria-DateInput) {\n    display: flex;\n    align-items: center;\n\n    cursor: text;\n    caret-color: transparent;\n\n    :global(.react-aria-DateSegment) {\n      padding: 0 1px;\n      border-radius: var(--radius-base);\n\n      &[data-focused] {\n        color: white;\n        background-color: var(--colors-secondary-blue-dark);\n\n        &[data-invalid] {\n          background-color: var(--colors-secondary-red-lightest);\n        }\n      }\n\n      &[data-invalid] {\n        font-weight: bold;\n        color: var(--colors-secondary-red-dark);\n      }\n\n      &:focus-visible {\n        outline: none;\n      }\n    }\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AAGEA,WAAA,CAAA,qzhBAAA;AACA,aAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,gBAAA,CAAA,2BAAA;;;;"}

package/dist/components/DateInputField/types.d.ts

@@ -26,13 +26,13 @@ type CommonDateInputProps = FormComponentProps & {
 } & DateValidationProps;
 type DateInputRangeProps = CommonDateInputProps & {
     isRangeInput: true;
-    onChangeStartDate: (value: DateValue) => void;
-    onChangeEndDate: (value: DateValue) => void;
+    onChangeStartDate: (value: DateValue | null) => void;
+    onChangeEndDate: (value: DateValue | null) => void;
     onChange?: never;
 };
 type DateInputSingleProps = CommonDateInputProps & {
     isRangeInput?: false;
-    onChange: (value: DateValue) => void;
+    onChange: (value: DateValue | null) => void;
     onChangeStartDate?: never;
     onChangeEndDate?: never;
 };

package/dist/components/DatePicker/DatePicker.cjs

@@ -2,15 +2,14 @@
 
 var React = require('react');
 var sizes = require('../../theme/modules/sizes.cjs');
+var DatePicker_module = require('./DatePicker.module.scss.cjs');
 var CalendarIcon = require('../../icons/design-system/components/CalendarIcon.cjs');
 var index = require('../DateInputField/index.cjs');
 var Popover = require('../Popover/Popover.cjs');
 var Card = require('../Card/Card.cjs');
-require('../Calendars/components/RangeCalendar/styled.cjs');
-require('../Grid/index.cjs');
-require('../Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.cjs');
-require('@internationalized/date');
 require('react-aria-components');
+require('../Grid/Grid.cjs');
+require('@internationalized/date');
 require('../Calendars/types.cjs');
 require('../Calendars/data/constants.cjs');
 var Button = require('../Button/Button.cjs');
@@ -18,7 +17,6 @@ require('../Stack/Stack.cjs');
 require('../Calendars/components/subcomponents/CalendarHeading.cjs');
 var useIsDateUnavailable = require('../Calendars/data/useIsDateUnavailable.cjs');
 var Calendar = require('../Calendars/components/Calendar/Calendar.cjs');
-var styled = require('./styled.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -63,7 +61,7 @@ const DatePicker = ({ className, style, value, onChange, 'aria-label': ariaLabel
             : true, rootElementRef: rootElementRef },
             React__default.default.createElement(Card.Card.Surface, { style: { padding: sizes.sizes.base } },
                 React__default.default.createElement(Calendar.Calendar, { value: value, onChange: onSelectDate, "aria-label": `${ariaLabel} Calendar`, isDisabled: isDisabled, ...validationProps }),
-                React__default.default.createElement(styled.DatePickerFooter, null,
+                React__default.default.createElement("footer", { className: DatePicker_module.footer },
                     React__default.default.createElement(Button.Button, { type: "button", variant: "flat", onClick: () => onSelectDate(resetToValue.current), size: "sm", disabled: isDisabled }, "Reset")))))));
 };
 

package/dist/components/DatePicker/DatePicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.cjs","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { DateValue } from 'react-aria-components';\nimport { sizes } from 'Theme/modules/sizes';\nimport { WithLabelsProps } from '../../hoc/withLabels/withLabels';\nimport { CalendarIcon } from '../../icons';\nimport { DateInputField } from '../DateInputField';\nimport { Popover } from '../Popover';\nimport { Card } from '../Card';\nimport { Calendar } from '../Calendars';\nimport { Button } from '../Button';\nimport { DatePickerFooter } from './styled';\nimport { PopoverProps } from '../Popover/types';\nimport { useIsDateUnavailable } from '../Calendars/data/useIsDateUnavailable';\nimport { DateValidationProps } from '../DateInputField/types';\n\ntype DatePickerProps = {\n  value: DateValue | null;\n  'aria-label': string;\n  onChange: (date: DateValue | null) => void;\n  isDisabled?: boolean;\n  shouldCloseOnSelect?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n} & WithLabelsProps &\n  DateValidationProps &\n  Pick<PopoverProps, 'rootElementRef'>;\n\nexport const DatePicker = ({\n  className,\n  style,\n  value,\n  onChange,\n  'aria-label': ariaLabel,\n  isDisabled,\n  shouldCloseOnSelect = true,\n  rootElementRef,\n  maxValue,\n  minValue,\n  disabledRanges,\n  disallowWeekends,\n  ...withLabelProps\n}: DatePickerProps) => {\n  const [shouldShowDropdown, setShouldShowDropdown] = useState(false);\n  const resetToValue = useRef(value);\n\n  const rangeRef = useRef<HTMLDivElement | null>(null);\n  const openDropdownRef = useRef<HTMLButtonElement | null>(null);\n\n  const closeDropdown = () => {\n    setShouldShowDropdown(false);\n    openDropdownRef.current?.focus();\n  };\n\n  const onSelectDate = (date: DateValue | null) => {\n    onChange(date);\n\n    if (!shouldCloseOnSelect || !shouldShowDropdown) return;\n    setTimeout(closeDropdown, 0); // Calendar state must update first.\n  };\n\n  const validationProps = {\n    maxValue,\n    minValue,\n    disabledRanges,\n    disallowWeekends,\n  } as DateValidationProps;\n\n  const { isDateUnavailable } = useIsDateUnavailable(validationProps);\n  const isSelectedDateInvalid = useMemo(\n    () => (value ? isDateUnavailable(value) : false),\n    [isDateUnavailable, value],\n  );\n\n  const error =\n    withLabelProps.error || (isSelectedDateInvalid ? 'Invalid date selection' : undefined);\n\n  return (\n    <>\n      <DateInputField\n        disabled={isDisabled}\n        aria-label={ariaLabel}\n        startValue={value}\n        rightActionRef={openDropdownRef}\n        rightAction={{\n          iconSlot: <CalendarIcon />,\n          'aria-label': 'Open Calendar',\n          onClick: () => setShouldShowDropdown(!shouldShowDropdown),\n          disabled: isDisabled,\n          'aria-controls': 'data-picker-dropdown',\n          'aria-haspopup': true,\n          'aria-expanded': shouldShowDropdown,\n        }}\n        onChange={onSelectDate}\n        rangeRef={rangeRef}\n        className={className}\n        style={style}\n        {...withLabelProps}\n        {...validationProps}\n        error={error}\n      />\n\n      {shouldShowDropdown && (\n        <Popover\n          id=\"date-picker-dropdown\"\n          style={{ marginTop: sizes.sm }}\n          anchorElement={rangeRef.current}\n          onShouldClose={closeDropdown}\n          placement=\"bottom-start\"\n          ignoreAriaWarnings // We want to anchor to input, but be powered by right action.\n          rootElementRef={rootElementRef}\n        >\n          <Card.Surface style={{ padding: sizes.base }}>\n            <Calendar\n              value={value}\n              onChange={onSelectDate}\n              aria-label={`${ariaLabel} Calendar`}\n              isDisabled={isDisabled}\n              {...validationProps}\n            />\n            <DatePickerFooter>\n              <Button\n                type=\"button\"\n                variant=\"flat\"\n                onClick={() => onSelectDate(resetToValue.current)}\n                size=\"sm\"\n                disabled={isDisabled}\n              >\n                Reset\n              </Button>\n            </DatePickerFooter>\n          </Card.Surface>\n        </Popover>\n      )}\n    </>\n  );\n};\n"],"names":["useState","useRef","useIsDateUnavailable","useMemo","React","DateInputField","CalendarIcon","Popover","sizes","Card","Calendar","DatePickerFooter","Button"],"mappings":"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"}
+{"version":3,"file":"DatePicker.cjs","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { DateValue } from 'react-aria-components';\nimport { sizes } from 'Theme/modules/sizes';\nimport styles from './DatePicker.module.scss';\nimport { WithLabelsProps } from '../../hoc/withLabels/withLabels';\nimport { CalendarIcon } from '../../icons';\nimport { DateInputField } from '../DateInputField';\nimport { Popover } from '../Popover';\nimport { Card } from '../Card';\nimport { Calendar } from '../Calendars';\nimport { Button } from '../Button';\nimport { PopoverProps } from '../Popover/types';\nimport { useIsDateUnavailable } from '../Calendars/data/useIsDateUnavailable';\nimport { DateValidationProps } from '../DateInputField/types';\n\ntype DatePickerProps = {\n  value: DateValue | null;\n  'aria-label': string;\n  onChange: (date: DateValue | null) => void;\n  isDisabled?: boolean;\n  shouldCloseOnSelect?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n} & WithLabelsProps &\n  DateValidationProps &\n  Pick<PopoverProps, 'rootElementRef'>;\n\nexport const DatePicker = ({\n  className,\n  style,\n  value,\n  onChange,\n  'aria-label': ariaLabel,\n  isDisabled,\n  shouldCloseOnSelect = true,\n  rootElementRef,\n  maxValue,\n  minValue,\n  disabledRanges,\n  disallowWeekends,\n  ...withLabelProps\n}: DatePickerProps) => {\n  const [shouldShowDropdown, setShouldShowDropdown] = useState(false);\n  const resetToValue = useRef(value);\n\n  const rangeRef = useRef<HTMLDivElement | null>(null);\n  const openDropdownRef = useRef<HTMLButtonElement | null>(null);\n\n  const closeDropdown = () => {\n    setShouldShowDropdown(false);\n    openDropdownRef.current?.focus();\n  };\n\n  const onSelectDate = (date: DateValue | null) => {\n    onChange(date);\n\n    if (!shouldCloseOnSelect || !shouldShowDropdown) return;\n    setTimeout(closeDropdown, 0); // Calendar state must update first.\n  };\n\n  const validationProps = {\n    maxValue,\n    minValue,\n    disabledRanges,\n    disallowWeekends,\n  } as DateValidationProps;\n\n  const { isDateUnavailable } = useIsDateUnavailable(validationProps);\n  const isSelectedDateInvalid = useMemo(\n    () => (value ? isDateUnavailable(value) : false),\n    [isDateUnavailable, value],\n  );\n\n  const error =\n    withLabelProps.error || (isSelectedDateInvalid ? 'Invalid date selection' : undefined);\n\n  return (\n    <>\n      <DateInputField\n        disabled={isDisabled}\n        aria-label={ariaLabel}\n        startValue={value}\n        rightActionRef={openDropdownRef}\n        rightAction={{\n          iconSlot: <CalendarIcon />,\n          'aria-label': 'Open Calendar',\n          onClick: () => setShouldShowDropdown(!shouldShowDropdown),\n          disabled: isDisabled,\n          'aria-controls': 'data-picker-dropdown',\n          'aria-haspopup': true,\n          'aria-expanded': shouldShowDropdown,\n        }}\n        onChange={onSelectDate}\n        rangeRef={rangeRef}\n        className={className}\n        style={style}\n        {...withLabelProps}\n        {...validationProps}\n        error={error}\n      />\n\n      {shouldShowDropdown && (\n        <Popover\n          id=\"date-picker-dropdown\"\n          style={{ marginTop: sizes.sm }}\n          anchorElement={rangeRef.current}\n          onShouldClose={closeDropdown}\n          placement=\"bottom-start\"\n          ignoreAriaWarnings // We want to anchor to input, but be powered by right action.\n          rootElementRef={rootElementRef}\n        >\n          <Card.Surface style={{ padding: sizes.base }}>\n            <Calendar\n              value={value}\n              onChange={onSelectDate}\n              aria-label={`${ariaLabel} Calendar`}\n              isDisabled={isDisabled}\n              {...validationProps}\n            />\n            <footer className={styles.footer}>\n              <Button\n                type=\"button\"\n                variant=\"flat\"\n                onClick={() => onSelectDate(resetToValue.current)}\n                size=\"sm\"\n                disabled={isDisabled}\n              >\n                Reset\n              </Button>\n            </footer>\n          </Card.Surface>\n        </Popover>\n      )}\n    </>\n  );\n};\n"],"names":["useState","useRef","useIsDateUnavailable","useMemo","React","DateInputField","CalendarIcon","Popover","sizes","Card","Calendar","styles","Button"],"mappings":"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"}

package/dist/components/DatePicker/DatePicker.js

@@ -1,14 +1,13 @@
 import React__default, { useState, useRef, useMemo } from 'react';
 import { sizes } from '../../theme/modules/sizes.js';
+import styles from './DatePicker.module.scss.js';
 import { ReactComponent as CalendarIcon } from '../../icons/design-system/components/CalendarIcon.js';
 import { DateInputField } from '../DateInputField/index.js';
 import { Popover } from '../Popover/Popover.js';
 import { Card } from '../Card/Card.js';
-import '../Calendars/components/RangeCalendar/styled.js';
-import '../Grid/index.js';
-import '../Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.js';
-import '@internationalized/date';
 import 'react-aria-components';
+import '../Grid/Grid.js';
+import '@internationalized/date';
 import '../Calendars/types.js';
 import '../Calendars/data/constants.js';
 import { Button } from '../Button/Button.js';
@@ -16,7 +15,6 @@ import '../Stack/Stack.js';
 import '../Calendars/components/subcomponents/CalendarHeading.js';
 import { useIsDateUnavailable } from '../Calendars/data/useIsDateUnavailable.js';
 import { Calendar } from '../Calendars/components/Calendar/Calendar.js';
-import { DatePickerFooter } from './styled.js';
 
 const DatePicker = ({ className, style, value, onChange, 'aria-label': ariaLabel, isDisabled, shouldCloseOnSelect = true, rootElementRef, maxValue, minValue, disabledRanges, disallowWeekends, ...withLabelProps }) => {
     const [shouldShowDropdown, setShouldShowDropdown] = useState(false);
@@ -57,7 +55,7 @@ const DatePicker = ({ className, style, value, onChange, 'aria-label': ariaLabel
             : true, rootElementRef: rootElementRef },
             React__default.createElement(Card.Surface, { style: { padding: sizes.base } },
                 React__default.createElement(Calendar, { value: value, onChange: onSelectDate, "aria-label": `${ariaLabel} Calendar`, isDisabled: isDisabled, ...validationProps }),
-                React__default.createElement(DatePickerFooter, null,
+                React__default.createElement("footer", { className: styles.footer },
                     React__default.createElement(Button, { type: "button", variant: "flat", onClick: () => onSelectDate(resetToValue.current), size: "sm", disabled: isDisabled }, "Reset")))))));
 };
 

package/dist/components/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { DateValue } from 'react-aria-components';\nimport { sizes } from 'Theme/modules/sizes';\nimport { WithLabelsProps } from '../../hoc/withLabels/withLabels';\nimport { CalendarIcon } from '../../icons';\nimport { DateInputField } from '../DateInputField';\nimport { Popover } from '../Popover';\nimport { Card } from '../Card';\nimport { Calendar } from '../Calendars';\nimport { Button } from '../Button';\nimport { DatePickerFooter } from './styled';\nimport { PopoverProps } from '../Popover/types';\nimport { useIsDateUnavailable } from '../Calendars/data/useIsDateUnavailable';\nimport { DateValidationProps } from '../DateInputField/types';\n\ntype DatePickerProps = {\n  value: DateValue | null;\n  'aria-label': string;\n  onChange: (date: DateValue | null) => void;\n  isDisabled?: boolean;\n  shouldCloseOnSelect?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n} & WithLabelsProps &\n  DateValidationProps &\n  Pick<PopoverProps, 'rootElementRef'>;\n\nexport const DatePicker = ({\n  className,\n  style,\n  value,\n  onChange,\n  'aria-label': ariaLabel,\n  isDisabled,\n  shouldCloseOnSelect = true,\n  rootElementRef,\n  maxValue,\n  minValue,\n  disabledRanges,\n  disallowWeekends,\n  ...withLabelProps\n}: DatePickerProps) => {\n  const [shouldShowDropdown, setShouldShowDropdown] = useState(false);\n  const resetToValue = useRef(value);\n\n  const rangeRef = useRef<HTMLDivElement | null>(null);\n  const openDropdownRef = useRef<HTMLButtonElement | null>(null);\n\n  const closeDropdown = () => {\n    setShouldShowDropdown(false);\n    openDropdownRef.current?.focus();\n  };\n\n  const onSelectDate = (date: DateValue | null) => {\n    onChange(date);\n\n    if (!shouldCloseOnSelect || !shouldShowDropdown) return;\n    setTimeout(closeDropdown, 0); // Calendar state must update first.\n  };\n\n  const validationProps = {\n    maxValue,\n    minValue,\n    disabledRanges,\n    disallowWeekends,\n  } as DateValidationProps;\n\n  const { isDateUnavailable } = useIsDateUnavailable(validationProps);\n  const isSelectedDateInvalid = useMemo(\n    () => (value ? isDateUnavailable(value) : false),\n    [isDateUnavailable, value],\n  );\n\n  const error =\n    withLabelProps.error || (isSelectedDateInvalid ? 'Invalid date selection' : undefined);\n\n  return (\n    <>\n      <DateInputField\n        disabled={isDisabled}\n        aria-label={ariaLabel}\n        startValue={value}\n        rightActionRef={openDropdownRef}\n        rightAction={{\n          iconSlot: <CalendarIcon />,\n          'aria-label': 'Open Calendar',\n          onClick: () => setShouldShowDropdown(!shouldShowDropdown),\n          disabled: isDisabled,\n          'aria-controls': 'data-picker-dropdown',\n          'aria-haspopup': true,\n          'aria-expanded': shouldShowDropdown,\n        }}\n        onChange={onSelectDate}\n        rangeRef={rangeRef}\n        className={className}\n        style={style}\n        {...withLabelProps}\n        {...validationProps}\n        error={error}\n      />\n\n      {shouldShowDropdown && (\n        <Popover\n          id=\"date-picker-dropdown\"\n          style={{ marginTop: sizes.sm }}\n          anchorElement={rangeRef.current}\n          onShouldClose={closeDropdown}\n          placement=\"bottom-start\"\n          ignoreAriaWarnings // We want to anchor to input, but be powered by right action.\n          rootElementRef={rootElementRef}\n        >\n          <Card.Surface style={{ padding: sizes.base }}>\n            <Calendar\n              value={value}\n              onChange={onSelectDate}\n              aria-label={`${ariaLabel} Calendar`}\n              isDisabled={isDisabled}\n              {...validationProps}\n            />\n            <DatePickerFooter>\n              <Button\n                type=\"button\"\n                variant=\"flat\"\n                onClick={() => onSelectDate(resetToValue.current)}\n                size=\"sm\"\n                disabled={isDisabled}\n              >\n                Reset\n              </Button>\n            </DatePickerFooter>\n          </Card.Surface>\n        </Popover>\n      )}\n    </>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { DateValue } from 'react-aria-components';\nimport { sizes } from 'Theme/modules/sizes';\nimport styles from './DatePicker.module.scss';\nimport { WithLabelsProps } from '../../hoc/withLabels/withLabels';\nimport { CalendarIcon } from '../../icons';\nimport { DateInputField } from '../DateInputField';\nimport { Popover } from '../Popover';\nimport { Card } from '../Card';\nimport { Calendar } from '../Calendars';\nimport { Button } from '../Button';\nimport { PopoverProps } from '../Popover/types';\nimport { useIsDateUnavailable } from '../Calendars/data/useIsDateUnavailable';\nimport { DateValidationProps } from '../DateInputField/types';\n\ntype DatePickerProps = {\n  value: DateValue | null;\n  'aria-label': string;\n  onChange: (date: DateValue | null) => void;\n  isDisabled?: boolean;\n  shouldCloseOnSelect?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n} & WithLabelsProps &\n  DateValidationProps &\n  Pick<PopoverProps, 'rootElementRef'>;\n\nexport const DatePicker = ({\n  className,\n  style,\n  value,\n  onChange,\n  'aria-label': ariaLabel,\n  isDisabled,\n  shouldCloseOnSelect = true,\n  rootElementRef,\n  maxValue,\n  minValue,\n  disabledRanges,\n  disallowWeekends,\n  ...withLabelProps\n}: DatePickerProps) => {\n  const [shouldShowDropdown, setShouldShowDropdown] = useState(false);\n  const resetToValue = useRef(value);\n\n  const rangeRef = useRef<HTMLDivElement | null>(null);\n  const openDropdownRef = useRef<HTMLButtonElement | null>(null);\n\n  const closeDropdown = () => {\n    setShouldShowDropdown(false);\n    openDropdownRef.current?.focus();\n  };\n\n  const onSelectDate = (date: DateValue | null) => {\n    onChange(date);\n\n    if (!shouldCloseOnSelect || !shouldShowDropdown) return;\n    setTimeout(closeDropdown, 0); // Calendar state must update first.\n  };\n\n  const validationProps = {\n    maxValue,\n    minValue,\n    disabledRanges,\n    disallowWeekends,\n  } as DateValidationProps;\n\n  const { isDateUnavailable } = useIsDateUnavailable(validationProps);\n  const isSelectedDateInvalid = useMemo(\n    () => (value ? isDateUnavailable(value) : false),\n    [isDateUnavailable, value],\n  );\n\n  const error =\n    withLabelProps.error || (isSelectedDateInvalid ? 'Invalid date selection' : undefined);\n\n  return (\n    <>\n      <DateInputField\n        disabled={isDisabled}\n        aria-label={ariaLabel}\n        startValue={value}\n        rightActionRef={openDropdownRef}\n        rightAction={{\n          iconSlot: <CalendarIcon />,\n          'aria-label': 'Open Calendar',\n          onClick: () => setShouldShowDropdown(!shouldShowDropdown),\n          disabled: isDisabled,\n          'aria-controls': 'data-picker-dropdown',\n          'aria-haspopup': true,\n          'aria-expanded': shouldShowDropdown,\n        }}\n        onChange={onSelectDate}\n        rangeRef={rangeRef}\n        className={className}\n        style={style}\n        {...withLabelProps}\n        {...validationProps}\n        error={error}\n      />\n\n      {shouldShowDropdown && (\n        <Popover\n          id=\"date-picker-dropdown\"\n          style={{ marginTop: sizes.sm }}\n          anchorElement={rangeRef.current}\n          onShouldClose={closeDropdown}\n          placement=\"bottom-start\"\n          ignoreAriaWarnings // We want to anchor to input, but be powered by right action.\n          rootElementRef={rootElementRef}\n        >\n          <Card.Surface style={{ padding: sizes.base }}>\n            <Calendar\n              value={value}\n              onChange={onSelectDate}\n              aria-label={`${ariaLabel} Calendar`}\n              isDisabled={isDisabled}\n              {...validationProps}\n            />\n            <footer className={styles.footer}>\n              <Button\n                type=\"button\"\n                variant=\"flat\"\n                onClick={() => onSelectDate(resetToValue.current)}\n                size=\"sm\"\n                disabled={isDisabled}\n              >\n                Reset\n              </Button>\n            </footer>\n          </Card.Surface>\n        </Popover>\n      )}\n    </>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._footer_wh6d1_1 {\n  display: flex;\n  justify-content: end;\n  margin-top: var(--sizes-base);\n  margin-left: calc(-1 * var(--sizes-base));\n  margin-right: calc(-1 * var(--sizes-base));\n  padding: var(--sizes-base);\n  padding-bottom: 0;\n  border-top: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}");
+var styles = {"footer":"_footer_wh6d1_1"};
+
+module.exports = styles;
+//# sourceMappingURL=DatePicker.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.module.scss.cjs","sources":["../../../src/components/DatePicker/DatePicker.module.scss"],"sourcesContent":[".footer {\n  display: flex;\n  justify-content: end;\n\n  margin-top: var(--sizes-base);\n  margin-left: calc(-1 * var(--sizes-base));\n  margin-right: calc(-1 * var(--sizes-base));\n\n  padding: var(--sizes-base);\n  padding-bottom: 0;\n\n  border-top: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,8TAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._footer_wh6d1_1 {\n  display: flex;\n  justify-content: end;\n  margin-top: var(--sizes-base);\n  margin-left: calc(-1 * var(--sizes-base));\n  margin-right: calc(-1 * var(--sizes-base));\n  padding: var(--sizes-base);\n  padding-bottom: 0;\n  border-top: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}");
+var styles = {"footer":"_footer_wh6d1_1"};
+
+export { styles as default };
+//# sourceMappingURL=DatePicker.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.module.scss.js","sources":["../../../src/components/DatePicker/DatePicker.module.scss"],"sourcesContent":[".footer {\n  display: flex;\n  justify-content: end;\n\n  margin-top: var(--sizes-base);\n  margin-left: calc(-1 * var(--sizes-base));\n  margin-right: calc(-1 * var(--sizes-base));\n\n  padding: var(--sizes-base);\n  padding-bottom: 0;\n\n  border-top: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,8TAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA;;;;"}

package/dist/components/DateRangePicker/DateRangePicker.cjs

@@ -5,11 +5,9 @@ var Button = require('../Button/Button.cjs');
 var Select = require('../Select/Select.cjs');
 var index$1 = require('../DateInputField/index.cjs');
 var RangeCalendar = require('../Calendars/components/RangeCalendar/RangeCalendar.cjs');
-require('../Calendars/components/Calendar/styled.cjs');
-require('../Grid/index.cjs');
-require('../Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.cjs');
-require('@internationalized/date');
 require('react-aria-components');
+require('../Grid/Grid.cjs');
+require('@internationalized/date');
 require('../Calendars/types.cjs');
 require('../Calendars/data/constants.cjs');
 var Stack = require('../Stack/Stack.cjs');
@@ -45,6 +43,8 @@ disabledRanges, disallowWeekends, maxValue, minValue, selectedPreset, setSelecte
         setSelectedPreset(constants.DATE_RANGE_OPTIONS.find(({ value }) => value === selectedValue) || constants.DATE_RANGE_OPTIONS[0]);
     };
     const updateDateSegment = React.useCallback((slot) => (value) => {
+        if (!value)
+            return;
         const newRange = {
             start: slot === 'start' ? value : selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.start,
             end: slot === 'end' ? value : selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.end,

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

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -3,11 +3,9 @@ import { Button } from '../Button/Button.js';
 import { Select } from '../Select/Select.js';
 import { DateInputField } from '../DateInputField/index.js';
 import { RangeCalendar } from '../Calendars/components/RangeCalendar/RangeCalendar.js';
-import '../Calendars/components/Calendar/styled.js';
-import '../Grid/index.js';
-import '../Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.js';
-import '@internationalized/date';
 import 'react-aria-components';
+import '../Grid/Grid.js';
+import '@internationalized/date';
 import '../Calendars/types.js';
 import '../Calendars/data/constants.js';
 import { Stack } from '../Stack/Stack.js';
@@ -39,6 +37,8 @@ disabledRanges, disallowWeekends, maxValue, minValue, selectedPreset, setSelecte
         setSelectedPreset(DATE_RANGE_OPTIONS.find(({ value }) => value === selectedValue) || DATE_RANGE_OPTIONS[0]);
     };
     const updateDateSegment = useCallback((slot) => (value) => {
+        if (!value)
+            return;
         const newRange = {
             start: slot === 'start' ? value : selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.start,
             end: slot === 'end' ? value : selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.end,

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._divider_yyo7t_1 {\n  margin: 0 calc(-1 * var(--sizes-base));\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}");
+var styles = {"divider":"_divider_yyo7t_1"};
+
+module.exports = styles;
+//# sourceMappingURL=Divider.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.module.scss.cjs","sources":["../../../../src/components/DateRangePicker/components/Divider.module.scss"],"sourcesContent":[".divider {\n  margin: 0 calc(-1 * var(--sizes-base));\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,6HAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../../_virtual/____insertStyle.js';
+
+insertStyle("._divider_yyo7t_1 {\n  margin: 0 calc(-1 * var(--sizes-base));\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}");
+var styles = {"divider":"_divider_yyo7t_1"};
+
+export { styles as default };
+//# sourceMappingURL=Divider.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.module.scss.js","sources":["../../../../src/components/DateRangePicker/components/Divider.module.scss"],"sourcesContent":[".divider {\n  margin: 0 calc(-1 * var(--sizes-base));\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,6HAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA;;;;"}

package/dist/components/DescriptionList/DescriptionList.cjs

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

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

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