@veeqo/ui 14.12.0-beta-1 → 14.12.0

package/dist/components/Loader/Loader.js

@@ -1,19 +1,23 @@
 import React__default from 'react';
-import { TailSpin } from './TailSpin.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
 import { Grid } from './Grid.js';
+import { TailSpin } from './TailSpin.js';
 import { ThreeDots } from './ThreeDots.js';
+import styles from './loader.module.scss.js';
 
-const Loader = ({ className, height = 24, width = 24, color = '#588CB0', type = 'TailSpin', }) => {
+const Loader = ({ className, height = 24, width = 24, type = 'TailSpin', }) => {
+    const classNames = buildClassnames([styles.loader, className]);
     switch (type) {
         case 'Grid': {
-            return React__default.createElement(Grid, { className: className, height: height, width: width, color: color });
+            return React__default.createElement(Grid, { className: classNames, height: height, width: width });
         }
         case 'ThreeDots': {
-            return React__default.createElement(ThreeDots, { className: className, height: height, width: width, color: color });
+            return React__default.createElement(ThreeDots, { className: classNames, height: height, width: width });
         }
         case 'TailSpin':
         default: {
-            return React__default.createElement(TailSpin, { className: className, height: height, width: width, color: color });
+            return React__default.createElement(TailSpin, { className: classNames, height: height, width: width });
         }
     }
 };

package/dist/components/Loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../../src/components/Loader/Loader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TailSpin } from './TailSpin';\nimport { Grid } from './Grid';\nimport { ThreeDots } from './ThreeDots';\n\nimport { LoaderProps } from './loaderTypes';\n\nexport const Loader = ({\n  className,\n  height = 24,\n  width = 24,\n  color = '#588CB0',\n  type = 'TailSpin',\n}: LoaderProps) => {\n  switch (type) {\n    case 'Grid': {\n      return <Grid className={className} height={height} width={width} color={color} />;\n    }\n    case 'ThreeDots': {\n      return <ThreeDots className={className} height={height} width={width} color={color} />;\n    }\n    case 'TailSpin':\n    default: {\n      return <TailSpin className={className} height={height} width={width} color={color} />;\n    }\n  }\n};\n"],"names":["React"],"mappings":";;;;;AAQO,MAAM,MAAM,GAAG,CAAC,EACrB,SAAS,EACT,MAAM,GAAG,EAAE,EACX,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,UAAU,GACL,KAAI;AAChB,IAAA,QAAQ,IAAI;QACV,KAAK,MAAM,EAAE;AACX,YAAA,OAAOA,6BAAC,IAAI,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI;AAClF,QAAA;QACD,KAAK,WAAW,EAAE;AAChB,YAAA,OAAOA,6BAAC,SAAS,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI;AACvF,QAAA;AACD,QAAA,KAAK,UAAU;AACf,QAAA,SAAS;AACP,YAAA,OAAOA,6BAAC,QAAQ,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI;AACtF,QAAA;AACF;AACH;;;;"}
+{"version":3,"file":"Loader.js","sources":["../../../src/components/Loader/Loader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { Grid } from './Grid';\nimport { TailSpin } from './TailSpin';\nimport { ThreeDots } from './ThreeDots';\nimport styles from './loader.module.scss';\n\nimport { LoaderProps } from './loaderTypes';\n\nexport const Loader = ({\n  className,\n  height = 24,\n  width = 24,\n  type = 'TailSpin',\n}: LoaderProps) => {\n  const classNames = buildClassnames([styles.loader, className]);\n\n  switch (type) {\n    case 'Grid': {\n      return <Grid className={classNames} height={height} width={width} />;\n    }\n    case 'ThreeDots': {\n      return <ThreeDots className={classNames} height={height} width={width} />;\n    }\n    case 'TailSpin':\n    default: {\n      return <TailSpin className={classNames} height={height} width={width} />;\n    }\n  }\n};\n"],"names":["React"],"mappings":";;;;;;;;MAUa,MAAM,GAAG,CAAC,EACrB,SAAS,EACT,MAAM,GAAG,EAAE,EACX,KAAK,GAAG,EAAE,EACV,IAAI,GAAG,UAAU,GACL,KAAI;AAChB,IAAA,MAAM,UAAU,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAE9D,IAAA,QAAQ,IAAI;QACV,KAAK,MAAM,EAAE;AACX,YAAA,OAAOA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAI;AACrE,QAAA;QACD,KAAK,WAAW,EAAE;AAChB,YAAA,OAAOA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAI;AAC1E,QAAA;AACD,QAAA,KAAK,UAAU;AACf,QAAA,SAAS;AACP,YAAA,OAAOA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAI;AACzE,QAAA;AACF;AACH;;;;"}

package/dist/components/Loader/TailSpin.cjs

@@ -6,17 +6,10 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const TailSpin = ({ width, height, className, color, label }) => (React__default.default.createElement("svg", { width: width, height: height, className: className, viewBox: "0 0 38 38", xmlns: "http://www.w3.org/2000/svg", "aria-label": label },
-    React__default.default.createElement("defs", null,
-        React__default.default.createElement("linearGradient", { x1: "8.042%", y1: "0%", x2: "65.682%", y2: "23.865%", id: "a" },
-            React__default.default.createElement("stop", { stopColor: color, stopOpacity: "0", offset: "0%" }),
-            React__default.default.createElement("stop", { stopColor: color, stopOpacity: ".631", offset: "63.146%" }),
-            React__default.default.createElement("stop", { stopColor: color, offset: "100%" }))),
+const TailSpin = ({ width, height, className, label }) => (React__default.default.createElement("svg", { width: width, height: height, className: className, viewBox: "0 0 38 38", xmlns: "http://www.w3.org/2000/svg", "aria-label": label },
     React__default.default.createElement("g", { fill: "none", fillRule: "evenodd" },
         React__default.default.createElement("g", { transform: "translate(1 1)" },
-            React__default.default.createElement("path", { d: "M36 18c0-9.94-8.06-18-18-18", id: "Oval-2", stroke: color, strokeWidth: "2" },
-                React__default.default.createElement("animateTransform", { attributeName: "transform", type: "rotate", from: "0 18 18", to: "360 18 18", dur: "0.9s", repeatCount: "indefinite" })),
-            React__default.default.createElement("circle", { fill: "#fff", cx: "36", cy: "18", r: "1" },
+            React__default.default.createElement("path", { d: "M36 18c0-9.94-8.06-18-18-18", id: "Oval-2", stroke: "currentColor", strokeWidth: "3" },
                 React__default.default.createElement("animateTransform", { attributeName: "transform", type: "rotate", from: "0 18 18", to: "360 18 18", dur: "0.9s", repeatCount: "indefinite" }))))));
 
 exports.TailSpin = TailSpin;

package/dist/components/Loader/TailSpin.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TailSpin.cjs","sources":["../../../src/components/Loader/TailSpin.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface TailSpinProps {\n  width?: number;\n  height?: number;\n  className?: string;\n  color?: string;\n  label?: string;\n}\n\nexport const TailSpin = ({ width, height, className, color, label }: TailSpinProps) => (\n  <svg\n    width={width}\n    height={height}\n    className={className}\n    viewBox=\"0 0 38 38\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label={label}\n  >\n    <defs>\n      <linearGradient x1=\"8.042%\" y1=\"0%\" x2=\"65.682%\" y2=\"23.865%\" id=\"a\">\n        <stop stopColor={color} stopOpacity=\"0\" offset=\"0%\" />\n        <stop stopColor={color} stopOpacity=\".631\" offset=\"63.146%\" />\n        <stop stopColor={color} offset=\"100%\" />\n      </linearGradient>\n    </defs>\n    <g fill=\"none\" fillRule=\"evenodd\">\n      <g transform=\"translate(1 1)\">\n        <path d=\"M36 18c0-9.94-8.06-18-18-18\" id=\"Oval-2\" stroke={color} strokeWidth=\"2\">\n          <animateTransform\n            attributeName=\"transform\"\n            type=\"rotate\"\n            from=\"0 18 18\"\n            to=\"360 18 18\"\n            dur=\"0.9s\"\n            repeatCount=\"indefinite\"\n          />\n        </path>\n        <circle fill=\"#fff\" cx=\"36\" cy=\"18\" r=\"1\">\n          <animateTransform\n            attributeName=\"transform\"\n            type=\"rotate\"\n            from=\"0 18 18\"\n            to=\"360 18 18\"\n            dur=\"0.9s\"\n            repeatCount=\"indefinite\"\n          />\n        </circle>\n      </g>\n    </g>\n  </svg>\n);\n"],"names":["React"],"mappings":";;;;;;;;AAUO,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAiB,MAChFA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,gBACtB,KAAK,EAAA;AAEjB,IAAAA,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA;AACE,QAAAA,sBAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,EAAgB,EAAE,EAAC,QAAQ,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,GAAG,EAAA;YAClEA,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,KAAK,EAAE,WAAW,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAA,CAAG;YACtDA,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,KAAK,EAAE,WAAW,EAAC,MAAM,EAAC,MAAM,EAAC,SAAS,EAAA,CAAG;YAC9DA,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,KAAK,EAAE,MAAM,EAAC,MAAM,EAAA,CAAG,CACzB,CACZ;AACP,IAAAA,sBAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAA;QAC/BA,sBAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,gBAAgB,EAAA;AAC3B,YAAAA,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,6BAA6B,EAAC,EAAE,EAAC,QAAQ,EAAC,MAAM,EAAE,KAAK,EAAE,WAAW,EAAC,GAAG,EAAA;gBAC9EA,sBAAA,CAAA,aAAA,CAAA,kBAAA,EAAA,EACE,aAAa,EAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,SAAS,EACd,EAAE,EAAC,WAAW,EACd,GAAG,EAAC,MAAM,EACV,WAAW,EAAC,YAAY,EAAA,CACxB,CACG;AACP,YAAAA,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAA;AACvC,gBAAAA,sBAAA,CAAA,aAAA,CAAA,kBAAA,EAAA,EACE,aAAa,EAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,SAAS,EACd,EAAE,EAAC,WAAW,EACd,GAAG,EAAC,MAAM,EACV,WAAW,EAAC,YAAY,EAAA,CACxB,CACK,CACP,CACF,CACA;;;;"}
+{"version":3,"file":"TailSpin.cjs","sources":["../../../src/components/Loader/TailSpin.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface TailSpinProps {\n  width?: number;\n  height?: number;\n  className?: string;\n  label?: string;\n}\n\nexport const TailSpin = ({ width, height, className, label }: TailSpinProps) => (\n  <svg\n    width={width}\n    height={height}\n    className={className}\n    viewBox=\"0 0 38 38\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label={label}\n  >\n    <g fill=\"none\" fillRule=\"evenodd\">\n      <g transform=\"translate(1 1)\">\n        <path d=\"M36 18c0-9.94-8.06-18-18-18\" id=\"Oval-2\" stroke=\"currentColor\" strokeWidth=\"3\">\n          <animateTransform\n            attributeName=\"transform\"\n            type=\"rotate\"\n            from=\"0 18 18\"\n            to=\"360 18 18\"\n            dur=\"0.9s\"\n            repeatCount=\"indefinite\"\n          />\n        </path>\n      </g>\n    </g>\n  </svg>\n);\n"],"names":["React"],"mappings":";;;;;;;;AASO,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAiB,MACzEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,gBACtB,KAAK,EAAA;AAEjB,IAAAA,sBAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAA;QAC/BA,sBAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,gBAAgB,EAAA;AAC3B,YAAAA,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,6BAA6B,EAAC,EAAE,EAAC,QAAQ,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAA;AACrF,gBAAAA,sBAAA,CAAA,aAAA,CAAA,kBAAA,EAAA,EACE,aAAa,EAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,SAAS,EACd,EAAE,EAAC,WAAW,EACd,GAAG,EAAC,MAAM,EACV,WAAW,EAAC,YAAY,EAAA,CACxB,CACG,CACL,CACF,CACA;;;;"}

package/dist/components/Loader/TailSpin.d.ts

@@ -3,7 +3,6 @@ export interface TailSpinProps {
     width?: number;
     height?: number;
     className?: string;
-    color?: string;
     label?: string;
 }
-export declare const TailSpin: ({ width, height, className, color, label }: TailSpinProps) => React.JSX.Element;
+export declare const TailSpin: ({ width, height, className, label }: TailSpinProps) => React.JSX.Element;

package/dist/components/Loader/TailSpin.js

@@ -1,16 +1,9 @@
 import React__default from 'react';
 
-const TailSpin = ({ width, height, className, color, label }) => (React__default.createElement("svg", { width: width, height: height, className: className, viewBox: "0 0 38 38", xmlns: "http://www.w3.org/2000/svg", "aria-label": label },
-    React__default.createElement("defs", null,
-        React__default.createElement("linearGradient", { x1: "8.042%", y1: "0%", x2: "65.682%", y2: "23.865%", id: "a" },
-            React__default.createElement("stop", { stopColor: color, stopOpacity: "0", offset: "0%" }),
-            React__default.createElement("stop", { stopColor: color, stopOpacity: ".631", offset: "63.146%" }),
-            React__default.createElement("stop", { stopColor: color, offset: "100%" }))),
+const TailSpin = ({ width, height, className, label }) => (React__default.createElement("svg", { width: width, height: height, className: className, viewBox: "0 0 38 38", xmlns: "http://www.w3.org/2000/svg", "aria-label": label },
     React__default.createElement("g", { fill: "none", fillRule: "evenodd" },
         React__default.createElement("g", { transform: "translate(1 1)" },
-            React__default.createElement("path", { d: "M36 18c0-9.94-8.06-18-18-18", id: "Oval-2", stroke: color, strokeWidth: "2" },
-                React__default.createElement("animateTransform", { attributeName: "transform", type: "rotate", from: "0 18 18", to: "360 18 18", dur: "0.9s", repeatCount: "indefinite" })),
-            React__default.createElement("circle", { fill: "#fff", cx: "36", cy: "18", r: "1" },
+            React__default.createElement("path", { d: "M36 18c0-9.94-8.06-18-18-18", id: "Oval-2", stroke: "currentColor", strokeWidth: "3" },
                 React__default.createElement("animateTransform", { attributeName: "transform", type: "rotate", from: "0 18 18", to: "360 18 18", dur: "0.9s", repeatCount: "indefinite" }))))));
 
 export { TailSpin };

package/dist/components/Loader/TailSpin.js.map

@@ -1 +1 @@
-{"version":3,"file":"TailSpin.js","sources":["../../../src/components/Loader/TailSpin.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface TailSpinProps {\n  width?: number;\n  height?: number;\n  className?: string;\n  color?: string;\n  label?: string;\n}\n\nexport const TailSpin = ({ width, height, className, color, label }: TailSpinProps) => (\n  <svg\n    width={width}\n    height={height}\n    className={className}\n    viewBox=\"0 0 38 38\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label={label}\n  >\n    <defs>\n      <linearGradient x1=\"8.042%\" y1=\"0%\" x2=\"65.682%\" y2=\"23.865%\" id=\"a\">\n        <stop stopColor={color} stopOpacity=\"0\" offset=\"0%\" />\n        <stop stopColor={color} stopOpacity=\".631\" offset=\"63.146%\" />\n        <stop stopColor={color} offset=\"100%\" />\n      </linearGradient>\n    </defs>\n    <g fill=\"none\" fillRule=\"evenodd\">\n      <g transform=\"translate(1 1)\">\n        <path d=\"M36 18c0-9.94-8.06-18-18-18\" id=\"Oval-2\" stroke={color} strokeWidth=\"2\">\n          <animateTransform\n            attributeName=\"transform\"\n            type=\"rotate\"\n            from=\"0 18 18\"\n            to=\"360 18 18\"\n            dur=\"0.9s\"\n            repeatCount=\"indefinite\"\n          />\n        </path>\n        <circle fill=\"#fff\" cx=\"36\" cy=\"18\" r=\"1\">\n          <animateTransform\n            attributeName=\"transform\"\n            type=\"rotate\"\n            from=\"0 18 18\"\n            to=\"360 18 18\"\n            dur=\"0.9s\"\n            repeatCount=\"indefinite\"\n          />\n        </circle>\n      </g>\n    </g>\n  </svg>\n);\n"],"names":["React"],"mappings":";;AAUO,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAiB,MAChFA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,gBACtB,KAAK,EAAA;AAEjB,IAAAA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA;AACE,QAAAA,cAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,EAAgB,EAAE,EAAC,QAAQ,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,GAAG,EAAA;YAClEA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,KAAK,EAAE,WAAW,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAA,CAAG;YACtDA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,KAAK,EAAE,WAAW,EAAC,MAAM,EAAC,MAAM,EAAC,SAAS,EAAA,CAAG;YAC9DA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,KAAK,EAAE,MAAM,EAAC,MAAM,EAAA,CAAG,CACzB,CACZ;AACP,IAAAA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAA;QAC/BA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,gBAAgB,EAAA;AAC3B,YAAAA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,6BAA6B,EAAC,EAAE,EAAC,QAAQ,EAAC,MAAM,EAAE,KAAK,EAAE,WAAW,EAAC,GAAG,EAAA;gBAC9EA,cAAA,CAAA,aAAA,CAAA,kBAAA,EAAA,EACE,aAAa,EAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,SAAS,EACd,EAAE,EAAC,WAAW,EACd,GAAG,EAAC,MAAM,EACV,WAAW,EAAC,YAAY,EAAA,CACxB,CACG;AACP,YAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAA;AACvC,gBAAAA,cAAA,CAAA,aAAA,CAAA,kBAAA,EAAA,EACE,aAAa,EAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,SAAS,EACd,EAAE,EAAC,WAAW,EACd,GAAG,EAAC,MAAM,EACV,WAAW,EAAC,YAAY,EAAA,CACxB,CACK,CACP,CACF,CACA;;;;"}
+{"version":3,"file":"TailSpin.js","sources":["../../../src/components/Loader/TailSpin.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface TailSpinProps {\n  width?: number;\n  height?: number;\n  className?: string;\n  label?: string;\n}\n\nexport const TailSpin = ({ width, height, className, label }: TailSpinProps) => (\n  <svg\n    width={width}\n    height={height}\n    className={className}\n    viewBox=\"0 0 38 38\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label={label}\n  >\n    <g fill=\"none\" fillRule=\"evenodd\">\n      <g transform=\"translate(1 1)\">\n        <path d=\"M36 18c0-9.94-8.06-18-18-18\" id=\"Oval-2\" stroke=\"currentColor\" strokeWidth=\"3\">\n          <animateTransform\n            attributeName=\"transform\"\n            type=\"rotate\"\n            from=\"0 18 18\"\n            to=\"360 18 18\"\n            dur=\"0.9s\"\n            repeatCount=\"indefinite\"\n          />\n        </path>\n      </g>\n    </g>\n  </svg>\n);\n"],"names":["React"],"mappings":";;AASO,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAiB,MACzEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,gBACtB,KAAK,EAAA;AAEjB,IAAAA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAA;QAC/BA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,gBAAgB,EAAA;AAC3B,YAAAA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,6BAA6B,EAAC,EAAE,EAAC,QAAQ,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAA;AACrF,gBAAAA,cAAA,CAAA,aAAA,CAAA,kBAAA,EAAA,EACE,aAAa,EAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,SAAS,EACd,EAAE,EAAC,WAAW,EACd,GAAG,EAAC,MAAM,EACV,WAAW,EAAC,YAAY,EAAA,CACxB,CACG,CACL,CACF,CACA;;;;"}

package/dist/components/Loader/ThreeDots.cjs

@@ -6,7 +6,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const ThreeDots = ({ width, height, className, color, label }) => (React__default.default.createElement("svg", { width: width, height: height, className: className, viewBox: "0 0 120 30", xmlns: "http://www.w3.org/2000/svg", fill: color, "aria-label": label },
+const ThreeDots = ({ width, height, className, label }) => (React__default.default.createElement("svg", { width: width, height: height, className: className, viewBox: "0 0 120 30", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", "aria-label": label },
     React__default.default.createElement("circle", { cx: "15", cy: "15", r: "15" },
         React__default.default.createElement("animate", { attributeName: "r", from: "15", to: "15", begin: "0s", dur: "0.8s", values: "15;9;15", calcMode: "linear", repeatCount: "indefinite" }),
         React__default.default.createElement("animate", { attributeName: "fillOpacity", from: "1", to: "1", begin: "0s", dur: "0.8s", values: "1;.5;1", calcMode: "linear", repeatCount: "indefinite" })),

package/dist/components/Loader/ThreeDots.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThreeDots.cjs","sources":["../../../src/components/Loader/ThreeDots.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface ThreeDotsProps {\n  width?: number;\n  height?: number;\n  className?: string;\n  color?: string;\n  label?: string;\n}\n\nexport const ThreeDots = ({ width, height, className, color, label }: ThreeDotsProps) => (\n  <svg\n    width={width}\n    height={height}\n    className={className}\n    viewBox=\"0 0 120 30\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill={color}\n    aria-label={label}\n  >\n    <circle cx=\"15\" cy=\"15\" r=\"15\">\n      <animate\n        attributeName=\"r\"\n        from=\"15\"\n        to=\"15\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\"15;9;15\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n      <animate\n        attributeName=\"fillOpacity\"\n        from=\"1\"\n        to=\"1\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\"1;.5;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"60\" cy=\"15\" r=\"9\" attributeName=\"fillOpacity\" from=\"1\" to=\"0.3\">\n      <animate\n        attributeName=\"r\"\n        from=\"9\"\n        to=\"9\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\"9;15;9\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n      <animate\n        attributeName=\"fillOpacity\"\n        from=\"0.5\"\n        to=\"0.5\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\".5;1;.5\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"105\" cy=\"15\" r=\"15\">\n      <animate\n        attributeName=\"r\"\n        from=\"15\"\n        to=\"15\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\"15;9;15\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n      <animate\n        attributeName=\"fillOpacity\"\n        from=\"1\"\n        to=\"1\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\"1;.5;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n  </svg>\n);\n"],"names":["React"],"mappings":";;;;;;;;MAUa,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAkB,MAClFA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,YAAY,EACpB,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAE,KAAK,EAAA,YAAA,EACC,KAAK,EAAA;IAEjBA,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAA;AAC5B,QAAAA,sBAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,GAAG,EACjB,IAAI,EAAC,IAAI,EACT,EAAE,EAAC,IAAI,EACP,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,SAAS,EAChB,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,EAAA,CACxB;AACF,QAAAA,sBAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,aAAa,EAC3B,IAAI,EAAC,GAAG,EACR,EAAE,EAAC,GAAG,EACN,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,QAAQ,EACf,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,GACxB,CACK;IACTA,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,aAAa,EAAC,aAAa,EAAC,IAAI,EAAC,GAAG,EAAC,EAAE,EAAC,KAAK,EAAA;AACzE,QAAAA,sBAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,GAAG,EACjB,IAAI,EAAC,GAAG,EACR,EAAE,EAAC,GAAG,EACN,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,QAAQ,EACf,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,EAAA,CACxB;AACF,QAAAA,sBAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,aAAa,EAC3B,IAAI,EAAC,KAAK,EACV,EAAE,EAAC,KAAK,EACR,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,SAAS,EAChB,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,GACxB,CACK;IACTA,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAA;AAC7B,QAAAA,sBAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,GAAG,EACjB,IAAI,EAAC,IAAI,EACT,EAAE,EAAC,IAAI,EACP,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,SAAS,EAChB,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,EAAA,CACxB;AACF,QAAAA,sBAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,aAAa,EAC3B,IAAI,EAAC,GAAG,EACR,EAAE,EAAC,GAAG,EACN,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,QAAQ,EACf,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,EAAA,CACxB,CACK,CACL;;;;"}
+{"version":3,"file":"ThreeDots.cjs","sources":["../../../src/components/Loader/ThreeDots.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface ThreeDotsProps {\n  width?: number;\n  height?: number;\n  className?: string;\n  label?: string;\n}\n\nexport const ThreeDots = ({ width, height, className, label }: ThreeDotsProps) => (\n  <svg\n    width={width}\n    height={height}\n    className={className}\n    viewBox=\"0 0 120 30\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"currentColor\"\n    aria-label={label}\n  >\n    <circle cx=\"15\" cy=\"15\" r=\"15\">\n      <animate\n        attributeName=\"r\"\n        from=\"15\"\n        to=\"15\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\"15;9;15\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n      <animate\n        attributeName=\"fillOpacity\"\n        from=\"1\"\n        to=\"1\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\"1;.5;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"60\" cy=\"15\" r=\"9\" attributeName=\"fillOpacity\" from=\"1\" to=\"0.3\">\n      <animate\n        attributeName=\"r\"\n        from=\"9\"\n        to=\"9\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\"9;15;9\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n      <animate\n        attributeName=\"fillOpacity\"\n        from=\"0.5\"\n        to=\"0.5\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\".5;1;.5\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"105\" cy=\"15\" r=\"15\">\n      <animate\n        attributeName=\"r\"\n        from=\"15\"\n        to=\"15\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\"15;9;15\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n      <animate\n        attributeName=\"fillOpacity\"\n        from=\"1\"\n        to=\"1\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\"1;.5;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n  </svg>\n);\n"],"names":["React"],"mappings":";;;;;;;;AASO,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAkB,MAC3EA,8CACE,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,YAAY,EACpB,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,gBACP,KAAK,EAAA;IAEjBA,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAA;AAC5B,QAAAA,sBAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,GAAG,EACjB,IAAI,EAAC,IAAI,EACT,EAAE,EAAC,IAAI,EACP,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,SAAS,EAChB,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,EAAA,CACxB;AACF,QAAAA,sBAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,aAAa,EAC3B,IAAI,EAAC,GAAG,EACR,EAAE,EAAC,GAAG,EACN,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,QAAQ,EACf,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,GACxB,CACK;IACTA,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,aAAa,EAAC,aAAa,EAAC,IAAI,EAAC,GAAG,EAAC,EAAE,EAAC,KAAK,EAAA;AACzE,QAAAA,sBAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,GAAG,EACjB,IAAI,EAAC,GAAG,EACR,EAAE,EAAC,GAAG,EACN,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,QAAQ,EACf,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,EAAA,CACxB;AACF,QAAAA,sBAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,aAAa,EAC3B,IAAI,EAAC,KAAK,EACV,EAAE,EAAC,KAAK,EACR,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,SAAS,EAChB,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,GACxB,CACK;IACTA,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAA;AAC7B,QAAAA,sBAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,GAAG,EACjB,IAAI,EAAC,IAAI,EACT,EAAE,EAAC,IAAI,EACP,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,SAAS,EAChB,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,EAAA,CACxB;AACF,QAAAA,sBAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,aAAa,EAC3B,IAAI,EAAC,GAAG,EACR,EAAE,EAAC,GAAG,EACN,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,QAAQ,EACf,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,EAAA,CACxB,CACK,CACL;;;;"}

package/dist/components/Loader/ThreeDots.d.ts

@@ -3,7 +3,6 @@ export interface ThreeDotsProps {
     width?: number;
     height?: number;
     className?: string;
-    color?: string;
     label?: string;
 }
-export declare const ThreeDots: ({ width, height, className, color, label }: ThreeDotsProps) => React.JSX.Element;
+export declare const ThreeDots: ({ width, height, className, label }: ThreeDotsProps) => React.JSX.Element;

package/dist/components/Loader/ThreeDots.js

@@ -1,6 +1,6 @@
 import React__default from 'react';
 
-const ThreeDots = ({ width, height, className, color, label }) => (React__default.createElement("svg", { width: width, height: height, className: className, viewBox: "0 0 120 30", xmlns: "http://www.w3.org/2000/svg", fill: color, "aria-label": label },
+const ThreeDots = ({ width, height, className, label }) => (React__default.createElement("svg", { width: width, height: height, className: className, viewBox: "0 0 120 30", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", "aria-label": label },
     React__default.createElement("circle", { cx: "15", cy: "15", r: "15" },
         React__default.createElement("animate", { attributeName: "r", from: "15", to: "15", begin: "0s", dur: "0.8s", values: "15;9;15", calcMode: "linear", repeatCount: "indefinite" }),
         React__default.createElement("animate", { attributeName: "fillOpacity", from: "1", to: "1", begin: "0s", dur: "0.8s", values: "1;.5;1", calcMode: "linear", repeatCount: "indefinite" })),

package/dist/components/Loader/ThreeDots.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThreeDots.js","sources":["../../../src/components/Loader/ThreeDots.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface ThreeDotsProps {\n  width?: number;\n  height?: number;\n  className?: string;\n  color?: string;\n  label?: string;\n}\n\nexport const ThreeDots = ({ width, height, className, color, label }: ThreeDotsProps) => (\n  <svg\n    width={width}\n    height={height}\n    className={className}\n    viewBox=\"0 0 120 30\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill={color}\n    aria-label={label}\n  >\n    <circle cx=\"15\" cy=\"15\" r=\"15\">\n      <animate\n        attributeName=\"r\"\n        from=\"15\"\n        to=\"15\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\"15;9;15\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n      <animate\n        attributeName=\"fillOpacity\"\n        from=\"1\"\n        to=\"1\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\"1;.5;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"60\" cy=\"15\" r=\"9\" attributeName=\"fillOpacity\" from=\"1\" to=\"0.3\">\n      <animate\n        attributeName=\"r\"\n        from=\"9\"\n        to=\"9\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\"9;15;9\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n      <animate\n        attributeName=\"fillOpacity\"\n        from=\"0.5\"\n        to=\"0.5\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\".5;1;.5\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"105\" cy=\"15\" r=\"15\">\n      <animate\n        attributeName=\"r\"\n        from=\"15\"\n        to=\"15\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\"15;9;15\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n      <animate\n        attributeName=\"fillOpacity\"\n        from=\"1\"\n        to=\"1\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\"1;.5;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n  </svg>\n);\n"],"names":["React"],"mappings":";;MAUa,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAkB,MAClFA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,YAAY,EACpB,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAE,KAAK,EAAA,YAAA,EACC,KAAK,EAAA;IAEjBA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAA;AAC5B,QAAAA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,GAAG,EACjB,IAAI,EAAC,IAAI,EACT,EAAE,EAAC,IAAI,EACP,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,SAAS,EAChB,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,EAAA,CACxB;AACF,QAAAA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,aAAa,EAC3B,IAAI,EAAC,GAAG,EACR,EAAE,EAAC,GAAG,EACN,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,QAAQ,EACf,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,GACxB,CACK;IACTA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,aAAa,EAAC,aAAa,EAAC,IAAI,EAAC,GAAG,EAAC,EAAE,EAAC,KAAK,EAAA;AACzE,QAAAA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,GAAG,EACjB,IAAI,EAAC,GAAG,EACR,EAAE,EAAC,GAAG,EACN,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,QAAQ,EACf,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,EAAA,CACxB;AACF,QAAAA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,aAAa,EAC3B,IAAI,EAAC,KAAK,EACV,EAAE,EAAC,KAAK,EACR,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,SAAS,EAChB,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,GACxB,CACK;IACTA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAA;AAC7B,QAAAA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,GAAG,EACjB,IAAI,EAAC,IAAI,EACT,EAAE,EAAC,IAAI,EACP,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,SAAS,EAChB,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,EAAA,CACxB;AACF,QAAAA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,aAAa,EAC3B,IAAI,EAAC,GAAG,EACR,EAAE,EAAC,GAAG,EACN,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,QAAQ,EACf,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,EAAA,CACxB,CACK,CACL;;;;"}
+{"version":3,"file":"ThreeDots.js","sources":["../../../src/components/Loader/ThreeDots.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface ThreeDotsProps {\n  width?: number;\n  height?: number;\n  className?: string;\n  label?: string;\n}\n\nexport const ThreeDots = ({ width, height, className, label }: ThreeDotsProps) => (\n  <svg\n    width={width}\n    height={height}\n    className={className}\n    viewBox=\"0 0 120 30\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"currentColor\"\n    aria-label={label}\n  >\n    <circle cx=\"15\" cy=\"15\" r=\"15\">\n      <animate\n        attributeName=\"r\"\n        from=\"15\"\n        to=\"15\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\"15;9;15\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n      <animate\n        attributeName=\"fillOpacity\"\n        from=\"1\"\n        to=\"1\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\"1;.5;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"60\" cy=\"15\" r=\"9\" attributeName=\"fillOpacity\" from=\"1\" to=\"0.3\">\n      <animate\n        attributeName=\"r\"\n        from=\"9\"\n        to=\"9\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\"9;15;9\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n      <animate\n        attributeName=\"fillOpacity\"\n        from=\"0.5\"\n        to=\"0.5\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\".5;1;.5\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n    <circle cx=\"105\" cy=\"15\" r=\"15\">\n      <animate\n        attributeName=\"r\"\n        from=\"15\"\n        to=\"15\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\"15;9;15\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n      <animate\n        attributeName=\"fillOpacity\"\n        from=\"1\"\n        to=\"1\"\n        begin=\"0s\"\n        dur=\"0.8s\"\n        values=\"1;.5;1\"\n        calcMode=\"linear\"\n        repeatCount=\"indefinite\"\n      />\n    </circle>\n  </svg>\n);\n"],"names":["React"],"mappings":";;AASO,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAkB,MAC3EA,sCACE,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,YAAY,EACpB,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,gBACP,KAAK,EAAA;IAEjBA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAA;AAC5B,QAAAA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,GAAG,EACjB,IAAI,EAAC,IAAI,EACT,EAAE,EAAC,IAAI,EACP,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,SAAS,EAChB,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,EAAA,CACxB;AACF,QAAAA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,aAAa,EAC3B,IAAI,EAAC,GAAG,EACR,EAAE,EAAC,GAAG,EACN,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,QAAQ,EACf,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,GACxB,CACK;IACTA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,aAAa,EAAC,aAAa,EAAC,IAAI,EAAC,GAAG,EAAC,EAAE,EAAC,KAAK,EAAA;AACzE,QAAAA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,GAAG,EACjB,IAAI,EAAC,GAAG,EACR,EAAE,EAAC,GAAG,EACN,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,QAAQ,EACf,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,EAAA,CACxB;AACF,QAAAA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,aAAa,EAC3B,IAAI,EAAC,KAAK,EACV,EAAE,EAAC,KAAK,EACR,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,SAAS,EAChB,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,GACxB,CACK;IACTA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAA;AAC7B,QAAAA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,GAAG,EACjB,IAAI,EAAC,IAAI,EACT,EAAE,EAAC,IAAI,EACP,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,SAAS,EAChB,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,EAAA,CACxB;AACF,QAAAA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,aAAa,EAAC,aAAa,EAC3B,IAAI,EAAC,GAAG,EACR,EAAE,EAAC,GAAG,EACN,KAAK,EAAC,IAAI,EACV,GAAG,EAAC,MAAM,EACV,MAAM,EAAC,QAAQ,EACf,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,YAAY,EAAA,CACxB,CACK,CACL;;;;"}

package/dist/components/Loader/loader.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle(":where(._loader_13ov0_1) {\n  color: var(--colors-secondary-blue-base);\n}");
+var styles = {"loader":"_loader_13ov0_1"};
+
+module.exports = styles;
+//# sourceMappingURL=loader.module.scss.cjs.map

package/dist/components/Loader/loader.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.module.scss.cjs","sources":["../../../src/components/Loader/loader.module.scss"],"sourcesContent":[":where(.loader) {\n  color: var(--colors-secondary-blue-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,4EAAA;;;;;"}

package/dist/components/Loader/loader.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle(":where(._loader_13ov0_1) {\n  color: var(--colors-secondary-blue-base);\n}");
+var styles = {"loader":"_loader_13ov0_1"};
+
+export { styles as default };
+//# sourceMappingURL=loader.module.scss.js.map

package/dist/components/Loader/loader.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.module.scss.js","sources":["../../../src/components/Loader/loader.module.scss"],"sourcesContent":[":where(.loader) {\n  color: var(--colors-secondary-blue-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,4EAAA;;;;;"}

package/dist/components/Loader/loaderTypes.d.ts

@@ -3,6 +3,5 @@ export interface LoaderProps {
     className?: string;
     height?: number;
     width?: number;
-    color?: string;
     type?: LoaderType;
 }

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var styled = require('./styled.cjs');
+var LoginWithAmazonButton_module = require('./LoginWithAmazonButton.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -22,7 +22,7 @@ const LoginWithAmazonButton = (props) => {
     const handleMouseUp = () => {
         setImage(buttonImg);
     };
-    return (React__default.default.createElement(styled.LoginButton, { onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, "aria-label": buttonDescription, ...props },
+    return (React__default.default.createElement("button", { type: "button", className: LoginWithAmazonButton_module.loginButton, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, "aria-label": buttonDescription, ...props },
         React__default.default.createElement("img", { src: image, alt: buttonDescription })));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"LoginWithAmazonButton.cjs","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { LoginButton } from './styled';\n\nconst buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';\nconst buttonPressedImg =\n  'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';\n\nexport const buttonDescription = 'Log in with Amazon';\n\n/**\n * Image used in this button is to comply with official\n * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).\n */\nexport const LoginWithAmazonButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = (\n  props,\n) => {\n  const [image, setImage] = useState(buttonImg);\n\n  const handleMouseDown = () => {\n    setImage(buttonPressedImg);\n  };\n\n  const handleMouseUp = () => {\n    setImage(buttonImg);\n  };\n\n  return (\n    <LoginButton\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      aria-label={buttonDescription}\n      {...props}\n    >\n      {/* alt attr for better accessibility if image is failed to load */}\n      <img src={image} alt={buttonDescription} />\n    </LoginButton>\n  );\n};\n"],"names":["useState","React","LoginButton"],"mappings":";;;;;;;;;AAGA,MAAM,SAAS,GAAG,gFAAgF;AAClG,MAAM,gBAAgB,GACpB,wFAAwF;AAEnF,MAAM,iBAAiB,GAAG;AAEjC;;;AAGG;AACI,MAAM,qBAAqB,GAA4D,CAC5F,KAAK,KACH;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGA,cAAQ,CAAC,SAAS,CAAC;IAE7C,MAAM,eAAe,GAAG,MAAK;QAC3B,QAAQ,CAAC,gBAAgB,CAAC;AAC5B,IAAA,CAAC;IAED,MAAM,aAAa,GAAG,MAAK;QACzB,QAAQ,CAAC,SAAS,CAAC;AACrB,IAAA,CAAC;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,kBAAW,EAAA,EACV,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,EAAA,YAAA,EACZ,iBAAiB,KACzB,KAAK,EAAA;QAGTD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAA,CAAI,CAC/B;AAElB;;;;;"}
+{"version":3,"file":"LoginWithAmazonButton.cjs","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport styles from './LoginWithAmazonButton.module.scss';\n\nconst buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';\nconst buttonPressedImg =\n  'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';\n\nexport const buttonDescription = 'Log in with Amazon';\n\n/**\n * Image used in this button is to comply with official\n * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).\n */\nexport const LoginWithAmazonButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = (\n  props,\n) => {\n  const [image, setImage] = useState(buttonImg);\n\n  const handleMouseDown = () => {\n    setImage(buttonPressedImg);\n  };\n\n  const handleMouseUp = () => {\n    setImage(buttonImg);\n  };\n\n  return (\n    <button\n      type=\"button\"\n      className={styles.loginButton}\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      aria-label={buttonDescription}\n      {...props}\n    >\n      {/* alt attr for better accessibility if image is failed to load */}\n      <img src={image} alt={buttonDescription} />\n    </button>\n  );\n};\n"],"names":["useState","React","styles"],"mappings":";;;;;;;;;AAGA,MAAM,SAAS,GAAG,gFAAgF;AAClG,MAAM,gBAAgB,GACpB,wFAAwF;AAEnF,MAAM,iBAAiB,GAAG;AAEjC;;;AAGG;AACI,MAAM,qBAAqB,GAA4D,CAC5F,KAAK,KACH;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGA,cAAQ,CAAC,SAAS,CAAC;IAE7C,MAAM,eAAe,GAAG,MAAK;QAC3B,QAAQ,CAAC,gBAAgB,CAAC;AAC5B,IAAA,CAAC;IAED,MAAM,aAAa,GAAG,MAAK;QACzB,QAAQ,CAAC,SAAS,CAAC;AACrB,IAAA,CAAC;IAED,QACEC,iDACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAEC,4BAAM,CAAC,WAAW,EAC7B,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,EAAA,YAAA,EACZ,iBAAiB,EAAA,GACzB,KAAK,EAAA;QAGTD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAA,CAAI,CACpC;AAEb;;;;;"}

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.js

@@ -1,5 +1,5 @@
 import React__default, { useState } from 'react';
-import { LoginButton } from './styled.js';
+import styles from './LoginWithAmazonButton.module.scss.js';
 
 const buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';
 const buttonPressedImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';
@@ -16,7 +16,7 @@ const LoginWithAmazonButton = (props) => {
     const handleMouseUp = () => {
         setImage(buttonImg);
     };
-    return (React__default.createElement(LoginButton, { onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, "aria-label": buttonDescription, ...props },
+    return (React__default.createElement("button", { type: "button", className: styles.loginButton, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, "aria-label": buttonDescription, ...props },
         React__default.createElement("img", { src: image, alt: buttonDescription })));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"LoginWithAmazonButton.js","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { LoginButton } from './styled';\n\nconst buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';\nconst buttonPressedImg =\n  'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';\n\nexport const buttonDescription = 'Log in with Amazon';\n\n/**\n * Image used in this button is to comply with official\n * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).\n */\nexport const LoginWithAmazonButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = (\n  props,\n) => {\n  const [image, setImage] = useState(buttonImg);\n\n  const handleMouseDown = () => {\n    setImage(buttonPressedImg);\n  };\n\n  const handleMouseUp = () => {\n    setImage(buttonImg);\n  };\n\n  return (\n    <LoginButton\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      aria-label={buttonDescription}\n      {...props}\n    >\n      {/* alt attr for better accessibility if image is failed to load */}\n      <img src={image} alt={buttonDescription} />\n    </LoginButton>\n  );\n};\n"],"names":["React"],"mappings":";;;AAGA,MAAM,SAAS,GAAG,gFAAgF;AAClG,MAAM,gBAAgB,GACpB,wFAAwF;AAEnF,MAAM,iBAAiB,GAAG;AAEjC;;;AAGG;AACI,MAAM,qBAAqB,GAA4D,CAC5F,KAAK,KACH;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC;IAE7C,MAAM,eAAe,GAAG,MAAK;QAC3B,QAAQ,CAAC,gBAAgB,CAAC;AAC5B,IAAA,CAAC;IAED,MAAM,aAAa,GAAG,MAAK;QACzB,QAAQ,CAAC,SAAS,CAAC;AACrB,IAAA,CAAC;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,EAAA,YAAA,EACZ,iBAAiB,KACzB,KAAK,EAAA;QAGTA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAA,CAAI,CAC/B;AAElB;;;;"}
+{"version":3,"file":"LoginWithAmazonButton.js","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport styles from './LoginWithAmazonButton.module.scss';\n\nconst buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';\nconst buttonPressedImg =\n  'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';\n\nexport const buttonDescription = 'Log in with Amazon';\n\n/**\n * Image used in this button is to comply with official\n * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).\n */\nexport const LoginWithAmazonButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = (\n  props,\n) => {\n  const [image, setImage] = useState(buttonImg);\n\n  const handleMouseDown = () => {\n    setImage(buttonPressedImg);\n  };\n\n  const handleMouseUp = () => {\n    setImage(buttonImg);\n  };\n\n  return (\n    <button\n      type=\"button\"\n      className={styles.loginButton}\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      aria-label={buttonDescription}\n      {...props}\n    >\n      {/* alt attr for better accessibility if image is failed to load */}\n      <img src={image} alt={buttonDescription} />\n    </button>\n  );\n};\n"],"names":["React"],"mappings":";;;AAGA,MAAM,SAAS,GAAG,gFAAgF;AAClG,MAAM,gBAAgB,GACpB,wFAAwF;AAEnF,MAAM,iBAAiB,GAAG;AAEjC;;;AAGG;AACI,MAAM,qBAAqB,GAA4D,CAC5F,KAAK,KACH;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC;IAE7C,MAAM,eAAe,GAAG,MAAK;QAC3B,QAAQ,CAAC,gBAAgB,CAAC;AAC5B,IAAA,CAAC;IAED,MAAM,aAAa,GAAG,MAAK;QACzB,QAAQ,CAAC,SAAS,CAAC;AACrB,IAAA,CAAC;IAED,QACEA,yCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,EAAA,YAAA,EACZ,iBAAiB,EAAA,GACzB,KAAK,EAAA;QAGTA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAA,CAAI,CACpC;AAEb;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._loginButton_y5bj1_1 {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n}\n._loginButton_y5bj1_1 img {\n  width: 156px;\n  height: 32px;\n}");
+var styles = {"loginButton":"_loginButton_y5bj1_1"};
+
+module.exports = styles;
+//# sourceMappingURL=LoginWithAmazonButton.module.scss.cjs.map

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

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

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

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

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

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

package/dist/components/Pagination/Pagination.cjs

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

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

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

package/dist/components/Pagination/Pagination.js

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/Pagination/components.cjs

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

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

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

package/dist/components/Pagination/components.js

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