@veeqo/ui 14.10.3 → 14.10.4-beta-2

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

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

package/dist/components/CardHeader/CardHeader.js

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/CopyToClipboard/CopyToClipboard.cjs

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

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

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

package/dist/components/CopyToClipboard/CopyToClipboard.js

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

package/dist/components/CopyToClipboard/CopyToClipboard.js.map

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

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._xsButton_v3921_1 {\n  padding: 1px;\n  height: unset;\n}\n._xsButton_v3921_1 span {\n  height: var(--sizes-base);\n  width: var(--sizes-base);\n  top: unset;\n}");
+var styles = {"xsButton":"_xsButton_v3921_1"};
+
+module.exports = styles;
+//# sourceMappingURL=CopyToClipboard.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CopyToClipboard.module.scss.cjs","sources":["../../../src/components/CopyToClipboard/CopyToClipboard.module.scss"],"sourcesContent":[".xsButton {\n  padding: 1px;\n  height: unset;\n\n  span {\n    height: var(--sizes-base);\n    width: var(--sizes-base);\n    top: unset;\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,oKAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._xsButton_v3921_1 {\n  padding: 1px;\n  height: unset;\n}\n._xsButton_v3921_1 span {\n  height: var(--sizes-base);\n  width: var(--sizes-base);\n  top: unset;\n}");
+var styles = {"xsButton":"_xsButton_v3921_1"};
+
+export { styles as default };
+//# sourceMappingURL=CopyToClipboard.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CopyToClipboard.module.scss.js","sources":["../../../src/components/CopyToClipboard/CopyToClipboard.module.scss"],"sourcesContent":[".xsButton {\n  padding: 1px;\n  height: unset;\n\n  span {\n    height: var(--sizes-base);\n    width: var(--sizes-base);\n    top: unset;\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,oKAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA;;;;"}

package/dist/components/DateInputField/DateInputField.cjs

@@ -2,18 +2,16 @@
 
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
-var styled = require('./styled.cjs');
+var DateInputField_module = require('./DateInputField.module.scss.cjs');
 var Button = require('../Button/Button.cjs');
 var Stack = require('../Stack/Stack.cjs');
-require('../Calendars/components/RangeCalendar/styled.cjs');
 require('../Grid/index.cjs');
-require('../Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.cjs');
 require('@internationalized/date');
 require('../Calendars/types.cjs');
 require('../Calendars/data/constants.cjs');
 require('../Calendars/components/subcomponents/CalendarHeading.cjs');
 var useIsDateUnavailable = require('../Calendars/data/useIsDateUnavailable.cjs');
-require('../Calendars/components/Calendar/styled.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -44,7 +42,7 @@ const DateInputField = ({ id, className, style, shouldForceLeadingZeros = true,
         setIsEndInvalid(isRangeInput && endValue ? validateDate(endValue) !== true : false);
     }, [startValue, endValue, isRangeInput, validateDate]);
     return (React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignX: "stretch", alignY: "center", spacing: 0 },
-        React__default.default.createElement(styled.DateRangeGroup, { ref: rangeRef, style: style, className: className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : `${id}-label`, hasError: hasError, isDisabled: disabled },
+        React__default.default.createElement(reactAriaComponents.Group, { ref: rangeRef, style: style, className: buildClassnames.buildClassnames([DateInputField_module.dateRangeGroup, hasError && DateInputField_module.error, className]), "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : `${id}-label`, isDisabled: disabled },
             React__default.default.createElement(Stack.Stack, { spacing: "sm", direction: "horizontal", alignX: "center" },
                 React__default.default.createElement(reactAriaComponents.DateField, { shouldForceLeadingZeros: shouldForceLeadingZeros, onChange: isRangeInput ? onChangeStartDate : onChange, value: startValue, validate: validateDate, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : `${id}-label`, "aria-label": isRangeInput ? 'start date' : 'date', isDisabled: disabled, isReadOnly: isReadOnly, isInvalid: isStartInvalid, ...validationProps },
                     React__default.default.createElement(reactAriaComponents.DateInput, { slot: "start" }, (segment) => React__default.default.createElement(reactAriaComponents.DateSegment, { segment: segment }))),

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

@@ -1 +1 @@
-{"version":3,"file":"DateInputField.cjs","sources":["../../../src/components/DateInputField/DateInputField.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport { DateField, DateInput, DateRange, DateSegment, DateValue } from 'react-aria-components';\nimport { DateRangeGroup } from './styled';\nimport { DateInputFieldProps } from './types';\nimport { Button } from '../Button';\nimport { Stack } from '../Stack';\nimport { useIsDateUnavailable } from '../Calendars';\n\nexport const DateInputField = ({\n  id,\n  className,\n  style,\n  shouldForceLeadingZeros = true,\n  rightAction,\n  startValue,\n  endValue,\n  disabled,\n  isReadOnly,\n  isRangeInput = false,\n  hasError,\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedBy,\n  'aria-labelledby': ariaLabelledBy,\n  onChange,\n  onChangeStartDate,\n  onChangeEndDate,\n  rangeRef,\n  rightActionRef,\n  ...validationProps\n}: DateInputFieldProps) => {\n  const { isDateUnavailable, isDateRangeUnavailable } = useIsDateUnavailable(validationProps);\n  const [isStartInvalid, setIsStartInvalid] = useState(false);\n  const [isEndInvalid, setIsEndInvalid] = useState(false);\n\n  const validateDate = useCallback(\n    (value: DateValue): true | string => {\n      if (!value) return 'no date';\n      if (!isRangeInput) return isDateUnavailable(value) ? 'Invalid date selection' : true;\n\n      const range = {\n        start: value === startValue ? value : startValue,\n        end: value === endValue ? value : endValue,\n      };\n\n      if (!range.start || !range.end) {\n        return isDateUnavailable(value) ? 'Invalid date selection' : true;\n      }\n      if (isDateRangeUnavailable(range as DateRange)) return 'Invalid range selection';\n\n      return true;\n    },\n    [isRangeInput, startValue, endValue, isDateUnavailable, isDateRangeUnavailable],\n  );\n\n  useEffect(() => {\n    setIsStartInvalid(startValue ? validateDate(startValue) !== true : false);\n    setIsEndInvalid(isRangeInput && endValue ? validateDate(endValue) !== true : false);\n  }, [startValue, endValue, isRangeInput, validateDate]);\n\n  return (\n    <Stack direction=\"horizontal\" alignX=\"stretch\" alignY=\"center\" spacing={0}>\n      <DateRangeGroup\n        ref={rangeRef}\n        style={style}\n        className={className}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        hasError={hasError}\n        isDisabled={disabled}\n      >\n        <Stack spacing=\"sm\" direction=\"horizontal\" alignX=\"center\">\n          <DateField\n            shouldForceLeadingZeros={shouldForceLeadingZeros}\n            onChange={isRangeInput ? onChangeStartDate : onChange}\n            value={startValue}\n            validate={validateDate}\n            aria-describedby={ariaDescribedBy}\n            aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n            aria-label={isRangeInput ? 'start date' : 'date'}\n            isDisabled={disabled}\n            isReadOnly={isReadOnly}\n            isInvalid={isStartInvalid}\n            {...validationProps}\n          >\n            <DateInput slot=\"start\">{(segment) => <DateSegment segment={segment} />}</DateInput>\n          </DateField>\n\n          {isRangeInput && (\n            <>\n              <span className=\"date-range-input-splitter\" aria-hidden=\"true\">\n                -\n              </span>\n              <DateField\n                shouldForceLeadingZeros={shouldForceLeadingZeros}\n                onChange={onChangeEndDate}\n                value={endValue}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n                aria-label=\"end date\"\n                isDisabled={disabled}\n                isReadOnly={isReadOnly}\n                validate={validateDate}\n                isInvalid={isEndInvalid}\n                {...validationProps}\n              >\n                <DateInput slot=\"end\">{(segment) => <DateSegment segment={segment} />}</DateInput>\n              </DateField>\n            </>\n          )}\n        </Stack>\n\n        {rightAction && (\n          <Button\n            type=\"button\"\n            ref={rightActionRef}\n            variant=\"flat\"\n            style={{\n              padding: '2px',\n              height: 'unset',\n            }}\n            {...rightAction}\n          />\n        )}\n      </DateRangeGroup>\n    </Stack>\n  );\n};\n"],"names":["useIsDateUnavailable","useState","useCallback","useEffect","React","Stack","DateRangeGroup","DateField","DateInput","DateSegment","Button"],"mappings":"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"}
+{"version":3,"file":"DateInputField.cjs","sources":["../../../src/components/DateInputField/DateInputField.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport {\n  DateField,\n  DateInput,\n  DateRange,\n  DateSegment,\n  DateValue,\n  Group,\n} from 'react-aria-components';\nimport styles from './DateInputField.module.scss';\nimport { DateInputFieldProps } from './types';\nimport { Button } from '../Button';\nimport { Stack } from '../Stack';\nimport { useIsDateUnavailable } from '../Calendars';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\nexport const DateInputField = ({\n  id,\n  className,\n  style,\n  shouldForceLeadingZeros = true,\n  rightAction,\n  startValue,\n  endValue,\n  disabled,\n  isReadOnly,\n  isRangeInput = false,\n  hasError,\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedBy,\n  'aria-labelledby': ariaLabelledBy,\n  onChange,\n  onChangeStartDate,\n  onChangeEndDate,\n  rangeRef,\n  rightActionRef,\n  ...validationProps\n}: DateInputFieldProps) => {\n  const { isDateUnavailable, isDateRangeUnavailable } = useIsDateUnavailable(validationProps);\n  const [isStartInvalid, setIsStartInvalid] = useState(false);\n  const [isEndInvalid, setIsEndInvalid] = useState(false);\n\n  const validateDate = useCallback(\n    (value: DateValue): true | string => {\n      if (!value) return 'no date';\n      if (!isRangeInput) return isDateUnavailable(value) ? 'Invalid date selection' : true;\n\n      const range = {\n        start: value === startValue ? value : startValue,\n        end: value === endValue ? value : endValue,\n      };\n\n      if (!range.start || !range.end) {\n        return isDateUnavailable(value) ? 'Invalid date selection' : true;\n      }\n      if (isDateRangeUnavailable(range as DateRange)) return 'Invalid range selection';\n\n      return true;\n    },\n    [isRangeInput, startValue, endValue, isDateUnavailable, isDateRangeUnavailable],\n  );\n\n  useEffect(() => {\n    setIsStartInvalid(startValue ? validateDate(startValue) !== true : false);\n    setIsEndInvalid(isRangeInput && endValue ? validateDate(endValue) !== true : false);\n  }, [startValue, endValue, isRangeInput, validateDate]);\n\n  return (\n    <Stack direction=\"horizontal\" alignX=\"stretch\" alignY=\"center\" spacing={0}>\n      <Group\n        ref={rangeRef}\n        style={style}\n        className={buildClassnames([styles.dateRangeGroup, hasError && styles.error, className])}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        isDisabled={disabled}\n      >\n        <Stack spacing=\"sm\" direction=\"horizontal\" alignX=\"center\">\n          <DateField\n            shouldForceLeadingZeros={shouldForceLeadingZeros}\n            onChange={isRangeInput ? onChangeStartDate : onChange}\n            value={startValue}\n            validate={validateDate}\n            aria-describedby={ariaDescribedBy}\n            aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n            aria-label={isRangeInput ? 'start date' : 'date'}\n            isDisabled={disabled}\n            isReadOnly={isReadOnly}\n            isInvalid={isStartInvalid}\n            {...validationProps}\n          >\n            <DateInput slot=\"start\">{(segment) => <DateSegment segment={segment} />}</DateInput>\n          </DateField>\n\n          {isRangeInput && (\n            <>\n              <span className=\"date-range-input-splitter\" aria-hidden=\"true\">\n                -\n              </span>\n              <DateField\n                shouldForceLeadingZeros={shouldForceLeadingZeros}\n                onChange={onChangeEndDate}\n                value={endValue}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n                aria-label=\"end date\"\n                isDisabled={disabled}\n                isReadOnly={isReadOnly}\n                validate={validateDate}\n                isInvalid={isEndInvalid}\n                {...validationProps}\n              >\n                <DateInput slot=\"end\">{(segment) => <DateSegment segment={segment} />}</DateInput>\n              </DateField>\n            </>\n          )}\n        </Stack>\n\n        {rightAction && (\n          <Button\n            type=\"button\"\n            ref={rightActionRef}\n            variant=\"flat\"\n            style={{\n              padding: '2px',\n              height: 'unset',\n            }}\n            {...rightAction}\n          />\n        )}\n      </Group>\n    </Stack>\n  );\n};\n"],"names":["useIsDateUnavailable","useState","useCallback","useEffect","React","Stack","Group","buildClassnames","styles","DateField","DateInput","DateSegment","Button"],"mappings":"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"}

package/dist/components/DateInputField/DateInputField.js

@@ -1,17 +1,15 @@
 import React__default, { useState, useCallback, useEffect } from 'react';
-import { DateField, DateInput, DateSegment } from 'react-aria-components';
-import { DateRangeGroup } from './styled.js';
+import { Group, DateField, DateInput, DateSegment } from 'react-aria-components';
+import styles from './DateInputField.module.scss.js';
 import { Button } from '../Button/Button.js';
 import { Stack } from '../Stack/Stack.js';
-import '../Calendars/components/RangeCalendar/styled.js';
 import '../Grid/index.js';
-import '../Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.js';
 import '@internationalized/date';
 import '../Calendars/types.js';
 import '../Calendars/data/constants.js';
 import '../Calendars/components/subcomponents/CalendarHeading.js';
 import { useIsDateUnavailable } from '../Calendars/data/useIsDateUnavailable.js';
-import '../Calendars/components/Calendar/styled.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
 
 const DateInputField = ({ id, className, style, shouldForceLeadingZeros = true, rightAction, startValue, endValue, disabled, isReadOnly, isRangeInput = false, hasError, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, 'aria-labelledby': ariaLabelledBy, onChange, onChangeStartDate, onChangeEndDate, rangeRef, rightActionRef, ...validationProps }) => {
     const { isDateUnavailable, isDateRangeUnavailable } = useIsDateUnavailable(validationProps);
@@ -38,7 +36,7 @@ const DateInputField = ({ id, className, style, shouldForceLeadingZeros = true,
         setIsEndInvalid(isRangeInput && endValue ? validateDate(endValue) !== true : false);
     }, [startValue, endValue, isRangeInput, validateDate]);
     return (React__default.createElement(Stack, { direction: "horizontal", alignX: "stretch", alignY: "center", spacing: 0 },
-        React__default.createElement(DateRangeGroup, { ref: rangeRef, style: style, className: className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : `${id}-label`, hasError: hasError, isDisabled: disabled },
+        React__default.createElement(Group, { ref: rangeRef, style: style, className: buildClassnames([styles.dateRangeGroup, hasError && styles.error, className]), "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : `${id}-label`, isDisabled: disabled },
             React__default.createElement(Stack, { spacing: "sm", direction: "horizontal", alignX: "center" },
                 React__default.createElement(DateField, { shouldForceLeadingZeros: shouldForceLeadingZeros, onChange: isRangeInput ? onChangeStartDate : onChange, value: startValue, validate: validateDate, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : `${id}-label`, "aria-label": isRangeInput ? 'start date' : 'date', isDisabled: disabled, isReadOnly: isReadOnly, isInvalid: isStartInvalid, ...validationProps },
                     React__default.createElement(DateInput, { slot: "start" }, (segment) => React__default.createElement(DateSegment, { segment: segment }))),

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

@@ -1 +1 @@
-{"version":3,"file":"DateInputField.js","sources":["../../../src/components/DateInputField/DateInputField.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport { DateField, DateInput, DateRange, DateSegment, DateValue } from 'react-aria-components';\nimport { DateRangeGroup } from './styled';\nimport { DateInputFieldProps } from './types';\nimport { Button } from '../Button';\nimport { Stack } from '../Stack';\nimport { useIsDateUnavailable } from '../Calendars';\n\nexport const DateInputField = ({\n  id,\n  className,\n  style,\n  shouldForceLeadingZeros = true,\n  rightAction,\n  startValue,\n  endValue,\n  disabled,\n  isReadOnly,\n  isRangeInput = false,\n  hasError,\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedBy,\n  'aria-labelledby': ariaLabelledBy,\n  onChange,\n  onChangeStartDate,\n  onChangeEndDate,\n  rangeRef,\n  rightActionRef,\n  ...validationProps\n}: DateInputFieldProps) => {\n  const { isDateUnavailable, isDateRangeUnavailable } = useIsDateUnavailable(validationProps);\n  const [isStartInvalid, setIsStartInvalid] = useState(false);\n  const [isEndInvalid, setIsEndInvalid] = useState(false);\n\n  const validateDate = useCallback(\n    (value: DateValue): true | string => {\n      if (!value) return 'no date';\n      if (!isRangeInput) return isDateUnavailable(value) ? 'Invalid date selection' : true;\n\n      const range = {\n        start: value === startValue ? value : startValue,\n        end: value === endValue ? value : endValue,\n      };\n\n      if (!range.start || !range.end) {\n        return isDateUnavailable(value) ? 'Invalid date selection' : true;\n      }\n      if (isDateRangeUnavailable(range as DateRange)) return 'Invalid range selection';\n\n      return true;\n    },\n    [isRangeInput, startValue, endValue, isDateUnavailable, isDateRangeUnavailable],\n  );\n\n  useEffect(() => {\n    setIsStartInvalid(startValue ? validateDate(startValue) !== true : false);\n    setIsEndInvalid(isRangeInput && endValue ? validateDate(endValue) !== true : false);\n  }, [startValue, endValue, isRangeInput, validateDate]);\n\n  return (\n    <Stack direction=\"horizontal\" alignX=\"stretch\" alignY=\"center\" spacing={0}>\n      <DateRangeGroup\n        ref={rangeRef}\n        style={style}\n        className={className}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        hasError={hasError}\n        isDisabled={disabled}\n      >\n        <Stack spacing=\"sm\" direction=\"horizontal\" alignX=\"center\">\n          <DateField\n            shouldForceLeadingZeros={shouldForceLeadingZeros}\n            onChange={isRangeInput ? onChangeStartDate : onChange}\n            value={startValue}\n            validate={validateDate}\n            aria-describedby={ariaDescribedBy}\n            aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n            aria-label={isRangeInput ? 'start date' : 'date'}\n            isDisabled={disabled}\n            isReadOnly={isReadOnly}\n            isInvalid={isStartInvalid}\n            {...validationProps}\n          >\n            <DateInput slot=\"start\">{(segment) => <DateSegment segment={segment} />}</DateInput>\n          </DateField>\n\n          {isRangeInput && (\n            <>\n              <span className=\"date-range-input-splitter\" aria-hidden=\"true\">\n                -\n              </span>\n              <DateField\n                shouldForceLeadingZeros={shouldForceLeadingZeros}\n                onChange={onChangeEndDate}\n                value={endValue}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n                aria-label=\"end date\"\n                isDisabled={disabled}\n                isReadOnly={isReadOnly}\n                validate={validateDate}\n                isInvalid={isEndInvalid}\n                {...validationProps}\n              >\n                <DateInput slot=\"end\">{(segment) => <DateSegment segment={segment} />}</DateInput>\n              </DateField>\n            </>\n          )}\n        </Stack>\n\n        {rightAction && (\n          <Button\n            type=\"button\"\n            ref={rightActionRef}\n            variant=\"flat\"\n            style={{\n              padding: '2px',\n              height: 'unset',\n            }}\n            {...rightAction}\n          />\n        )}\n      </DateRangeGroup>\n    </Stack>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"DateInputField.js","sources":["../../../src/components/DateInputField/DateInputField.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport {\n  DateField,\n  DateInput,\n  DateRange,\n  DateSegment,\n  DateValue,\n  Group,\n} from 'react-aria-components';\nimport styles from './DateInputField.module.scss';\nimport { DateInputFieldProps } from './types';\nimport { Button } from '../Button';\nimport { Stack } from '../Stack';\nimport { useIsDateUnavailable } from '../Calendars';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\nexport const DateInputField = ({\n  id,\n  className,\n  style,\n  shouldForceLeadingZeros = true,\n  rightAction,\n  startValue,\n  endValue,\n  disabled,\n  isReadOnly,\n  isRangeInput = false,\n  hasError,\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedBy,\n  'aria-labelledby': ariaLabelledBy,\n  onChange,\n  onChangeStartDate,\n  onChangeEndDate,\n  rangeRef,\n  rightActionRef,\n  ...validationProps\n}: DateInputFieldProps) => {\n  const { isDateUnavailable, isDateRangeUnavailable } = useIsDateUnavailable(validationProps);\n  const [isStartInvalid, setIsStartInvalid] = useState(false);\n  const [isEndInvalid, setIsEndInvalid] = useState(false);\n\n  const validateDate = useCallback(\n    (value: DateValue): true | string => {\n      if (!value) return 'no date';\n      if (!isRangeInput) return isDateUnavailable(value) ? 'Invalid date selection' : true;\n\n      const range = {\n        start: value === startValue ? value : startValue,\n        end: value === endValue ? value : endValue,\n      };\n\n      if (!range.start || !range.end) {\n        return isDateUnavailable(value) ? 'Invalid date selection' : true;\n      }\n      if (isDateRangeUnavailable(range as DateRange)) return 'Invalid range selection';\n\n      return true;\n    },\n    [isRangeInput, startValue, endValue, isDateUnavailable, isDateRangeUnavailable],\n  );\n\n  useEffect(() => {\n    setIsStartInvalid(startValue ? validateDate(startValue) !== true : false);\n    setIsEndInvalid(isRangeInput && endValue ? validateDate(endValue) !== true : false);\n  }, [startValue, endValue, isRangeInput, validateDate]);\n\n  return (\n    <Stack direction=\"horizontal\" alignX=\"stretch\" alignY=\"center\" spacing={0}>\n      <Group\n        ref={rangeRef}\n        style={style}\n        className={buildClassnames([styles.dateRangeGroup, hasError && styles.error, className])}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        isDisabled={disabled}\n      >\n        <Stack spacing=\"sm\" direction=\"horizontal\" alignX=\"center\">\n          <DateField\n            shouldForceLeadingZeros={shouldForceLeadingZeros}\n            onChange={isRangeInput ? onChangeStartDate : onChange}\n            value={startValue}\n            validate={validateDate}\n            aria-describedby={ariaDescribedBy}\n            aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n            aria-label={isRangeInput ? 'start date' : 'date'}\n            isDisabled={disabled}\n            isReadOnly={isReadOnly}\n            isInvalid={isStartInvalid}\n            {...validationProps}\n          >\n            <DateInput slot=\"start\">{(segment) => <DateSegment segment={segment} />}</DateInput>\n          </DateField>\n\n          {isRangeInput && (\n            <>\n              <span className=\"date-range-input-splitter\" aria-hidden=\"true\">\n                -\n              </span>\n              <DateField\n                shouldForceLeadingZeros={shouldForceLeadingZeros}\n                onChange={onChangeEndDate}\n                value={endValue}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n                aria-label=\"end date\"\n                isDisabled={disabled}\n                isReadOnly={isReadOnly}\n                validate={validateDate}\n                isInvalid={isEndInvalid}\n                {...validationProps}\n              >\n                <DateInput slot=\"end\">{(segment) => <DateSegment segment={segment} />}</DateInput>\n              </DateField>\n            </>\n          )}\n        </Stack>\n\n        {rightAction && (\n          <Button\n            type=\"button\"\n            ref={rightActionRef}\n            variant=\"flat\"\n            style={{\n              padding: '2px',\n              height: 'unset',\n            }}\n            {...rightAction}\n          />\n        )}\n      </Group>\n    </Stack>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

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

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

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

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

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

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

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

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

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

package/dist/components/DatePicker/DatePicker.cjs

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