@veeqo/ui 14.10.0-beta-1 → 14.10.0-beta-2

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/package.json

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

package/dist/components/Search/styled.cjs

@@ -1,45 +0,0 @@
-'use strict';
-
-var styled = require('styled-components');
-var index = require('../TextField/index.cjs');
-var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
-require('react');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-const Input = styled__default.default(index.TextField).withConfig({ displayName: "vui--Input", componentId: "vui--je6y84" }) `flex-grow:2;margin-top:0;margin-bottom:0;`;
-const IconContainer = styled__default.default.div.withConfig({ displayName: "vui--IconContainer", componentId: "vui--113gfe8" }) `position:absolute;`;
-const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({
-    shouldForwardProp: (prop) => !['iconPosition'].includes(prop),
-}) `
-  position: relative;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  border-radius: 0.25rem;
-
-  ${({ iconPosition }) => {
-    let padding = 'padding-right: 2.5rem;';
-    let position = 'right: 0.5rem;';
-    if (iconPosition === 'left') {
-        padding = 'padding-left: 2.5rem';
-        position = 'left: 0.5rem;';
-    }
-    return `
-      & ${Input} {
-        ${padding}
-      }
-
-      & ${IconContainer} {
-        ${position}
-      }
-    `;
-}}
-`;
-
-exports.Container = Container;
-exports.IconContainer = IconContainer;
-exports.Input = Input;
-//# sourceMappingURL=styled.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Search/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\nimport { Loader } from '../Loader';\n\nconst Input = styled(TextField)`\n  flex-grow: 2;\n  margin-top: 0;\n  margin-bottom: 0;\n`;\n\nconst IconContainer = styled.div`\n  position: absolute;\n`;\n\nconst Container = styled(BaseContainer).withConfig({\n  shouldForwardProp: (prop) => !['iconPosition'].includes(prop),\n})<{ iconPosition: 'left' | 'right' }>`\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 0.25rem;\n\n  ${({ iconPosition }) => {\n    let padding = 'padding-right: 2.5rem;';\n    let position = 'right: 0.5rem;';\n\n    if (iconPosition === 'left') {\n      padding = 'padding-left: 2.5rem';\n      position = 'left: 0.5rem;';\n    }\n\n    return `\n      & ${Input} {\n        ${padding}\n      }\n\n      & ${IconContainer} {\n        ${position}\n      }\n    `;\n  }}\n`;\n\nexport { Container, Input, IconContainer, Loader };\n"],"names":["styled","TextField","BaseContainer"],"mappings":";;;;;;;;;;;AAMA,MAAM,KAAK,GAAGA,uBAAM,CAACC,eAAS,CAAC;AAM/B,MAAM,aAAa,GAAGD,uBAAM,CAAC,GAAG;AAIhC,MAAM,SAAS,GAAGA,uBAAM,CAACE,2BAAa,CAAC,CAAC,UAAU,CAAC;AACjD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC9D,CAAA,CAAC,CAAoC;;;;;;;AAOlC,EAAA,EAAA,CAAC,EAAE,YAAY,EAAE,KAAI;IACrB,IAAI,OAAO,GAAG,wBAAwB;IACtC,IAAI,QAAQ,GAAG,gBAAgB;IAE/B,IAAI,YAAY,KAAK,MAAM,EAAE;QAC3B,OAAO,GAAG,sBAAsB;QAChC,QAAQ,GAAG,eAAe;AAC3B,IAAA;IAED,OAAO;UACD,KAAK,CAAA;UACL,OAAO;;;UAGP,aAAa,CAAA;UACb,QAAQ;;KAEb;AACH,CAAC;;;;;;;"}