@veeqo/ui 14.11.0 → 14.11.1

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

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

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

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

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

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

package/dist/components/Pagination/Pagination.cjs

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

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

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

package/dist/components/Pagination/Pagination.js

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { PaginationButton, PageInput } from './styled.js';
+import styles from './Pagination.module.scss.js';
 import { PageCount } from './components.js';
 import { usePagination } from './hooks/usePagination.js';
 import { ReactComponent as EndArrowIcon } from '../../icons/design-system/components/EndArrowIcon.js';
@@ -7,6 +7,8 @@ import { ReactComponent as LeftArrowIcon } from '../../icons/design-system/compo
 import { ReactComponent as RightArrowIcon } from '../../icons/design-system/components/RightArrowIcon.js';
 import { ReactComponent as StartArrowIcon } from '../../icons/design-system/components/StartArrowIcon.js';
 import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
+import { Button } from '../Button/Button.js';
+import { TextField } from '../TextField/index.js';
 
 const Pagination = ({ testId, e2eClassName, currentPage, totalPagesCount, handleChangePage, }) => {
     const { pageInputValue, handleIncrement, handleDecrement, handleFormSubmit, handleInputChange, handleSubmit, } = usePagination({
@@ -29,13 +31,13 @@ const Pagination = ({ testId, e2eClassName, currentPage, totalPagesCount, handle
             handleChangePage(totalPagesCount);
     };
     return (React__default.createElement(FlexRow, { alignItems: "center", gap: "xs", "data-testid": testId, className: e2eClassName },
-        React__default.createElement(PaginationButton, { onClick: handleSkipBack, iconSlot: React__default.createElement(StartArrowIcon, null), size: "sm", "aria-label": "go to first page", "aria-disabled": currentPage <= 1, disabled: currentPage <= 1 }),
-        React__default.createElement(PaginationButton, { onClick: handleDecrement, iconSlot: React__default.createElement(LeftArrowIcon, null), size: "sm", "aria-label": "go to previous page", "aria-disabled": currentPage <= 1, disabled: currentPage <= 1 }),
+        React__default.createElement(Button, { className: styles.paginationButton, onClick: handleSkipBack, iconSlot: React__default.createElement(StartArrowIcon, null), size: "sm", "aria-label": "go to first page", "aria-disabled": currentPage <= 1, disabled: currentPage <= 1 }),
+        React__default.createElement(Button, { className: styles.paginationButton, onClick: handleDecrement, iconSlot: React__default.createElement(LeftArrowIcon, null), size: "sm", "aria-label": "go to previous page", "aria-disabled": currentPage <= 1, disabled: currentPage <= 1 }),
         React__default.createElement("form", { onSubmit: handleFormSubmit },
-            React__default.createElement(PageInput, { "aria-live": "polite", "aria-label": `page ${currentPage} of ${totalPagesCount}`, size: "sm", type: "number", value: pageInputValue, min: "1", max: `${totalPagesCount}`, onChange: handleInputChange, onBlur: handleSubmit })),
+            React__default.createElement(TextField, { className: styles.pageInput, "aria-live": "polite", "aria-label": `page ${currentPage} of ${totalPagesCount}`, size: "sm", type: "number", value: pageInputValue, min: "1", max: `${totalPagesCount}`, onChange: handleInputChange, onBlur: handleSubmit })),
         React__default.createElement(PageCount, { count: totalPagesCount }),
-        React__default.createElement(PaginationButton, { onClick: handleIncrement, iconSlot: React__default.createElement(RightArrowIcon, null), size: "sm", "aria-label": "go to next page", "aria-disabled": currentPage >= totalPagesCount, disabled: currentPage >= totalPagesCount }),
-        React__default.createElement(PaginationButton, { onClick: handleSkipToEnd, iconSlot: React__default.createElement(EndArrowIcon, null), size: "sm", "aria-label": "go to last page", "aria-disabled": currentPage >= totalPagesCount, disabled: currentPage >= totalPagesCount })));
+        React__default.createElement(Button, { className: styles.paginationButton, onClick: handleIncrement, iconSlot: React__default.createElement(RightArrowIcon, null), size: "sm", "aria-label": "go to next page", "aria-disabled": currentPage >= totalPagesCount, disabled: currentPage >= totalPagesCount }),
+        React__default.createElement(Button, { className: styles.paginationButton, onClick: handleSkipToEnd, iconSlot: React__default.createElement(EndArrowIcon, null), size: "sm", "aria-label": "go to last page", "aria-disabled": currentPage >= totalPagesCount, disabled: currentPage >= totalPagesCount })));
 };
 
 export { Pagination };

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

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._paginationButton_qfqj1_1._paginationButton_qfqj1_1 {\n  color: var(--colors-neutral-ink-base);\n  width: var(--sizes-lg);\n  height: var(--sizes-lg);\n}\n._paginationButton_qfqj1_1._paginationButton_qfqj1_1 svg {\n  width: var(--sizes-md);\n  height: var(--sizes-md);\n}\n\n._pageInput_qfqj1_11[type=number] {\n  min-width: auto;\n}\n\n._pageLimitContainer_qfqj1_15 {\n  box-sizing: border-box;\n  min-width: var(--sizes-10);\n  height: var(--sizes-lg);\n  padding: 0 var(--sizes-3);\n  background-color: var(--colors-neutral-grey-light);\n  border: 1px solid var(--colors-neutral-grey-dark);\n  border-radius: var(--sizes-xs);\n}");
+var styles = {"paginationButton":"_paginationButton_qfqj1_1","pageInput":"_pageInput_qfqj1_11","pageLimitContainer":"_pageLimitContainer_qfqj1_15"};
+
+module.exports = styles;
+//# sourceMappingURL=Pagination.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.module.scss.cjs","sources":["../../../src/components/Pagination/Pagination.module.scss"],"sourcesContent":[".paginationButton.paginationButton {\n  color: var(--colors-neutral-ink-base);\n  width: var(--sizes-lg);\n  height: var(--sizes-lg);\n\n  svg {\n    width: var(--sizes-md);\n    height: var(--sizes-md);\n  }\n}\n\n.pageInput {\n  &[type='number'] {\n    min-width: auto;\n  }\n}\n\n.pageLimitContainer {\n  box-sizing: border-box;\n  min-width: var(--sizes-10);\n  height: var(--sizes-lg);\n  padding: 0 var(--sizes-3);\n  background-color: var(--colors-neutral-grey-light);\n  border: 1px solid var(--colors-neutral-grey-dark);\n  border-radius: var(--sizes-xs);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,0nBAAA;AACA,aAAA,CAAA,kBAAA,CAAA,2BAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,8BAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._paginationButton_qfqj1_1._paginationButton_qfqj1_1 {\n  color: var(--colors-neutral-ink-base);\n  width: var(--sizes-lg);\n  height: var(--sizes-lg);\n}\n._paginationButton_qfqj1_1._paginationButton_qfqj1_1 svg {\n  width: var(--sizes-md);\n  height: var(--sizes-md);\n}\n\n._pageInput_qfqj1_11[type=number] {\n  min-width: auto;\n}\n\n._pageLimitContainer_qfqj1_15 {\n  box-sizing: border-box;\n  min-width: var(--sizes-10);\n  height: var(--sizes-lg);\n  padding: 0 var(--sizes-3);\n  background-color: var(--colors-neutral-grey-light);\n  border: 1px solid var(--colors-neutral-grey-dark);\n  border-radius: var(--sizes-xs);\n}");
+var styles = {"paginationButton":"_paginationButton_qfqj1_1","pageInput":"_pageInput_qfqj1_11","pageLimitContainer":"_pageLimitContainer_qfqj1_15"};
+
+export { styles as default };
+//# sourceMappingURL=Pagination.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.module.scss.js","sources":["../../../src/components/Pagination/Pagination.module.scss"],"sourcesContent":[".paginationButton.paginationButton {\n  color: var(--colors-neutral-ink-base);\n  width: var(--sizes-lg);\n  height: var(--sizes-lg);\n\n  svg {\n    width: var(--sizes-md);\n    height: var(--sizes-md);\n  }\n}\n\n.pageInput {\n  &[type='number'] {\n    min-width: auto;\n  }\n}\n\n.pageLimitContainer {\n  box-sizing: border-box;\n  min-width: var(--sizes-10);\n  height: var(--sizes-lg);\n  padding: 0 var(--sizes-3);\n  background-color: var(--colors-neutral-grey-light);\n  border: 1px solid var(--colors-neutral-grey-dark);\n  border-radius: var(--sizes-xs);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,0nBAAA;AACA,aAAA,CAAA,kBAAA,CAAA,2BAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,8BAAA;;;;"}

package/dist/components/Pagination/components.cjs

@@ -2,7 +2,8 @@
 
 var React = require('react');
 var Text = require('../Text/Text.cjs');
-var styled = require('./styled.cjs');
+var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
+var Pagination_module = require('./Pagination.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -11,7 +12,7 @@ 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: "bodySmallBold", "aria-hidden": true }, "/")),
-    React__default.default.createElement(styled.PageLimitContainer, { alignItems: "center", justifyContent: "center", "aria-hidden": true },
+    React__default.default.createElement(FlexRow.FlexRow, { className: Pagination_module.pageLimitContainer, alignItems: "center", justifyContent: "center", "aria-hidden": true },
         React__default.default.createElement(Text.Text, { variant: "body" }, count))));
 
 exports.PageCount = PageCount;

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=\"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":";;;;;;;;;;AAIO,MAAM,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,EAAA,EAAC,OAAO,EAAC,eAAe,6BAEtB,CACH;IACND,sBAAA,CAAA,aAAA,CAACE,yBAAkB,IAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAA,aAAA,EAAA,IAAA,EAAA;QAC7DF,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAQ,CAChB,CACpB;;;;"}
+{"version":3,"file":"components.cjs","sources":["../../../src/components/Pagination/components.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '../Text';\nimport { FlexRow } from '../Flex/FlexRow';\nimport styles from './Pagination.module.scss';\n\nexport const PageCount = ({ count }: { count: number }) => (\n  <>\n    <div>\n      <Text variant=\"bodySmallBold\" aria-hidden>\n        /\n      </Text>\n    </div>\n    <FlexRow\n      className={styles.pageLimitContainer}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      aria-hidden\n    >\n      <Text variant=\"body\">{count}</Text>\n    </FlexRow>\n  </>\n);\n"],"names":["React","Text","FlexRow","styles"],"mappings":";;;;;;;;;;;AAKO,MAAM,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,EAAA,EAAC,OAAO,EAAC,eAAe,6BAEtB,CACH;AACN,IAAAD,sBAAA,CAAA,aAAA,CAACE,eAAO,EAAA,EACN,SAAS,EAAEC,iBAAM,CAAC,kBAAkB,EACpC,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EAAA,aAAA,EAAA,IAAA,EAAA;QAGvBH,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAQ,CAC3B,CACT;;;;"}

package/dist/components/Pagination/components.js

@@ -1,11 +1,12 @@
 import React__default from 'react';
 import { Text } from '../Text/Text.js';
-import { PageLimitContainer } from './styled.js';
+import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
+import styles from './Pagination.module.scss.js';
 
 const PageCount = ({ count }) => (React__default.createElement(React__default.Fragment, null,
     React__default.createElement("div", null,
         React__default.createElement(Text, { variant: "bodySmallBold", "aria-hidden": true }, "/")),
-    React__default.createElement(PageLimitContainer, { alignItems: "center", justifyContent: "center", "aria-hidden": true },
+    React__default.createElement(FlexRow, { className: styles.pageLimitContainer, alignItems: "center", justifyContent: "center", "aria-hidden": true },
         React__default.createElement(Text, { variant: "body" }, count))));
 
 export { PageCount };

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=\"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":";;;;AAIO,MAAM,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,EAAA,EAAC,OAAO,EAAC,eAAe,6BAEtB,CACH;IACNA,cAAA,CAAA,aAAA,CAAC,kBAAkB,IAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAA,aAAA,EAAA,IAAA,EAAA;QAC7DA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAQ,CAChB,CACpB;;;;"}
+{"version":3,"file":"components.js","sources":["../../../src/components/Pagination/components.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '../Text';\nimport { FlexRow } from '../Flex/FlexRow';\nimport styles from './Pagination.module.scss';\n\nexport const PageCount = ({ count }: { count: number }) => (\n  <>\n    <div>\n      <Text variant=\"bodySmallBold\" aria-hidden>\n        /\n      </Text>\n    </div>\n    <FlexRow\n      className={styles.pageLimitContainer}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      aria-hidden\n    >\n      <Text variant=\"body\">{count}</Text>\n    </FlexRow>\n  </>\n);\n"],"names":["React"],"mappings":";;;;;AAKO,MAAM,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,EAAA,EAAC,OAAO,EAAC,eAAe,6BAEtB,CACH;AACN,IAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,SAAS,EAAE,MAAM,CAAC,kBAAkB,EACpC,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EAAA,aAAA,EAAA,IAAA,EAAA;QAGvBA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAQ,CAC3B,CACT;;;;"}

package/dist/components/SegmentedControl/SegmentedControl.cjs

@@ -2,13 +2,14 @@
 
 var React = require('react');
 var Button = require('../Button/Button.cjs');
-var styled = require('./styled.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+var SegmentedControl_module = require('./SegmentedControl.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const SegmentedControl = ({ options, selected, className, onChange, }) => (React__default.default.createElement(styled.SegmentedControlContainer, { className: className ? `${className}-container` : undefined }, options.map((option) => (React__default.default.createElement(Button.Button, { type: "button", "aria-pressed": option.value === selected, variant: option.value === selected ? 'primary' : 'default', key: option.key, onClick: () => onChange(option.value), disabled: option.disabled, className: option.value === selected ? 'veeqo-components-active-button' : '' }, option.label)))));
+const SegmentedControl = ({ options, selected, className, onChange, }) => (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([SegmentedControl_module.container, className && `${className}-container`]) }, options.map((option) => (React__default.default.createElement(Button.Button, { type: "button", "aria-pressed": option.value === selected, variant: option.value === selected ? 'primary' : 'default', key: option.key, onClick: () => onChange(option.value), disabled: option.disabled, className: option.value === selected ? 'veeqo-components-active-button' : '' }, option.label)))));
 
 exports.SegmentedControl = SegmentedControl;
 //# sourceMappingURL=SegmentedControl.cjs.map

package/dist/components/SegmentedControl/SegmentedControl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.cjs","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Button } from '../Button';\nimport { SegmentedControlContainer } from './styled';\n\nimport { SegmentedControlProps } from './types';\n\nexport const SegmentedControl = ({\n  options,\n  selected,\n  className,\n  onChange,\n}: SegmentedControlProps) => (\n  <SegmentedControlContainer className={className ? `${className}-container` : undefined}>\n    {options.map((option) => (\n      <Button\n        type=\"button\"\n        aria-pressed={option.value === selected}\n        variant={option.value === selected ? 'primary' : 'default'}\n        key={option.key}\n        onClick={() => onChange(option.value)}\n        disabled={option.disabled}\n        className={option.value === selected ? 'veeqo-components-active-button' : ''}\n      >\n        {option.label}\n      </Button>\n    ))}\n  </SegmentedControlContainer>\n);\n"],"names":["React","SegmentedControlContainer","Button"],"mappings":";;;;;;;;;;AAOO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,GACc,MACtBA,sBAAA,CAAA,aAAA,CAACC,gCAAyB,EAAA,EAAC,SAAS,EAAE,SAAS,GAAG,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG,SAAS,EAAA,EACnF,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAClBD,sBAAA,CAAA,aAAA,CAACE,aAAM,EAAA,EACL,IAAI,EAAC,QAAQ,EAAA,cAAA,EACC,MAAM,CAAC,KAAK,KAAK,QAAQ,EACvC,OAAO,EAAE,MAAM,CAAC,KAAK,KAAK,QAAQ,GAAG,SAAS,GAAG,SAAS,EAC1D,GAAG,EAAE,MAAM,CAAC,GAAG,EACf,OAAO,EAAE,MAAM,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EACrC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,SAAS,EAAE,MAAM,CAAC,KAAK,KAAK,QAAQ,GAAG,gCAAgC,GAAG,EAAE,EAAA,EAE3E,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACwB;;;;"}
+{"version":3,"file":"SegmentedControl.cjs","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Button } from '../Button';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport styles from './SegmentedControl.module.scss';\n\nimport { SegmentedControlProps } from './types';\n\nexport const SegmentedControl = ({\n  options,\n  selected,\n  className,\n  onChange,\n}: SegmentedControlProps) => (\n  <div className={buildClassnames([styles.container, className && `${className}-container`])}>\n    {options.map((option) => (\n      <Button\n        type=\"button\"\n        aria-pressed={option.value === selected}\n        variant={option.value === selected ? 'primary' : 'default'}\n        key={option.key}\n        onClick={() => onChange(option.value)}\n        disabled={option.disabled}\n        className={option.value === selected ? 'veeqo-components-active-button' : ''}\n      >\n        {option.label}\n      </Button>\n    ))}\n  </div>\n);\n"],"names":["React","buildClassnames","styles","Button"],"mappings":";;;;;;;;;;;AAQO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,GACc,MACtBA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,+BAAe,CAAC,CAACC,uBAAM,CAAC,SAAS,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,CAAC,CAAC,EAAA,EACvF,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAClBF,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EACL,IAAI,EAAC,QAAQ,EAAA,cAAA,EACC,MAAM,CAAC,KAAK,KAAK,QAAQ,EACvC,OAAO,EAAE,MAAM,CAAC,KAAK,KAAK,QAAQ,GAAG,SAAS,GAAG,SAAS,EAC1D,GAAG,EAAE,MAAM,CAAC,GAAG,EACf,OAAO,EAAE,MAAM,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EACrC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,SAAS,EAAE,MAAM,CAAC,KAAK,KAAK,QAAQ,GAAG,gCAAgC,GAAG,EAAE,EAAA,EAE3E,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACE;;;;"}

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -1,8 +1,9 @@
 import React__default from 'react';
 import { Button } from '../Button/Button.js';
-import { SegmentedControlContainer } from './styled.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import styles from './SegmentedControl.module.scss.js';
 
-const SegmentedControl = ({ options, selected, className, onChange, }) => (React__default.createElement(SegmentedControlContainer, { className: className ? `${className}-container` : undefined }, options.map((option) => (React__default.createElement(Button, { type: "button", "aria-pressed": option.value === selected, variant: option.value === selected ? 'primary' : 'default', key: option.key, onClick: () => onChange(option.value), disabled: option.disabled, className: option.value === selected ? 'veeqo-components-active-button' : '' }, option.label)))));
+const SegmentedControl = ({ options, selected, className, onChange, }) => (React__default.createElement("div", { className: buildClassnames([styles.container, className && `${className}-container`]) }, options.map((option) => (React__default.createElement(Button, { type: "button", "aria-pressed": option.value === selected, variant: option.value === selected ? 'primary' : 'default', key: option.key, onClick: () => onChange(option.value), disabled: option.disabled, className: option.value === selected ? 'veeqo-components-active-button' : '' }, option.label)))));
 
 export { SegmentedControl };
 //# sourceMappingURL=SegmentedControl.js.map

package/dist/components/SegmentedControl/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Button } from '../Button';\nimport { SegmentedControlContainer } from './styled';\n\nimport { SegmentedControlProps } from './types';\n\nexport const SegmentedControl = ({\n  options,\n  selected,\n  className,\n  onChange,\n}: SegmentedControlProps) => (\n  <SegmentedControlContainer className={className ? `${className}-container` : undefined}>\n    {options.map((option) => (\n      <Button\n        type=\"button\"\n        aria-pressed={option.value === selected}\n        variant={option.value === selected ? 'primary' : 'default'}\n        key={option.key}\n        onClick={() => onChange(option.value)}\n        disabled={option.disabled}\n        className={option.value === selected ? 'veeqo-components-active-button' : ''}\n      >\n        {option.label}\n      </Button>\n    ))}\n  </SegmentedControlContainer>\n);\n"],"names":["React"],"mappings":";;;;AAOO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,GACc,MACtBA,cAAA,CAAA,aAAA,CAAC,yBAAyB,EAAA,EAAC,SAAS,EAAE,SAAS,GAAG,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG,SAAS,EAAA,EACnF,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAClBA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,IAAI,EAAC,QAAQ,EAAA,cAAA,EACC,MAAM,CAAC,KAAK,KAAK,QAAQ,EACvC,OAAO,EAAE,MAAM,CAAC,KAAK,KAAK,QAAQ,GAAG,SAAS,GAAG,SAAS,EAC1D,GAAG,EAAE,MAAM,CAAC,GAAG,EACf,OAAO,EAAE,MAAM,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EACrC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,SAAS,EAAE,MAAM,CAAC,KAAK,KAAK,QAAQ,GAAG,gCAAgC,GAAG,EAAE,EAAA,EAE3E,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACwB;;;;"}
+{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Button } from '../Button';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport styles from './SegmentedControl.module.scss';\n\nimport { SegmentedControlProps } from './types';\n\nexport const SegmentedControl = ({\n  options,\n  selected,\n  className,\n  onChange,\n}: SegmentedControlProps) => (\n  <div className={buildClassnames([styles.container, className && `${className}-container`])}>\n    {options.map((option) => (\n      <Button\n        type=\"button\"\n        aria-pressed={option.value === selected}\n        variant={option.value === selected ? 'primary' : 'default'}\n        key={option.key}\n        onClick={() => onChange(option.value)}\n        disabled={option.disabled}\n        className={option.value === selected ? 'veeqo-components-active-button' : ''}\n      >\n        {option.label}\n      </Button>\n    ))}\n  </div>\n);\n"],"names":["React"],"mappings":";;;;;AAQO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,GACc,MACtBA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,CAAC,CAAC,EAAA,EACvF,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAClBA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,IAAI,EAAC,QAAQ,EAAA,cAAA,EACC,MAAM,CAAC,KAAK,KAAK,QAAQ,EACvC,OAAO,EAAE,MAAM,CAAC,KAAK,KAAK,QAAQ,GAAG,SAAS,GAAG,SAAS,EAC1D,GAAG,EAAE,MAAM,CAAC,GAAG,EACf,OAAO,EAAE,MAAM,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EACrC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,SAAS,EAAE,MAAM,CAAC,KAAK,KAAK,QAAQ,GAAG,gCAAgC,GAAG,EAAE,EAAA,EAE3E,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACE;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._container_bveir_1 {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: row;\n}\n._container_bveir_1 > button {\n  border-radius: 0;\n  box-shadow: none;\n}\n._container_bveir_1 > button:active {\n  background-color: var(--colors-neutral-grey-lightest);\n  border-color: var(--colors-neutral-grey-dark);\n  box-shadow: none;\n}\n._container_bveir_1 > button:focus {\n  box-shadow: 0 0 0 4px var(--colors-secondary-blue-light);\n  outline: 0;\n  z-index: 1;\n}\n._container_bveir_1 > .veeqo-components-active-button:active {\n  background-color: var(--colors-secondary-blue-dark);\n  border-color: var(--colors-secondary-blue-dark);\n}\n._container_bveir_1 > button:not(:first-child) {\n  border-left: none;\n}\n._container_bveir_1 > .veeqo-components-active-button + button {\n  border-left: 1px solid var(--colors-neutral-grey-dark);\n}\n._container_bveir_1 > button:first-child {\n  border-radius: 20px 0 0 20px;\n}\n._container_bveir_1 > button:last-child {\n  border-radius: 0 20px 20px 0;\n}");
+var styles = {"container":"_container_bveir_1"};
+
+module.exports = styles;
+//# sourceMappingURL=SegmentedControl.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.module.scss.cjs","sources":["../../../src/components/SegmentedControl/SegmentedControl.module.scss"],"sourcesContent":[".container {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: row;\n\n  > button {\n    border-radius: 0;\n    box-shadow: none;\n\n    &:active {\n      background-color: var(--colors-neutral-grey-lightest);\n      border-color: var(--colors-neutral-grey-dark);\n      box-shadow: none;\n    }\n\n    &:focus {\n      box-shadow: 0 0 0 4px var(--colors-secondary-blue-light);\n      outline: 0;\n      z-index: 1;\n    }\n  }\n\n  > :global(.veeqo-components-active-button) {\n    &:active {\n      background-color: var(--colors-secondary-blue-dark);\n      border-color: var(--colors-secondary-blue-dark);\n    }\n  }\n\n  > button:not(:first-child) {\n    border-left: none;\n  }\n\n  > :global(.veeqo-components-active-button) + button {\n    border-left: 1px solid var(--colors-neutral-grey-dark);\n  }\n\n  > button:first-child {\n    border-radius: 20px 0 0 20px;\n  }\n\n  > button:last-child {\n    border-radius: 0 20px 20px 0;\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,wiCAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._container_bveir_1 {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: row;\n}\n._container_bveir_1 > button {\n  border-radius: 0;\n  box-shadow: none;\n}\n._container_bveir_1 > button:active {\n  background-color: var(--colors-neutral-grey-lightest);\n  border-color: var(--colors-neutral-grey-dark);\n  box-shadow: none;\n}\n._container_bveir_1 > button:focus {\n  box-shadow: 0 0 0 4px var(--colors-secondary-blue-light);\n  outline: 0;\n  z-index: 1;\n}\n._container_bveir_1 > .veeqo-components-active-button:active {\n  background-color: var(--colors-secondary-blue-dark);\n  border-color: var(--colors-secondary-blue-dark);\n}\n._container_bveir_1 > button:not(:first-child) {\n  border-left: none;\n}\n._container_bveir_1 > .veeqo-components-active-button + button {\n  border-left: 1px solid var(--colors-neutral-grey-dark);\n}\n._container_bveir_1 > button:first-child {\n  border-radius: 20px 0 0 20px;\n}\n._container_bveir_1 > button:last-child {\n  border-radius: 0 20px 20px 0;\n}");
+var styles = {"container":"_container_bveir_1"};
+
+export { styles as default };
+//# sourceMappingURL=SegmentedControl.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.module.scss.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.module.scss"],"sourcesContent":[".container {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: row;\n\n  > button {\n    border-radius: 0;\n    box-shadow: none;\n\n    &:active {\n      background-color: var(--colors-neutral-grey-lightest);\n      border-color: var(--colors-neutral-grey-dark);\n      box-shadow: none;\n    }\n\n    &:focus {\n      box-shadow: 0 0 0 4px var(--colors-secondary-blue-light);\n      outline: 0;\n      z-index: 1;\n    }\n  }\n\n  > :global(.veeqo-components-active-button) {\n    &:active {\n      background-color: var(--colors-secondary-blue-dark);\n      border-color: var(--colors-secondary-blue-dark);\n    }\n  }\n\n  > button:not(:first-child) {\n    border-left: none;\n  }\n\n  > :global(.veeqo-components-active-button) + button {\n    border-left: 1px solid var(--colors-neutral-grey-dark);\n  }\n\n  > button:first-child {\n    border-radius: 20px 0 0 20px;\n  }\n\n  > button:last-child {\n    border-radius: 0 20px 20px 0;\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,wiCAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { Fragment } from 'react';\nimport { Selection } from 'react-aria-components';\nimport { Search } from '../Search';\nimport { Button } from '../Button';\n\nimport { GridList } from './components/OptionsContainers/GridList';\nimport { GridItemProps } from './components/GridItem/types';\nimport { SelectDropdownProps } from './types';\nimport { ListBox } from './components/OptionsContainers/ListBox';\nimport { Dropdown } from '../Dropdown';\nimport { buildClassnames } from '../../utils';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport { SelectedOption } from './components/SelectedOption';\n\nimport styles from './SelectDropdown.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\ntype SelectDropdownElementProps = Omit<SelectDropdownProps, 'onChange'> & {\n  isSelectOpen: boolean;\n  setIsSelectOpen: (isOpen: boolean) => void;\n  onSelectionChange: (keys: Selection) => void;\n  hasSection: boolean;\n};\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  disabled,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  headerSlot,\n  emptyStateSlot,\n  selectedSlot,\n  onSearchChange,\n  onSelectionChange,\n  topAction,\n  isSelectOpen,\n  setIsSelectOpen,\n  hasSection,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownElementProps) => {\n  const classNames = generateClassNames(className);\n\n  const selectedValues = getSelectedValues(options, hasSection, value);\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const hasRowAction = options.some(\n    (option) => 'onClickRowAction' in option && option.onClickRowAction,\n  );\n\n  return (\n    <Dropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, styles.dropdown, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      disabled={disabled}\n      renderCta={(buttonProps, anchorRef) => {\n        return (\n          <button\n            {...buttonProps}\n            type=\"button\"\n            ref={anchorRef}\n            className={buildClassnames([\n              className,\n              styles.dropdownTrigger,\n              formStyles.fullStyles,\n              formStyles.base,\n              hasError && formStyles.error,\n              compact && formStyles.compact,\n            ])}\n          >\n            {selectedSlot || (\n              <SelectedOption\n                placeholder={placeholder}\n                options={selectedValues}\n                selectionMode={selectionMode}\n              />\n            )}\n          </button>\n        );\n      }}\n    >\n      {headerSlot && <div className={styles.headerContainer}>{headerSlot}</div>}\n      {onSearchChange && (\n        <>\n          <Search className={styles.search} value={searchValue} onChange={onSearchChange} />\n          <hr className={styles.separator} />\n        </>\n      )}\n      {topAction && (\n        <Fragment key={topAction.label}>\n          <Button\n            className={styles.ctaButton}\n            key={topAction.label}\n            variant=\"flat\"\n            {...topAction}\n          />\n          <hr className={styles.separator} key={`separator-${topAction.label}`} />\n        </Fragment>\n      )}\n      {hasRowAction ? (\n        <GridList\n          id={id}\n          className={classNames.optionsContainer}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedBy={ariaDescribedBy}\n          selectionMode={selectionMode}\n          options={options as GridItemProps[]}\n          onSelectionChange={onSelectionChange}\n          selectedValues={selectedValues as GridItemProps[]}\n          isLoading={isLoading}\n          emptyStateSlot={emptyStateSlot}\n          {...otherProps}\n        />\n      ) : (\n        <ListBox\n          id={id}\n          className={classNames.optionsContainer}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedBy={ariaDescribedBy}\n          selectionMode={selectionMode}\n          options={options}\n          onSelectionChange={onSelectionChange}\n          selectedValues={selectedValues}\n          isLoading={isLoading}\n          emptyStateSlot={emptyStateSlot}\n          hasSection={hasSection}\n          {...otherProps}\n        />\n      )}\n      {actions?.map(({ label, ...actionProps }) => (\n        <Fragment key={label}>\n          <hr className={styles.separator} key={`separator-${label}`} />\n          <Button className={styles.ctaButton} variant=\"flat\" key={label} {...actionProps} />\n        </Fragment>\n      ))}\n    </Dropdown>\n  );\n};\n"],"names":["generateClassNames","getSelectedValues","React","Dropdown","buildClassnames","styles","formStyles","SelectedOption","Search","Fragment","Button","GridList","ListBox"],"mappings":"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"}
+{"version":3,"file":"SelectDropdown.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { Fragment } from 'react';\nimport { Selection } from 'react-aria-components';\nimport { Search } from '../Search';\nimport { Button } from '../Button';\n\nimport { GridList } from './components/OptionsContainers/GridList';\nimport { GridItemProps } from './components/GridItem/types';\nimport { SelectDropdownProps } from './types';\nimport { ListBox } from './components/OptionsContainers/ListBox';\nimport { ListItemProps } from './components/ListItem/types';\nimport { ListItemSectionProps } from './components/ListItemSection/ListItemSection';\nimport { Dropdown } from '../Dropdown';\nimport { buildClassnames } from '../../utils';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport { SelectedOption } from './components/SelectedOption';\n\nimport styles from './SelectDropdown.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\ntype SelectDropdownElementProps = Omit<SelectDropdownProps, 'onChange'> & {\n  isSelectOpen: boolean;\n  setIsSelectOpen: (isOpen: boolean) => void;\n  onSelectionChange: (keys: Selection) => void;\n  hasSection: boolean;\n};\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  disabled,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  headerSlot,\n  emptyStateSlot,\n  selectedSlot,\n  onSearchChange,\n  onSelectionChange,\n  topAction,\n  isSelectOpen,\n  setIsSelectOpen,\n  hasSection,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownElementProps) => {\n  const classNames = generateClassNames(className);\n\n  const selectedValues = getSelectedValues(options, hasSection, value);\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const hasRowAction = options.some(\n    (option) => 'onClickRowAction' in option && option.onClickRowAction,\n  );\n\n  return (\n    <Dropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, styles.dropdown, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      disabled={disabled}\n      renderCta={(buttonProps, anchorRef) => {\n        return (\n          <button\n            {...buttonProps}\n            type=\"button\"\n            ref={anchorRef}\n            className={buildClassnames([\n              className,\n              styles.dropdownTrigger,\n              formStyles.fullStyles,\n              formStyles.base,\n              hasError && formStyles.error,\n              compact && formStyles.compact,\n            ])}\n          >\n            {selectedSlot || (\n              <SelectedOption\n                placeholder={placeholder}\n                options={selectedValues}\n                selectionMode={selectionMode}\n              />\n            )}\n          </button>\n        );\n      }}\n    >\n      {headerSlot && <div className={styles.headerContainer}>{headerSlot}</div>}\n      {onSearchChange && (\n        <>\n          <Search className={styles.search} value={searchValue} onChange={onSearchChange} />\n          <hr className={styles.separator} />\n        </>\n      )}\n      {topAction && (\n        <Fragment key={topAction.label}>\n          <Button\n            className={styles.ctaButton}\n            key={topAction.label}\n            variant=\"flat\"\n            {...topAction}\n          />\n          <hr className={styles.separator} key={`separator-${topAction.label}`} />\n        </Fragment>\n      )}\n      {hasRowAction ? (\n        <GridList\n          id={id}\n          className={classNames.optionsContainer}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedBy={ariaDescribedBy}\n          selectionMode={selectionMode}\n          options={options as GridItemProps[]}\n          onSelectionChange={onSelectionChange}\n          selectedValues={selectedValues as GridItemProps[]}\n          isLoading={isLoading}\n          emptyStateSlot={emptyStateSlot}\n          {...otherProps}\n        />\n      ) : (\n        <ListBox\n          id={id}\n          className={classNames.optionsContainer}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedBy={ariaDescribedBy}\n          selectionMode={selectionMode}\n          options={options as (ListItemProps | ListItemSectionProps)[]}\n          onSelectionChange={onSelectionChange}\n          selectedValues={selectedValues as (ListItemProps | ListItemSectionProps)[]}\n          isLoading={isLoading}\n          emptyStateSlot={emptyStateSlot}\n          hasSection={hasSection}\n          {...otherProps}\n        />\n      )}\n      {actions?.map(({ label, ...actionProps }) => (\n        <Fragment key={label}>\n          <hr className={styles.separator} key={`separator-${label}`} />\n          <Button className={styles.ctaButton} variant=\"flat\" key={label} {...actionProps} />\n        </Fragment>\n      ))}\n    </Dropdown>\n  );\n};\n"],"names":["generateClassNames","getSelectedValues","React","Dropdown","buildClassnames","styles","formStyles","SelectedOption","Search","Fragment","Button","GridList","ListBox"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { Fragment } from 'react';\nimport { Selection } from 'react-aria-components';\nimport { Search } from '../Search';\nimport { Button } from '../Button';\n\nimport { GridList } from './components/OptionsContainers/GridList';\nimport { GridItemProps } from './components/GridItem/types';\nimport { SelectDropdownProps } from './types';\nimport { ListBox } from './components/OptionsContainers/ListBox';\nimport { Dropdown } from '../Dropdown';\nimport { buildClassnames } from '../../utils';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport { SelectedOption } from './components/SelectedOption';\n\nimport styles from './SelectDropdown.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\ntype SelectDropdownElementProps = Omit<SelectDropdownProps, 'onChange'> & {\n  isSelectOpen: boolean;\n  setIsSelectOpen: (isOpen: boolean) => void;\n  onSelectionChange: (keys: Selection) => void;\n  hasSection: boolean;\n};\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  disabled,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  headerSlot,\n  emptyStateSlot,\n  selectedSlot,\n  onSearchChange,\n  onSelectionChange,\n  topAction,\n  isSelectOpen,\n  setIsSelectOpen,\n  hasSection,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownElementProps) => {\n  const classNames = generateClassNames(className);\n\n  const selectedValues = getSelectedValues(options, hasSection, value);\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const hasRowAction = options.some(\n    (option) => 'onClickRowAction' in option && option.onClickRowAction,\n  );\n\n  return (\n    <Dropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, styles.dropdown, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      disabled={disabled}\n      renderCta={(buttonProps, anchorRef) => {\n        return (\n          <button\n            {...buttonProps}\n            type=\"button\"\n            ref={anchorRef}\n            className={buildClassnames([\n              className,\n              styles.dropdownTrigger,\n              formStyles.fullStyles,\n              formStyles.base,\n              hasError && formStyles.error,\n              compact && formStyles.compact,\n            ])}\n          >\n            {selectedSlot || (\n              <SelectedOption\n                placeholder={placeholder}\n                options={selectedValues}\n                selectionMode={selectionMode}\n              />\n            )}\n          </button>\n        );\n      }}\n    >\n      {headerSlot && <div className={styles.headerContainer}>{headerSlot}</div>}\n      {onSearchChange && (\n        <>\n          <Search className={styles.search} value={searchValue} onChange={onSearchChange} />\n          <hr className={styles.separator} />\n        </>\n      )}\n      {topAction && (\n        <Fragment key={topAction.label}>\n          <Button\n            className={styles.ctaButton}\n            key={topAction.label}\n            variant=\"flat\"\n            {...topAction}\n          />\n          <hr className={styles.separator} key={`separator-${topAction.label}`} />\n        </Fragment>\n      )}\n      {hasRowAction ? (\n        <GridList\n          id={id}\n          className={classNames.optionsContainer}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedBy={ariaDescribedBy}\n          selectionMode={selectionMode}\n          options={options as GridItemProps[]}\n          onSelectionChange={onSelectionChange}\n          selectedValues={selectedValues as GridItemProps[]}\n          isLoading={isLoading}\n          emptyStateSlot={emptyStateSlot}\n          {...otherProps}\n        />\n      ) : (\n        <ListBox\n          id={id}\n          className={classNames.optionsContainer}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedBy={ariaDescribedBy}\n          selectionMode={selectionMode}\n          options={options}\n          onSelectionChange={onSelectionChange}\n          selectedValues={selectedValues}\n          isLoading={isLoading}\n          emptyStateSlot={emptyStateSlot}\n          hasSection={hasSection}\n          {...otherProps}\n        />\n      )}\n      {actions?.map(({ label, ...actionProps }) => (\n        <Fragment key={label}>\n          <hr className={styles.separator} key={`separator-${label}`} />\n          <Button className={styles.ctaButton} variant=\"flat\" key={label} {...actionProps} />\n        </Fragment>\n      ))}\n    </Dropdown>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"SelectDropdown.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { Fragment } from 'react';\nimport { Selection } from 'react-aria-components';\nimport { Search } from '../Search';\nimport { Button } from '../Button';\n\nimport { GridList } from './components/OptionsContainers/GridList';\nimport { GridItemProps } from './components/GridItem/types';\nimport { SelectDropdownProps } from './types';\nimport { ListBox } from './components/OptionsContainers/ListBox';\nimport { ListItemProps } from './components/ListItem/types';\nimport { ListItemSectionProps } from './components/ListItemSection/ListItemSection';\nimport { Dropdown } from '../Dropdown';\nimport { buildClassnames } from '../../utils';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport { SelectedOption } from './components/SelectedOption';\n\nimport styles from './SelectDropdown.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\ntype SelectDropdownElementProps = Omit<SelectDropdownProps, 'onChange'> & {\n  isSelectOpen: boolean;\n  setIsSelectOpen: (isOpen: boolean) => void;\n  onSelectionChange: (keys: Selection) => void;\n  hasSection: boolean;\n};\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  disabled,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  headerSlot,\n  emptyStateSlot,\n  selectedSlot,\n  onSearchChange,\n  onSelectionChange,\n  topAction,\n  isSelectOpen,\n  setIsSelectOpen,\n  hasSection,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownElementProps) => {\n  const classNames = generateClassNames(className);\n\n  const selectedValues = getSelectedValues(options, hasSection, value);\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const hasRowAction = options.some(\n    (option) => 'onClickRowAction' in option && option.onClickRowAction,\n  );\n\n  return (\n    <Dropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, styles.dropdown, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      disabled={disabled}\n      renderCta={(buttonProps, anchorRef) => {\n        return (\n          <button\n            {...buttonProps}\n            type=\"button\"\n            ref={anchorRef}\n            className={buildClassnames([\n              className,\n              styles.dropdownTrigger,\n              formStyles.fullStyles,\n              formStyles.base,\n              hasError && formStyles.error,\n              compact && formStyles.compact,\n            ])}\n          >\n            {selectedSlot || (\n              <SelectedOption\n                placeholder={placeholder}\n                options={selectedValues}\n                selectionMode={selectionMode}\n              />\n            )}\n          </button>\n        );\n      }}\n    >\n      {headerSlot && <div className={styles.headerContainer}>{headerSlot}</div>}\n      {onSearchChange && (\n        <>\n          <Search className={styles.search} value={searchValue} onChange={onSearchChange} />\n          <hr className={styles.separator} />\n        </>\n      )}\n      {topAction && (\n        <Fragment key={topAction.label}>\n          <Button\n            className={styles.ctaButton}\n            key={topAction.label}\n            variant=\"flat\"\n            {...topAction}\n          />\n          <hr className={styles.separator} key={`separator-${topAction.label}`} />\n        </Fragment>\n      )}\n      {hasRowAction ? (\n        <GridList\n          id={id}\n          className={classNames.optionsContainer}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedBy={ariaDescribedBy}\n          selectionMode={selectionMode}\n          options={options as GridItemProps[]}\n          onSelectionChange={onSelectionChange}\n          selectedValues={selectedValues as GridItemProps[]}\n          isLoading={isLoading}\n          emptyStateSlot={emptyStateSlot}\n          {...otherProps}\n        />\n      ) : (\n        <ListBox\n          id={id}\n          className={classNames.optionsContainer}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedBy={ariaDescribedBy}\n          selectionMode={selectionMode}\n          options={options as (ListItemProps | ListItemSectionProps)[]}\n          onSelectionChange={onSelectionChange}\n          selectedValues={selectedValues as (ListItemProps | ListItemSectionProps)[]}\n          isLoading={isLoading}\n          emptyStateSlot={emptyStateSlot}\n          hasSection={hasSection}\n          {...otherProps}\n        />\n      )}\n      {actions?.map(({ label, ...actionProps }) => (\n        <Fragment key={label}>\n          <hr className={styles.separator} key={`separator-${label}`} />\n          <Button className={styles.ctaButton} variant=\"flat\" key={label} {...actionProps} />\n        </Fragment>\n      ))}\n    </Dropdown>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AA0BO,MAAM,cAAc,GAAG,CAAC,EAC7B,EAAE,EACF,SAAS,EACT,WAAW,GAAG,aAAa,EAC3B,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,OAAO,EACP,KAAK,EACL,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,UAAU,EACV,cAAc,EACd,YAAY,EACZ,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,YAAY,EACZ,eAAe,EACf,UAAU,EACV,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,GAAG,UAAU,EACc,KAAI;AAC/B,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;IAEhD,MAAM,cAAc,GAAG,iBAAiB,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,CAAC;IACpE,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ;AAEtD,IAAA,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAC/B,CAAC,MAAM,KAAK,kBAAkB,IAAI,MAAM,IAAI,MAAM,CAAC,gBAAgB,CACpE;IAED,QACEA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACP,EAAE,EAAE,CAAA,gBAAA,EAAmB,EAAE,CAAA,CAAE,EAC3B,SAAS,EAAE,eAAe,CAAC,CAAC,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,OAAO,EAAE,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,EAC7E,UAAU,EAAE,YAAY,EACxB,aAAa,EAAE,eAAe,EAC9B,cAAc,QACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,CAAC,WAAW,EAAE,SAAS,KAAI;AACpC,YAAA,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,WAAW,EACf,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,eAAe,CAAC;oBACzB,SAAS;AACT,oBAAA,MAAM,CAAC,eAAe;AACtB,oBAAA,UAAU,CAAC,UAAU;AACrB,oBAAA,UAAU,CAAC,IAAI;oBACf,QAAQ,IAAI,UAAU,CAAC,KAAK;oBAC5B,OAAO,IAAI,UAAU,CAAC,OAAO;iBAC9B,CAAC,EAAA,EAED,YAAY,KACXA,6BAAC,cAAc,EAAA,EACb,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,cAAc,EACvB,aAAa,EAAE,aAAa,EAAA,CAC5B,CACH,CACM;QAEb,CAAC,EAAA;QAEA,UAAU,IAAIA,sCAAK,SAAS,EAAE,MAAM,CAAC,eAAe,EAAA,EAAG,UAAU,CAAO;AACxE,QAAA,cAAc,KACbA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;AACE,YAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAA,CAAI;AAClF,YAAAA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,MAAM,CAAC,SAAS,EAAA,CAAI,CAClC,CACJ;QACA,SAAS,KACRA,cAAA,CAAA,aAAA,CAAC,QAAQ,IAAC,GAAG,EAAE,SAAS,CAAC,KAAK,EAAA;AAC5B,YAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,GAAG,EAAE,SAAS,CAAC,KAAK,EACpB,OAAO,EAAC,MAAM,EAAA,GACV,SAAS,EAAA,CACb;AACF,YAAAA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,GAAG,EAAE,CAAA,UAAA,EAAa,SAAS,CAAC,KAAK,CAAA,CAAE,EAAA,CAAI,CAC/D,CACZ;QACA,YAAY,IACXA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACP,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,UAAU,CAAC,gBAAgB,EACtC,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAA0B,EACnC,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,cAAiC,EACjD,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAAA,GAC1B,UAAU,EAAA,CACd,KAEFA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,UAAU,CAAC,gBAAgB,EACtC,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAmD,EAC5D,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,cAA0D,EAC1E,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EAAA,GAClB,UAAU,EAAA,CACd,CACH,EACA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA;AAAP,QAAA,OAAO,CAAE,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,MACtCA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,GAAG,EAAE,KAAK,EAAA;YAClBA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,GAAG,EAAE,CAAA,UAAA,EAAa,KAAK,CAAA,CAAE,EAAA,CAAI;YAC9DA,cAAA,CAAA,aAAA,CAAC,MAAM,IAAC,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,OAAO,EAAC,MAAM,EAAC,GAAG,EAAE,KAAK,EAAA,GAAM,WAAW,EAAA,CAAI,CAC1E,CACZ,CAAC,CACO;AAEf;;;;"}

package/dist/components/ShortcutKeys/ShortcutKeys.cjs

@@ -1,7 +1,8 @@
 'use strict';
 
 var React = require('react');
-var styled = require('./styled.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+var ShortcutKeys_module = require('./ShortcutKeys.module.scss.cjs');
 var utils = require('./utils.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -26,16 +27,16 @@ const ShortcutKeys = ({ shortcut, label, inverse = false, displayLabel = false,
     // Replace modifier keys with the corresponding UTF-16 character if available.
     const keysToRenderComponents = keysToRender.map((key) => {
         if (utils.ValidModifierKeysMap[key]) {
-            return (React__default.default.createElement(styled.Kbd, { key: `Key: ${key}`, "aria-label": utils.ValidModifierKeyssLabelMap[key] }, utils.ValidModifierKeysMap[key]));
+            return (React__default.default.createElement("kbd", { className: ShortcutKeys_module.kbd, key: `Key: ${key}`, "aria-label": utils.ValidModifierKeyssLabelMap[key] }, utils.ValidModifierKeysMap[key]));
         }
-        return React__default.default.createElement(styled.Kbd, { key: `Key: ${key}` }, key);
+        return (React__default.default.createElement("kbd", { className: ShortcutKeys_module.kbd, key: `Key: ${key}` }, key));
     });
-    // Combine the <Kbd /> components to sit inside a single <ShortcutKeysContainer /> component.
+    // Combine the <Kbd /> components to sit inside a single container.
     const shortcutElements = keysToRenderComponents.reduce((previousKbdElement, currentKbdElement) => (React__default.default.createElement(React__default.default.Fragment, null,
         previousKbdElement,
         "+",
         currentKbdElement)));
-    return (React__default.default.createElement(styled.ShortcutKeysContainer, { "aria-label": label, "$inverse": inverse, ...props },
+    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([ShortcutKeys_module.container, inverse && ShortcutKeys_module.inverse]), "aria-label": label, ...props },
         shortcutElements,
         " ",
         displayLabel ? React__default.default.createElement("span", null, label) : null));

package/dist/components/ShortcutKeys/ShortcutKeys.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutKeys.cjs","sources":["../../../src/components/ShortcutKeys/ShortcutKeys.tsx"],"sourcesContent":["import React from 'react';\nimport { ShortcutKeysContainer, Kbd } from './styled';\nimport { ValidModifierKeys, ShortcutKeysProps } from './types';\nimport { ValidModifierKeyssLabelMap, ValidModifierKeysMap } from './utils';\n\n/**\n * ShortcutKeys UI component\n *\n * Renders a keyboard shortcut string by splitting it on \"+\" and rendering each\n * key to a <kbd> component.\n *\n * Criteria for `shortcut` prop:\n * - ValidModifierKeys MUST always come before other keys e.g. `shift+a` is valid, `a+shift` is invalid\n * - If it's not a modifier key it must be a singular key e.g. `a`, `2` is valid and `a2` or `abcde` is invalid etc.\n * - A limit of 3 key combinations separated between the '+' symbol e.g. `shift+ctrl+a` is valid, `shift+ctrl+a+b` is invalid\n *\n */\nexport const ShortcutKeys = ({\n  shortcut,\n  label,\n  inverse = false,\n  displayLabel = false,\n  ...props\n}: ShortcutKeysProps) => {\n  // Split the keys into individual <Kbd /> components\n  const keysToRender = shortcut.split('+') as ValidModifierKeys[];\n\n  // Replace modifier keys with the corresponding UTF-16 character if available.\n  const keysToRenderComponents = keysToRender.map((key) => {\n    if (ValidModifierKeysMap[key]) {\n      return (\n        <Kbd key={`Key: ${key}`} aria-label={ValidModifierKeyssLabelMap[key]}>\n          {ValidModifierKeysMap[key]}\n        </Kbd>\n      );\n    }\n    return <Kbd key={`Key: ${key}`}>{key}</Kbd>;\n  });\n\n  // Combine the <Kbd /> components to sit inside a single <ShortcutKeysContainer /> component.\n  const shortcutElements = keysToRenderComponents.reduce(\n    (previousKbdElement, currentKbdElement) => (\n      <>\n        {previousKbdElement}+{currentKbdElement}\n      </>\n    ),\n  );\n\n  return (\n    <ShortcutKeysContainer aria-label={label} $inverse={inverse} {...props}>\n      {shortcutElements} {displayLabel ? <span>{label}</span> : null}\n    </ShortcutKeysContainer>\n  );\n};\n"],"names":["ValidModifierKeysMap","React","Kbd","ValidModifierKeyssLabelMap","ShortcutKeysContainer"],"mappings":";;;;;;;;;;AAKA;;;;;;;;;;;AAWG;MACU,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,KAAK,EACf,YAAY,GAAG,KAAK,EACpB,GAAG,KAAK,EACU,KAAI;;IAEtB,MAAM,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAwB;;IAG/D,MAAM,sBAAsB,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,KAAI;AACtD,QAAA,IAAIA,0BAAoB,CAAC,GAAG,CAAC,EAAE;YAC7B,QACEC,qCAACC,UAAG,EAAA,EAAC,GAAG,EAAE,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,EAAA,YAAA,EAAcC,gCAA0B,CAAC,GAAG,CAAC,EAAA,EACjEH,0BAAoB,CAAC,GAAG,CAAC,CACtB;AAET,QAAA;QACD,OAAOC,sBAAA,CAAA,aAAA,CAACC,UAAG,EAAA,EAAC,GAAG,EAAE,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,EAAA,EAAG,GAAG,CAAO;AAC7C,IAAA,CAAC,CAAC;;AAGF,IAAA,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,MAAM,CACpD,CAAC,kBAAkB,EAAE,iBAAiB,MACpCD,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;QACG,kBAAkB;;QAAG,iBAAiB,CACtC,CACJ,CACF;IAED,QACEA,qCAACG,4BAAqB,EAAA,EAAA,YAAA,EAAa,KAAK,EAAA,UAAA,EAAY,OAAO,KAAM,KAAK,EAAA;QACnE,gBAAgB;;AAAG,QAAA,YAAY,GAAGH,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,KAAK,CAAQ,GAAG,IAAI,CACxC;AAE5B;;;;"}
+{"version":3,"file":"ShortcutKeys.cjs","sources":["../../../src/components/ShortcutKeys/ShortcutKeys.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport styles from './ShortcutKeys.module.scss';\nimport { ValidModifierKeys, ShortcutKeysProps } from './types';\nimport { ValidModifierKeyssLabelMap, ValidModifierKeysMap } from './utils';\n\n/**\n * ShortcutKeys UI component\n *\n * Renders a keyboard shortcut string by splitting it on \"+\" and rendering each\n * key to a <kbd> component.\n *\n * Criteria for `shortcut` prop:\n * - ValidModifierKeys MUST always come before other keys e.g. `shift+a` is valid, `a+shift` is invalid\n * - If it's not a modifier key it must be a singular key e.g. `a`, `2` is valid and `a2` or `abcde` is invalid etc.\n * - A limit of 3 key combinations separated between the '+' symbol e.g. `shift+ctrl+a` is valid, `shift+ctrl+a+b` is invalid\n *\n */\nexport const ShortcutKeys = ({\n  shortcut,\n  label,\n  inverse = false,\n  displayLabel = false,\n  ...props\n}: ShortcutKeysProps) => {\n  // Split the keys into individual <Kbd /> components\n  const keysToRender = shortcut.split('+') as ValidModifierKeys[];\n\n  // Replace modifier keys with the corresponding UTF-16 character if available.\n  const keysToRenderComponents = keysToRender.map((key) => {\n    if (ValidModifierKeysMap[key]) {\n      return (\n        <kbd\n          className={styles.kbd}\n          key={`Key: ${key}`}\n          aria-label={ValidModifierKeyssLabelMap[key]}\n        >\n          {ValidModifierKeysMap[key]}\n        </kbd>\n      );\n    }\n    return (\n      <kbd className={styles.kbd} key={`Key: ${key}`}>\n        {key}\n      </kbd>\n    );\n  });\n\n  // Combine the <Kbd /> components to sit inside a single container.\n  const shortcutElements = keysToRenderComponents.reduce(\n    (previousKbdElement, currentKbdElement) => (\n      <>\n        {previousKbdElement}+{currentKbdElement}\n      </>\n    ),\n  );\n\n  return (\n    <div\n      className={buildClassnames([styles.container, inverse && styles.inverse])}\n      aria-label={label}\n      {...props}\n    >\n      {shortcutElements} {displayLabel ? <span>{label}</span> : null}\n    </div>\n  );\n};\n"],"names":["ValidModifierKeysMap","React","styles","ValidModifierKeyssLabelMap","buildClassnames"],"mappings":";;;;;;;;;;;AAMA;;;;;;;;;;;AAWG;MACU,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,KAAK,EACf,YAAY,GAAG,KAAK,EACpB,GAAG,KAAK,EACU,KAAI;;IAEtB,MAAM,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAwB;;IAG/D,MAAM,sBAAsB,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,KAAI;AACtD,QAAA,IAAIA,0BAAoB,CAAC,GAAG,CAAC,EAAE;YAC7B,QACEC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC,mBAAM,CAAC,GAAG,EACrB,GAAG,EAAE,CAAA,KAAA,EAAQ,GAAG,EAAE,EAAA,YAAA,EACNC,gCAA0B,CAAC,GAAG,CAAC,EAAA,EAE1CH,0BAAoB,CAAC,GAAG,CAAC,CACtB;AAET,QAAA;AACD,QAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,mBAAM,CAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,GAAG,CAAA,CAAE,IAC3C,GAAG,CACA;AAEV,IAAA,CAAC,CAAC;;AAGF,IAAA,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,MAAM,CACpD,CAAC,kBAAkB,EAAE,iBAAiB,MACpCD,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;QACG,kBAAkB;;QAAG,iBAAiB,CACtC,CACJ,CACF;IAED,QACEA,8CACE,SAAS,EAAEG,+BAAe,CAAC,CAACF,mBAAM,CAAC,SAAS,EAAE,OAAO,IAAIA,mBAAM,CAAC,OAAO,CAAC,CAAC,EAAA,YAAA,EAC7D,KAAK,EAAA,GACb,KAAK,EAAA;QAER,gBAAgB;;AAAG,QAAA,YAAY,GAAGD,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,KAAK,CAAQ,GAAG,IAAI,CAC1D;AAEV;;;;"}

package/dist/components/ShortcutKeys/ShortcutKeys.js

@@ -1,5 +1,6 @@
 import React__default from 'react';
-import { Kbd, ShortcutKeysContainer } from './styled.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import styles from './ShortcutKeys.module.scss.js';
 import { ValidModifierKeysMap, ValidModifierKeyssLabelMap } from './utils.js';
 
 /**
@@ -20,16 +21,16 @@ const ShortcutKeys = ({ shortcut, label, inverse = false, displayLabel = false,
     // Replace modifier keys with the corresponding UTF-16 character if available.
     const keysToRenderComponents = keysToRender.map((key) => {
         if (ValidModifierKeysMap[key]) {
-            return (React__default.createElement(Kbd, { key: `Key: ${key}`, "aria-label": ValidModifierKeyssLabelMap[key] }, ValidModifierKeysMap[key]));
+            return (React__default.createElement("kbd", { className: styles.kbd, key: `Key: ${key}`, "aria-label": ValidModifierKeyssLabelMap[key] }, ValidModifierKeysMap[key]));
         }
-        return React__default.createElement(Kbd, { key: `Key: ${key}` }, key);
+        return (React__default.createElement("kbd", { className: styles.kbd, key: `Key: ${key}` }, key));
     });
-    // Combine the <Kbd /> components to sit inside a single <ShortcutKeysContainer /> component.
+    // Combine the <Kbd /> components to sit inside a single container.
     const shortcutElements = keysToRenderComponents.reduce((previousKbdElement, currentKbdElement) => (React__default.createElement(React__default.Fragment, null,
         previousKbdElement,
         "+",
         currentKbdElement)));
-    return (React__default.createElement(ShortcutKeysContainer, { "aria-label": label, "$inverse": inverse, ...props },
+    return (React__default.createElement("div", { className: buildClassnames([styles.container, inverse && styles.inverse]), "aria-label": label, ...props },
         shortcutElements,
         " ",
         displayLabel ? React__default.createElement("span", null, label) : null));

package/dist/components/ShortcutKeys/ShortcutKeys.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutKeys.js","sources":["../../../src/components/ShortcutKeys/ShortcutKeys.tsx"],"sourcesContent":["import React from 'react';\nimport { ShortcutKeysContainer, Kbd } from './styled';\nimport { ValidModifierKeys, ShortcutKeysProps } from './types';\nimport { ValidModifierKeyssLabelMap, ValidModifierKeysMap } from './utils';\n\n/**\n * ShortcutKeys UI component\n *\n * Renders a keyboard shortcut string by splitting it on \"+\" and rendering each\n * key to a <kbd> component.\n *\n * Criteria for `shortcut` prop:\n * - ValidModifierKeys MUST always come before other keys e.g. `shift+a` is valid, `a+shift` is invalid\n * - If it's not a modifier key it must be a singular key e.g. `a`, `2` is valid and `a2` or `abcde` is invalid etc.\n * - A limit of 3 key combinations separated between the '+' symbol e.g. `shift+ctrl+a` is valid, `shift+ctrl+a+b` is invalid\n *\n */\nexport const ShortcutKeys = ({\n  shortcut,\n  label,\n  inverse = false,\n  displayLabel = false,\n  ...props\n}: ShortcutKeysProps) => {\n  // Split the keys into individual <Kbd /> components\n  const keysToRender = shortcut.split('+') as ValidModifierKeys[];\n\n  // Replace modifier keys with the corresponding UTF-16 character if available.\n  const keysToRenderComponents = keysToRender.map((key) => {\n    if (ValidModifierKeysMap[key]) {\n      return (\n        <Kbd key={`Key: ${key}`} aria-label={ValidModifierKeyssLabelMap[key]}>\n          {ValidModifierKeysMap[key]}\n        </Kbd>\n      );\n    }\n    return <Kbd key={`Key: ${key}`}>{key}</Kbd>;\n  });\n\n  // Combine the <Kbd /> components to sit inside a single <ShortcutKeysContainer /> component.\n  const shortcutElements = keysToRenderComponents.reduce(\n    (previousKbdElement, currentKbdElement) => (\n      <>\n        {previousKbdElement}+{currentKbdElement}\n      </>\n    ),\n  );\n\n  return (\n    <ShortcutKeysContainer aria-label={label} $inverse={inverse} {...props}>\n      {shortcutElements} {displayLabel ? <span>{label}</span> : null}\n    </ShortcutKeysContainer>\n  );\n};\n"],"names":["React"],"mappings":";;;;AAKA;;;;;;;;;;;AAWG;MACU,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,KAAK,EACf,YAAY,GAAG,KAAK,EACpB,GAAG,KAAK,EACU,KAAI;;IAEtB,MAAM,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAwB;;IAG/D,MAAM,sBAAsB,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,KAAI;AACtD,QAAA,IAAI,oBAAoB,CAAC,GAAG,CAAC,EAAE;YAC7B,QACEA,6BAAC,GAAG,EAAA,EAAC,GAAG,EAAE,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,EAAA,YAAA,EAAc,0BAA0B,CAAC,GAAG,CAAC,EAAA,EACjE,oBAAoB,CAAC,GAAG,CAAC,CACtB;AAET,QAAA;QACD,OAAOA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,GAAG,EAAE,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,EAAA,EAAG,GAAG,CAAO;AAC7C,IAAA,CAAC,CAAC;;AAGF,IAAA,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,MAAM,CACpD,CAAC,kBAAkB,EAAE,iBAAiB,MACpCA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;QACG,kBAAkB;;QAAG,iBAAiB,CACtC,CACJ,CACF;IAED,QACEA,6BAAC,qBAAqB,EAAA,EAAA,YAAA,EAAa,KAAK,EAAA,UAAA,EAAY,OAAO,KAAM,KAAK,EAAA;QACnE,gBAAgB;;AAAG,QAAA,YAAY,GAAGA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,KAAK,CAAQ,GAAG,IAAI,CACxC;AAE5B;;;;"}
+{"version":3,"file":"ShortcutKeys.js","sources":["../../../src/components/ShortcutKeys/ShortcutKeys.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport styles from './ShortcutKeys.module.scss';\nimport { ValidModifierKeys, ShortcutKeysProps } from './types';\nimport { ValidModifierKeyssLabelMap, ValidModifierKeysMap } from './utils';\n\n/**\n * ShortcutKeys UI component\n *\n * Renders a keyboard shortcut string by splitting it on \"+\" and rendering each\n * key to a <kbd> component.\n *\n * Criteria for `shortcut` prop:\n * - ValidModifierKeys MUST always come before other keys e.g. `shift+a` is valid, `a+shift` is invalid\n * - If it's not a modifier key it must be a singular key e.g. `a`, `2` is valid and `a2` or `abcde` is invalid etc.\n * - A limit of 3 key combinations separated between the '+' symbol e.g. `shift+ctrl+a` is valid, `shift+ctrl+a+b` is invalid\n *\n */\nexport const ShortcutKeys = ({\n  shortcut,\n  label,\n  inverse = false,\n  displayLabel = false,\n  ...props\n}: ShortcutKeysProps) => {\n  // Split the keys into individual <Kbd /> components\n  const keysToRender = shortcut.split('+') as ValidModifierKeys[];\n\n  // Replace modifier keys with the corresponding UTF-16 character if available.\n  const keysToRenderComponents = keysToRender.map((key) => {\n    if (ValidModifierKeysMap[key]) {\n      return (\n        <kbd\n          className={styles.kbd}\n          key={`Key: ${key}`}\n          aria-label={ValidModifierKeyssLabelMap[key]}\n        >\n          {ValidModifierKeysMap[key]}\n        </kbd>\n      );\n    }\n    return (\n      <kbd className={styles.kbd} key={`Key: ${key}`}>\n        {key}\n      </kbd>\n    );\n  });\n\n  // Combine the <Kbd /> components to sit inside a single container.\n  const shortcutElements = keysToRenderComponents.reduce(\n    (previousKbdElement, currentKbdElement) => (\n      <>\n        {previousKbdElement}+{currentKbdElement}\n      </>\n    ),\n  );\n\n  return (\n    <div\n      className={buildClassnames([styles.container, inverse && styles.inverse])}\n      aria-label={label}\n      {...props}\n    >\n      {shortcutElements} {displayLabel ? <span>{label}</span> : null}\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAMA;;;;;;;;;;;AAWG;MACU,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,KAAK,EACf,YAAY,GAAG,KAAK,EACpB,GAAG,KAAK,EACU,KAAI;;IAEtB,MAAM,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAwB;;IAG/D,MAAM,sBAAsB,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,KAAI;AACtD,QAAA,IAAI,oBAAoB,CAAC,GAAG,CAAC,EAAE;YAC7B,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,MAAM,CAAC,GAAG,EACrB,GAAG,EAAE,CAAA,KAAA,EAAQ,GAAG,EAAE,EAAA,YAAA,EACN,0BAA0B,CAAC,GAAG,CAAC,EAAA,EAE1C,oBAAoB,CAAC,GAAG,CAAC,CACtB;AAET,QAAA;AACD,QAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,GAAG,CAAA,CAAE,IAC3C,GAAG,CACA;AAEV,IAAA,CAAC,CAAC;;AAGF,IAAA,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,MAAM,CACpD,CAAC,kBAAkB,EAAE,iBAAiB,MACpCA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;QACG,kBAAkB;;QAAG,iBAAiB,CACtC,CACJ,CACF;IAED,QACEA,sCACE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,EAAA,YAAA,EAC7D,KAAK,EAAA,GACb,KAAK,EAAA;QAER,gBAAgB;;AAAG,QAAA,YAAY,GAAGA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,KAAK,CAAQ,GAAG,IAAI,CAC1D;AAEV;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._container_1lpdg_1 {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: var(--sizes-xs);\n  color: var(--kbd-text-color, var(--colors-neutral-ink-base));\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-size: var(--text-body-small-font-size);\n  line-height: var(--text-body-small-line-height);\n  font-weight: var(--text-body-small-font-weight);\n  text-decoration: var(--text-body-small-text-decoration);\n  letter-spacing: var(--text-body-small-letter-spacing);\n}\n\n._inverse_1lpdg_16 {\n  --kbd-text-color: #ffffff;\n}\n\n._kbd_1lpdg_20 {\n  box-sizing: border-box;\n  color: var(--kbd-text-color, var(--colors-neutral-ink-base));\n  display: grid;\n  place-items: center;\n  text-transform: capitalize;\n  border: 1px solid var(--kbd-text-color, var(--colors-neutral-ink-base));\n  border-radius: 3px;\n  padding: 1px 3px;\n  font-size: inherit;\n  line-height: inherit;\n  min-width: var(--sizes-5);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n}");
+var styles = {"container":"_container_1lpdg_1","inverse":"_inverse_1lpdg_16","kbd":"_kbd_1lpdg_20"};
+
+module.exports = styles;
+//# sourceMappingURL=ShortcutKeys.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShortcutKeys.module.scss.cjs","sources":["../../../src/components/ShortcutKeys/ShortcutKeys.module.scss"],"sourcesContent":[".container {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: var(--sizes-xs);\n  color: var(--kbd-text-color, var(--colors-neutral-ink-base));\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-size: var(--text-body-small-font-size);\n  line-height: var(--text-body-small-line-height);\n  font-weight: var(--text-body-small-font-weight);\n  text-decoration: var(--text-body-small-text-decoration);\n  letter-spacing: var(--text-body-small-letter-spacing);\n}\n\n.inverse {\n  --kbd-text-color: #ffffff;\n}\n\n.kbd {\n  box-sizing: border-box;\n  color: var(--kbd-text-color, var(--colors-neutral-ink-base));\n  display: grid;\n  place-items: center;\n  text-transform: capitalize;\n  border: 1px solid var(--kbd-text-color, var(--colors-neutral-ink-base));\n  border-radius: 3px;\n  padding: 1px 3px;\n  font-size: inherit;\n  line-height: inherit;\n  min-width: var(--sizes-5);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,8kCAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,KAAA,CAAA,eAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._container_1lpdg_1 {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: var(--sizes-xs);\n  color: var(--kbd-text-color, var(--colors-neutral-ink-base));\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-size: var(--text-body-small-font-size);\n  line-height: var(--text-body-small-line-height);\n  font-weight: var(--text-body-small-font-weight);\n  text-decoration: var(--text-body-small-text-decoration);\n  letter-spacing: var(--text-body-small-letter-spacing);\n}\n\n._inverse_1lpdg_16 {\n  --kbd-text-color: #ffffff;\n}\n\n._kbd_1lpdg_20 {\n  box-sizing: border-box;\n  color: var(--kbd-text-color, var(--colors-neutral-ink-base));\n  display: grid;\n  place-items: center;\n  text-transform: capitalize;\n  border: 1px solid var(--kbd-text-color, var(--colors-neutral-ink-base));\n  border-radius: 3px;\n  padding: 1px 3px;\n  font-size: inherit;\n  line-height: inherit;\n  min-width: var(--sizes-5);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n}");
+var styles = {"container":"_container_1lpdg_1","inverse":"_inverse_1lpdg_16","kbd":"_kbd_1lpdg_20"};
+
+export { styles as default };
+//# sourceMappingURL=ShortcutKeys.module.scss.js.map