@veeqo/ui 10.0.0-beta.1 → 10.0.0-beta.2

package/dist/components/DateInputField/styled.cjs

@@ -2,18 +2,14 @@
 
 var styled = require('styled-components');
 var reactAriaComponents = require('react-aria-components');
-var utils = require('../../theme/utils.cjs');
 var index = require('../../theme/index.cjs');
+var inputStyles = require('../../utils/forms/inputStyles.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const DateRangeGroup = styled__default.default(reactAriaComponents.Group).withConfig({ displayName: "vui--DateRangeGroup", componentId: "vui--1eb8epi" }) `${utils.getTextStyles(index.theme.text.body)} display:flex;align-items:center;justify-content:space-between;gap:8px;height:22px;z-index:1;border:1px solid ${index.theme.colors.neutral.ink.lightest};border-radius:${index.theme.radius.base};gap:${index.theme.sizes.xs};padding:${index.theme.sizes.sm};&[data-focus-within]{box-shadow:0 0 0 4px ${index.theme.colors.secondary.blue.light};}&:has(*[data-invalid]){box-shadow:0 0 0 4px ${index.theme.colors.secondary.red.light};border:1px solid ${index.theme.colors.secondary.red.base};}${({ $hasError }) => !!$hasError &&
-    `
-    box-shadow: 0 0 0 4px ${index.theme.colors.secondary.red.light};
-    border: 1px solid ${index.theme.colors.secondary.red.base};
-  `} *[data-placeholder],*[data-placeholder] + div,*:has(*[data-placeholder])~ .date-range-input-splitter{color:${index.theme.colors.neutral.ink.light};}.date-range-input-splitter{margin:0 ${index.theme.sizes.sm};}&[data-disabled]{cursor:not-allowed;background-color:${index.theme.colors.neutral.grey.light};.react-aria-DateInput .react-aria-DateSegment,.date-range-input-splitter{cursor:not-allowed;color:${index.theme.colors.neutral.ink.light};}}.react-aria-DateInput{display:flex;align-items:center;cursor:text;caret-color:transparent;.react-aria-DateSegment{padding:0 1px;border-radius:${index.theme.radius.base};&[data-focused]{color:white;background-color:${index.theme.colors.secondary.blue.dark};&[data-invalid]{background-color:${index.theme.colors.secondary.red.lightest};}}&[data-invalid]{font-weight:bold;color:${index.theme.colors.secondary.red.dark};}&:focus-visible{outline:none;}}}`;
+const DateRangeGroup = styled__default.default(reactAriaComponents.Group).withConfig({ displayName: "vui--DateRangeGroup", componentId: "vui--1lv2dzh" }) `${inputStyles.inputBaseStyles} ${inputStyles.inputDisabledStyles} gap:${index.theme.sizes.sm};justify-content:space-between;z-index:1;&[data-focus-within]{box-shadow:0 0 0 4px ${index.theme.colors.secondary.blue.light};border-color:${index.theme.colors.secondary.blue.base};}&:has(*[data-invalid]){box-shadow:0 0 0 4px ${index.theme.colors.secondary.red.light};border:1px solid ${index.theme.colors.secondary.red.base};}*[data-placeholder],*[data-placeholder] + div,*:has(*[data-placeholder])~ .date-range-input-splitter{color:${index.theme.colors.neutral.ink.light};}.react-aria-DateInput{display:flex;align-items:center;cursor:text;caret-color:transparent;.react-aria-DateSegment{padding:0 1px;border-radius:${index.theme.radius.base};&[data-focused]{color:white;background-color:${index.theme.colors.secondary.blue.dark};&[data-invalid]{background-color:${index.theme.colors.secondary.red.lightest};}}&[data-invalid]{font-weight:bold;color:${index.theme.colors.secondary.red.dark};}&:focus-visible{outline:none;}}}`;
 
 exports.DateRangeGroup = DateRangeGroup;
 //# sourceMappingURL=styled.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/DateInputField/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Group } from 'react-aria-components';\nimport { getTextStyles } from 'Theme/utils';\nimport { theme } from '../../theme';\n\nexport const DateRangeGroup = styled(Group)<{ $hasError?: boolean }>`\n  ${getTextStyles(theme.text.body)}\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n\n  height: 22px;\n  z-index: 1;\n\n  border: 1px solid ${theme.colors.neutral.ink.lightest};\n  border-radius: ${theme.radius.base};\n\n  gap: ${theme.sizes.xs};\n  padding: ${theme.sizes.sm};\n\n  &[data-focus-within] {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n  }\n\n  &:has(*[data-invalid]) {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n    border: 1px solid ${theme.colors.secondary.red.base};\n  }\n\n  ${({ $hasError }) =>\n    !!$hasError &&\n    `\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n    border: 1px solid ${theme.colors.secondary.red.base};\n  `}\n\n  *[data-placeholder],\n  *[data-placeholder] + div,\n  *:has(*[data-placeholder]) ~ .date-range-input-splitter {\n    color: ${theme.colors.neutral.ink.light};\n  }\n\n  .date-range-input-splitter {\n    margin: 0 ${theme.sizes.sm};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${theme.colors.neutral.grey.light};\n\n    .react-aria-DateInput .react-aria-DateSegment,\n    .date-range-input-splitter {\n      cursor: not-allowed;\n      color: ${theme.colors.neutral.ink.light};\n    }\n  }\n  .react-aria-DateInput {\n    display: flex;\n    align-items: center;\n\n    cursor: text;\n    caret-color: transparent;\n\n    .react-aria-DateSegment {\n      padding: 0 1px;\n      border-radius: ${theme.radius.base};\n\n      &[data-focused] {\n        color: white;\n        background-color: ${theme.colors.secondary.blue.dark};\n\n        &[data-invalid] {\n          background-color: ${theme.colors.secondary.red.lightest};\n        }\n      }\n\n      &[data-invalid] {\n        font-weight: bold;\n        color: ${theme.colors.secondary.red.dark};\n      }\n\n      &:focus-visible {\n        outline: none;\n      }\n    }\n  }\n`;\n"],"names":["styled","Group","getTextStyles","theme"],"mappings":";;;;;;;;;;;AAKa,MAAA,cAAc,GAAGA,uBAAM,CAACC,yBAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EACvCC,mBAAa,CAACC,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,iHAUZA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,eAAA,EACpCA,WAAK,CAAC,MAAM,CAAC,IAAI,QAE3BA,WAAK,CAAC,KAAK,CAAC,EAAE,YACVA,WAAK,CAAC,KAAK,CAAC,EAAE,CAGC,2CAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,iDAIjCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA,kBAAA,EACpCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,KAGnD,CAAC,EAAE,SAAS,EAAE,KACd,CAAC,CAAC,SAAS;AACX,IAAA;AACwB,0BAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA;AACpC,sBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AACpD,EAAA,CAAA,CAAA,4GAAA,EAKUA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,yCAI3BA,WAAK,CAAC,KAAK,CAAC,EAAE,CAKN,uDAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,mGAAA,EAKxCA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,iJAAA,EAYtBA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,8CAAA,EAIZA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kCAAA,EAG9BA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,6CAMhDA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/DateInputField/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Group } from 'react-aria-components';\nimport { theme } from '../../theme';\nimport { inputBaseStyles, inputDisabledStyles } from '../../utils/forms/inputStyles';\nimport { InputProps } from '../types';\n\nexport const DateRangeGroup = styled(Group)<InputProps>`\n  ${inputBaseStyles}\n  ${inputDisabledStyles}\n\n  gap: ${theme.sizes.sm};\n  justify-content: space-between;\n  z-index: 1;\n\n  &[data-focus-within] {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n    border-color: ${theme.colors.secondary.blue.base};\n  }\n\n  &:has(*[data-invalid]) {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n    border: 1px solid ${theme.colors.secondary.red.base};\n  }\n\n  *[data-placeholder],\n  *[data-placeholder] + div,\n  *:has(*[data-placeholder]) ~ .date-range-input-splitter {\n    color: ${theme.colors.neutral.ink.light};\n  }\n\n  .react-aria-DateInput {\n    display: flex;\n    align-items: center;\n\n    cursor: text;\n    caret-color: transparent;\n\n    .react-aria-DateSegment {\n      padding: 0 1px;\n      border-radius: ${theme.radius.base};\n\n      &[data-focused] {\n        color: white;\n        background-color: ${theme.colors.secondary.blue.dark};\n\n        &[data-invalid] {\n          background-color: ${theme.colors.secondary.red.lightest};\n        }\n      }\n\n      &[data-invalid] {\n        font-weight: bold;\n        color: ${theme.colors.secondary.red.dark};\n      }\n\n      &:focus-visible {\n        outline: none;\n      }\n    }\n  }\n`;\n"],"names":["styled","Group","inputBaseStyles","inputDisabledStyles","theme"],"mappings":";;;;;;;;;;;MAMa,cAAc,GAAGA,uBAAM,CAACC,yBAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EACvCC,2BAAe,CAAA,CAAA,EACfC,+BAAmB,CAEd,KAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE,sFAKKA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,iBACzCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,iDAIxBA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CACpC,kBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,gHAM1CA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAYpB,gJAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,8CAAA,EAIZA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAG9B,kCAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAMhD,0CAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA,kCAAA;;;;"}

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

@@ -1,4 +1,3 @@
 /// <reference types="react" />
-export declare const DateRangeGroup: import("styled-components").StyledComponent<(props: import("react-aria-components").GroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, any, {
-    $hasError?: boolean | undefined;
-}, never>;
+import { InputProps } from '../types';
+export declare const DateRangeGroup: import("styled-components").StyledComponent<(props: import("react-aria-components").GroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, any, InputProps, never>;

package/dist/components/DateInputField/styled.js

@@ -1,13 +1,9 @@
 import styled from 'styled-components';
 import { Group } from 'react-aria-components';
-import { getTextStyles } from '../../theme/utils.js';
 import { theme } from '../../theme/index.js';
+import { inputBaseStyles, inputDisabledStyles } from '../../utils/forms/inputStyles.js';
 
-const DateRangeGroup = styled(Group).withConfig({ displayName: "vui--DateRangeGroup", componentId: "vui--1eb8epi" }) `${getTextStyles(theme.text.body)} display:flex;align-items:center;justify-content:space-between;gap:8px;height:22px;z-index:1;border:1px solid ${theme.colors.neutral.ink.lightest};border-radius:${theme.radius.base};gap:${theme.sizes.xs};padding:${theme.sizes.sm};&[data-focus-within]{box-shadow:0 0 0 4px ${theme.colors.secondary.blue.light};}&:has(*[data-invalid]){box-shadow:0 0 0 4px ${theme.colors.secondary.red.light};border:1px solid ${theme.colors.secondary.red.base};}${({ $hasError }) => !!$hasError &&
-    `
-    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};
-    border: 1px solid ${theme.colors.secondary.red.base};
-  `} *[data-placeholder],*[data-placeholder] + div,*:has(*[data-placeholder])~ .date-range-input-splitter{color:${theme.colors.neutral.ink.light};}.date-range-input-splitter{margin:0 ${theme.sizes.sm};}&[data-disabled]{cursor:not-allowed;background-color:${theme.colors.neutral.grey.light};.react-aria-DateInput .react-aria-DateSegment,.date-range-input-splitter{cursor:not-allowed;color:${theme.colors.neutral.ink.light};}}.react-aria-DateInput{display:flex;align-items:center;cursor:text;caret-color:transparent;.react-aria-DateSegment{padding:0 1px;border-radius:${theme.radius.base};&[data-focused]{color:white;background-color:${theme.colors.secondary.blue.dark};&[data-invalid]{background-color:${theme.colors.secondary.red.lightest};}}&[data-invalid]{font-weight:bold;color:${theme.colors.secondary.red.dark};}&:focus-visible{outline:none;}}}`;
+const DateRangeGroup = styled(Group).withConfig({ displayName: "vui--DateRangeGroup", componentId: "vui--1lv2dzh" }) `${inputBaseStyles} ${inputDisabledStyles} gap:${theme.sizes.sm};justify-content:space-between;z-index:1;&[data-focus-within]{box-shadow:0 0 0 4px ${theme.colors.secondary.blue.light};border-color:${theme.colors.secondary.blue.base};}&:has(*[data-invalid]){box-shadow:0 0 0 4px ${theme.colors.secondary.red.light};border:1px solid ${theme.colors.secondary.red.base};}*[data-placeholder],*[data-placeholder] + div,*:has(*[data-placeholder])~ .date-range-input-splitter{color:${theme.colors.neutral.ink.light};}.react-aria-DateInput{display:flex;align-items:center;cursor:text;caret-color:transparent;.react-aria-DateSegment{padding:0 1px;border-radius:${theme.radius.base};&[data-focused]{color:white;background-color:${theme.colors.secondary.blue.dark};&[data-invalid]{background-color:${theme.colors.secondary.red.lightest};}}&[data-invalid]{font-weight:bold;color:${theme.colors.secondary.red.dark};}&:focus-visible{outline:none;}}}`;
 
 export { DateRangeGroup };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/DateInputField/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Group } from 'react-aria-components';\nimport { getTextStyles } from 'Theme/utils';\nimport { theme } from '../../theme';\n\nexport const DateRangeGroup = styled(Group)<{ $hasError?: boolean }>`\n  ${getTextStyles(theme.text.body)}\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n\n  height: 22px;\n  z-index: 1;\n\n  border: 1px solid ${theme.colors.neutral.ink.lightest};\n  border-radius: ${theme.radius.base};\n\n  gap: ${theme.sizes.xs};\n  padding: ${theme.sizes.sm};\n\n  &[data-focus-within] {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n  }\n\n  &:has(*[data-invalid]) {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n    border: 1px solid ${theme.colors.secondary.red.base};\n  }\n\n  ${({ $hasError }) =>\n    !!$hasError &&\n    `\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n    border: 1px solid ${theme.colors.secondary.red.base};\n  `}\n\n  *[data-placeholder],\n  *[data-placeholder] + div,\n  *:has(*[data-placeholder]) ~ .date-range-input-splitter {\n    color: ${theme.colors.neutral.ink.light};\n  }\n\n  .date-range-input-splitter {\n    margin: 0 ${theme.sizes.sm};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${theme.colors.neutral.grey.light};\n\n    .react-aria-DateInput .react-aria-DateSegment,\n    .date-range-input-splitter {\n      cursor: not-allowed;\n      color: ${theme.colors.neutral.ink.light};\n    }\n  }\n  .react-aria-DateInput {\n    display: flex;\n    align-items: center;\n\n    cursor: text;\n    caret-color: transparent;\n\n    .react-aria-DateSegment {\n      padding: 0 1px;\n      border-radius: ${theme.radius.base};\n\n      &[data-focused] {\n        color: white;\n        background-color: ${theme.colors.secondary.blue.dark};\n\n        &[data-invalid] {\n          background-color: ${theme.colors.secondary.red.lightest};\n        }\n      }\n\n      &[data-invalid] {\n        font-weight: bold;\n        color: ${theme.colors.secondary.red.dark};\n      }\n\n      &:focus-visible {\n        outline: none;\n      }\n    }\n  }\n`;\n"],"names":[],"mappings":";;;;;AAKa,MAAA,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EACvC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,iHAUZ,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,eAAA,EACpC,KAAK,CAAC,MAAM,CAAC,IAAI,QAE3B,KAAK,CAAC,KAAK,CAAC,EAAE,YACV,KAAK,CAAC,KAAK,CAAC,EAAE,CAGC,2CAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,iDAIjC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA,kBAAA,EACpC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,KAGnD,CAAC,EAAE,SAAS,EAAE,KACd,CAAC,CAAC,SAAS;AACX,IAAA;AACwB,0BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA;AACpC,sBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AACpD,EAAA,CAAA,CAAA,4GAAA,EAKU,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,yCAI3B,KAAK,CAAC,KAAK,CAAC,EAAE,CAKN,uDAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,mGAAA,EAKxC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,iJAAA,EAYtB,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,8CAAA,EAIZ,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kCAAA,EAG9B,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,6CAMhD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/DateInputField/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Group } from 'react-aria-components';\nimport { theme } from '../../theme';\nimport { inputBaseStyles, inputDisabledStyles } from '../../utils/forms/inputStyles';\nimport { InputProps } from '../types';\n\nexport const DateRangeGroup = styled(Group)<InputProps>`\n  ${inputBaseStyles}\n  ${inputDisabledStyles}\n\n  gap: ${theme.sizes.sm};\n  justify-content: space-between;\n  z-index: 1;\n\n  &[data-focus-within] {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n    border-color: ${theme.colors.secondary.blue.base};\n  }\n\n  &:has(*[data-invalid]) {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n    border: 1px solid ${theme.colors.secondary.red.base};\n  }\n\n  *[data-placeholder],\n  *[data-placeholder] + div,\n  *:has(*[data-placeholder]) ~ .date-range-input-splitter {\n    color: ${theme.colors.neutral.ink.light};\n  }\n\n  .react-aria-DateInput {\n    display: flex;\n    align-items: center;\n\n    cursor: text;\n    caret-color: transparent;\n\n    .react-aria-DateSegment {\n      padding: 0 1px;\n      border-radius: ${theme.radius.base};\n\n      &[data-focused] {\n        color: white;\n        background-color: ${theme.colors.secondary.blue.dark};\n\n        &[data-invalid] {\n          background-color: ${theme.colors.secondary.red.lightest};\n        }\n      }\n\n      &[data-invalid] {\n        font-weight: bold;\n        color: ${theme.colors.secondary.red.dark};\n      }\n\n      &:focus-visible {\n        outline: none;\n      }\n    }\n  }\n`;\n"],"names":[],"mappings":";;;;;MAMa,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EACvC,eAAe,CAAA,CAAA,EACf,mBAAmB,CAEd,KAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,sFAKK,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,iBACzC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,iDAIxB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CACpC,kBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,gHAM1C,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAYpB,gJAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,8CAAA,EAIZ,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAG9B,kCAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAMhD,0CAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA,kCAAA;;;;"}

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

@@ -2,13 +2,14 @@ import { CSSProperties } from 'react';
 import { DateValue } from 'react-aria-components';
 import { CalendarDate } from '@internationalized/date';
 import { ButtonProps } from '../Button/types';
+import { InputProps } from '../types';
 export type DateValidationProps = {
     minValue?: DateValue;
     maxValue?: DateValue;
     disabledRanges?: CalendarDate[][] | undefined;
     disallowWeekends?: boolean | undefined;
 };
-type CommonDateInputProps = {
+type CommonDateInputProps = InputProps & {
     id?: string;
     className?: string;
     style?: CSSProperties;
@@ -16,9 +17,7 @@ type CommonDateInputProps = {
     rightAction?: ButtonProps;
     startValue?: DateValue | null;
     endValue?: DateValue | null;
-    isDisabled?: boolean;
     isReadOnly?: boolean;
-    hasError?: boolean;
     'aria-label'?: string;
     'aria-labelledby'?: string;
     'aria-describedby'?: string;

package/dist/components/DatePicker/DatePicker.cjs

@@ -50,7 +50,7 @@ const DatePicker = ({ className, style, value, onChange, 'aria-label': ariaLabel
     const isSelectedDateInvalid = React.useMemo(() => (value ? isDateUnavailable(value) : false), [isDateUnavailable, value]);
     const error = withLabelProps.error || (isSelectedDateInvalid ? 'Invalid date selection' : undefined);
     return (React__default.default.createElement(React__default.default.Fragment, null,
-        React__default.default.createElement(index.DateInputField, { isDisabled: isDisabled, "aria-label": ariaLabel, startValue: value, rightActionRef: openDropdownRef, rightAction: {
+        React__default.default.createElement(index.DateInputField, { disabled: isDisabled, "aria-label": ariaLabel, startValue: value, rightActionRef: openDropdownRef, rightAction: {
                 iconSlot: React__default.default.createElement(CalendarIcon.CalendarIcon, null),
                 'aria-label': 'Open Calendar',
                 onClick: () => setShouldShowDropdown(!shouldShowDropdown),

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 '../../tempIcons/CalendarIcon';\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        isDisabled={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 { WithLabelsProps } from '../../hoc/withLabels/withLabels';\nimport { CalendarIcon } from '../../tempIcons/CalendarIcon';\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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"}

package/dist/components/DatePicker/DatePicker.js

@@ -44,7 +44,7 @@ const DatePicker = ({ className, style, value, onChange, 'aria-label': ariaLabel
     const isSelectedDateInvalid = useMemo(() => (value ? isDateUnavailable(value) : false), [isDateUnavailable, value]);
     const error = withLabelProps.error || (isSelectedDateInvalid ? 'Invalid date selection' : undefined);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(DateInputField, { isDisabled: isDisabled, "aria-label": ariaLabel, startValue: value, rightActionRef: openDropdownRef, rightAction: {
+        React__default.createElement(DateInputField, { disabled: isDisabled, "aria-label": ariaLabel, startValue: value, rightActionRef: openDropdownRef, rightAction: {
                 iconSlot: React__default.createElement(CalendarIcon, null),
                 'aria-label': 'Open Calendar',
                 onClick: () => setShouldShowDropdown(!shouldShowDropdown),

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 '../../tempIcons/CalendarIcon';\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        isDisabled={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 { WithLabelsProps } from '../../hoc/withLabels/withLabels';\nimport { CalendarIcon } from '../../tempIcons/CalendarIcon';\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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"}

package/dist/components/DatePicker/styled.cjs

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const DatePickerFooter = styled__default.default.footer.withConfig({ displayName: "vui--DatePickerFooter", componentId: "vui--ghkisb" }) `display:flex;justify-content:end;margin-top:${sizes.sizes.base};margin-left:-${sizes.sizes.base};margin-right:-${sizes.sizes.base};padding:${sizes.sizes.base};padding-bottom:0;border-top:${sizes.sizes.line} solid ${colors.colors.neutral.grey.base};`;
+const DatePickerFooter = styled__default.default.footer.withConfig({ displayName: "vui--DatePickerFooter", componentId: "vui--1bh2rdw" }) `display:flex;justify-content:end;margin-top:${sizes.sizes.base};margin-left:-${sizes.sizes.base};margin-right:-${sizes.sizes.base};padding:${sizes.sizes.base};padding-bottom:0;border-top:${sizes.sizes.line} solid ${colors.colors.neutral.grey.base};`;
 
 exports.DatePickerFooter = DatePickerFooter;
 //# sourceMappingURL=styled.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/DatePicker/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { colors } from 'Theme/modules/colors';\nimport { sizes } from 'Theme/modules/sizes';\n\nexport const DatePickerFooter = styled.footer`\n  display: flex;\n  justify-content: end;\n\n  margin-top: ${sizes.base};\n  margin-left: -${sizes.base};\n  margin-right: -${sizes.base};\n\n  padding: ${sizes.base};\n  padding-bottom: 0;\n\n  border-top: ${sizes.line} solid ${colors.neutral.grey.base};\n`;\n"],"names":["styled","sizes","colors"],"mappings":";;;;;;;;;;AAIa,MAAA,gBAAgB,GAAGA,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,4CAAA,EAI7BC,WAAK,CAAC,IAAI,CACR,cAAA,EAAAA,WAAK,CAAC,IAAI,kBACTA,WAAK,CAAC,IAAI,CAAA,SAAA,EAEhBA,WAAK,CAAC,IAAI,CAGP,6BAAA,EAAAA,WAAK,CAAC,IAAI,CAAA,OAAA,EAAUC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/DatePicker/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { colors } from 'Theme/modules/colors';\nimport { sizes } from 'Theme/modules/sizes';\n\nexport const DatePickerFooter = styled.footer`\n  display: flex;\n  justify-content: end;\n\n  margin-top: ${sizes.base};\n  margin-left: -${sizes.base};\n  margin-right: -${sizes.base};\n\n  padding: ${sizes.base};\n  padding-bottom: 0;\n\n  border-top: ${sizes.line} solid ${colors.neutral.grey.base};\n`;\n"],"names":["styled","sizes","colors"],"mappings":";;;;;;;;;;AAIa,MAAA,gBAAgB,GAAGA,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,4CAAA,EAI7BC,WAAK,CAAC,IAAI,CACR,cAAA,EAAAA,WAAK,CAAC,IAAI,kBACTA,WAAK,CAAC,IAAI,CAAA,SAAA,EAEhBA,WAAK,CAAC,IAAI,CAGP,6BAAA,EAAAA,WAAK,CAAC,IAAI,CAAA,OAAA,EAAUC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}

package/dist/components/DatePicker/styled.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { colors } from '../../theme/modules/colors.js';
 import { sizes } from '../../theme/modules/sizes.js';
 
-const DatePickerFooter = styled.footer.withConfig({ displayName: "vui--DatePickerFooter", componentId: "vui--ghkisb" }) `display:flex;justify-content:end;margin-top:${sizes.base};margin-left:-${sizes.base};margin-right:-${sizes.base};padding:${sizes.base};padding-bottom:0;border-top:${sizes.line} solid ${colors.neutral.grey.base};`;
+const DatePickerFooter = styled.footer.withConfig({ displayName: "vui--DatePickerFooter", componentId: "vui--1bh2rdw" }) `display:flex;justify-content:end;margin-top:${sizes.base};margin-left:-${sizes.base};margin-right:-${sizes.base};padding:${sizes.base};padding-bottom:0;border-top:${sizes.line} solid ${colors.neutral.grey.base};`;
 
 export { DatePickerFooter };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/DatePicker/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { colors } from 'Theme/modules/colors';\nimport { sizes } from 'Theme/modules/sizes';\n\nexport const DatePickerFooter = styled.footer`\n  display: flex;\n  justify-content: end;\n\n  margin-top: ${sizes.base};\n  margin-left: -${sizes.base};\n  margin-right: -${sizes.base};\n\n  padding: ${sizes.base};\n  padding-bottom: 0;\n\n  border-top: ${sizes.line} solid ${colors.neutral.grey.base};\n`;\n"],"names":[],"mappings":";;;;AAIa,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,4CAAA,EAI7B,KAAK,CAAC,IAAI,CACR,cAAA,EAAA,KAAK,CAAC,IAAI,kBACT,KAAK,CAAC,IAAI,CAAA,SAAA,EAEhB,KAAK,CAAC,IAAI,CAGP,6BAAA,EAAA,KAAK,CAAC,IAAI,CAAA,OAAA,EAAU,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/DatePicker/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { colors } from 'Theme/modules/colors';\nimport { sizes } from 'Theme/modules/sizes';\n\nexport const DatePickerFooter = styled.footer`\n  display: flex;\n  justify-content: end;\n\n  margin-top: ${sizes.base};\n  margin-left: -${sizes.base};\n  margin-right: -${sizes.base};\n\n  padding: ${sizes.base};\n  padding-bottom: 0;\n\n  border-top: ${sizes.line} solid ${colors.neutral.grey.base};\n`;\n"],"names":[],"mappings":";;;;AAIa,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,4CAAA,EAI7B,KAAK,CAAC,IAAI,CACR,cAAA,EAAA,KAAK,CAAC,IAAI,kBACT,KAAK,CAAC,IAAI,CAAA,SAAA,EAEhB,KAAK,CAAC,IAAI,CAGP,6BAAA,EAAA,KAAK,CAAC,IAAI,CAAA,OAAA,EAAU,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}

package/dist/components/DateRangePicker/DateRangePicker.cjs

@@ -67,7 +67,7 @@ disabledRanges, disallowWeekends, maxValue, minValue, selectedPreset, setSelecte
     }, [matchedPreset, setSelectedPreset]);
     return (React__default.default.createElement(Stack.Stack, { direction: "vertical", alignX: "stretch", spacing: "0", style: { gap: index.theme.sizes.base, ...style }, className: className, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel },
         showDatePresets && (React__default.default.createElement(Select.Select, { disabled: isDisabled, label: "Date Range", options: constants.DATE_RANGE_OPTIONS, value: selectedPreset === null || selectedPreset === undefined ? undefined : selectedPreset.value, onChange: updateRangePreset })),
-        React__default.default.createElement(index$1.DateInputField, { isRangeInput: true, isDisabled: isDisabled, label: "Start date - End date", onChangeStartDate: updateDateSegment('start'), onChangeEndDate: updateDateSegment('end'), startValue: selectedRange && selectedRange.start, endValue: selectedRange && selectedRange.end, error: isDateRangeInvalid ? 'Range contains invalid dates' : undefined, disabledRanges: disabledRanges, disallowWeekends: disallowWeekends, maxValue: maxValue, minValue: minValue }),
+        React__default.default.createElement(index$1.DateInputField, { isRangeInput: true, disabled: isDisabled, label: "Start date - End date", onChangeStartDate: updateDateSegment('start'), onChangeEndDate: updateDateSegment('end'), startValue: selectedRange && selectedRange.start, endValue: selectedRange && selectedRange.end, error: isDateRangeInvalid ? 'Range contains invalid dates' : undefined, disabledRanges: disabledRanges, disallowWeekends: disallowWeekends, maxValue: maxValue, minValue: minValue }),
         previousPeriodProps.showPreviousPeriod && React__default.default.createElement(ComparePreviousPeriod.ComparePreviousPeriod, { ...previousPeriodProps }),
         React__default.default.createElement(Divider.Divider, null),
         React__default.default.createElement(Stack.Stack, { alignX: "center" },

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        isDisabled={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) => {\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

@@ -61,7 +61,7 @@ disabledRanges, disallowWeekends, maxValue, minValue, selectedPreset, setSelecte
     }, [matchedPreset, setSelectedPreset]);
     return (React__default.createElement(Stack, { direction: "vertical", alignX: "stretch", spacing: "0", style: { gap: theme.sizes.base, ...style }, className: className, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel },
         showDatePresets && (React__default.createElement(Select, { disabled: isDisabled, label: "Date Range", options: DATE_RANGE_OPTIONS, value: selectedPreset === null || selectedPreset === undefined ? undefined : selectedPreset.value, onChange: updateRangePreset })),
-        React__default.createElement(DateInputField, { isRangeInput: true, isDisabled: isDisabled, label: "Start date - End date", onChangeStartDate: updateDateSegment('start'), onChangeEndDate: updateDateSegment('end'), startValue: selectedRange && selectedRange.start, endValue: selectedRange && selectedRange.end, error: isDateRangeInvalid ? 'Range contains invalid dates' : undefined, disabledRanges: disabledRanges, disallowWeekends: disallowWeekends, maxValue: maxValue, minValue: minValue }),
+        React__default.createElement(DateInputField, { isRangeInput: true, disabled: isDisabled, label: "Start date - End date", onChangeStartDate: updateDateSegment('start'), onChangeEndDate: updateDateSegment('end'), startValue: selectedRange && selectedRange.start, endValue: selectedRange && selectedRange.end, error: isDateRangeInvalid ? 'Range contains invalid dates' : undefined, disabledRanges: disabledRanges, disallowWeekends: disallowWeekends, maxValue: maxValue, minValue: minValue }),
         previousPeriodProps.showPreviousPeriod && React__default.createElement(ComparePreviousPeriod, { ...previousPeriodProps }),
         React__default.createElement(Divider, null),
         React__default.createElement(Stack, { alignX: "center" },

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

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

@@ -7,7 +7,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Divider = styled__default.default.div.withConfig({ displayName: "vui--Divider", componentId: "vui--boi54h" }) `margin:0 -${index.theme.sizes.base};border-top:1px solid ${index.theme.colors.neutral.grey.base};`;
+const Divider = styled__default.default.div.withConfig({ displayName: "vui--Divider", componentId: "vui--v6fsx5" }) `margin:0 -${index.theme.sizes.base};border-top:1px solid ${index.theme.colors.neutral.grey.base};`;
 
 exports.Divider = Divider;
 //# sourceMappingURL=Divider.cjs.map

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

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

package/dist/components/DescriptionList/DescriptionList.cjs

@@ -9,12 +9,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const List = styled__default.default.dl.withConfig({ displayName: "vui--List", componentId: "vui--1lcnd5n" }) `margin:unset;& > * + *{margin-top:${index.theme.sizes.base};}`;
-const Item = styled__default.default.div.withConfig({ displayName: "vui--Item", componentId: "vui--t25k5o" }) `& > * + *{margin-top:${index.theme.sizes.xs};}`;
-const ItemRow = styled__default.default.div.withConfig({ displayName: "vui--ItemRow", componentId: "vui--j013c4" }) `display:flex;justify-content:space-between;& > * + *{margin-left:${index.theme.sizes.base};}`;
-const DescriptionContainer = styled__default.default.div.withConfig({ displayName: "vui--DescriptionContainer", componentId: "vui--12tjaz" }) `text-align:right;& > * + *{margin-top:${index.theme.sizes.xs};}`;
-const Term = styled__default.default.dt.withConfig({ displayName: "vui--Term", componentId: "vui--zavj5i" }) `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--7wguee" }) `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 List = styled__default.default.dl.withConfig({ displayName: "vui--List", componentId: "vui--lwzabs" }) `margin:unset;& > * + *{margin-top:${index.theme.sizes.base};}`;
+const Item = styled__default.default.div.withConfig({ displayName: "vui--Item", componentId: "vui--1dxs1r3" }) `& > * + *{margin-top:${index.theme.sizes.xs};}`;
+const ItemRow = styled__default.default.div.withConfig({ displayName: "vui--ItemRow", componentId: "vui--t299mh" }) `display:flex;justify-content:space-between;& > * + *{margin-left:${index.theme.sizes.base};}`;
+const DescriptionContainer = styled__default.default.div.withConfig({ displayName: "vui--DescriptionContainer", componentId: "vui--14xbcpp" }) `text-align:right;& > * + *{margin-top:${index.theme.sizes.xs};}`;
+const Term = styled__default.default.dt.withConfig({ displayName: "vui--Term", componentId: "vui--taczwx" }) `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--hqasxa" }) `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)) {

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 styled from 'styled-components';\nimport { theme } from '../../theme';\n\nconst List = styled.dl`\n  margin: unset;\n\n  & > * + * {\n    margin-top: ${theme.sizes.base};\n  }\n`;\n\nconst Item = styled.div`\n  & > * + * {\n    margin-top: ${theme.sizes.xs};\n  }\n`;\n\nconst ItemRow = styled.div`\n  display: flex;\n  justify-content: space-between;\n\n  & > * + * {\n    margin-left: ${theme.sizes.base};\n  }\n`;\n\nconst DescriptionContainer = styled.div`\n  text-align: right;\n\n  & > * + * {\n    margin-top: ${theme.sizes.xs};\n  }\n`;\n\nconst Term = styled.dt`\n  font-family: ${theme.text.bodyBold.fontFamily};\n  font-size: ${theme.text.bodyBold.fontSize};\n  font-weight: ${theme.text.bodyBold.fontWeight};\n  line-height: ${theme.text.bodyBold.lineHeight};\n  color: ${theme.text.bodyBold.color};\n`;\n\nconst Description = styled.dd`\n  margin-left: unset;\n\n  font-family: ${theme.text.body.fontFamily};\n  font-size: ${theme.text.body.fontSize};\n  font-weight: ${theme.text.body.fontWeight};\n  line-height: ${theme.text.body.lineHeight};\n  color: ${theme.text.body.color};\n`;\n\ntype DescriptionListItem = {\n  term: string;\n  description: string | string[];\n};\n\nexport interface DescriptionListProps {\n  items: DescriptionListItem[];\n  horizontal?: boolean;\n}\n\nexport const DescriptionList = ({ items, horizontal }: DescriptionListProps) => {\n  const renderDescription = (description: string | string[]) => {\n    if (Array.isArray(description)) {\n      return description.map((d) => <Description key={d}>{d}</Description>);\n    }\n    return <Description>{description}</Description>;\n  };\n\n  const renderItem = (item: DescriptionListItem) => {\n    if (horizontal) {\n      return (\n        <ItemRow key={item.term}>\n          <Term>{item.term}</Term>\n          <DescriptionContainer>{renderDescription(item.description)}</DescriptionContainer>\n        </ItemRow>\n      );\n    }\n    return (\n      <Item key={item.term}>\n        <Term>{item.term}</Term>\n        {renderDescription(item.description)}\n      </Item>\n    );\n  };\n\n  return <List>{items.map(renderItem)}</List>;\n};\n"],"names":["styled","theme","React"],"mappings":"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"}

package/dist/components/DescriptionList/DescriptionList.js

@@ -2,12 +2,12 @@ import React__default from 'react';
 import styled from 'styled-components';
 import { theme } from '../../theme/index.js';
 
-const List = styled.dl.withConfig({ displayName: "vui--List", componentId: "vui--1lcnd5n" }) `margin:unset;& > * + *{margin-top:${theme.sizes.base};}`;
-const Item = styled.div.withConfig({ displayName: "vui--Item", componentId: "vui--t25k5o" }) `& > * + *{margin-top:${theme.sizes.xs};}`;
-const ItemRow = styled.div.withConfig({ displayName: "vui--ItemRow", componentId: "vui--j013c4" }) `display:flex;justify-content:space-between;& > * + *{margin-left:${theme.sizes.base};}`;
-const DescriptionContainer = styled.div.withConfig({ displayName: "vui--DescriptionContainer", componentId: "vui--12tjaz" }) `text-align:right;& > * + *{margin-top:${theme.sizes.xs};}`;
-const Term = styled.dt.withConfig({ displayName: "vui--Term", componentId: "vui--zavj5i" }) `font-family:${theme.text.bodyBold.fontFamily};font-size:${theme.text.bodyBold.fontSize};font-weight:${theme.text.bodyBold.fontWeight};line-height:${theme.text.bodyBold.lineHeight};color:${theme.text.bodyBold.color};`;
-const Description = styled.dd.withConfig({ displayName: "vui--Description", componentId: "vui--7wguee" }) `margin-left:unset;font-family:${theme.text.body.fontFamily};font-size:${theme.text.body.fontSize};font-weight:${theme.text.body.fontWeight};line-height:${theme.text.body.lineHeight};color:${theme.text.body.color};`;
+const List = styled.dl.withConfig({ displayName: "vui--List", componentId: "vui--lwzabs" }) `margin:unset;& > * + *{margin-top:${theme.sizes.base};}`;
+const Item = styled.div.withConfig({ displayName: "vui--Item", componentId: "vui--1dxs1r3" }) `& > * + *{margin-top:${theme.sizes.xs};}`;
+const ItemRow = styled.div.withConfig({ displayName: "vui--ItemRow", componentId: "vui--t299mh" }) `display:flex;justify-content:space-between;& > * + *{margin-left:${theme.sizes.base};}`;
+const DescriptionContainer = styled.div.withConfig({ displayName: "vui--DescriptionContainer", componentId: "vui--14xbcpp" }) `text-align:right;& > * + *{margin-top:${theme.sizes.xs};}`;
+const Term = styled.dt.withConfig({ displayName: "vui--Term", componentId: "vui--taczwx" }) `font-family:${theme.text.bodyBold.fontFamily};font-size:${theme.text.bodyBold.fontSize};font-weight:${theme.text.bodyBold.fontWeight};line-height:${theme.text.bodyBold.lineHeight};color:${theme.text.bodyBold.color};`;
+const Description = styled.dd.withConfig({ displayName: "vui--Description", componentId: "vui--hqasxa" }) `margin-left:unset;font-family:${theme.text.body.fontFamily};font-size:${theme.text.body.fontSize};font-weight:${theme.text.body.fontWeight};line-height:${theme.text.body.lineHeight};color:${theme.text.body.color};`;
 const DescriptionList = ({ items, horizontal }) => {
     const renderDescription = (description) => {
         if (Array.isArray(description)) {

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

@@ -1 +1 @@
-{"version":3,"file":"DescriptionList.js","sources":["../../../src/components/DescriptionList/DescriptionList.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../theme';\n\nconst List = styled.dl`\n  margin: unset;\n\n  & > * + * {\n    margin-top: ${theme.sizes.base};\n  }\n`;\n\nconst Item = styled.div`\n  & > * + * {\n    margin-top: ${theme.sizes.xs};\n  }\n`;\n\nconst ItemRow = styled.div`\n  display: flex;\n  justify-content: space-between;\n\n  & > * + * {\n    margin-left: ${theme.sizes.base};\n  }\n`;\n\nconst DescriptionContainer = styled.div`\n  text-align: right;\n\n  & > * + * {\n    margin-top: ${theme.sizes.xs};\n  }\n`;\n\nconst Term = styled.dt`\n  font-family: ${theme.text.bodyBold.fontFamily};\n  font-size: ${theme.text.bodyBold.fontSize};\n  font-weight: ${theme.text.bodyBold.fontWeight};\n  line-height: ${theme.text.bodyBold.lineHeight};\n  color: ${theme.text.bodyBold.color};\n`;\n\nconst Description = styled.dd`\n  margin-left: unset;\n\n  font-family: ${theme.text.body.fontFamily};\n  font-size: ${theme.text.body.fontSize};\n  font-weight: ${theme.text.body.fontWeight};\n  line-height: ${theme.text.body.lineHeight};\n  color: ${theme.text.body.color};\n`;\n\ntype DescriptionListItem = {\n  term: string;\n  description: string | string[];\n};\n\nexport interface DescriptionListProps {\n  items: DescriptionListItem[];\n  horizontal?: boolean;\n}\n\nexport const DescriptionList = ({ items, horizontal }: DescriptionListProps) => {\n  const renderDescription = (description: string | string[]) => {\n    if (Array.isArray(description)) {\n      return description.map((d) => <Description key={d}>{d}</Description>);\n    }\n    return <Description>{description}</Description>;\n  };\n\n  const renderItem = (item: DescriptionListItem) => {\n    if (horizontal) {\n      return (\n        <ItemRow key={item.term}>\n          <Term>{item.term}</Term>\n          <DescriptionContainer>{renderDescription(item.description)}</DescriptionContainer>\n        </ItemRow>\n      );\n    }\n    return (\n      <Item key={item.term}>\n        <Term>{item.term}</Term>\n        {renderDescription(item.description)}\n      </Item>\n    );\n  };\n\n  return <List>{items.map(renderItem)}</List>;\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"DescriptionList.js","sources":["../../../src/components/DescriptionList/DescriptionList.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../theme';\n\nconst List = styled.dl`\n  margin: unset;\n\n  & > * + * {\n    margin-top: ${theme.sizes.base};\n  }\n`;\n\nconst Item = styled.div`\n  & > * + * {\n    margin-top: ${theme.sizes.xs};\n  }\n`;\n\nconst ItemRow = styled.div`\n  display: flex;\n  justify-content: space-between;\n\n  & > * + * {\n    margin-left: ${theme.sizes.base};\n  }\n`;\n\nconst DescriptionContainer = styled.div`\n  text-align: right;\n\n  & > * + * {\n    margin-top: ${theme.sizes.xs};\n  }\n`;\n\nconst Term = styled.dt`\n  font-family: ${theme.text.bodyBold.fontFamily};\n  font-size: ${theme.text.bodyBold.fontSize};\n  font-weight: ${theme.text.bodyBold.fontWeight};\n  line-height: ${theme.text.bodyBold.lineHeight};\n  color: ${theme.text.bodyBold.color};\n`;\n\nconst Description = styled.dd`\n  margin-left: unset;\n\n  font-family: ${theme.text.body.fontFamily};\n  font-size: ${theme.text.body.fontSize};\n  font-weight: ${theme.text.body.fontWeight};\n  line-height: ${theme.text.body.lineHeight};\n  color: ${theme.text.body.color};\n`;\n\ntype DescriptionListItem = {\n  term: string;\n  description: string | string[];\n};\n\nexport interface DescriptionListProps {\n  items: DescriptionListItem[];\n  horizontal?: boolean;\n}\n\nexport const DescriptionList = ({ items, horizontal }: DescriptionListProps) => {\n  const renderDescription = (description: string | string[]) => {\n    if (Array.isArray(description)) {\n      return description.map((d) => <Description key={d}>{d}</Description>);\n    }\n    return <Description>{description}</Description>;\n  };\n\n  const renderItem = (item: DescriptionListItem) => {\n    if (horizontal) {\n      return (\n        <ItemRow key={item.term}>\n          <Term>{item.term}</Term>\n          <DescriptionContainer>{renderDescription(item.description)}</DescriptionContainer>\n        </ItemRow>\n      );\n    }\n    return (\n      <Item key={item.term}>\n        <Term>{item.term}</Term>\n        {renderDescription(item.description)}\n      </Item>\n    );\n  };\n\n  return <List>{items.map(renderItem)}</List>;\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/DetailPage/styled.cjs

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

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

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

package/dist/components/DetailPage/styled.js

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

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

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