@veeqo/ui 14.10.0-beta-1 → 14.10.0

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 Grid = require('./components/Grid/Grid.cjs');
+var index$1 = require('./components/Grid/index.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$3 = require('./components/TextField/index.cjs');
+var index$4 = 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$2 = require('./components/SelectDropdown/index.cjs');
+var index$3 = 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$1 = require('./components/PhoneInput/index.cjs');
+var index$2 = 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$4 = require('./theme/index.cjs');
+var index$5 = 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 = Grid.Grid;
+exports.Grid = index$1.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$3.TextField;
+exports.TextField = index$4.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$2.SelectDropdown;
+exports.SelectDropdown = index$3.SelectDropdown;
 exports.ThemeInjector = ThemeInjector.ThemeInjector;
 exports.TokenProvider = TokenProvider.TokenProvider;
 exports.DataGrid = DataGrid.DataGrid;
 exports.FlexCol = FlexCol.FlexCol;
 exports.FlexRow = FlexRow.FlexRow;
-exports.PhoneInput = index$1.PhoneInput;
+exports.PhoneInput = index$2.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$4.theme;
+exports.theme = index$5.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/Grid.js';
+export { Grid } from './components/Grid/index.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.10.0-beta-1",
+  "version": "14.10.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",

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

@@ -1,9 +0,0 @@
-'use strict';
-
-var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
-
-___$insertStyle("/* DataTable sub-component styles */\n/* ScrollContainer */\n._scrollContainer_1biar_3 {\n  position: relative;\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\n/* NoWrap */\n._noWrap_1biar_11 {\n  white-space: nowrap;\n}\n\n/* Truncate */\n._truncate_1biar_16 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* LoadingCellContent */\n._loadingCellContent_1biar_23 {\n  height: 20px;\n  width: 75%;\n  border-radius: var(--radius-base);\n  background: var(--colors-neutral-grey-base);\n  background-image: linear-gradient(to right, var(--colors-neutral-grey-base) 0%, var(--colors-neutral-grey-dark) 20%, var(--colors-neutral-grey-base) 40%, var(--colors-neutral-grey-base) 100%);\n  background-repeat: no-repeat;\n  background-size: 800px 104px;\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: _placeholderShimmer_1biar_1;\n  animation-timing-function: linear;\n}\n\n@keyframes _placeholderShimmer_1biar_1 {\n  0% {\n    background-position: -468px 0;\n  }\n  100% {\n    background-position: 468px 0;\n  }\n}\n/* EmptyBodyContent */\n._emptyBodyContent_1biar_47 {\n  padding-top: var(--sizes-lg);\n  padding-bottom: var(--sizes-lg);\n  grid-column: 1/span var(--column-span);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--sizes-md);\n}\n\n._emptyBodyGlyphWrapper_1biar_58 {\n  padding: var(--sizes-md);\n  background-color: var(--colors-neutral-grey-light);\n  border-radius: var(--radius-full);\n}\n\n/* Cell */\n._cell_1biar_65 {\n  display: flex;\n  align-items: center;\n  justify-content: var(--cell-align, flex-start);\n  background-color: white;\n  padding-bottom: var(--density);\n  padding-top: var(--density);\n  padding-left: var(--cell-spacing, var(--sizes-3));\n  padding-right: var(--cell-spacing, var(--sizes-3));\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n  grid-column-end: span var(--cell-span, 1);\n}\ntfoot ._cell_1biar_65 {\n  min-height: 56px;\n  border-top: 1px solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n/* Header */\n._header_1biar_89 {\n  height: 56px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: var(--cell-align, flex-start);\n  z-index: var(--header-z-index, 0);\n  background-color: white;\n  padding-left: var(--cell-spacing, var(--sizes-3));\n  padding-right: var(--cell-spacing, var(--sizes-3));\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n  grid-column-end: span var(--cell-span, 1);\n}\n\n/* Row */\n._row_1biar_104 {\n  display: contents;\n}\n\n._rowSelected_1biar_108 > td {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n._rowAccentColor_1biar_112 > *:first-child {\n  position: relative;\n}\n\n._rowAccentColor_1biar_112 > *:first-child::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 4px;\n  background-color: var(--row-accent-color);\n}\n\n/* Wrapper */\n._wrapper_1biar_127 {\n  width: 100%;\n  position: relative;\n  border-style: solid;\n  border-color: var(--colors-neutral-grey-dark);\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n}\n._wrapper_1biar_127, ._wrapper_1biar_127 * {\n  box-sizing: border-box;\n}\n._wrapper_1biar_127 .hideHeaderDetails th {\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n}\n._wrapper_1biar_127 .hideHeaderDetails th > * {\n  opacity: 0.1;\n}\n._wrapper_1biar_127 .hideHeaderDetails th .th-divider {\n  opacity: 1;\n}\n\n._borderFull_1biar_147 {\n  border-width: 1px;\n  border-radius: var(--radius-base);\n}\n\n._borderVertical_1biar_152 {\n  border-width: 0;\n  border-top-width: 1px;\n  border-bottom-width: 1px;\n}\n\n._borderNone_1biar_158 {\n  border-width: 0;\n}\n\n/* TableGrid */\n._tableGrid_1biar_163 {\n  min-width: 100%;\n  width: max-content;\n  display: grid;\n  --density: var(--sizes-base);\n}\n._tableGrid_1biar_163 thead, ._tableGrid_1biar_163 tbody, ._tableGrid_1biar_163 tfoot {\n  display: contents;\n}\n\n._tableGrid_1biar_163._tableGrid_1biar_163 tr:hover td {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n/* ColumnHeader */\n._sortIndicator_1biar_178 {\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}\n\n._headerContent_1biar_188 {\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: var(--sizes-xs);\n  white-space: nowrap;\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-style: var(--text-heading-table-font-style);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n._clickableHeaderContent_1biar_202 {\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: var(--sizes-xs);\n  white-space: nowrap;\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-style: var(--text-heading-table-font-style);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n  appearance: none;\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-base);\n  background-color: transparent;\n}\n._clickableHeaderContent_1biar_202:not(:disabled):hover {\n  cursor: pointer;\n}\n._clickableHeaderContent_1biar_202:hover ._sortIndicator_1biar_178 {\n  background-color: var(--colors-neutral-grey-light);\n  color: var(--colors-neutral-ink-base);\n}\n._clickableHeaderContent_1biar_202:focus-visible {\n  outline: 0;\n  box-shadow: 0px 0px 0px 2px var(--colors-secondary-blue-light);\n}\n\n/* ColumnDivider ResizerBar */\n._resizerBar_1biar_233 {\n  position: absolute;\n  right: 0;\n  top: 37.5%;\n  width: 1px;\n  background: var(--colors-neutral-grey-dark);\n  min-height: 25%;\n  cursor: col-resize;\n  user-select: none;\n}\n._resizerBar_1biar_233::before {\n  content: \"\";\n  position: absolute;\n  top: -150%;\n  left: 0;\n  width: 12px;\n  min-height: 400%;\n  z-index: 1;\n  transform: translateX(-6px);\n}\n\n/* ActionBar */\n._actionBarContainer_1biar_255 {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 50;\n  height: 56px;\n  background-color: white;\n}\n\n._actionBarContent_1biar_268 {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 var(--sizes-sm);\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n}\n._actionBarContent_1biar_268 > * {\n  flex: 1;\n}");
-var styles = {"scrollContainer":"_scrollContainer_1biar_3","noWrap":"_noWrap_1biar_11","truncate":"_truncate_1biar_16","loadingCellContent":"_loadingCellContent_1biar_23","emptyBodyContent":"_emptyBodyContent_1biar_47","emptyBodyGlyphWrapper":"_emptyBodyGlyphWrapper_1biar_58","cell":"_cell_1biar_65","header":"_header_1biar_89","row":"_row_1biar_104","rowSelected":"_rowSelected_1biar_108","rowAccentColor":"_rowAccentColor_1biar_112","wrapper":"_wrapper_1biar_127","borderFull":"_borderFull_1biar_147","borderVertical":"_borderVertical_1biar_152","borderNone":"_borderNone_1biar_158","tableGrid":"_tableGrid_1biar_163","sortIndicator":"_sortIndicator_1biar_178","headerContent":"_headerContent_1biar_188","clickableHeaderContent":"_clickableHeaderContent_1biar_202","resizerBar":"_resizerBar_1biar_233","actionBarContainer":"_actionBarContainer_1biar_255","actionBarContent":"_actionBarContent_1biar_268"};
-
-module.exports = styles;
-//# sourceMappingURL=DataTable.module.scss.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DataTable.module.scss.cjs","sources":["../../../../src/components/DataTable/components/DataTable.module.scss"],"sourcesContent":["/* DataTable sub-component styles */\n\n/* ScrollContainer */\n.scrollContainer {\n  position: relative;\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\n/* NoWrap */\n.noWrap {\n  white-space: nowrap;\n}\n\n/* Truncate */\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* LoadingCellContent */\n.loadingCellContent {\n  height: 20px;\n  width: 75%;\n  border-radius: var(--radius-base);\n\n  background: var(--colors-neutral-grey-base);\n  background-image: linear-gradient(\n    to right,\n    var(--colors-neutral-grey-base) 0%,\n    var(--colors-neutral-grey-dark) 20%,\n    var(--colors-neutral-grey-base) 40%,\n    var(--colors-neutral-grey-base) 100%\n  );\n  background-repeat: no-repeat;\n  background-size: 800px 104px;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: placeholderShimmer;\n  animation-timing-function: linear;\n}\n\n@keyframes placeholderShimmer {\n  0% {\n    background-position: -468px 0;\n  }\n\n  100% {\n    background-position: 468px 0;\n  }\n}\n\n/* EmptyBodyContent */\n.emptyBodyContent {\n  padding-top: var(--sizes-lg);\n  padding-bottom: var(--sizes-lg);\n  grid-column: 1 / span var(--column-span);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--sizes-md);\n}\n\n.emptyBodyGlyphWrapper {\n  padding: var(--sizes-md);\n  background-color: var(--colors-neutral-grey-light);\n  border-radius: var(--radius-full);\n}\n\n/* Cell */\n.cell {\n  display: flex;\n  align-items: center;\n  justify-content: var(--cell-align, flex-start);\n\n  background-color: white;\n  padding-bottom: var(--density);\n  padding-top: var(--density);\n  padding-left: var(--cell-spacing, var(--sizes-3));\n  padding-right: var(--cell-spacing, var(--sizes-3));\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n\n  grid-column-end: span var(--cell-span, 1);\n\n  tfoot & {\n    min-height: 56px;\n    border-top: 1px solid var(--colors-secondary-blue-base);\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n}\n\n/* Header */\n.header {\n  height: 56px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: var(--cell-align, flex-start);\n  z-index: var(--header-z-index, 0);\n\n  background-color: white;\n  padding-left: var(--cell-spacing, var(--sizes-3));\n  padding-right: var(--cell-spacing, var(--sizes-3));\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n  grid-column-end: span var(--cell-span, 1);\n}\n\n/* Row */\n.row {\n  display: contents;\n}\n\n.rowSelected > td {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n.rowAccentColor > *:first-child {\n  position: relative;\n}\n\n.rowAccentColor > *:first-child::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 4px;\n  background-color: var(--row-accent-color);\n}\n\n/* Wrapper */\n.wrapper {\n  width: 100%;\n  position: relative;\n  border-style: solid;\n  border-color: var(--colors-neutral-grey-dark);\n\n  &,\n  & * {\n    box-sizing: border-box;\n  }\n\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n  :global(.hideHeaderDetails) th {\n    > * {\n      opacity: 0.1;\n    }\n\n    /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n    :global(.th-divider) {\n      opacity: 1;\n    }\n  }\n}\n\n.borderFull {\n  border-width: 1px;\n  border-radius: var(--radius-base);\n}\n\n.borderVertical {\n  border-width: 0;\n  border-top-width: 1px;\n  border-bottom-width: 1px;\n}\n\n.borderNone {\n  border-width: 0;\n}\n\n/* TableGrid */\n.tableGrid {\n  min-width: 100%;\n  width: max-content;\n  display: grid;\n\n  & thead,\n  & tbody,\n  & tfoot {\n    display: contents;\n  }\n\n  --density: var(--sizes-base);\n}\n\n.tableGrid.tableGrid tr:hover td {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n/* ColumnHeader */\n.sortIndicator {\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}\n\n.headerContent {\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: var(--sizes-xs);\n  white-space: nowrap;\n\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-style: var(--text-heading-table-font-style);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n.clickableHeaderContent {\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: var(--sizes-xs);\n  white-space: nowrap;\n\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-style: var(--text-heading-table-font-style);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n\n  appearance: none;\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-base);\n  background-color: transparent;\n\n  &:not(:disabled):hover {\n    cursor: pointer;\n  }\n\n  &:hover .sortIndicator {\n    background-color: var(--colors-neutral-grey-light);\n    color: var(--colors-neutral-ink-base);\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow: 0px 0px 0px 2px var(--colors-secondary-blue-light);\n  }\n}\n\n/* ColumnDivider ResizerBar */\n.resizerBar {\n  position: absolute;\n  right: 0;\n  top: 37.5%;\n  width: 1px;\n  background: var(--colors-neutral-grey-dark);\n  min-height: 25%;\n  cursor: col-resize;\n  user-select: none;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: -150%;\n    left: 0;\n    width: 12px;\n    min-height: 400%;\n    z-index: 1;\n    transform: translateX(-6px);\n  }\n}\n\n/* ActionBar */\n.actionBarContainer {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 50;\n  height: 56px;\n  background-color: white;\n}\n\n.actionBarContent {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 var(--sizes-sm);\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n  & > * {\n    flex: 1;\n  }\n}\n"],"names":[],"mappings":";;;;AAEA,eAAA,CAAA,u7NAAA;AACA,aAAA,CAAA,iBAAA,CAAA,0BAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,gBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,WAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,0BAAA,CAAA,eAAA,CAAA,0BAAA,CAAA,wBAAA,CAAA,mCAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,oBAAA,CAAA,+BAAA,CAAA,kBAAA,CAAA,6BAAA;;;;"}

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

@@ -1,7 +0,0 @@
-import insertStyle from '../../../_virtual/____insertStyle.js';
-
-insertStyle("/* DataTable sub-component styles */\n/* ScrollContainer */\n._scrollContainer_1biar_3 {\n  position: relative;\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\n/* NoWrap */\n._noWrap_1biar_11 {\n  white-space: nowrap;\n}\n\n/* Truncate */\n._truncate_1biar_16 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* LoadingCellContent */\n._loadingCellContent_1biar_23 {\n  height: 20px;\n  width: 75%;\n  border-radius: var(--radius-base);\n  background: var(--colors-neutral-grey-base);\n  background-image: linear-gradient(to right, var(--colors-neutral-grey-base) 0%, var(--colors-neutral-grey-dark) 20%, var(--colors-neutral-grey-base) 40%, var(--colors-neutral-grey-base) 100%);\n  background-repeat: no-repeat;\n  background-size: 800px 104px;\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: _placeholderShimmer_1biar_1;\n  animation-timing-function: linear;\n}\n\n@keyframes _placeholderShimmer_1biar_1 {\n  0% {\n    background-position: -468px 0;\n  }\n  100% {\n    background-position: 468px 0;\n  }\n}\n/* EmptyBodyContent */\n._emptyBodyContent_1biar_47 {\n  padding-top: var(--sizes-lg);\n  padding-bottom: var(--sizes-lg);\n  grid-column: 1/span var(--column-span);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--sizes-md);\n}\n\n._emptyBodyGlyphWrapper_1biar_58 {\n  padding: var(--sizes-md);\n  background-color: var(--colors-neutral-grey-light);\n  border-radius: var(--radius-full);\n}\n\n/* Cell */\n._cell_1biar_65 {\n  display: flex;\n  align-items: center;\n  justify-content: var(--cell-align, flex-start);\n  background-color: white;\n  padding-bottom: var(--density);\n  padding-top: var(--density);\n  padding-left: var(--cell-spacing, var(--sizes-3));\n  padding-right: var(--cell-spacing, var(--sizes-3));\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n  grid-column-end: span var(--cell-span, 1);\n}\ntfoot ._cell_1biar_65 {\n  min-height: 56px;\n  border-top: 1px solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n/* Header */\n._header_1biar_89 {\n  height: 56px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: var(--cell-align, flex-start);\n  z-index: var(--header-z-index, 0);\n  background-color: white;\n  padding-left: var(--cell-spacing, var(--sizes-3));\n  padding-right: var(--cell-spacing, var(--sizes-3));\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n  grid-column-end: span var(--cell-span, 1);\n}\n\n/* Row */\n._row_1biar_104 {\n  display: contents;\n}\n\n._rowSelected_1biar_108 > td {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n._rowAccentColor_1biar_112 > *:first-child {\n  position: relative;\n}\n\n._rowAccentColor_1biar_112 > *:first-child::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 4px;\n  background-color: var(--row-accent-color);\n}\n\n/* Wrapper */\n._wrapper_1biar_127 {\n  width: 100%;\n  position: relative;\n  border-style: solid;\n  border-color: var(--colors-neutral-grey-dark);\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n}\n._wrapper_1biar_127, ._wrapper_1biar_127 * {\n  box-sizing: border-box;\n}\n._wrapper_1biar_127 .hideHeaderDetails th {\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n}\n._wrapper_1biar_127 .hideHeaderDetails th > * {\n  opacity: 0.1;\n}\n._wrapper_1biar_127 .hideHeaderDetails th .th-divider {\n  opacity: 1;\n}\n\n._borderFull_1biar_147 {\n  border-width: 1px;\n  border-radius: var(--radius-base);\n}\n\n._borderVertical_1biar_152 {\n  border-width: 0;\n  border-top-width: 1px;\n  border-bottom-width: 1px;\n}\n\n._borderNone_1biar_158 {\n  border-width: 0;\n}\n\n/* TableGrid */\n._tableGrid_1biar_163 {\n  min-width: 100%;\n  width: max-content;\n  display: grid;\n  --density: var(--sizes-base);\n}\n._tableGrid_1biar_163 thead, ._tableGrid_1biar_163 tbody, ._tableGrid_1biar_163 tfoot {\n  display: contents;\n}\n\n._tableGrid_1biar_163._tableGrid_1biar_163 tr:hover td {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n/* ColumnHeader */\n._sortIndicator_1biar_178 {\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}\n\n._headerContent_1biar_188 {\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: var(--sizes-xs);\n  white-space: nowrap;\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-style: var(--text-heading-table-font-style);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n._clickableHeaderContent_1biar_202 {\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: var(--sizes-xs);\n  white-space: nowrap;\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-style: var(--text-heading-table-font-style);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n  appearance: none;\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-base);\n  background-color: transparent;\n}\n._clickableHeaderContent_1biar_202:not(:disabled):hover {\n  cursor: pointer;\n}\n._clickableHeaderContent_1biar_202:hover ._sortIndicator_1biar_178 {\n  background-color: var(--colors-neutral-grey-light);\n  color: var(--colors-neutral-ink-base);\n}\n._clickableHeaderContent_1biar_202:focus-visible {\n  outline: 0;\n  box-shadow: 0px 0px 0px 2px var(--colors-secondary-blue-light);\n}\n\n/* ColumnDivider ResizerBar */\n._resizerBar_1biar_233 {\n  position: absolute;\n  right: 0;\n  top: 37.5%;\n  width: 1px;\n  background: var(--colors-neutral-grey-dark);\n  min-height: 25%;\n  cursor: col-resize;\n  user-select: none;\n}\n._resizerBar_1biar_233::before {\n  content: \"\";\n  position: absolute;\n  top: -150%;\n  left: 0;\n  width: 12px;\n  min-height: 400%;\n  z-index: 1;\n  transform: translateX(-6px);\n}\n\n/* ActionBar */\n._actionBarContainer_1biar_255 {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 50;\n  height: 56px;\n  background-color: white;\n}\n\n._actionBarContent_1biar_268 {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 var(--sizes-sm);\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n}\n._actionBarContent_1biar_268 > * {\n  flex: 1;\n}");
-var styles = {"scrollContainer":"_scrollContainer_1biar_3","noWrap":"_noWrap_1biar_11","truncate":"_truncate_1biar_16","loadingCellContent":"_loadingCellContent_1biar_23","emptyBodyContent":"_emptyBodyContent_1biar_47","emptyBodyGlyphWrapper":"_emptyBodyGlyphWrapper_1biar_58","cell":"_cell_1biar_65","header":"_header_1biar_89","row":"_row_1biar_104","rowSelected":"_rowSelected_1biar_108","rowAccentColor":"_rowAccentColor_1biar_112","wrapper":"_wrapper_1biar_127","borderFull":"_borderFull_1biar_147","borderVertical":"_borderVertical_1biar_152","borderNone":"_borderNone_1biar_158","tableGrid":"_tableGrid_1biar_163","sortIndicator":"_sortIndicator_1biar_178","headerContent":"_headerContent_1biar_188","clickableHeaderContent":"_clickableHeaderContent_1biar_202","resizerBar":"_resizerBar_1biar_233","actionBarContainer":"_actionBarContainer_1biar_255","actionBarContent":"_actionBarContent_1biar_268"};
-
-export { styles as default };
-//# sourceMappingURL=DataTable.module.scss.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DataTable.module.scss.js","sources":["../../../../src/components/DataTable/components/DataTable.module.scss"],"sourcesContent":["/* DataTable sub-component styles */\n\n/* ScrollContainer */\n.scrollContainer {\n  position: relative;\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\n/* NoWrap */\n.noWrap {\n  white-space: nowrap;\n}\n\n/* Truncate */\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* LoadingCellContent */\n.loadingCellContent {\n  height: 20px;\n  width: 75%;\n  border-radius: var(--radius-base);\n\n  background: var(--colors-neutral-grey-base);\n  background-image: linear-gradient(\n    to right,\n    var(--colors-neutral-grey-base) 0%,\n    var(--colors-neutral-grey-dark) 20%,\n    var(--colors-neutral-grey-base) 40%,\n    var(--colors-neutral-grey-base) 100%\n  );\n  background-repeat: no-repeat;\n  background-size: 800px 104px;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: placeholderShimmer;\n  animation-timing-function: linear;\n}\n\n@keyframes placeholderShimmer {\n  0% {\n    background-position: -468px 0;\n  }\n\n  100% {\n    background-position: 468px 0;\n  }\n}\n\n/* EmptyBodyContent */\n.emptyBodyContent {\n  padding-top: var(--sizes-lg);\n  padding-bottom: var(--sizes-lg);\n  grid-column: 1 / span var(--column-span);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--sizes-md);\n}\n\n.emptyBodyGlyphWrapper {\n  padding: var(--sizes-md);\n  background-color: var(--colors-neutral-grey-light);\n  border-radius: var(--radius-full);\n}\n\n/* Cell */\n.cell {\n  display: flex;\n  align-items: center;\n  justify-content: var(--cell-align, flex-start);\n\n  background-color: white;\n  padding-bottom: var(--density);\n  padding-top: var(--density);\n  padding-left: var(--cell-spacing, var(--sizes-3));\n  padding-right: var(--cell-spacing, var(--sizes-3));\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n\n  grid-column-end: span var(--cell-span, 1);\n\n  tfoot & {\n    min-height: 56px;\n    border-top: 1px solid var(--colors-secondary-blue-base);\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n}\n\n/* Header */\n.header {\n  height: 56px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: var(--cell-align, flex-start);\n  z-index: var(--header-z-index, 0);\n\n  background-color: white;\n  padding-left: var(--cell-spacing, var(--sizes-3));\n  padding-right: var(--cell-spacing, var(--sizes-3));\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n  grid-column-end: span var(--cell-span, 1);\n}\n\n/* Row */\n.row {\n  display: contents;\n}\n\n.rowSelected > td {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n.rowAccentColor > *:first-child {\n  position: relative;\n}\n\n.rowAccentColor > *:first-child::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 4px;\n  background-color: var(--row-accent-color);\n}\n\n/* Wrapper */\n.wrapper {\n  width: 100%;\n  position: relative;\n  border-style: solid;\n  border-color: var(--colors-neutral-grey-dark);\n\n  &,\n  & * {\n    box-sizing: border-box;\n  }\n\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n  :global(.hideHeaderDetails) th {\n    > * {\n      opacity: 0.1;\n    }\n\n    /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n    :global(.th-divider) {\n      opacity: 1;\n    }\n  }\n}\n\n.borderFull {\n  border-width: 1px;\n  border-radius: var(--radius-base);\n}\n\n.borderVertical {\n  border-width: 0;\n  border-top-width: 1px;\n  border-bottom-width: 1px;\n}\n\n.borderNone {\n  border-width: 0;\n}\n\n/* TableGrid */\n.tableGrid {\n  min-width: 100%;\n  width: max-content;\n  display: grid;\n\n  & thead,\n  & tbody,\n  & tfoot {\n    display: contents;\n  }\n\n  --density: var(--sizes-base);\n}\n\n.tableGrid.tableGrid tr:hover td {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n/* ColumnHeader */\n.sortIndicator {\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}\n\n.headerContent {\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: var(--sizes-xs);\n  white-space: nowrap;\n\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-style: var(--text-heading-table-font-style);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n.clickableHeaderContent {\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: var(--sizes-xs);\n  white-space: nowrap;\n\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-style: var(--text-heading-table-font-style);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n\n  appearance: none;\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-base);\n  background-color: transparent;\n\n  &:not(:disabled):hover {\n    cursor: pointer;\n  }\n\n  &:hover .sortIndicator {\n    background-color: var(--colors-neutral-grey-light);\n    color: var(--colors-neutral-ink-base);\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow: 0px 0px 0px 2px var(--colors-secondary-blue-light);\n  }\n}\n\n/* ColumnDivider ResizerBar */\n.resizerBar {\n  position: absolute;\n  right: 0;\n  top: 37.5%;\n  width: 1px;\n  background: var(--colors-neutral-grey-dark);\n  min-height: 25%;\n  cursor: col-resize;\n  user-select: none;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: -150%;\n    left: 0;\n    width: 12px;\n    min-height: 400%;\n    z-index: 1;\n    transform: translateX(-6px);\n  }\n}\n\n/* ActionBar */\n.actionBarContainer {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 50;\n  height: 56px;\n  background-color: white;\n}\n\n.actionBarContent {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 var(--sizes-sm);\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n  & > * {\n    flex: 1;\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AAEAA,WAAA,CAAA,u7NAAA;AACA,aAAA,CAAA,iBAAA,CAAA,0BAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,gBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,WAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,0BAAA,CAAA,eAAA,CAAA,0BAAA,CAAA,wBAAA,CAAA,mCAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,oBAAA,CAAA,+BAAA,CAAA,kBAAA,CAAA,6BAAA;;;;"}

package/dist/components/DataTable/hooks/useTableId.cjs

@@ -1,23 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-let tableIdCounter = 0;
-/**
- * Generates a unique stable ID per component instance for scoping
- * dynamic CSS to a specific DataTable. Compatible with React 17+.
- *
- * Note: Uses a module-level counter. Not SSR-safe (render order dependent).
- * If SSR support is needed, use a context-based ID provider.
- */
-function useTableId() {
-    const idRef = React.useRef(null);
-    if (idRef.current === null) {
-        tableIdCounter += 1;
-        idRef.current = `dt-${tableIdCounter}`;
-    }
-    return idRef.current;
-}
-
-exports.useTableId = useTableId;
-//# sourceMappingURL=useTableId.cjs.map

package/dist/components/DataTable/hooks/useTableId.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTableId.cjs","sources":["../../../../src/components/DataTable/hooks/useTableId.ts"],"sourcesContent":["import { useRef } from 'react';\n\nlet tableIdCounter = 0;\n\n/**\n * Generates a unique stable ID per component instance for scoping\n * dynamic CSS to a specific DataTable. Compatible with React 17+.\n *\n * Note: Uses a module-level counter. Not SSR-safe (render order dependent).\n * If SSR support is needed, use a context-based ID provider.\n */\nexport function useTableId(): string {\n  const idRef = useRef<string | null>(null);\n\n  if (idRef.current === null) {\n    tableIdCounter += 1;\n    idRef.current = `dt-${tableIdCounter}`;\n  }\n\n  return idRef.current;\n}\n\n/**\n * Reset the counter between test runs for deterministic snapshots.\n * @internal Test utility only.\n */\nexport function resetTableIdCounter(): void {\n  tableIdCounter = 0;\n}\n"],"names":["useRef"],"mappings":";;;;AAEA,IAAI,cAAc,GAAG,CAAC;AAEtB;;;;;;AAMG;SACa,UAAU,GAAA;AACxB,IAAA,MAAM,KAAK,GAAGA,YAAM,CAAgB,IAAI,CAAC;AAEzC,IAAA,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,EAAE;QAC1B,cAAc,IAAI,CAAC;AACnB,QAAA,KAAK,CAAC,OAAO,GAAG,CAAA,GAAA,EAAM,cAAc,EAAE;AACvC,IAAA;IAED,OAAO,KAAK,CAAC,OAAO;AACtB;;;;"}

package/dist/components/DataTable/hooks/useTableId.d.ts

@@ -1,13 +0,0 @@
-/**
- * Generates a unique stable ID per component instance for scoping
- * dynamic CSS to a specific DataTable. Compatible with React 17+.
- *
- * Note: Uses a module-level counter. Not SSR-safe (render order dependent).
- * If SSR support is needed, use a context-based ID provider.
- */
-export declare function useTableId(): string;
-/**
- * Reset the counter between test runs for deterministic snapshots.
- * @internal Test utility only.
- */
-export declare function resetTableIdCounter(): void;

package/dist/components/DataTable/hooks/useTableId.js

@@ -1,21 +0,0 @@
-import { useRef } from 'react';
-
-let tableIdCounter = 0;
-/**
- * Generates a unique stable ID per component instance for scoping
- * dynamic CSS to a specific DataTable. Compatible with React 17+.
- *
- * Note: Uses a module-level counter. Not SSR-safe (render order dependent).
- * If SSR support is needed, use a context-based ID provider.
- */
-function useTableId() {
-    const idRef = useRef(null);
-    if (idRef.current === null) {
-        tableIdCounter += 1;
-        idRef.current = `dt-${tableIdCounter}`;
-    }
-    return idRef.current;
-}
-
-export { useTableId };
-//# sourceMappingURL=useTableId.js.map

package/dist/components/DataTable/hooks/useTableId.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTableId.js","sources":["../../../../src/components/DataTable/hooks/useTableId.ts"],"sourcesContent":["import { useRef } from 'react';\n\nlet tableIdCounter = 0;\n\n/**\n * Generates a unique stable ID per component instance for scoping\n * dynamic CSS to a specific DataTable. Compatible with React 17+.\n *\n * Note: Uses a module-level counter. Not SSR-safe (render order dependent).\n * If SSR support is needed, use a context-based ID provider.\n */\nexport function useTableId(): string {\n  const idRef = useRef<string | null>(null);\n\n  if (idRef.current === null) {\n    tableIdCounter += 1;\n    idRef.current = `dt-${tableIdCounter}`;\n  }\n\n  return idRef.current;\n}\n\n/**\n * Reset the counter between test runs for deterministic snapshots.\n * @internal Test utility only.\n */\nexport function resetTableIdCounter(): void {\n  tableIdCounter = 0;\n}\n"],"names":[],"mappings":";;AAEA,IAAI,cAAc,GAAG,CAAC;AAEtB;;;;;;AAMG;SACa,UAAU,GAAA;AACxB,IAAA,MAAM,KAAK,GAAG,MAAM,CAAgB,IAAI,CAAC;AAEzC,IAAA,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,EAAE;QAC1B,cAAc,IAAI,CAAC;AACnB,QAAA,KAAK,CAAC,OAAO,GAAG,CAAA,GAAA,EAAM,cAAc,EAAE;AACvC,IAAA;IAED,OAAO,KAAK,CAAC,OAAO;AACtB;;;;"}

package/dist/components/Grid/Grid.cjs

@@ -1,24 +0,0 @@
-'use strict';
-
-var React = require('react');
-var buildClassnames = require('../../utils/buildClassnames.cjs');
-require('uid/secure');
-var assignCssVars = require('../../utils/assignCssVars.cjs');
-var sizes = require('../../theme/modules/sizes.cjs');
-var Grid_module = require('./Grid.module.scss.cjs');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const Grid = React__default.default.forwardRef(({ columns, spacing = 'base', className, children, style, ...rest }, ref) => (React__default.default.createElement("div", { ref: ref, className: buildClassnames.buildClassnames([Grid_module.grid, className]), style: {
-        ...assignCssVars.assignCssVars({
-            gridColumns: columns,
-            gridSpacing: spacing ? sizes.sizes[spacing] : '0',
-        }),
-        ...style,
-    }, ...rest }, children)));
-Grid.displayName = 'Grid';
-
-exports.Grid = Grid;
-//# sourceMappingURL=Grid.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Grid.cjs","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../utils';\nimport { sizes } from '../../theme/modules/sizes';\nimport { GridProps } from './types';\nimport styles from './Grid.module.scss';\n\nexport const Grid = React.forwardRef<HTMLDivElement, GridProps & React.HTMLAttributes<HTMLDivElement>>(\n  ({ columns, spacing = 'base', className, children, style, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.grid, className])}\n      style={{\n        ...assignCssVars({\n          gridColumns: columns,\n          gridSpacing: spacing ? sizes[spacing] : '0',\n        }),\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  ),\n);\n\nGrid.displayName = 'Grid';\n"],"names":["React","buildClassnames","styles","assignCssVars","sizes"],"mappings":";;;;;;;;;;;;;MAMa,IAAI,GAAGA,sBAAK,CAAC,UAAU,CAClC,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACtEA,8CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,+BAAe,CAAC,CAACC,WAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EACpD,KAAK,EAAE;AACL,QAAA,GAAGC,2BAAa,CAAC;AACf,YAAA,WAAW,EAAE,OAAO;AACpB,YAAA,WAAW,EAAE,OAAO,GAAGC,WAAK,CAAC,OAAO,CAAC,GAAG,GAAG;SAC5C,CAAC;AACF,QAAA,GAAG,KAAK;AACT,KAAA,EAAA,GACG,IAAI,EAAA,EAEP,QAAQ,CACL,CACP;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

package/dist/components/Grid/Grid.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { GridProps } from './types';
-export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Grid/Grid.js

@@ -1,18 +0,0 @@
-import React__default from 'react';
-import { buildClassnames } from '../../utils/buildClassnames.js';
-import 'uid/secure';
-import { assignCssVars } from '../../utils/assignCssVars.js';
-import { sizes } from '../../theme/modules/sizes.js';
-import styles from './Grid.module.scss.js';
-
-const Grid = React__default.forwardRef(({ columns, spacing = 'base', className, children, style, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.grid, className]), style: {
-        ...assignCssVars({
-            gridColumns: columns,
-            gridSpacing: spacing ? sizes[spacing] : '0',
-        }),
-        ...style,
-    }, ...rest }, children)));
-Grid.displayName = 'Grid';
-
-export { Grid };
-//# sourceMappingURL=Grid.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Grid.js","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../utils';\nimport { sizes } from '../../theme/modules/sizes';\nimport { GridProps } from './types';\nimport styles from './Grid.module.scss';\n\nexport const Grid = React.forwardRef<HTMLDivElement, GridProps & React.HTMLAttributes<HTMLDivElement>>(\n  ({ columns, spacing = 'base', className, children, style, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.grid, className])}\n      style={{\n        ...assignCssVars({\n          gridColumns: columns,\n          gridSpacing: spacing ? sizes[spacing] : '0',\n        }),\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  ),\n);\n\nGrid.displayName = 'Grid';\n"],"names":["React"],"mappings":";;;;;;;MAMa,IAAI,GAAGA,cAAK,CAAC,UAAU,CAClC,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACtEA,sCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EACpD,KAAK,EAAE;AACL,QAAA,GAAG,aAAa,CAAC;AACf,YAAA,WAAW,EAAE,OAAO;AACpB,YAAA,WAAW,EAAE,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,GAAG;SAC5C,CAAC;AACF,QAAA,GAAG,KAAK;AACT,KAAA,EAAA,GACG,IAAI,EAAA,EAEP,QAAQ,CACL,CACP;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

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

@@ -1,9 +0,0 @@
-'use strict';
-
-var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
-
-___$insertStyle("._grid_qdgts_1 {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  display: grid;\n  grid-template-columns: repeat(var(--grid-columns), 1fr);\n  gap: var(--grid-spacing);\n}");
-var styles = {"grid":"_grid_qdgts_1"};
-
-module.exports = styles;
-//# sourceMappingURL=Grid.module.scss.cjs.map