@veeqo/ui 14.10.3-beta-3 → 14.10.4-beta-1

package/dist/components/DataTable/utils/generateTableCss.js

@@ -3,50 +3,86 @@ import { parseWidth } from './parseWidth.js';
 import { sumAllBeforeIndex, sumAllAfterIndex } from './sumAll.js';
 
 function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, enableTransition = true, }) {
-    const rules = [];
-    // Pinned left columns
-    if (pinnedLeft.length > 0) {
-        pinnedLeft.forEach((_, index) => {
-            rules.push(`th:nth-child(${index + 1}), td:nth-child(${index + 1}) { position: sticky; left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px; z-index: 2; }`);
-        });
-    }
-    // Pinned right columns
-    if (pinnedRight.length > 0) {
-        pinnedRight.forEach((_, index) => {
-            rules.push(`th:nth-last-child(${index + 1}), td:nth-last-child(${index + 1}) { position: sticky; right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px; }`);
-        });
-    }
-    // Pseudo-element transition (only needed when pinned columns have shadows)
-    if (pinnedLeft.length > 0 || pinnedRight.length > 0) {
-        rules.push(`th::after, td::after { transition: box-shadow ${enableTransition ? '.3s' : '0s'}; }`);
-    }
-    // Left shadow
-    if (pinnedLeft.length > 0) {
-        const isLeftShadowVisible = !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';
-        rules.push(`th:nth-child(${pinnedLeft.length})::after, td:nth-child(${pinnedLeft.length})::after { position: absolute; transform: translate(100%); top: 0; right: 0; bottom: -1px; width: 30px; content: ""; pointer-events: none; box-sizing: border-box; box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'}; }`);
-    }
-    // Right shadow
-    if (pinnedRight.length > 0) {
-        const isRightShadowVisible = !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';
-        rules.push(`th:nth-last-child(${pinnedRight.length})::after, td:nth-last-child(${pinnedRight.length})::after { position: absolute; transform: translate(-100%); top: 0; left: 0; bottom: -1px; width: 30px; content: ""; pointer-events: none; box-sizing: border-box; box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'}; }`);
-    }
-    // Striping
-    if (stripingMode === 'nested') {
-        rules.push(`tbody:nth-of-type(odd) > tr > td { background-color: ${theme.colors.neutral.grey.lightest}; }`);
-        rules.push(`tbody + tbody > tr:first-child > td { border-top: 1px solid ${theme.colors.neutral.grey.base}; }`);
-    }
-    else {
-        rules.push(`tr:nth-child(odd) > td { background-color: ${theme.colors.neutral.grey.lightest}; }`);
-        rules.push(`tr + tr > td { border-top: 1px solid ${theme.colors.neutral.grey.base}; }`);
-    }
-    // Grid template columns (applied as a property on the table element)
-    const gridTemplateColumns = columns
-        .map((column) => { var _a; return parseWidth((_a = columnWidths[column.id]) !== null && _a !== void 0 ? _a : column.width); })
-        .join(' ');
-    return {
-        properties: `grid-template-columns: ${gridTemplateColumns};`,
-        rules,
-    };
+    const pinnedLeftStyles = pinnedLeft.map((_, index) => `
+    th:nth-child(${index + 1}),
+    td:nth-child(${index + 1}) {
+      position: sticky;
+      left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px;
+      z-index: 2;
+    }
+  `);
+    const pinnedRightStyles = pinnedRight.map((_, index) => `
+    th:nth-last-child(${index + 1}),
+    td:nth-last-child(${index + 1}) {
+      position: sticky;
+      right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;
+    }
+  `);
+    const isLeftShadowVisible = !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';
+    const leftShadow = `
+    th:nth-child(${pinnedLeft.length})::after,
+    td:nth-child(${pinnedLeft.length})::after {
+      position: absolute;
+      transform: translate(100%);
+      top: 0;
+      right: 0;
+      bottom: -1px;
+      width: 30px;
+      content: "";
+      pointer-events: none;
+      box-sizing: border-box;
+      box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};
+    }
+  `;
+    const isRightShadowVisible = !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';
+    const rightShadow = `
+    th:nth-last-child(${pinnedRight.length})::after,
+    td:nth-last-child(${pinnedRight.length})::after {
+      position: absolute;
+      transform: translate(-100%);
+      top: 0;
+      left: 0;
+      bottom: -1px;
+      width: 30px;
+      content: "";
+      pointer-events: none;
+      box-sizing: border-box;
+      box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};
+    }
+  `;
+    const stripingRow = `
+    tr:nth-child(odd) > td {
+      background-color: ${theme.colors.neutral.grey.lightest};
+    }
+
+    tr + tr > td {
+      border-top: 1px solid ${theme.colors.neutral.grey.base};
+    }
+  `;
+    const stripingNested = `
+    tbody:nth-of-type(odd) > tr > td {
+      background-color: ${theme.colors.neutral.grey.lightest};
+    }
+
+    tbody + tbody > tr:first-child > td {
+      border-top: 1px solid ${theme.colors.neutral.grey.base};
+    }
+  `;
+    return `
+    grid-template-columns: ${columns.map((column) => { var _a; return parseWidth((_a = columnWidths[column.id]) !== null && _a !== void 0 ? _a : column.width); }).join(' ')};
+
+    th::after, td::after {
+      transition: box-shadow ${enableTransition ? '.3s' : '0s'};
+    }
+
+    ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}
+    ${pinnedRight.length > 0 ? pinnedRightStyles : ''}
+
+    ${leftShadow}
+    ${rightShadow}
+
+    ${stripingMode === 'nested' ? stripingNested : stripingRow}
+  `;
 }
 
 export { generateTableCss };

package/dist/components/DataTable/utils/generateTableCss.js.map

@@ -1 +1 @@
-{"version":3,"file":"generateTableCss.js","sources":["../../../../src/components/DataTable/utils/generateTableCss.ts"],"sourcesContent":["import { theme } from '../../../theme';\nimport { parseWidth } from './parseWidth';\nimport { sumAllAfterIndex, sumAllBeforeIndex } from './sumAll';\n\nimport { ColumnConfigs, ColumnWidthsType, StripingMode } from '../types';\nimport { ScrollPosition } from '../../../hooks/useScrollPosition/types';\n\nexport type GenerateTableCssArgs = {\n  pinnedLeft: ColumnConfigs;\n  pinnedRight: ColumnConfigs;\n  cellWidths: Array<number>;\n  scrollPosition: ScrollPosition;\n  stripingMode?: StripingMode;\n  columnWidths: ColumnWidthsType;\n  columns: ColumnConfigs;\n  enableTransition?: boolean;\n};\n\nexport type TableCssOutput = {\n  /** CSS declarations applied directly to the table element (e.g. grid-template-columns) */\n  properties: string;\n  /** Fully-formed CSS rule blocks to be scoped to the table instance */\n  rules: string[];\n};\n\nexport function generateTableCss({\n  pinnedLeft,\n  pinnedRight,\n  cellWidths,\n  scrollPosition,\n  stripingMode,\n  columnWidths,\n  columns,\n  enableTransition = true,\n}: GenerateTableCssArgs): TableCssOutput {\n  const rules: string[] = [];\n\n  // Pinned left columns\n  if (pinnedLeft.length > 0) {\n    pinnedLeft.forEach((_: any, index: number) => {\n      rules.push(\n        `th:nth-child(${index + 1}), td:nth-child(${index + 1}) { position: sticky; left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px; z-index: 2; }`,\n      );\n    });\n  }\n\n  // Pinned right columns\n  if (pinnedRight.length > 0) {\n    pinnedRight.forEach((_: any, index: number) => {\n      rules.push(\n        `th:nth-last-child(${index + 1}), td:nth-last-child(${index + 1}) { position: sticky; right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px; }`,\n      );\n    });\n  }\n\n  // Pseudo-element transition (only needed when pinned columns have shadows)\n  if (pinnedLeft.length > 0 || pinnedRight.length > 0) {\n    rules.push(`th::after, td::after { transition: box-shadow ${enableTransition ? '.3s' : '0s'}; }`);\n  }\n\n  // Left shadow\n  if (pinnedLeft.length > 0) {\n    const isLeftShadowVisible =\n      !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';\n    rules.push(\n      `th:nth-child(${pinnedLeft.length})::after, td:nth-child(${pinnedLeft.length})::after { position: absolute; transform: translate(100%); top: 0; right: 0; bottom: -1px; width: 30px; content: \"\"; pointer-events: none; box-sizing: border-box; box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'}; }`,\n    );\n  }\n\n  // Right shadow\n  if (pinnedRight.length > 0) {\n    const isRightShadowVisible =\n      !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';\n    rules.push(\n      `th:nth-last-child(${pinnedRight.length})::after, td:nth-last-child(${pinnedRight.length})::after { position: absolute; transform: translate(-100%); top: 0; left: 0; bottom: -1px; width: 30px; content: \"\"; pointer-events: none; box-sizing: border-box; box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'}; }`,\n    );\n  }\n\n  // Striping\n  if (stripingMode === 'nested') {\n    rules.push(\n      `tbody:nth-of-type(odd) > tr > td { background-color: ${theme.colors.neutral.grey.lightest}; }`,\n    );\n    rules.push(\n      `tbody + tbody > tr:first-child > td { border-top: 1px solid ${theme.colors.neutral.grey.base}; }`,\n    );\n  } else {\n    rules.push(\n      `tr:nth-child(odd) > td { background-color: ${theme.colors.neutral.grey.lightest}; }`,\n    );\n    rules.push(\n      `tr + tr > td { border-top: 1px solid ${theme.colors.neutral.grey.base}; }`,\n    );\n  }\n\n  // Grid template columns (applied as a property on the table element)\n  const gridTemplateColumns = columns\n    .map((column) => parseWidth(columnWidths[column.id] ?? column.width))\n    .join(' ');\n\n  return {\n    properties: `grid-template-columns: ${gridTemplateColumns};`,\n    rules,\n  };\n}\n"],"names":[],"mappings":";;;;AAyBM,SAAU,gBAAgB,CAAC,EAC/B,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,gBAAgB,GAAG,IAAI,GACF,EAAA;IACrB,MAAM,KAAK,GAAa,EAAE;;AAG1B,IAAA,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;QACzB,UAAU,CAAC,OAAO,CAAC,CAAC,CAAM,EAAE,KAAa,KAAI;AAC3C,YAAA,KAAK,CAAC,IAAI,CACR,CAAA,aAAA,EAAgB,KAAK,GAAG,CAAC,CAAA,gBAAA,EAAmB,KAAK,GAAG,CAAC,CAAA,4BAAA,EAA+B,UAAU,GAAG,iBAAiB,CAAC,UAAU,EAAE,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA,iBAAA,CAAmB,CACjK;AACH,QAAA,CAAC,CAAC;AACH,IAAA;;AAGD,IAAA,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;QAC1B,WAAW,CAAC,OAAO,CAAC,CAAC,CAAM,EAAE,KAAa,KAAI;AAC5C,YAAA,KAAK,CAAC,IAAI,CACR,CAAA,kBAAA,EAAqB,KAAK,GAAG,CAAC,CAAA,qBAAA,EAAwB,KAAK,GAAG,CAAC,CAAA,6BAAA,EAAgC,UAAU,GAAG,gBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA,KAAA,CAAO,CAC/K;AACH,QAAA,CAAC,CAAC;AACH,IAAA;;IAGD,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;AACnD,QAAA,KAAK,CAAC,IAAI,CAAC,CAAA,8CAAA,EAAiD,gBAAgB,GAAG,KAAK,GAAG,IAAI,CAAA,GAAA,CAAK,CAAC;AAClG,IAAA;;AAGD,IAAA,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;AACzB,QAAA,MAAM,mBAAmB,GACvB,CAAC,CAAC,cAAc,IAAI,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,MAAM;QAC7E,KAAK,CAAC,IAAI,CACR,CAAA,aAAA,EAAgB,UAAU,CAAC,MAAM,CAAA,uBAAA,EAA0B,UAAU,CAAC,MAAM,kLAAkL,mBAAmB,GAAG,yCAAyC,GAAG,MAAM,CAAA,GAAA,CAAK,CAC5U;AACF,IAAA;;AAGD,IAAA,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;AAC1B,QAAA,MAAM,oBAAoB,GACxB,CAAC,CAAC,cAAc,IAAI,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,MAAM;QAC3E,KAAK,CAAC,IAAI,CACR,CAAA,kBAAA,EAAqB,WAAW,CAAC,MAAM,CAAA,4BAAA,EAA+B,WAAW,CAAC,MAAM,kLAAkL,oBAAoB,GAAG,0CAA0C,GAAG,MAAM,CAAA,GAAA,CAAK,CAC1V;AACF,IAAA;;IAGD,IAAI,YAAY,KAAK,QAAQ,EAAE;AAC7B,QAAA,KAAK,CAAC,IAAI,CACR,CAAA,qDAAA,EAAwD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,GAAA,CAAK,CAChG;AACD,QAAA,KAAK,CAAC,IAAI,CACR,CAAA,4DAAA,EAA+D,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,GAAA,CAAK,CACnG;AACF,IAAA;AAAM,SAAA;AACL,QAAA,KAAK,CAAC,IAAI,CACR,CAAA,2CAAA,EAA8C,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,GAAA,CAAK,CACtF;AACD,QAAA,KAAK,CAAC,IAAI,CACR,CAAA,qCAAA,EAAwC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,GAAA,CAAK,CAC5E;AACF,IAAA;;IAGD,MAAM,mBAAmB,GAAG;SACzB,GAAG,CAAC,CAAC,MAAM,KAAI,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,UAAU,CAAC,CAAA,EAAA,GAAA,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM,CAAC,KAAK,CAAC,CAAA,CAAA,CAAA;SACnE,IAAI,CAAC,GAAG,CAAC;IAEZ,OAAO;QACL,UAAU,EAAE,CAAA,uBAAA,EAA0B,mBAAmB,CAAA,CAAA,CAAG;QAC5D,KAAK;KACN;AACH;;;;"}
+{"version":3,"file":"generateTableCss.js","sources":["../../../../src/components/DataTable/utils/generateTableCss.ts"],"sourcesContent":["import { theme } from '../../../theme';\nimport { parseWidth } from './parseWidth';\nimport { sumAllAfterIndex, sumAllBeforeIndex } from './sumAll';\n\nimport { ColumnConfigs, ColumnWidthsType, StripingMode } from '../types';\nimport { ScrollPosition } from '../../../hooks/useScrollPosition/types';\n\nexport type GenerateTableCssArgs = {\n  pinnedLeft: ColumnConfigs;\n  pinnedRight: ColumnConfigs;\n  cellWidths: Array<number>;\n  scrollPosition: ScrollPosition;\n  stripingMode?: StripingMode;\n  columnWidths: ColumnWidthsType;\n  columns: ColumnConfigs;\n  enableTransition?: boolean;\n};\n\nexport function generateTableCss({\n  pinnedLeft,\n  pinnedRight,\n  cellWidths,\n  scrollPosition,\n  stripingMode,\n  columnWidths,\n  columns,\n  enableTransition = true,\n}: GenerateTableCssArgs) {\n  const pinnedLeftStyles = pinnedLeft.map(\n    (_: any, index: number) => `\n    th:nth-child(${index + 1}),\n    td:nth-child(${index + 1}) {\n      position: sticky;\n      left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px;\n      z-index: 2;\n    }\n  `,\n  );\n\n  const pinnedRightStyles = pinnedRight.map(\n    (_: any, index: number) => `\n    th:nth-last-child(${index + 1}),\n    td:nth-last-child(${index + 1}) {\n      position: sticky;\n      right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;\n    }\n  `,\n  );\n\n  const isLeftShadowVisible =\n    !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';\n  const leftShadow = `\n    th:nth-child(${pinnedLeft.length})::after,\n    td:nth-child(${pinnedLeft.length})::after {\n      position: absolute;\n      transform: translate(100%);\n      top: 0;\n      right: 0;\n      bottom: -1px;\n      width: 30px;\n      content: \"\";\n      pointer-events: none;\n      box-sizing: border-box;\n      box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n    }\n  `;\n\n  const isRightShadowVisible =\n    !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';\n  const rightShadow = `\n    th:nth-last-child(${pinnedRight.length})::after,\n    td:nth-last-child(${pinnedRight.length})::after {\n      position: absolute;\n      transform: translate(-100%);\n      top: 0;\n      left: 0;\n      bottom: -1px;\n      width: 30px;\n      content: \"\";\n      pointer-events: none;\n      box-sizing: border-box;\n      box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n    }\n  `;\n\n  const stripingRow = `\n    tr:nth-child(odd) > td {\n      background-color: ${theme.colors.neutral.grey.lightest};\n    }\n\n    tr + tr > td {\n      border-top: 1px solid ${theme.colors.neutral.grey.base};\n    }\n  `;\n\n  const stripingNested = `\n    tbody:nth-of-type(odd) > tr > td {\n      background-color: ${theme.colors.neutral.grey.lightest};\n    }\n\n    tbody + tbody > tr:first-child > td {\n      border-top: 1px solid ${theme.colors.neutral.grey.base};\n    }\n  `;\n\n  return `\n    grid-template-columns: ${columns.map((column) => parseWidth(columnWidths[column.id] ?? column.width)).join(' ')};\n\n    th::after, td::after {\n      transition: box-shadow ${enableTransition ? '.3s' : '0s'};\n    }\n\n    ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}\n    ${pinnedRight.length > 0 ? pinnedRightStyles : ''}\n\n    ${leftShadow}\n    ${rightShadow}\n\n    ${stripingMode === 'nested' ? stripingNested : stripingRow}\n  `;\n}\n"],"names":[],"mappings":";;;;AAkBM,SAAU,gBAAgB,CAAC,EAC/B,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,gBAAgB,GAAG,IAAI,GACF,EAAA;AACrB,IAAA,MAAM,gBAAgB,GAAG,UAAU,CAAC,GAAG,CACrC,CAAC,CAAM,EAAE,KAAa,KAAK;AACZ,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAEd,YAAA,EAAA,UAAU,GAAG,iBAAiB,CAAC,UAAU,EAAE,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;;;AAGpE,EAAA,CAAA,CACA;AAED,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,CACvC,CAAC,CAAM,EAAE,KAAa,KAAK;AACP,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAElB,aAAA,EAAA,UAAU,GAAG,gBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;;AAEpF,EAAA,CAAA,CACA;AAED,IAAA,MAAM,mBAAmB,GACvB,CAAC,CAAC,cAAc,IAAI,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,MAAM;AAC7E,IAAA,MAAM,UAAU,GAAG;AACF,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;AACjB,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;;;;;;;;;;AAUhB,kBAAA,EAAA,mBAAmB,GAAG,yCAAyC,GAAG,MAAM,CAAA;;GAEzF;AAED,IAAA,MAAM,oBAAoB,GACxB,CAAC,CAAC,cAAc,IAAI,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,MAAM;AAC3E,IAAA,MAAM,WAAW,GAAG;AACE,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;AAClB,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;;;;;;;;;;AAUtB,kBAAA,EAAA,oBAAoB,GAAG,0CAA0C,GAAG,MAAM,CAAA;;GAE3F;AAED,IAAA,MAAM,WAAW,GAAG;;AAEI,wBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;AAED,IAAA,MAAM,cAAc,GAAG;;AAEC,wBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;IAED,OAAO;AACoB,2BAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,UAAU,CAAC,CAAA,EAAA,GAAA,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM,CAAC,KAAK,CAAC,CAAA,CAAA,CAAA,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;;;AAGpF,6BAAA,EAAA,gBAAgB,GAAG,KAAK,GAAG,IAAI,CAAA;;;MAGxD,UAAU,CAAC,MAAM,GAAG,CAAC,GAAG,gBAAgB,GAAG,EAAE;MAC7C,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,iBAAiB,GAAG,EAAE;;MAE/C,UAAU;MACV,WAAW;;MAEX,YAAY,KAAK,QAAQ,GAAG,cAAc,GAAG,WAAW;GAC3D;AACH;;;;"}

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

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

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

package/dist/components/DatePicker/DatePicker.js

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