@veeqo/ui 14.11.2 → 14.12.0-beta-1

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import React from 'react';\nimport { PaginationProps } from './types';\n\nimport 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":";;;;;;;;;;;;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,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;AAChF,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAClC,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;AACF,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAClC,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;YAC9BA,cAAA,CAAA,aAAA,CAAC,SAAS,IACR,SAAS,EAAE,MAAM,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,QAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,eAAe,EAAA,CAAI;AAErC,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAClC,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,MAAM,EAAA,EACL,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAClC,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 { 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;;;;"}

package/dist/components/Pagination/components.cjs

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

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 { 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;;;;"}
+{"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;;;;"}

package/dist/components/Pagination/components.js

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

package/dist/components/Pagination/styled.cjs

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

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

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

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

@@ -0,0 +1,317 @@
+/// <reference types="react" />
+export declare const PageLimitContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    alignItems?: ("baseline" | "center" | "flex-start" | "flex-end" | "stretch") | undefined;
+    justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly") | undefined;
+    gap?: keyof import("../../theme/modules/sizes").SizeScale | undefined;
+    flexWrap?: ("nowrap" | "wrap" | "wrap-reverse") | undefined;
+    flexGrow?: import("csstype").Property.FlexGrow | undefined;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const PaginationButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("../../hoc/withTokens").WithTokensProps & {
+    children?: import("react").ReactNode;
+    variant?: import("../Button/types").ButtonVariant | undefined;
+    size?: import("../Button/types").ButtonSize | undefined;
+    iconSlot?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    dropdown?: boolean | undefined;
+    loading?: boolean | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("../../hoc/withTokens").WithTokensProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+export declare const PageInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<{
+    rel?: string | undefined;
+    placeholder?: string | undefined;
+    form?: string | undefined;
+    slot?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+    title?: string | undefined;
+    pattern?: string | undefined;
+    list?: string | undefined;
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    'aria-activedescendant'?: string | undefined;
+    'aria-atomic'?: (boolean | "true" | "false") | undefined;
+    'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
+    'aria-busy'?: (boolean | "true" | "false") | undefined;
+    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-colcount'?: number | undefined;
+    'aria-colindex'?: number | undefined;
+    'aria-colspan'?: number | undefined;
+    'aria-controls'?: string | undefined;
+    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-details'?: string | undefined;
+    'aria-disabled'?: (boolean | "true" | "false") | undefined;
+    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    'aria-errormessage'?: string | undefined;
+    'aria-expanded'?: (boolean | "true" | "false") | undefined;
+    'aria-flowto'?: string | undefined;
+    'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    'aria-hidden'?: (boolean | "true" | "false") | undefined;
+    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    'aria-keyshortcuts'?: string | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-level'?: number | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined;
+    'aria-modal'?: (boolean | "true" | "false") | undefined;
+    'aria-multiline'?: (boolean | "true" | "false") | undefined;
+    'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+    'aria-orientation'?: "horizontal" | "vertical" | undefined;
+    'aria-owns'?: string | undefined;
+    'aria-placeholder'?: string | undefined;
+    'aria-posinset'?: number | undefined;
+    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-readonly'?: (boolean | "true" | "false") | undefined;
+    'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-required'?: (boolean | "true" | "false") | undefined;
+    'aria-roledescription'?: string | undefined;
+    'aria-rowcount'?: number | undefined;
+    'aria-rowindex'?: number | undefined;
+    'aria-rowspan'?: number | undefined;
+    'aria-selected'?: (boolean | "true" | "false") | undefined;
+    'aria-setsize'?: number | undefined;
+    'aria-sort'?: "other" | "none" | "ascending" | "descending" | undefined;
+    'aria-valuemax'?: number | undefined;
+    'aria-valuemin'?: number | undefined;
+    'aria-valuenow'?: number | undefined;
+    'aria-valuetext'?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: (import("react").ClipboardEventHandler<HTMLInputElement> & import("react").ClipboardEventHandler<HTMLTextAreaElement>) | undefined;
+    onCopyCapture?: (import("react").ClipboardEventHandler<HTMLInputElement> & import("react").ClipboardEventHandler<HTMLTextAreaElement>) | undefined;
+    onCut?: (import("react").ClipboardEventHandler<HTMLInputElement> & import("react").ClipboardEventHandler<HTMLTextAreaElement>) | undefined;
+    onCutCapture?: (import("react").ClipboardEventHandler<HTMLInputElement> & import("react").ClipboardEventHandler<HTMLTextAreaElement>) | undefined;
+    onPaste?: (import("react").ClipboardEventHandler<HTMLInputElement> & import("react").ClipboardEventHandler<HTMLTextAreaElement>) | undefined;
+    onPasteCapture?: (import("react").ClipboardEventHandler<HTMLInputElement> & import("react").ClipboardEventHandler<HTMLTextAreaElement>) | undefined;
+    onCompositionEnd?: (import("react").CompositionEventHandler<HTMLInputElement> & import("react").CompositionEventHandler<HTMLTextAreaElement>) | undefined;
+    onCompositionEndCapture?: (import("react").CompositionEventHandler<HTMLInputElement> & import("react").CompositionEventHandler<HTMLTextAreaElement>) | undefined;
+    onCompositionStart?: (import("react").CompositionEventHandler<HTMLInputElement> & import("react").CompositionEventHandler<HTMLTextAreaElement>) | undefined;
+    onCompositionStartCapture?: (import("react").CompositionEventHandler<HTMLInputElement> & import("react").CompositionEventHandler<HTMLTextAreaElement>) | undefined;
+    onCompositionUpdate?: (import("react").CompositionEventHandler<HTMLInputElement> & import("react").CompositionEventHandler<HTMLTextAreaElement>) | undefined;
+    onCompositionUpdateCapture?: (import("react").CompositionEventHandler<HTMLInputElement> & import("react").CompositionEventHandler<HTMLTextAreaElement>) | undefined;
+    onFocus?: (import("react").FocusEventHandler<HTMLInputElement> & import("react").FocusEventHandler<HTMLTextAreaElement>) | undefined;
+    onFocusCapture?: (import("react").FocusEventHandler<HTMLInputElement> & import("react").FocusEventHandler<HTMLTextAreaElement>) | undefined;
+    onBlur?: (import("react").FocusEventHandler<HTMLInputElement> & import("react").FocusEventHandler<HTMLTextAreaElement>) | undefined;
+    onBlurCapture?: (import("react").FocusEventHandler<HTMLInputElement> & import("react").FocusEventHandler<HTMLTextAreaElement>) | undefined;
+    onChangeCapture?: (import("react").FormEventHandler<HTMLInputElement> & import("react").FormEventHandler<HTMLTextAreaElement>) | undefined;
+    onBeforeInput?: (import("react").FormEventHandler<HTMLInputElement> & import("react").FormEventHandler<HTMLTextAreaElement>) | undefined;
+    onBeforeInputCapture?: (import("react").FormEventHandler<HTMLInputElement> & import("react").FormEventHandler<HTMLTextAreaElement>) | undefined;
+    onInput?: (import("react").FormEventHandler<HTMLInputElement> & import("react").FormEventHandler<HTMLTextAreaElement>) | undefined;
+    onInputCapture?: (import("react").FormEventHandler<HTMLInputElement> & import("react").FormEventHandler<HTMLTextAreaElement>) | undefined;
+    onReset?: (import("react").FormEventHandler<HTMLInputElement> & import("react").FormEventHandler<HTMLTextAreaElement>) | undefined;
+    onResetCapture?: (import("react").FormEventHandler<HTMLInputElement> & import("react").FormEventHandler<HTMLTextAreaElement>) | undefined;
+    onSubmit?: (import("react").FormEventHandler<HTMLInputElement> & import("react").FormEventHandler<HTMLTextAreaElement>) | undefined;
+    onSubmitCapture?: (import("react").FormEventHandler<HTMLInputElement> & import("react").FormEventHandler<HTMLTextAreaElement>) | undefined;
+    onInvalid?: (import("react").FormEventHandler<HTMLInputElement> & import("react").FormEventHandler<HTMLTextAreaElement>) | undefined;
+    onInvalidCapture?: (import("react").FormEventHandler<HTMLInputElement> & import("react").FormEventHandler<HTMLTextAreaElement>) | undefined;
+    onLoad?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onLoadCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onError?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onErrorCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onKeyDown?: (import("react").KeyboardEventHandler<HTMLInputElement> & import("react").KeyboardEventHandler<HTMLTextAreaElement>) | undefined;
+    onKeyDownCapture?: (import("react").KeyboardEventHandler<HTMLInputElement> & import("react").KeyboardEventHandler<HTMLTextAreaElement>) | undefined;
+    onKeyPress?: (import("react").KeyboardEventHandler<HTMLInputElement> & import("react").KeyboardEventHandler<HTMLTextAreaElement>) | undefined;
+    onKeyPressCapture?: (import("react").KeyboardEventHandler<HTMLInputElement> & import("react").KeyboardEventHandler<HTMLTextAreaElement>) | undefined;
+    onKeyUp?: (import("react").KeyboardEventHandler<HTMLInputElement> & import("react").KeyboardEventHandler<HTMLTextAreaElement>) | undefined;
+    onKeyUpCapture?: (import("react").KeyboardEventHandler<HTMLInputElement> & import("react").KeyboardEventHandler<HTMLTextAreaElement>) | undefined;
+    onAbort?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onAbortCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onCanPlay?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onCanPlayCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onCanPlayThrough?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onCanPlayThroughCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onDurationChange?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onDurationChangeCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onEmptied?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onEmptiedCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onEncrypted?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onEncryptedCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onEnded?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onEndedCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onLoadedData?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onLoadedDataCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onLoadedMetadata?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onLoadedMetadataCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onLoadStart?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onLoadStartCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onPause?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onPauseCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onPlay?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onPlayCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onPlaying?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onPlayingCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onProgress?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onProgressCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onRateChange?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onRateChangeCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onSeeked?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onSeekedCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onSeeking?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onSeekingCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onStalled?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onStalledCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onSuspend?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onSuspendCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onTimeUpdate?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onTimeUpdateCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onVolumeChange?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onVolumeChangeCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onWaiting?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onWaitingCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onAuxClick?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLTextAreaElement>) | undefined;
+    onAuxClickCapture?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLTextAreaElement>) | undefined;
+    onClick?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLTextAreaElement>) | undefined;
+    onClickCapture?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLTextAreaElement>) | undefined;
+    onContextMenu?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLTextAreaElement>) | undefined;
+    onContextMenuCapture?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLTextAreaElement>) | undefined;
+    onDoubleClick?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLTextAreaElement>) | undefined;
+    onDoubleClickCapture?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLTextAreaElement>) | undefined;
+    onDrag?: (import("react").DragEventHandler<HTMLInputElement> & import("react").DragEventHandler<HTMLTextAreaElement>) | undefined;
+    onDragCapture?: (import("react").DragEventHandler<HTMLInputElement> & import("react").DragEventHandler<HTMLTextAreaElement>) | undefined;
+    onDragEnd?: (import("react").DragEventHandler<HTMLInputElement> & import("react").DragEventHandler<HTMLTextAreaElement>) | undefined;
+    onDragEndCapture?: (import("react").DragEventHandler<HTMLInputElement> & import("react").DragEventHandler<HTMLTextAreaElement>) | undefined;
+    onDragEnter?: (import("react").DragEventHandler<HTMLInputElement> & import("react").DragEventHandler<HTMLTextAreaElement>) | undefined;
+    onDragEnterCapture?: (import("react").DragEventHandler<HTMLInputElement> & import("react").DragEventHandler<HTMLTextAreaElement>) | undefined;
+    onDragExit?: (import("react").DragEventHandler<HTMLInputElement> & import("react").DragEventHandler<HTMLTextAreaElement>) | undefined;
+    onDragExitCapture?: (import("react").DragEventHandler<HTMLInputElement> & import("react").DragEventHandler<HTMLTextAreaElement>) | undefined;
+    onDragLeave?: (import("react").DragEventHandler<HTMLInputElement> & import("react").DragEventHandler<HTMLTextAreaElement>) | undefined;
+    onDragLeaveCapture?: (import("react").DragEventHandler<HTMLInputElement> & import("react").DragEventHandler<HTMLTextAreaElement>) | undefined;
+    onDragOver?: (import("react").DragEventHandler<HTMLInputElement> & import("react").DragEventHandler<HTMLTextAreaElement>) | undefined;
+    onDragOverCapture?: (import("react").DragEventHandler<HTMLInputElement> & import("react").DragEventHandler<HTMLTextAreaElement>) | undefined;
+    onDragStart?: (import("react").DragEventHandler<HTMLInputElement> & import("react").DragEventHandler<HTMLTextAreaElement>) | undefined;
+    onDragStartCapture?: (import("react").DragEventHandler<HTMLInputElement> & import("react").DragEventHandler<HTMLTextAreaElement>) | undefined;
+    onDrop?: (import("react").DragEventHandler<HTMLInputElement> & import("react").DragEventHandler<HTMLTextAreaElement>) | undefined;
+    onDropCapture?: (import("react").DragEventHandler<HTMLInputElement> & import("react").DragEventHandler<HTMLTextAreaElement>) | undefined;
+    onMouseDown?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLTextAreaElement>) | undefined;
+    onMouseDownCapture?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLTextAreaElement>) | undefined;
+    onMouseEnter?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLTextAreaElement>) | undefined;
+    onMouseLeave?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLTextAreaElement>) | undefined;
+    onMouseMove?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLTextAreaElement>) | undefined;
+    onMouseMoveCapture?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLTextAreaElement>) | undefined;
+    onMouseOut?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLTextAreaElement>) | undefined;
+    onMouseOutCapture?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLTextAreaElement>) | undefined;
+    onMouseOver?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLTextAreaElement>) | undefined;
+    onMouseOverCapture?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLTextAreaElement>) | undefined;
+    onMouseUp?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLTextAreaElement>) | undefined;
+    onMouseUpCapture?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLTextAreaElement>) | undefined;
+    onSelect?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onSelectCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLTextAreaElement>) | undefined;
+    onTouchCancel?: (import("react").TouchEventHandler<HTMLInputElement> & import("react").TouchEventHandler<HTMLTextAreaElement>) | undefined;
+    onTouchCancelCapture?: (import("react").TouchEventHandler<HTMLInputElement> & import("react").TouchEventHandler<HTMLTextAreaElement>) | undefined;
+    onTouchEnd?: (import("react").TouchEventHandler<HTMLInputElement> & import("react").TouchEventHandler<HTMLTextAreaElement>) | undefined;
+    onTouchEndCapture?: (import("react").TouchEventHandler<HTMLInputElement> & import("react").TouchEventHandler<HTMLTextAreaElement>) | undefined;
+    onTouchMove?: (import("react").TouchEventHandler<HTMLInputElement> & import("react").TouchEventHandler<HTMLTextAreaElement>) | undefined;
+    onTouchMoveCapture?: (import("react").TouchEventHandler<HTMLInputElement> & import("react").TouchEventHandler<HTMLTextAreaElement>) | undefined;
+    onTouchStart?: (import("react").TouchEventHandler<HTMLInputElement> & import("react").TouchEventHandler<HTMLTextAreaElement>) | undefined;
+    onTouchStartCapture?: (import("react").TouchEventHandler<HTMLInputElement> & import("react").TouchEventHandler<HTMLTextAreaElement>) | undefined;
+    onPointerDown?: (import("react").PointerEventHandler<HTMLInputElement> & import("react").PointerEventHandler<HTMLTextAreaElement>) | undefined;
+    onPointerDownCapture?: (import("react").PointerEventHandler<HTMLInputElement> & import("react").PointerEventHandler<HTMLTextAreaElement>) | undefined;
+    onPointerMove?: (import("react").PointerEventHandler<HTMLInputElement> & import("react").PointerEventHandler<HTMLTextAreaElement>) | undefined;
+    onPointerMoveCapture?: (import("react").PointerEventHandler<HTMLInputElement> & import("react").PointerEventHandler<HTMLTextAreaElement>) | undefined;
+    onPointerUp?: (import("react").PointerEventHandler<HTMLInputElement> & import("react").PointerEventHandler<HTMLTextAreaElement>) | undefined;
+    onPointerUpCapture?: (import("react").PointerEventHandler<HTMLInputElement> & import("react").PointerEventHandler<HTMLTextAreaElement>) | undefined;
+    onPointerCancel?: (import("react").PointerEventHandler<HTMLInputElement> & import("react").PointerEventHandler<HTMLTextAreaElement>) | undefined;
+    onPointerCancelCapture?: (import("react").PointerEventHandler<HTMLInputElement> & import("react").PointerEventHandler<HTMLTextAreaElement>) | undefined;
+    onPointerEnter?: (import("react").PointerEventHandler<HTMLInputElement> & import("react").PointerEventHandler<HTMLTextAreaElement>) | undefined;
+    onPointerEnterCapture?: (import("react").PointerEventHandler<HTMLInputElement> & import("react").PointerEventHandler<HTMLTextAreaElement>) | undefined;
+    onPointerLeave?: (import("react").PointerEventHandler<HTMLInputElement> & import("react").PointerEventHandler<HTMLTextAreaElement>) | undefined;
+    onPointerLeaveCapture?: (import("react").PointerEventHandler<HTMLInputElement> & import("react").PointerEventHandler<HTMLTextAreaElement>) | undefined;
+    onPointerOver?: (import("react").PointerEventHandler<HTMLInputElement> & import("react").PointerEventHandler<HTMLTextAreaElement>) | undefined;
+    onPointerOverCapture?: (import("react").PointerEventHandler<HTMLInputElement> & import("react").PointerEventHandler<HTMLTextAreaElement>) | undefined;
+    onPointerOut?: (import("react").PointerEventHandler<HTMLInputElement> & import("react").PointerEventHandler<HTMLTextAreaElement>) | undefined;
+    onPointerOutCapture?: (import("react").PointerEventHandler<HTMLInputElement> & import("react").PointerEventHandler<HTMLTextAreaElement>) | undefined;
+    onGotPointerCapture?: (import("react").PointerEventHandler<HTMLInputElement> & import("react").PointerEventHandler<HTMLTextAreaElement>) | undefined;
+    onGotPointerCaptureCapture?: (import("react").PointerEventHandler<HTMLInputElement> & import("react").PointerEventHandler<HTMLTextAreaElement>) | undefined;
+    onLostPointerCapture?: (import("react").PointerEventHandler<HTMLInputElement> & import("react").PointerEventHandler<HTMLTextAreaElement>) | undefined;
+    onLostPointerCaptureCapture?: (import("react").PointerEventHandler<HTMLInputElement> & import("react").PointerEventHandler<HTMLTextAreaElement>) | undefined;
+    onScroll?: (import("react").UIEventHandler<HTMLInputElement> & import("react").UIEventHandler<HTMLTextAreaElement>) | undefined;
+    onScrollCapture?: (import("react").UIEventHandler<HTMLInputElement> & import("react").UIEventHandler<HTMLTextAreaElement>) | undefined;
+    onWheel?: (import("react").WheelEventHandler<HTMLInputElement> & import("react").WheelEventHandler<HTMLTextAreaElement>) | undefined;
+    onWheelCapture?: (import("react").WheelEventHandler<HTMLInputElement> & import("react").WheelEventHandler<HTMLTextAreaElement>) | undefined;
+    onAnimationStart?: (import("react").AnimationEventHandler<HTMLInputElement> & import("react").AnimationEventHandler<HTMLTextAreaElement>) | undefined;
+    onAnimationStartCapture?: (import("react").AnimationEventHandler<HTMLInputElement> & import("react").AnimationEventHandler<HTMLTextAreaElement>) | undefined;
+    onAnimationEnd?: (import("react").AnimationEventHandler<HTMLInputElement> & import("react").AnimationEventHandler<HTMLTextAreaElement>) | undefined;
+    onAnimationEndCapture?: (import("react").AnimationEventHandler<HTMLInputElement> & import("react").AnimationEventHandler<HTMLTextAreaElement>) | undefined;
+    onAnimationIteration?: (import("react").AnimationEventHandler<HTMLInputElement> & import("react").AnimationEventHandler<HTMLTextAreaElement>) | undefined;
+    onAnimationIterationCapture?: (import("react").AnimationEventHandler<HTMLInputElement> & import("react").AnimationEventHandler<HTMLTextAreaElement>) | undefined;
+    onTransitionEnd?: (import("react").TransitionEventHandler<HTMLInputElement> & import("react").TransitionEventHandler<HTMLTextAreaElement>) | undefined;
+    onTransitionEndCapture?: (import("react").TransitionEventHandler<HTMLInputElement> & import("react").TransitionEventHandler<HTMLTextAreaElement>) | undefined;
+    disabled?: boolean | undefined;
+    formAction?: string | undefined;
+    formEncType?: string | undefined;
+    formMethod?: string | undefined;
+    formNoValidate?: boolean | undefined;
+    formTarget?: string | undefined;
+    alt?: string | undefined;
+    autoComplete?: string | undefined;
+    accept?: string | undefined;
+    capture?: boolean | "user" | "environment" | undefined;
+    checked?: boolean | undefined;
+    enterKeyHint?: "search" | "previous" | "next" | "enter" | "done" | "go" | "send" | undefined;
+    multiple?: boolean | undefined;
+    cols?: number | undefined;
+    dirName?: string | undefined;
+    maxLength?: number | undefined;
+    minLength?: number | undefined;
+    src?: string | undefined;
+    height?: string | number | undefined;
+    max?: string | number | undefined;
+    min?: string | number | undefined;
+    name?: string | undefined;
+    width?: string | number | undefined;
+    wrap?: string | undefined;
+    step?: string | number | undefined;
+    readOnly?: boolean | undefined;
+    required?: boolean | undefined;
+    rows?: number | undefined;
+} & {
+    value?: string | undefined;
+    type?: import("../TextField").TextFieldType | undefined;
+    onChange?: ((value: string) => void) | undefined;
+    hasError?: boolean | undefined;
+    disabledMessage?: import("react").ReactNode;
+    size?: "base" | "sm" | undefined;
+    multiline?: boolean | undefined;
+} & import("react").RefAttributes<HTMLInputElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps, "ref"> & import("react").RefAttributes<unknown>>, any, {}, never>;

package/dist/components/Pagination/styled.js

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

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

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

package/dist/components/SegmentedControl/SegmentedControl.cjs

@@ -2,14 +2,13 @@
 
 var React = require('react');
 var Button = require('../Button/Button.cjs');
-var buildClassnames = require('../../utils/buildClassnames.cjs');
-var SegmentedControl_module = require('./SegmentedControl.module.scss.cjs');
+var styled = require('./styled.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("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)))));
+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)))));
 
 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 { 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;;;;"}
+{"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;;;;"}

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -1,9 +1,8 @@
 import React__default from 'react';
 import { Button } from '../Button/Button.js';
-import { buildClassnames } from '../../utils/buildClassnames.js';
-import styles from './SegmentedControl.module.scss.js';
+import { SegmentedControlContainer } from './styled.js';
 
-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)))));
+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)))));
 
 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 { 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;;;;"}
+{"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;;;;"}

package/dist/components/SegmentedControl/styled.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var styled = require('styled-components');
+var index = require('../../theme/index.cjs');
+var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const buttonBackgroundColor = index.theme.colors.neutral.grey.lightest;
+const buttonBorderColor = index.theme.colors.neutral.grey.dark;
+const activeButtonColor = index.theme.colors.secondary.blue.dark;
+const SegmentedControlContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--SegmentedControlContainer", componentId: "vui--s4yyqq" }) `display:flex;flex-direction:row;> button{border-radius:0;box-shadow:none;:active{background-color:${buttonBackgroundColor};border-color:${buttonBorderColor};box-shadow:none;}:focus{box-shadow:0 0 0 4px ${index.theme.colors.secondary.blue.light};outline:0;z-index:1;}}> .veeqo-components-active-button{:active{background-color:${activeButtonColor};border-color:${activeButtonColor};}}> button:not(:first-child){border-left:none;}> .veeqo-components-active-button + button{border-left:1px solid ${index.theme.colors.neutral.grey.dark};}> button:first-child{border-radius:20px 0px 0px 20px;}> button:last-child{border-radius:0px 20px 20px 0px;}`;
+
+exports.SegmentedControlContainer = SegmentedControlContainer;
+//# sourceMappingURL=styled.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/SegmentedControl/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\n\nimport { BaseContainer } from '../BaseContainer';\n\nconst buttonBackgroundColor = theme.colors.neutral.grey.lightest;\nconst buttonBorderColor = theme.colors.neutral.grey.dark;\n\nconst activeButtonColor = theme.colors.secondary.blue.dark;\n\nexport const SegmentedControlContainer = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n\n  > button {\n    border-radius: 0;\n    box-shadow: none;\n\n    :active {\n      background-color: ${buttonBackgroundColor};\n      border-color: ${buttonBorderColor};\n      box-shadow: none;\n    }\n\n    :focus {\n      box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n      outline: 0;\n      z-index: 1;\n    }\n  }\n\n  > .veeqo-components-active-button {\n    :active {\n      background-color: ${activeButtonColor};\n      border-color: ${activeButtonColor};\n    }\n  }\n\n  > button:not(:first-child) {\n    border-left: none;\n  }\n\n  > .veeqo-components-active-button + button {\n    border-left: 1px solid ${theme.colors.neutral.grey.dark};\n  }\n\n  > button:first-child {\n    border-radius: 20px 0px 0px 20px;\n  }\n\n  > button:last-child {\n    border-radius: 0px 20px 20px 0px;\n  }\n`;\n"],"names":["theme","styled","BaseContainer"],"mappings":";;;;;;;;;;AAKA,MAAM,qBAAqB,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAChE,MAAM,iBAAiB,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAExD,MAAM,iBAAiB,GAAGA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAEnD,MAAM,yBAAyB,GAAGC,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gCAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,kGAAA,EASpC,qBAAqB,iBACzB,iBAAiB,CAAA,8CAAA,EAKTF,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,kFAAA,EAQrC,iBAAiB,CAAA,cAAA,EACrB,iBAAiB,CAAA,iHAAA,EASVA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SegmentedControlContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/dist/components/SegmentedControl/styled.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { theme } from '../../theme/index.js';
+import { BaseContainer } from '../BaseContainer/BaseContainer.js';
+
+const buttonBackgroundColor = theme.colors.neutral.grey.lightest;
+const buttonBorderColor = theme.colors.neutral.grey.dark;
+const activeButtonColor = theme.colors.secondary.blue.dark;
+const SegmentedControlContainer = styled(BaseContainer).withConfig({ displayName: "vui--SegmentedControlContainer", componentId: "vui--s4yyqq" }) `display:flex;flex-direction:row;> button{border-radius:0;box-shadow:none;:active{background-color:${buttonBackgroundColor};border-color:${buttonBorderColor};box-shadow:none;}:focus{box-shadow:0 0 0 4px ${theme.colors.secondary.blue.light};outline:0;z-index:1;}}> .veeqo-components-active-button{:active{background-color:${activeButtonColor};border-color:${activeButtonColor};}}> button:not(:first-child){border-left:none;}> .veeqo-components-active-button + button{border-left:1px solid ${theme.colors.neutral.grey.dark};}> button:first-child{border-radius:20px 0px 0px 20px;}> button:last-child{border-radius:0px 20px 20px 0px;}`;
+
+export { SegmentedControlContainer };
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../src/components/SegmentedControl/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\n\nimport { BaseContainer } from '../BaseContainer';\n\nconst buttonBackgroundColor = theme.colors.neutral.grey.lightest;\nconst buttonBorderColor = theme.colors.neutral.grey.dark;\n\nconst activeButtonColor = theme.colors.secondary.blue.dark;\n\nexport const SegmentedControlContainer = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n\n  > button {\n    border-radius: 0;\n    box-shadow: none;\n\n    :active {\n      background-color: ${buttonBackgroundColor};\n      border-color: ${buttonBorderColor};\n      box-shadow: none;\n    }\n\n    :focus {\n      box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n      outline: 0;\n      z-index: 1;\n    }\n  }\n\n  > .veeqo-components-active-button {\n    :active {\n      background-color: ${activeButtonColor};\n      border-color: ${activeButtonColor};\n    }\n  }\n\n  > button:not(:first-child) {\n    border-left: none;\n  }\n\n  > .veeqo-components-active-button + button {\n    border-left: 1px solid ${theme.colors.neutral.grey.dark};\n  }\n\n  > button:first-child {\n    border-radius: 20px 0px 0px 20px;\n  }\n\n  > button:last-child {\n    border-radius: 0px 20px 20px 0px;\n  }\n`;\n"],"names":[],"mappings":";;;;AAKA,MAAM,qBAAqB,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAChE,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAExD,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAEnD,MAAM,yBAAyB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gCAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,kGAAA,EASpC,qBAAqB,iBACzB,iBAAiB,CAAA,8CAAA,EAKT,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,kFAAA,EAQrC,iBAAiB,CAAA,cAAA,EACrB,iBAAiB,CAAA,iHAAA,EASV,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}