@veeqo/ui 14.9.1 → 14.10.0-beta-2

package/dist/components/Search/Search.js

@@ -1,32 +1,38 @@
 import React__default from 'react';
-import { theme } from '../../theme/index.js';
 import { withLabels } from '../../hoc/withLabels/withLabels.js';
-import { sizes } from '../../theme/modules/sizes.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
 import { Button } from '../Button/Button.js';
+import { Loader } from '../Loader/Loader.js';
+import { TextField } from '../TextField/index.js';
 import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
 import { ReactComponent as SearchIcon } from '../../icons/design-system/components/SearchIcon.js';
-import { Container, Input, IconContainer } from './styled.js';
-import { Loader } from '../Loader/Loader.js';
+import styles from './Search.module.scss.js';
 
 const Search = withLabels(({ type = 'text', disabled = false, onClearClick, onChange, value = '', className = '', isLoading = false, fill, reversed = false, autoComplete = 'on', ...otherProps }) => {
     const shouldShowClear = value && value.length > 0;
+    const iconPosition = reversed ? 'left' : 'right';
     const onClickSearch = () => {
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
     };
     const renderIcon = () => {
         if (isLoading) {
-            return React__default.createElement(Loader, { height: 24, color: fill || theme.colors.secondary.blue.base });
+            return React__default.createElement(Loader, { height: 24, color: fill || 'var(--colors-secondary-blue-base)' });
         }
         if (shouldShowClear && onClearClick) {
             return (React__default.createElement(Button, { variant: "unstyled", onClick: onClearClick, style: { display: 'flex' }, "aria-label": "Clear text", type: "button" },
-                React__default.createElement(CrossIcon, { color: fill || theme.colors.neutral.ink.dark })));
+                React__default.createElement(CrossIcon, { color: fill || 'var(--colors-neutral-ink-dark)' })));
         }
         return (React__default.createElement(Button, { variant: "unstyled", onClick: onClickSearch, style: { display: 'flex' }, "aria-label": "Search", disabled: disabled, type: "button" },
-            React__default.createElement(SearchIcon, { color: fill || theme.colors.neutral.ink.dark, height: sizes.md, width: sizes.md })));
+            React__default.createElement(SearchIcon, { color: fill || 'var(--colors-neutral-ink-dark)' })));
     };
-    return (React__default.createElement(Container, { className: className, iconPosition: reversed ? 'left' : 'right' },
-        React__default.createElement(Input, { type: type, value: value, onChange: onChange, disabled: disabled, autoComplete: autoComplete, ...otherProps }),
-        React__default.createElement(IconContainer, null, renderIcon())));
+    return (React__default.createElement("div", { className: buildClassnames([
+            styles.searchContainer,
+            iconPosition === 'left' ? styles.iconLeft : styles.iconRight,
+            className,
+        ]) },
+        React__default.createElement(TextField, { className: styles.searchInput, type: type, value: value, onChange: onChange, disabled: disabled, autoComplete: autoComplete, ...otherProps }),
+        React__default.createElement("div", { className: styles.iconContainer }, renderIcon())));
 });
 
 export { Search };

package/dist/components/Search/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import React from 'react';\n\nimport { theme } from '../../theme';\nimport { withLabels } from '../../hoc';\nimport { SearchProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\nimport { Button } from '../Button';\nimport { CrossIcon, SearchIcon } from '../../icons';\n\nimport { Container, Input, IconContainer, Loader } from './styled';\n\nexport const Search = withLabels(\n  ({\n    type = 'text',\n    disabled = false,\n    onClearClick,\n    onChange,\n    value = '',\n    className = '',\n    isLoading = false,\n    fill,\n    reversed = false,\n    autoComplete = 'on',\n    ...otherProps\n  }: SearchProps) => {\n    const shouldShowClear = value && value.length > 0;\n\n    const onClickSearch = () => {\n      onChange?.(value);\n    };\n\n    const renderIcon = () => {\n      if (isLoading) {\n        return <Loader height={24} color={fill || theme.colors.secondary.blue.base} />;\n      }\n      if (shouldShowClear && onClearClick) {\n        return (\n          <Button\n            variant=\"unstyled\"\n            onClick={onClearClick}\n            style={{ display: 'flex' }}\n            aria-label=\"Clear text\"\n            type=\"button\"\n          >\n            <CrossIcon color={fill || theme.colors.neutral.ink.dark} />\n          </Button>\n        );\n      }\n      return (\n        <Button\n          variant=\"unstyled\"\n          onClick={onClickSearch}\n          style={{ display: 'flex' }}\n          aria-label=\"Search\"\n          disabled={disabled}\n          type=\"button\"\n        >\n          <SearchIcon\n            color={fill || theme.colors.neutral.ink.dark}\n            height={sizes.md}\n            width={sizes.md}\n          />\n        </Button>\n      );\n    };\n\n    return (\n      <Container className={className} iconPosition={reversed ? 'left' : 'right'}>\n        <Input\n          type={type}\n          value={value}\n          onChange={onChange}\n          disabled={disabled}\n          autoComplete={autoComplete}\n          {...otherProps}\n        />\n        <IconContainer>{renderIcon()}</IconContainer>\n      </Container>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;;;;;;MAYa,MAAM,GAAG,UAAU,CAC9B,CAAC,EACC,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,YAAY,EACZ,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,SAAS,GAAG,EAAE,EACd,SAAS,GAAG,KAAK,EACjB,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,IAAI,EACnB,GAAG,UAAU,EACD,KAAI;IAChB,MAAM,eAAe,GAAG,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;IAEjD,MAAM,aAAa,GAAG,MAAK;AACzB,QAAA,QAAQ,aAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAG,KAAK,CAAC;AACnB,IAAA,CAAC;IAED,MAAM,UAAU,GAAG,MAAK;AACtB,QAAA,IAAI,SAAS,EAAE;YACb,OAAOA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAA,CAAI;AAC/E,QAAA;QACD,IAAI,eAAe,IAAI,YAAY,EAAE;YACnC,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,gBACf,YAAY,EACvB,IAAI,EAAC,QAAQ,EAAA;AAEb,gBAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CAAI,CACpD;AAEZ,QAAA;AACD,QAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,aAAa,EACtB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAA,YAAA,EACf,QAAQ,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EAAA;AAEb,YAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,KAAK,EAAE,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAC5C,MAAM,EAAE,KAAK,CAAC,EAAE,EAChB,KAAK,EAAE,KAAK,CAAC,EAAE,EAAA,CACf,CACK;AAEb,IAAA,CAAC;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,IAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA;QACxEA,cAAA,CAAA,aAAA,CAAC,KAAK,IACJ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAAA,GACtB,UAAU,EAAA,CACd;AACF,QAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA,EAAE,UAAU,EAAE,CAAiB,CACnC;AAEhB,CAAC;;;;"}
+{"version":3,"file":"Search.js","sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { buildClassnames } from '../../utils';\nimport { SearchProps } from './types';\n\nimport { Button } from '../Button';\nimport { Loader } from '../Loader';\nimport { TextField } from '../TextField';\nimport { CrossIcon, SearchIcon } from '../../icons';\n\nimport styles from './Search.module.scss';\n\nexport const Search = withLabels(\n  ({\n    type = 'text',\n    disabled = false,\n    onClearClick,\n    onChange,\n    value = '',\n    className = '',\n    isLoading = false,\n    fill,\n    reversed = false,\n    autoComplete = 'on',\n    ...otherProps\n  }: SearchProps) => {\n    const shouldShowClear = value && value.length > 0;\n    const iconPosition = reversed ? 'left' : 'right';\n\n    const onClickSearch = () => {\n      onChange?.(value);\n    };\n\n    const renderIcon = () => {\n      if (isLoading) {\n        return <Loader height={24} color={fill || 'var(--colors-secondary-blue-base)'} />;\n      }\n      if (shouldShowClear && onClearClick) {\n        return (\n          <Button\n            variant=\"unstyled\"\n            onClick={onClearClick}\n            style={{ display: 'flex' }}\n            aria-label=\"Clear text\"\n            type=\"button\"\n          >\n            <CrossIcon color={fill || 'var(--colors-neutral-ink-dark)'} />\n          </Button>\n        );\n      }\n      return (\n        <Button\n          variant=\"unstyled\"\n          onClick={onClickSearch}\n          style={{ display: 'flex' }}\n          aria-label=\"Search\"\n          disabled={disabled}\n          type=\"button\"\n        >\n          <SearchIcon color={fill || 'var(--colors-neutral-ink-dark)'} />\n        </Button>\n      );\n    };\n\n    return (\n      <div\n        className={buildClassnames([\n          styles.searchContainer,\n          iconPosition === 'left' ? styles.iconLeft : styles.iconRight,\n          className,\n        ])}\n      >\n        <TextField\n          className={styles.searchInput}\n          type={type}\n          value={value}\n          onChange={onChange}\n          disabled={disabled}\n          autoComplete={autoComplete}\n          {...otherProps}\n        />\n        <div className={styles.iconContainer}>{renderIcon()}</div>\n      </div>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;;;;;;;MAaa,MAAM,GAAG,UAAU,CAC9B,CAAC,EACC,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,YAAY,EACZ,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,SAAS,GAAG,EAAE,EACd,SAAS,GAAG,KAAK,EACjB,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,IAAI,EACnB,GAAG,UAAU,EACD,KAAI;IAChB,MAAM,eAAe,GAAG,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;IACjD,MAAM,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO;IAEhD,MAAM,aAAa,GAAG,MAAK;AACzB,QAAA,QAAQ,aAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAG,KAAK,CAAC;AACnB,IAAA,CAAC;IAED,MAAM,UAAU,GAAG,MAAK;AACtB,QAAA,IAAI,SAAS,EAAE;AACb,YAAA,OAAOA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,IAAI,mCAAmC,GAAI;AAClF,QAAA;QACD,IAAI,eAAe,IAAI,YAAY,EAAE;YACnC,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,gBACf,YAAY,EACvB,IAAI,EAAC,QAAQ,EAAA;gBAEbA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,IAAI,IAAI,gCAAgC,EAAA,CAAI,CACvD;AAEZ,QAAA;AACD,QAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,aAAa,EACtB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAA,YAAA,EACf,QAAQ,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EAAA;YAEbA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,KAAK,EAAE,IAAI,IAAI,gCAAgC,EAAA,CAAI,CACxD;AAEb,IAAA,CAAC;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,eAAe;AACtB,YAAA,YAAY,KAAK,MAAM,GAAG,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,SAAS;YAC5D,SAAS;SACV,CAAC,EAAA;AAEF,QAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAAA,GACtB,UAAU,EAAA,CACd;QACFA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,aAAa,EAAA,EAAG,UAAU,EAAE,CAAO,CACtD;AAEV,CAAC;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._searchContainer_12ul5_1 {\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: var(--radius-base);\n}\n\n._searchInput_12ul5_9 {\n  flex-grow: 2;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n._iconContainer_12ul5_15 {\n  position: absolute;\n}\n\n._iconLeft_12ul5_19 ._searchInput_12ul5_9 {\n  padding-left: var(--sizes-10);\n}\n._iconLeft_12ul5_19 ._iconContainer_12ul5_15 {\n  left: var(--sizes-sm);\n}\n\n._iconRight_12ul5_26 ._searchInput_12ul5_9 {\n  padding-right: var(--sizes-10);\n}\n._iconRight_12ul5_26 ._iconContainer_12ul5_15 {\n  right: var(--sizes-sm);\n}");
+var styles = {"searchContainer":"_searchContainer_12ul5_1","searchInput":"_searchInput_12ul5_9","iconContainer":"_iconContainer_12ul5_15","iconLeft":"_iconLeft_12ul5_19","iconRight":"_iconRight_12ul5_26"};
+
+module.exports = styles;
+//# sourceMappingURL=Search.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Search.module.scss.cjs","sources":["../../../src/components/Search/Search.module.scss"],"sourcesContent":[".searchContainer {\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: var(--radius-base);\n}\n\n.searchInput {\n  flex-grow: 2;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n.iconContainer {\n  position: absolute;\n}\n\n.iconLeft {\n  .searchInput {\n    padding-left: var(--sizes-10);\n  }\n\n  .iconContainer {\n    left: var(--sizes-sm);\n  }\n}\n\n.iconRight {\n  .searchInput {\n    padding-right: var(--sizes-10);\n  }\n\n  .iconContainer {\n    right: var(--sizes-sm);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,2nBAAA;AACA,aAAA,CAAA,iBAAA,CAAA,0BAAA,CAAA,aAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,WAAA,CAAA,qBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._searchContainer_12ul5_1 {\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: var(--radius-base);\n}\n\n._searchInput_12ul5_9 {\n  flex-grow: 2;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n._iconContainer_12ul5_15 {\n  position: absolute;\n}\n\n._iconLeft_12ul5_19 ._searchInput_12ul5_9 {\n  padding-left: var(--sizes-10);\n}\n._iconLeft_12ul5_19 ._iconContainer_12ul5_15 {\n  left: var(--sizes-sm);\n}\n\n._iconRight_12ul5_26 ._searchInput_12ul5_9 {\n  padding-right: var(--sizes-10);\n}\n._iconRight_12ul5_26 ._iconContainer_12ul5_15 {\n  right: var(--sizes-sm);\n}");
+var styles = {"searchContainer":"_searchContainer_12ul5_1","searchInput":"_searchInput_12ul5_9","iconContainer":"_iconContainer_12ul5_15","iconLeft":"_iconLeft_12ul5_19","iconRight":"_iconRight_12ul5_26"};
+
+export { styles as default };
+//# sourceMappingURL=Search.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Search.module.scss.js","sources":["../../../src/components/Search/Search.module.scss"],"sourcesContent":[".searchContainer {\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: var(--radius-base);\n}\n\n.searchInput {\n  flex-grow: 2;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n.iconContainer {\n  position: absolute;\n}\n\n.iconLeft {\n  .searchInput {\n    padding-left: var(--sizes-10);\n  }\n\n  .iconContainer {\n    left: var(--sizes-sm);\n  }\n}\n\n.iconRight {\n  .searchInput {\n    padding-right: var(--sizes-10);\n  }\n\n  .iconContainer {\n    right: var(--sizes-sm);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,2nBAAA;AACA,aAAA,CAAA,iBAAA,CAAA,0BAAA,CAAA,aAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,WAAA,CAAA,qBAAA;;;;"}

package/dist/components/Stepper/Stepper.cjs

@@ -1,10 +1,12 @@
 'use strict';
 
 var React = require('react');
-var index = require('../../theme/index.cjs');
-var styled = require('./styled.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
 var MinusIcon = require('../../icons/design-system/components/MinusIcon.cjs');
 var PlusIcon = require('../../icons/custom/components/PlusIcon.cjs');
+var Stepper_module = require('./Stepper.module.scss.cjs');
+var index = require('../../theme/index.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -12,12 +14,17 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const Stepper = ({ onIncrement, onDecrement, disabled, hasError, size }) => {
     const compact = size === 'sm';
-    return (React__default.default.createElement(styled.ContainerStack, { hasError: hasError, disabled: disabled, direction: "horizontal", alignY: "center", spacing: "none" },
-        React__default.default.createElement(styled.StepButton, { type: "button", "aria-label": "Decrement", onClick: onDecrement, disabled: disabled, compact: compact },
-            React__default.default.createElement(MinusIcon.ReactComponent, { height: index.theme.sizes.base, width: index.theme.sizes.base, color: index.theme.colors.neutral.ink.base })),
-        React__default.default.createElement(styled.StepperDivider, { compact: compact }),
-        React__default.default.createElement(styled.StepButton, { type: "button", "aria-label": "Increment", onClick: onIncrement, disabled: disabled, compact: compact },
-            React__default.default.createElement(PlusIcon.PlusIcon, { height: index.theme.sizes.base, width: index.theme.sizes.base, color: index.theme.colors.neutral.ink.base }))));
+    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
+            Stepper_module.container,
+            compact ? Stepper_module.compact : undefined,
+            hasError ? Stepper_module.error : undefined,
+            disabled ? Stepper_module.disabled : undefined,
+        ]) },
+        React__default.default.createElement("button", { type: "button", "aria-label": "Decrement", onClick: onDecrement, disabled: disabled, className: Stepper_module.stepperButton },
+            React__default.default.createElement(MinusIcon.ReactComponent, { height: index.theme.sizes.base, width: index.theme.sizes.base })),
+        React__default.default.createElement("div", { className: Stepper_module.divider }),
+        React__default.default.createElement("button", { type: "button", "aria-label": "Increment", onClick: onIncrement, disabled: disabled, className: Stepper_module.stepperButton },
+            React__default.default.createElement(PlusIcon.PlusIcon, { height: index.theme.sizes.base, width: index.theme.sizes.base }))));
 };
 
 exports.Stepper = Stepper;

package/dist/components/Stepper/Stepper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.cjs","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from '../../theme';\nimport { ComponentSizeType } from '../types';\n\nimport { ContainerStack, StepButton, StepperDivider } from './styled';\nimport { MinusIcon, PlusIcon } from '../../icons';\n\nexport interface StepperProps {\n  onIncrement: () => void;\n  onDecrement: () => void;\n  disabled?: boolean;\n  hasError?: boolean;\n  size?: ComponentSizeType;\n}\n\nexport const Stepper = ({ onIncrement, onDecrement, disabled, hasError, size }: StepperProps) => {\n  const compact = size === 'sm';\n\n  return (\n    <ContainerStack\n      hasError={hasError}\n      disabled={disabled}\n      direction=\"horizontal\"\n      alignY=\"center\"\n      spacing=\"none\"\n    >\n      <StepButton\n        type=\"button\"\n        aria-label=\"Decrement\"\n        onClick={onDecrement}\n        disabled={disabled}\n        compact={compact}\n      >\n        <MinusIcon\n          height={theme.sizes.base}\n          width={theme.sizes.base}\n          color={theme.colors.neutral.ink.base}\n        />\n      </StepButton>\n      <StepperDivider compact={compact} />\n      <StepButton\n        type=\"button\"\n        aria-label=\"Increment\"\n        onClick={onIncrement}\n        disabled={disabled}\n        compact={compact}\n      >\n        <PlusIcon\n          height={theme.sizes.base}\n          width={theme.sizes.base}\n          color={theme.colors.neutral.ink.base}\n        />\n      </StepButton>\n    </ContainerStack>\n  );\n};\n"],"names":["React","ContainerStack","StepButton","MinusIcon","theme","StepperDivider","PlusIcon"],"mappings":";;;;;;;;;;;;AAeO,MAAM,OAAO,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAgB,KAAI;AAC9F,IAAA,MAAM,OAAO,GAAG,IAAI,KAAK,IAAI;IAE7B,QACEA,qCAACC,qBAAc,EAAA,EACb,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,QAAQ,EACf,OAAO,EAAC,MAAM,EAAA;AAEd,QAAAD,sBAAA,CAAA,aAAA,CAACE,iBAAU,EAAA,EACT,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAAA;AAEhB,YAAAF,sBAAA,CAAA,aAAA,CAACG,wBAAS,EAAA,EACR,MAAM,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GACpC,CACS;AACb,QAAAJ,sBAAA,CAAA,aAAA,CAACK,qBAAc,EAAA,EAAC,OAAO,EAAE,OAAO,EAAA,CAAI;AACpC,QAAAL,sBAAA,CAAA,aAAA,CAACE,iBAAU,EAAA,EACT,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAAA;AAEhB,YAAAF,sBAAA,CAAA,aAAA,CAACM,iBAAQ,EAAA,EACP,MAAM,EAAEF,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CACpC,CACS,CACE;AAErB;;;;"}
+{"version":3,"file":"Stepper.cjs","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport { MinusIcon, PlusIcon } from '../../icons';\nimport styles from './Stepper.module.scss';\nimport { StepperProps } from './types';\n\nimport { theme } from '../../theme';\n\nexport const Stepper = ({ onIncrement, onDecrement, disabled, hasError, size }: StepperProps) => {\n  const compact = size === 'sm';\n\n  return (\n    <div\n      className={buildClassnames([\n        styles.container,\n        compact ? styles.compact : undefined,\n        hasError ? styles.error : undefined,\n        disabled ? styles.disabled : undefined,\n      ])}\n    >\n      <button\n        type=\"button\"\n        aria-label=\"Decrement\"\n        onClick={onDecrement}\n        disabled={disabled}\n        className={styles.stepperButton}\n      >\n        <MinusIcon height={theme.sizes.base} width={theme.sizes.base} />\n      </button>\n      <div className={styles.divider} />\n      <button\n        type=\"button\"\n        aria-label=\"Increment\"\n        onClick={onIncrement}\n        disabled={disabled}\n        className={styles.stepperButton}\n      >\n        <PlusIcon height={theme.sizes.base} width={theme.sizes.base} />\n      </button>\n    </div>\n  );\n};\n"],"names":["React","buildClassnames","styles","MinusIcon","theme","PlusIcon"],"mappings":";;;;;;;;;;;;;;AAQO,MAAM,OAAO,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAgB,KAAI;AAC9F,IAAA,MAAM,OAAO,GAAG,IAAI,KAAK,IAAI;AAE7B,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,cAAM,CAAC,SAAS;YAChB,OAAO,GAAGA,cAAM,CAAC,OAAO,GAAG,SAAS;YACpC,QAAQ,GAAGA,cAAM,CAAC,KAAK,GAAG,SAAS;YACnC,QAAQ,GAAGA,cAAM,CAAC,QAAQ,GAAG,SAAS;SACvC,CAAC,EAAA;AAEF,QAAAF,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,gBACF,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAEE,cAAM,CAAC,aAAa,EAAA;AAE/B,YAAAF,sBAAA,CAAA,aAAA,CAACG,wBAAS,EAAA,EAAC,MAAM,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,GAAI,CACzD;AACT,QAAAJ,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,cAAM,CAAC,OAAO,EAAA,CAAI;AAClC,QAAAF,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,gBACF,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAEE,cAAM,CAAC,aAAa,EAAA;YAE/BF,sBAAA,CAAA,aAAA,CAACK,iBAAQ,IAAC,MAAM,EAAED,WAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EAAA,CAAI,CACxD,CACL;AAEV;;;;"}

package/dist/components/Stepper/Stepper.d.ts

@@ -1,10 +1,3 @@
 import React from 'react';
-import { ComponentSizeType } from '../types';
-export interface StepperProps {
-    onIncrement: () => void;
-    onDecrement: () => void;
-    disabled?: boolean;
-    hasError?: boolean;
-    size?: ComponentSizeType;
-}
+import { StepperProps } from './types';
 export declare const Stepper: ({ onIncrement, onDecrement, disabled, hasError, size }: StepperProps) => React.JSX.Element;

package/dist/components/Stepper/Stepper.js

@@ -1,17 +1,24 @@
 import React__default from 'react';
-import { theme } from '../../theme/index.js';
-import { ContainerStack, StepButton, StepperDivider } from './styled.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
 import { ReactComponent as MinusIcon } from '../../icons/design-system/components/MinusIcon.js';
 import { PlusIcon } from '../../icons/custom/components/PlusIcon.js';
+import styles from './Stepper.module.scss.js';
+import { theme } from '../../theme/index.js';
 
 const Stepper = ({ onIncrement, onDecrement, disabled, hasError, size }) => {
     const compact = size === 'sm';
-    return (React__default.createElement(ContainerStack, { hasError: hasError, disabled: disabled, direction: "horizontal", alignY: "center", spacing: "none" },
-        React__default.createElement(StepButton, { type: "button", "aria-label": "Decrement", onClick: onDecrement, disabled: disabled, compact: compact },
-            React__default.createElement(MinusIcon, { height: theme.sizes.base, width: theme.sizes.base, color: theme.colors.neutral.ink.base })),
-        React__default.createElement(StepperDivider, { compact: compact }),
-        React__default.createElement(StepButton, { type: "button", "aria-label": "Increment", onClick: onIncrement, disabled: disabled, compact: compact },
-            React__default.createElement(PlusIcon, { height: theme.sizes.base, width: theme.sizes.base, color: theme.colors.neutral.ink.base }))));
+    return (React__default.createElement("div", { className: buildClassnames([
+            styles.container,
+            compact ? styles.compact : undefined,
+            hasError ? styles.error : undefined,
+            disabled ? styles.disabled : undefined,
+        ]) },
+        React__default.createElement("button", { type: "button", "aria-label": "Decrement", onClick: onDecrement, disabled: disabled, className: styles.stepperButton },
+            React__default.createElement(MinusIcon, { height: theme.sizes.base, width: theme.sizes.base })),
+        React__default.createElement("div", { className: styles.divider }),
+        React__default.createElement("button", { type: "button", "aria-label": "Increment", onClick: onIncrement, disabled: disabled, className: styles.stepperButton },
+            React__default.createElement(PlusIcon, { height: theme.sizes.base, width: theme.sizes.base }))));
 };
 
 export { Stepper };

package/dist/components/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from '../../theme';\nimport { ComponentSizeType } from '../types';\n\nimport { ContainerStack, StepButton, StepperDivider } from './styled';\nimport { MinusIcon, PlusIcon } from '../../icons';\n\nexport interface StepperProps {\n  onIncrement: () => void;\n  onDecrement: () => void;\n  disabled?: boolean;\n  hasError?: boolean;\n  size?: ComponentSizeType;\n}\n\nexport const Stepper = ({ onIncrement, onDecrement, disabled, hasError, size }: StepperProps) => {\n  const compact = size === 'sm';\n\n  return (\n    <ContainerStack\n      hasError={hasError}\n      disabled={disabled}\n      direction=\"horizontal\"\n      alignY=\"center\"\n      spacing=\"none\"\n    >\n      <StepButton\n        type=\"button\"\n        aria-label=\"Decrement\"\n        onClick={onDecrement}\n        disabled={disabled}\n        compact={compact}\n      >\n        <MinusIcon\n          height={theme.sizes.base}\n          width={theme.sizes.base}\n          color={theme.colors.neutral.ink.base}\n        />\n      </StepButton>\n      <StepperDivider compact={compact} />\n      <StepButton\n        type=\"button\"\n        aria-label=\"Increment\"\n        onClick={onIncrement}\n        disabled={disabled}\n        compact={compact}\n      >\n        <PlusIcon\n          height={theme.sizes.base}\n          width={theme.sizes.base}\n          color={theme.colors.neutral.ink.base}\n        />\n      </StepButton>\n    </ContainerStack>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AAeO,MAAM,OAAO,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAgB,KAAI;AAC9F,IAAA,MAAM,OAAO,GAAG,IAAI,KAAK,IAAI;IAE7B,QACEA,6BAAC,cAAc,EAAA,EACb,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,QAAQ,EACf,OAAO,EAAC,MAAM,EAAA;AAEd,QAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAAA;AAEhB,YAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GACpC,CACS;AACb,QAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAC,OAAO,EAAE,OAAO,EAAA,CAAI;AACpC,QAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAAA;AAEhB,YAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACP,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CACpC,CACS,CACE;AAErB;;;;"}
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport { MinusIcon, PlusIcon } from '../../icons';\nimport styles from './Stepper.module.scss';\nimport { StepperProps } from './types';\n\nimport { theme } from '../../theme';\n\nexport const Stepper = ({ onIncrement, onDecrement, disabled, hasError, size }: StepperProps) => {\n  const compact = size === 'sm';\n\n  return (\n    <div\n      className={buildClassnames([\n        styles.container,\n        compact ? styles.compact : undefined,\n        hasError ? styles.error : undefined,\n        disabled ? styles.disabled : undefined,\n      ])}\n    >\n      <button\n        type=\"button\"\n        aria-label=\"Decrement\"\n        onClick={onDecrement}\n        disabled={disabled}\n        className={styles.stepperButton}\n      >\n        <MinusIcon height={theme.sizes.base} width={theme.sizes.base} />\n      </button>\n      <div className={styles.divider} />\n      <button\n        type=\"button\"\n        aria-label=\"Increment\"\n        onClick={onIncrement}\n        disabled={disabled}\n        className={styles.stepperButton}\n      >\n        <PlusIcon height={theme.sizes.base} width={theme.sizes.base} />\n      </button>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AAQO,MAAM,OAAO,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAgB,KAAI;AAC9F,IAAA,MAAM,OAAO,GAAG,IAAI,KAAK,IAAI;AAE7B,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,SAAS;YAChB,OAAO,GAAG,MAAM,CAAC,OAAO,GAAG,SAAS;YACpC,QAAQ,GAAG,MAAM,CAAC,KAAK,GAAG,SAAS;YACnC,QAAQ,GAAG,MAAM,CAAC,QAAQ,GAAG,SAAS;SACvC,CAAC,EAAA;AAEF,QAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,gBACF,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,MAAM,CAAC,aAAa,EAAA;AAE/B,YAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,GAAI,CACzD;AACT,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,CAAI;AAClC,QAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,gBACF,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,MAAM,CAAC,aAAa,EAAA;YAE/BA,cAAA,CAAA,aAAA,CAAC,QAAQ,IAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAA,CAAI,CACxD,CACL;AAEV;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._container_ttrjj_1 {\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  background-color: white;\n  border: var(--sizes-line) solid var(--border-color);\n  border-radius: var(--radius-base);\n  height: var(--sizes-10);\n}\n._container_ttrjj_1._compact_ttrjj_13 {\n  --outline-size: 2px;\n  height: var(--sizes-8);\n}\n._container_ttrjj_1._error_ttrjj_17 {\n  --border-color: var(--colors-secondary-red-base);\n  --shadow-color: var(--colors-secondary-red-light);\n}\n._container_ttrjj_1._disabled_ttrjj_21 {\n  background-color: var(--colors-neutral-grey-light);\n}\n\n._stepperButton_ttrjj_25 {\n  display: grid;\n  place-items: center;\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  color: var(--colors-neutral-ink-base);\n  height: 100%;\n  aspect-ratio: 1;\n}\n._stepperButton_ttrjj_25:hover {\n  background-color: var(--colors-neutral-grey-light);\n}\n._stepperButton_ttrjj_25:active {\n  background-color: var(--colors-neutral-grey-base);\n}\n._stepperButton_ttrjj_25:focus-visible {\n  box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n  outline: 0;\n}\n._stepperButton_ttrjj_25:disabled {\n  cursor: not-allowed;\n}\n._stepperButton_ttrjj_25:disabled:hover {\n  background-color: transparent;\n}\n\n._divider_ttrjj_54 {\n  width: var(--sizes-line);\n  background-color: var(--colors-neutral-ink-lightest);\n  height: var(--sizes-6);\n}\n._compact_ttrjj_13 ._divider_ttrjj_54 {\n  height: var(--sizes-4);\n}");
+var styles = {"container":"_container_ttrjj_1","compact":"_compact_ttrjj_13","error":"_error_ttrjj_17","disabled":"_disabled_ttrjj_21","stepperButton":"_stepperButton_ttrjj_25","divider":"_divider_ttrjj_54"};
+
+module.exports = styles;
+//# sourceMappingURL=Stepper.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._container_ttrjj_1 {\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  background-color: white;\n  border: var(--sizes-line) solid var(--border-color);\n  border-radius: var(--radius-base);\n  height: var(--sizes-10);\n}\n._container_ttrjj_1._compact_ttrjj_13 {\n  --outline-size: 2px;\n  height: var(--sizes-8);\n}\n._container_ttrjj_1._error_ttrjj_17 {\n  --border-color: var(--colors-secondary-red-base);\n  --shadow-color: var(--colors-secondary-red-light);\n}\n._container_ttrjj_1._disabled_ttrjj_21 {\n  background-color: var(--colors-neutral-grey-light);\n}\n\n._stepperButton_ttrjj_25 {\n  display: grid;\n  place-items: center;\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  color: var(--colors-neutral-ink-base);\n  height: 100%;\n  aspect-ratio: 1;\n}\n._stepperButton_ttrjj_25:hover {\n  background-color: var(--colors-neutral-grey-light);\n}\n._stepperButton_ttrjj_25:active {\n  background-color: var(--colors-neutral-grey-base);\n}\n._stepperButton_ttrjj_25:focus-visible {\n  box-shadow: 0 0 0 var(--outline-size) var(--shadow-color);\n  outline: 0;\n}\n._stepperButton_ttrjj_25:disabled {\n  cursor: not-allowed;\n}\n._stepperButton_ttrjj_25:disabled:hover {\n  background-color: transparent;\n}\n\n._divider_ttrjj_54 {\n  width: var(--sizes-line);\n  background-color: var(--colors-neutral-ink-lightest);\n  height: var(--sizes-6);\n}\n._compact_ttrjj_13 ._divider_ttrjj_54 {\n  height: var(--sizes-4);\n}");
+var styles = {"container":"_container_ttrjj_1","compact":"_compact_ttrjj_13","error":"_error_ttrjj_17","disabled":"_disabled_ttrjj_21","stepperButton":"_stepperButton_ttrjj_25","divider":"_divider_ttrjj_54"};
+
+export { styles as default };
+//# sourceMappingURL=Stepper.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/components/Stepper/types.d.ts

@@ -0,0 +1,8 @@
+import { ComponentSizeType } from '../types';
+export type StepperProps = {
+    onIncrement: () => void;
+    onDecrement: () => void;
+    disabled?: boolean;
+    hasError?: boolean;
+    size?: ComponentSizeType;
+};

package/dist/components/Toggle/Toggle.cjs

@@ -1,9 +1,10 @@
 'use strict';
 
 var React = require('react');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
 var generateId = require('../../utils/generateId.cjs');
-var styled = require('./styled.cjs');
 var Choice = require('../Choice/Choice.cjs');
+var Toggle_module = require('./Toggle.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -15,10 +16,15 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 const Toggle = React.forwardRef(({ id, className, name, switched, small, onClick = () => { }, disabled, ariaLabel, inputPosition = 'right', ...choiceProps }, ref) => {
     const componentId = React.useMemo(() => id !== null && id !== void 0 ? id : generateId.generateId('toggle'), [id]);
     return (React__default.default.createElement(Choice.Choice, { htmlFor: componentId, inputPosition: inputPosition, ...choiceProps },
-        React__default.default.createElement(styled.Wrapper, { className: className, disabled: disabled },
-            React__default.default.createElement(styled.Switch, { small: small, disabled: disabled, className: className },
-                React__default.default.createElement(styled.Input, { id: componentId, role: "switch", type: "checkbox", name: name, "aria-label": ariaLabel, checked: !!switched, onChange: (e) => (disabled ? undefined : onClick(e)), disabled: disabled, ref: ref }),
-                React__default.default.createElement(styled.Slider, { switched: switched, disabled: disabled })))));
+        React__default.default.createElement("span", { className: buildClassnames.buildClassnames([Toggle_module.wrapper, className]) },
+            React__default.default.createElement("span", { className: buildClassnames.buildClassnames([
+                    Toggle_module.switch,
+                    small ? Toggle_module.small : undefined,
+                    disabled ? Toggle_module.disabled : undefined,
+                    switched ? Toggle_module.switched : undefined,
+                ]) },
+                React__default.default.createElement("input", { id: componentId, role: "switch", type: "checkbox", name: name, "aria-label": ariaLabel, checked: !!switched, onChange: (e) => (disabled ? undefined : onClick(e)), disabled: disabled, ref: ref, className: Toggle_module.input }),
+                React__default.default.createElement("span", { className: Toggle_module.slider })))));
 });
 
 exports.Toggle = Toggle;

package/dist/components/Toggle/Toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.cjs","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport { generateId } from '../../utils/generateId';\nimport { ToggleProps } from './types';\nimport { Input, Slider, Switch, Wrapper } from './styled';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\n\n/**\n * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.\n */\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n  (\n    {\n      id,\n      className,\n      name,\n      switched,\n      small,\n      onClick = () => {},\n      disabled,\n      ariaLabel,\n      inputPosition = 'right',\n      ...choiceProps\n    }: ToggleProps,\n    ref,\n  ) => {\n    const componentId = useMemo(() => id ?? generateId('toggle'), [id]);\n    return (\n      <Choice\n        htmlFor={componentId}\n        inputPosition={inputPosition}\n        {...(choiceProps as ForwardedChoiceProps)}\n      >\n        <Wrapper className={className} disabled={disabled}>\n          <Switch small={small} disabled={disabled} className={className}>\n            <Input\n              id={componentId}\n              role=\"switch\"\n              type=\"checkbox\"\n              name={name}\n              aria-label={ariaLabel}\n              checked={!!switched}\n              onChange={(e) => (disabled ? undefined : onClick(e))}\n              disabled={disabled}\n              ref={ref}\n            />\n            <Slider switched={switched} disabled={disabled} />\n          </Switch>\n        </Wrapper>\n      </Choice>\n    );\n  },\n);\n"],"names":["forwardRef","useMemo","generateId","React","Choice","Wrapper","Switch","Input","Slider"],"mappings":";;;;;;;;;;;AAOA;;AAEG;AACI,MAAM,MAAM,GAAGA,gBAAU,CAC9B,CACE,EACE,EAAE,EACF,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,MAAK,EAAE,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,OAAO,EACvB,GAAG,WAAW,EACF,EACd,GAAG,KACD;IACF,MAAM,WAAW,GAAGC,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACnE,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,aAAa,EAAA,GACvB,WAAoC,EAAA;QAEzCD,sBAAA,CAAA,aAAA,CAACE,cAAO,IAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAC/C,YAAAF,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;gBAC5DH,sBAAA,CAAA,aAAA,CAACI,YAAK,EAAA,EACJ,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EAAA,YAAA,EACE,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,CAAC,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EAAA,CACR;AACF,gBAAAJ,sBAAA,CAAA,aAAA,CAACK,aAAM,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAA,CAAI,CAC3C,CACD,CACH;AAEb,CAAC;;;;"}
+{"version":3,"file":"Toggle.cjs","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { generateId } from '../../utils/generateId';\nimport { ToggleProps } from './types';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport styles from './Toggle.module.scss';\n\n/**\n * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.\n */\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n  (\n    {\n      id,\n      className,\n      name,\n      switched,\n      small,\n      onClick = () => {},\n      disabled,\n      ariaLabel,\n      inputPosition = 'right',\n      ...choiceProps\n    }: ToggleProps,\n    ref,\n  ) => {\n    const componentId = useMemo(() => id ?? generateId('toggle'), [id]);\n    return (\n      <Choice\n        htmlFor={componentId}\n        inputPosition={inputPosition}\n        {...(choiceProps as ForwardedChoiceProps)}\n      >\n        <span className={buildClassnames([styles.wrapper, className])}>\n          <span\n            className={buildClassnames([\n              styles.switch,\n              small ? styles.small : undefined,\n              disabled ? styles.disabled : undefined,\n              switched ? styles.switched : undefined,\n            ])}\n          >\n            <input\n              id={componentId}\n              role=\"switch\"\n              type=\"checkbox\"\n              name={name}\n              aria-label={ariaLabel}\n              checked={!!switched}\n              onChange={(e) => (disabled ? undefined : onClick(e))}\n              disabled={disabled}\n              ref={ref}\n              className={styles.input}\n            />\n            <span className={styles.slider} />\n          </span>\n        </span>\n      </Choice>\n    );\n  },\n);\n"],"names":["forwardRef","useMemo","generateId","React","Choice","buildClassnames","styles"],"mappings":";;;;;;;;;;;;AAQA;;AAEG;AACI,MAAM,MAAM,GAAGA,gBAAU,CAC9B,CACE,EACE,EAAE,EACF,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,MAAK,EAAE,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,OAAO,EACvB,GAAG,WAAW,EACF,EACd,GAAG,KACD;IACF,MAAM,WAAW,GAAGC,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACnE,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,aAAa,EAAA,GACvB,WAAoC,EAAA;QAEzCD,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEE,+BAAe,CAAC,CAACC,aAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAAA;YAC3DH,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAEE,+BAAe,CAAC;AACzB,oBAAAC,aAAM,CAAC,MAAM;oBACb,KAAK,GAAGA,aAAM,CAAC,KAAK,GAAG,SAAS;oBAChC,QAAQ,GAAGA,aAAM,CAAC,QAAQ,GAAG,SAAS;oBACtC,QAAQ,GAAGA,aAAM,CAAC,QAAQ,GAAG,SAAS;iBACvC,CAAC,EAAA;gBAEFH,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EAAA,YAAA,EACE,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,CAAC,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAEG,aAAM,CAAC,KAAK,EAAA,CACvB;gBACFH,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEG,aAAM,CAAC,MAAM,GAAI,CAC7B,CACF,CACA;AAEb,CAAC;;;;"}

package/dist/components/Toggle/Toggle.js

@@ -1,7 +1,8 @@
 import React__default, { forwardRef, useMemo } from 'react';
+import { buildClassnames } from '../../utils/buildClassnames.js';
 import { generateId } from '../../utils/generateId.js';
-import { Wrapper, Switch, Input, Slider } from './styled.js';
 import { Choice } from '../Choice/Choice.js';
+import styles from './Toggle.module.scss.js';
 
 /**
  * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.
@@ -9,10 +10,15 @@ import { Choice } from '../Choice/Choice.js';
 const Toggle = forwardRef(({ id, className, name, switched, small, onClick = () => { }, disabled, ariaLabel, inputPosition = 'right', ...choiceProps }, ref) => {
     const componentId = useMemo(() => id !== null && id !== void 0 ? id : generateId('toggle'), [id]);
     return (React__default.createElement(Choice, { htmlFor: componentId, inputPosition: inputPosition, ...choiceProps },
-        React__default.createElement(Wrapper, { className: className, disabled: disabled },
-            React__default.createElement(Switch, { small: small, disabled: disabled, className: className },
-                React__default.createElement(Input, { id: componentId, role: "switch", type: "checkbox", name: name, "aria-label": ariaLabel, checked: !!switched, onChange: (e) => (disabled ? undefined : onClick(e)), disabled: disabled, ref: ref }),
-                React__default.createElement(Slider, { switched: switched, disabled: disabled })))));
+        React__default.createElement("span", { className: buildClassnames([styles.wrapper, className]) },
+            React__default.createElement("span", { className: buildClassnames([
+                    styles.switch,
+                    small ? styles.small : undefined,
+                    disabled ? styles.disabled : undefined,
+                    switched ? styles.switched : undefined,
+                ]) },
+                React__default.createElement("input", { id: componentId, role: "switch", type: "checkbox", name: name, "aria-label": ariaLabel, checked: !!switched, onChange: (e) => (disabled ? undefined : onClick(e)), disabled: disabled, ref: ref, className: styles.input }),
+                React__default.createElement("span", { className: styles.slider })))));
 });
 
 export { Toggle };

package/dist/components/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport { generateId } from '../../utils/generateId';\nimport { ToggleProps } from './types';\nimport { Input, Slider, Switch, Wrapper } from './styled';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\n\n/**\n * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.\n */\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n  (\n    {\n      id,\n      className,\n      name,\n      switched,\n      small,\n      onClick = () => {},\n      disabled,\n      ariaLabel,\n      inputPosition = 'right',\n      ...choiceProps\n    }: ToggleProps,\n    ref,\n  ) => {\n    const componentId = useMemo(() => id ?? generateId('toggle'), [id]);\n    return (\n      <Choice\n        htmlFor={componentId}\n        inputPosition={inputPosition}\n        {...(choiceProps as ForwardedChoiceProps)}\n      >\n        <Wrapper className={className} disabled={disabled}>\n          <Switch small={small} disabled={disabled} className={className}>\n            <Input\n              id={componentId}\n              role=\"switch\"\n              type=\"checkbox\"\n              name={name}\n              aria-label={ariaLabel}\n              checked={!!switched}\n              onChange={(e) => (disabled ? undefined : onClick(e))}\n              disabled={disabled}\n              ref={ref}\n            />\n            <Slider switched={switched} disabled={disabled} />\n          </Switch>\n        </Wrapper>\n      </Choice>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;AAOA;;AAEG;AACI,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,EAAE,EACF,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,MAAK,EAAE,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,OAAO,EACvB,GAAG,WAAW,EACF,EACd,GAAG,KACD;IACF,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAI,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACnE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,aAAa,EAAA,GACvB,WAAoC,EAAA;QAEzCA,cAAA,CAAA,aAAA,CAAC,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAC/C,YAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;gBAC5DA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACJ,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EAAA,YAAA,EACE,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,CAAC,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EAAA,CACR;AACF,gBAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAA,CAAI,CAC3C,CACD,CACH;AAEb,CAAC;;;;"}
+{"version":3,"file":"Toggle.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { generateId } from '../../utils/generateId';\nimport { ToggleProps } from './types';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport styles from './Toggle.module.scss';\n\n/**\n * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.\n */\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n  (\n    {\n      id,\n      className,\n      name,\n      switched,\n      small,\n      onClick = () => {},\n      disabled,\n      ariaLabel,\n      inputPosition = 'right',\n      ...choiceProps\n    }: ToggleProps,\n    ref,\n  ) => {\n    const componentId = useMemo(() => id ?? generateId('toggle'), [id]);\n    return (\n      <Choice\n        htmlFor={componentId}\n        inputPosition={inputPosition}\n        {...(choiceProps as ForwardedChoiceProps)}\n      >\n        <span className={buildClassnames([styles.wrapper, className])}>\n          <span\n            className={buildClassnames([\n              styles.switch,\n              small ? styles.small : undefined,\n              disabled ? styles.disabled : undefined,\n              switched ? styles.switched : undefined,\n            ])}\n          >\n            <input\n              id={componentId}\n              role=\"switch\"\n              type=\"checkbox\"\n              name={name}\n              aria-label={ariaLabel}\n              checked={!!switched}\n              onChange={(e) => (disabled ? undefined : onClick(e))}\n              disabled={disabled}\n              ref={ref}\n              className={styles.input}\n            />\n            <span className={styles.slider} />\n          </span>\n        </span>\n      </Choice>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;;AAQA;;AAEG;AACI,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,EAAE,EACF,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,MAAK,EAAE,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,OAAO,EACvB,GAAG,WAAW,EACF,EACd,GAAG,KACD;IACF,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAI,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACnE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,aAAa,EAAA,GACvB,WAAoC,EAAA;QAEzCA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAAA;YAC3DA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,oBAAA,MAAM,CAAC,MAAM;oBACb,KAAK,GAAG,MAAM,CAAC,KAAK,GAAG,SAAS;oBAChC,QAAQ,GAAG,MAAM,CAAC,QAAQ,GAAG,SAAS;oBACtC,QAAQ,GAAG,MAAM,CAAC,QAAQ,GAAG,SAAS;iBACvC,CAAC,EAAA;gBAEFA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EAAA,YAAA,EACE,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,CAAC,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,MAAM,CAAC,KAAK,EAAA,CACvB;gBACFA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,MAAM,GAAI,CAC7B,CACF,CACA;AAEb,CAAC;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._wrapper_cgf30_1 {\n  display: inline-block;\n  user-select: none;\n}\n\n._switch_cgf30_6 {\n  display: flex;\n  position: relative;\n  height: 36px;\n  width: 72px;\n  z-index: 1;\n}\n._switch_cgf30_6._small_cgf30_13 {\n  height: 28px;\n  width: 56px;\n}\n\n._input_cgf30_18 {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-base);\n  z-index: 2;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n._input_cgf30_18:disabled {\n  cursor: not-allowed;\n}\n._input_cgf30_18:focus-visible + ._slider_cgf30_31 {\n  box-shadow: 0 0 0 4px var(--colors-brand-blue-light);\n}\n._input_cgf30_18:checked + ._slider_cgf30_31 {\n  background-color: var(--colors-secondary-blue-base);\n}\n._input_cgf30_18:disabled + ._slider_cgf30_31 {\n  background-color: var(--colors-neutral-grey-base);\n}\n._input_cgf30_18:checked:disabled + ._slider_cgf30_31 {\n  background-color: var(--colors-secondary-blue-light);\n}\n._input_cgf30_18:checked + ._slider_cgf30_31::after, ._input_cgf30_18:checked + ._slider_cgf30_31 svg {\n  transform: translateX(36px);\n}\n._small_cgf30_13 ._input_cgf30_18:checked + ._slider_cgf30_31::after, ._small_cgf30_13 ._input_cgf30_18:checked + ._slider_cgf30_31 svg {\n  transform: translateX(28px);\n}\n\n._slider_cgf30_31 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 18px;\n  background-color: var(--colors-neutral-grey-dark);\n  transition: 0.3s;\n}\n._slider_cgf30_31::after {\n  content: \"\";\n  position: absolute;\n  border-radius: 50%;\n  background-color: white;\n  transition: 0.3s;\n  height: 28px;\n  width: 28px;\n  left: var(--sizes-xs);\n  bottom: var(--sizes-xs);\n}\n._small_cgf30_13 ._slider_cgf30_31::after {\n  height: 22px;\n  width: 22px;\n  left: 3px;\n  bottom: 3px;\n}\n._disabled_cgf30_77 ._slider_cgf30_31::after {\n  background-color: white;\n}\n._disabled_cgf30_77._switched_cgf30_80 ._slider_cgf30_31::after {\n  background-color: var(--colors-secondary-blue-lightest);\n}");
+var styles = {"wrapper":"_wrapper_cgf30_1","switch":"_switch_cgf30_6","small":"_small_cgf30_13","input":"_input_cgf30_18","slider":"_slider_cgf30_31","disabled":"_disabled_cgf30_77","switched":"_switched_cgf30_80"};
+
+module.exports = styles;
+//# sourceMappingURL=Toggle.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.module.scss.cjs","sources":["../../../src/components/Toggle/Toggle.module.scss"],"sourcesContent":[".wrapper {\n  display: inline-block;\n  user-select: none;\n}\n\n.switch {\n  display: flex;\n  position: relative;\n  height: 36px;\n  width: 72px;\n  z-index: 1;\n\n  &.small {\n    height: 28px;\n    width: 56px;\n  }\n}\n\n.input {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-base);\n  z-index: 2;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus-visible + .slider {\n    box-shadow: 0 0 0 4px var(--colors-brand-blue-light);\n  }\n\n  &:checked + .slider {\n    background-color: var(--colors-secondary-blue-base);\n  }\n\n  &:disabled + .slider {\n    background-color: var(--colors-neutral-grey-base);\n  }\n\n  &:checked:disabled + .slider {\n    background-color: var(--colors-secondary-blue-light);\n  }\n\n  &:checked + .slider::after,\n  &:checked + .slider svg {\n    transform: translateX(36px);\n  }\n\n  .small &:checked + .slider::after,\n  .small &:checked + .slider svg {\n    transform: translateX(28px);\n  }\n}\n\n.slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 18px;\n  background-color: var(--colors-neutral-grey-dark);\n  transition: 0.3s;\n\n  &::after {\n    content: '';\n    position: absolute;\n    border-radius: 50%;\n    background-color: white;\n    transition: 0.3s;\n    height: 28px;\n    width: 28px;\n    left: var(--sizes-xs);\n    bottom: var(--sizes-xs);\n  }\n\n  .small &::after {\n    height: 22px;\n    width: 22px;\n    left: 3px;\n    bottom: 3px;\n  }\n\n  .disabled &::after {\n    background-color: white;\n  }\n\n  .disabled.switched &::after {\n    background-color: var(--colors-secondary-blue-lightest);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,o9DAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._wrapper_cgf30_1 {\n  display: inline-block;\n  user-select: none;\n}\n\n._switch_cgf30_6 {\n  display: flex;\n  position: relative;\n  height: 36px;\n  width: 72px;\n  z-index: 1;\n}\n._switch_cgf30_6._small_cgf30_13 {\n  height: 28px;\n  width: 56px;\n}\n\n._input_cgf30_18 {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-base);\n  z-index: 2;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n._input_cgf30_18:disabled {\n  cursor: not-allowed;\n}\n._input_cgf30_18:focus-visible + ._slider_cgf30_31 {\n  box-shadow: 0 0 0 4px var(--colors-brand-blue-light);\n}\n._input_cgf30_18:checked + ._slider_cgf30_31 {\n  background-color: var(--colors-secondary-blue-base);\n}\n._input_cgf30_18:disabled + ._slider_cgf30_31 {\n  background-color: var(--colors-neutral-grey-base);\n}\n._input_cgf30_18:checked:disabled + ._slider_cgf30_31 {\n  background-color: var(--colors-secondary-blue-light);\n}\n._input_cgf30_18:checked + ._slider_cgf30_31::after, ._input_cgf30_18:checked + ._slider_cgf30_31 svg {\n  transform: translateX(36px);\n}\n._small_cgf30_13 ._input_cgf30_18:checked + ._slider_cgf30_31::after, ._small_cgf30_13 ._input_cgf30_18:checked + ._slider_cgf30_31 svg {\n  transform: translateX(28px);\n}\n\n._slider_cgf30_31 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 18px;\n  background-color: var(--colors-neutral-grey-dark);\n  transition: 0.3s;\n}\n._slider_cgf30_31::after {\n  content: \"\";\n  position: absolute;\n  border-radius: 50%;\n  background-color: white;\n  transition: 0.3s;\n  height: 28px;\n  width: 28px;\n  left: var(--sizes-xs);\n  bottom: var(--sizes-xs);\n}\n._small_cgf30_13 ._slider_cgf30_31::after {\n  height: 22px;\n  width: 22px;\n  left: 3px;\n  bottom: 3px;\n}\n._disabled_cgf30_77 ._slider_cgf30_31::after {\n  background-color: white;\n}\n._disabled_cgf30_77._switched_cgf30_80 ._slider_cgf30_31::after {\n  background-color: var(--colors-secondary-blue-lightest);\n}");
+var styles = {"wrapper":"_wrapper_cgf30_1","switch":"_switch_cgf30_6","small":"_small_cgf30_13","input":"_input_cgf30_18","slider":"_slider_cgf30_31","disabled":"_disabled_cgf30_77","switched":"_switched_cgf30_80"};
+
+export { styles as default };
+//# sourceMappingURL=Toggle.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.module.scss.js","sources":["../../../src/components/Toggle/Toggle.module.scss"],"sourcesContent":[".wrapper {\n  display: inline-block;\n  user-select: none;\n}\n\n.switch {\n  display: flex;\n  position: relative;\n  height: 36px;\n  width: 72px;\n  z-index: 1;\n\n  &.small {\n    height: 28px;\n    width: 56px;\n  }\n}\n\n.input {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-base);\n  z-index: 2;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus-visible + .slider {\n    box-shadow: 0 0 0 4px var(--colors-brand-blue-light);\n  }\n\n  &:checked + .slider {\n    background-color: var(--colors-secondary-blue-base);\n  }\n\n  &:disabled + .slider {\n    background-color: var(--colors-neutral-grey-base);\n  }\n\n  &:checked:disabled + .slider {\n    background-color: var(--colors-secondary-blue-light);\n  }\n\n  &:checked + .slider::after,\n  &:checked + .slider svg {\n    transform: translateX(36px);\n  }\n\n  .small &:checked + .slider::after,\n  .small &:checked + .slider svg {\n    transform: translateX(28px);\n  }\n}\n\n.slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 18px;\n  background-color: var(--colors-neutral-grey-dark);\n  transition: 0.3s;\n\n  &::after {\n    content: '';\n    position: absolute;\n    border-radius: 50%;\n    background-color: white;\n    transition: 0.3s;\n    height: 28px;\n    width: 28px;\n    left: var(--sizes-xs);\n    bottom: var(--sizes-xs);\n  }\n\n  .small &::after {\n    height: 22px;\n    width: 22px;\n    left: 3px;\n    bottom: 3px;\n  }\n\n  .disabled &::after {\n    background-color: white;\n  }\n\n  .disabled.switched &::after {\n    background-color: var(--colors-secondary-blue-lightest);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,o9DAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

package/dist/index.cjs

@@ -41,7 +41,7 @@ var Divider = require('./components/Divider/Divider.cjs');
 var Dropdown = require('./components/Dropdown/Dropdown.cjs');
 var FeatureBanner = require('./components/FeatureBanner/FeatureBanner.cjs');
 var FilterTag = require('./components/FilterTag/FilterTag.cjs');
-var index$1 = require('./components/Grid/index.cjs');
+var Grid = require('./components/Grid/Grid.cjs');
 var Image = require('./components/Image/Image.cjs');
 var InputAffix = require('./components/InputAffix/InputAffix.cjs');
 var InputGroup = require('./components/InputGroup/InputGroup.cjs');
@@ -68,7 +68,7 @@ var Stepper = require('./components/Stepper/Stepper.cjs');
 var SystemBanner = require('./components/SystemBanner/SystemBanner.cjs');
 var Tag = require('./components/Tag/Tag.cjs');
 var Text = require('./components/Text/Text.cjs');
-var index$4 = require('./components/TextField/index.cjs');
+var index$3 = require('./components/TextField/index.cjs');
 var ToastsLayout = require('./components/ToastsLayout/ToastsLayout.cjs');
 var Toggle = require('./components/Toggle/Toggle.cjs');
 var ToggleButton = require('./components/ToggleButton/ToggleButton.cjs');
@@ -84,13 +84,13 @@ var ViewTab = require('./components/ViewTab/ViewTab.cjs');
 var ViewsContainer = require('./components/ViewsContainer/ViewsContainer.cjs');
 var WeightInput = require('./components/WeightInput/WeightInput.cjs');
 var Indicator = require('./components/Indicator/Indicator.cjs');
-var index$3 = require('./components/SelectDropdown/index.cjs');
+var index$2 = require('./components/SelectDropdown/index.cjs');
 var ThemeInjector = require('./components/ThemeInjector/ThemeInjector.cjs');
 var TokenProvider = require('./components/TokenProvider/TokenProvider.cjs');
 var DataGrid = require('./components/DataGrid/DataGrid.cjs');
 var FlexCol = require('./components/Flex/FlexCol/FlexCol.cjs');
 var FlexRow = require('./components/Flex/FlexRow/FlexRow.cjs');
-var index$2 = require('./components/PhoneInput/index.cjs');
+var index$1 = require('./components/PhoneInput/index.cjs');
 var ChannelMark = require('./components/ChannelMark/ChannelMark.cjs');
 var constants$2 = require('./components/ChannelMark/constants.cjs');
 var CarrierMark = require('./components/CarrierMark/CarrierMark.cjs');
@@ -118,7 +118,7 @@ var assignCssVars = require('./utils/assignCssVars.cjs');
 var buildChannelMarkUrl = require('./utils/buildChannelMarkUrl.cjs');
 var buildCarrierMarkUrl = require('./utils/buildCarrierMarkUrl.cjs');
 var getContextAwareLink = require('./utils/getContextAwareLink.cjs');
-var index$5 = require('./theme/index.cjs');
+var index$4 = require('./theme/index.cjs');
 var AccountsIcon = require('./icons/design-system/components/AccountsIcon.cjs');
 var AccountsOutlineIcon = require('./icons/design-system/components/AccountsOutlineIcon.cjs');
 var AddIcon = require('./icons/design-system/components/AddIcon.cjs');
@@ -401,7 +401,7 @@ exports.Divider = Divider.Divider;
 exports.Dropdown = Dropdown.Dropdown;
 exports.FeatureBanner = FeatureBanner.FeatureBanner;
 exports.FilterTag = FilterTag.FilterTag;
-exports.Grid = index$1.Grid;
+exports.Grid = Grid.Grid;
 exports.Image = Image.Image;
 exports.InputAffix = InputAffix.InputAffix;
 exports.InputGroup = InputGroup.InputGroup;
@@ -428,7 +428,7 @@ exports.Stepper = Stepper.Stepper;
 exports.SystemBanner = SystemBanner.SystemBanner;
 exports.Tag = Tag.Tag;
 exports.Text = Text.Text;
-exports.TextField = index$4.TextField;
+exports.TextField = index$3.TextField;
 exports.ToastsLayout = ToastsLayout.ToastsLayout;
 exports.Toggle = Toggle.Toggle;
 exports.ToggleButton = ToggleButton.ToggleButton;
@@ -451,13 +451,13 @@ exports.ViewTab = ViewTab.ViewTab;
 exports.ViewsContainer = ViewsContainer.ViewsContainer;
 exports.WeightInput = WeightInput.WeightInput;
 exports.Indicator = Indicator.Indicator;
-exports.SelectDropdown = index$3.SelectDropdown;
+exports.SelectDropdown = index$2.SelectDropdown;
 exports.ThemeInjector = ThemeInjector.ThemeInjector;
 exports.TokenProvider = TokenProvider.TokenProvider;
 exports.DataGrid = DataGrid.DataGrid;
 exports.FlexCol = FlexCol.FlexCol;
 exports.FlexRow = FlexRow.FlexRow;
-exports.PhoneInput = index$2.PhoneInput;
+exports.PhoneInput = index$1.PhoneInput;
 exports.ChannelMark = ChannelMark.ChannelMark;
 exports.ChannelTypeMap = constants$2.ChannelTypeMap;
 exports.CarrierMark = CarrierMark.CarrierMark;
@@ -487,7 +487,7 @@ exports.assignCssVars = assignCssVars.assignCssVars;
 exports.buildChannelMarkUrl = buildChannelMarkUrl.buildChannelMarkUrl;
 exports.buildCarrierMarkUrl = buildCarrierMarkUrl.buildCarrierMarkUrl;
 exports.getContextAwareLink = getContextAwareLink.getContextAwareLink;
-exports.theme = index$5.theme;
+exports.theme = index$4.theme;
 exports.AccountsIcon = AccountsIcon.ReactComponent;
 exports.AccountsOutlineIcon = AccountsOutlineIcon.ReactComponent;
 exports.AddIcon = AddIcon.ReactComponent;

package/dist/index.js

@@ -39,7 +39,7 @@ export { Divider } from './components/Divider/Divider.js';
 export { Dropdown } from './components/Dropdown/Dropdown.js';
 export { FeatureBanner } from './components/FeatureBanner/FeatureBanner.js';
 export { FilterTag } from './components/FilterTag/FilterTag.js';
-export { Grid } from './components/Grid/index.js';
+export { Grid } from './components/Grid/Grid.js';
 export { Image } from './components/Image/Image.js';
 export { InputAffix } from './components/InputAffix/InputAffix.js';
 export { InputGroup } from './components/InputGroup/InputGroup.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "14.9.1",
+  "version": "14.10.0-beta-2",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",

package/dist/components/Grid/index.cjs

@@ -1,20 +0,0 @@
-'use strict';
-
-var styled = require('styled-components');
-var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
-var sizes = require('../../theme/modules/sizes.cjs');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-const Grid = styled__default.default(BaseContainer.BaseContainer).withConfig({
-    shouldForwardProp: (prop) => !['columns', 'spacing'].includes(prop),
-}) `
-  display: grid;
-  grid-template-columns: repeat(${({ columns }) => columns}, 1fr);
-  grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes.sizes[spacing] : 0)};
-`;
-
-exports.Grid = Grid;
-//# sourceMappingURL=index.cjs.map

package/dist/components/Grid/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Grid/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { sizes } from '../../theme/modules/sizes';\n\nimport { GridProps } from './types';\n\nexport const Grid = styled(BaseContainer).withConfig({\n  shouldForwardProp: (prop) => !['columns', 'spacing'].includes(prop),\n})<GridProps>`\n  display: grid;\n  grid-template-columns: repeat(${({ columns }) => columns}, 1fr);\n  grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};\n`;\n"],"names":["styled","BaseContainer","sizes"],"mappings":";;;;;;;;;;AAOO,MAAM,IAAI,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAC,UAAU,CAAC;AACnD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AACpE,CAAA,CAAC,CAAW;;AAEqB,gCAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,OAAO,CAAA;cAC5C,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,OAAO,GAAGC,WAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAA;;;;;"}

package/dist/components/Grid/index.js

@@ -1,14 +0,0 @@
-import styled from 'styled-components';
-import { BaseContainer } from '../BaseContainer/BaseContainer.js';
-import { sizes } from '../../theme/modules/sizes.js';
-
-const Grid = styled(BaseContainer).withConfig({
-    shouldForwardProp: (prop) => !['columns', 'spacing'].includes(prop),
-}) `
-  display: grid;
-  grid-template-columns: repeat(${({ columns }) => columns}, 1fr);
-  grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};
-`;
-
-export { Grid };
-//# sourceMappingURL=index.js.map

package/dist/components/Grid/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Grid/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { sizes } from '../../theme/modules/sizes';\n\nimport { GridProps } from './types';\n\nexport const Grid = styled(BaseContainer).withConfig({\n  shouldForwardProp: (prop) => !['columns', 'spacing'].includes(prop),\n})<GridProps>`\n  display: grid;\n  grid-template-columns: repeat(${({ columns }) => columns}, 1fr);\n  grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};\n`;\n"],"names":[],"mappings":";;;;AAOO,MAAM,IAAI,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC;AACnD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AACpE,CAAA,CAAC,CAAW;;AAEqB,gCAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,OAAO,CAAA;cAC5C,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAA;;;;;"}