@veeqo/ui 10.2.0 → 11.0.0-beta-1

package/dist/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import React from 'react';\nimport { PaginationProps } from './types';\n\nimport { Stack } from '../Stack';\nimport { PageInput, PaginationButton } from './styled';\nimport { PageCount } from './components';\nimport { usePagination } from './hooks/usePagination';\n\nimport { RightArrowIcon } from '../../icons/RightArrowIcon';\nimport { StartArrowIcon } from '../../icons/StartArrowIcon';\nimport { LeftArrowIcon } from '../../icons/LeftArrowIcon';\nimport { EndArrowIcon } from '../../icons/EndArrowIcon';\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    <Stack\n      direction=\"horizontal\"\n      alignY=\"center\"\n      spacing=\"xs\"\n      data-testid={testId}\n      className={e2eClassName}\n    >\n      <PaginationButton\n        onClick={handleSkipBack}\n        iconSlot={<StartArrowIcon />}\n        size=\"sm\"\n        aria-label=\"go to first page\"\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      />\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      />\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      />\n    </Stack>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;AAaa,MAAA,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,GAAG,aAAa,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,KAAC;AAED;;AAEG;IACH,MAAM,eAAe,GAAG,MAAK;QAC3B,IAAI,WAAW,KAAK,eAAe;YAAE,gBAAgB,CAAC,eAAe,CAAC;AACxE,KAAC;IAED,QACEA,6BAAC,KAAK,EAAA,EACJ,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,QAAQ,EACf,OAAO,EAAC,IAAI,EAAA,aAAA,EACC,MAAM,EACnB,SAAS,EAAE,YAAY,EAAA;AAEvB,QAAAA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EACf,EAAA,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,cAAc,OAAG,EAC5B,IAAI,EAAC,IAAI,EAAA,YAAA,EACE,kBAAkB,EAC7B,CAAA;QACFA,cAAC,CAAA,aAAA,CAAA,gBAAgB,IACf,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,aAAa,OAAG,EAC3B,IAAI,EAAC,IAAI,EAAA,YAAA,EACE,qBAAqB,EACjB,eAAA,EAAA,WAAW,IAAI,CAAC,EAC/B,CAAA;QAEFA,cAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,QAAQ,EAAE,gBAAgB,EAAA;AAC9B,YAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EACE,EAAA,WAAA,EAAA,QAAQ,gBACN,CAAQ,KAAA,EAAA,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,QAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,eAAe,EAAI,CAAA;QAErCA,cAAC,CAAA,aAAA,CAAA,gBAAgB,IACf,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,cAAc,OAAG,EAC5B,IAAI,EAAC,IAAI,EAAA,YAAA,EACE,iBAAiB,EACb,eAAA,EAAA,WAAW,IAAI,eAAe,EAC7C,CAAA;QAEFA,cAAC,CAAA,aAAA,CAAA,gBAAgB,EACf,EAAA,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,YAAY,EAAG,IAAA,CAAA,EAC1B,IAAI,EAAC,IAAI,EACE,YAAA,EAAA,iBAAiB,EACb,eAAA,EAAA,WAAW,IAAI,eAAe,EAAA,CAC7C,CACI;AAEZ;;;;"}
+{"version":3,"file":"Pagination.js","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":["React"],"mappings":";;;;;;;;;;AAUa,MAAA,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,GAAG,aAAa,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,KAAC;AAED;;AAEG;IACH,MAAM,eAAe,GAAG,MAAK;QAC3B,IAAI,WAAW,KAAK,eAAe;YAAE,gBAAgB,CAAC,eAAe,CAAC;AACxE,KAAC;AAED,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EAAC,EAAA,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAc,aAAA,EAAA,MAAM,EAAE,SAAS,EAAE,YAAY,EAAA;QAChFA,cAAC,CAAA,aAAA,CAAA,gBAAgB,EACf,EAAA,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA,CAAG,EAC5B,IAAI,EAAC,IAAI,EACE,YAAA,EAAA,kBAAkB,EACd,eAAA,EAAA,WAAW,IAAI,CAAC,EAC/B,QAAQ,EAAE,WAAW,IAAI,CAAC,EAC1B,CAAA;QACFA,cAAC,CAAA,aAAA,CAAA,gBAAgB,EACf,EAAA,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA,CAAG,EAC3B,IAAI,EAAC,IAAI,EACE,YAAA,EAAA,qBAAqB,EACjB,eAAA,EAAA,WAAW,IAAI,CAAC,EAC/B,QAAQ,EAAE,WAAW,IAAI,CAAC,EAC1B,CAAA;QAEFA,cAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,QAAQ,EAAE,gBAAgB,EAAA;AAC9B,YAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EACE,EAAA,WAAA,EAAA,QAAQ,gBACN,CAAQ,KAAA,EAAA,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,QAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,eAAe,EAAI,CAAA;QAErCA,cAAC,CAAA,aAAA,CAAA,gBAAgB,EACf,EAAA,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA,CAAG,EAC5B,IAAI,EAAC,IAAI,EACE,YAAA,EAAA,iBAAiB,EACb,eAAA,EAAA,WAAW,IAAI,eAAe,EAC7C,QAAQ,EAAE,WAAW,IAAI,eAAe,EACxC,CAAA;AAEF,QAAAA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EACf,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,YAAY,EAAG,IAAA,CAAA,EAC1B,IAAI,EAAC,IAAI,EACE,YAAA,EAAA,iBAAiB,EACb,eAAA,EAAA,WAAW,IAAI,eAAe,EAC7C,QAAQ,EAAE,WAAW,IAAI,eAAe,EACxC,CAAA,CACM;AAEd;;;;"}

package/dist/components/Pagination/components.cjs

@@ -10,9 +10,9 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const PageCount = ({ count }) => (React__default.default.createElement(React__default.default.Fragment, null,
     React__default.default.createElement("div", null,
-        React__default.default.createElement(Text.Text, { variant: "bodySmall", "aria-hidden": true }, "/")),
-    React__default.default.createElement(styled.PageLimitContainer, { alignX: "center", alignY: "center", "aria-hidden": true },
-        React__default.default.createElement(Text.Text, { variant: "bodySmall" }, count))));
+        React__default.default.createElement(Text.Text, { variant: "bodySmallBold", "aria-hidden": true }, "/")),
+    React__default.default.createElement(styled.PageLimitContainer, { alignItems: "center", justifyContent: "center", "aria-hidden": true },
+        React__default.default.createElement(Text.Text, { variant: "body" }, count))));
 
 exports.PageCount = PageCount;
 //# sourceMappingURL=components.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"components.cjs","sources":["../../../src/components/Pagination/components.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '../Text';\nimport { PageLimitContainer } from './styled';\n\nexport const PageCount = ({ count }: { count: number }) => (\n  <>\n    <div>\n      <Text variant=\"bodySmall\" aria-hidden>\n        /\n      </Text>\n    </div>\n    <PageLimitContainer alignX=\"center\" alignY=\"center\" aria-hidden>\n      <Text variant=\"bodySmall\">{count}</Text>\n    </PageLimitContainer>\n  </>\n);\n"],"names":["React","Text","PageLimitContainer"],"mappings":";;;;;;;;;;AAIa,MAAA,SAAS,GAAG,CAAC,EAAE,KAAK,EAAqB,MACpDA,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;AACE,IAAAA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACE,QAAAA,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAC,EAAA,OAAO,EAAC,WAAW,6BAElB,CACH;IACND,sBAAC,CAAA,aAAA,CAAAE,yBAAkB,IAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,QAAQ,EAAA,aAAA,EAAA,IAAA,EAAA;QACjDF,sBAAC,CAAA,aAAA,CAAAC,SAAI,EAAC,EAAA,OAAO,EAAC,WAAW,EAAE,EAAA,KAAK,CAAQ,CACrB,CACpB;;;;"}
+{"version":3,"file":"components.cjs","sources":["../../../src/components/Pagination/components.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '../Text';\nimport { PageLimitContainer } from './styled';\n\nexport const PageCount = ({ count }: { count: number }) => (\n  <>\n    <div>\n      <Text variant=\"bodySmallBold\" aria-hidden>\n        /\n      </Text>\n    </div>\n    <PageLimitContainer alignItems=\"center\" justifyContent=\"center\" aria-hidden>\n      <Text variant=\"body\">{count}</Text>\n    </PageLimitContainer>\n  </>\n);\n"],"names":["React","Text","PageLimitContainer"],"mappings":";;;;;;;;;;AAIa,MAAA,SAAS,GAAG,CAAC,EAAE,KAAK,EAAqB,MACpDA,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;AACE,IAAAA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACE,QAAAA,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAC,EAAA,OAAO,EAAC,eAAe,6BAEtB,CACH;IACND,sBAAC,CAAA,aAAA,CAAAE,yBAAkB,IAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAA,aAAA,EAAA,IAAA,EAAA;QAC7DF,sBAAC,CAAA,aAAA,CAAAC,SAAI,EAAC,EAAA,OAAO,EAAC,MAAM,EAAE,EAAA,KAAK,CAAQ,CAChB,CACpB;;;;"}

package/dist/components/Pagination/components.js

@@ -4,9 +4,9 @@ import { PageLimitContainer } from './styled.js';
 
 const PageCount = ({ count }) => (React__default.createElement(React__default.Fragment, null,
     React__default.createElement("div", null,
-        React__default.createElement(Text, { variant: "bodySmall", "aria-hidden": true }, "/")),
-    React__default.createElement(PageLimitContainer, { alignX: "center", alignY: "center", "aria-hidden": true },
-        React__default.createElement(Text, { variant: "bodySmall" }, count))));
+        React__default.createElement(Text, { variant: "bodySmallBold", "aria-hidden": true }, "/")),
+    React__default.createElement(PageLimitContainer, { alignItems: "center", justifyContent: "center", "aria-hidden": true },
+        React__default.createElement(Text, { variant: "body" }, count))));
 
 export { PageCount };
 //# sourceMappingURL=components.js.map

package/dist/components/Pagination/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sources":["../../../src/components/Pagination/components.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '../Text';\nimport { PageLimitContainer } from './styled';\n\nexport const PageCount = ({ count }: { count: number }) => (\n  <>\n    <div>\n      <Text variant=\"bodySmall\" aria-hidden>\n        /\n      </Text>\n    </div>\n    <PageLimitContainer alignX=\"center\" alignY=\"center\" aria-hidden>\n      <Text variant=\"bodySmall\">{count}</Text>\n    </PageLimitContainer>\n  </>\n);\n"],"names":["React"],"mappings":";;;;AAIa,MAAA,SAAS,GAAG,CAAC,EAAE,KAAK,EAAqB,MACpDA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;AACE,IAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACE,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,WAAW,6BAElB,CACH;IACNA,cAAC,CAAA,aAAA,CAAA,kBAAkB,IAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,QAAQ,EAAA,aAAA,EAAA,IAAA,EAAA;QACjDA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,WAAW,EAAE,EAAA,KAAK,CAAQ,CACrB,CACpB;;;;"}
+{"version":3,"file":"components.js","sources":["../../../src/components/Pagination/components.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '../Text';\nimport { PageLimitContainer } from './styled';\n\nexport const PageCount = ({ count }: { count: number }) => (\n  <>\n    <div>\n      <Text variant=\"bodySmallBold\" aria-hidden>\n        /\n      </Text>\n    </div>\n    <PageLimitContainer alignItems=\"center\" justifyContent=\"center\" aria-hidden>\n      <Text variant=\"body\">{count}</Text>\n    </PageLimitContainer>\n  </>\n);\n"],"names":["React"],"mappings":";;;;AAIa,MAAA,SAAS,GAAG,CAAC,EAAE,KAAK,EAAqB,MACpDA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;AACE,IAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACE,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,eAAe,6BAEtB,CACH;IACNA,cAAC,CAAA,aAAA,CAAA,kBAAkB,IAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAA,aAAA,EAAA,IAAA,EAAA;QAC7DA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,MAAM,EAAE,EAAA,KAAK,CAAQ,CAChB,CACpB;;;;"}

package/dist/components/Pagination/styled.cjs

@@ -2,8 +2,7 @@
 
 var styled = require('styled-components');
 var index = require('../../theme/index.cjs');
-var Stack = require('../Stack/Stack.cjs');
-require('../Stack/types.cjs');
+var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
 var Button = require('../Button/Button.cjs');
 var index$1 = require('../TextField/index.cjs');
 
@@ -11,9 +10,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const PageLimitContainer = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--PageLimitContainer", componentId: "vui--11yg0z2" }) `width:${index.theme.sizes.lg};height:30px;background-color:${index.theme.colors.neutral.grey.light};border:1px solid ${index.theme.colors.neutral.grey.base};border-radius:${index.theme.sizes.xs};`;
-const PaginationButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--PaginationButton", componentId: "vui--1xoa6c5" }) `color:${index.theme.colors.neutral.ink.base};width:32px;height:32px;svg{width:24px;height:24px;}`;
-const PageInput = styled__default.default(index$1.TextField).withConfig({ displayName: "vui--PageInput", componentId: "vui--vpfeol" }) `&[type='number']{width:5.5ch;}`;
+const PageLimitContainer = styled__default.default(FlexRow.FlexRow).withConfig({ displayName: "vui--PageLimitContainer", componentId: "vui--11yg0z2" }) `box-sizing:border-box;min-width:${index.theme.sizes[10]};height:${index.theme.sizes.lg};padding:0 ${index.theme.sizes[3]};background-color:${index.theme.colors.neutral.grey.light};border:1px solid ${index.theme.colors.neutral.grey.dark};border-radius:${index.theme.sizes.xs};`;
+const PaginationButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--PaginationButton", componentId: "vui--1xoa6c5" }) `color:${index.theme.colors.neutral.ink.base};width:${index.theme.sizes.lg};height:${index.theme.sizes.lg};svg{width:${index.theme.sizes.md};height:${index.theme.sizes.md};}`;
+const PageInput = styled__default.default(index$1.TextField).withConfig({ displayName: "vui--PageInput", componentId: "vui--vpfeol" }) `&[type='number']{min-width:auto;}`;
 
 exports.PageInput = PageInput;
 exports.PageLimitContainer = PageLimitContainer;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Pagination/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { Stack } from '../Stack';\nimport { Button } from '../Button';\nimport { TextField } from '../TextField';\n\nexport const PageLimitContainer = styled(Stack)`\n  width: ${theme.sizes.lg};\n  height: 30px;\n  background-color: ${theme.colors.neutral.grey.light};\n\n  border: 1px solid ${theme.colors.neutral.grey.base};\n  border-radius: ${theme.sizes.xs};\n`;\n\nexport const PaginationButton = styled(Button)`\n  color: ${theme.colors.neutral.ink.base};\n  width: 32px;\n  height: 32px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const PageInput = styled(TextField)`\n  &[type='number'] {\n    width: 5.5ch;\n  }\n`;\n"],"names":["styled","Stack","theme","Button","TextField"],"mappings":";;;;;;;;;;;;;AAMa,MAAA,kBAAkB,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACpCC,WAAK,CAAC,KAAK,CAAC,EAAE,iCAEHA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAE/BA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,kBACjCA,WAAK,CAAC,KAAK,CAAC,EAAE;AAGpB,MAAA,gBAAgB,GAAGF,uBAAM,CAACG,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACnCD,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;MAU3B,SAAS,GAAGF,uBAAM,CAACI,iBAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8BAAA;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Pagination/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Button } from '../Button';\nimport { TextField } from '../TextField';\n\nexport const PageLimitContainer = styled(FlexRow)`\n  box-sizing: border-box;\n  min-width: ${theme.sizes[10]};\n  height: ${theme.sizes.lg};\n  padding: 0 ${theme.sizes[3]};\n  background-color: ${theme.colors.neutral.grey.light};\n  border: 1px solid ${theme.colors.neutral.grey.dark};\n  border-radius: ${theme.sizes.xs};\n`;\n\nexport const PaginationButton = styled(Button)`\n  color: ${theme.colors.neutral.ink.base};\n  // TODO: Remove these style overrides when the Button component is updated match the design system\n  width: ${theme.sizes.lg};\n  height: ${theme.sizes.lg};\n\n  svg {\n    width: ${theme.sizes.md};\n    height: ${theme.sizes.md};\n  }\n`;\n\nexport const PageInput = styled(TextField)`\n  &[type='number'] {\n    min-width: auto;\n  }\n`;\n"],"names":["styled","FlexRow","theme","Button","TextField"],"mappings":";;;;;;;;;;;;AAMa,MAAA,kBAAkB,GAAGA,uBAAM,CAACC,eAAO,CAAC,CAElC,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,gCAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAClB,QAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,EAAE,CACX,WAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,kBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAC/B,kBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,eAAA,EACjCA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA;AAGpB,MAAA,gBAAgB,GAAGF,uBAAM,CAACG,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACnCD,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,UAE7BA,WAAK,CAAC,KAAK,CAAC,EAAE,WACbA,WAAK,CAAC,KAAK,CAAC,EAAE,cAGbA,WAAK,CAAC,KAAK,CAAC,EAAE,WACbA,WAAK,CAAC,KAAK,CAAC,EAAE;MAIf,SAAS,GAAGF,uBAAM,CAACI,iBAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA;;;;;;"}

package/dist/components/Pagination/styled.d.ts

@@ -1,5 +1,10 @@
 /// <reference types="react" />
-export declare const PageLimitContainer: import("styled-components").StyledComponent<"div", any, import("../Stack").StackProps, never>;
+export declare const PageLimitContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    alignItems?: import("csstype").Property.AlignItems | undefined;
+    justifyContent?: import("csstype").Property.JustifyContent | undefined;
+    gap?: keyof import("../../theme/modules/sizes").SizeScale | undefined;
+    flexWrap?: import("csstype").Property.FlexWrap | undefined;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 export declare const PaginationButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
     children?: import("react").ReactNode;
     variant?: import("../Button/types").ButtonVariant | undefined;

package/dist/components/Pagination/styled.js

@@ -1,13 +1,12 @@
 import styled from 'styled-components';
 import { theme } from '../../theme/index.js';
-import { Stack } from '../Stack/Stack.js';
-import '../Stack/types.js';
+import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
 import { Button } from '../Button/Button.js';
 import { TextField } from '../TextField/index.js';
 
-const PageLimitContainer = styled(Stack).withConfig({ displayName: "vui--PageLimitContainer", componentId: "vui--11yg0z2" }) `width:${theme.sizes.lg};height:30px;background-color:${theme.colors.neutral.grey.light};border:1px solid ${theme.colors.neutral.grey.base};border-radius:${theme.sizes.xs};`;
-const PaginationButton = styled(Button).withConfig({ displayName: "vui--PaginationButton", componentId: "vui--1xoa6c5" }) `color:${theme.colors.neutral.ink.base};width:32px;height:32px;svg{width:24px;height:24px;}`;
-const PageInput = styled(TextField).withConfig({ displayName: "vui--PageInput", componentId: "vui--vpfeol" }) `&[type='number']{width:5.5ch;}`;
+const PageLimitContainer = styled(FlexRow).withConfig({ displayName: "vui--PageLimitContainer", componentId: "vui--11yg0z2" }) `box-sizing:border-box;min-width:${theme.sizes[10]};height:${theme.sizes.lg};padding:0 ${theme.sizes[3]};background-color:${theme.colors.neutral.grey.light};border:1px solid ${theme.colors.neutral.grey.dark};border-radius:${theme.sizes.xs};`;
+const PaginationButton = styled(Button).withConfig({ displayName: "vui--PaginationButton", componentId: "vui--1xoa6c5" }) `color:${theme.colors.neutral.ink.base};width:${theme.sizes.lg};height:${theme.sizes.lg};svg{width:${theme.sizes.md};height:${theme.sizes.md};}`;
+const PageInput = styled(TextField).withConfig({ displayName: "vui--PageInput", componentId: "vui--vpfeol" }) `&[type='number']{min-width:auto;}`;
 
 export { PageInput, PageLimitContainer, PaginationButton };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Pagination/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { Stack } from '../Stack';\nimport { Button } from '../Button';\nimport { TextField } from '../TextField';\n\nexport const PageLimitContainer = styled(Stack)`\n  width: ${theme.sizes.lg};\n  height: 30px;\n  background-color: ${theme.colors.neutral.grey.light};\n\n  border: 1px solid ${theme.colors.neutral.grey.base};\n  border-radius: ${theme.sizes.xs};\n`;\n\nexport const PaginationButton = styled(Button)`\n  color: ${theme.colors.neutral.ink.base};\n  width: 32px;\n  height: 32px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const PageInput = styled(TextField)`\n  &[type='number'] {\n    width: 5.5ch;\n  }\n`;\n"],"names":[],"mappings":";;;;;;;AAMa,MAAA,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACpC,KAAK,CAAC,KAAK,CAAC,EAAE,iCAEH,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAE/B,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,kBACjC,KAAK,CAAC,KAAK,CAAC,EAAE;AAGpB,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACnC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;MAU3B,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8BAAA;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Pagination/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Button } from '../Button';\nimport { TextField } from '../TextField';\n\nexport const PageLimitContainer = styled(FlexRow)`\n  box-sizing: border-box;\n  min-width: ${theme.sizes[10]};\n  height: ${theme.sizes.lg};\n  padding: 0 ${theme.sizes[3]};\n  background-color: ${theme.colors.neutral.grey.light};\n  border: 1px solid ${theme.colors.neutral.grey.dark};\n  border-radius: ${theme.sizes.xs};\n`;\n\nexport const PaginationButton = styled(Button)`\n  color: ${theme.colors.neutral.ink.base};\n  // TODO: Remove these style overrides when the Button component is updated match the design system\n  width: ${theme.sizes.lg};\n  height: ${theme.sizes.lg};\n\n  svg {\n    width: ${theme.sizes.md};\n    height: ${theme.sizes.md};\n  }\n`;\n\nexport const PageInput = styled(TextField)`\n  &[type='number'] {\n    min-width: auto;\n  }\n`;\n"],"names":[],"mappings":";;;;;;AAMa,MAAA,kBAAkB,GAAG,MAAM,CAAC,OAAO,CAAC,CAElC,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,gCAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAClB,QAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CACX,WAAA,EAAA,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,kBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAC/B,kBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,eAAA,EACjC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA;AAGpB,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACnC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,UAE7B,KAAK,CAAC,KAAK,CAAC,EAAE,WACb,KAAK,CAAC,KAAK,CAAC,EAAE,cAGb,KAAK,CAAC,KAAK,CAAC,EAAE,WACb,KAAK,CAAC,KAAK,CAAC,EAAE;MAIf,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA;;;;"}

package/dist/components/Search/Search.cjs

@@ -5,8 +5,8 @@ var index = require('../../theme/index.cjs');
 var withLabels = require('../../hoc/withLabels/withLabels.cjs');
 var sizes = require('../../theme/modules/sizes.cjs');
 var Button = require('../Button/Button.cjs');
-var CrossIcon = require('../../icons/CrossIcon.cjs');
-var SearchIcon = require('../../icons/SearchIcon.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');
 
@@ -25,10 +25,10 @@ const Search = withLabels.withLabels(({ type = 'text', disabled = false, onClear
         }
         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.CrossIcon, { color: fill || index.theme.colors.neutral.ink.dark })));
+                React__default.default.createElement(CrossIcon.ReactComponent, { color: fill || index.theme.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.SearchIcon, { color: fill || index.theme.colors.neutral.ink.dark, height: sizes.sizes.md, width: sizes.sizes.md })));
+            React__default.default.createElement(SearchIcon.ReactComponent, { color: fill || index.theme.colors.neutral.ink.dark, height: sizes.sizes.md, width: sizes.sizes.md })));
     };
     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 }),

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,SAAA,GAAA,SAAA,GAAR,QAAQ,CAAG,KAAK,CAAC;AACnB,KAAC;IAED,MAAM,UAAU,GAAG,MAAK;AACtB,QAAA,IAAI,SAAS,EAAE;YACb,OAAOC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAC,EAAA,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,IAAIC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAA,CAAI;AAC/E;QACD,IAAI,eAAe,IAAI,YAAY,EAAE;YACnC,QACEF,sBAAC,CAAA,aAAA,CAAAG,aAAM,EACL,EAAA,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,mBAAS,EAAC,EAAA,KAAK,EAAE,IAAI,IAAIF,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA,CACpD;AAEZ;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,qBAAU,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,EACf,CAAA,CACK;AAEb,KAAC;AAED,IAAA,QACEN,sBAAC,CAAA,aAAA,CAAAO,gBAAS,IAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA;QACxEP,sBAAC,CAAA,aAAA,CAAAQ,YAAK,IACJ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EACtB,GAAA,UAAU,EACd,CAAA;AACF,QAAAR,sBAAA,CAAA,aAAA,CAACS,oBAAa,EAAE,IAAA,EAAA,UAAU,EAAE,CAAiB,CACnC;AAEhB,CAAC;;;;"}
+{"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,SAAA,GAAA,SAAA,GAAR,QAAQ,CAAG,KAAK,CAAC;AACnB,KAAC;IAED,MAAM,UAAU,GAAG,MAAK;AACtB,QAAA,IAAI,SAAS,EAAE;YACb,OAAOC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAC,EAAA,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,IAAIC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAA,CAAI;AAC/E;QACD,IAAI,eAAe,IAAI,YAAY,EAAE;YACnC,QACEF,sBAAC,CAAA,aAAA,CAAAG,aAAM,EACL,EAAA,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,EAAC,EAAA,KAAK,EAAE,IAAI,IAAIF,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA,CACpD;AAEZ;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,EACf,CAAA,CACK;AAEb,KAAC;AAED,IAAA,QACEN,sBAAC,CAAA,aAAA,CAAAO,gBAAS,IAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA;QACxEP,sBAAC,CAAA,aAAA,CAAAQ,YAAK,IACJ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EACtB,GAAA,UAAU,EACd,CAAA;AACF,QAAAR,sBAAA,CAAA,aAAA,CAACS,oBAAa,EAAE,IAAA,EAAA,UAAU,EAAE,CAAiB,CACnC;AAEhB,CAAC;;;;"}

package/dist/components/Search/Search.js

@@ -3,8 +3,8 @@ import { theme } from '../../theme/index.js';
 import { withLabels } from '../../hoc/withLabels/withLabels.js';
 import { sizes } from '../../theme/modules/sizes.js';
 import { Button } from '../Button/Button.js';
-import { CrossIcon } from '../../icons/CrossIcon.js';
-import { SearchIcon } from '../../icons/SearchIcon.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';
 

package/dist/components/SelectDropdown/ListItem/components/CheckboxIndicator.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var ActiveCheckboxIcon = require('../../../../icons/ActiveCheckboxIcon.cjs');
-var InactiveCheckboxIcon = require('../../../../icons/InactiveCheckboxIcon.cjs');
+var ActiveCheckboxIcon = require('../../../../icons/custom/components/ActiveCheckboxIcon.cjs');
+var InactiveCheckboxIcon = require('../../../../icons/custom/components/InactiveCheckboxIcon.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/dist/components/SelectDropdown/ListItem/components/CheckboxIndicator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxIndicator.cjs","sources":["../../../../../src/components/SelectDropdown/ListItem/components/CheckboxIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { ActiveCheckboxIcon } from '../../../../icons/ActiveCheckboxIcon';\nimport { InactiveCheckboxIcon } from '../../../../icons/InactiveCheckboxIcon';\n\nexport const CheckboxIndicator = ({ checked, ...otherProps }: any) => {\n  if (checked) return <ActiveCheckboxIcon {...otherProps} />;\n\n  return <InactiveCheckboxIcon {...otherProps} />;\n};\n"],"names":["React","ActiveCheckboxIcon","InactiveCheckboxIcon"],"mappings":";;;;;;;;;;AAIO,MAAM,iBAAiB,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,UAAU,EAAO,KAAI;AACnE,IAAA,IAAI,OAAO;AAAE,QAAA,OAAOA,sBAAC,CAAA,aAAA,CAAAC,qCAAkB,EAAK,EAAA,GAAA,UAAU,GAAI;AAE1D,IAAA,OAAOD,sBAAC,CAAA,aAAA,CAAAE,yCAAoB,EAAK,EAAA,GAAA,UAAU,GAAI;AACjD;;;;"}
+{"version":3,"file":"CheckboxIndicator.cjs","sources":["../../../../../src/components/SelectDropdown/ListItem/components/CheckboxIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { ActiveCheckboxIcon, InactiveCheckboxIcon } from '../../../../icons';\n\nexport const CheckboxIndicator = ({ checked, ...otherProps }: any) => {\n  if (checked) return <ActiveCheckboxIcon {...otherProps} />;\n\n  return <InactiveCheckboxIcon {...otherProps} />;\n};\n"],"names":["React","ActiveCheckboxIcon","InactiveCheckboxIcon"],"mappings":";;;;;;;;;;AAGO,MAAM,iBAAiB,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,UAAU,EAAO,KAAI;AACnE,IAAA,IAAI,OAAO;AAAE,QAAA,OAAOA,sBAAC,CAAA,aAAA,CAAAC,qCAAkB,EAAK,EAAA,GAAA,UAAU,GAAI;AAE1D,IAAA,OAAOD,sBAAC,CAAA,aAAA,CAAAE,yCAAoB,EAAK,EAAA,GAAA,UAAU,GAAI;AACjD;;;;"}

package/dist/components/SelectDropdown/ListItem/components/CheckboxIndicator.js

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { ActiveCheckboxIcon } from '../../../../icons/ActiveCheckboxIcon.js';
-import { InactiveCheckboxIcon } from '../../../../icons/InactiveCheckboxIcon.js';
+import { ActiveCheckboxIcon } from '../../../../icons/custom/components/ActiveCheckboxIcon.js';
+import { InactiveCheckboxIcon } from '../../../../icons/custom/components/InactiveCheckboxIcon.js';
 
 const CheckboxIndicator = ({ checked, ...otherProps }) => {
     if (checked)

package/dist/components/SelectDropdown/ListItem/components/CheckboxIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxIndicator.js","sources":["../../../../../src/components/SelectDropdown/ListItem/components/CheckboxIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { ActiveCheckboxIcon } from '../../../../icons/ActiveCheckboxIcon';\nimport { InactiveCheckboxIcon } from '../../../../icons/InactiveCheckboxIcon';\n\nexport const CheckboxIndicator = ({ checked, ...otherProps }: any) => {\n  if (checked) return <ActiveCheckboxIcon {...otherProps} />;\n\n  return <InactiveCheckboxIcon {...otherProps} />;\n};\n"],"names":["React"],"mappings":";;;;AAIO,MAAM,iBAAiB,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,UAAU,EAAO,KAAI;AACnE,IAAA,IAAI,OAAO;AAAE,QAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,kBAAkB,EAAK,EAAA,GAAA,UAAU,GAAI;AAE1D,IAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,oBAAoB,EAAK,EAAA,GAAA,UAAU,GAAI;AACjD;;;;"}
+{"version":3,"file":"CheckboxIndicator.js","sources":["../../../../../src/components/SelectDropdown/ListItem/components/CheckboxIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { ActiveCheckboxIcon, InactiveCheckboxIcon } from '../../../../icons';\n\nexport const CheckboxIndicator = ({ checked, ...otherProps }: any) => {\n  if (checked) return <ActiveCheckboxIcon {...otherProps} />;\n\n  return <InactiveCheckboxIcon {...otherProps} />;\n};\n"],"names":["React"],"mappings":";;;;AAGO,MAAM,iBAAiB,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,UAAU,EAAO,KAAI;AACnE,IAAA,IAAI,OAAO;AAAE,QAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,kBAAkB,EAAK,EAAA,GAAA,UAAU,GAAI;AAE1D,IAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,oBAAoB,EAAK,EAAA,GAAA,UAAU,GAAI;AACjD;;;;"}

package/dist/components/SelectDropdown/ListItem/components/ListItemContent.cjs

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
-var DragIndicatorIcon = require('../../../../icons/DragIndicatorIcon.cjs');
+var DragIndicatorIcon = require('../../../../icons/design-system/components/DragIndicatorIcon.cjs');
 var styled = require('../styled.cjs');
 var Text = require('../../../Text/Text.cjs');
 var Stack = require('../../../Stack/Stack.cjs');
@@ -16,7 +16,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const ListItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging = false, selectionMode = 'single', isLink, isSelected = false, }) => (React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", alignX: "between" },
     React__default.default.createElement(styled.HorizontalContainer, null,
-        allowsDragging && React__default.default.createElement(DragIndicatorIcon.DragIndicatorIcon, null),
+        allowsDragging && React__default.default.createElement(DragIndicatorIcon.ReactComponent, { "data-testid": "drag-icon" }),
         React__default.default.createElement(SelectionType.SelectionType, { selectionMode: selectionMode, isSelected: isSelected, isLink: isLink }),
         mediaSlot,
         React__default.default.createElement(styled.VerticalContainer, null,

package/dist/components/SelectDropdown/ListItem/components/ListItemContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemContent.cjs","sources":["../../../../../src/components/SelectDropdown/ListItem/components/ListItemContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-aria-components';\nimport { DragIndicatorIcon } from '../../../../icons/DragIndicatorIcon';\nimport { ListItemContentProps } from './types';\nimport { HorizontalContainer, InfoContainer, LinkIcon, VerticalContainer } from '../styled';\nimport { Text as VeeqoText } from '../../../Text';\nimport { Stack } from '../../../Stack';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\n\nexport const ListItemContent = ({\n  label,\n  hint,\n  itemInfoSlot,\n  endInfoSlot,\n  alert,\n  mediaSlot,\n  allowsDragging = false,\n  selectionMode = 'single',\n  isLink,\n  isSelected = false,\n}: ListItemContentProps) => (\n  <Stack direction=\"horizontal\" alignY=\"center\" alignX=\"between\">\n    <HorizontalContainer>\n      {allowsDragging && <DragIndicatorIcon />}\n      <SelectionType selectionMode={selectionMode} isSelected={isSelected} isLink={isLink} />\n      {mediaSlot}\n      <VerticalContainer>\n        <InfoContainer\n          hasItemInfoSlot={Boolean(itemInfoSlot)}\n          hasEndInfoSlot={Boolean(endInfoSlot)}\n          data-testid=\"info-container\"\n        >\n          <Text slot=\"label\">\n            <VeeqoText variant=\"body\">{label}</VeeqoText>\n          </Text>\n          {itemInfoSlot}\n          {endInfoSlot}\n        </InfoContainer>\n\n        {hint && (\n          <Text slot=\"description\">\n            <VeeqoText variant=\"hintText\">{hint}</VeeqoText>\n          </Text>\n        )}\n        {alert && <MiniAlert title={alert.title} variant={alert.variant} />}\n      </VerticalContainer>\n    </HorizontalContainer>\n    {isLink && <LinkIcon data-testid=\"link-icon\" />}\n  </Stack>\n);\n"],"names":["React","Stack","HorizontalContainer","DragIndicatorIcon","SelectionType","VerticalContainer","InfoContainer","Text","VeeqoText","MiniAlert","LinkIcon"],"mappings":";;;;;;;;;;;;;;;;MAUa,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,SAAS,EACT,cAAc,GAAG,KAAK,EACtB,aAAa,GAAG,QAAQ,EACxB,MAAM,EACN,UAAU,GAAG,KAAK,GACG,MACrBA,sBAAA,CAAA,aAAA,CAACC,WAAK,EAAC,EAAA,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAA;AAC5D,IAAAD,sBAAA,CAAA,aAAA,CAACE,0BAAmB,EAAA,IAAA;QACjB,cAAc,IAAIF,sBAAC,CAAA,aAAA,CAAAG,mCAAiB,EAAG,IAAA,CAAA;AACxC,QAAAH,sBAAA,CAAA,aAAA,CAACI,2BAAa,EAAA,EAAC,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA;QACtF,SAAS;AACV,QAAAJ,sBAAA,CAAA,aAAA,CAACK,wBAAiB,EAAA,IAAA;AAChB,YAAAL,sBAAA,CAAA,aAAA,CAACM,oBAAa,EACZ,EAAA,eAAe,EAAE,OAAO,CAAC,YAAY,CAAC,EACtC,cAAc,EAAE,OAAO,CAAC,WAAW,CAAC,iBACxB,gBAAgB,EAAA;AAE5B,gBAAAN,sBAAA,CAAA,aAAA,CAACO,wBAAI,EAAA,EAAC,IAAI,EAAC,OAAO,EAAA;oBAChBP,sBAAC,CAAA,aAAA,CAAAQ,SAAS,IAAC,OAAO,EAAC,MAAM,EAAE,EAAA,KAAK,CAAa,CACxC;gBACN,YAAY;AACZ,gBAAA,WAAW,CACE;AAEf,YAAA,IAAI,KACHR,sBAAA,CAAA,aAAA,CAACO,wBAAI,EAAC,EAAA,IAAI,EAAC,aAAa,EAAA;gBACtBP,sBAAC,CAAA,aAAA,CAAAQ,SAAS,IAAC,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CAC3C,CACR;AACA,YAAA,KAAK,IAAIR,sBAAC,CAAA,aAAA,CAAAS,mBAAS,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,CAAI,CACjD,CACA;IACrB,MAAM,IAAIT,qCAACU,eAAQ,EAAA,EAAA,aAAA,EAAa,WAAW,EAAG,CAAA,CACzC;;;;"}
+{"version":3,"file":"ListItemContent.cjs","sources":["../../../../../src/components/SelectDropdown/ListItem/components/ListItemContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-aria-components';\nimport { DragIndicatorIcon } from '../../../../icons';\nimport { ListItemContentProps } from './types';\nimport { HorizontalContainer, InfoContainer, LinkIcon, VerticalContainer } from '../styled';\nimport { Text as VeeqoText } from '../../../Text';\nimport { Stack } from '../../../Stack';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\n\nexport const ListItemContent = ({\n  label,\n  hint,\n  itemInfoSlot,\n  endInfoSlot,\n  alert,\n  mediaSlot,\n  allowsDragging = false,\n  selectionMode = 'single',\n  isLink,\n  isSelected = false,\n}: ListItemContentProps) => (\n  <Stack direction=\"horizontal\" alignY=\"center\" alignX=\"between\">\n    <HorizontalContainer>\n      {allowsDragging && <DragIndicatorIcon data-testid=\"drag-icon\" />}\n      <SelectionType selectionMode={selectionMode} isSelected={isSelected} isLink={isLink} />\n      {mediaSlot}\n      <VerticalContainer>\n        <InfoContainer\n          hasItemInfoSlot={Boolean(itemInfoSlot)}\n          hasEndInfoSlot={Boolean(endInfoSlot)}\n          data-testid=\"info-container\"\n        >\n          <Text slot=\"label\">\n            <VeeqoText variant=\"body\">{label}</VeeqoText>\n          </Text>\n          {itemInfoSlot}\n          {endInfoSlot}\n        </InfoContainer>\n\n        {hint && (\n          <Text slot=\"description\">\n            <VeeqoText variant=\"hintText\">{hint}</VeeqoText>\n          </Text>\n        )}\n        {alert && <MiniAlert title={alert.title} variant={alert.variant} />}\n      </VerticalContainer>\n    </HorizontalContainer>\n    {isLink && <LinkIcon data-testid=\"link-icon\" />}\n  </Stack>\n);\n"],"names":["React","Stack","HorizontalContainer","DragIndicatorIcon","SelectionType","VerticalContainer","InfoContainer","Text","VeeqoText","MiniAlert","LinkIcon"],"mappings":";;;;;;;;;;;;;;;;MAUa,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,SAAS,EACT,cAAc,GAAG,KAAK,EACtB,aAAa,GAAG,QAAQ,EACxB,MAAM,EACN,UAAU,GAAG,KAAK,GACG,MACrBA,sBAAA,CAAA,aAAA,CAACC,WAAK,EAAC,EAAA,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAA;AAC5D,IAAAD,sBAAA,CAAA,aAAA,CAACE,0BAAmB,EAAA,IAAA;AACjB,QAAA,cAAc,IAAIF,sBAAA,CAAA,aAAA,CAACG,gCAAiB,EAAA,EAAA,aAAA,EAAa,WAAW,EAAG,CAAA;AAChE,QAAAH,sBAAA,CAAA,aAAA,CAACI,2BAAa,EAAA,EAAC,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA;QACtF,SAAS;AACV,QAAAJ,sBAAA,CAAA,aAAA,CAACK,wBAAiB,EAAA,IAAA;AAChB,YAAAL,sBAAA,CAAA,aAAA,CAACM,oBAAa,EACZ,EAAA,eAAe,EAAE,OAAO,CAAC,YAAY,CAAC,EACtC,cAAc,EAAE,OAAO,CAAC,WAAW,CAAC,iBACxB,gBAAgB,EAAA;AAE5B,gBAAAN,sBAAA,CAAA,aAAA,CAACO,wBAAI,EAAA,EAAC,IAAI,EAAC,OAAO,EAAA;oBAChBP,sBAAC,CAAA,aAAA,CAAAQ,SAAS,IAAC,OAAO,EAAC,MAAM,EAAE,EAAA,KAAK,CAAa,CACxC;gBACN,YAAY;AACZ,gBAAA,WAAW,CACE;AAEf,YAAA,IAAI,KACHR,sBAAA,CAAA,aAAA,CAACO,wBAAI,EAAC,EAAA,IAAI,EAAC,aAAa,EAAA;gBACtBP,sBAAC,CAAA,aAAA,CAAAQ,SAAS,IAAC,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CAC3C,CACR;AACA,YAAA,KAAK,IAAIR,sBAAC,CAAA,aAAA,CAAAS,mBAAS,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,CAAI,CACjD,CACA;IACrB,MAAM,IAAIT,qCAACU,eAAQ,EAAA,EAAA,aAAA,EAAa,WAAW,EAAG,CAAA,CACzC;;;;"}

package/dist/components/SelectDropdown/ListItem/components/ListItemContent.js

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import { Text } from 'react-aria-components';
-import { DragIndicatorIcon } from '../../../../icons/DragIndicatorIcon.js';
+import { ReactComponent as DragIndicatorIcon } from '../../../../icons/design-system/components/DragIndicatorIcon.js';
 import { HorizontalContainer, VerticalContainer, InfoContainer, LinkIcon } from '../styled.js';
 import { Text as Text$1 } from '../../../Text/Text.js';
 import { Stack } from '../../../Stack/Stack.js';
@@ -10,7 +10,7 @@ import { SelectionType } from './SelectionType.js';
 
 const ListItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging = false, selectionMode = 'single', isLink, isSelected = false, }) => (React__default.createElement(Stack, { direction: "horizontal", alignY: "center", alignX: "between" },
     React__default.createElement(HorizontalContainer, null,
-        allowsDragging && React__default.createElement(DragIndicatorIcon, null),
+        allowsDragging && React__default.createElement(DragIndicatorIcon, { "data-testid": "drag-icon" }),
         React__default.createElement(SelectionType, { selectionMode: selectionMode, isSelected: isSelected, isLink: isLink }),
         mediaSlot,
         React__default.createElement(VerticalContainer, null,

package/dist/components/SelectDropdown/ListItem/components/ListItemContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemContent.js","sources":["../../../../../src/components/SelectDropdown/ListItem/components/ListItemContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-aria-components';\nimport { DragIndicatorIcon } from '../../../../icons/DragIndicatorIcon';\nimport { ListItemContentProps } from './types';\nimport { HorizontalContainer, InfoContainer, LinkIcon, VerticalContainer } from '../styled';\nimport { Text as VeeqoText } from '../../../Text';\nimport { Stack } from '../../../Stack';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\n\nexport const ListItemContent = ({\n  label,\n  hint,\n  itemInfoSlot,\n  endInfoSlot,\n  alert,\n  mediaSlot,\n  allowsDragging = false,\n  selectionMode = 'single',\n  isLink,\n  isSelected = false,\n}: ListItemContentProps) => (\n  <Stack direction=\"horizontal\" alignY=\"center\" alignX=\"between\">\n    <HorizontalContainer>\n      {allowsDragging && <DragIndicatorIcon />}\n      <SelectionType selectionMode={selectionMode} isSelected={isSelected} isLink={isLink} />\n      {mediaSlot}\n      <VerticalContainer>\n        <InfoContainer\n          hasItemInfoSlot={Boolean(itemInfoSlot)}\n          hasEndInfoSlot={Boolean(endInfoSlot)}\n          data-testid=\"info-container\"\n        >\n          <Text slot=\"label\">\n            <VeeqoText variant=\"body\">{label}</VeeqoText>\n          </Text>\n          {itemInfoSlot}\n          {endInfoSlot}\n        </InfoContainer>\n\n        {hint && (\n          <Text slot=\"description\">\n            <VeeqoText variant=\"hintText\">{hint}</VeeqoText>\n          </Text>\n        )}\n        {alert && <MiniAlert title={alert.title} variant={alert.variant} />}\n      </VerticalContainer>\n    </HorizontalContainer>\n    {isLink && <LinkIcon data-testid=\"link-icon\" />}\n  </Stack>\n);\n"],"names":["React","VeeqoText"],"mappings":";;;;;;;;;;MAUa,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,SAAS,EACT,cAAc,GAAG,KAAK,EACtB,aAAa,GAAG,QAAQ,EACxB,MAAM,EACN,UAAU,GAAG,KAAK,GACG,MACrBA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAC,EAAA,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAA;AAC5D,IAAAA,cAAA,CAAA,aAAA,CAAC,mBAAmB,EAAA,IAAA;QACjB,cAAc,IAAIA,cAAC,CAAA,aAAA,CAAA,iBAAiB,EAAG,IAAA,CAAA;AACxC,QAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EAAC,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA;QACtF,SAAS;AACV,QAAAA,cAAA,CAAA,aAAA,CAAC,iBAAiB,EAAA,IAAA;AAChB,YAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EACZ,EAAA,eAAe,EAAE,OAAO,CAAC,YAAY,CAAC,EACtC,cAAc,EAAE,OAAO,CAAC,WAAW,CAAC,iBACxB,gBAAgB,EAAA;AAE5B,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,OAAO,EAAA;oBAChBA,cAAC,CAAA,aAAA,CAAAC,MAAS,IAAC,OAAO,EAAC,MAAM,EAAE,EAAA,KAAK,CAAa,CACxC;gBACN,YAAY;AACZ,gBAAA,WAAW,CACE;AAEf,YAAA,IAAI,KACHD,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAC,aAAa,EAAA;gBACtBA,cAAC,CAAA,aAAA,CAAAC,MAAS,IAAC,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CAC3C,CACR;AACA,YAAA,KAAK,IAAID,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,CAAI,CACjD,CACA;IACrB,MAAM,IAAIA,6BAAC,QAAQ,EAAA,EAAA,aAAA,EAAa,WAAW,EAAG,CAAA,CACzC;;;;"}
+{"version":3,"file":"ListItemContent.js","sources":["../../../../../src/components/SelectDropdown/ListItem/components/ListItemContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-aria-components';\nimport { DragIndicatorIcon } from '../../../../icons';\nimport { ListItemContentProps } from './types';\nimport { HorizontalContainer, InfoContainer, LinkIcon, VerticalContainer } from '../styled';\nimport { Text as VeeqoText } from '../../../Text';\nimport { Stack } from '../../../Stack';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\n\nexport const ListItemContent = ({\n  label,\n  hint,\n  itemInfoSlot,\n  endInfoSlot,\n  alert,\n  mediaSlot,\n  allowsDragging = false,\n  selectionMode = 'single',\n  isLink,\n  isSelected = false,\n}: ListItemContentProps) => (\n  <Stack direction=\"horizontal\" alignY=\"center\" alignX=\"between\">\n    <HorizontalContainer>\n      {allowsDragging && <DragIndicatorIcon data-testid=\"drag-icon\" />}\n      <SelectionType selectionMode={selectionMode} isSelected={isSelected} isLink={isLink} />\n      {mediaSlot}\n      <VerticalContainer>\n        <InfoContainer\n          hasItemInfoSlot={Boolean(itemInfoSlot)}\n          hasEndInfoSlot={Boolean(endInfoSlot)}\n          data-testid=\"info-container\"\n        >\n          <Text slot=\"label\">\n            <VeeqoText variant=\"body\">{label}</VeeqoText>\n          </Text>\n          {itemInfoSlot}\n          {endInfoSlot}\n        </InfoContainer>\n\n        {hint && (\n          <Text slot=\"description\">\n            <VeeqoText variant=\"hintText\">{hint}</VeeqoText>\n          </Text>\n        )}\n        {alert && <MiniAlert title={alert.title} variant={alert.variant} />}\n      </VerticalContainer>\n    </HorizontalContainer>\n    {isLink && <LinkIcon data-testid=\"link-icon\" />}\n  </Stack>\n);\n"],"names":["React","VeeqoText"],"mappings":";;;;;;;;;;MAUa,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,SAAS,EACT,cAAc,GAAG,KAAK,EACtB,aAAa,GAAG,QAAQ,EACxB,MAAM,EACN,UAAU,GAAG,KAAK,GACG,MACrBA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAC,EAAA,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAA;AAC5D,IAAAA,cAAA,CAAA,aAAA,CAAC,mBAAmB,EAAA,IAAA;AACjB,QAAA,cAAc,IAAIA,cAAA,CAAA,aAAA,CAAC,iBAAiB,EAAA,EAAA,aAAA,EAAa,WAAW,EAAG,CAAA;AAChE,QAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EAAC,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA;QACtF,SAAS;AACV,QAAAA,cAAA,CAAA,aAAA,CAAC,iBAAiB,EAAA,IAAA;AAChB,YAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EACZ,EAAA,eAAe,EAAE,OAAO,CAAC,YAAY,CAAC,EACtC,cAAc,EAAE,OAAO,CAAC,WAAW,CAAC,iBACxB,gBAAgB,EAAA;AAE5B,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,OAAO,EAAA;oBAChBA,cAAC,CAAA,aAAA,CAAAC,MAAS,IAAC,OAAO,EAAC,MAAM,EAAE,EAAA,KAAK,CAAa,CACxC;gBACN,YAAY;AACZ,gBAAA,WAAW,CACE;AAEf,YAAA,IAAI,KACHD,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAC,aAAa,EAAA;gBACtBA,cAAC,CAAA,aAAA,CAAAC,MAAS,IAAC,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CAC3C,CACR;AACA,YAAA,KAAK,IAAID,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,CAAI,CACjD,CACA;IACrB,MAAM,IAAIA,6BAAC,QAAQ,EAAA,EAAA,aAAA,EAAa,WAAW,EAAG,CAAA,CACzC;;;;"}

package/dist/components/SelectDropdown/ListItem/components/RadioIndicator.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var ActiveRadioIcon = require('../../../../icons/ActiveRadioIcon.cjs');
-var InactiveRadioIcon = require('../../../../icons/InactiveRadioIcon.cjs');
+var ActiveRadioIcon = require('../../../../icons/custom/components/ActiveRadioIcon.cjs');
+var InactiveRadioIcon = require('../../../../icons/custom/components/InactiveRadioIcon.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/dist/components/SelectDropdown/ListItem/components/RadioIndicator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadioIndicator.cjs","sources":["../../../../../src/components/SelectDropdown/ListItem/components/RadioIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { ActiveRadioIcon } from '../../../../icons/ActiveRadioIcon';\nimport { InactiveRadioIcon } from '../../../../icons/InactiveRadioIcon';\n\nexport const RadioIndicator = ({ checked, ...otherProps }: any) => {\n  if (checked) return <ActiveRadioIcon {...otherProps} />;\n\n  return <InactiveRadioIcon {...otherProps} />;\n};\n"],"names":["React","ActiveRadioIcon","InactiveRadioIcon"],"mappings":";;;;;;;;;;AAIO,MAAM,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,UAAU,EAAO,KAAI;AAChE,IAAA,IAAI,OAAO;AAAE,QAAA,OAAOA,sBAAC,CAAA,aAAA,CAAAC,+BAAe,EAAK,EAAA,GAAA,UAAU,GAAI;AAEvD,IAAA,OAAOD,sBAAC,CAAA,aAAA,CAAAE,mCAAiB,EAAK,EAAA,GAAA,UAAU,GAAI;AAC9C;;;;"}
+{"version":3,"file":"RadioIndicator.cjs","sources":["../../../../../src/components/SelectDropdown/ListItem/components/RadioIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { ActiveRadioIcon, InactiveRadioIcon } from '../../../../icons';\n\nexport const RadioIndicator = ({ checked, ...otherProps }: any) => {\n  if (checked) return <ActiveRadioIcon {...otherProps} />;\n\n  return <InactiveRadioIcon {...otherProps} />;\n};\n"],"names":["React","ActiveRadioIcon","InactiveRadioIcon"],"mappings":";;;;;;;;;;AAGO,MAAM,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,UAAU,EAAO,KAAI;AAChE,IAAA,IAAI,OAAO;AAAE,QAAA,OAAOA,sBAAC,CAAA,aAAA,CAAAC,+BAAe,EAAK,EAAA,GAAA,UAAU,GAAI;AAEvD,IAAA,OAAOD,sBAAC,CAAA,aAAA,CAAAE,mCAAiB,EAAK,EAAA,GAAA,UAAU,GAAI;AAC9C;;;;"}

package/dist/components/SelectDropdown/ListItem/components/RadioIndicator.js

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { ActiveRadioIcon } from '../../../../icons/ActiveRadioIcon.js';
-import { InactiveRadioIcon } from '../../../../icons/InactiveRadioIcon.js';
+import { ActiveRadioIcon } from '../../../../icons/custom/components/ActiveRadioIcon.js';
+import { InactiveRadioIcon } from '../../../../icons/custom/components/InactiveRadioIcon.js';
 
 const RadioIndicator = ({ checked, ...otherProps }) => {
     if (checked)

package/dist/components/SelectDropdown/ListItem/components/RadioIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioIndicator.js","sources":["../../../../../src/components/SelectDropdown/ListItem/components/RadioIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { ActiveRadioIcon } from '../../../../icons/ActiveRadioIcon';\nimport { InactiveRadioIcon } from '../../../../icons/InactiveRadioIcon';\n\nexport const RadioIndicator = ({ checked, ...otherProps }: any) => {\n  if (checked) return <ActiveRadioIcon {...otherProps} />;\n\n  return <InactiveRadioIcon {...otherProps} />;\n};\n"],"names":["React"],"mappings":";;;;AAIO,MAAM,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,UAAU,EAAO,KAAI;AAChE,IAAA,IAAI,OAAO;AAAE,QAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,eAAe,EAAK,EAAA,GAAA,UAAU,GAAI;AAEvD,IAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,iBAAiB,EAAK,EAAA,GAAA,UAAU,GAAI;AAC9C;;;;"}
+{"version":3,"file":"RadioIndicator.js","sources":["../../../../../src/components/SelectDropdown/ListItem/components/RadioIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { ActiveRadioIcon, InactiveRadioIcon } from '../../../../icons';\n\nexport const RadioIndicator = ({ checked, ...otherProps }: any) => {\n  if (checked) return <ActiveRadioIcon {...otherProps} />;\n\n  return <InactiveRadioIcon {...otherProps} />;\n};\n"],"names":["React"],"mappings":";;;;AAGO,MAAM,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,UAAU,EAAO,KAAI;AAChE,IAAA,IAAI,OAAO;AAAE,QAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,eAAe,EAAK,EAAA,GAAA,UAAU,GAAI;AAEvD,IAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,iBAAiB,EAAK,EAAA,GAAA,UAAU,GAAI;AAC9C;;;;"}

package/dist/components/SelectDropdown/ListItem/styled.cjs

@@ -3,7 +3,8 @@
 var styled = require('styled-components');
 var index = require('../../../theme/index.cjs');
 var reactAriaComponents = require('react-aria-components');
-var ArrowUpIcon = require('../../../icons/ArrowUpIcon.cjs');
+require('react');
+var ArrowUpIcon = require('../../../icons/design-system/components/ArrowUpIcon.cjs');
 var Stack = require('../../Stack/Stack.cjs');
 require('../../Stack/types.cjs');
 
@@ -18,7 +19,7 @@ const colourStatesMap = {
 };
 const StyledListItem = styled__default.default(reactAriaComponents.ListBoxItem).withConfig({ displayName: "vui--StyledListItem", componentId: "vui--16fm0j" }) `border-radius:${index.theme.radius.base};cursor:pointer;background-color:${({ appearance = 'primary' }) => appearance === 'primary' ? 'white' : index.theme.colors.neutral.grey.lightest};text-decoration:none;&[data-hovered] > div{background-color:${colourStatesMap.hovered};}&[data-pressed] > div{background-color:${colourStatesMap.pressed};}&[data-focused]{outline:0;}&[data-focus-visible] > div{outline:solid ${index.theme.sizes.xs} ${index.theme.colors.secondary.blue.light};z-index:1;position:relative;}&[data-dragging]{background-color:${index.theme.colors.neutral.grey.base};border-color:${index.theme.colors.secondary.blue.base};}&[data-drop-target]{background-color:${index.theme.colors.secondary.green.base};border-color:${index.theme.colors.secondary.green.base};}&[data-disabled]{cursor:not-allowed;background-color:${colourStatesMap.disabled};opacity:0.75;}& > div{padding:${index.theme.sizes.sm};border-radius:${index.theme.radius.base};}`;
 styled__default.default(reactAriaComponents.ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--6npxd" }) `.react-aria-DropIndicator[data-drop-target]{outline:2px solid ${index.theme.colors.secondary.blue.base};}width:100%;`;
-const LinkIcon = styled__default.default(ArrowUpIcon.ArrowUpIcon).attrs({
+const LinkIcon = styled__default.default(ArrowUpIcon.ReactComponent).attrs({
     width: index.theme.sizes.md,
     height: index.theme.sizes.md,
 }).withConfig({ displayName: "vui--LinkIcon", componentId: "vui--14ybt8l" }) `transform:rotate(90deg);color:${index.theme.colors.neutral.ink.base};`;

package/dist/components/SelectDropdown/ListItem/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../../src/components/SelectDropdown/ListItem/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\nimport { ListBox, ListBoxItem } from 'react-aria-components';\nimport { ArrowUpIcon } from '../../../icons/ArrowUpIcon';\nimport { Stack } from '../../Stack';\n\nconst colourStatesMap = {\n  hovered: '#F0F7FC',\n  pressed: '#E3F0FA',\n  disabled: theme.colors.neutral.grey.light,\n};\n\nexport const StyledListItem = styled(ListBoxItem)<{\n  appearance?: 'primary' | 'secondary';\n}>`\n  border-radius: ${theme.radius.base};\n  cursor: pointer;\n  background-color: ${({ appearance = 'primary' }) =>\n    appearance === 'primary' ? 'white' : theme.colors.neutral.grey.lightest};\n  text-decoration: none;\n\n  &[data-hovered] > div {\n    background-color: ${colourStatesMap.hovered};\n  }\n\n  &[data-pressed] > div {\n    background-color: ${colourStatesMap.pressed};\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div {\n    outline: solid ${theme.sizes.xs} ${theme.colors.secondary.blue.light};\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: ${theme.colors.neutral.grey.base};\n    border-color: ${theme.colors.secondary.blue.base};\n  }\n  &[data-drop-target] {\n    background-color: ${theme.colors.secondary.green.base};\n    border-color: ${theme.colors.secondary.green.base};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${colourStatesMap.disabled};\n    opacity: 0.75;\n  }\n\n  & > div {\n    padding: ${theme.sizes.sm};\n    border-radius: ${theme.radius.base};\n  }\n`;\n\nexport const StyledListBox = styled(ListBox)`\n  .react-aria-DropIndicator[data-drop-target] {\n    outline: 2px solid ${theme.colors.secondary.blue.base};\n  }\n\n  width: 100%;\n`;\n\nexport const LinkIcon = styled(ArrowUpIcon).attrs({\n  width: theme.sizes.md,\n  height: theme.sizes.md,\n})`\n  transform: rotate(90deg);\n  color: ${theme.colors.neutral.ink.base};\n`;\n\nexport const HorizontalContainer = styled(Stack).attrs({\n  direction: 'horizontal',\n  alignY: 'center',\n})`\n  width: 100%;\n`;\n\nexport const VerticalContainer = styled(Stack).attrs({\n  spacing: 'xs',\n})`\n  width: 100%;\n`;\n\nexport const InfoContainer = styled.div<{\n  hasItemInfoSlot: boolean;\n  hasEndInfoSlot: boolean;\n}>`\n  display: grid;\n  grid-template-columns: ${({ hasItemInfoSlot, hasEndInfoSlot }) =>\n    hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};\n  gap: ${theme.sizes.sm};\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  > *:last-child {\n    justify-self: ${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};\n  }\n`;\n\nexport const ItemInfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n`;\n"],"names":["theme","styled","ListBoxItem","ListBox","ArrowUpIcon","Stack"],"mappings":";;;;;;;;;;;;;AAMA,MAAM,eAAe,GAAG;AACtB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK;CAC1C;AAEM,MAAM,cAAc,GAAGC,uBAAM,CAACC,+BAAW,CAAC,CAG9B,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EAAAF,WAAK,CAAC,MAAM,CAAC,IAAI,CAEd,iCAAA,EAAA,CAAC,EAAE,UAAU,GAAG,SAAS,EAAE,KAC7C,UAAU,KAAK,SAAS,GAAG,OAAO,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,6DAAA,EAInD,eAAe,CAAC,OAAO,CAAA,yCAAA,EAIvB,eAAe,CAAC,OAAO,CAAA,uEAAA,EAQ1BA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAIA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,gEAAA,EAMhDA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,cAAA,EAClCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,uCAAA,EAG5BA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,cAAA,EACrCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,uDAAA,EAK7B,eAAe,CAAC,QAAQ,CAAA,+BAAA,EAKjCA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,eAAA,EACRA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,EAAA;AAITC,uBAAM,CAACE,2BAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,YAAA,EAAA,CAAA,CAAA,CAAA,8DAAA,EAEnBH,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAM5C,MAAA,QAAQ,GAAGC,uBAAM,CAACG,uBAAW,CAAC,CAAC,KAAK,CAAC;AAChD,IAAA,KAAK,EAAEJ,WAAK,CAAC,KAAK,CAAC,EAAE;AACrB,IAAA,MAAM,EAAEA,WAAK,CAAC,KAAK,CAAC,EAAE;CACvB,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8BAAA,EAESA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA;AAG3B,MAAA,mBAAmB,GAAGC,uBAAM,CAACI,WAAK,CAAC,CAAC,KAAK,CAAC;AACrD,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,MAAM,EAAE,QAAQ;AACjB,CAAA,CAAC;AAIW,MAAA,iBAAiB,GAAGJ,uBAAM,CAACI,WAAK,CAAC,CAAC,KAAK,CAAC;AACnD,IAAA,OAAO,EAAE,IAAI;AACd,CAAA,CAAC;AAIW,MAAA,aAAa,GAAGJ,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mCAAA,EAKZ,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,KAC3D,eAAe,IAAI,cAAc,GAAG,cAAc,GAAG,UAAU,CAC1D,KAAA,EAAAD,WAAK,CAAC,KAAK,CAAC,EAAE,iFAOH,CAAC,EAAE,cAAc,EAAE,MAAM,cAAc,GAAG,KAAK,GAAG,OAAO,CAAC,CAAA,EAAA;MAIjE,iBAAiB,GAAGC,uBAAM,CAAC,GAAG;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/SelectDropdown/ListItem/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\nimport { ListBox, ListBoxItem } from 'react-aria-components';\nimport { ArrowUpIcon } from '../../../icons';\nimport { Stack } from '../../Stack';\n\nconst colourStatesMap = {\n  hovered: '#F0F7FC',\n  pressed: '#E3F0FA',\n  disabled: theme.colors.neutral.grey.light,\n};\n\nexport const StyledListItem = styled(ListBoxItem)<{\n  appearance?: 'primary' | 'secondary';\n}>`\n  border-radius: ${theme.radius.base};\n  cursor: pointer;\n  background-color: ${({ appearance = 'primary' }) =>\n    appearance === 'primary' ? 'white' : theme.colors.neutral.grey.lightest};\n  text-decoration: none;\n\n  &[data-hovered] > div {\n    background-color: ${colourStatesMap.hovered};\n  }\n\n  &[data-pressed] > div {\n    background-color: ${colourStatesMap.pressed};\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div {\n    outline: solid ${theme.sizes.xs} ${theme.colors.secondary.blue.light};\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: ${theme.colors.neutral.grey.base};\n    border-color: ${theme.colors.secondary.blue.base};\n  }\n  &[data-drop-target] {\n    background-color: ${theme.colors.secondary.green.base};\n    border-color: ${theme.colors.secondary.green.base};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${colourStatesMap.disabled};\n    opacity: 0.75;\n  }\n\n  & > div {\n    padding: ${theme.sizes.sm};\n    border-radius: ${theme.radius.base};\n  }\n`;\n\nexport const StyledListBox = styled(ListBox)`\n  .react-aria-DropIndicator[data-drop-target] {\n    outline: 2px solid ${theme.colors.secondary.blue.base};\n  }\n\n  width: 100%;\n`;\n\nexport const LinkIcon = styled(ArrowUpIcon).attrs({\n  width: theme.sizes.md,\n  height: theme.sizes.md,\n})`\n  transform: rotate(90deg);\n  color: ${theme.colors.neutral.ink.base};\n`;\n\nexport const HorizontalContainer = styled(Stack).attrs({\n  direction: 'horizontal',\n  alignY: 'center',\n})`\n  width: 100%;\n`;\n\nexport const VerticalContainer = styled(Stack).attrs({\n  spacing: 'xs',\n})`\n  width: 100%;\n`;\n\nexport const InfoContainer = styled.div<{\n  hasItemInfoSlot: boolean;\n  hasEndInfoSlot: boolean;\n}>`\n  display: grid;\n  grid-template-columns: ${({ hasItemInfoSlot, hasEndInfoSlot }) =>\n    hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};\n  gap: ${theme.sizes.sm};\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  > *:last-child {\n    justify-self: ${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};\n  }\n`;\n\nexport const ItemInfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n`;\n"],"names":["theme","styled","ListBoxItem","ListBox","ArrowUpIcon","Stack"],"mappings":";;;;;;;;;;;;;;AAMA,MAAM,eAAe,GAAG;AACtB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK;CAC1C;AAEM,MAAM,cAAc,GAAGC,uBAAM,CAACC,+BAAW,CAAC,CAG9B,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EAAAF,WAAK,CAAC,MAAM,CAAC,IAAI,CAEd,iCAAA,EAAA,CAAC,EAAE,UAAU,GAAG,SAAS,EAAE,KAC7C,UAAU,KAAK,SAAS,GAAG,OAAO,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,6DAAA,EAInD,eAAe,CAAC,OAAO,CAAA,yCAAA,EAIvB,eAAe,CAAC,OAAO,CAAA,uEAAA,EAQ1BA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAIA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,gEAAA,EAMhDA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,cAAA,EAClCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,uCAAA,EAG5BA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,cAAA,EACrCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,uDAAA,EAK7B,eAAe,CAAC,QAAQ,CAAA,+BAAA,EAKjCA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,eAAA,EACRA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,EAAA;AAITC,uBAAM,CAACE,2BAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,YAAA,EAAA,CAAA,CAAA,CAAA,8DAAA,EAEnBH,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAM5C,MAAA,QAAQ,GAAGC,uBAAM,CAACG,0BAAW,CAAC,CAAC,KAAK,CAAC;AAChD,IAAA,KAAK,EAAEJ,WAAK,CAAC,KAAK,CAAC,EAAE;AACrB,IAAA,MAAM,EAAEA,WAAK,CAAC,KAAK,CAAC,EAAE;CACvB,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8BAAA,EAESA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA;AAG3B,MAAA,mBAAmB,GAAGC,uBAAM,CAACI,WAAK,CAAC,CAAC,KAAK,CAAC;AACrD,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,MAAM,EAAE,QAAQ;AACjB,CAAA,CAAC;AAIW,MAAA,iBAAiB,GAAGJ,uBAAM,CAACI,WAAK,CAAC,CAAC,KAAK,CAAC;AACnD,IAAA,OAAO,EAAE,IAAI;AACd,CAAA,CAAC;AAIW,MAAA,aAAa,GAAGJ,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mCAAA,EAKZ,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,KAC3D,eAAe,IAAI,cAAc,GAAG,cAAc,GAAG,UAAU,CAC1D,KAAA,EAAAD,WAAK,CAAC,KAAK,CAAC,EAAE,iFAOH,CAAC,EAAE,cAAc,EAAE,MAAM,cAAc,GAAG,KAAK,GAAG,OAAO,CAAC,CAAA,EAAA;MAIjE,iBAAiB,GAAGC,uBAAM,CAAC,GAAG;;;;;;;;;"}

package/dist/components/SelectDropdown/ListItem/styled.d.ts

@@ -3,7 +3,7 @@ export declare const StyledListItem: import("styled-components").StyledComponent
     appearance?: "primary" | "secondary" | undefined;
 }, never>;
 export declare const StyledListBox: import("styled-components").StyledComponent<(<T extends object>(props: import("react-aria-components").ListBoxProps<T> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>), any, {}, never>;
-export declare const LinkIcon: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {
+export declare const LinkIcon: import("styled-components").StyledComponent<(props: import("react").SVGProps<SVGSVGElement>) => import("react").JSX.Element, any, {
     width: string;
     height: string;
 }, "height" | "width">;

package/dist/components/SelectDropdown/ListItem/styled.js

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 import { theme } from '../../../theme/index.js';
 import { ListBoxItem, ListBox } from 'react-aria-components';
-import { ArrowUpIcon } from '../../../icons/ArrowUpIcon.js';
+import 'react';
+import { ReactComponent as ArrowUpIcon } from '../../../icons/design-system/components/ArrowUpIcon.js';
 import { Stack } from '../../Stack/Stack.js';
 import '../../Stack/types.js';
 

package/dist/components/SelectDropdown/ListItem/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/components/SelectDropdown/ListItem/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\nimport { ListBox, ListBoxItem } from 'react-aria-components';\nimport { ArrowUpIcon } from '../../../icons/ArrowUpIcon';\nimport { Stack } from '../../Stack';\n\nconst colourStatesMap = {\n  hovered: '#F0F7FC',\n  pressed: '#E3F0FA',\n  disabled: theme.colors.neutral.grey.light,\n};\n\nexport const StyledListItem = styled(ListBoxItem)<{\n  appearance?: 'primary' | 'secondary';\n}>`\n  border-radius: ${theme.radius.base};\n  cursor: pointer;\n  background-color: ${({ appearance = 'primary' }) =>\n    appearance === 'primary' ? 'white' : theme.colors.neutral.grey.lightest};\n  text-decoration: none;\n\n  &[data-hovered] > div {\n    background-color: ${colourStatesMap.hovered};\n  }\n\n  &[data-pressed] > div {\n    background-color: ${colourStatesMap.pressed};\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div {\n    outline: solid ${theme.sizes.xs} ${theme.colors.secondary.blue.light};\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: ${theme.colors.neutral.grey.base};\n    border-color: ${theme.colors.secondary.blue.base};\n  }\n  &[data-drop-target] {\n    background-color: ${theme.colors.secondary.green.base};\n    border-color: ${theme.colors.secondary.green.base};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${colourStatesMap.disabled};\n    opacity: 0.75;\n  }\n\n  & > div {\n    padding: ${theme.sizes.sm};\n    border-radius: ${theme.radius.base};\n  }\n`;\n\nexport const StyledListBox = styled(ListBox)`\n  .react-aria-DropIndicator[data-drop-target] {\n    outline: 2px solid ${theme.colors.secondary.blue.base};\n  }\n\n  width: 100%;\n`;\n\nexport const LinkIcon = styled(ArrowUpIcon).attrs({\n  width: theme.sizes.md,\n  height: theme.sizes.md,\n})`\n  transform: rotate(90deg);\n  color: ${theme.colors.neutral.ink.base};\n`;\n\nexport const HorizontalContainer = styled(Stack).attrs({\n  direction: 'horizontal',\n  alignY: 'center',\n})`\n  width: 100%;\n`;\n\nexport const VerticalContainer = styled(Stack).attrs({\n  spacing: 'xs',\n})`\n  width: 100%;\n`;\n\nexport const InfoContainer = styled.div<{\n  hasItemInfoSlot: boolean;\n  hasEndInfoSlot: boolean;\n}>`\n  display: grid;\n  grid-template-columns: ${({ hasItemInfoSlot, hasEndInfoSlot }) =>\n    hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};\n  gap: ${theme.sizes.sm};\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  > *:last-child {\n    justify-self: ${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};\n  }\n`;\n\nexport const ItemInfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n`;\n"],"names":[],"mappings":";;;;;;;AAMA,MAAM,eAAe,GAAG;AACtB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK;CAC1C;AAEM,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC,CAG9B,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAEd,iCAAA,EAAA,CAAC,EAAE,UAAU,GAAG,SAAS,EAAE,KAC7C,UAAU,KAAK,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,6DAAA,EAInD,eAAe,CAAC,OAAO,CAAA,yCAAA,EAIvB,eAAe,CAAC,OAAO,CAAA,uEAAA,EAQ1B,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,gEAAA,EAMhD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,cAAA,EAClC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,uCAAA,EAG5B,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,cAAA,EACrC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,uDAAA,EAK7B,eAAe,CAAC,QAAQ,CAAA,+BAAA,EAKjC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,eAAA,EACR,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,EAAA;AAIT,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,YAAA,EAAA,CAAA,CAAA,CAAA,8DAAA,EAEnB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAM5C,MAAA,QAAQ,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC;AAChD,IAAA,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;AACrB,IAAA,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;CACvB,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8BAAA,EAES,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA;AAG3B,MAAA,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;AACrD,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,MAAM,EAAE,QAAQ;AACjB,CAAA,CAAC;AAIW,MAAA,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;AACnD,IAAA,OAAO,EAAE,IAAI;AACd,CAAA,CAAC;AAIW,MAAA,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mCAAA,EAKZ,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,KAC3D,eAAe,IAAI,cAAc,GAAG,cAAc,GAAG,UAAU,CAC1D,KAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,iFAOH,CAAC,EAAE,cAAc,EAAE,MAAM,cAAc,GAAG,KAAK,GAAG,OAAO,CAAC,CAAA,EAAA;MAIjE,iBAAiB,GAAG,MAAM,CAAC,GAAG;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../src/components/SelectDropdown/ListItem/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\nimport { ListBox, ListBoxItem } from 'react-aria-components';\nimport { ArrowUpIcon } from '../../../icons';\nimport { Stack } from '../../Stack';\n\nconst colourStatesMap = {\n  hovered: '#F0F7FC',\n  pressed: '#E3F0FA',\n  disabled: theme.colors.neutral.grey.light,\n};\n\nexport const StyledListItem = styled(ListBoxItem)<{\n  appearance?: 'primary' | 'secondary';\n}>`\n  border-radius: ${theme.radius.base};\n  cursor: pointer;\n  background-color: ${({ appearance = 'primary' }) =>\n    appearance === 'primary' ? 'white' : theme.colors.neutral.grey.lightest};\n  text-decoration: none;\n\n  &[data-hovered] > div {\n    background-color: ${colourStatesMap.hovered};\n  }\n\n  &[data-pressed] > div {\n    background-color: ${colourStatesMap.pressed};\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div {\n    outline: solid ${theme.sizes.xs} ${theme.colors.secondary.blue.light};\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: ${theme.colors.neutral.grey.base};\n    border-color: ${theme.colors.secondary.blue.base};\n  }\n  &[data-drop-target] {\n    background-color: ${theme.colors.secondary.green.base};\n    border-color: ${theme.colors.secondary.green.base};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${colourStatesMap.disabled};\n    opacity: 0.75;\n  }\n\n  & > div {\n    padding: ${theme.sizes.sm};\n    border-radius: ${theme.radius.base};\n  }\n`;\n\nexport const StyledListBox = styled(ListBox)`\n  .react-aria-DropIndicator[data-drop-target] {\n    outline: 2px solid ${theme.colors.secondary.blue.base};\n  }\n\n  width: 100%;\n`;\n\nexport const LinkIcon = styled(ArrowUpIcon).attrs({\n  width: theme.sizes.md,\n  height: theme.sizes.md,\n})`\n  transform: rotate(90deg);\n  color: ${theme.colors.neutral.ink.base};\n`;\n\nexport const HorizontalContainer = styled(Stack).attrs({\n  direction: 'horizontal',\n  alignY: 'center',\n})`\n  width: 100%;\n`;\n\nexport const VerticalContainer = styled(Stack).attrs({\n  spacing: 'xs',\n})`\n  width: 100%;\n`;\n\nexport const InfoContainer = styled.div<{\n  hasItemInfoSlot: boolean;\n  hasEndInfoSlot: boolean;\n}>`\n  display: grid;\n  grid-template-columns: ${({ hasItemInfoSlot, hasEndInfoSlot }) =>\n    hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};\n  gap: ${theme.sizes.sm};\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  > *:last-child {\n    justify-self: ${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};\n  }\n`;\n\nexport const ItemInfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n`;\n"],"names":[],"mappings":";;;;;;;;AAMA,MAAM,eAAe,GAAG;AACtB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK;CAC1C;AAEM,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC,CAG9B,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAEd,iCAAA,EAAA,CAAC,EAAE,UAAU,GAAG,SAAS,EAAE,KAC7C,UAAU,KAAK,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,6DAAA,EAInD,eAAe,CAAC,OAAO,CAAA,yCAAA,EAIvB,eAAe,CAAC,OAAO,CAAA,uEAAA,EAQ1B,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,gEAAA,EAMhD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,cAAA,EAClC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,uCAAA,EAG5B,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,cAAA,EACrC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,uDAAA,EAK7B,eAAe,CAAC,QAAQ,CAAA,+BAAA,EAKjC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,eAAA,EACR,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,EAAA;AAIT,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,YAAA,EAAA,CAAA,CAAA,CAAA,8DAAA,EAEnB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAM5C,MAAA,QAAQ,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC;AAChD,IAAA,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;AACrB,IAAA,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;CACvB,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8BAAA,EAES,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA;AAG3B,MAAA,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;AACrD,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,MAAM,EAAE,QAAQ;AACjB,CAAA,CAAC;AAIW,MAAA,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;AACnD,IAAA,OAAO,EAAE,IAAI;AACd,CAAA,CAAC;AAIW,MAAA,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mCAAA,EAKZ,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,KAC3D,eAAe,IAAI,cAAc,GAAG,cAAc,GAAG,UAAU,CAC1D,KAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,iFAOH,CAAC,EAAE,cAAc,EAAE,MAAM,cAAc,GAAG,KAAK,GAAG,OAAO,CAAC,CAAA,EAAA;MAIjE,iBAAiB,GAAG,MAAM,CAAC,GAAG;;;;"}

package/dist/components/Stepper/Stepper.cjs

@@ -3,9 +3,8 @@
 var React = require('react');
 var index = require('../../theme/index.cjs');
 var styled = require('./styled.cjs');
-require('../../theme/modules/sizes.cjs');
-var MinusIcon = require('../../icons/MinusIcon.cjs');
-var PlusIcon = require('../../icons/PlusIcon.cjs');
+var MinusIcon = require('../../icons/design-system/components/MinusIcon.cjs');
+var PlusIcon = require('../../icons/custom/components/PlusIcon.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -15,7 +14,7 @@ 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.MinusIcon, { height: index.theme.sizes.base, width: index.theme.sizes.base, color: index.theme.colors.neutral.ink.base })),
+            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 }))));

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":";;;;;;;;;;;;;AAea,MAAA,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,EACT,EAAA,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,mBAAS,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,EAAI,CAAA;AACpC,QAAAL,sBAAA,CAAA,aAAA,CAACE,iBAAU,EACT,EAAA,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 { 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":";;;;;;;;;;;;AAea,MAAA,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,EACT,EAAA,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,EAAI,CAAA;AACpC,QAAAL,sBAAA,CAAA,aAAA,CAACE,iBAAU,EACT,EAAA,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;;;;"}

package/dist/components/Stepper/Stepper.js

@@ -1,9 +1,8 @@
 import React__default from 'react';
 import { theme } from '../../theme/index.js';
 import { ContainerStack, StepButton, StepperDivider } from './styled.js';
-import '../../theme/modules/sizes.js';
-import { MinusIcon } from '../../icons/MinusIcon.js';
-import { PlusIcon } from '../../icons/PlusIcon.js';
+import { ReactComponent as MinusIcon } from '../../icons/design-system/components/MinusIcon.js';
+import { PlusIcon } from '../../icons/custom/components/PlusIcon.js';
 
 const Stepper = ({ onIncrement, onDecrement, disabled, hasError, size }) => {
     const compact = size === 'sm';

package/dist/components/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","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"],"mappings":";;;;;;;AAea,MAAA,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,6BAAC,cAAc,EAAA,EACb,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,QAAQ,EACf,OAAO,EAAC,MAAM,EAAA;AAEd,QAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EACT,EAAA,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAAA;AAEhB,YAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GACpC,CACS;AACb,QAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAC,OAAO,EAAE,OAAO,EAAI,CAAA;AACpC,QAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EACT,EAAA,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAAA;AAEhB,YAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACP,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CACpC,CACS,CACE;AAErB;;;;"}
+{"version":3,"file":"Stepper.js","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"],"mappings":";;;;;;AAea,MAAA,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,6BAAC,cAAc,EAAA,EACb,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,QAAQ,EACf,OAAO,EAAC,MAAM,EAAA;AAEd,QAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EACT,EAAA,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAAA;AAEhB,YAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GACpC,CACS;AACb,QAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAC,OAAO,EAAE,OAAO,EAAI,CAAA;AACpC,QAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EACT,EAAA,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAAA;AAEhB,YAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACP,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CACpC,CACS,CACE;AAErB;;;;"}