@veeqo/ui 14.11.1 → 14.12.0-beta-1

package/dist/components/FilterTag/styled.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+var styled = require('styled-components');
+var colors = require('../../theme/modules/colors.cjs');
+var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
+var Text = require('../Text/Text.cjs');
+require('react');
+require('react-transition-group');
+require('uid/secure');
+require('../AnimatedDropdown/components/BasicDropdown.cjs');
+var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
+var DownArrowIcon = require('../../icons/design-system/components/DownArrowIcon.cjs');
+var sizes = require('../../theme/modules/sizes.cjs');
+var index = require('../../theme/index.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const Container = styled__default.default(BaseContainer.BaseContainer).attrs({
+    as: 'button',
+}).withConfig({ displayName: "vui--Container", componentId: "vui--1tebbdi" }) `display:inline-flex;flex-direction:row;align-items:center;background-color:${colors.colors.neutral.grey.base};padding:4px 8px;cursor:pointer;border:1px solid ${colors.colors.neutral.grey.dark};border-radius:4px;svg{width:${sizes.sizes.base};height:${sizes.sizes.base};}&:focus{outline:none;box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}`;
+const NonSelectableText = styled__default.default(Text.Text).withConfig({ displayName: "vui--NonSelectableText", componentId: "vui--qz697a" }) `user-select:none;`;
+const GroupLabel = styled__default.default(NonSelectableText).withConfig({ displayName: "vui--GroupLabel", componentId: "vui--17i198i" }) `margin-right:4px;`;
+const MainIcon = styled__default.default(DownArrowIcon.ReactComponent).withConfig({ displayName: "vui--MainIcon", componentId: "vui--rxq762" }) `margin-left:4px;transform:rotate(${(props) => (props.$shouldShow ? '180deg' : '0')});width:10px;height:10px;`;
+const StyledCrossIcon = styled__default.default(CrossIcon.ReactComponent).withConfig({ displayName: "vui--StyledCrossIcon", componentId: "vui--1o2zyml" }) `margin-left:4px;height:10px;width:10px;`;
+const Content = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Content", componentId: "vui--6n2anv" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;`;
+const Header = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Header", componentId: "vui--n9war0" }) `display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:12px 18px;border-bottom:1px solid ${colors.colors.neutral.grey.base};svg{color:${({ color }) => color};width:${sizes.sizes[5]};height:${sizes.sizes[5]};margin-right:10px;}`;
+
+exports.Text = Text.Text;
+exports.Container = Container;
+exports.Content = Content;
+exports.CrossIcon = StyledCrossIcon;
+exports.GroupLabel = GroupLabel;
+exports.Header = Header;
+exports.MainIcon = MainIcon;
+//# sourceMappingURL=styled.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/FilterTag/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { AnimatedDropdown } from '../AnimatedDropdown';\nimport { CrossIcon, DownArrowIcon } from '../../icons';\nimport { sizes } from '../../theme/modules/sizes';\nimport { theme } from '../../theme';\n\nconst Container = styled(BaseContainer).attrs({\n  as: 'button',\n})`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${colors.neutral.grey.base};\n  padding: 4px 8px;\n  cursor: pointer;\n\n  border: 1px solid ${colors.neutral.grey.dark};\n  border-radius: 4px;\n\n  svg {\n    width: ${sizes.base};\n    height: ${sizes.base};\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst NonSelectableText = styled(Text)`\n  user-select: none;\n`;\n\nconst GroupLabel = styled(NonSelectableText)`\n  margin-right: 4px;\n`;\n\nconst MainIcon = styled(DownArrowIcon)<{ $shouldShow?: boolean }>`\n  margin-left: 4px;\n  transform: rotate(${(props) => (props.$shouldShow ? '180deg' : '0')});\n\n  width: 10px;\n  height: 10px;\n`;\n\nconst StyledCrossIcon = styled(CrossIcon)`\n  margin-left: 4px;\n  height: 10px;\n  width: 10px;\n`;\n\nconst Content = styled(BaseContainer)`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n`;\n\nconst Header = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 12px 18px;\n  border-bottom: 1px solid ${colors.neutral.grey.base};\n\n  svg {\n    color: ${({ color }) => color};\n    width: ${sizes[5]};\n    height: ${sizes[5]};\n    margin-right: 10px;\n  }\n`;\n\nexport {\n  Container,\n  Text,\n  AnimatedDropdown as Dropdown,\n  GroupLabel,\n  Content,\n  Header,\n  MainIcon,\n  StyledCrossIcon as CrossIcon,\n};\n"],"names":["styled","BaseContainer","colors","sizes","theme","Text","DownArrowIcon","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;;AAWA,MAAM,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,EAAE,EAAE,QAAQ;AACb,CAAA,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2EAAA,EAIoBC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,iDAAA,EAIxBA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,6BAAA,EAIjCC,WAAK,CAAC,IAAI,CAAA,QAAA,EACTA,WAAK,CAAC,IAAI,+CAKIC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,iBAAiB,GAAGJ,uBAAM,CAACK,SAAI,CAAC,sGAErC;AAED,MAAM,UAAU,GAAGL,uBAAM,CAAC,iBAAiB,CAAC;AAI5C,MAAM,QAAQ,GAAGA,uBAAM,CAACM,4BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEhB,CAAC,KAAK,MAAM,KAAK,CAAC,WAAW,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAA,yBAAA;AAMrE,MAAM,eAAe,GAAGN,uBAAM,CAACO,wBAAS,CAAC;AAMzC,MAAM,OAAO,GAAGP,uBAAM,CAACC,2BAAa,CAAC;AAOrC,MAAM,MAAM,GAAGD,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAMPC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,cAGxC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,UACpBC,WAAK,CAAC,CAAC,CAAC,WACPA,WAAK,CAAC,CAAC,CAAC;;;;;;;;;;"}

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { Text } from '../Text';
+import { AnimatedDropdown } from '../AnimatedDropdown';
+declare const Container: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
+    as: "button";
+}, "as">;
+declare const GroupLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    as?: import("../Text").ValidTextTag | undefined;
+    muted?: boolean | undefined;
+    variant?: "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "body" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholder" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "button" | "buttonSmall" | "linkLarge" | "linkMedium" | "link" | "linkSmall" | undefined;
+} & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+declare const MainIcon: import("styled-components").StyledComponent<(props: import("react").SVGProps<SVGSVGElement>) => import("react").JSX.Element, any, {
+    $shouldShow?: boolean | undefined;
+}, never>;
+declare const StyledCrossIcon: import("styled-components").StyledComponent<(props: import("react").SVGProps<SVGSVGElement>) => import("react").JSX.Element, any, {}, never>;
+declare const Content: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+declare const Header: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
+    color: string;
+}, never>;
+export { Container, Text, AnimatedDropdown as Dropdown, GroupLabel, Content, Header, MainIcon, StyledCrossIcon as CrossIcon, };

package/dist/components/FilterTag/styled.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { colors } from '../../theme/modules/colors.js';
+import { BaseContainer } from '../BaseContainer/BaseContainer.js';
+import { Text } from '../Text/Text.js';
+import 'react';
+import 'react-transition-group';
+import 'uid/secure';
+import '../AnimatedDropdown/components/BasicDropdown.js';
+import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
+import { ReactComponent as DownArrowIcon } from '../../icons/design-system/components/DownArrowIcon.js';
+import { sizes } from '../../theme/modules/sizes.js';
+import { theme } from '../../theme/index.js';
+
+const Container = styled(BaseContainer).attrs({
+    as: 'button',
+}).withConfig({ displayName: "vui--Container", componentId: "vui--1tebbdi" }) `display:inline-flex;flex-direction:row;align-items:center;background-color:${colors.neutral.grey.base};padding:4px 8px;cursor:pointer;border:1px solid ${colors.neutral.grey.dark};border-radius:4px;svg{width:${sizes.base};height:${sizes.base};}&:focus{outline:none;box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}`;
+const NonSelectableText = styled(Text).withConfig({ displayName: "vui--NonSelectableText", componentId: "vui--qz697a" }) `user-select:none;`;
+const GroupLabel = styled(NonSelectableText).withConfig({ displayName: "vui--GroupLabel", componentId: "vui--17i198i" }) `margin-right:4px;`;
+const MainIcon = styled(DownArrowIcon).withConfig({ displayName: "vui--MainIcon", componentId: "vui--rxq762" }) `margin-left:4px;transform:rotate(${(props) => (props.$shouldShow ? '180deg' : '0')});width:10px;height:10px;`;
+const StyledCrossIcon = styled(CrossIcon).withConfig({ displayName: "vui--StyledCrossIcon", componentId: "vui--1o2zyml" }) `margin-left:4px;height:10px;width:10px;`;
+const Content = styled(BaseContainer).withConfig({ displayName: "vui--Content", componentId: "vui--6n2anv" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;`;
+const Header = styled(BaseContainer).withConfig({ displayName: "vui--Header", componentId: "vui--n9war0" }) `display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:12px 18px;border-bottom:1px solid ${colors.neutral.grey.base};svg{color:${({ color }) => color};width:${sizes[5]};height:${sizes[5]};margin-right:10px;}`;
+
+export { Container, Content, StyledCrossIcon as CrossIcon, GroupLabel, Header, MainIcon, Text };
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../src/components/FilterTag/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { AnimatedDropdown } from '../AnimatedDropdown';\nimport { CrossIcon, DownArrowIcon } from '../../icons';\nimport { sizes } from '../../theme/modules/sizes';\nimport { theme } from '../../theme';\n\nconst Container = styled(BaseContainer).attrs({\n  as: 'button',\n})`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${colors.neutral.grey.base};\n  padding: 4px 8px;\n  cursor: pointer;\n\n  border: 1px solid ${colors.neutral.grey.dark};\n  border-radius: 4px;\n\n  svg {\n    width: ${sizes.base};\n    height: ${sizes.base};\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst NonSelectableText = styled(Text)`\n  user-select: none;\n`;\n\nconst GroupLabel = styled(NonSelectableText)`\n  margin-right: 4px;\n`;\n\nconst MainIcon = styled(DownArrowIcon)<{ $shouldShow?: boolean }>`\n  margin-left: 4px;\n  transform: rotate(${(props) => (props.$shouldShow ? '180deg' : '0')});\n\n  width: 10px;\n  height: 10px;\n`;\n\nconst StyledCrossIcon = styled(CrossIcon)`\n  margin-left: 4px;\n  height: 10px;\n  width: 10px;\n`;\n\nconst Content = styled(BaseContainer)`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n`;\n\nconst Header = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 12px 18px;\n  border-bottom: 1px solid ${colors.neutral.grey.base};\n\n  svg {\n    color: ${({ color }) => color};\n    width: ${sizes[5]};\n    height: ${sizes[5]};\n    margin-right: 10px;\n  }\n`;\n\nexport {\n  Container,\n  Text,\n  AnimatedDropdown as Dropdown,\n  GroupLabel,\n  Content,\n  Header,\n  MainIcon,\n  StyledCrossIcon as CrossIcon,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAWA,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,EAAE,EAAE,QAAQ;AACb,CAAA,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2EAAA,EAIoB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,iDAAA,EAIxB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,6BAAA,EAIjC,KAAK,CAAC,IAAI,CAAA,QAAA,EACT,KAAK,CAAC,IAAI,+CAKI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,sGAErC;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAI5C,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEhB,CAAC,KAAK,MAAM,KAAK,CAAC,WAAW,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAA,yBAAA;AAMrE,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC;AAMzC,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC;AAOrC,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAMP,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,cAGxC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,UACpB,KAAK,CAAC,CAAC,CAAC,WACP,KAAK,CAAC,CAAC,CAAC;;;;"}

package/dist/components/Indicator/Indicator.cjs

@@ -1,23 +1,16 @@
 'use strict';
 
 var React = require('react');
-var buildClassnames = require('../../utils/buildClassnames.cjs');
-require('uid/secure');
-var assignCssVars = require('../../utils/assignCssVars.cjs');
-var Indicator_module = require('./Indicator.module.scss.cjs');
+var index = require('../../theme/index.cjs');
+var styled = require('./styled.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Indicator = ({ color, style, textColour, size = 'base', className, ...otherProps }) => {
-    return (React__default.default.createElement("div", { role: "status", className: buildClassnames.buildClassnames([Indicator_module.indicator, Indicator_module[`${size}-size`], className]), style: {
-            ...assignCssVars.assignCssVars({
-                indicatorColor: color,
-                indicatorTextColor: textColour,
-            }),
-            ...style,
-        }, ...otherProps }));
+const Indicator = ({ color, style, textColour, size = 'base', ...otherProps }) => {
+    const backgroundColor = color || index.theme.colors.neutral.grey.base;
+    return (React__default.default.createElement(styled.Wrapper, { role: "status", style: { backgroundColor, color: textColour, ...style }, size: size, ...otherProps }));
 };
 
 exports.Indicator = Indicator;

package/dist/components/Indicator/Indicator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Indicator.cjs","sources":["../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport styles from './Indicator.module.scss';\nimport { IndicatorProps } from './types';\n\nexport const Indicator = ({\n  color,\n  style,\n  textColour,\n  size = 'base',\n  className,\n  ...otherProps\n}: IndicatorProps) => {\n  return (\n    <div\n      role=\"status\"\n      className={buildClassnames([styles.indicator, styles[`${size}-size`], className])}\n      style={{\n        ...assignCssVars({\n          indicatorColor: color,\n          indicatorTextColor: textColour,\n        }),\n        ...style,\n      }}\n      {...otherProps}\n    />\n  );\n};\n"],"names":["React","buildClassnames","styles","assignCssVars"],"mappings":";;;;;;;;;;;;MAKa,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,UAAU,EACV,IAAI,GAAG,MAAM,EACb,SAAS,EACT,GAAG,UAAU,EACE,KAAI;IACnB,QACEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAEC,+BAAe,CAAC,CAACC,gBAAM,CAAC,SAAS,EAAEA,gBAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC,EAAE,SAAS,CAAC,CAAC,EACjF,KAAK,EAAE;AACL,YAAA,GAAGC,2BAAa,CAAC;AACf,gBAAA,cAAc,EAAE,KAAK;AACrB,gBAAA,kBAAkB,EAAE,UAAU;aAC/B,CAAC;AACF,YAAA,GAAG,KAAK;SACT,EAAA,GACG,UAAU,EAAA,CACd;AAEN;;;;"}
+{"version":3,"file":"Indicator.cjs","sources":["../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from 'Theme';\nimport { Wrapper } from './styled';\nimport { IndicatorProps } from './types';\n\nexport const Indicator = ({\n  color,\n  style,\n  textColour,\n  size = 'base',\n  ...otherProps\n}: IndicatorProps) => {\n  const backgroundColor = color || theme.colors.neutral.grey.base;\n  return (\n    <Wrapper\n      role=\"status\"\n      style={{ backgroundColor, color: textColour, ...style }}\n      size={size}\n      {...otherProps}\n    />\n  );\n};\n"],"names":["theme","React","Wrapper"],"mappings":";;;;;;;;;;MAKa,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,UAAU,EACV,IAAI,GAAG,MAAM,EACb,GAAG,UAAU,EACE,KAAI;AACnB,IAAA,MAAM,eAAe,GAAG,KAAK,IAAIA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAC/D,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,cAAO,EAAA,EACN,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EACvD,IAAI,EAAE,IAAI,EAAA,GACN,UAAU,EAAA,CACd;AAEN;;;;"}

package/dist/components/Indicator/Indicator.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { IndicatorProps } from './types';
-export declare const Indicator: ({ color, style, textColour, size, className, ...otherProps }: IndicatorProps) => React.JSX.Element;
+export declare const Indicator: ({ color, style, textColour, size, ...otherProps }: IndicatorProps) => React.JSX.Element;

package/dist/components/Indicator/Indicator.js

@@ -1,17 +1,10 @@
 import React__default from 'react';
-import { buildClassnames } from '../../utils/buildClassnames.js';
-import 'uid/secure';
-import { assignCssVars } from '../../utils/assignCssVars.js';
-import styles from './Indicator.module.scss.js';
+import { theme } from '../../theme/index.js';
+import { Wrapper } from './styled.js';
 
-const Indicator = ({ color, style, textColour, size = 'base', className, ...otherProps }) => {
-    return (React__default.createElement("div", { role: "status", className: buildClassnames([styles.indicator, styles[`${size}-size`], className]), style: {
-            ...assignCssVars({
-                indicatorColor: color,
-                indicatorTextColor: textColour,
-            }),
-            ...style,
-        }, ...otherProps }));
+const Indicator = ({ color, style, textColour, size = 'base', ...otherProps }) => {
+    const backgroundColor = color || theme.colors.neutral.grey.base;
+    return (React__default.createElement(Wrapper, { role: "status", style: { backgroundColor, color: textColour, ...style }, size: size, ...otherProps }));
 };
 
 export { Indicator };

package/dist/components/Indicator/Indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Indicator.js","sources":["../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport styles from './Indicator.module.scss';\nimport { IndicatorProps } from './types';\n\nexport const Indicator = ({\n  color,\n  style,\n  textColour,\n  size = 'base',\n  className,\n  ...otherProps\n}: IndicatorProps) => {\n  return (\n    <div\n      role=\"status\"\n      className={buildClassnames([styles.indicator, styles[`${size}-size`], className])}\n      style={{\n        ...assignCssVars({\n          indicatorColor: color,\n          indicatorTextColor: textColour,\n        }),\n        ...style,\n      }}\n      {...otherProps}\n    />\n  );\n};\n"],"names":["React"],"mappings":";;;;;;MAKa,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,UAAU,EACV,IAAI,GAAG,MAAM,EACb,SAAS,EACT,GAAG,UAAU,EACE,KAAI;IACnB,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC,EAAE,SAAS,CAAC,CAAC,EACjF,KAAK,EAAE;AACL,YAAA,GAAG,aAAa,CAAC;AACf,gBAAA,cAAc,EAAE,KAAK;AACrB,gBAAA,kBAAkB,EAAE,UAAU;aAC/B,CAAC;AACF,YAAA,GAAG,KAAK;SACT,EAAA,GACG,UAAU,EAAA,CACd;AAEN;;;;"}
+{"version":3,"file":"Indicator.js","sources":["../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from 'Theme';\nimport { Wrapper } from './styled';\nimport { IndicatorProps } from './types';\n\nexport const Indicator = ({\n  color,\n  style,\n  textColour,\n  size = 'base',\n  ...otherProps\n}: IndicatorProps) => {\n  const backgroundColor = color || theme.colors.neutral.grey.base;\n  return (\n    <Wrapper\n      role=\"status\"\n      style={{ backgroundColor, color: textColour, ...style }}\n      size={size}\n      {...otherProps}\n    />\n  );\n};\n"],"names":["React"],"mappings":";;;;MAKa,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,UAAU,EACV,IAAI,GAAG,MAAM,EACb,GAAG,UAAU,EACE,KAAI;AACnB,IAAA,MAAM,eAAe,GAAG,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAC/D,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EACvD,IAAI,EAAE,IAAI,EAAA,GACN,UAAU,EAAA,CACd;AAEN;;;;"}

package/dist/components/Indicator/styled.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var styled = require('styled-components');
+var index = require('../../theme/index.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const sizes = {
+    base: '28px',
+    sm: '20px',
+    xs: '16px',
+};
+const borderRadius = {
+    base: '18px',
+    sm: '10px',
+    xs: '8px',
+};
+const offset = {
+    base: '-12px',
+    sm: '-8px',
+    xs: '-6px',
+};
+const Wrapper = styled__default.default.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--gpqjtl" }) `position:absolute;top:${({ size }) => offset[size]};right:${({ size }) => offset[size]};box-sizing:border-box;height:${({ size }) => sizes[size]};min-width:${({ size }) => sizes[size]};display:flex;align-items:center;justify-content:center;border-radius:${({ size }) => borderRadius[size]};padding:0 4px;background-color:${({ color }) => color || index.theme.colors.neutral.grey.base};border:2px solid white;font-weight:bold;font-size:12px;`;
+
+exports.Wrapper = Wrapper;
+//# sourceMappingURL=styled.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Indicator/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\n\nconst sizes = {\n  base: '28px',\n  sm: '20px',\n  xs: '16px',\n};\n\nconst borderRadius = {\n  base: '18px',\n  sm: '10px',\n  xs: '8px',\n};\n\nconst offset = {\n  base: '-12px',\n  sm: '-8px',\n  xs: '-6px',\n};\n\nexport const Wrapper = styled.div<{ size: 'base' | 'sm' | 'xs' }>`\n  position: absolute;\n  top: ${({ size }) => offset[size]};\n  right: ${({ size }) => offset[size]};\n  box-sizing: border-box;\n\n  height: ${({ size }) => sizes[size]};\n  min-width: ${({ size }) => sizes[size]};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ${({ size }) => borderRadius[size]};\n  padding: 0 4px;\n  background-color: ${({ color }) => color || theme.colors.neutral.grey.base};\n  border: 2px solid white;\n  font-weight: bold;\n  font-size: 12px;\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAGA,MAAM,KAAK,GAAG;AACZ,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;CACX;AAED,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,KAAK;CACV;AAED,MAAM,MAAM,GAAG;AACb,IAAA,IAAI,EAAE,OAAO;AACb,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;CACX;AAEM,MAAM,OAAO,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAExB,CAAC,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC,CAAA,OAAA,EACxB,CAAC,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC,iCAGzB,CAAC,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CAAA,WAAA,EACtB,CAAC,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CAAA,sEAAA,EAIrB,CAAC,EAAE,IAAI,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC,CAAA,gCAAA,EAE7B,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,IAAIC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}

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

@@ -0,0 +1,3 @@
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
+    size: 'base' | 'sm' | 'xs';
+}, never>;

package/dist/components/Indicator/styled.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+import { theme } from '../../theme/index.js';
+
+const sizes = {
+    base: '28px',
+    sm: '20px',
+    xs: '16px',
+};
+const borderRadius = {
+    base: '18px',
+    sm: '10px',
+    xs: '8px',
+};
+const offset = {
+    base: '-12px',
+    sm: '-8px',
+    xs: '-6px',
+};
+const Wrapper = styled.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--gpqjtl" }) `position:absolute;top:${({ size }) => offset[size]};right:${({ size }) => offset[size]};box-sizing:border-box;height:${({ size }) => sizes[size]};min-width:${({ size }) => sizes[size]};display:flex;align-items:center;justify-content:center;border-radius:${({ size }) => borderRadius[size]};padding:0 4px;background-color:${({ color }) => color || theme.colors.neutral.grey.base};border:2px solid white;font-weight:bold;font-size:12px;`;
+
+export { Wrapper };
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../src/components/Indicator/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\n\nconst sizes = {\n  base: '28px',\n  sm: '20px',\n  xs: '16px',\n};\n\nconst borderRadius = {\n  base: '18px',\n  sm: '10px',\n  xs: '8px',\n};\n\nconst offset = {\n  base: '-12px',\n  sm: '-8px',\n  xs: '-6px',\n};\n\nexport const Wrapper = styled.div<{ size: 'base' | 'sm' | 'xs' }>`\n  position: absolute;\n  top: ${({ size }) => offset[size]};\n  right: ${({ size }) => offset[size]};\n  box-sizing: border-box;\n\n  height: ${({ size }) => sizes[size]};\n  min-width: ${({ size }) => sizes[size]};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ${({ size }) => borderRadius[size]};\n  padding: 0 4px;\n  background-color: ${({ color }) => color || theme.colors.neutral.grey.base};\n  border: 2px solid white;\n  font-weight: bold;\n  font-size: 12px;\n`;\n"],"names":[],"mappings":";;;AAGA,MAAM,KAAK,GAAG;AACZ,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;CACX;AAED,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,KAAK;CACV;AAED,MAAM,MAAM,GAAG;AACb,IAAA,IAAI,EAAE,OAAO;AACb,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;CACX;AAEM,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAExB,CAAC,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC,CAAA,OAAA,EACxB,CAAC,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC,iCAGzB,CAAC,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CAAA,WAAA,EACtB,CAAC,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CAAA,sEAAA,EAIrB,CAAC,EAAE,IAAI,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC,CAAA,gCAAA,EAE7B,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var LoginWithAmazonButton_module = require('./LoginWithAmazonButton.module.scss.cjs');
+var styled = require('./styled.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("button", { type: "button", className: LoginWithAmazonButton_module.loginButton, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, "aria-label": buttonDescription, ...props },
+    return (React__default.default.createElement(styled.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 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;;;;;"}
+{"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;;;;;"}

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.js

@@ -1,5 +1,5 @@
 import React__default, { useState } from 'react';
-import styles from './LoginWithAmazonButton.module.scss.js';
+import { LoginButton } from './styled.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("button", { type: "button", className: styles.loginButton, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, "aria-label": buttonDescription, ...props },
+    return (React__default.createElement(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 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;;;;"}
+{"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;;;;"}

package/dist/components/LoginWithAmazonButton/styled.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var styled = require('styled-components');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const LoginButton = styled__default.default.button.withConfig({ displayName: "vui--LoginButton", componentId: "vui--9ns5xb" }) `background:none;border:none;padding:0;cursor:pointer;img{width:156px;height:32px;}`;
+
+exports.LoginButton = LoginButton;
+//# sourceMappingURL=styled.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/LoginWithAmazonButton/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const LoginButton = styled.button`\n  /* Remove default button style */\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":["styled"],"mappings":";;;;;;;;MAEa,WAAW,GAAGA,uBAAM,CAAC,MAAM;;;;"}

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

@@ -0,0 +1 @@
+export declare const LoginButton: import("styled-components").StyledComponent<"button", any, {}, never>;

package/dist/components/LoginWithAmazonButton/styled.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+const LoginButton = styled.button.withConfig({ displayName: "vui--LoginButton", componentId: "vui--9ns5xb" }) `background:none;border:none;padding:0;cursor:pointer;img{width:156px;height:32px;}`;
+
+export { LoginButton };
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../src/components/LoginWithAmazonButton/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const LoginButton = styled.button`\n  /* Remove default button style */\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":";;MAEa,WAAW,GAAG,MAAM,CAAC,MAAM;;;;"}

package/dist/components/Pagination/Pagination.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var Pagination_module = require('./Pagination.module.scss.cjs');
+var styled = require('./styled.cjs');
 var components = require('./components.cjs');
 var usePagination = require('./hooks/usePagination.cjs');
 var EndArrowIcon = require('../../icons/design-system/components/EndArrowIcon.cjs');
@@ -9,8 +9,6 @@ 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 }; }
 
@@ -37,13 +35,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(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(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("form", { onSubmit: handleFormSubmit },
-            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(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(components.PageCount, { count: 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 })));
+        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 })));
 };
 
 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 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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"}
+{"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;;;;"}

package/dist/components/Pagination/Pagination.js

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

package/dist/components/Pagination/components.cjs

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

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

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

package/dist/components/Pagination/components.js

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

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

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