@mrshmllw/smores-react 10.7.0-crumbs-feature-vite-bundling.1 → 10.7.0

package/dist/Logo/Logo.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from '../Box';
+const typeColorScheme = {
+    positive1: {
+        text: '#292924',
+        logo: { body: '#FF88C8', eyes: '#F8F2EA', pupils: '#292924' },
+    },
+    positive2: {
+        text: '#292924',
+        logo: { body: '#292924', eyes: '#F8F2EA', pupils: '#292924' },
+    },
+    negative1: {
+        text: '#F8F2EA',
+        logo: { body: '#FF88C8', eyes: '#F8F2EA', pupils: '#292924' },
+    },
+};
+export const Logo = ({ type = 'positive1', showText = true, small = false, }) => {
+    const viewBox = showText ? '0 0 608 66' : '0 0 84 66';
+    const size = small ? '16px' : '32px';
+    const getTypeColorScheme = typeColorScheme[type];
+    return (React.createElement(Box, { flex: true, alignItems: "center" },
+        React.createElement(LogoContainer, { size: size },
+            React.createElement("svg", { height: "100%", viewBox: viewBox, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                React.createElement("g", { clipPath: "url(#clip0_5259_85945)" },
+                    showText && (React.createElement(React.Fragment, null,
+                        React.createElement("path", { d: "M247.013 49.8876H259.732C259.886 53.0921 261.89 54.8131 264.358 54.8131C266.67 54.8131 268.136 53.4037 268.136 51.6085C268.136 48.9492 266.439 48.1666 259.655 46.5273C253.102 44.9621 247.244 40.5855 247.244 32.1402C247.244 23.695 253.873 17.5974 263.74 17.5974C273.606 17.5974 279.699 23.3833 280.39 32.6892H267.978C267.748 29.7183 265.974 28.1531 263.817 28.1531C261.429 28.1531 260.115 29.6404 260.115 31.3577C260.115 33.9391 261.736 34.7179 268.52 36.5168C275.534 38.3936 280.931 43.0075 280.931 50.5923C280.931 59.8981 274.148 65.4466 264.281 65.4466C254.415 65.4466 247.707 59.7385 247.013 49.8876Z", fill: getTypeColorScheme.text }),
+                        React.createElement("path", { d: "M159.563 37.4106V64.5082H145.63V37.5663C145.63 33.1304 143.593 30.4785 140.185 30.4785C136.778 30.4785 134.582 33.0636 134.582 37.5663V64.5082H120.649V37.5663C120.649 33.1304 118.612 30.4785 115.204 30.4785C111.795 30.4785 109.605 33.0636 109.605 37.5663V64.5082H95.6683V37.4106C95.6683 25.004 102.971 17.5973 115.204 17.5973C120.123 17.5973 124.325 19.2589 127.693 22.5302C131.064 19.2589 135.266 17.5973 140.185 17.5973C152.318 17.5973 159.563 25.004 159.563 37.4106Z", fill: getTypeColorScheme.text }),
+                        React.createElement("path", { d: "M395.439 37.4106V64.5082H381.506V37.5663C381.506 33.1304 379.469 30.4785 376.061 30.4785C372.652 30.4785 370.459 33.0636 370.459 37.5663V64.5082H356.526V37.5663C356.526 33.1304 354.488 30.4785 351.08 30.4785C347.671 30.4785 345.481 33.0636 345.481 37.5663V64.5082H331.544V37.4106C331.544 25.004 338.847 17.5973 351.08 17.5973C355.999 17.5973 360.201 19.2589 363.568 22.5302C366.941 19.2589 371.143 17.5973 376.061 17.5973C388.195 17.5973 395.439 25.004 395.439 37.4106Z", fill: getTypeColorScheme.text }),
+                        React.createElement("path", { d: "M230.772 24.1661V18.5321H218.127V64.5083H231.387V45.6669C231.387 32.5557 238.283 31.2502 243.353 31.2093V17.9943C237.443 18.1463 233.457 20.4607 230.772 24.1661Z", fill: getTypeColorScheme.text }),
+                        React.createElement("path", { d: "M325.956 35.0331V64.5083H312.389V37.4551C312.389 32.9969 309.997 30.4192 306.066 30.4192C302.058 30.4192 299.435 33.0006 299.435 37.4551V64.5083H285.868V6.74377H299.435V20.8019C301.828 18.6915 304.987 17.5973 308.688 17.5973C318.478 17.5973 325.956 24.2437 325.956 35.0331Z", fill: getTypeColorScheme.text }),
+                        React.createElement("path", { d: "M454.232 64.5083V6.74377H467.8V64.5083H454.232Z", fill: getTypeColorScheme.text }),
+                        React.createElement("path", { d: "M474.376 64.5083V6.74377H487.943V64.5083H474.376Z", fill: getTypeColorScheme.text }),
+                        React.createElement("path", { d: "M492.697 41.5203C492.697 27.7601 503.029 17.5938 516.596 17.5938C530.163 17.5938 540.494 27.76 540.494 41.5203C540.494 55.4362 530.163 65.4468 516.596 65.4468C503.029 65.4468 492.697 55.3621 492.697 41.5203ZM527.08 41.5203C527.08 34.7181 522.531 30.182 516.596 30.182C510.583 30.182 506.034 34.8738 506.034 41.5203C506.034 48.0888 510.583 52.7028 516.596 52.7028C522.609 52.7028 527.08 48.0888 527.08 41.5203Z", fill: getTypeColorScheme.text }),
+                        React.createElement("path", { d: "M199.117 18.5321V21.8183C195.881 18.9253 191.869 17.5938 187.089 17.5938C174.137 17.5938 164.193 27.76 164.193 41.5203C164.193 55.2805 174.137 65.4504 187.089 65.4504C192.334 65.4504 196.188 63.8853 199.117 61.226V64.5083L211.917 64.5121V18.5321H199.117ZM188.523 52.6805C182.357 52.6805 177.596 47.933 177.596 41.2829C177.596 34.6327 182.357 29.8852 188.523 29.8852C194.689 29.8852 199.526 34.6327 199.526 41.2829C199.526 47.933 194.765 52.6805 188.523 52.6805Z", fill: getTypeColorScheme.text }),
+                        React.createElement("path", { d: "M434.858 18.5321V21.8183C431.622 18.9253 427.61 17.5938 422.83 17.5938C409.877 17.5938 399.934 27.76 399.934 41.5203C399.934 55.2805 409.877 65.4504 422.83 65.4504C428.075 65.4504 431.929 63.8853 434.858 61.226V64.5083H447.658V18.5321H434.858ZM424.264 52.6805C418.098 52.6805 413.336 47.933 413.336 41.2829C413.336 34.6327 418.098 29.8852 424.264 29.8852C430.43 29.8852 435.267 34.6327 435.267 41.2829C435.267 47.933 430.506 52.6805 424.264 52.6805Z", fill: getTypeColorScheme.text }),
+                        React.createElement("path", { d: "M607.838 18.5321L599.375 54.1084C597.678 61.1443 594.673 65.4467 588.66 65.4467C582.572 65.4467 579.719 61.1443 578.099 53.9527L574.091 36.0458L570.313 53.9527C568.77 61.1443 565.84 65.4467 559.752 65.4467C553.739 65.4467 550.81 61.1443 549.114 54.1084L540.637 18.5321H554.128L560.677 51.3749L565.998 26.1206C566.847 21.9777 569.469 18.3021 574.479 18.3021C579.489 18.3021 582.264 22.0556 583.112 26.1206L588.277 51.6865L594.888 18.5321H607.838Z", fill: getTypeColorScheme.text }))),
+                    React.createElement("path", { d: "M81.6428 30.1618C81.2228 17.1642 70.7568 6.7414 57.6748 6.7414C53.4927 6.7414 49.5602 7.80904 46.134 9.68544C41.3829 3.78048 34.0964 0 25.9255 0C11.6069 0 0.518029 11.0143 0.084483 25.2721C0.0715362 25.6981 0.00127536 27.1551 0.00127536 27.4443L0 64.5082H81.7317V32.3105C81.7317 32.3105 81.6642 30.8233 81.6428 30.1618Z", fill: getTypeColorScheme.logo.body }),
+                    React.createElement("path", { d: "M43.2846 30.7942C43.2846 36.2136 38.7836 40.5805 33.316 40.3665C28.3864 40.1756 24.3075 36.0922 24.1227 31.1586C23.914 25.7045 28.2882 21.2104 33.7037 21.2104C39.1191 21.2104 43.2846 25.4963 43.2846 30.7884", fill: getTypeColorScheme.logo.eyes }),
+                    React.createElement("path", { d: "M43.2848 30.7923C43.2848 33.7196 40.9123 36.0854 37.9901 36.0855C35.0675 36.0855 32.6954 33.6509 32.6954 30.7923C32.6954 27.9338 35.0675 25.4991 37.9901 25.4991C40.9123 25.4991 43.2848 27.8708 43.2848 30.7923Z", fill: getTypeColorScheme.logo.pupils }),
+                    React.createElement("path", { d: "M67.2549 30.7942C67.2549 36.2136 62.7538 40.5805 57.2863 40.3665C52.3567 40.1756 48.2778 36.0922 48.093 31.1586C47.8843 25.7045 52.2584 21.2104 57.6739 21.2104C63.0894 21.2104 67.2549 25.4963 67.2549 30.7884", fill: getTypeColorScheme.logo.eyes }),
+                    React.createElement("path", { d: "M67.255 30.7923C67.255 33.7196 64.8825 36.0854 61.9603 36.0855C59.0377 36.0855 56.6656 33.6509 56.6656 30.7923C56.6656 27.9338 59.0377 25.4991 61.9603 25.4991C64.8825 25.4991 67.255 27.8708 67.255 30.7923Z", fill: getTypeColorScheme.logo.pupils })),
+                React.createElement("defs", null,
+                    React.createElement("clipPath", { id: "clip0_5259_85945" },
+                        React.createElement("rect", { width: "607.837", height: "65.4504", fill: "white" })))))));
+};
+const LogoContainer = styled.span `
+  height: 32px;
+
+  @media (max-width: 768px) {
+    display: flex;
+    height: 22px;
+  }
+`;
+//# sourceMappingURL=Logo.js.map

package/dist/Logo/Logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.js","sourceRoot":"","sources":["../../src/Logo/Logo.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../Box'\n\nconst typeColorScheme = {\n  positive1: {\n    text: '#292924',\n    logo: { body: '#FF88C8', eyes: '#F8F2EA', pupils: '#292924' },\n  },\n  positive2: {\n    text: '#292924',\n    logo: { body: '#292924', eyes: '#F8F2EA', pupils: '#292924' },\n  },\n  negative1: {\n    text: '#F8F2EA',\n    logo: { body: '#FF88C8', eyes: '#F8F2EA', pupils: '#292924' },\n  },\n}\n\ntype LogoType = keyof typeof typeColorScheme\n\nexport type LogoProps = {\n  type?: LogoType\n  showText?: boolean\n  small?: boolean\n}\n\nexport const Logo: FC<LogoProps> = ({\n  type = 'positive1',\n  showText = true,\n  small = false,\n}) => {\n  const viewBox = showText ? '0 0 608 66' : '0 0 84 66'\n  const size = small ? '16px' : '32px'\n\n  const getTypeColorScheme = typeColorScheme[type]\n\n  return (\n    <Box flex alignItems=\"center\">\n      <LogoContainer size={size}>\n        <svg\n          height=\"100%\"\n          viewBox={viewBox}\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <g clipPath=\"url(#clip0_5259_85945)\">\n            {showText && (\n              <>\n                <path\n                  d=\"M247.013 49.8876H259.732C259.886 53.0921 261.89 54.8131 264.358 54.8131C266.67 54.8131 268.136 53.4037 268.136 51.6085C268.136 48.9492 266.439 48.1666 259.655 46.5273C253.102 44.9621 247.244 40.5855 247.244 32.1402C247.244 23.695 253.873 17.5974 263.74 17.5974C273.606 17.5974 279.699 23.3833 280.39 32.6892H267.978C267.748 29.7183 265.974 28.1531 263.817 28.1531C261.429 28.1531 260.115 29.6404 260.115 31.3577C260.115 33.9391 261.736 34.7179 268.52 36.5168C275.534 38.3936 280.931 43.0075 280.931 50.5923C280.931 59.8981 274.148 65.4466 264.281 65.4466C254.415 65.4466 247.707 59.7385 247.013 49.8876Z\"\n                  fill={getTypeColorScheme.text}\n                />\n                <path\n                  d=\"M159.563 37.4106V64.5082H145.63V37.5663C145.63 33.1304 143.593 30.4785 140.185 30.4785C136.778 30.4785 134.582 33.0636 134.582 37.5663V64.5082H120.649V37.5663C120.649 33.1304 118.612 30.4785 115.204 30.4785C111.795 30.4785 109.605 33.0636 109.605 37.5663V64.5082H95.6683V37.4106C95.6683 25.004 102.971 17.5973 115.204 17.5973C120.123 17.5973 124.325 19.2589 127.693 22.5302C131.064 19.2589 135.266 17.5973 140.185 17.5973C152.318 17.5973 159.563 25.004 159.563 37.4106Z\"\n                  fill={getTypeColorScheme.text}\n                />\n                <path\n                  d=\"M395.439 37.4106V64.5082H381.506V37.5663C381.506 33.1304 379.469 30.4785 376.061 30.4785C372.652 30.4785 370.459 33.0636 370.459 37.5663V64.5082H356.526V37.5663C356.526 33.1304 354.488 30.4785 351.08 30.4785C347.671 30.4785 345.481 33.0636 345.481 37.5663V64.5082H331.544V37.4106C331.544 25.004 338.847 17.5973 351.08 17.5973C355.999 17.5973 360.201 19.2589 363.568 22.5302C366.941 19.2589 371.143 17.5973 376.061 17.5973C388.195 17.5973 395.439 25.004 395.439 37.4106Z\"\n                  fill={getTypeColorScheme.text}\n                />\n                <path\n                  d=\"M230.772 24.1661V18.5321H218.127V64.5083H231.387V45.6669C231.387 32.5557 238.283 31.2502 243.353 31.2093V17.9943C237.443 18.1463 233.457 20.4607 230.772 24.1661Z\"\n                  fill={getTypeColorScheme.text}\n                />\n                <path\n                  d=\"M325.956 35.0331V64.5083H312.389V37.4551C312.389 32.9969 309.997 30.4192 306.066 30.4192C302.058 30.4192 299.435 33.0006 299.435 37.4551V64.5083H285.868V6.74377H299.435V20.8019C301.828 18.6915 304.987 17.5973 308.688 17.5973C318.478 17.5973 325.956 24.2437 325.956 35.0331Z\"\n                  fill={getTypeColorScheme.text}\n                />\n                <path\n                  d=\"M454.232 64.5083V6.74377H467.8V64.5083H454.232Z\"\n                  fill={getTypeColorScheme.text}\n                />\n                <path\n                  d=\"M474.376 64.5083V6.74377H487.943V64.5083H474.376Z\"\n                  fill={getTypeColorScheme.text}\n                />\n                <path\n                  d=\"M492.697 41.5203C492.697 27.7601 503.029 17.5938 516.596 17.5938C530.163 17.5938 540.494 27.76 540.494 41.5203C540.494 55.4362 530.163 65.4468 516.596 65.4468C503.029 65.4468 492.697 55.3621 492.697 41.5203ZM527.08 41.5203C527.08 34.7181 522.531 30.182 516.596 30.182C510.583 30.182 506.034 34.8738 506.034 41.5203C506.034 48.0888 510.583 52.7028 516.596 52.7028C522.609 52.7028 527.08 48.0888 527.08 41.5203Z\"\n                  fill={getTypeColorScheme.text}\n                />\n                <path\n                  d=\"M199.117 18.5321V21.8183C195.881 18.9253 191.869 17.5938 187.089 17.5938C174.137 17.5938 164.193 27.76 164.193 41.5203C164.193 55.2805 174.137 65.4504 187.089 65.4504C192.334 65.4504 196.188 63.8853 199.117 61.226V64.5083L211.917 64.5121V18.5321H199.117ZM188.523 52.6805C182.357 52.6805 177.596 47.933 177.596 41.2829C177.596 34.6327 182.357 29.8852 188.523 29.8852C194.689 29.8852 199.526 34.6327 199.526 41.2829C199.526 47.933 194.765 52.6805 188.523 52.6805Z\"\n                  fill={getTypeColorScheme.text}\n                />\n                <path\n                  d=\"M434.858 18.5321V21.8183C431.622 18.9253 427.61 17.5938 422.83 17.5938C409.877 17.5938 399.934 27.76 399.934 41.5203C399.934 55.2805 409.877 65.4504 422.83 65.4504C428.075 65.4504 431.929 63.8853 434.858 61.226V64.5083H447.658V18.5321H434.858ZM424.264 52.6805C418.098 52.6805 413.336 47.933 413.336 41.2829C413.336 34.6327 418.098 29.8852 424.264 29.8852C430.43 29.8852 435.267 34.6327 435.267 41.2829C435.267 47.933 430.506 52.6805 424.264 52.6805Z\"\n                  fill={getTypeColorScheme.text}\n                />\n                <path\n                  d=\"M607.838 18.5321L599.375 54.1084C597.678 61.1443 594.673 65.4467 588.66 65.4467C582.572 65.4467 579.719 61.1443 578.099 53.9527L574.091 36.0458L570.313 53.9527C568.77 61.1443 565.84 65.4467 559.752 65.4467C553.739 65.4467 550.81 61.1443 549.114 54.1084L540.637 18.5321H554.128L560.677 51.3749L565.998 26.1206C566.847 21.9777 569.469 18.3021 574.479 18.3021C579.489 18.3021 582.264 22.0556 583.112 26.1206L588.277 51.6865L594.888 18.5321H607.838Z\"\n                  fill={getTypeColorScheme.text}\n                />\n              </>\n            )}\n            <path\n              d=\"M81.6428 30.1618C81.2228 17.1642 70.7568 6.7414 57.6748 6.7414C53.4927 6.7414 49.5602 7.80904 46.134 9.68544C41.3829 3.78048 34.0964 0 25.9255 0C11.6069 0 0.518029 11.0143 0.084483 25.2721C0.0715362 25.6981 0.00127536 27.1551 0.00127536 27.4443L0 64.5082H81.7317V32.3105C81.7317 32.3105 81.6642 30.8233 81.6428 30.1618Z\"\n              fill={getTypeColorScheme.logo.body}\n            />\n            <path\n              d=\"M43.2846 30.7942C43.2846 36.2136 38.7836 40.5805 33.316 40.3665C28.3864 40.1756 24.3075 36.0922 24.1227 31.1586C23.914 25.7045 28.2882 21.2104 33.7037 21.2104C39.1191 21.2104 43.2846 25.4963 43.2846 30.7884\"\n              fill={getTypeColorScheme.logo.eyes}\n            />\n            <path\n              d=\"M43.2848 30.7923C43.2848 33.7196 40.9123 36.0854 37.9901 36.0855C35.0675 36.0855 32.6954 33.6509 32.6954 30.7923C32.6954 27.9338 35.0675 25.4991 37.9901 25.4991C40.9123 25.4991 43.2848 27.8708 43.2848 30.7923Z\"\n              fill={getTypeColorScheme.logo.pupils}\n            />\n            <path\n              d=\"M67.2549 30.7942C67.2549 36.2136 62.7538 40.5805 57.2863 40.3665C52.3567 40.1756 48.2778 36.0922 48.093 31.1586C47.8843 25.7045 52.2584 21.2104 57.6739 21.2104C63.0894 21.2104 67.2549 25.4963 67.2549 30.7884\"\n              fill={getTypeColorScheme.logo.eyes}\n            />\n            <path\n              d=\"M67.255 30.7923C67.255 33.7196 64.8825 36.0854 61.9603 36.0855C59.0377 36.0855 56.6656 33.6509 56.6656 30.7923C56.6656 27.9338 59.0377 25.4991 61.9603 25.4991C64.8825 25.4991 67.255 27.8708 67.255 30.7923Z\"\n              fill={getTypeColorScheme.logo.pupils}\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0_5259_85945\">\n              <rect width=\"607.837\" height=\"65.4504\" fill=\"white\" />\n            </clipPath>\n          </defs>\n        </svg>\n      </LogoContainer>\n    </Box>\n  )\n}\n\nconst LogoContainer = styled.span<{ size?: string }>`\n  height: 32px;\n\n  @media (max-width: 768px) {\n    display: flex;\n    height: 22px;\n  }\n`\n"]}

package/dist/Logo/index.d.ts

@@ -0,0 +1 @@
+export * from './Logo';

package/dist/Logo/index.js

@@ -0,0 +1,2 @@
+export * from './Logo';
+//# sourceMappingURL=index.js.map

package/dist/Logo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Logo/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA","sourcesContent":["export * from './Logo'\n"]}

package/dist/Modal/Modal.d.ts

@@ -0,0 +1,32 @@
+import { FC, ReactNode } from 'react';
+import { type TextProps } from '../Text';
+export type ModalProps = {
+    /**
+     * Title of the modal
+     * @default "" (empty string)
+     *
+     * @example
+     * ```tsx
+     * <Modal title="MultiCar Account" />
+     * ```
+     *
+     * @example
+     * ```tsx
+     * <Modal title={{ typo: 'hero', children: 'MultiCar Account' }} />
+     * ```
+     */
+    title?: string | TitleProps;
+    icon?: string;
+    children?: ReactNode;
+    rightPanel?: ReactNode;
+    showModal?: boolean;
+    handleClick: () => void;
+    drawer?: boolean;
+    cross?: boolean;
+    width?: string;
+    containerClass?: string;
+    portalContainer?: Element | DocumentFragment;
+    closeOnOverlayClick?: boolean;
+};
+export type TitleProps = TextProps;
+export declare const Modal: FC<ModalProps>;

package/dist/Modal/Modal.js

@@ -0,0 +1,82 @@
+import React, { useRef } from 'react';
+import { createPortal } from 'react-dom';
+import styled, { css } from 'styled-components';
+import { theme } from '../theme';
+import { Box } from '../Box';
+import { IconStrict } from '../IconStrict';
+import { Text } from '../Text';
+import { useBodyScrollLock } from '../hooks/useBodyScrollLock';
+const getDefaultTitleProps = (title) => ({
+    children: title,
+    tag: 'h2',
+    typo: 'heading-small',
+    align: 'left',
+});
+export const Modal = ({ title = '', children, rightPanel, showModal = false, handleClick, drawer = true, cross = true, width, containerClass, portalContainer = document.body, closeOnOverlayClick = true, }) => {
+    const modalRef = useRef(null);
+    useBodyScrollLock({ node: modalRef.current, showModal });
+    const isTitleString = typeof title === 'string';
+    const titleProps = isTitleString ? getDefaultTitleProps(title) : title;
+    return createPortal(React.createElement(Wrapper, { "$showModal": showModal, ref: modalRef },
+        React.createElement(Overlay, { onClick: () => closeOnOverlayClick && handleClick(), "$closeOnOverlayClick": closeOnOverlayClick }),
+        React.createElement(Container, { "$drawer": drawer, "$width": width || '460px', className: containerClass },
+            React.createElement(Box, { flex: true, alignItems: "flex-start", justifyContent: "space-between", mb: "8px" },
+                React.createElement(TitleElements, { flex: true, direction: "column" },
+                    React.createElement(Text, { ...titleProps })),
+                React.createElement(Box, { flex: true, alignItems: "center", gap: '8px' },
+                    rightPanel,
+                    cross && (React.createElement(IconStrict, { render: "cross", title: "Close modal", backgroundColor: "oatmeal", handleClick: handleClick, size: 36 })))),
+            React.createElement(Box, { flex: true, direction: "column" }, children))), portalContainer);
+};
+const Wrapper = styled(Box)(({ $showModal }) => css `
+    display: ${$showModal ? 'flex' : 'none'};
+    position: absolute;
+    z-index: 999;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+  `);
+const Overlay = styled.div `
+  position: fixed;
+  background: ${theme.colors.liquorice};
+  cursor: ${(props) => (props.$closeOnOverlayClick ? 'pointer' : 'default')};
+  opacity: 0.4;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+`;
+const Container = styled.div(({ $drawer, $width }) => css `
+    background: ${theme.colors.coconut};
+    box-sizing: border-box;
+    border-radius: 16px;
+    padding: 24px;
+    width: 100%;
+    max-width: ${$width};
+    position: fixed;
+    max-height: calc(100vh - 64px);
+    overflow: auto;
+    transition: all 0.3s ease-in-out;
+
+    ${$drawer === true &&
+    css `
+      @media (max-width: 768px) {
+        max-width: none;
+        border-radius: 16px 16px 0px 0px;
+        padding: 10% 24px;
+        max-height: 90vh;
+
+        position: fixed;
+        right: 0;
+        left: 0;
+        bottom: 0;
+      }
+    `}
+  `);
+const TitleElements = styled(Box) `
+  align-self: center;
+`;
+//# sourceMappingURL=Modal.js.map

package/dist/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC, ReactNode, useRef } from 'react'\nimport { createPortal } from 'react-dom'\nimport styled, { css } from 'styled-components'\nimport { theme } from '../theme'\n\nimport { Box } from '../Box'\nimport { IconStrict } from '../IconStrict'\nimport { Text, type TextProps } from '../Text'\nimport { useBodyScrollLock } from '../hooks/useBodyScrollLock'\n\ninterface IModalWrapper {\n  // showModal state\n  $showModal: boolean\n}\ninterface IModalContainer {\n  // drawer state\n  $drawer: boolean\n  // modal width\n  $width: string\n}\n\nexport type ModalProps = {\n  /**\n   * Title of the modal\n   * @default \"\" (empty string)\n   *\n   * @example\n   * ```tsx\n   * <Modal title=\"MultiCar Account\" />\n   * ```\n   *\n   * @example\n   * ```tsx\n   * <Modal title={{ typo: 'hero', children: 'MultiCar Account' }} />\n   * ```\n   */\n  title?: string | TitleProps\n  icon?: string\n  children?: ReactNode\n  rightPanel?: ReactNode\n  showModal?: boolean\n  handleClick: () => void\n  drawer?: boolean\n  cross?: boolean\n  width?: string\n  containerClass?: string\n  portalContainer?: Element | DocumentFragment\n  closeOnOverlayClick?: boolean\n}\n\nexport type TitleProps = TextProps\n\nconst getDefaultTitleProps = (title: string): TitleProps => ({\n  children: title,\n  tag: 'h2',\n  typo: 'heading-small',\n  align: 'left',\n})\n\nexport const Modal: FC<ModalProps> = ({\n  title = '',\n  children,\n  rightPanel,\n  showModal = false,\n  handleClick,\n  drawer = true,\n  cross = true,\n  width,\n  containerClass,\n  portalContainer = document.body,\n  closeOnOverlayClick = true,\n}) => {\n  const modalRef = useRef<HTMLDivElement>(null)\n\n  useBodyScrollLock({ node: modalRef.current, showModal })\n\n  const isTitleString = typeof title === 'string'\n  const titleProps = isTitleString ? getDefaultTitleProps(title) : title\n\n  return createPortal(\n    <Wrapper $showModal={showModal} ref={modalRef}>\n      <Overlay\n        onClick={() => closeOnOverlayClick && handleClick()}\n        $closeOnOverlayClick={closeOnOverlayClick}\n      />\n      <Container\n        $drawer={drawer}\n        $width={width || '460px'}\n        className={containerClass}\n      >\n        <Box\n          flex\n          alignItems=\"flex-start\"\n          justifyContent=\"space-between\"\n          mb=\"8px\"\n        >\n          <TitleElements flex direction=\"column\">\n            <Text {...titleProps} />\n          </TitleElements>\n          <Box flex alignItems=\"center\" gap={'8px'}>\n            {rightPanel}\n            {cross && (\n              <IconStrict\n                render=\"cross\"\n                title=\"Close modal\"\n                backgroundColor=\"oatmeal\"\n                handleClick={handleClick}\n                size={36}\n              />\n            )}\n          </Box>\n        </Box>\n        <Box flex direction=\"column\">\n          {children}\n        </Box>\n      </Container>\n    </Wrapper>,\n    portalContainer,\n  )\n}\n\nconst Wrapper = styled(Box)<IModalWrapper>(\n  ({ $showModal }) => css`\n    display: ${$showModal ? 'flex' : 'none'};\n    position: absolute;\n    z-index: 999;\n    top: 0;\n    left: 0;\n    height: 100vh;\n    width: 100%;\n    justify-content: center;\n    align-items: center;\n  `,\n)\n\nconst Overlay = styled.div<{ $closeOnOverlayClick: boolean }>`\n  position: fixed;\n  background: ${theme.colors.liquorice};\n  cursor: ${(props) => (props.$closeOnOverlayClick ? 'pointer' : 'default')};\n  opacity: 0.4;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n`\n\nconst Container = styled.div<IModalContainer>(\n  ({ $drawer, $width }) => css`\n    background: ${theme.colors.coconut};\n    box-sizing: border-box;\n    border-radius: 16px;\n    padding: 24px;\n    width: 100%;\n    max-width: ${$width};\n    position: fixed;\n    max-height: calc(100vh - 64px);\n    overflow: auto;\n    transition: all 0.3s ease-in-out;\n\n    ${$drawer === true &&\n    css`\n      @media (max-width: 768px) {\n        max-width: none;\n        border-radius: 16px 16px 0px 0px;\n        padding: 10% 24px;\n        max-height: 90vh;\n\n        position: fixed;\n        right: 0;\n        left: 0;\n        bottom: 0;\n      }\n    `}\n  `,\n)\n\nconst TitleElements = styled(Box)`\n  align-self: center;\n`\n"]}

package/dist/Modal/index.d.ts

@@ -0,0 +1 @@
+export { Modal } from './Modal';

package/dist/Modal/index.js

@@ -0,0 +1,2 @@
+export { Modal } from './Modal';
+//# sourceMappingURL=index.js.map

package/dist/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA","sourcesContent":["export { Modal } from './Modal'\n"]}

package/dist/NumberInput/NumberInput.d.ts

@@ -0,0 +1,25 @@
+import React, { FocusEvent, FormEvent } from 'react';
+import { CommonFieldProps } from '../fields/commonFieldTypes';
+export interface Props extends CommonFieldProps {
+    type?: 'number';
+    placeholder: string;
+    name?: string;
+    value: string;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+/** on change or on input required */
+type InputProps = {
+    /** on change is required and on input optional */
+    onChange: (e: string | number) => void;
+    onInputChange?: (e: FormEvent<HTMLInputElement>) => void;
+} | {
+    /** on input is required and on change optional */
+    onChange?: (e: string | number) => void;
+    onInputChange: (e: FormEvent<HTMLInputElement>) => void;
+};
+export type NumberInputProps = Props & InputProps;
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/NumberInput/NumberInput.js

@@ -0,0 +1,91 @@
+import React, { forwardRef, } from 'react';
+import styled from 'styled-components';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { Field } from '../fields/Field';
+import { Input, StyledFrontIcon, StyledTrailingIcon, } from '../fields/components/CommonInput';
+import { useUniqueId } from '../utils/id';
+export const NumberInput = forwardRef(function NumberInput({ id: idProp, type = 'number', placeholder, name, value, onChange, onInputChange, onBlur, min = -999999, max = 999999, step = 0, disabled = false, error = false, frontIcon, trailingIcon, fallbackStyle, ...fieldProps }, ref) {
+    const id = useUniqueId(idProp);
+    // Check whether the min/max value exists is within the specified range
+    const isInRange = (value) => {
+        if (min && value < min) {
+            return false;
+        }
+        if (max && value > max) {
+            return false;
+        }
+        return true;
+    };
+    // Round the number to two decimal places
+    const roundNumber = (event) => {
+        return Math.round(event * 100) / 100;
+    };
+    const applyMinMax = (value) => {
+        if (min && value < min)
+            return min;
+        if (max && value > max)
+            return max;
+        return value;
+    };
+    const handleChange = (event) => {
+        if (onChange === undefined)
+            return;
+        const EMPTY_INPUT = '';
+        if (event === EMPTY_INPUT) {
+            onChange(event);
+        }
+        else {
+            const amount = Number(event);
+            const normalisedValue = applyMinMax(amount);
+            onChange(normalisedValue);
+        }
+    };
+    // Increment or decrement the value when clicking the Spinner controls
+    const incrementValue = (event) => {
+        if (onChange === undefined)
+            return;
+        event.preventDefault();
+        const currentValue = Number(value) + step;
+        if (isInRange(currentValue)) {
+            onChange(roundNumber(currentValue));
+        }
+    };
+    const decrementValue = (event) => {
+        if (onChange === undefined)
+            return;
+        event.preventDefault();
+        const currentValue = Number(value) - step;
+        if (isInRange(currentValue)) {
+            onChange(roundNumber(currentValue));
+        }
+    };
+    return (React.createElement(Field, { ...fieldProps, htmlFor: id, error: error },
+        React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "flex-start" },
+            frontIcon && (React.createElement(StyledFrontIcon, { "$disabled": disabled, render: frontIcon, color: "sesame" })),
+            React.createElement(Input, { ref: ref, "$error": error, disabled: disabled, type: type, id: id, name: name, placeholder: placeholder, value: value, "$frontIcon": frontIcon, step: step, "$fallbackStyle": fallbackStyle, onWheel: (e) => e.currentTarget.blur(), onChange: (e) => {
+                    onChange && handleChange(e.currentTarget.value);
+                    onInputChange && onInputChange(e);
+                }, onBlur: onBlur }),
+            onChange && step > 0 && (React.createElement(Spinner, null,
+                React.createElement(SpinnerButton, { "aria-label": "step-up", onClick: incrementValue, disabled: disabled },
+                    React.createElement(Icon, { render: "caret", rotate: 180, color: "sesame", size: 24 })),
+                React.createElement(SpinnerButton, { "aria-label": "step-down", onClick: decrementValue, disabled: disabled },
+                    React.createElement(Icon, { render: "caret", color: "sesame", size: 24 })))),
+            trailingIcon && !step && (React.createElement(StyledTrailingIcon, { "$disabled": disabled, render: trailingIcon, color: "sesame" })))));
+});
+const Spinner = styled.div `
+  position: relative;
+  display: flex;
+  right: 58px;
+  margin-right: -58px;
+`;
+const SpinnerButton = styled.button `
+  width: 24px;
+  height: 24px;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+`;
+//# sourceMappingURL=NumberInput.js.map

package/dist/NumberInput/NumberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  MouseEvent,\n  forwardRef,\n} from 'react'\nimport styled from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\n\nimport {\n  Input,\n  StyledFrontIcon,\n  StyledTrailingIcon,\n} from '../fields/components/CommonInput'\nimport { useUniqueId } from '../utils/id'\n\nexport interface Props extends CommonFieldProps {\n  type?: 'number'\n  placeholder: string\n  name?: string\n  value: string\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  min?: number\n  max?: number\n  step?: number\n}\n\n/** on change or on input required */\ntype InputProps =\n  | {\n      /** on change is required and on input optional */\n      onChange: (e: string | number) => void\n      onInputChange?: (e: FormEvent<HTMLInputElement>) => void\n    }\n  | {\n      /** on input is required and on change optional */\n      onChange?: (e: string | number) => void\n      onInputChange: (e: FormEvent<HTMLInputElement>) => void\n    }\n\nexport type NumberInputProps = Props & InputProps\n\nexport const NumberInput = forwardRef(function NumberInput(\n  {\n    id: idProp,\n    type = 'number',\n    placeholder,\n    name,\n    value,\n    onChange,\n    onInputChange,\n    onBlur,\n    min = -999999,\n    max = 999999,\n    step = 0,\n    disabled = false,\n    error = false,\n    frontIcon,\n    trailingIcon,\n    fallbackStyle,\n    ...fieldProps\n  }: NumberInputProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const id = useUniqueId(idProp)\n\n  // Check whether the min/max value exists is within the specified range\n  const isInRange = (value: number) => {\n    if (min && value < min) {\n      return false\n    }\n\n    if (max && value > max) {\n      return false\n    }\n\n    return true\n  }\n\n  // Round the number to two decimal places\n  const roundNumber = (event: number) => {\n    return Math.round(event * 100) / 100\n  }\n\n  const applyMinMax = (value: number) => {\n    if (min && value < min) return min\n    if (max && value > max) return max\n    return value\n  }\n\n  const handleChange = (event: string) => {\n    if (onChange === undefined) return\n    const EMPTY_INPUT = ''\n\n    if (event === EMPTY_INPUT) {\n      onChange(event)\n    } else {\n      const amount = Number(event)\n      const normalisedValue = applyMinMax(amount)\n\n      onChange(normalisedValue)\n    }\n  }\n  // Increment or decrement the value when clicking the Spinner controls\n  const incrementValue = (event: MouseEvent<HTMLButtonElement>) => {\n    if (onChange === undefined) return\n    event.preventDefault()\n    const currentValue = Number(value) + step\n\n    if (isInRange(currentValue)) {\n      onChange(roundNumber(currentValue))\n    }\n  }\n\n  const decrementValue = (event: MouseEvent<HTMLButtonElement>) => {\n    if (onChange === undefined) return\n    event.preventDefault()\n    const currentValue = Number(value) - step\n\n    if (isInRange(currentValue)) {\n      onChange(roundNumber(currentValue))\n    }\n  }\n\n  return (\n    <Field {...fieldProps} htmlFor={id} error={error}>\n      <Box flex alignItems=\"center\" justifyContent=\"flex-start\">\n        {frontIcon && (\n          <StyledFrontIcon\n            $disabled={disabled}\n            render={frontIcon}\n            color=\"sesame\"\n          />\n        )}\n        <Input\n          ref={ref}\n          $error={error}\n          disabled={disabled}\n          type={type}\n          id={id}\n          name={name}\n          placeholder={placeholder}\n          value={value}\n          $frontIcon={frontIcon}\n          step={step}\n          $fallbackStyle={fallbackStyle}\n          onWheel={(e) => e.currentTarget.blur()}\n          onChange={(e: FormEvent<HTMLInputElement>) => {\n            onChange && handleChange(e.currentTarget.value)\n            onInputChange && onInputChange(e)\n          }}\n          onBlur={onBlur}\n        />\n\n        {onChange && step > 0 && (\n          <Spinner>\n            <SpinnerButton\n              aria-label=\"step-up\"\n              onClick={incrementValue}\n              disabled={disabled}\n            >\n              <Icon render=\"caret\" rotate={180} color=\"sesame\" size={24} />\n            </SpinnerButton>\n\n            <SpinnerButton\n              aria-label=\"step-down\"\n              onClick={decrementValue}\n              disabled={disabled}\n            >\n              <Icon render=\"caret\" color=\"sesame\" size={24} />\n            </SpinnerButton>\n          </Spinner>\n        )}\n        {trailingIcon && !step && (\n          <StyledTrailingIcon\n            $disabled={disabled}\n            render={trailingIcon}\n            color=\"sesame\"\n          />\n        )}\n      </Box>\n    </Field>\n  )\n})\n\nconst Spinner = styled.div`\n  position: relative;\n  display: flex;\n  right: 58px;\n  margin-right: -58px;\n`\n\ninterface IButton {\n  disabled: boolean\n}\n\nconst SpinnerButton = styled.button<IButton>`\n  width: 24px;\n  height: 24px;\n  background-color: transparent;\n  border: 0;\n  padding: 0;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n`\n"]}

package/dist/NumberInput/index.d.ts

@@ -0,0 +1 @@
+export { NumberInput } from './NumberInput';

package/dist/NumberInput/index.js

@@ -0,0 +1,2 @@
+export { NumberInput } from './NumberInput';
+//# sourceMappingURL=index.js.map

package/dist/NumberInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/NumberInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA","sourcesContent":["export { NumberInput } from './NumberInput'\n"]}

package/dist/Pagination/Pagination.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { MarginProps } from '../utils/space';
+export type PaginationProps = {
+    /** Total number of records  */
+    total: number;
+    /** Number of records per page  */
+    partition: number;
+    /** Handle page change */
+    handlePageChange: (page: number) => void;
+    /** Sets current page number */
+    currentPage?: number;
+} & MarginProps;
+export declare const Pagination: FC<PaginationProps>;

package/dist/Pagination/Pagination.js

@@ -0,0 +1,139 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { theme } from '../theme';
+import { focusOutlineStyle } from '../utils/focusOutline';
+const MAX_PAGES = 7;
+const MAX_ADDITIONAL_PAGES = Math.ceil(MAX_PAGES / 2);
+export const Pagination = ({ total, partition, handlePageChange, currentPage, ...marginProps }) => {
+    const [lastPage, setLastPage] = useState(0);
+    const [activePage, setActivePage] = useState(1);
+    const [pages, setPages] = useState([]);
+    const [shownPages, setShownPages] = useState([]);
+    const [showFirstDots, setShowFirstDots] = useState(false);
+    const [showLastDots, setShowLastDots] = useState(false);
+    useEffect(() => {
+        // This is a rather hacky fix, in theory it should be listening to total, but because the total comes from the same endpoint as the data, it forces a reset to 1 every time
+        // Using lastPage seems to bypass that
+        if (currentPage) {
+            setActivePage(currentPage);
+        }
+        else {
+            setActivePage(1);
+        }
+    }, [lastPage, currentPage]);
+    useEffect(() => {
+        const numberOfPages = Math.ceil(total / partition);
+        if (numberOfPages > 1) {
+            setLastPage(numberOfPages);
+        }
+        else if (numberOfPages === 1) {
+            // Sets last page to be null to avoid the last page being kept from previous state.
+            setLastPage(0);
+        }
+        if (numberOfPages > 2) {
+            const allPages = Array.from({ length: numberOfPages }, (_, i) => i + 1);
+            setPages(allPages.slice(1, numberOfPages - 1));
+        }
+        else {
+            // Sets pages to empty to avoid using the previous state if pages set before.
+            setPages([]);
+        }
+    }, [total, partition]);
+    useEffect(() => {
+        if (lastPage <= MAX_PAGES) {
+            setShownPages(pages);
+        }
+        else if (activePage <= MAX_ADDITIONAL_PAGES) {
+            setShownPages(pages.slice(0, MAX_ADDITIONAL_PAGES));
+        }
+        else if (activePage > lastPage - MAX_ADDITIONAL_PAGES) {
+            setShownPages(pages.slice(pages.length - MAX_ADDITIONAL_PAGES));
+        }
+        else {
+            const activePageIndex = pages.indexOf(activePage);
+            setShownPages(pages.slice(activePageIndex - 1, activePageIndex + 2));
+        }
+    }, [lastPage, activePage, pages]);
+    useEffect(() => {
+        setShowFirstDots(shownPages[0] !== pages[0]);
+        setShowLastDots(shownPages[shownPages.length - 1] !== pages[pages.length - 1]);
+    }, [shownPages, pages]);
+    const movePage = (page) => {
+        if (page > 0 && page <= lastPage) {
+            setActivePage(page);
+            handlePageChange(page);
+        }
+    };
+    return (React.createElement(Container, { flex: true, direction: "row", ...marginProps },
+        activePage - 1 > 0 && (React.createElement(IconBox, { "aria-label": "previous-page", onClick: () => movePage(activePage - 1), onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    movePage(activePage - 1);
+                }
+            } },
+            React.createElement(Icon, { size: 18, render: "arrow" }))),
+        React.createElement(PageBox, { "$active": activePage === 1, onClick: () => movePage(1) },
+            React.createElement(Text, { typo: activePage === 1 ? 'desc-medium' : 'desc-light', tag: "p" }, "1")),
+        showFirstDots && (React.createElement(PageBox, null,
+            React.createElement(Text, { tag: "p" }, "..."))),
+        shownPages.map((i) => {
+            return (React.createElement(PageBox, { "$active": activePage === i, key: i, onClick: () => movePage(i), onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        movePage(i);
+                    }
+                } },
+                React.createElement(Text, { typo: activePage === i ? 'desc-medium' : 'desc-light', tag: "p" }, i)));
+        }),
+        showLastDots && (React.createElement(PageBox, null,
+            React.createElement(Text, { tag: "p" }, "..."))),
+        Boolean(lastPage) && (React.createElement(PageBox, { "$active": activePage === lastPage, onClick: () => movePage(lastPage), onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    movePage(lastPage);
+                }
+            } },
+            React.createElement(Text, { typo: activePage === lastPage ? 'desc-medium' : 'desc-light', tag: "p" }, lastPage))),
+        activePage + 1 <= lastPage && (React.createElement(IconBox, { "aria-label": "next-page", onClick: () => movePage(activePage + 1), onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    movePage(activePage + 1);
+                }
+            } },
+            React.createElement(Icon, { size: 18, render: "arrow", rotate: 180 })))));
+};
+const Container = styled(Box) `
+  align-items: center;
+  > button {
+    margin-right: 4px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+`;
+const PageBox = styled.button `
+  background: ${({ $active }) => $active ? theme.colors.custard : theme.colors.cream};
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  border-radius: 24px;
+  width: fit-content;
+  padding: 0px 4px;
+  height: 24px;
+  min-width: 24px;
+
+  &:hover {
+    background-color: ${theme.colors.mascarpone};
+  }
+  &:active {
+    background-color: ${theme.colors.custard};
+  }
+
+  ${focusOutlineStyle}
+`;
+const IconBox = styled.button `
+  cursor: pointer;
+
+  ${focusOutlineStyle}
+`;
+//# sourceMappingURL=Pagination.js.map

package/dist/Pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC, useEffect, useState } from 'react'\nimport styled from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\n\nimport { theme } from '../theme'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\nconst MAX_PAGES = 7\nconst MAX_ADDITIONAL_PAGES = Math.ceil(MAX_PAGES / 2)\n\nexport type PaginationProps = {\n  /** Total number of records  */\n  total: number\n  /** Number of records per page  */\n  partition: number\n  /** Handle page change */\n  handlePageChange: (page: number) => void\n  /** Sets current page number */\n  currentPage?: number\n} & MarginProps\n\nexport const Pagination: FC<PaginationProps> = ({\n  total,\n  partition,\n  handlePageChange,\n  currentPage,\n  ...marginProps\n}) => {\n  const [lastPage, setLastPage] = useState(0)\n  const [activePage, setActivePage] = useState(1)\n  const [pages, setPages] = useState<number[]>([])\n  const [shownPages, setShownPages] = useState<number[]>([])\n  const [showFirstDots, setShowFirstDots] = useState(false)\n  const [showLastDots, setShowLastDots] = useState(false)\n\n  useEffect(() => {\n    // This is a rather hacky fix, in theory it should be listening to total, but because the total comes from the same endpoint as the data, it forces a reset to 1 every time\n    // Using lastPage seems to bypass that\n    if (currentPage) {\n      setActivePage(currentPage)\n    } else {\n      setActivePage(1)\n    }\n  }, [lastPage, currentPage])\n\n  useEffect(() => {\n    const numberOfPages = Math.ceil(total / partition)\n    if (numberOfPages > 1) {\n      setLastPage(numberOfPages)\n    } else if (numberOfPages === 1) {\n      // Sets last page to be null to avoid the last page being kept from previous state.\n      setLastPage(0)\n    }\n    if (numberOfPages > 2) {\n      const allPages = Array.from({ length: numberOfPages }, (_, i) => i + 1)\n      setPages(allPages.slice(1, numberOfPages - 1))\n    } else {\n      // Sets pages to empty to avoid using the previous state if pages set before.\n      setPages([])\n    }\n  }, [total, partition])\n\n  useEffect(() => {\n    if (lastPage <= MAX_PAGES) {\n      setShownPages(pages)\n    } else if (activePage <= MAX_ADDITIONAL_PAGES) {\n      setShownPages(pages.slice(0, MAX_ADDITIONAL_PAGES))\n    } else if (activePage > lastPage - MAX_ADDITIONAL_PAGES) {\n      setShownPages(pages.slice(pages.length - MAX_ADDITIONAL_PAGES))\n    } else {\n      const activePageIndex = pages.indexOf(activePage)\n      setShownPages(pages.slice(activePageIndex - 1, activePageIndex + 2))\n    }\n  }, [lastPage, activePage, pages])\n\n  useEffect(() => {\n    setShowFirstDots(shownPages[0] !== pages[0])\n    setShowLastDots(\n      shownPages[shownPages.length - 1] !== pages[pages.length - 1],\n    )\n  }, [shownPages, pages])\n\n  const movePage = (page: number) => {\n    if (page > 0 && page <= lastPage) {\n      setActivePage(page)\n      handlePageChange(page)\n    }\n  }\n\n  return (\n    <Container flex direction=\"row\" {...marginProps}>\n      {activePage - 1 > 0 && (\n        <IconBox\n          aria-label=\"previous-page\"\n          onClick={() => movePage(activePage - 1)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              movePage(activePage - 1)\n            }\n          }}\n        >\n          <Icon size={18} render=\"arrow\" />\n        </IconBox>\n      )}\n      <PageBox $active={activePage === 1} onClick={() => movePage(1)}>\n        <Text typo={activePage === 1 ? 'desc-medium' : 'desc-light'} tag=\"p\">\n          1\n        </Text>\n      </PageBox>\n      {showFirstDots && (\n        <PageBox>\n          <Text tag=\"p\">...</Text>\n        </PageBox>\n      )}\n      {shownPages.map((i) => {\n        return (\n          <PageBox\n            $active={activePage === i}\n            key={i}\n            onClick={() => movePage(i)}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') {\n                movePage(i)\n              }\n            }}\n          >\n            <Text\n              typo={activePage === i ? 'desc-medium' : 'desc-light'}\n              tag=\"p\"\n            >\n              {i}\n            </Text>\n          </PageBox>\n        )\n      })}\n      {showLastDots && (\n        <PageBox>\n          <Text tag=\"p\">...</Text>\n        </PageBox>\n      )}\n      {Boolean(lastPage) && (\n        <PageBox\n          $active={activePage === lastPage}\n          onClick={() => movePage(lastPage)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              movePage(lastPage)\n            }\n          }}\n        >\n          <Text\n            typo={activePage === lastPage ? 'desc-medium' : 'desc-light'}\n            tag=\"p\"\n          >\n            {lastPage}\n          </Text>\n        </PageBox>\n      )}\n      {activePage + 1 <= lastPage && (\n        <IconBox\n          aria-label=\"next-page\"\n          onClick={() => movePage(activePage + 1)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              movePage(activePage + 1)\n            }\n          }}\n        >\n          <Icon size={18} render=\"arrow\" rotate={180} />\n        </IconBox>\n      )}\n    </Container>\n  )\n}\n\ninterface IPageBox {\n  $active?: boolean\n}\n\nconst Container = styled(Box)`\n  align-items: center;\n  > button {\n    margin-right: 4px;\n\n    &:last-child {\n      margin-right: 0;\n    }\n  }\n`\n\nconst PageBox = styled.button<IPageBox>`\n  background: ${({ $active }) =>\n    $active ? theme.colors.custard : theme.colors.cream};\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  border-radius: 24px;\n  width: fit-content;\n  padding: 0px 4px;\n  height: 24px;\n  min-width: 24px;\n\n  &:hover {\n    background-color: ${theme.colors.mascarpone};\n  }\n  &:active {\n    background-color: ${theme.colors.custard};\n  }\n\n  ${focusOutlineStyle}\n`\n\nconst IconBox = styled.button<IPageBox>`\n  cursor: pointer;\n\n  ${focusOutlineStyle}\n`\n"]}

package/dist/Pagination/index.d.ts

@@ -0,0 +1 @@
+export * from './Pagination';

package/dist/Pagination/index.js

@@ -0,0 +1,2 @@
+export * from './Pagination';
+//# sourceMappingURL=index.js.map

package/dist/Pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Pagination/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA","sourcesContent":["export * from './Pagination'\n"]}

package/dist/RadioGroup/RadioElement.d.ts

@@ -0,0 +1,12 @@
+import React, { FocusEvent } from 'react';
+import { MarginProps } from '../utils/space';
+import { BaseValueType } from './types';
+export declare const RadioElement: React.ForwardRefExoticComponent<{
+    name: string;
+    id: string;
+    value: BaseValueType;
+    checked: boolean;
+    onChange: (value: BaseValueType) => void;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    isError: boolean;
+} & MarginProps & React.RefAttributes<HTMLInputElement>>;