@veeqo/ui 14.10.0-beta-1 → 14.10.0

package/dist/components/LegacyDataTable/styled.js

@@ -1,138 +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;
+    }
+    
+    &::-webkit-scrollbar-track {
+      background: ${scrollbar.background}; 
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      background: ${scrollbar.thumb};
+      border-radius: 4px; 
     }
-    return idRef.current;
-}
-const TableIdContext = createContext('');
-function useScopedShadowCss({ 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 startBlock = lastStartFixedColumnsIndex ? `
+    `
+    : ''} ${({ scrollDisabled, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, scrollPosition }) => scrollDisabled
+    ? ''
+    : `
     td:nth-child(${lastStartFixedColumnsIndex}):after,
     th:nth-child(${lastStartFixedColumnsIndex}):after {
       right: 0;
       transform: translate(100%);
-      ${fixedColumnShadow}
-      ${startShadow}
-    }
-  ` : '';
-    const endBlock = firstEndFixedColumnsIndex ? `
+      ${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}
-      ${endShadow}
+      ${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};  
     }
-  ` : '';
-    return `${startBlock}${endBlock}`;
-}
-const Wrapper = React__default.forwardRef(({ scrollDisabled, scrollPosition, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, showScrollbar, className, children, ...rest }, ref) => {
-    const tableId = useLegacyTableId();
-    const scopedCss = useScopedShadowCss({
-        scrollDisabled,
-        scrollPosition,
-        lastStartFixedColumnsIndex,
-        firstEndFixedColumnsIndex,
-    });
-    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 },
-        scopedCss && React__default.createElement("style", null, `[data-legacy-table-id="${tableId}"] { ${scopedCss} }`),
-        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 scopeSelector = tableId ? `[data-legacy-table-id="${tableId}"]` : '';
-    return (React__default.createElement("tbody", { className: buildClassnames([styles.body, styles.bodyBorderTop, className]), ...rest },
-        fixedColumnsStyle && React__default.createElement("style", null, `${scopeSelector} .${styles.body} tr { ${fixedColumnsStyle} }`),
-        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 --- */
+  `}`;
+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 scopeSelector = tableId ? `[data-legacy-table-id="${tableId}"]` : '';
-    return (React__default.createElement("tfoot", { className: buildClassnames([styles.footer, className]), ...rest },
-        fixedColumnsStyle && React__default.createElement("style", null, `${scopeSelector} .${styles.footer} tr { ${fixedColumnsStyle} }`),
-        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 useScopedShadowCss({\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 = `\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\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 startBlock = lastStartFixedColumnsIndex ? `\n    td:nth-child(${lastStartFixedColumnsIndex}):after,\n    th:nth-child(${lastStartFixedColumnsIndex}):after {\n      right: 0;\n      transform: translate(100%);\n      ${fixedColumnShadow}\n      ${startShadow}\n    }\n  ` : '';\n\n  const endBlock = firstEndFixedColumnsIndex ? `\n    td:nth-last-child(${firstEndFixedColumnsIndex}):after,\n    th:nth-last-child(${firstEndFixedColumnsIndex}):after {\n      left: 0;\n      transform: translate(-100%);\n      ${fixedColumnShadow}\n      ${endShadow}\n    }\n  ` : '';\n\n  return `${startBlock}${endBlock}`;\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 scopedCss = useScopedShadowCss({\n      scrollDisabled,\n      scrollPosition,\n      lastStartFixedColumnsIndex,\n      firstEndFixedColumnsIndex,\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        {scopedCss && <style>{`[data-legacy-table-id=\"${tableId}\"] { ${scopedCss} }`}</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 scopeSelector = tableId ? `[data-legacy-table-id=\"${tableId}\"]` : '';\n  return (\n    <tbody className={buildClassnames([styles.body, styles.bodyBorderTop, className])} {...rest}>\n      {/* SAFETY: fixedColumnsStyle is internally generated by convertFixedColumnInlineStyleToStyled. Do not pass user-controlled strings. */}\n      {fixedColumnsStyle && <style>{`${scopeSelector} .${styles.body} tr { ${fixedColumnsStyle} }`}</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 scopeSelector = tableId ? `[data-legacy-table-id=\"${tableId}\"]` : '';\n  return (\n    <tfoot className={buildClassnames([styles.footer, className])} {...rest}>\n      {fixedColumnsStyle && <style>{`${scopeSelector} .${styles.footer} tr { ${fixedColumnsStyle} }`}</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/Search/Search.cjs

@@ -1,14 +1,15 @@
 'use strict';
 
 var React = require('react');
-var index = require('../../theme/index.cjs');
 var withLabels = require('../../hoc/withLabels/withLabels.cjs');
-var sizes = require('../../theme/modules/sizes.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
 var Button = require('../Button/Button.cjs');
+var Loader = require('../Loader/Loader.cjs');
+var index = require('../TextField/index.cjs');
 var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
 var SearchIcon = require('../../icons/design-system/components/SearchIcon.cjs');
-var styled = require('./styled.cjs');
-var Loader = require('../Loader/Loader.cjs');
+var Search_module = require('./Search.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -16,23 +17,28 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const Search = withLabels.withLabels(({ type = 'text', disabled = false, onClearClick, onChange, value = '', className = '', isLoading = false, fill, reversed = false, autoComplete = 'on', ...otherProps }) => {
     const shouldShowClear = value && value.length > 0;
+    const iconPosition = reversed ? 'left' : 'right';
     const onClickSearch = () => {
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
     };
     const renderIcon = () => {
         if (isLoading) {
-            return React__default.default.createElement(Loader.Loader, { height: 24, color: fill || index.theme.colors.secondary.blue.base });
+            return React__default.default.createElement(Loader.Loader, { height: 24, color: fill || 'var(--colors-secondary-blue-base)' });
         }
         if (shouldShowClear && onClearClick) {
             return (React__default.default.createElement(Button.Button, { variant: "unstyled", onClick: onClearClick, style: { display: 'flex' }, "aria-label": "Clear text", type: "button" },
-                React__default.default.createElement(CrossIcon.ReactComponent, { color: fill || index.theme.colors.neutral.ink.dark })));
+                React__default.default.createElement(CrossIcon.ReactComponent, { color: fill || 'var(--colors-neutral-ink-dark)' })));
         }
         return (React__default.default.createElement(Button.Button, { variant: "unstyled", onClick: onClickSearch, style: { display: 'flex' }, "aria-label": "Search", disabled: disabled, type: "button" },
-            React__default.default.createElement(SearchIcon.ReactComponent, { color: fill || index.theme.colors.neutral.ink.dark, height: sizes.sizes.md, width: sizes.sizes.md })));
+            React__default.default.createElement(SearchIcon.ReactComponent, { color: fill || 'var(--colors-neutral-ink-dark)' })));
     };
-    return (React__default.default.createElement(styled.Container, { className: className, iconPosition: reversed ? 'left' : 'right' },
-        React__default.default.createElement(styled.Input, { type: type, value: value, onChange: onChange, disabled: disabled, autoComplete: autoComplete, ...otherProps }),
-        React__default.default.createElement(styled.IconContainer, null, renderIcon())));
+    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
+            Search_module.searchContainer,
+            iconPosition === 'left' ? Search_module.iconLeft : Search_module.iconRight,
+            className,
+        ]) },
+        React__default.default.createElement(index.TextField, { className: Search_module.searchInput, type: type, value: value, onChange: onChange, disabled: disabled, autoComplete: autoComplete, ...otherProps }),
+        React__default.default.createElement("div", { className: Search_module.iconContainer }, renderIcon())));
 });
 
 exports.Search = Search;

package/dist/components/Search/Search.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Search.cjs","sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import React from 'react';\n\nimport { theme } from '../../theme';\nimport { withLabels } from '../../hoc';\nimport { SearchProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\nimport { Button } from '../Button';\nimport { CrossIcon, SearchIcon } from '../../icons';\n\nimport { Container, Input, IconContainer, Loader } from './styled';\n\nexport const Search = withLabels(\n  ({\n    type = 'text',\n    disabled = false,\n    onClearClick,\n    onChange,\n    value = '',\n    className = '',\n    isLoading = false,\n    fill,\n    reversed = false,\n    autoComplete = 'on',\n    ...otherProps\n  }: SearchProps) => {\n    const shouldShowClear = value && value.length > 0;\n\n    const onClickSearch = () => {\n      onChange?.(value);\n    };\n\n    const renderIcon = () => {\n      if (isLoading) {\n        return <Loader height={24} color={fill || theme.colors.secondary.blue.base} />;\n      }\n      if (shouldShowClear && onClearClick) {\n        return (\n          <Button\n            variant=\"unstyled\"\n            onClick={onClearClick}\n            style={{ display: 'flex' }}\n            aria-label=\"Clear text\"\n            type=\"button\"\n          >\n            <CrossIcon color={fill || theme.colors.neutral.ink.dark} />\n          </Button>\n        );\n      }\n      return (\n        <Button\n          variant=\"unstyled\"\n          onClick={onClickSearch}\n          style={{ display: 'flex' }}\n          aria-label=\"Search\"\n          disabled={disabled}\n          type=\"button\"\n        >\n          <SearchIcon\n            color={fill || theme.colors.neutral.ink.dark}\n            height={sizes.md}\n            width={sizes.md}\n          />\n        </Button>\n      );\n    };\n\n    return (\n      <Container className={className} iconPosition={reversed ? 'left' : 'right'}>\n        <Input\n          type={type}\n          value={value}\n          onChange={onChange}\n          disabled={disabled}\n          autoComplete={autoComplete}\n          {...otherProps}\n        />\n        <IconContainer>{renderIcon()}</IconContainer>\n      </Container>\n    );\n  },\n);\n"],"names":["withLabels","React","Loader","theme","Button","CrossIcon","SearchIcon","sizes","Container","Input","IconContainer"],"mappings":";;;;;;;;;;;;;;;;MAYa,MAAM,GAAGA,qBAAU,CAC9B,CAAC,EACC,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,YAAY,EACZ,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,SAAS,GAAG,EAAE,EACd,SAAS,GAAG,KAAK,EACjB,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,IAAI,EACnB,GAAG,UAAU,EACD,KAAI;IAChB,MAAM,eAAe,GAAG,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;IAEjD,MAAM,aAAa,GAAG,MAAK;AACzB,QAAA,QAAQ,aAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAG,KAAK,CAAC;AACnB,IAAA,CAAC;IAED,MAAM,UAAU,GAAG,MAAK;AACtB,QAAA,IAAI,SAAS,EAAE;YACb,OAAOC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,IAAIC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAA,CAAI;AAC/E,QAAA;QACD,IAAI,eAAe,IAAI,YAAY,EAAE;YACnC,QACEF,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EACL,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,gBACf,YAAY,EACvB,IAAI,EAAC,QAAQ,EAAA;AAEb,gBAAAH,sBAAA,CAAA,aAAA,CAACI,wBAAS,EAAA,EAAC,KAAK,EAAE,IAAI,IAAIF,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CAAI,CACpD;AAEZ,QAAA;AACD,QAAA,QACEF,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EACL,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,aAAa,EACtB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAA,YAAA,EACf,QAAQ,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EAAA;AAEb,YAAAH,sBAAA,CAAA,aAAA,CAACK,yBAAU,EAAA,EACT,KAAK,EAAE,IAAI,IAAIH,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAC5C,MAAM,EAAEI,WAAK,CAAC,EAAE,EAChB,KAAK,EAAEA,WAAK,CAAC,EAAE,EAAA,CACf,CACK;AAEb,IAAA,CAAC;AAED,IAAA,QACEN,sBAAA,CAAA,aAAA,CAACO,gBAAS,IAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA;QACxEP,sBAAA,CAAA,aAAA,CAACQ,YAAK,IACJ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAAA,GACtB,UAAU,EAAA,CACd;AACF,QAAAR,sBAAA,CAAA,aAAA,CAACS,oBAAa,EAAA,IAAA,EAAE,UAAU,EAAE,CAAiB,CACnC;AAEhB,CAAC;;;;"}
+{"version":3,"file":"Search.cjs","sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { buildClassnames } from '../../utils';\nimport { SearchProps } from './types';\n\nimport { Button } from '../Button';\nimport { Loader } from '../Loader';\nimport { TextField } from '../TextField';\nimport { CrossIcon, SearchIcon } from '../../icons';\n\nimport styles from './Search.module.scss';\n\nexport const Search = withLabels(\n  ({\n    type = 'text',\n    disabled = false,\n    onClearClick,\n    onChange,\n    value = '',\n    className = '',\n    isLoading = false,\n    fill,\n    reversed = false,\n    autoComplete = 'on',\n    ...otherProps\n  }: SearchProps) => {\n    const shouldShowClear = value && value.length > 0;\n    const iconPosition = reversed ? 'left' : 'right';\n\n    const onClickSearch = () => {\n      onChange?.(value);\n    };\n\n    const renderIcon = () => {\n      if (isLoading) {\n        return <Loader height={24} color={fill || 'var(--colors-secondary-blue-base)'} />;\n      }\n      if (shouldShowClear && onClearClick) {\n        return (\n          <Button\n            variant=\"unstyled\"\n            onClick={onClearClick}\n            style={{ display: 'flex' }}\n            aria-label=\"Clear text\"\n            type=\"button\"\n          >\n            <CrossIcon color={fill || 'var(--colors-neutral-ink-dark)'} />\n          </Button>\n        );\n      }\n      return (\n        <Button\n          variant=\"unstyled\"\n          onClick={onClickSearch}\n          style={{ display: 'flex' }}\n          aria-label=\"Search\"\n          disabled={disabled}\n          type=\"button\"\n        >\n          <SearchIcon color={fill || 'var(--colors-neutral-ink-dark)'} />\n        </Button>\n      );\n    };\n\n    return (\n      <div\n        className={buildClassnames([\n          styles.searchContainer,\n          iconPosition === 'left' ? styles.iconLeft : styles.iconRight,\n          className,\n        ])}\n      >\n        <TextField\n          className={styles.searchInput}\n          type={type}\n          value={value}\n          onChange={onChange}\n          disabled={disabled}\n          autoComplete={autoComplete}\n          {...otherProps}\n        />\n        <div className={styles.iconContainer}>{renderIcon()}</div>\n      </div>\n    );\n  },\n);\n"],"names":["withLabels","React","Loader","Button","CrossIcon","SearchIcon","buildClassnames","styles","TextField"],"mappings":";;;;;;;;;;;;;;;;;MAaa,MAAM,GAAGA,qBAAU,CAC9B,CAAC,EACC,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,YAAY,EACZ,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,SAAS,GAAG,EAAE,EACd,SAAS,GAAG,KAAK,EACjB,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,IAAI,EACnB,GAAG,UAAU,EACD,KAAI;IAChB,MAAM,eAAe,GAAG,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;IACjD,MAAM,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO;IAEhD,MAAM,aAAa,GAAG,MAAK;AACzB,QAAA,QAAQ,aAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAG,KAAK,CAAC;AACnB,IAAA,CAAC;IAED,MAAM,UAAU,GAAG,MAAK;AACtB,QAAA,IAAI,SAAS,EAAE;AACb,YAAA,OAAOC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,IAAI,mCAAmC,GAAI;AAClF,QAAA;QACD,IAAI,eAAe,IAAI,YAAY,EAAE;YACnC,QACED,sBAAA,CAAA,aAAA,CAACE,aAAM,EAAA,EACL,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,gBACf,YAAY,EACvB,IAAI,EAAC,QAAQ,EAAA;gBAEbF,sBAAA,CAAA,aAAA,CAACG,wBAAS,EAAA,EAAC,KAAK,EAAE,IAAI,IAAI,gCAAgC,EAAA,CAAI,CACvD;AAEZ,QAAA;AACD,QAAA,QACEH,sBAAA,CAAA,aAAA,CAACE,aAAM,EAAA,EACL,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,aAAa,EACtB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAA,YAAA,EACf,QAAQ,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EAAA;YAEbF,sBAAA,CAAA,aAAA,CAACI,yBAAU,EAAA,EAAC,KAAK,EAAE,IAAI,IAAI,gCAAgC,EAAA,CAAI,CACxD;AAEb,IAAA,CAAC;AAED,IAAA,QACEJ,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEK,+BAAe,CAAC;AACzB,YAAAC,aAAM,CAAC,eAAe;AACtB,YAAA,YAAY,KAAK,MAAM,GAAGA,aAAM,CAAC,QAAQ,GAAGA,aAAM,CAAC,SAAS;YAC5D,SAAS;SACV,CAAC,EAAA;AAEF,QAAAN,sBAAA,CAAA,aAAA,CAACO,eAAS,EAAA,EACR,SAAS,EAAED,aAAM,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAAA,GACtB,UAAU,EAAA,CACd;QACFN,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEM,aAAM,CAAC,aAAa,EAAA,EAAG,UAAU,EAAE,CAAO,CACtD;AAEV,CAAC;;;;"}

package/dist/components/Search/Search.d.ts

@@ -293,7 +293,7 @@ export declare const Search: React.ForwardRefExoticComponent<{
     wrap?: string | undefined;
 } & {
     value?: string | undefined;
-    type?: import("..").TextFieldType | undefined;
+    type?: import("../TextField").TextFieldType | undefined;
     onChange?: ((value: string) => void) | undefined;
     hasError?: boolean | undefined;
     disabledMessage?: React.ReactNode;

package/dist/components/Search/Search.js

@@ -1,32 +1,38 @@
 import React__default from 'react';
-import { theme } from '../../theme/index.js';
 import { withLabels } from '../../hoc/withLabels/withLabels.js';
-import { sizes } from '../../theme/modules/sizes.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
 import { Button } from '../Button/Button.js';
+import { Loader } from '../Loader/Loader.js';
+import { TextField } from '../TextField/index.js';
 import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
 import { ReactComponent as SearchIcon } from '../../icons/design-system/components/SearchIcon.js';
-import { Container, Input, IconContainer } from './styled.js';
-import { Loader } from '../Loader/Loader.js';
+import styles from './Search.module.scss.js';
 
 const Search = withLabels(({ type = 'text', disabled = false, onClearClick, onChange, value = '', className = '', isLoading = false, fill, reversed = false, autoComplete = 'on', ...otherProps }) => {
     const shouldShowClear = value && value.length > 0;
+    const iconPosition = reversed ? 'left' : 'right';
     const onClickSearch = () => {
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
     };
     const renderIcon = () => {
         if (isLoading) {
-            return React__default.createElement(Loader, { height: 24, color: fill || theme.colors.secondary.blue.base });
+            return React__default.createElement(Loader, { height: 24, color: fill || 'var(--colors-secondary-blue-base)' });
         }
         if (shouldShowClear && onClearClick) {
             return (React__default.createElement(Button, { variant: "unstyled", onClick: onClearClick, style: { display: 'flex' }, "aria-label": "Clear text", type: "button" },
-                React__default.createElement(CrossIcon, { color: fill || theme.colors.neutral.ink.dark })));
+                React__default.createElement(CrossIcon, { color: fill || 'var(--colors-neutral-ink-dark)' })));
         }
         return (React__default.createElement(Button, { variant: "unstyled", onClick: onClickSearch, style: { display: 'flex' }, "aria-label": "Search", disabled: disabled, type: "button" },
-            React__default.createElement(SearchIcon, { color: fill || theme.colors.neutral.ink.dark, height: sizes.md, width: sizes.md })));
+            React__default.createElement(SearchIcon, { color: fill || 'var(--colors-neutral-ink-dark)' })));
     };
-    return (React__default.createElement(Container, { className: className, iconPosition: reversed ? 'left' : 'right' },
-        React__default.createElement(Input, { type: type, value: value, onChange: onChange, disabled: disabled, autoComplete: autoComplete, ...otherProps }),
-        React__default.createElement(IconContainer, null, renderIcon())));
+    return (React__default.createElement("div", { className: buildClassnames([
+            styles.searchContainer,
+            iconPosition === 'left' ? styles.iconLeft : styles.iconRight,
+            className,
+        ]) },
+        React__default.createElement(TextField, { className: styles.searchInput, type: type, value: value, onChange: onChange, disabled: disabled, autoComplete: autoComplete, ...otherProps }),
+        React__default.createElement("div", { className: styles.iconContainer }, renderIcon())));
 });
 
 export { Search };

package/dist/components/Search/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import React from 'react';\n\nimport { theme } from '../../theme';\nimport { withLabels } from '../../hoc';\nimport { SearchProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\nimport { Button } from '../Button';\nimport { CrossIcon, SearchIcon } from '../../icons';\n\nimport { Container, Input, IconContainer, Loader } from './styled';\n\nexport const Search = withLabels(\n  ({\n    type = 'text',\n    disabled = false,\n    onClearClick,\n    onChange,\n    value = '',\n    className = '',\n    isLoading = false,\n    fill,\n    reversed = false,\n    autoComplete = 'on',\n    ...otherProps\n  }: SearchProps) => {\n    const shouldShowClear = value && value.length > 0;\n\n    const onClickSearch = () => {\n      onChange?.(value);\n    };\n\n    const renderIcon = () => {\n      if (isLoading) {\n        return <Loader height={24} color={fill || theme.colors.secondary.blue.base} />;\n      }\n      if (shouldShowClear && onClearClick) {\n        return (\n          <Button\n            variant=\"unstyled\"\n            onClick={onClearClick}\n            style={{ display: 'flex' }}\n            aria-label=\"Clear text\"\n            type=\"button\"\n          >\n            <CrossIcon color={fill || theme.colors.neutral.ink.dark} />\n          </Button>\n        );\n      }\n      return (\n        <Button\n          variant=\"unstyled\"\n          onClick={onClickSearch}\n          style={{ display: 'flex' }}\n          aria-label=\"Search\"\n          disabled={disabled}\n          type=\"button\"\n        >\n          <SearchIcon\n            color={fill || theme.colors.neutral.ink.dark}\n            height={sizes.md}\n            width={sizes.md}\n          />\n        </Button>\n      );\n    };\n\n    return (\n      <Container className={className} iconPosition={reversed ? 'left' : 'right'}>\n        <Input\n          type={type}\n          value={value}\n          onChange={onChange}\n          disabled={disabled}\n          autoComplete={autoComplete}\n          {...otherProps}\n        />\n        <IconContainer>{renderIcon()}</IconContainer>\n      </Container>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;;;;;;MAYa,MAAM,GAAG,UAAU,CAC9B,CAAC,EACC,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,YAAY,EACZ,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,SAAS,GAAG,EAAE,EACd,SAAS,GAAG,KAAK,EACjB,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,IAAI,EACnB,GAAG,UAAU,EACD,KAAI;IAChB,MAAM,eAAe,GAAG,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;IAEjD,MAAM,aAAa,GAAG,MAAK;AACzB,QAAA,QAAQ,aAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAG,KAAK,CAAC;AACnB,IAAA,CAAC;IAED,MAAM,UAAU,GAAG,MAAK;AACtB,QAAA,IAAI,SAAS,EAAE;YACb,OAAOA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAA,CAAI;AAC/E,QAAA;QACD,IAAI,eAAe,IAAI,YAAY,EAAE;YACnC,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,gBACf,YAAY,EACvB,IAAI,EAAC,QAAQ,EAAA;AAEb,gBAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CAAI,CACpD;AAEZ,QAAA;AACD,QAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,aAAa,EACtB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAA,YAAA,EACf,QAAQ,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EAAA;AAEb,YAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,KAAK,EAAE,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAC5C,MAAM,EAAE,KAAK,CAAC,EAAE,EAChB,KAAK,EAAE,KAAK,CAAC,EAAE,EAAA,CACf,CACK;AAEb,IAAA,CAAC;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,IAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA;QACxEA,cAAA,CAAA,aAAA,CAAC,KAAK,IACJ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAAA,GACtB,UAAU,EAAA,CACd;AACF,QAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA,EAAE,UAAU,EAAE,CAAiB,CACnC;AAEhB,CAAC;;;;"}
+{"version":3,"file":"Search.js","sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { buildClassnames } from '../../utils';\nimport { SearchProps } from './types';\n\nimport { Button } from '../Button';\nimport { Loader } from '../Loader';\nimport { TextField } from '../TextField';\nimport { CrossIcon, SearchIcon } from '../../icons';\n\nimport styles from './Search.module.scss';\n\nexport const Search = withLabels(\n  ({\n    type = 'text',\n    disabled = false,\n    onClearClick,\n    onChange,\n    value = '',\n    className = '',\n    isLoading = false,\n    fill,\n    reversed = false,\n    autoComplete = 'on',\n    ...otherProps\n  }: SearchProps) => {\n    const shouldShowClear = value && value.length > 0;\n    const iconPosition = reversed ? 'left' : 'right';\n\n    const onClickSearch = () => {\n      onChange?.(value);\n    };\n\n    const renderIcon = () => {\n      if (isLoading) {\n        return <Loader height={24} color={fill || 'var(--colors-secondary-blue-base)'} />;\n      }\n      if (shouldShowClear && onClearClick) {\n        return (\n          <Button\n            variant=\"unstyled\"\n            onClick={onClearClick}\n            style={{ display: 'flex' }}\n            aria-label=\"Clear text\"\n            type=\"button\"\n          >\n            <CrossIcon color={fill || 'var(--colors-neutral-ink-dark)'} />\n          </Button>\n        );\n      }\n      return (\n        <Button\n          variant=\"unstyled\"\n          onClick={onClickSearch}\n          style={{ display: 'flex' }}\n          aria-label=\"Search\"\n          disabled={disabled}\n          type=\"button\"\n        >\n          <SearchIcon color={fill || 'var(--colors-neutral-ink-dark)'} />\n        </Button>\n      );\n    };\n\n    return (\n      <div\n        className={buildClassnames([\n          styles.searchContainer,\n          iconPosition === 'left' ? styles.iconLeft : styles.iconRight,\n          className,\n        ])}\n      >\n        <TextField\n          className={styles.searchInput}\n          type={type}\n          value={value}\n          onChange={onChange}\n          disabled={disabled}\n          autoComplete={autoComplete}\n          {...otherProps}\n        />\n        <div className={styles.iconContainer}>{renderIcon()}</div>\n      </div>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;;;;;;;MAaa,MAAM,GAAG,UAAU,CAC9B,CAAC,EACC,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,YAAY,EACZ,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,SAAS,GAAG,EAAE,EACd,SAAS,GAAG,KAAK,EACjB,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,IAAI,EACnB,GAAG,UAAU,EACD,KAAI;IAChB,MAAM,eAAe,GAAG,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;IACjD,MAAM,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO;IAEhD,MAAM,aAAa,GAAG,MAAK;AACzB,QAAA,QAAQ,aAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAG,KAAK,CAAC;AACnB,IAAA,CAAC;IAED,MAAM,UAAU,GAAG,MAAK;AACtB,QAAA,IAAI,SAAS,EAAE;AACb,YAAA,OAAOA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,IAAI,mCAAmC,GAAI;AAClF,QAAA;QACD,IAAI,eAAe,IAAI,YAAY,EAAE;YACnC,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,gBACf,YAAY,EACvB,IAAI,EAAC,QAAQ,EAAA;gBAEbA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,IAAI,IAAI,gCAAgC,EAAA,CAAI,CACvD;AAEZ,QAAA;AACD,QAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,aAAa,EACtB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAA,YAAA,EACf,QAAQ,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EAAA;YAEbA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,KAAK,EAAE,IAAI,IAAI,gCAAgC,EAAA,CAAI,CACxD;AAEb,IAAA,CAAC;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,eAAe;AACtB,YAAA,YAAY,KAAK,MAAM,GAAG,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,SAAS;YAC5D,SAAS;SACV,CAAC,EAAA;AAEF,QAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAAA,GACtB,UAAU,EAAA,CACd;QACFA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,aAAa,EAAA,EAAG,UAAU,EAAE,CAAO,CACtD;AAEV,CAAC;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._searchContainer_12ul5_1 {\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: var(--radius-base);\n}\n\n._searchInput_12ul5_9 {\n  flex-grow: 2;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n._iconContainer_12ul5_15 {\n  position: absolute;\n}\n\n._iconLeft_12ul5_19 ._searchInput_12ul5_9 {\n  padding-left: var(--sizes-10);\n}\n._iconLeft_12ul5_19 ._iconContainer_12ul5_15 {\n  left: var(--sizes-sm);\n}\n\n._iconRight_12ul5_26 ._searchInput_12ul5_9 {\n  padding-right: var(--sizes-10);\n}\n._iconRight_12ul5_26 ._iconContainer_12ul5_15 {\n  right: var(--sizes-sm);\n}");
+var styles = {"searchContainer":"_searchContainer_12ul5_1","searchInput":"_searchInput_12ul5_9","iconContainer":"_iconContainer_12ul5_15","iconLeft":"_iconLeft_12ul5_19","iconRight":"_iconRight_12ul5_26"};
+
+module.exports = styles;
+//# sourceMappingURL=Search.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Search.module.scss.cjs","sources":["../../../src/components/Search/Search.module.scss"],"sourcesContent":[".searchContainer {\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: var(--radius-base);\n}\n\n.searchInput {\n  flex-grow: 2;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n.iconContainer {\n  position: absolute;\n}\n\n.iconLeft {\n  .searchInput {\n    padding-left: var(--sizes-10);\n  }\n\n  .iconContainer {\n    left: var(--sizes-sm);\n  }\n}\n\n.iconRight {\n  .searchInput {\n    padding-right: var(--sizes-10);\n  }\n\n  .iconContainer {\n    right: var(--sizes-sm);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,2nBAAA;AACA,aAAA,CAAA,iBAAA,CAAA,0BAAA,CAAA,aAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,WAAA,CAAA,qBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._searchContainer_12ul5_1 {\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: var(--radius-base);\n}\n\n._searchInput_12ul5_9 {\n  flex-grow: 2;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n._iconContainer_12ul5_15 {\n  position: absolute;\n}\n\n._iconLeft_12ul5_19 ._searchInput_12ul5_9 {\n  padding-left: var(--sizes-10);\n}\n._iconLeft_12ul5_19 ._iconContainer_12ul5_15 {\n  left: var(--sizes-sm);\n}\n\n._iconRight_12ul5_26 ._searchInput_12ul5_9 {\n  padding-right: var(--sizes-10);\n}\n._iconRight_12ul5_26 ._iconContainer_12ul5_15 {\n  right: var(--sizes-sm);\n}");
+var styles = {"searchContainer":"_searchContainer_12ul5_1","searchInput":"_searchInput_12ul5_9","iconContainer":"_iconContainer_12ul5_15","iconLeft":"_iconLeft_12ul5_19","iconRight":"_iconRight_12ul5_26"};
+
+export { styles as default };
+//# sourceMappingURL=Search.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Search.module.scss.js","sources":["../../../src/components/Search/Search.module.scss"],"sourcesContent":[".searchContainer {\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: var(--radius-base);\n}\n\n.searchInput {\n  flex-grow: 2;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n.iconContainer {\n  position: absolute;\n}\n\n.iconLeft {\n  .searchInput {\n    padding-left: var(--sizes-10);\n  }\n\n  .iconContainer {\n    left: var(--sizes-sm);\n  }\n}\n\n.iconRight {\n  .searchInput {\n    padding-right: var(--sizes-10);\n  }\n\n  .iconContainer {\n    right: var(--sizes-sm);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,2nBAAA;AACA,aAAA,CAAA,iBAAA,CAAA,0BAAA,CAAA,aAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,WAAA,CAAA,qBAAA;;;;"}

package/dist/components/Stepper/Stepper.cjs

@@ -1,10 +1,12 @@
 'use strict';
 
 var React = require('react');
-var index = require('../../theme/index.cjs');
-var styled = require('./styled.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
 var MinusIcon = require('../../icons/design-system/components/MinusIcon.cjs');
 var PlusIcon = require('../../icons/custom/components/PlusIcon.cjs');
+var Stepper_module = require('./Stepper.module.scss.cjs');
+var index = require('../../theme/index.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -12,12 +14,17 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const Stepper = ({ onIncrement, onDecrement, disabled, hasError, size }) => {
     const compact = size === 'sm';
-    return (React__default.default.createElement(styled.ContainerStack, { hasError: hasError, disabled: disabled, direction: "horizontal", alignY: "center", spacing: "none" },
-        React__default.default.createElement(styled.StepButton, { type: "button", "aria-label": "Decrement", onClick: onDecrement, disabled: disabled, compact: compact },
-            React__default.default.createElement(MinusIcon.ReactComponent, { height: index.theme.sizes.base, width: index.theme.sizes.base, color: index.theme.colors.neutral.ink.base })),
-        React__default.default.createElement(styled.StepperDivider, { compact: compact }),
-        React__default.default.createElement(styled.StepButton, { type: "button", "aria-label": "Increment", onClick: onIncrement, disabled: disabled, compact: compact },
-            React__default.default.createElement(PlusIcon.PlusIcon, { height: index.theme.sizes.base, width: index.theme.sizes.base, color: index.theme.colors.neutral.ink.base }))));
+    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
+            Stepper_module.container,
+            compact ? Stepper_module.compact : undefined,
+            hasError ? Stepper_module.error : undefined,
+            disabled ? Stepper_module.disabled : undefined,
+        ]) },
+        React__default.default.createElement("button", { type: "button", "aria-label": "Decrement", onClick: onDecrement, disabled: disabled, className: Stepper_module.stepperButton },
+            React__default.default.createElement(MinusIcon.ReactComponent, { height: index.theme.sizes.base, width: index.theme.sizes.base })),
+        React__default.default.createElement("div", { className: Stepper_module.divider }),
+        React__default.default.createElement("button", { type: "button", "aria-label": "Increment", onClick: onIncrement, disabled: disabled, className: Stepper_module.stepperButton },
+            React__default.default.createElement(PlusIcon.PlusIcon, { height: index.theme.sizes.base, width: index.theme.sizes.base }))));
 };
 
 exports.Stepper = Stepper;

package/dist/components/Stepper/Stepper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.cjs","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from '../../theme';\nimport { ComponentSizeType } from '../types';\n\nimport { ContainerStack, StepButton, StepperDivider } from './styled';\nimport { MinusIcon, PlusIcon } from '../../icons';\n\nexport interface StepperProps {\n  onIncrement: () => void;\n  onDecrement: () => void;\n  disabled?: boolean;\n  hasError?: boolean;\n  size?: ComponentSizeType;\n}\n\nexport const Stepper = ({ onIncrement, onDecrement, disabled, hasError, size }: StepperProps) => {\n  const compact = size === 'sm';\n\n  return (\n    <ContainerStack\n      hasError={hasError}\n      disabled={disabled}\n      direction=\"horizontal\"\n      alignY=\"center\"\n      spacing=\"none\"\n    >\n      <StepButton\n        type=\"button\"\n        aria-label=\"Decrement\"\n        onClick={onDecrement}\n        disabled={disabled}\n        compact={compact}\n      >\n        <MinusIcon\n          height={theme.sizes.base}\n          width={theme.sizes.base}\n          color={theme.colors.neutral.ink.base}\n        />\n      </StepButton>\n      <StepperDivider compact={compact} />\n      <StepButton\n        type=\"button\"\n        aria-label=\"Increment\"\n        onClick={onIncrement}\n        disabled={disabled}\n        compact={compact}\n      >\n        <PlusIcon\n          height={theme.sizes.base}\n          width={theme.sizes.base}\n          color={theme.colors.neutral.ink.base}\n        />\n      </StepButton>\n    </ContainerStack>\n  );\n};\n"],"names":["React","ContainerStack","StepButton","MinusIcon","theme","StepperDivider","PlusIcon"],"mappings":";;;;;;;;;;;;AAeO,MAAM,OAAO,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAgB,KAAI;AAC9F,IAAA,MAAM,OAAO,GAAG,IAAI,KAAK,IAAI;IAE7B,QACEA,qCAACC,qBAAc,EAAA,EACb,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,QAAQ,EACf,OAAO,EAAC,MAAM,EAAA;AAEd,QAAAD,sBAAA,CAAA,aAAA,CAACE,iBAAU,EAAA,EACT,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAAA;AAEhB,YAAAF,sBAAA,CAAA,aAAA,CAACG,wBAAS,EAAA,EACR,MAAM,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GACpC,CACS;AACb,QAAAJ,sBAAA,CAAA,aAAA,CAACK,qBAAc,EAAA,EAAC,OAAO,EAAE,OAAO,EAAA,CAAI;AACpC,QAAAL,sBAAA,CAAA,aAAA,CAACE,iBAAU,EAAA,EACT,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAAA;AAEhB,YAAAF,sBAAA,CAAA,aAAA,CAACM,iBAAQ,EAAA,EACP,MAAM,EAAEF,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CACpC,CACS,CACE;AAErB;;;;"}
+{"version":3,"file":"Stepper.cjs","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport { MinusIcon, PlusIcon } from '../../icons';\nimport styles from './Stepper.module.scss';\nimport { StepperProps } from './types';\n\nimport { theme } from '../../theme';\n\nexport const Stepper = ({ onIncrement, onDecrement, disabled, hasError, size }: StepperProps) => {\n  const compact = size === 'sm';\n\n  return (\n    <div\n      className={buildClassnames([\n        styles.container,\n        compact ? styles.compact : undefined,\n        hasError ? styles.error : undefined,\n        disabled ? styles.disabled : undefined,\n      ])}\n    >\n      <button\n        type=\"button\"\n        aria-label=\"Decrement\"\n        onClick={onDecrement}\n        disabled={disabled}\n        className={styles.stepperButton}\n      >\n        <MinusIcon height={theme.sizes.base} width={theme.sizes.base} />\n      </button>\n      <div className={styles.divider} />\n      <button\n        type=\"button\"\n        aria-label=\"Increment\"\n        onClick={onIncrement}\n        disabled={disabled}\n        className={styles.stepperButton}\n      >\n        <PlusIcon height={theme.sizes.base} width={theme.sizes.base} />\n      </button>\n    </div>\n  );\n};\n"],"names":["React","buildClassnames","styles","MinusIcon","theme","PlusIcon"],"mappings":";;;;;;;;;;;;;;AAQO,MAAM,OAAO,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAgB,KAAI;AAC9F,IAAA,MAAM,OAAO,GAAG,IAAI,KAAK,IAAI;AAE7B,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,cAAM,CAAC,SAAS;YAChB,OAAO,GAAGA,cAAM,CAAC,OAAO,GAAG,SAAS;YACpC,QAAQ,GAAGA,cAAM,CAAC,KAAK,GAAG,SAAS;YACnC,QAAQ,GAAGA,cAAM,CAAC,QAAQ,GAAG,SAAS;SACvC,CAAC,EAAA;AAEF,QAAAF,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,gBACF,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAEE,cAAM,CAAC,aAAa,EAAA;AAE/B,YAAAF,sBAAA,CAAA,aAAA,CAACG,wBAAS,EAAA,EAAC,MAAM,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,GAAI,CACzD;AACT,QAAAJ,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,cAAM,CAAC,OAAO,EAAA,CAAI;AAClC,QAAAF,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,gBACF,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAEE,cAAM,CAAC,aAAa,EAAA;YAE/BF,sBAAA,CAAA,aAAA,CAACK,iBAAQ,IAAC,MAAM,EAAED,WAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EAAA,CAAI,CACxD,CACL;AAEV;;;;"}

package/dist/components/Stepper/Stepper.d.ts

@@ -1,10 +1,3 @@
 import React from 'react';
-import { ComponentSizeType } from '../types';
-export interface StepperProps {
-    onIncrement: () => void;
-    onDecrement: () => void;
-    disabled?: boolean;
-    hasError?: boolean;
-    size?: ComponentSizeType;
-}
+import { StepperProps } from './types';
 export declare const Stepper: ({ onIncrement, onDecrement, disabled, hasError, size }: StepperProps) => React.JSX.Element;