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

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

@@ -5,86 +5,50 @@ var parseWidth = require('./parseWidth.cjs');
 var sumAll = require('./sumAll.cjs');
 
 function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, enableTransition = true, }) {
-    const pinnedLeftStyles = pinnedLeft.map((_, index) => `
-    th:nth-child(${index + 1}),
-    td:nth-child(${index + 1}) {
-      position: sticky;
-      left: ${cellWidths ? sumAll.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 ? sumAll.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: ${index.theme.colors.neutral.grey.lightest};
-    }
-
-    tr + tr > td {
-      border-top: 1px solid ${index.theme.colors.neutral.grey.base};
-    }
-  `;
-    const stripingNested = `
-    tbody:nth-of-type(odd) > tr > td {
-      background-color: ${index.theme.colors.neutral.grey.lightest};
-    }
-
-    tbody + tbody > tr:first-child > td {
-      border-top: 1px solid ${index.theme.colors.neutral.grey.base};
-    }
-  `;
-    return `
-    grid-template-columns: ${columns.map((column) => { var _a; return parseWidth.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}
-  `;
+    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 ? sumAll.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 ? sumAll.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: ${index.theme.colors.neutral.grey.lightest}; }`);
+        rules.push(`tbody + tbody > tr:first-child > td { border-top: 1px solid ${index.theme.colors.neutral.grey.base}; }`);
+    }
+    else {
+        rules.push(`tr:nth-child(odd) > td { background-color: ${index.theme.colors.neutral.grey.lightest}; }`);
+        rules.push(`tr + tr > td { border-top: 1px solid ${index.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.parseWidth((_a = columnWidths[column.id]) !== null && _a !== void 0 ? _a : column.width); })
+        .join(' ');
+    return {
+        properties: `grid-template-columns: ${gridTemplateColumns};`,
+        rules,
+    };
 }
 
 exports.generateTableCss = generateTableCss;

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

@@ -1 +1 @@
-{"version":3,"file":"generateTableCss.cjs","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":["sumAllBeforeIndex","sumAllAfterIndex","theme","parseWidth"],"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,GAAGA,wBAAiB,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,GAAGC,uBAAgB,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,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;AAED,IAAA,MAAM,cAAc,GAAG;;AAEC,wBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAAA,WAAK,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,OAAAC,qBAAU,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;;;;"}
+{"version":3,"file":"generateTableCss.cjs","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":["sumAllBeforeIndex","sumAllAfterIndex","theme","parseWidth"],"mappings":"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"}

package/dist/components/DataTable/utils/generateTableCss.d.ts

@@ -10,4 +10,10 @@ export type GenerateTableCssArgs = {
     columns: ColumnConfigs;
     enableTransition?: boolean;
 };
-export declare function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, enableTransition, }: GenerateTableCssArgs): string;
+export type TableCssOutput = {
+    /** CSS declarations applied directly to the table element (e.g. grid-template-columns) */
+    properties: string;
+    /** Fully-formed CSS rule blocks to be scoped to the table instance */
+    rules: string[];
+};
+export declare function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, enableTransition, }: GenerateTableCssArgs): TableCssOutput;

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

@@ -3,86 +3,50 @@ import { parseWidth } from './parseWidth.js';
 import { sumAllBeforeIndex, sumAllAfterIndex } from './sumAll.js';
 
 function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, enableTransition = true, }) {
-    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}
-  `;
+    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,
+    };
 }
 
 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 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;;;;"}
+{"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":"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"}

package/dist/components/DateInputField/DateInputField.cjs

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

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

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

package/dist/components/DateInputField/DateInputField.js

@@ -1,17 +1,15 @@
 import React__default, { useState, useCallback, useEffect } from 'react';
-import { DateField, DateInput, DateSegment } from 'react-aria-components';
-import { DateRangeGroup } from './styled.js';
+import { Group, DateField, DateInput, DateSegment } from 'react-aria-components';
+import styles from './DateInputField.module.scss.js';
 import { Button } from '../Button/Button.js';
 import { Stack } from '../Stack/Stack.js';
-import '../Calendars/components/RangeCalendar/styled.js';
-import '../Grid/index.js';
-import '../Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.js';
+import '../Grid/Grid.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;;;;"}