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

package/dist/components/LegacyDataTable/styled.js

@@ -1,157 +1,116 @@
-import React__default, { createContext, useRef, useContext } from 'react';
-import { buildClassnames } from '../../utils/buildClassnames.js';
-import 'uid/secure';
-import { assignCssVars } from '../../utils/assignCssVars.js';
-import styles from './LegacyDataTable.module.scss.js';
+import styled from 'styled-components';
+import { theme } from '../../theme/index.js';
 import { ScrollPosition } from './utils/constants.js';
 
-/* --- Instance ID for scoped styles --- */
-let legacyTableIdCounter = 0;
-function useLegacyTableId() {
-    const idRef = useRef(null);
-    if (idRef.current === null) {
-        legacyTableIdCounter += 1;
-        idRef.current = `ldt-${legacyTableIdCounter}`;
+const { text, sizes } = theme;
+const { blue } = theme.colors.secondary;
+const { grey } = theme.colors.neutral;
+const { scrollbar } = theme.colors.system;
+const fixedColumnShadow = `
+  position: absolute;
+  top: 0;
+  bottom: -1px;
+  width: 30px;
+  content: "";
+  pointer-events: none;
+  box-sizing: border-box;
+  transition: box-shadow .3s;
+`;
+const startFixedColumnShadow = `
+  box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);
+`;
+const endFixedColumnShadow = `
+  box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);
+`;
+const TooltipContent = styled.div.withConfig({ displayName: "vui--TooltipContent", componentId: "vui--11ytygc" }) `display:flex;flex-direction:row;align-items:center;`;
+const Wrapper = styled.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--1g4i0cu" }) `width:100%;overflow-x:${(props) => (props.scrollDisabled ? 'hidden' : 'auto')};overflow-y:hidden;position:relative;border-top:1px solid ${grey.dark};border-bottom:1px solid ${grey.dark};${({ showScrollbar }) => showScrollbar
+    ? `
+    scrollbar-width: auto;
+
+    &::-webkit-scrollbar {
+      margin-top: 10px;
+      width: 6px;
+      height: 6px;
     }
-    return idRef.current;
-}
-const TableIdContext = createContext('');
-function getScopedShadowRules({ scrollDisabled, scrollPosition, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, }) {
-    if (scrollDisabled)
-        return [];
-    if (!lastStartFixedColumnsIndex && !firstEndFixedColumnsIndex)
-        return [];
-    const fixedColumnShadow = 'position: absolute; top: 0; bottom: -1px; width: 30px; content: ""; pointer-events: none; box-sizing: border-box; transition: box-shadow .3s;';
-    const startShadowVisible = scrollPosition === ScrollPosition.middle || scrollPosition === ScrollPosition.end;
-    const endShadowVisible = scrollPosition === ScrollPosition.start || scrollPosition === ScrollPosition.middle;
-    const startShadow = startShadowVisible
-        ? 'box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);'
-        : '';
-    const endShadow = endShadowVisible
-        ? 'box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);'
-        : '';
-    const rules = [];
-    if (lastStartFixedColumnsIndex) {
-        rules.push(`td:nth-child(${lastStartFixedColumnsIndex}):after, th:nth-child(${lastStartFixedColumnsIndex}):after { right: 0; transform: translate(100%); ${fixedColumnShadow} ${startShadow} }`);
+    
+    &::-webkit-scrollbar-track {
+      background: ${scrollbar.background}; 
     }
-    if (firstEndFixedColumnsIndex) {
-        rules.push(`td:nth-last-child(${firstEndFixedColumnsIndex}):after, th:nth-last-child(${firstEndFixedColumnsIndex}):after { left: 0; transform: translate(-100%); ${fixedColumnShadow} ${endShadow} }`);
+    
+    &::-webkit-scrollbar-thumb {
+      background: ${scrollbar.thumb};
+      border-radius: 4px; 
     }
-    return rules;
-}
-const Wrapper = React__default.forwardRef(({ scrollDisabled, scrollPosition, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, showScrollbar, className, children, ...rest }, ref) => {
-    const tableId = useLegacyTableId();
-    const scopeSelector = `[data-legacy-table-id="${tableId}"]`;
-    const scopedStyle = (() => {
-        const shadowRules = getScopedShadowRules({
-            scrollDisabled,
-            scrollPosition,
-            lastStartFixedColumnsIndex,
-            firstEndFixedColumnsIndex,
-        });
-        if (shadowRules.length === 0)
-            return '';
-        return shadowRules.map((rule) => {
-            const braceIndex = rule.indexOf('{');
-            if (braceIndex === -1)
-                return `${scopeSelector} ${rule}`;
-            const selectorPart = rule.slice(0, braceIndex).trim();
-            const bodyPart = rule.slice(braceIndex);
-            const scopedSelectors = selectorPart
-                .split(',')
-                .map((sel) => `${scopeSelector} ${sel.trim()}`)
-                .join(', ');
-            return `${scopedSelectors} ${bodyPart}`;
-        }).join('\n');
-    })();
-    return (React__default.createElement("div", { ref: ref, "data-legacy-table-id": tableId, className: buildClassnames([
-            styles.wrapper,
-            scrollDisabled ? styles.wrapperScrollDisabled : styles.wrapperScrollEnabled,
-            showScrollbar && styles.wrapperShowScrollbar,
-            className,
-        ]), ...rest },
-        scopedStyle && React__default.createElement("style", null, scopedStyle),
-        React__default.createElement(TableIdContext.Provider, { value: tableId }, children)));
-});
-Wrapper.displayName = 'Wrapper';
-const WrapperBordered = React__default.forwardRef((props, ref) => (React__default.createElement(Wrapper, { ref: ref, ...props, className: buildClassnames([styles.wrapperBordered, props.className]) })));
-WrapperBordered.displayName = 'WrapperBordered';
-/* --- TooltipContent --- */
-const TooltipContent = ({ children, ...rest }) => (React__default.createElement("div", { className: styles.tooltipContent, ...rest }, children));
-/* --- Head --- */
-const Head = ({ children, ...rest }) => (React__default.createElement("thead", { className: styles.head, ...rest }, children));
-const Body = ({ fixedColumnsStyle, className, children, ...rest }) => {
-    const tableId = useContext(TableIdContext);
-    const scopedFixedStyle = (() => {
-        if (!fixedColumnsStyle || !tableId)
-            return '';
-        return fixedColumnsStyle.split('\n').filter(Boolean).map((rule) => {
-            const braceIndex = rule.indexOf('{');
-            if (braceIndex === -1)
-                return '';
-            const selector = rule.slice(0, braceIndex).trim();
-            const body = rule.slice(braceIndex);
-            return `[data-legacy-table-id="${tableId}"] .${styles.body} ${selector} ${body}`;
-        }).join('\n');
-    })();
-    return (React__default.createElement("tbody", { className: buildClassnames([styles.body, styles.bodyBorderTop, className]), ...rest },
-        scopedFixedStyle && React__default.createElement("style", null, scopedFixedStyle),
-        children));
-};
-const Row = ({ accentColor, className, children, style, ...rest }) => (React__default.createElement("tr", { className: buildClassnames([styles.row, accentColor && styles.rowAccentColor, className]), style: {
-        ...assignCssVars({ rowAccentColor: accentColor }),
-        ...style,
-    }, ...rest }, children));
-const Cell = ({ align, grow, className, children, style, ...rest }) => (React__default.createElement("td", { className: buildClassnames([styles.cell, grow && styles.cellGrow, className]), style: {
-        ...assignCssVars({ cellAlign: align }),
-        ...style,
-    }, ...rest }, children));
-const HeaderCell = ({ align, grow, className, children, style, ...rest }) => (React__default.createElement("th", { className: buildClassnames([styles.headerCell, grow && styles.cellGrow, className]), style: {
-        ...assignCssVars({ cellAlign: align }),
-        ...style,
-    }, ...rest }, children));
-/* --- HeaderCellLayout --- */
+    `
+    : ''} ${({ scrollDisabled, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, scrollPosition }) => scrollDisabled
+    ? ''
+    : `
+    td:nth-child(${lastStartFixedColumnsIndex}):after,
+    th:nth-child(${lastStartFixedColumnsIndex}):after {
+      right: 0;
+      transform: translate(100%);
+      ${fixedColumnShadow};
+
+      ${scrollPosition === ScrollPosition.middle || scrollPosition === ScrollPosition.end
+        ? startFixedColumnShadow
+        : ''};
+    };
+
+    td:nth-last-child(${firstEndFixedColumnsIndex}):after,
+    th:nth-last-child(${firstEndFixedColumnsIndex}):after {
+      left: 0;
+      transform: translate(-100%);
+      ${fixedColumnShadow};
+
+      ${scrollPosition === ScrollPosition.start || scrollPosition === ScrollPosition.middle
+        ? endFixedColumnShadow
+        : ''};
+    };
+  `}`;
+const WrapperBordered = styled(Wrapper).withConfig({ displayName: "vui--WrapperBordered", componentId: "vui--wtdkab" }) `border:1px solid ${grey.dark};border-radius:4px;`;
+const Head = styled.thead.withConfig({ displayName: "vui--Head", componentId: "vui--1j5avrf" }) `background-color:white;`;
+const Body = styled.tbody.withConfig({ displayName: "vui--Body", componentId: "vui--n8uysg" }) `tr{${({ fixedColumnsStyle }) => fixedColumnsStyle};}& + & > tr:first-child > td{border-top:1px solid ${grey.base};}tr:not(:first-child)> td{border-top:1px solid transparent;}&&& tr:hover td{background-color:#ebf4fb;}`;
+styled.tfoot.withConfig({ displayName: "vui--Foot", componentId: "vui--qckqty" }) `& td{background-color:${grey.lightest};padding:1.5rem 1rem;border-top:1px solid ${blue.base};}`;
+const Row = styled.tr.withConfig({ displayName: "vui--Row", componentId: "vui--10drh9k" }) `&.hidden{visibility:collapse;}${({ accentColor }) => accentColor &&
+    `
+    & > td:first-child::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 4px;
+      background-color: ${accentColor};  
+    }
+  `}`;
+const Cell = styled.td.withConfig({ displayName: "vui--Cell", componentId: "vui--tljl4p" }) `position:relative;padding:1.25rem 1rem;text-align:${({ align }) => align || 'left'};background-color:white;font-family:${text.bodySmall.fontFamily};font-size:${text.bodySmall.fontSize};font-weight:${text.bodySmall.fontWeight};color:${text.bodySmall.color};line-height:${sizes.base};width:${({ grow }) => (grow ? '100%' : 'auto')};& > *{vertical-align:middle;}`;
+const HeaderCell = styled(Cell).attrs({
+    as: 'th',
+}).withConfig({ displayName: "vui--HeaderCell", componentId: "vui--10p2duv" }) `user-select:none;border-bottom:1px solid ${grey.dark};font-family:${text.bodySmallBold.fontFamily};font-size:${text.bodySmallBold.fontSize};font-weight:${text.bodySmallBold.fontWeight};color:${text.bodySmallBold.color};& span{white-space:pre-line;}&.sortable:hover{cursor:pointer;background-color:${grey.light};}`;
 const alignmentMap = {
     left: 'flex-start',
     center: 'center',
     right: 'flex-end',
 };
-const HeaderCellLayout = ({ align, className, children, style, ...rest }) => (React__default.createElement("div", { className: buildClassnames([styles.headerCellLayout, className]), style: {
-        ...assignCssVars({ layoutAlign: align ? alignmentMap[align] : undefined }),
-        ...style,
-    }, ...rest }, children));
-const Table = React__default.forwardRef(({ striped, noWrap, tableLoading, isFixedLayout, className, children, ...rest }, ref) => (React__default.createElement("table", { ref: ref, className: buildClassnames([
-        styles.table,
-        isFixedLayout && styles.tableFixedLayout,
-        tableLoading && styles.tableLoading,
-        striped && styles.tableStriped,
-        noWrap && styles.tableNoWrap,
-        className,
-    ]), ...rest }, children)));
-Table.displayName = 'Table';
-const Footer = ({ fixedColumnsStyle, className, children, ...rest }) => {
-    const tableId = useContext(TableIdContext);
-    const scopedFixedStyle = (() => {
-        if (!fixedColumnsStyle || !tableId)
-            return '';
-        return fixedColumnsStyle.split('\n').filter(Boolean).map((rule) => {
-            const braceIndex = rule.indexOf('{');
-            if (braceIndex === -1)
-                return '';
-            const selector = rule.slice(0, braceIndex).trim();
-            const body = rule.slice(braceIndex);
-            return `[data-legacy-table-id="${tableId}"] .${styles.footer} ${selector} ${body}`;
-        }).join('\n');
-    })();
-    return (React__default.createElement("tfoot", { className: buildClassnames([styles.footer, className]), ...rest },
-        scopedFixedStyle && React__default.createElement("style", null, scopedFixedStyle),
-        children));
-};
-/* --- StickyHeaderWrapper --- */
-const StickyHeaderWrapper = React__default.forwardRef(({ className, children, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.stickyHeaderWrapper, className]), ...rest }, children)));
-StickyHeaderWrapper.displayName = 'StickyHeaderWrapper';
-/* --- FakeHeaderTable (same as Table) --- */
-const FakeHeaderTable = Table;
+const HeaderCellLayout = styled.div.withConfig({ displayName: "vui--HeaderCellLayout", componentId: "vui--13i0t50" }) `display:flex;align-items:center;justify-content:${({ align }) => (align ? alignmentMap[align] : 'flex-start')};& > * + *{margin-left:0.25rem;}`;
+const Table = styled.table.withConfig({ displayName: "vui--Table", componentId: "vui--1bp83gy" }) `width:100%;border-spacing:0;table-layout:${({ isFixedLayout }) => (isFixedLayout ? 'fixed' : 'auto')};${({ striped }) => striped &&
+    `
+    & ${Body}:nth-child(even) td {
+      background-color: ${grey.lightest};
+    }
+  `} & *{box-sizing:border-box;${({ tableLoading }) => tableLoading &&
+    `
+      user-select: none;
+      pointer-events: none;
+    `}}${({ noWrap }) => noWrap &&
+    `
+    & ${HeaderCell}, & ${HeaderCell} span {
+      white-space: nowrap;
+    }
+  `}`;
+const Footer = styled.tfoot.withConfig({ displayName: "vui--Footer", componentId: "vui--44p3gi" }) `tr{${({ fixedColumnsStyle }) => fixedColumnsStyle};}& ${Cell}{border-top:1px solid ${grey.dark};background-color:${grey.lightest};padding-top:${sizes.base};padding-bottom:${sizes.base};line-height:2rem;}`;
+const StickyHeaderWrapper = styled.div.withConfig({ displayName: "vui--StickyHeaderWrapper", componentId: "vui--wokb93" }) `position:fixed;top:0;z-index:2;overflow-x:hidden;`;
+const FakeHeaderTable = styled(Table).withConfig({ displayName: "vui--FakeHeaderTable", componentId: "vui--6s4d56" }) ``;
 
 export { Body, Cell, FakeHeaderTable, Footer, Head, HeaderCell, HeaderCellLayout, Row, StickyHeaderWrapper, Table, TooltipContent, Wrapper, WrapperBordered };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/LegacyDataTable/styled.tsx"],"sourcesContent":["import React, { createContext, useContext, useRef } from 'react';\nimport { buildClassnames, assignCssVars } from '../../utils';\nimport styles from './LegacyDataTable.module.scss';\nimport { ScrollPosition } from './utils/constants';\n\n/* --- Instance ID for scoped styles --- */\n\nlet legacyTableIdCounter = 0;\n\nfunction useLegacyTableId(): string {\n  const idRef = useRef<string | null>(null);\n\n  if (idRef.current === null) {\n    legacyTableIdCounter += 1;\n    idRef.current = `ldt-${legacyTableIdCounter}`;\n  }\n\n  return idRef.current;\n}\n\n/**\n * Reset the counter between test runs for deterministic snapshots.\n * @internal Test utility only.\n */\nexport function resetLegacyTableIdCounter(): void {\n  legacyTableIdCounter = 0;\n}\n\nconst TableIdContext = createContext<string>('');\n\n/* --- Wrapper --- */\n\ntype WrapperPropTypes = {\n  scrollDisabled: boolean;\n  scrollPosition?: ScrollPosition;\n  lastStartFixedColumnsIndex?: number;\n  firstEndFixedColumnsIndex?: number;\n  showScrollbar?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n};\n\nfunction getScopedShadowRules({\n  scrollDisabled,\n  scrollPosition,\n  lastStartFixedColumnsIndex,\n  firstEndFixedColumnsIndex,\n}: Pick<WrapperPropTypes, 'scrollDisabled' | 'scrollPosition' | 'lastStartFixedColumnsIndex' | 'firstEndFixedColumnsIndex'>): string[] {\n  if (scrollDisabled) return [];\n  if (!lastStartFixedColumnsIndex && !firstEndFixedColumnsIndex) return [];\n\n  const fixedColumnShadow = 'position: absolute; top: 0; bottom: -1px; width: 30px; content: \"\"; pointer-events: none; box-sizing: border-box; transition: box-shadow .3s;';\n\n  const startShadowVisible =\n    scrollPosition === ScrollPosition.middle || scrollPosition === ScrollPosition.end;\n  const endShadowVisible =\n    scrollPosition === ScrollPosition.start || scrollPosition === ScrollPosition.middle;\n\n  const startShadow = startShadowVisible\n    ? 'box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);'\n    : '';\n  const endShadow = endShadowVisible\n    ? 'box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);'\n    : '';\n\n  const rules: string[] = [];\n\n  if (lastStartFixedColumnsIndex) {\n    rules.push(\n      `td:nth-child(${lastStartFixedColumnsIndex}):after, th:nth-child(${lastStartFixedColumnsIndex}):after { right: 0; transform: translate(100%); ${fixedColumnShadow} ${startShadow} }`,\n    );\n  }\n\n  if (firstEndFixedColumnsIndex) {\n    rules.push(\n      `td:nth-last-child(${firstEndFixedColumnsIndex}):after, th:nth-last-child(${firstEndFixedColumnsIndex}):after { left: 0; transform: translate(-100%); ${fixedColumnShadow} ${endShadow} }`,\n    );\n  }\n\n  return rules;\n}\n\nexport const Wrapper = React.forwardRef<HTMLDivElement, WrapperPropTypes>(\n  (\n    {\n      scrollDisabled,\n      scrollPosition,\n      lastStartFixedColumnsIndex,\n      firstEndFixedColumnsIndex,\n      showScrollbar,\n      className,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const tableId = useLegacyTableId();\n    const scopeSelector = `[data-legacy-table-id=\"${tableId}\"]`;\n    const scopedStyle = (() => {\n      const shadowRules = getScopedShadowRules({\n        scrollDisabled,\n        scrollPosition,\n        lastStartFixedColumnsIndex,\n        firstEndFixedColumnsIndex,\n      });\n      if (shadowRules.length === 0) return '';\n      return shadowRules.map((rule) => {\n        const braceIndex = rule.indexOf('{');\n        if (braceIndex === -1) return `${scopeSelector} ${rule}`;\n        const selectorPart = rule.slice(0, braceIndex).trim();\n        const bodyPart = rule.slice(braceIndex);\n        const scopedSelectors = selectorPart\n          .split(',')\n          .map((sel) => `${scopeSelector} ${sel.trim()}`)\n          .join(', ');\n        return `${scopedSelectors} ${bodyPart}`;\n      }).join('\\n');\n    })();\n\n    return (\n      <div\n        ref={ref}\n        data-legacy-table-id={tableId}\n        className={buildClassnames([\n          styles.wrapper,\n          scrollDisabled ? styles.wrapperScrollDisabled : styles.wrapperScrollEnabled,\n          showScrollbar && styles.wrapperShowScrollbar,\n          className,\n        ])}\n        {...rest}\n      >\n        {scopedStyle && <style>{scopedStyle}</style>}\n        <TableIdContext.Provider value={tableId}>\n          {children}\n        </TableIdContext.Provider>\n      </div>\n    );\n  },\n);\n\nWrapper.displayName = 'Wrapper';\n\nexport const WrapperBordered = React.forwardRef<HTMLDivElement, WrapperPropTypes>(\n  (props, ref) => (\n    <Wrapper ref={ref} {...props} className={buildClassnames([styles.wrapperBordered, props.className])} />\n  ),\n);\n\nWrapperBordered.displayName = 'WrapperBordered';\n\n/* --- TooltipContent --- */\n\nexport const TooltipContent = ({ children, ...rest }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={styles.tooltipContent} {...rest}>\n    {children}\n  </div>\n);\n\n/* --- Head --- */\n\nexport const Head = ({ children, ...rest }: React.HTMLAttributes<HTMLTableSectionElement>) => (\n  <thead className={styles.head} {...rest}>\n    {children}\n  </thead>\n);\n\n/* --- Body --- */\n\ninterface BodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {\n  fixedColumnsStyle?: string;\n}\n\nexport const Body = ({ fixedColumnsStyle, className, children, ...rest }: BodyProps) => {\n  const tableId = useContext(TableIdContext);\n  const scopedFixedStyle = (() => {\n    if (!fixedColumnsStyle || !tableId) return '';\n    return fixedColumnsStyle.split('\\n').filter(Boolean).map((rule) => {\n      const braceIndex = rule.indexOf('{');\n      if (braceIndex === -1) return '';\n      const selector = rule.slice(0, braceIndex).trim();\n      const body = rule.slice(braceIndex);\n      return `[data-legacy-table-id=\"${tableId}\"] .${styles.body} ${selector} ${body}`;\n    }).join('\\n');\n  })();\n  return (\n    <tbody className={buildClassnames([styles.body, styles.bodyBorderTop, className])} {...rest}>\n      {scopedFixedStyle && <style>{scopedFixedStyle}</style>}\n      {children}\n    </tbody>\n  );\n};\n\n/* --- Foot --- */\n\nexport const Foot = ({ children, ...rest }: React.HTMLAttributes<HTMLTableSectionElement>) => (\n  <tfoot className={styles.foot} {...rest}>\n    {children}\n  </tfoot>\n);\n\n/* --- Row --- */\n\nexport interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n  accentColor?: string;\n}\n\nexport const Row = ({ accentColor, className, children, style, ...rest }: RowProps) => (\n  <tr\n    className={buildClassnames([styles.row, accentColor && styles.rowAccentColor, className])}\n    style={{\n      ...assignCssVars({ rowAccentColor: accentColor }),\n      ...style,\n    }}\n    {...rest}\n  >\n    {children}\n  </tr>\n);\n\n/* --- Cell --- */\n\nexport interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  align?: 'left' | 'center' | 'right';\n  grow?: boolean;\n}\n\nexport const Cell = ({ align, grow, className, children, style, ...rest }: CellProps) => (\n  <td\n    className={buildClassnames([styles.cell, grow && styles.cellGrow, className])}\n    style={{\n      ...assignCssVars({ cellAlign: align }),\n      ...style,\n    }}\n    {...rest}\n  >\n    {children}\n  </td>\n);\n\n/* --- HeaderCell --- */\n\nexport interface HeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  align?: 'left' | 'center' | 'right';\n  grow?: boolean;\n}\n\nexport const HeaderCell = ({ align, grow, className, children, style, ...rest }: HeaderCellProps) => (\n  <th\n    className={buildClassnames([styles.headerCell, grow && styles.cellGrow, className])}\n    style={{\n      ...assignCssVars({ cellAlign: align }),\n      ...style,\n    }}\n    {...rest}\n  >\n    {children}\n  </th>\n);\n\n/* --- HeaderCellLayout --- */\n\nconst alignmentMap: Record<string, string> = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n};\n\nexport interface HeaderCellLayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n  align?: 'left' | 'center' | 'right';\n}\n\nexport const HeaderCellLayout = ({ align, className, children, style, ...rest }: HeaderCellLayoutProps) => (\n  <div\n    className={buildClassnames([styles.headerCellLayout, className])}\n    style={{\n      ...assignCssVars({ layoutAlign: align ? alignmentMap[align] : undefined }),\n      ...style,\n    }}\n    {...rest}\n  >\n    {children}\n  </div>\n);\n\n/* --- Table --- */\n\ninterface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {\n  striped?: boolean;\n  noWrap?: boolean;\n  tableLoading?: boolean;\n  isFixedLayout?: boolean;\n}\n\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n  ({ striped, noWrap, tableLoading, isFixedLayout, className, children, ...rest }, ref) => (\n    <table\n      ref={ref}\n      className={buildClassnames([\n        styles.table,\n        isFixedLayout && styles.tableFixedLayout,\n        tableLoading && styles.tableLoading,\n        striped && styles.tableStriped,\n        noWrap && styles.tableNoWrap,\n        className,\n      ])}\n      {...rest}\n    >\n      {children}\n    </table>\n  ),\n);\n\nTable.displayName = 'Table';\n\n/* --- Footer --- */\n\ninterface FooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {\n  fixedColumnsStyle?: string;\n}\n\nexport const Footer = ({ fixedColumnsStyle, className, children, ...rest }: FooterProps) => {\n  const tableId = useContext(TableIdContext);\n  const scopedFixedStyle = (() => {\n    if (!fixedColumnsStyle || !tableId) return '';\n    return fixedColumnsStyle.split('\\n').filter(Boolean).map((rule) => {\n      const braceIndex = rule.indexOf('{');\n      if (braceIndex === -1) return '';\n      const selector = rule.slice(0, braceIndex).trim();\n      const body = rule.slice(braceIndex);\n      return `[data-legacy-table-id=\"${tableId}\"] .${styles.footer} ${selector} ${body}`;\n    }).join('\\n');\n  })();\n  return (\n    <tfoot className={buildClassnames([styles.footer, className])} {...rest}>\n      {scopedFixedStyle && <style>{scopedFixedStyle}</style>}\n      {children}\n    </tfoot>\n  );\n};\n\n/* --- StickyHeaderWrapper --- */\n\nexport const StickyHeaderWrapper = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...rest }, ref) => (\n    <div ref={ref} className={buildClassnames([styles.stickyHeaderWrapper, className])} {...rest}>\n      {children}\n    </div>\n  ),\n);\n\nStickyHeaderWrapper.displayName = 'StickyHeaderWrapper';\n\n/* --- FakeHeaderTable (same as Table) --- */\n\nexport const FakeHeaderTable = Table;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/LegacyDataTable/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { NoWrapType, StripedType } from './utils/types';\nimport { ScrollPosition } from './utils/constants';\n\nconst { text, sizes } = theme;\nconst { blue } = theme.colors.secondary;\nconst { grey } = theme.colors.neutral;\nconst { scrollbar } = theme.colors.system;\n\nconst fixedColumnShadow = `\n  position: absolute;\n  top: 0;\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: box-shadow .3s;\n`;\n\nconst startFixedColumnShadow = `\n  box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);\n`;\n\nconst endFixedColumnShadow = `\n  box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);\n`;\n\ntype WrapperPropTypes = {\n  scrollDisabled: boolean;\n  scrollPosition?: ScrollPosition;\n  lastStartFixedColumnsIndex?: number;\n  firstEndFixedColumnsIndex?: number;\n  showScrollbar?: boolean;\n};\n\nexport const TooltipContent = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const Wrapper = styled.div<WrapperPropTypes>`\n  width: 100%;\n  overflow-x: ${(props) => (props.scrollDisabled ? 'hidden' : 'auto')};\n  overflow-y: hidden;\n  position: relative;\n  border-top: 1px solid ${grey.dark};\n  border-bottom: 1px solid ${grey.dark};\n\n  ${({ showScrollbar }) =>\n    showScrollbar\n      ? `\n    scrollbar-width: auto;\n\n    &::-webkit-scrollbar {\n      margin-top: 10px;\n      width: 6px;\n      height: 6px;\n    }\n    \n    &::-webkit-scrollbar-track {\n      background: ${scrollbar.background}; \n    }\n    \n    &::-webkit-scrollbar-thumb {\n      background: ${scrollbar.thumb};\n      border-radius: 4px; \n    }\n    `\n      : ''}\n\n  ${({ scrollDisabled, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, scrollPosition }) =>\n    scrollDisabled\n      ? ''\n      : `\n    td:nth-child(${lastStartFixedColumnsIndex}):after,\n    th:nth-child(${lastStartFixedColumnsIndex}):after {\n      right: 0;\n      transform: translate(100%);\n      ${fixedColumnShadow};\n\n      ${\n        scrollPosition === ScrollPosition.middle || scrollPosition === ScrollPosition.end\n          ? startFixedColumnShadow\n          : ''\n      };\n    };\n\n    td:nth-last-child(${firstEndFixedColumnsIndex}):after,\n    th:nth-last-child(${firstEndFixedColumnsIndex}):after {\n      left: 0;\n      transform: translate(-100%);\n      ${fixedColumnShadow};\n\n      ${\n        scrollPosition === ScrollPosition.start || scrollPosition === ScrollPosition.middle\n          ? endFixedColumnShadow\n          : ''\n      };\n    };\n  `}\n`;\n\nexport const WrapperBordered = styled(Wrapper)`\n  border: 1px solid ${grey.dark};\n  border-radius: 4px;\n`;\n\nexport const Head = styled.thead`\n  background-color: white;\n`;\n\nexport const Body = styled.tbody<{ fixedColumnsStyle?: string }>`\n  tr {\n    ${({ fixedColumnsStyle }) => fixedColumnsStyle};\n  }\n\n  & + & > tr:first-child > td {\n    border-top: 1px solid ${grey.base};\n  }\n\n  tr:not(:first-child) > td {\n    border-top: 1px solid transparent;\n  }\n\n  &&& tr:hover td {\n    background-color: #ebf4fb; /* TODO: Remove magic hex value */\n  }\n`;\n\nexport const Foot = styled.tfoot`\n  & td {\n    background-color: ${grey.lightest};\n    padding: 1.5rem 1rem;\n    border-top: 1px solid ${blue.base};\n  }\n`;\n\nexport interface RowProps {\n  accentColor?: string;\n}\n\nexport const Row = styled.tr<RowProps>`\n  &.hidden {\n    visibility: collapse;\n  }\n\n  ${({ accentColor }) =>\n    accentColor &&\n    `\n    & > td:first-child::before {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      width: 4px;\n      background-color: ${accentColor};  \n    }\n  `}\n`;\n\nexport interface CellProps {\n  align?: 'left' | 'center' | 'right';\n  grow?: boolean;\n}\n\nexport const Cell = styled.td<CellProps>`\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: ${({ align }) => align || 'left'};\n  background-color: white;\n\n  font-family: ${text.bodySmall.fontFamily};\n  font-size: ${text.bodySmall.fontSize};\n  font-weight: ${text.bodySmall.fontWeight};\n  color: ${text.bodySmall.color};\n  line-height: ${sizes.base};\n\n  width: ${({ grow }) => (grow ? '100%' : 'auto')};\n\n  & > * {\n    vertical-align: middle;\n  }\n`;\n\nexport const HeaderCell = styled(Cell).attrs({\n  as: 'th',\n})`\n  user-select: none;\n  border-bottom: 1px solid ${grey.dark};\n\n  font-family: ${text.bodySmallBold.fontFamily};\n  font-size: ${text.bodySmallBold.fontSize};\n  font-weight: ${text.bodySmallBold.fontWeight};\n  color: ${text.bodySmallBold.color};\n\n  & span {\n    white-space: pre-line;\n  }\n\n  &.sortable:hover {\n    cursor: pointer;\n    background-color: ${grey.light};\n  }\n`;\n\nconst alignmentMap = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n};\n\nexport interface HeaderCellLayoutProps {\n  align?: 'left' | 'center' | 'right';\n}\n\nexport const HeaderCellLayout = styled.div<HeaderCellLayoutProps>`\n  display: flex;\n  align-items: center;\n  justify-content: ${({ align }) => (align ? alignmentMap[align] : 'flex-start')};\n\n  & > * + * {\n    margin-left: 0.25rem;\n  }\n`;\n\ntype TablePropTypes = {\n  striped?: StripedType;\n  noWrap?: NoWrapType;\n  tableLoading?: boolean;\n  isFixedLayout?: boolean;\n};\n\nexport const Table = styled.table<TablePropTypes>`\n  width: 100%;\n  border-spacing: 0;\n  table-layout: ${({ isFixedLayout }) => (isFixedLayout ? 'fixed' : 'auto')};\n\n  ${({ striped }) =>\n    striped &&\n    `\n    & ${Body}:nth-child(even) td {\n      background-color: ${grey.lightest};\n    }\n  `}\n\n  & * {\n    box-sizing: border-box;\n\n    ${({ tableLoading }) =>\n      tableLoading &&\n      `\n      user-select: none;\n      pointer-events: none;\n    `}\n  }\n\n  ${({ noWrap }) =>\n    noWrap &&\n    `\n    & ${HeaderCell}, & ${HeaderCell} span {\n      white-space: nowrap;\n    }\n  `}\n`;\n\nexport const Footer = styled.tfoot<{ fixedColumnsStyle?: string }>`\n  tr {\n    ${({ fixedColumnsStyle }) => fixedColumnsStyle};\n  }\n\n  & ${Cell} {\n    border-top: 1px solid ${grey.dark};\n    background-color: ${grey.lightest};\n    padding-top: ${sizes.base};\n    padding-bottom: ${sizes.base};\n    line-height: 2rem;\n  }\n`;\n\nexport const StickyHeaderWrapper = styled.div`\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  overflow-x: hidden;\n`;\n\nexport const FakeHeaderTable = styled(Table)``;\n"],"names":[],"mappings":"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"}

package/dist/components/LegacyDataTable/utils/index.cjs

@@ -1,19 +1,15 @@
 'use strict';
 
-/**
- * Converts fixed column inline styles into flat CSS rule blocks.
- * Each rule targets `tr > td:nth-child(N)` or `tr > td:nth-last-child(N)`
- * so they can be injected in a scoped <style> tag without CSS nesting.
- */
 const convertFixedColumnInlineStyleToStyled = (fixedColumnsStyle) => {
     const styles = [];
-    fixedColumnsStyle.forEach(({ index, style }) => {
-        const pseudo = style.left !== undefined ? 'nth-child' : 'nth-last-child';
-        const side = style.left !== undefined ? 'left' : 'right';
-        const offset = style.left !== undefined ? style.left : style.right;
-        styles.push(`tr > td:${pseudo}(${Math.abs(index)}) { position: sticky; ${side}: ${offset}px; z-index: ${style.zIndex}; }`);
-    });
-    return styles.join('\n');
+    fixedColumnsStyle.forEach(({ index, style }) => styles.push(`
+      > td:${style.left !== undefined ? 'nth-child' : 'nth-last-child'}(${Math.abs(index)}) {
+        position: sticky;
+        ${style.left !== undefined ? 'left' : 'right'}: ${style.left !== undefined ? style.left : style.right}px;
+        z-index: ${style.zIndex};
+      }
+    `));
+    return styles.join('\n\n');
 };
 
 exports.convertFixedColumnInlineStyleToStyled = convertFixedColumnInlineStyleToStyled;

package/dist/components/LegacyDataTable/utils/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/LegacyDataTable/utils/index.ts"],"sourcesContent":["import { FixedColumnInlineStyle } from './types';\n\n/**\n * Converts fixed column inline styles into flat CSS rule blocks.\n * Each rule targets `tr > td:nth-child(N)` or `tr > td:nth-last-child(N)`\n * so they can be injected in a scoped <style> tag without CSS nesting.\n */\nexport const convertFixedColumnInlineStyleToStyled = (\n  fixedColumnsStyle: FixedColumnInlineStyle[],\n): string => {\n  const styles: string[] = [];\n\n  fixedColumnsStyle.forEach(({ index, style }) => {\n    const pseudo = style.left !== undefined ? 'nth-child' : 'nth-last-child';\n    const side = style.left !== undefined ? 'left' : 'right';\n    const offset = style.left !== undefined ? style.left : style.right;\n\n    styles.push(\n      `tr > td:${pseudo}(${Math.abs(index)}) { position: sticky; ${side}: ${offset}px; z-index: ${style.zIndex}; }`,\n    );\n  });\n\n  return styles.join('\\n');\n};\n"],"names":[],"mappings":";;AAEA;;;;AAIG;AACI,MAAM,qCAAqC,GAAG,CACnD,iBAA2C,KACjC;IACV,MAAM,MAAM,GAAa,EAAE;IAE3B,iBAAiB,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAI;AAC7C,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,KAAK,SAAS,GAAG,WAAW,GAAG,gBAAgB;AACxE,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO;AACxD,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,KAAK,SAAS,GAAG,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,KAAK;QAElE,MAAM,CAAC,IAAI,CACT,CAAA,QAAA,EAAW,MAAM,CAAA,CAAA,EAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA,sBAAA,EAAyB,IAAI,KAAK,MAAM,CAAA,aAAA,EAAgB,KAAK,CAAC,MAAM,CAAA,GAAA,CAAK,CAC9G;AACH,IAAA,CAAC,CAAC;AAEF,IAAA,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;AAC1B;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/LegacyDataTable/utils/index.ts"],"sourcesContent":["import { FixedColumnInlineStyle } from './types';\n\nexport const convertFixedColumnInlineStyleToStyled = (\n  fixedColumnsStyle: FixedColumnInlineStyle[],\n): string => {\n  const styles: string[] = [];\n\n  fixedColumnsStyle.forEach(({ index, style }) =>\n    styles.push(\n      `\n      > td:${style.left !== undefined ? 'nth-child' : 'nth-last-child'}(${Math.abs(index)}) {\n        position: sticky;\n        ${style.left !== undefined ? 'left' : 'right'}: ${\n          style.left !== undefined ? style.left : style.right\n        }px;\n        z-index: ${style.zIndex};\n      }\n    `,\n    ),\n  );\n\n  return styles.join('\\n\\n');\n};\n"],"names":[],"mappings":";;AAEO,MAAM,qCAAqC,GAAG,CACnD,iBAA2C,KACjC;IACV,MAAM,MAAM,GAAa,EAAE;AAE3B,IAAA,iBAAiB,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KACzC,MAAM,CAAC,IAAI,CACT;AACO,WAAA,EAAA,KAAK,CAAC,IAAI,KAAK,SAAS,GAAG,WAAW,GAAG,gBAAgB,CAAA,CAAA,EAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;;AAE/E,QAAA,EAAA,KAAK,CAAC,IAAI,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA,EAAA,EAC3C,KAAK,CAAC,IAAI,KAAK,SAAS,GAAG,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,KAChD,CAAA;AACW,iBAAA,EAAA,KAAK,CAAC,MAAM,CAAA;;AAE1B,IAAA,CAAA,CACA,CACF;AAED,IAAA,OAAO,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;AAC5B;;;;"}

package/dist/components/LegacyDataTable/utils/index.d.ts

@@ -1,7 +1,2 @@
 import { FixedColumnInlineStyle } from './types';
-/**
- * Converts fixed column inline styles into flat CSS rule blocks.
- * Each rule targets `tr > td:nth-child(N)` or `tr > td:nth-last-child(N)`
- * so they can be injected in a scoped <style> tag without CSS nesting.
- */
 export declare const convertFixedColumnInlineStyleToStyled: (fixedColumnsStyle: FixedColumnInlineStyle[]) => string;

package/dist/components/LegacyDataTable/utils/index.js

@@ -1,17 +1,13 @@
-/**
- * Converts fixed column inline styles into flat CSS rule blocks.
- * Each rule targets `tr > td:nth-child(N)` or `tr > td:nth-last-child(N)`
- * so they can be injected in a scoped <style> tag without CSS nesting.
- */
 const convertFixedColumnInlineStyleToStyled = (fixedColumnsStyle) => {
     const styles = [];
-    fixedColumnsStyle.forEach(({ index, style }) => {
-        const pseudo = style.left !== undefined ? 'nth-child' : 'nth-last-child';
-        const side = style.left !== undefined ? 'left' : 'right';
-        const offset = style.left !== undefined ? style.left : style.right;
-        styles.push(`tr > td:${pseudo}(${Math.abs(index)}) { position: sticky; ${side}: ${offset}px; z-index: ${style.zIndex}; }`);
-    });
-    return styles.join('\n');
+    fixedColumnsStyle.forEach(({ index, style }) => styles.push(`
+      > td:${style.left !== undefined ? 'nth-child' : 'nth-last-child'}(${Math.abs(index)}) {
+        position: sticky;
+        ${style.left !== undefined ? 'left' : 'right'}: ${style.left !== undefined ? style.left : style.right}px;
+        z-index: ${style.zIndex};
+      }
+    `));
+    return styles.join('\n\n');
 };
 
 export { convertFixedColumnInlineStyleToStyled };

package/dist/components/LegacyDataTable/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/LegacyDataTable/utils/index.ts"],"sourcesContent":["import { FixedColumnInlineStyle } from './types';\n\n/**\n * Converts fixed column inline styles into flat CSS rule blocks.\n * Each rule targets `tr > td:nth-child(N)` or `tr > td:nth-last-child(N)`\n * so they can be injected in a scoped <style> tag without CSS nesting.\n */\nexport const convertFixedColumnInlineStyleToStyled = (\n  fixedColumnsStyle: FixedColumnInlineStyle[],\n): string => {\n  const styles: string[] = [];\n\n  fixedColumnsStyle.forEach(({ index, style }) => {\n    const pseudo = style.left !== undefined ? 'nth-child' : 'nth-last-child';\n    const side = style.left !== undefined ? 'left' : 'right';\n    const offset = style.left !== undefined ? style.left : style.right;\n\n    styles.push(\n      `tr > td:${pseudo}(${Math.abs(index)}) { position: sticky; ${side}: ${offset}px; z-index: ${style.zIndex}; }`,\n    );\n  });\n\n  return styles.join('\\n');\n};\n"],"names":[],"mappings":"AAEA;;;;AAIG;AACI,MAAM,qCAAqC,GAAG,CACnD,iBAA2C,KACjC;IACV,MAAM,MAAM,GAAa,EAAE;IAE3B,iBAAiB,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAI;AAC7C,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,KAAK,SAAS,GAAG,WAAW,GAAG,gBAAgB;AACxE,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO;AACxD,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,KAAK,SAAS,GAAG,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,KAAK;QAElE,MAAM,CAAC,IAAI,CACT,CAAA,QAAA,EAAW,MAAM,CAAA,CAAA,EAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA,sBAAA,EAAyB,IAAI,KAAK,MAAM,CAAA,aAAA,EAAgB,KAAK,CAAC,MAAM,CAAA,GAAA,CAAK,CAC9G;AACH,IAAA,CAAC,CAAC;AAEF,IAAA,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;AAC1B;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/LegacyDataTable/utils/index.ts"],"sourcesContent":["import { FixedColumnInlineStyle } from './types';\n\nexport const convertFixedColumnInlineStyleToStyled = (\n  fixedColumnsStyle: FixedColumnInlineStyle[],\n): string => {\n  const styles: string[] = [];\n\n  fixedColumnsStyle.forEach(({ index, style }) =>\n    styles.push(\n      `\n      > td:${style.left !== undefined ? 'nth-child' : 'nth-last-child'}(${Math.abs(index)}) {\n        position: sticky;\n        ${style.left !== undefined ? 'left' : 'right'}: ${\n          style.left !== undefined ? style.left : style.right\n        }px;\n        z-index: ${style.zIndex};\n      }\n    `,\n    ),\n  );\n\n  return styles.join('\\n\\n');\n};\n"],"names":[],"mappings":"AAEO,MAAM,qCAAqC,GAAG,CACnD,iBAA2C,KACjC;IACV,MAAM,MAAM,GAAa,EAAE;AAE3B,IAAA,iBAAiB,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KACzC,MAAM,CAAC,IAAI,CACT;AACO,WAAA,EAAA,KAAK,CAAC,IAAI,KAAK,SAAS,GAAG,WAAW,GAAG,gBAAgB,CAAA,CAAA,EAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;;AAE/E,QAAA,EAAA,KAAK,CAAC,IAAI,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA,EAAA,EAC3C,KAAK,CAAC,IAAI,KAAK,SAAS,GAAG,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,KAChD,CAAA;AACW,iBAAA,EAAA,KAAK,CAAC,MAAM,CAAA;;AAE1B,IAAA,CAAA,CACA,CACF;AAED,IAAA,OAAO,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;AAC5B;;;;"}

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var styled = require('./styled.cjs');
+var LoginWithAmazonButton_module = require('./LoginWithAmazonButton.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -22,7 +22,7 @@ const LoginWithAmazonButton = (props) => {
     const handleMouseUp = () => {
         setImage(buttonImg);
     };
-    return (React__default.default.createElement(styled.LoginButton, { onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, "aria-label": buttonDescription, ...props },
+    return (React__default.default.createElement("button", { type: "button", className: LoginWithAmazonButton_module.loginButton, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, "aria-label": buttonDescription, ...props },
         React__default.default.createElement("img", { src: image, alt: buttonDescription })));
 };
 

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LoginWithAmazonButton.cjs","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { LoginButton } from './styled';\n\nconst buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';\nconst buttonPressedImg =\n  'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';\n\nexport const buttonDescription = 'Log in with Amazon';\n\n/**\n * Image used in this button is to comply with official\n * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).\n */\nexport const LoginWithAmazonButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = (\n  props,\n) => {\n  const [image, setImage] = useState(buttonImg);\n\n  const handleMouseDown = () => {\n    setImage(buttonPressedImg);\n  };\n\n  const handleMouseUp = () => {\n    setImage(buttonImg);\n  };\n\n  return (\n    <LoginButton\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      aria-label={buttonDescription}\n      {...props}\n    >\n      {/* alt attr for better accessibility if image is failed to load */}\n      <img src={image} alt={buttonDescription} />\n    </LoginButton>\n  );\n};\n"],"names":["useState","React","LoginButton"],"mappings":";;;;;;;;;AAGA,MAAM,SAAS,GAAG,gFAAgF;AAClG,MAAM,gBAAgB,GACpB,wFAAwF;AAEnF,MAAM,iBAAiB,GAAG;AAEjC;;;AAGG;AACI,MAAM,qBAAqB,GAA4D,CAC5F,KAAK,KACH;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGA,cAAQ,CAAC,SAAS,CAAC;IAE7C,MAAM,eAAe,GAAG,MAAK;QAC3B,QAAQ,CAAC,gBAAgB,CAAC;AAC5B,IAAA,CAAC;IAED,MAAM,aAAa,GAAG,MAAK;QACzB,QAAQ,CAAC,SAAS,CAAC;AACrB,IAAA,CAAC;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,kBAAW,EAAA,EACV,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,EAAA,YAAA,EACZ,iBAAiB,KACzB,KAAK,EAAA;QAGTD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAA,CAAI,CAC/B;AAElB;;;;;"}
+{"version":3,"file":"LoginWithAmazonButton.cjs","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport styles from './LoginWithAmazonButton.module.scss';\n\nconst buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';\nconst buttonPressedImg =\n  'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';\n\nexport const buttonDescription = 'Log in with Amazon';\n\n/**\n * Image used in this button is to comply with official\n * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).\n */\nexport const LoginWithAmazonButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = (\n  props,\n) => {\n  const [image, setImage] = useState(buttonImg);\n\n  const handleMouseDown = () => {\n    setImage(buttonPressedImg);\n  };\n\n  const handleMouseUp = () => {\n    setImage(buttonImg);\n  };\n\n  return (\n    <button\n      type=\"button\"\n      className={styles.loginButton}\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      aria-label={buttonDescription}\n      {...props}\n    >\n      {/* alt attr for better accessibility if image is failed to load */}\n      <img src={image} alt={buttonDescription} />\n    </button>\n  );\n};\n"],"names":["useState","React","styles"],"mappings":";;;;;;;;;AAGA,MAAM,SAAS,GAAG,gFAAgF;AAClG,MAAM,gBAAgB,GACpB,wFAAwF;AAEnF,MAAM,iBAAiB,GAAG;AAEjC;;;AAGG;AACI,MAAM,qBAAqB,GAA4D,CAC5F,KAAK,KACH;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGA,cAAQ,CAAC,SAAS,CAAC;IAE7C,MAAM,eAAe,GAAG,MAAK;QAC3B,QAAQ,CAAC,gBAAgB,CAAC;AAC5B,IAAA,CAAC;IAED,MAAM,aAAa,GAAG,MAAK;QACzB,QAAQ,CAAC,SAAS,CAAC;AACrB,IAAA,CAAC;IAED,QACEC,iDACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAEC,4BAAM,CAAC,WAAW,EAC7B,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,EAAA,YAAA,EACZ,iBAAiB,EAAA,GACzB,KAAK,EAAA;QAGTD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAA,CAAI,CACpC;AAEb;;;;;"}

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.js

@@ -1,5 +1,5 @@
 import React__default, { useState } from 'react';
-import { LoginButton } from './styled.js';
+import styles from './LoginWithAmazonButton.module.scss.js';
 
 const buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';
 const buttonPressedImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';
@@ -16,7 +16,7 @@ const LoginWithAmazonButton = (props) => {
     const handleMouseUp = () => {
         setImage(buttonImg);
     };
-    return (React__default.createElement(LoginButton, { onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, "aria-label": buttonDescription, ...props },
+    return (React__default.createElement("button", { type: "button", className: styles.loginButton, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, "aria-label": buttonDescription, ...props },
         React__default.createElement("img", { src: image, alt: buttonDescription })));
 };
 

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoginWithAmazonButton.js","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { LoginButton } from './styled';\n\nconst buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';\nconst buttonPressedImg =\n  'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';\n\nexport const buttonDescription = 'Log in with Amazon';\n\n/**\n * Image used in this button is to comply with official\n * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).\n */\nexport const LoginWithAmazonButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = (\n  props,\n) => {\n  const [image, setImage] = useState(buttonImg);\n\n  const handleMouseDown = () => {\n    setImage(buttonPressedImg);\n  };\n\n  const handleMouseUp = () => {\n    setImage(buttonImg);\n  };\n\n  return (\n    <LoginButton\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      aria-label={buttonDescription}\n      {...props}\n    >\n      {/* alt attr for better accessibility if image is failed to load */}\n      <img src={image} alt={buttonDescription} />\n    </LoginButton>\n  );\n};\n"],"names":["React"],"mappings":";;;AAGA,MAAM,SAAS,GAAG,gFAAgF;AAClG,MAAM,gBAAgB,GACpB,wFAAwF;AAEnF,MAAM,iBAAiB,GAAG;AAEjC;;;AAGG;AACI,MAAM,qBAAqB,GAA4D,CAC5F,KAAK,KACH;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC;IAE7C,MAAM,eAAe,GAAG,MAAK;QAC3B,QAAQ,CAAC,gBAAgB,CAAC;AAC5B,IAAA,CAAC;IAED,MAAM,aAAa,GAAG,MAAK;QACzB,QAAQ,CAAC,SAAS,CAAC;AACrB,IAAA,CAAC;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,EAAA,YAAA,EACZ,iBAAiB,KACzB,KAAK,EAAA;QAGTA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAA,CAAI,CAC/B;AAElB;;;;"}
+{"version":3,"file":"LoginWithAmazonButton.js","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport styles from './LoginWithAmazonButton.module.scss';\n\nconst buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';\nconst buttonPressedImg =\n  'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';\n\nexport const buttonDescription = 'Log in with Amazon';\n\n/**\n * Image used in this button is to comply with official\n * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).\n */\nexport const LoginWithAmazonButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = (\n  props,\n) => {\n  const [image, setImage] = useState(buttonImg);\n\n  const handleMouseDown = () => {\n    setImage(buttonPressedImg);\n  };\n\n  const handleMouseUp = () => {\n    setImage(buttonImg);\n  };\n\n  return (\n    <button\n      type=\"button\"\n      className={styles.loginButton}\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      aria-label={buttonDescription}\n      {...props}\n    >\n      {/* alt attr for better accessibility if image is failed to load */}\n      <img src={image} alt={buttonDescription} />\n    </button>\n  );\n};\n"],"names":["React"],"mappings":";;;AAGA,MAAM,SAAS,GAAG,gFAAgF;AAClG,MAAM,gBAAgB,GACpB,wFAAwF;AAEnF,MAAM,iBAAiB,GAAG;AAEjC;;;AAGG;AACI,MAAM,qBAAqB,GAA4D,CAC5F,KAAK,KACH;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC;IAE7C,MAAM,eAAe,GAAG,MAAK;QAC3B,QAAQ,CAAC,gBAAgB,CAAC;AAC5B,IAAA,CAAC;IAED,MAAM,aAAa,GAAG,MAAK;QACzB,QAAQ,CAAC,SAAS,CAAC;AACrB,IAAA,CAAC;IAED,QACEA,yCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,EAAA,YAAA,EACZ,iBAAiB,EAAA,GACzB,KAAK,EAAA;QAGTA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAA,CAAI,CACpC;AAEb;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._loginButton_y5bj1_1 {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n}\n._loginButton_y5bj1_1 img {\n  width: 156px;\n  height: 32px;\n}");
+var styles = {"loginButton":"_loginButton_y5bj1_1"};
+
+module.exports = styles;
+//# sourceMappingURL=LoginWithAmazonButton.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoginWithAmazonButton.module.scss.cjs","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.module.scss"],"sourcesContent":[".loginButton {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n\n  img {\n    width: 156px;\n    height: 32px;\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,uKAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._loginButton_y5bj1_1 {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n}\n._loginButton_y5bj1_1 img {\n  width: 156px;\n  height: 32px;\n}");
+var styles = {"loginButton":"_loginButton_y5bj1_1"};
+
+export { styles as default };
+//# sourceMappingURL=LoginWithAmazonButton.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoginWithAmazonButton.module.scss.js","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.module.scss"],"sourcesContent":[".loginButton {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n\n  img {\n    width: 156px;\n    height: 32px;\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,uKAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA;;;;"}

package/dist/components/Pagination/Pagination.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var styled = require('./styled.cjs');
+var Pagination_module = require('./Pagination.module.scss.cjs');
 var components = require('./components.cjs');
 var usePagination = require('./hooks/usePagination.cjs');
 var EndArrowIcon = require('../../icons/design-system/components/EndArrowIcon.cjs');
@@ -9,6 +9,8 @@ var LeftArrowIcon = require('../../icons/design-system/components/LeftArrowIcon.
 var RightArrowIcon = require('../../icons/design-system/components/RightArrowIcon.cjs');
 var StartArrowIcon = require('../../icons/design-system/components/StartArrowIcon.cjs');
 var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
+var Button = require('../Button/Button.cjs');
+var index = require('../TextField/index.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -35,13 +37,13 @@ const Pagination = ({ testId, e2eClassName, currentPage, totalPagesCount, handle
             handleChangePage(totalPagesCount);
     };
     return (React__default.default.createElement(FlexRow.FlexRow, { alignItems: "center", gap: "xs", "data-testid": testId, className: e2eClassName },
-        React__default.default.createElement(styled.PaginationButton, { onClick: handleSkipBack, iconSlot: React__default.default.createElement(StartArrowIcon.ReactComponent, null), size: "sm", "aria-label": "go to first page", "aria-disabled": currentPage <= 1, disabled: currentPage <= 1 }),
-        React__default.default.createElement(styled.PaginationButton, { onClick: handleDecrement, iconSlot: React__default.default.createElement(LeftArrowIcon.ReactComponent, null), size: "sm", "aria-label": "go to previous page", "aria-disabled": currentPage <= 1, disabled: currentPage <= 1 }),
+        React__default.default.createElement(Button.Button, { className: Pagination_module.paginationButton, onClick: handleSkipBack, iconSlot: React__default.default.createElement(StartArrowIcon.ReactComponent, null), size: "sm", "aria-label": "go to first page", "aria-disabled": currentPage <= 1, disabled: currentPage <= 1 }),
+        React__default.default.createElement(Button.Button, { className: Pagination_module.paginationButton, onClick: handleDecrement, iconSlot: React__default.default.createElement(LeftArrowIcon.ReactComponent, null), size: "sm", "aria-label": "go to previous page", "aria-disabled": currentPage <= 1, disabled: currentPage <= 1 }),
         React__default.default.createElement("form", { onSubmit: handleFormSubmit },
-            React__default.default.createElement(styled.PageInput, { "aria-live": "polite", "aria-label": `page ${currentPage} of ${totalPagesCount}`, size: "sm", type: "number", value: pageInputValue, min: "1", max: `${totalPagesCount}`, onChange: handleInputChange, onBlur: handleSubmit })),
+            React__default.default.createElement(index.TextField, { className: Pagination_module.pageInput, "aria-live": "polite", "aria-label": `page ${currentPage} of ${totalPagesCount}`, size: "sm", type: "number", value: pageInputValue, min: "1", max: `${totalPagesCount}`, onChange: handleInputChange, onBlur: handleSubmit })),
         React__default.default.createElement(components.PageCount, { count: totalPagesCount }),
-        React__default.default.createElement(styled.PaginationButton, { onClick: handleIncrement, iconSlot: React__default.default.createElement(RightArrowIcon.ReactComponent, null), size: "sm", "aria-label": "go to next page", "aria-disabled": currentPage >= totalPagesCount, disabled: currentPage >= totalPagesCount }),
-        React__default.default.createElement(styled.PaginationButton, { onClick: handleSkipToEnd, iconSlot: React__default.default.createElement(EndArrowIcon.ReactComponent, null), size: "sm", "aria-label": "go to last page", "aria-disabled": currentPage >= totalPagesCount, disabled: currentPage >= totalPagesCount })));
+        React__default.default.createElement(Button.Button, { className: Pagination_module.paginationButton, onClick: handleIncrement, iconSlot: React__default.default.createElement(RightArrowIcon.ReactComponent, null), size: "sm", "aria-label": "go to next page", "aria-disabled": currentPage >= totalPagesCount, disabled: currentPage >= totalPagesCount }),
+        React__default.default.createElement(Button.Button, { className: Pagination_module.paginationButton, onClick: handleSkipToEnd, iconSlot: React__default.default.createElement(EndArrowIcon.ReactComponent, null), size: "sm", "aria-label": "go to last page", "aria-disabled": currentPage >= totalPagesCount, disabled: currentPage >= totalPagesCount })));
 };
 
 exports.Pagination = Pagination;

package/dist/components/Pagination/Pagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.cjs","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import React from 'react';\nimport { PaginationProps } from './types';\n\nimport { PageInput, PaginationButton } from './styled';\nimport { PageCount } from './components';\nimport { usePagination } from './hooks/usePagination';\n\nimport { RightArrowIcon, StartArrowIcon, LeftArrowIcon, EndArrowIcon } from '../../icons';\nimport { FlexRow } from '../Flex/FlexRow';\n\nexport const Pagination = ({\n  testId,\n  e2eClassName,\n  currentPage,\n  totalPagesCount,\n  handleChangePage,\n}: PaginationProps) => {\n  const {\n    pageInputValue,\n    handleIncrement,\n    handleDecrement,\n    handleFormSubmit,\n    handleInputChange,\n    handleSubmit,\n  } = usePagination({\n    currentPage,\n    totalPagesCount,\n    handleChangePage,\n  });\n\n  /**\n   * A function to go back to the first page, provided we aren't already there.\n   */\n  const handleSkipBack = () => {\n    if (currentPage !== 1) handleChangePage(1);\n  };\n\n  /**\n   * A function to go to the last page, provided we aren't already there.\n   */\n  const handleSkipToEnd = () => {\n    if (currentPage !== totalPagesCount) handleChangePage(totalPagesCount);\n  };\n\n  return (\n    <FlexRow alignItems=\"center\" gap=\"xs\" data-testid={testId} className={e2eClassName}>\n      <PaginationButton\n        onClick={handleSkipBack}\n        iconSlot={<StartArrowIcon />}\n        size=\"sm\"\n        aria-label=\"go to first page\"\n        aria-disabled={currentPage <= 1}\n        disabled={currentPage <= 1}\n      />\n      <PaginationButton\n        onClick={handleDecrement}\n        iconSlot={<LeftArrowIcon />}\n        size=\"sm\"\n        aria-label=\"go to previous page\"\n        aria-disabled={currentPage <= 1}\n        disabled={currentPage <= 1}\n      />\n\n      <form onSubmit={handleFormSubmit}>\n        <PageInput\n          aria-live=\"polite\"\n          aria-label={`page ${currentPage} of ${totalPagesCount}`}\n          size=\"sm\"\n          type=\"number\"\n          value={pageInputValue}\n          min=\"1\"\n          max={`${totalPagesCount}`}\n          onChange={handleInputChange}\n          onBlur={handleSubmit}\n        />\n      </form>\n\n      <PageCount count={totalPagesCount} />\n\n      <PaginationButton\n        onClick={handleIncrement}\n        iconSlot={<RightArrowIcon />}\n        size=\"sm\"\n        aria-label=\"go to next page\"\n        aria-disabled={currentPage >= totalPagesCount}\n        disabled={currentPage >= totalPagesCount}\n      />\n\n      <PaginationButton\n        onClick={handleSkipToEnd}\n        iconSlot={<EndArrowIcon />}\n        size=\"sm\"\n        aria-label=\"go to last page\"\n        aria-disabled={currentPage >= totalPagesCount}\n        disabled={currentPage >= totalPagesCount}\n      />\n    </FlexRow>\n  );\n};\n"],"names":["usePagination","React","FlexRow","PaginationButton","StartArrowIcon","LeftArrowIcon","PageInput","PageCount","RightArrowIcon","EndArrowIcon"],"mappings":";;;;;;;;;;;;;;;;AAUO,MAAM,UAAU,GAAG,CAAC,EACzB,MAAM,EACN,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,GACA,KAAI;AACpB,IAAA,MAAM,EACJ,cAAc,EACd,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,GACb,GAAGA,2BAAa,CAAC;QAChB,WAAW;QACX,eAAe;QACf,gBAAgB;AACjB,KAAA,CAAC;AAEF;;AAEG;IACH,MAAM,cAAc,GAAG,MAAK;QAC1B,IAAI,WAAW,KAAK,CAAC;YAAE,gBAAgB,CAAC,CAAC,CAAC;AAC5C,IAAA,CAAC;AAED;;AAEG;IACH,MAAM,eAAe,GAAG,MAAK;QAC3B,IAAI,WAAW,KAAK,eAAe;YAAE,gBAAgB,CAAC,eAAe,CAAC;AACxE,IAAA,CAAC;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAA,aAAA,EAAc,MAAM,EAAE,SAAS,EAAE,YAAY,EAAA;QAChFD,sBAAA,CAAA,aAAA,CAACE,uBAAgB,EAAA,EACf,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAEF,sBAAA,CAAA,aAAA,CAACG,6BAAc,EAAA,IAAA,CAAG,EAC5B,IAAI,EAAC,IAAI,EAAA,YAAA,EACE,kBAAkB,EAAA,eAAA,EACd,WAAW,IAAI,CAAC,EAC/B,QAAQ,EAAE,WAAW,IAAI,CAAC,EAAA,CAC1B;QACFH,sBAAA,CAAA,aAAA,CAACE,uBAAgB,EAAA,EACf,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAEF,sBAAA,CAAA,aAAA,CAACI,4BAAa,EAAA,IAAA,CAAG,EAC3B,IAAI,EAAC,IAAI,EAAA,YAAA,EACE,qBAAqB,EAAA,eAAA,EACjB,WAAW,IAAI,CAAC,EAC/B,QAAQ,EAAE,WAAW,IAAI,CAAC,EAAA,CAC1B;QAEFJ,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,QAAQ,EAAE,gBAAgB,EAAA;AAC9B,YAAAA,sBAAA,CAAA,aAAA,CAACK,gBAAS,EAAA,EAAA,WAAA,EACE,QAAQ,gBACN,CAAA,KAAA,EAAQ,WAAW,OAAO,eAAe,CAAA,CAAE,EACvD,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,cAAc,EACrB,GAAG,EAAC,GAAG,EACP,GAAG,EAAE,GAAG,eAAe,CAAA,CAAE,EACzB,QAAQ,EAAE,iBAAiB,EAC3B,MAAM,EAAE,YAAY,GACpB,CACG;AAEP,QAAAL,sBAAA,CAAA,aAAA,CAACM,oBAAS,EAAA,EAAC,KAAK,EAAE,eAAe,EAAA,CAAI;QAErCN,sBAAA,CAAA,aAAA,CAACE,uBAAgB,EAAA,EACf,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAEF,sBAAA,CAAA,aAAA,CAACO,6BAAc,EAAA,IAAA,CAAG,EAC5B,IAAI,EAAC,IAAI,EAAA,YAAA,EACE,iBAAiB,EAAA,eAAA,EACb,WAAW,IAAI,eAAe,EAC7C,QAAQ,EAAE,WAAW,IAAI,eAAe,EAAA,CACxC;AAEF,QAAAP,sBAAA,CAAA,aAAA,CAACE,uBAAgB,EAAA,EACf,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAEF,sBAAA,CAAA,aAAA,CAACQ,2BAAY,EAAA,IAAA,CAAG,EAC1B,IAAI,EAAC,IAAI,EAAA,YAAA,EACE,iBAAiB,EAAA,eAAA,EACb,WAAW,IAAI,eAAe,EAC7C,QAAQ,EAAE,WAAW,IAAI,eAAe,EAAA,CACxC,CACM;AAEd;;;;"}
+{"version":3,"file":"Pagination.cjs","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import React from 'react';\nimport { PaginationProps } from './types';\n\nimport styles from './Pagination.module.scss';\nimport { PageCount } from './components';\nimport { usePagination } from './hooks/usePagination';\n\nimport { RightArrowIcon, StartArrowIcon, LeftArrowIcon, EndArrowIcon } from '../../icons';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Button } from '../Button';\nimport { TextField } from '../TextField';\n\nexport const Pagination = ({\n  testId,\n  e2eClassName,\n  currentPage,\n  totalPagesCount,\n  handleChangePage,\n}: PaginationProps) => {\n  const {\n    pageInputValue,\n    handleIncrement,\n    handleDecrement,\n    handleFormSubmit,\n    handleInputChange,\n    handleSubmit,\n  } = usePagination({\n    currentPage,\n    totalPagesCount,\n    handleChangePage,\n  });\n\n  /**\n   * A function to go back to the first page, provided we aren't already there.\n   */\n  const handleSkipBack = () => {\n    if (currentPage !== 1) handleChangePage(1);\n  };\n\n  /**\n   * A function to go to the last page, provided we aren't already there.\n   */\n  const handleSkipToEnd = () => {\n    if (currentPage !== totalPagesCount) handleChangePage(totalPagesCount);\n  };\n\n  return (\n    <FlexRow alignItems=\"center\" gap=\"xs\" data-testid={testId} className={e2eClassName}>\n      <Button\n        className={styles.paginationButton}\n        onClick={handleSkipBack}\n        iconSlot={<StartArrowIcon />}\n        size=\"sm\"\n        aria-label=\"go to first page\"\n        aria-disabled={currentPage <= 1}\n        disabled={currentPage <= 1}\n      />\n      <Button\n        className={styles.paginationButton}\n        onClick={handleDecrement}\n        iconSlot={<LeftArrowIcon />}\n        size=\"sm\"\n        aria-label=\"go to previous page\"\n        aria-disabled={currentPage <= 1}\n        disabled={currentPage <= 1}\n      />\n\n      <form onSubmit={handleFormSubmit}>\n        <TextField\n          className={styles.pageInput}\n          aria-live=\"polite\"\n          aria-label={`page ${currentPage} of ${totalPagesCount}`}\n          size=\"sm\"\n          type=\"number\"\n          value={pageInputValue}\n          min=\"1\"\n          max={`${totalPagesCount}`}\n          onChange={handleInputChange}\n          onBlur={handleSubmit}\n        />\n      </form>\n\n      <PageCount count={totalPagesCount} />\n\n      <Button\n        className={styles.paginationButton}\n        onClick={handleIncrement}\n        iconSlot={<RightArrowIcon />}\n        size=\"sm\"\n        aria-label=\"go to next page\"\n        aria-disabled={currentPage >= totalPagesCount}\n        disabled={currentPage >= totalPagesCount}\n      />\n\n      <Button\n        className={styles.paginationButton}\n        onClick={handleSkipToEnd}\n        iconSlot={<EndArrowIcon />}\n        size=\"sm\"\n        aria-label=\"go to last page\"\n        aria-disabled={currentPage >= totalPagesCount}\n        disabled={currentPage >= totalPagesCount}\n      />\n    </FlexRow>\n  );\n};\n"],"names":["usePagination","React","FlexRow","Button","styles","StartArrowIcon","LeftArrowIcon","TextField","PageCount","RightArrowIcon","EndArrowIcon"],"mappings":"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"}