@veeqo/ui 14.6.0 → 14.7.1-beta-1

package/dist/components/Select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, useCallback } from 'react';\n\nimport { SelectInput } from './styled';\nimport { withLabels } from '../../hoc';\n\nexport type SelectOption = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  hidden?: boolean;\n};\n\nexport interface SelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'onChange'> {\n  id?: string;\n  className?: string;\n  options: Array<SelectOption>;\n  value?: string;\n  size?: 'sm' | 'base';\n  disabled?: boolean;\n  hasError?: boolean;\n  onChange?: (value: string) => void;\n}\n\nexport const Select = withLabels(\n  forwardRef<HTMLSelectElement, SelectProps>(\n    (\n      { className, options, value, onChange, size, disabled, hasError, ...otherProps }: SelectProps,\n      ref,\n    ) => {\n      const handleChange = useCallback(\n        (e: ChangeEvent<HTMLSelectElement>) => {\n          if (!onChange) return;\n          onChange(e.currentTarget.value);\n        },\n        [onChange],\n      );\n\n      return (\n        <SelectInput\n          className={className}\n          compact={size === 'sm'}\n          value={value ?? undefined}\n          onChange={handleChange}\n          disabled={disabled}\n          hasError={hasError}\n          ref={ref}\n          {...otherProps}\n        >\n          {!!options &&\n            options.map((option) => (\n              <option\n                key={option.label}\n                value={option.value}\n                disabled={option.disabled}\n                hidden={option.hidden}\n              >\n                {option.label}\n              </option>\n            ))}\n        </SelectInput>\n      );\n    },\n  ),\n);\n\nSelect.displayName = 'Select';\n"],"names":["withLabels","forwardRef","useCallback","React","SelectInput"],"mappings":";;;;;;;;;;AAwBO,MAAM,MAAM,GAAGA,qBAAU,CAC9BC,gBAAU,CACR,CACE,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAe,EAC7F,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAiC,KAAI;AACpC,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;AACjC,IAAA,CAAC,EACD,CAAC,QAAQ,CAAC,CACX;IAED,QACEC,qCAACC,kBAAW,EAAA,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,IAAI,KAAK,IAAI,EACtB,KAAK,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,cAAL,KAAK,GAAI,SAAS,EACzB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EAAA,GACJ,UAAU,EAAA,EAEb,CAAC,CAAC,OAAO;AACR,QAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACjBD,iDACE,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAA,EAEpB,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACQ;AAElB,CAAC,CACF;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, useCallback } from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { buildClassnames } from '../../utils';\n\nimport formStyles from '../../utils/forms/form.module.scss';\nimport styles from './Select.module.scss';\n\nexport type SelectOption = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  hidden?: boolean;\n};\n\nexport interface SelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'onChange'> {\n  id?: string;\n  className?: string;\n  /** Array of options to render in the select dropdown. */\n  options: Array<SelectOption>;\n  /** Currently selected value. */\n  value?: string;\n  /** Component size variant. Defaults to `'base'`. */\n  size?: 'sm' | 'base';\n  /** Disables the select element. */\n  disabled?: boolean;\n  /**\n   * When provided, links the select to the disabled message element via `aria-describedby`.\n   * Passed through from `withLabels` — the HOC renders the visible message and sets `disabled`.\n   */\n  disabledMessage?: React.ReactNode;\n  /** When true, applies error styling. Used with `withLabels` to display an error message. */\n  hasError?: boolean;\n  /** Callback fired with the new value on change. */\n  onChange?: (value: string) => void;\n}\n\nexport const Select = withLabels(\n  forwardRef<HTMLSelectElement, SelectProps>(\n    (\n      {\n        className,\n        options,\n        value,\n        onChange,\n        size,\n        disabled,\n        disabledMessage,\n        hasError,\n        id,\n        ...otherProps\n      }: SelectProps,\n      ref,\n    ) => {\n      const handleChange = useCallback(\n        (e: ChangeEvent<HTMLSelectElement>) => {\n          if (!onChange) return;\n          onChange(e.currentTarget.value);\n        },\n        [onChange],\n      );\n\n      const getAriaDescribedBy = () => {\n        if (hasError && id) return `${id}-error`;\n        if (disabledMessage && id) return `${id}-disabled`;\n        return undefined;\n      };\n\n      return (\n        <select\n          className={buildClassnames([\n            formStyles.base,\n            formStyles.fullStyles,\n            styles.select,\n            size === 'sm' && formStyles.compact,\n            hasError && formStyles.error,\n            className,\n          ])}\n          id={id}\n          value={value ?? undefined}\n          onChange={handleChange}\n          disabled={disabled}\n          aria-describedby={getAriaDescribedBy()}\n          ref={ref}\n          {...otherProps}\n        >\n          {!!options &&\n            options.map((option) => (\n              <option\n                key={option.label}\n                value={option.value}\n                disabled={option.disabled}\n                hidden={option.hidden}\n              >\n                {option.label}\n              </option>\n            ))}\n        </select>\n      );\n    },\n  ),\n);\n\nSelect.displayName = 'Select';\n"],"names":["withLabels","forwardRef","useCallback","React","buildClassnames","formStyles","styles"],"mappings":";;;;;;;;;;;;;AAsCO,MAAM,MAAM,GAAGA,qBAAU,CAC9BC,gBAAU,CACR,CACE,EACE,SAAS,EACT,OAAO,EACP,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,QAAQ,EACR,EAAE,EACF,GAAG,UAAU,EACD,EACd,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAiC,KAAI;AACpC,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;AACjC,IAAA,CAAC,EACD,CAAC,QAAQ,CAAC,CACX;IAED,MAAM,kBAAkB,GAAG,MAAK;QAC9B,IAAI,QAAQ,IAAI,EAAE;YAAE,OAAO,CAAA,EAAG,EAAE,CAAA,MAAA,CAAQ;QACxC,IAAI,eAAe,IAAI,EAAE;YAAE,OAAO,CAAA,EAAG,EAAE,CAAA,SAAA,CAAW;AAClD,QAAA,OAAO,SAAS;AAClB,IAAA,CAAC;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,WAAU,CAAC,IAAI;AACf,YAAAA,WAAU,CAAC,UAAU;AACrB,YAAAC,aAAM,CAAC,MAAM;AACb,YAAA,IAAI,KAAK,IAAI,IAAID,WAAU,CAAC,OAAO;YACnC,QAAQ,IAAIA,WAAU,CAAC,KAAK;YAC5B,SAAS;AACV,SAAA,CAAC,EACF,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,GAAI,SAAS,EACzB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAAA,kBAAA,EACA,kBAAkB,EAAE,EACtC,GAAG,EAAE,GAAG,EAAA,GACJ,UAAU,EAAA,EAEb,CAAC,CAAC,OAAO;AACR,QAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACjBF,iDACE,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAA,EAEpB,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACG;AAEb,CAAC,CACF;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

package/dist/components/Select/Select.d.ts

@@ -8,11 +8,22 @@ export type SelectOption = {
 export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'onChange'> {
     id?: string;
     className?: string;
+    /** Array of options to render in the select dropdown. */
     options: Array<SelectOption>;
+    /** Currently selected value. */
     value?: string;
+    /** Component size variant. Defaults to `'base'`. */
     size?: 'sm' | 'base';
+    /** Disables the select element. */
     disabled?: boolean;
+    /**
+     * When provided, links the select to the disabled message element via `aria-describedby`.
+     * Passed through from `withLabels` — the HOC renders the visible message and sets `disabled`.
+     */
+    disabledMessage?: React.ReactNode;
+    /** When true, applies error styling. Used with `withLabels` to display an error message. */
     hasError?: boolean;
+    /** Callback fired with the new value on change. */
     onChange?: (value: string) => void;
 }
 export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps & React.RefAttributes<HTMLSelectElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps, "ref"> & React.RefAttributes<unknown>>;

package/dist/components/Select/Select.js

@@ -1,14 +1,31 @@
 import React__default, { forwardRef, useCallback } from 'react';
-import { SelectInput } from './styled.js';
 import { withLabels } from '../../hoc/withLabels/withLabels.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import formStyles from '../../utils/forms/form.module.scss.js';
+import styles from './Select.module.scss.js';
 
-const Select = withLabels(forwardRef(({ className, options, value, onChange, size, disabled, hasError, ...otherProps }, ref) => {
+const Select = withLabels(forwardRef(({ className, options, value, onChange, size, disabled, disabledMessage, hasError, id, ...otherProps }, ref) => {
     const handleChange = useCallback((e) => {
         if (!onChange)
             return;
         onChange(e.currentTarget.value);
     }, [onChange]);
-    return (React__default.createElement(SelectInput, { className: className, compact: size === 'sm', value: value !== null && value !== void 0 ? value : undefined, onChange: handleChange, disabled: disabled, hasError: hasError, ref: ref, ...otherProps }, !!options &&
+    const getAriaDescribedBy = () => {
+        if (hasError && id)
+            return `${id}-error`;
+        if (disabledMessage && id)
+            return `${id}-disabled`;
+        return undefined;
+    };
+    return (React__default.createElement("select", { className: buildClassnames([
+            formStyles.base,
+            formStyles.fullStyles,
+            styles.select,
+            size === 'sm' && formStyles.compact,
+            hasError && formStyles.error,
+            className,
+        ]), id: id, value: value !== null && value !== void 0 ? value : undefined, onChange: handleChange, disabled: disabled, "aria-describedby": getAriaDescribedBy(), ref: ref, ...otherProps }, !!options &&
         options.map((option) => (React__default.createElement("option", { key: option.label, value: option.value, disabled: option.disabled, hidden: option.hidden }, option.label)))));
 }));
 Select.displayName = 'Select';

package/dist/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, useCallback } from 'react';\n\nimport { SelectInput } from './styled';\nimport { withLabels } from '../../hoc';\n\nexport type SelectOption = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  hidden?: boolean;\n};\n\nexport interface SelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'onChange'> {\n  id?: string;\n  className?: string;\n  options: Array<SelectOption>;\n  value?: string;\n  size?: 'sm' | 'base';\n  disabled?: boolean;\n  hasError?: boolean;\n  onChange?: (value: string) => void;\n}\n\nexport const Select = withLabels(\n  forwardRef<HTMLSelectElement, SelectProps>(\n    (\n      { className, options, value, onChange, size, disabled, hasError, ...otherProps }: SelectProps,\n      ref,\n    ) => {\n      const handleChange = useCallback(\n        (e: ChangeEvent<HTMLSelectElement>) => {\n          if (!onChange) return;\n          onChange(e.currentTarget.value);\n        },\n        [onChange],\n      );\n\n      return (\n        <SelectInput\n          className={className}\n          compact={size === 'sm'}\n          value={value ?? undefined}\n          onChange={handleChange}\n          disabled={disabled}\n          hasError={hasError}\n          ref={ref}\n          {...otherProps}\n        >\n          {!!options &&\n            options.map((option) => (\n              <option\n                key={option.label}\n                value={option.value}\n                disabled={option.disabled}\n                hidden={option.hidden}\n              >\n                {option.label}\n              </option>\n            ))}\n        </SelectInput>\n      );\n    },\n  ),\n);\n\nSelect.displayName = 'Select';\n"],"names":["React"],"mappings":";;;;AAwBO,MAAM,MAAM,GAAG,UAAU,CAC9B,UAAU,CACR,CACE,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAe,EAC7F,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAiC,KAAI;AACpC,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;AACjC,IAAA,CAAC,EACD,CAAC,QAAQ,CAAC,CACX;IAED,QACEA,6BAAC,WAAW,EAAA,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,IAAI,KAAK,IAAI,EACtB,KAAK,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,cAAL,KAAK,GAAI,SAAS,EACzB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EAAA,GACJ,UAAU,EAAA,EAEb,CAAC,CAAC,OAAO;AACR,QAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACjBA,yCACE,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAA,EAEpB,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACQ;AAElB,CAAC,CACF;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, useCallback } from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { buildClassnames } from '../../utils';\n\nimport formStyles from '../../utils/forms/form.module.scss';\nimport styles from './Select.module.scss';\n\nexport type SelectOption = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  hidden?: boolean;\n};\n\nexport interface SelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'onChange'> {\n  id?: string;\n  className?: string;\n  /** Array of options to render in the select dropdown. */\n  options: Array<SelectOption>;\n  /** Currently selected value. */\n  value?: string;\n  /** Component size variant. Defaults to `'base'`. */\n  size?: 'sm' | 'base';\n  /** Disables the select element. */\n  disabled?: boolean;\n  /**\n   * When provided, links the select to the disabled message element via `aria-describedby`.\n   * Passed through from `withLabels` — the HOC renders the visible message and sets `disabled`.\n   */\n  disabledMessage?: React.ReactNode;\n  /** When true, applies error styling. Used with `withLabels` to display an error message. */\n  hasError?: boolean;\n  /** Callback fired with the new value on change. */\n  onChange?: (value: string) => void;\n}\n\nexport const Select = withLabels(\n  forwardRef<HTMLSelectElement, SelectProps>(\n    (\n      {\n        className,\n        options,\n        value,\n        onChange,\n        size,\n        disabled,\n        disabledMessage,\n        hasError,\n        id,\n        ...otherProps\n      }: SelectProps,\n      ref,\n    ) => {\n      const handleChange = useCallback(\n        (e: ChangeEvent<HTMLSelectElement>) => {\n          if (!onChange) return;\n          onChange(e.currentTarget.value);\n        },\n        [onChange],\n      );\n\n      const getAriaDescribedBy = () => {\n        if (hasError && id) return `${id}-error`;\n        if (disabledMessage && id) return `${id}-disabled`;\n        return undefined;\n      };\n\n      return (\n        <select\n          className={buildClassnames([\n            formStyles.base,\n            formStyles.fullStyles,\n            styles.select,\n            size === 'sm' && formStyles.compact,\n            hasError && formStyles.error,\n            className,\n          ])}\n          id={id}\n          value={value ?? undefined}\n          onChange={handleChange}\n          disabled={disabled}\n          aria-describedby={getAriaDescribedBy()}\n          ref={ref}\n          {...otherProps}\n        >\n          {!!options &&\n            options.map((option) => (\n              <option\n                key={option.label}\n                value={option.value}\n                disabled={option.disabled}\n                hidden={option.hidden}\n              >\n                {option.label}\n              </option>\n            ))}\n        </select>\n      );\n    },\n  ),\n);\n\nSelect.displayName = 'Select';\n"],"names":["React"],"mappings":";;;;;;;AAsCO,MAAM,MAAM,GAAG,UAAU,CAC9B,UAAU,CACR,CACE,EACE,SAAS,EACT,OAAO,EACP,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,QAAQ,EACR,EAAE,EACF,GAAG,UAAU,EACD,EACd,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAiC,KAAI;AACpC,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;AACjC,IAAA,CAAC,EACD,CAAC,QAAQ,CAAC,CACX;IAED,MAAM,kBAAkB,GAAG,MAAK;QAC9B,IAAI,QAAQ,IAAI,EAAE;YAAE,OAAO,CAAA,EAAG,EAAE,CAAA,MAAA,CAAQ;QACxC,IAAI,eAAe,IAAI,EAAE;YAAE,OAAO,CAAA,EAAG,EAAE,CAAA,SAAA,CAAW;AAClD,QAAA,OAAO,SAAS;AAClB,IAAA,CAAC;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,UAAU,CAAC,IAAI;AACf,YAAA,UAAU,CAAC,UAAU;AACrB,YAAA,MAAM,CAAC,MAAM;AACb,YAAA,IAAI,KAAK,IAAI,IAAI,UAAU,CAAC,OAAO;YACnC,QAAQ,IAAI,UAAU,CAAC,KAAK;YAC5B,SAAS;AACV,SAAA,CAAC,EACF,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,GAAI,SAAS,EACzB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAAA,kBAAA,EACA,kBAAkB,EAAE,EACtC,GAAG,EAAE,GAAG,EAAA,GACJ,UAAU,EAAA,EAEb,CAAC,CAAC,OAAO;AACR,QAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACjBA,yCACE,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAA,EAEpB,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACG;AAEb,CAAC,CACF;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._select_1kp7e_1 {\n  --padding-right: var(--sizes-9);\n  padding-right: var(--padding-right);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%, 0 0;\n}\n._select_1kp7e_1:has(option:disabled:checked) {\n  color: var(--colors-neutral-ink-light);\n}");
+var styles = {"select":"_select_1kp7e_1"};
+
+module.exports = styles;
+//# sourceMappingURL=Select.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.module.scss.cjs","sources":["../../../src/components/Select/Select.module.scss"],"sourcesContent":[".select {\n  --padding-right: var(--sizes-9);\n\n  padding-right: var(--padding-right);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position:\n    right var(--sizes-3) top 50%,\n    0 0;\n\n  &:has(option:disabled:checked) {\n    color: var(--colors-neutral-ink-light);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,0hBAAA;AAEA,aAAA,CAAA,QAAA,CAAA,iBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._select_1kp7e_1 {\n  --padding-right: var(--sizes-9);\n  padding-right: var(--padding-right);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%, 0 0;\n}\n._select_1kp7e_1:has(option:disabled:checked) {\n  color: var(--colors-neutral-ink-light);\n}");
+var styles = {"select":"_select_1kp7e_1"};
+
+export { styles as default };
+//# sourceMappingURL=Select.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.module.scss.js","sources":["../../../src/components/Select/Select.module.scss"],"sourcesContent":[".select {\n  --padding-right: var(--sizes-9);\n\n  padding-right: var(--padding-right);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position:\n    right var(--sizes-3) top 50%,\n    0 0;\n\n  &:has(option:disabled:checked) {\n    color: var(--colors-neutral-ink-light);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,0hBAAA;AAEA,aAAA,CAAA,QAAA,CAAA,iBAAA;;;;"}

package/dist/components/TextField/TextField.cjs

@@ -2,14 +2,16 @@
 
 var React = require('react');
 var generateId = require('../../utils/generateId.cjs');
-var styled = require('./styled.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+var form_module = require('../../utils/forms/form.module.scss.cjs');
+var TextField_module = require('./TextField.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const NUMBER_REGEX = /^-?[0-9]*\.?[0-9]+$/;
-const TextField = React.forwardRef(({ id, className, disabled = false, hasError, multiline = false, spellCheck = false, name, onChange, placeholder, size = 'base', type = 'text', value, ...otherProps }, ref) => {
+const TextField = React.forwardRef(({ id, className, disabled = false, disabledMessage, hasError, multiline = false, spellCheck = false, name, onChange, placeholder, size = 'base', type = 'text', value, ...otherProps }, ref) => {
     const handleChange = React.useCallback((event) => {
         if (!onChange)
             return;
@@ -32,14 +34,29 @@ const TextField = React.forwardRef(({ id, className, disabled = false, hasError,
     const ariaDescribedBy = React.useMemo(() => {
         if (hasError)
             return `${componentId}-error`;
-        if (disabled)
+        if (disabledMessage)
             return `${componentId}-disabled`;
         return undefined;
-    }, [hasError, componentId, disabled]);
+    }, [hasError, disabledMessage, componentId]);
+    const isCompact = size === 'sm';
     if (type === 'text' && multiline) {
-        return (React__default.default.createElement(styled.Textarea, { className: className, disabled: disabled, hasError: hasError, id: componentId, name: name, onChange: handleChange, placeholder: placeholder, value: value, ref: ref, spellCheck: spellCheck, "aria-describedby": ariaDescribedBy, ...otherProps }));
+        return (React__default.default.createElement("textarea", { className: buildClassnames.buildClassnames([
+                form_module.base,
+                form_module.fullStyles,
+                TextField_module.textarea,
+                isCompact && form_module.compact,
+                hasError && form_module.error,
+                className,
+            ]), disabled: disabled, id: componentId, name: name, onChange: handleChange, placeholder: placeholder, value: value, ref: ref, spellCheck: spellCheck, "aria-describedby": ariaDescribedBy, ...otherProps }));
     }
-    return (React__default.default.createElement(styled.Input, { className: className, disabled: disabled, hasError: hasError, id: componentId, compact: size === 'sm', name: name, "aria-label": name, onChange: handleChange, placeholder: placeholder, type: type, value: value, ref: ref, spellCheck: spellCheck, "aria-describedby": ariaDescribedBy, ...otherProps }));
+    return (React__default.default.createElement("input", { className: buildClassnames.buildClassnames([
+            form_module.base,
+            form_module.fullStyles,
+            TextField_module.input,
+            isCompact && form_module.compact,
+            hasError && form_module.error,
+            className,
+        ]), disabled: disabled, id: componentId, name: name, "aria-label": name, onChange: handleChange, placeholder: placeholder, type: type, value: value, ref: ref, spellCheck: spellCheck, "aria-describedby": ariaDescribedBy, ...otherProps }));
 });
 
 exports.TextField = TextField;

package/dist/components/TextField/TextField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.cjs","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import React, { useCallback, ChangeEvent, forwardRef, useMemo } from 'react';\nimport { TextFieldProps } from './types';\nimport { generateId } from '../../utils/generateId';\n\nimport { Input, Textarea } from './styled';\n\nconst NUMBER_REGEX = /^-?[0-9]*\\.?[0-9]+$/;\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      id,\n      className,\n      disabled = false,\n      hasError,\n      multiline = false,\n      spellCheck = false,\n      name,\n      onChange,\n      placeholder,\n      size = 'base',\n      type = 'text',\n      value,\n      ...otherProps\n    }: TextFieldProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (!onChange) return;\n        const newValue = event.currentTarget.value;\n\n        if (newValue === '') {\n          onChange(newValue);\n          return;\n        }\n\n        if (type !== 'number') {\n          onChange(newValue);\n          return;\n        }\n\n        const reg = new RegExp(NUMBER_REGEX);\n        if (!reg.test(newValue)) {\n          return;\n        }\n\n        onChange(newValue);\n      },\n      [onChange, type],\n    );\n\n    const componentId = useMemo(() => id ?? generateId('textfield'), [id]);\n    const ariaDescribedBy = useMemo(() => {\n      if (hasError) return `${componentId}-error`;\n      if (disabled) return `${componentId}-disabled`;\n      return undefined;\n    }, [hasError, componentId, disabled]);\n\n    if (type === 'text' && multiline) {\n      return (\n        <Textarea\n          className={className}\n          disabled={disabled}\n          hasError={hasError}\n          id={componentId}\n          name={name}\n          onChange={handleChange}\n          placeholder={placeholder}\n          value={value}\n          ref={ref}\n          spellCheck={spellCheck}\n          aria-describedby={ariaDescribedBy}\n          {...otherProps}\n        />\n      );\n    }\n\n    return (\n      <Input\n        className={className}\n        disabled={disabled}\n        hasError={hasError}\n        id={componentId}\n        compact={size === 'sm'}\n        name={name}\n        aria-label={name}\n        onChange={handleChange}\n        placeholder={placeholder}\n        type={type}\n        value={value}\n        ref={ref}\n        spellCheck={spellCheck}\n        aria-describedby={ariaDescribedBy}\n        {...otherProps}\n      />\n    );\n  },\n);\n"],"names":["forwardRef","useCallback","useMemo","generateId","React","Textarea","Input"],"mappings":";;;;;;;;;;AAMA,MAAM,YAAY,GAAG,qBAAqB;MAE7B,SAAS,GAAGA,gBAAU,CACjC,CACE,EACE,EAAE,EACF,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,MAAM,EACb,KAAK,EACL,GAAG,UAAU,EACE,EACjB,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,KAA0D,KAAI;AAC7D,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK;QAE1C,IAAI,QAAQ,KAAK,EAAE,EAAE;YACnB,QAAQ,CAAC,QAAQ,CAAC;YAClB;AACD,QAAA;QAED,IAAI,IAAI,KAAK,QAAQ,EAAE;YACrB,QAAQ,CAAC,QAAQ,CAAC;YAClB;AACD,QAAA;AAED,QAAA,MAAM,GAAG,GAAG,IAAI,MAAM,CAAC,YAAY,CAAC;AACpC,QAAA,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YACvB;AACD,QAAA;QAED,QAAQ,CAAC,QAAQ,CAAC;AACpB,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,IAAI,CAAC,CACjB;IAED,MAAM,WAAW,GAAGC,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACtE,IAAA,MAAM,eAAe,GAAGD,aAAO,CAAC,MAAK;AACnC,QAAA,IAAI,QAAQ;YAAE,OAAO,CAAA,EAAG,WAAW,CAAA,MAAA,CAAQ;AAC3C,QAAA,IAAI,QAAQ;YAAE,OAAO,CAAA,EAAG,WAAW,CAAA,SAAA,CAAW;AAC9C,QAAA,OAAO,SAAS;IAClB,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC;AAErC,IAAA,IAAI,IAAI,KAAK,MAAM,IAAI,SAAS,EAAE;QAChC,QACEE,qCAACC,eAAQ,EAAA,EACP,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,WAAW,EACf,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EAAA,kBAAA,EACJ,eAAe,EAAA,GAC7B,UAAU,EAAA,CACd;AAEL,IAAA;AAED,IAAA,QACED,sBAAA,CAAA,aAAA,CAACE,YAAK,EAAA,EACJ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,IAAI,KAAK,IAAI,EACtB,IAAI,EAAE,IAAI,EAAA,YAAA,EACE,IAAI,EAChB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EAAA,kBAAA,EACJ,eAAe,EAAA,GAC7B,UAAU,EAAA,CACd;AAEN,CAAC;;;;"}
+{"version":3,"file":"TextField.cjs","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import React, { useCallback, ChangeEvent, forwardRef, useMemo } from 'react';\nimport { TextFieldProps } from './types';\nimport { generateId } from '../../utils/generateId';\nimport { buildClassnames } from '../../utils';\n\nimport formStyles from '../../utils/forms/form.module.scss';\nimport styles from './TextField.module.scss';\n\nconst NUMBER_REGEX = /^-?[0-9]*\\.?[0-9]+$/;\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      id,\n      className,\n      disabled = false,\n      disabledMessage,\n      hasError,\n      multiline = false,\n      spellCheck = false,\n      name,\n      onChange,\n      placeholder,\n      size = 'base',\n      type = 'text',\n      value,\n      ...otherProps\n    }: TextFieldProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (!onChange) return;\n        const newValue = event.currentTarget.value;\n\n        if (newValue === '') {\n          onChange(newValue);\n          return;\n        }\n\n        if (type !== 'number') {\n          onChange(newValue);\n          return;\n        }\n\n        const reg = new RegExp(NUMBER_REGEX);\n        if (!reg.test(newValue)) {\n          return;\n        }\n\n        onChange(newValue);\n      },\n      [onChange, type],\n    );\n\n    const componentId = useMemo(() => id ?? generateId('textfield'), [id]);\n    const ariaDescribedBy = useMemo(() => {\n      if (hasError) return `${componentId}-error`;\n      if (disabledMessage) return `${componentId}-disabled`;\n      return undefined;\n    }, [hasError, disabledMessage, componentId]);\n\n    const isCompact = size === 'sm';\n\n    if (type === 'text' && multiline) {\n      return (\n        <textarea\n          className={buildClassnames([\n            formStyles.base,\n            formStyles.fullStyles,\n            styles.textarea,\n            isCompact && formStyles.compact,\n            hasError && formStyles.error,\n            className,\n          ])}\n          disabled={disabled}\n          id={componentId}\n          name={name}\n          onChange={handleChange}\n          placeholder={placeholder}\n          value={value}\n          ref={ref as React.Ref<HTMLTextAreaElement>}\n          spellCheck={spellCheck}\n          aria-describedby={ariaDescribedBy}\n          {...otherProps}\n        />\n      );\n    }\n\n    return (\n      <input\n        className={buildClassnames([\n          formStyles.base,\n          formStyles.fullStyles,\n          styles.input,\n          isCompact && formStyles.compact,\n          hasError && formStyles.error,\n          className,\n        ])}\n        disabled={disabled}\n        id={componentId}\n        name={name}\n        aria-label={name}\n        onChange={handleChange}\n        placeholder={placeholder}\n        type={type}\n        value={value}\n        ref={ref}\n        spellCheck={spellCheck}\n        aria-describedby={ariaDescribedBy}\n        {...otherProps}\n      />\n    );\n  },\n);\n"],"names":["forwardRef","useCallback","useMemo","generateId","React","buildClassnames","formStyles","styles"],"mappings":"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"}

package/dist/components/TextField/TextField.d.ts

@@ -296,6 +296,7 @@ export declare const TextField: React.ForwardRefExoticComponent<{
     type?: import("./types").TextFieldType | undefined;
     onChange?: ((value: string) => void) | undefined;
     hasError?: boolean | undefined;
+    disabledMessage?: React.ReactNode;
     size?: "base" | "sm" | undefined;
     multiline?: boolean | undefined;
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/components/TextField/TextField.js

@@ -1,9 +1,11 @@
 import React__default, { forwardRef, useCallback, useMemo } from 'react';
 import { generateId } from '../../utils/generateId.js';
-import { Textarea, Input } from './styled.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import formStyles from '../../utils/forms/form.module.scss.js';
+import styles from './TextField.module.scss.js';
 
 const NUMBER_REGEX = /^-?[0-9]*\.?[0-9]+$/;
-const TextField = forwardRef(({ id, className, disabled = false, hasError, multiline = false, spellCheck = false, name, onChange, placeholder, size = 'base', type = 'text', value, ...otherProps }, ref) => {
+const TextField = forwardRef(({ id, className, disabled = false, disabledMessage, hasError, multiline = false, spellCheck = false, name, onChange, placeholder, size = 'base', type = 'text', value, ...otherProps }, ref) => {
     const handleChange = useCallback((event) => {
         if (!onChange)
             return;
@@ -26,14 +28,29 @@ const TextField = forwardRef(({ id, className, disabled = false, hasError, multi
     const ariaDescribedBy = useMemo(() => {
         if (hasError)
             return `${componentId}-error`;
-        if (disabled)
+        if (disabledMessage)
             return `${componentId}-disabled`;
         return undefined;
-    }, [hasError, componentId, disabled]);
+    }, [hasError, disabledMessage, componentId]);
+    const isCompact = size === 'sm';
     if (type === 'text' && multiline) {
-        return (React__default.createElement(Textarea, { className: className, disabled: disabled, hasError: hasError, id: componentId, name: name, onChange: handleChange, placeholder: placeholder, value: value, ref: ref, spellCheck: spellCheck, "aria-describedby": ariaDescribedBy, ...otherProps }));
+        return (React__default.createElement("textarea", { className: buildClassnames([
+                formStyles.base,
+                formStyles.fullStyles,
+                styles.textarea,
+                isCompact && formStyles.compact,
+                hasError && formStyles.error,
+                className,
+            ]), disabled: disabled, id: componentId, name: name, onChange: handleChange, placeholder: placeholder, value: value, ref: ref, spellCheck: spellCheck, "aria-describedby": ariaDescribedBy, ...otherProps }));
     }
-    return (React__default.createElement(Input, { className: className, disabled: disabled, hasError: hasError, id: componentId, compact: size === 'sm', name: name, "aria-label": name, onChange: handleChange, placeholder: placeholder, type: type, value: value, ref: ref, spellCheck: spellCheck, "aria-describedby": ariaDescribedBy, ...otherProps }));
+    return (React__default.createElement("input", { className: buildClassnames([
+            formStyles.base,
+            formStyles.fullStyles,
+            styles.input,
+            isCompact && formStyles.compact,
+            hasError && formStyles.error,
+            className,
+        ]), disabled: disabled, id: componentId, name: name, "aria-label": name, onChange: handleChange, placeholder: placeholder, type: type, value: value, ref: ref, spellCheck: spellCheck, "aria-describedby": ariaDescribedBy, ...otherProps }));
 });
 
 export { TextField };

package/dist/components/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import React, { useCallback, ChangeEvent, forwardRef, useMemo } from 'react';\nimport { TextFieldProps } from './types';\nimport { generateId } from '../../utils/generateId';\n\nimport { Input, Textarea } from './styled';\n\nconst NUMBER_REGEX = /^-?[0-9]*\\.?[0-9]+$/;\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      id,\n      className,\n      disabled = false,\n      hasError,\n      multiline = false,\n      spellCheck = false,\n      name,\n      onChange,\n      placeholder,\n      size = 'base',\n      type = 'text',\n      value,\n      ...otherProps\n    }: TextFieldProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (!onChange) return;\n        const newValue = event.currentTarget.value;\n\n        if (newValue === '') {\n          onChange(newValue);\n          return;\n        }\n\n        if (type !== 'number') {\n          onChange(newValue);\n          return;\n        }\n\n        const reg = new RegExp(NUMBER_REGEX);\n        if (!reg.test(newValue)) {\n          return;\n        }\n\n        onChange(newValue);\n      },\n      [onChange, type],\n    );\n\n    const componentId = useMemo(() => id ?? generateId('textfield'), [id]);\n    const ariaDescribedBy = useMemo(() => {\n      if (hasError) return `${componentId}-error`;\n      if (disabled) return `${componentId}-disabled`;\n      return undefined;\n    }, [hasError, componentId, disabled]);\n\n    if (type === 'text' && multiline) {\n      return (\n        <Textarea\n          className={className}\n          disabled={disabled}\n          hasError={hasError}\n          id={componentId}\n          name={name}\n          onChange={handleChange}\n          placeholder={placeholder}\n          value={value}\n          ref={ref}\n          spellCheck={spellCheck}\n          aria-describedby={ariaDescribedBy}\n          {...otherProps}\n        />\n      );\n    }\n\n    return (\n      <Input\n        className={className}\n        disabled={disabled}\n        hasError={hasError}\n        id={componentId}\n        compact={size === 'sm'}\n        name={name}\n        aria-label={name}\n        onChange={handleChange}\n        placeholder={placeholder}\n        type={type}\n        value={value}\n        ref={ref}\n        spellCheck={spellCheck}\n        aria-describedby={ariaDescribedBy}\n        {...otherProps}\n      />\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;AAMA,MAAM,YAAY,GAAG,qBAAqB;MAE7B,SAAS,GAAG,UAAU,CACjC,CACE,EACE,EAAE,EACF,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,MAAM,EACb,KAAK,EACL,GAAG,UAAU,EACE,EACjB,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,KAA0D,KAAI;AAC7D,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK;QAE1C,IAAI,QAAQ,KAAK,EAAE,EAAE;YACnB,QAAQ,CAAC,QAAQ,CAAC;YAClB;AACD,QAAA;QAED,IAAI,IAAI,KAAK,QAAQ,EAAE;YACrB,QAAQ,CAAC,QAAQ,CAAC;YAClB;AACD,QAAA;AAED,QAAA,MAAM,GAAG,GAAG,IAAI,MAAM,CAAC,YAAY,CAAC;AACpC,QAAA,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YACvB;AACD,QAAA;QAED,QAAQ,CAAC,QAAQ,CAAC;AACpB,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,IAAI,CAAC,CACjB;IAED,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAI,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACtE,IAAA,MAAM,eAAe,GAAG,OAAO,CAAC,MAAK;AACnC,QAAA,IAAI,QAAQ;YAAE,OAAO,CAAA,EAAG,WAAW,CAAA,MAAA,CAAQ;AAC3C,QAAA,IAAI,QAAQ;YAAE,OAAO,CAAA,EAAG,WAAW,CAAA,SAAA,CAAW;AAC9C,QAAA,OAAO,SAAS;IAClB,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC;AAErC,IAAA,IAAI,IAAI,KAAK,MAAM,IAAI,SAAS,EAAE;QAChC,QACEA,6BAAC,QAAQ,EAAA,EACP,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,WAAW,EACf,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EAAA,kBAAA,EACJ,eAAe,EAAA,GAC7B,UAAU,EAAA,CACd;AAEL,IAAA;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACJ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,IAAI,KAAK,IAAI,EACtB,IAAI,EAAE,IAAI,EAAA,YAAA,EACE,IAAI,EAChB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EAAA,kBAAA,EACJ,eAAe,EAAA,GAC7B,UAAU,EAAA,CACd;AAEN,CAAC;;;;"}
+{"version":3,"file":"TextField.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import React, { useCallback, ChangeEvent, forwardRef, useMemo } from 'react';\nimport { TextFieldProps } from './types';\nimport { generateId } from '../../utils/generateId';\nimport { buildClassnames } from '../../utils';\n\nimport formStyles from '../../utils/forms/form.module.scss';\nimport styles from './TextField.module.scss';\n\nconst NUMBER_REGEX = /^-?[0-9]*\\.?[0-9]+$/;\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      id,\n      className,\n      disabled = false,\n      disabledMessage,\n      hasError,\n      multiline = false,\n      spellCheck = false,\n      name,\n      onChange,\n      placeholder,\n      size = 'base',\n      type = 'text',\n      value,\n      ...otherProps\n    }: TextFieldProps,\n    ref,\n  ) => {\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (!onChange) return;\n        const newValue = event.currentTarget.value;\n\n        if (newValue === '') {\n          onChange(newValue);\n          return;\n        }\n\n        if (type !== 'number') {\n          onChange(newValue);\n          return;\n        }\n\n        const reg = new RegExp(NUMBER_REGEX);\n        if (!reg.test(newValue)) {\n          return;\n        }\n\n        onChange(newValue);\n      },\n      [onChange, type],\n    );\n\n    const componentId = useMemo(() => id ?? generateId('textfield'), [id]);\n    const ariaDescribedBy = useMemo(() => {\n      if (hasError) return `${componentId}-error`;\n      if (disabledMessage) return `${componentId}-disabled`;\n      return undefined;\n    }, [hasError, disabledMessage, componentId]);\n\n    const isCompact = size === 'sm';\n\n    if (type === 'text' && multiline) {\n      return (\n        <textarea\n          className={buildClassnames([\n            formStyles.base,\n            formStyles.fullStyles,\n            styles.textarea,\n            isCompact && formStyles.compact,\n            hasError && formStyles.error,\n            className,\n          ])}\n          disabled={disabled}\n          id={componentId}\n          name={name}\n          onChange={handleChange}\n          placeholder={placeholder}\n          value={value}\n          ref={ref as React.Ref<HTMLTextAreaElement>}\n          spellCheck={spellCheck}\n          aria-describedby={ariaDescribedBy}\n          {...otherProps}\n        />\n      );\n    }\n\n    return (\n      <input\n        className={buildClassnames([\n          formStyles.base,\n          formStyles.fullStyles,\n          styles.input,\n          isCompact && formStyles.compact,\n          hasError && formStyles.error,\n          className,\n        ])}\n        disabled={disabled}\n        id={componentId}\n        name={name}\n        aria-label={name}\n        onChange={handleChange}\n        placeholder={placeholder}\n        type={type}\n        value={value}\n        ref={ref}\n        spellCheck={spellCheck}\n        aria-describedby={ariaDescribedBy}\n        {...otherProps}\n      />\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._input_qtip3_1 {\n  /* Overrides browser default width - note: this breaks the native [size] attribute  */\n  width: 100%;\n  /* Hide number arrows/spinners */\n}\n._input_qtip3_1::-webkit-outer-spin-button, ._input_qtip3_1::-webkit-inner-spin-button {\n  appearance: none;\n  margin: 0;\n}\n._input_qtip3_1[type=number] {\n  appearance: textfield;\n  min-width: 8ch;\n  text-align: right;\n}\n\n._textarea_qtip3_16 {\n  padding-block: var(--sizes-2);\n}");
+var styles = {"input":"_input_qtip3_1","textarea":"_textarea_qtip3_16"};
+
+module.exports = styles;
+//# sourceMappingURL=TextField.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.module.scss.cjs","sources":["../../../src/components/TextField/TextField.module.scss"],"sourcesContent":[".input {\n  /* Overrides browser default width - note: this breaks the native [size] attribute  */\n  width: 100%;\n\n  /* Hide number arrows/spinners */\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    appearance: none;\n    margin: 0;\n  }\n\n  &[type='number'] {\n    appearance: textfield;\n    min-width: 8ch;\n    text-align: right;\n  }\n}\n\n.textarea {\n  padding-block: var(--sizes-2);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,ycAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._input_qtip3_1 {\n  /* Overrides browser default width - note: this breaks the native [size] attribute  */\n  width: 100%;\n  /* Hide number arrows/spinners */\n}\n._input_qtip3_1::-webkit-outer-spin-button, ._input_qtip3_1::-webkit-inner-spin-button {\n  appearance: none;\n  margin: 0;\n}\n._input_qtip3_1[type=number] {\n  appearance: textfield;\n  min-width: 8ch;\n  text-align: right;\n}\n\n._textarea_qtip3_16 {\n  padding-block: var(--sizes-2);\n}");
+var styles = {"input":"_input_qtip3_1","textarea":"_textarea_qtip3_16"};
+
+export { styles as default };
+//# sourceMappingURL=TextField.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.module.scss.js","sources":["../../../src/components/TextField/TextField.module.scss"],"sourcesContent":[".input {\n  /* Overrides browser default width - note: this breaks the native [size] attribute  */\n  width: 100%;\n\n  /* Hide number arrows/spinners */\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    appearance: none;\n    margin: 0;\n  }\n\n  &[type='number'] {\n    appearance: textfield;\n    min-width: 8ch;\n    text-align: right;\n  }\n}\n\n.textarea {\n  padding-block: var(--sizes-2);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,ycAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

package/dist/components/TextField/index.d.ts

@@ -297,6 +297,7 @@ export declare const TextField: import("react").ForwardRefExoticComponent<Omit<{
     type?: import("./types").TextFieldType | undefined;
     onChange?: ((value: string) => void) | undefined;
     hasError?: boolean | undefined;
+    disabledMessage?: import("react").ReactNode;
     size?: "base" | "sm" | undefined;
     multiline?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps, "ref"> & import("react").RefAttributes<unknown>>;

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

@@ -1,14 +1,25 @@
-/// <reference types="react" />
+import React from 'react';
 import { ComponentSizeType } from '../types';
 export type TextFieldType = 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' | 'currency';
 export declare const textFieldTypes: readonly ["text", "email", "number", "password", "search", "tel", "url", "date", "datetime-local", "month", "time", "week", "currency"];
 type CommonAttributes = Omit<React.InputHTMLAttributes<HTMLInputElement> & React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'size' | 'type' | 'value'>;
 export type TextFieldProps = CommonAttributes & {
+    /** Current input value. */
     value?: string;
+    /** HTML input type. Defaults to `'text'`. */
     type?: TextFieldType;
+    /** Callback fired with the new value on change. */
     onChange?: (value: string) => void;
+    /** When true, applies error styling. Used with `withLabels` to display an error message. */
     hasError?: boolean;
+    /**
+     * When provided, links the input to the disabled message element via `aria-describedby`.
+     * Passed through from `withLabels` — the HOC renders the visible message and sets `disabled`.
+     */
+    disabledMessage?: React.ReactNode;
+    /** Component size variant. Defaults to `'base'`. */
     size?: ComponentSizeType;
+    /** Renders a `<textarea>` instead of `<input>` when `type` is `'text'`. */
     multiline?: boolean;
 };
 export {};

package/dist/components/Tooltip/Tooltip.cjs

@@ -2,9 +2,11 @@
 
 var React = require('react');
 var framerMotion = require('framer-motion');
-var styled = require('./components/styled.cjs');
 var TooltipPopover = require('./components/TooltipPopover.cjs');
 var Portal = require('../Portal/Portal.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var Tooltip_module = require('./Tooltip.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -13,26 +15,28 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 const WithOptionalPortal = ({ usePortal = false, children,
 // eslint-disable-next-line react/jsx-no-useless-fragment
  }) => (usePortal ? React__default.default.createElement(Portal.Portal, null, children) : React__default.default.createElement(React__default.default.Fragment, null, children));
-const Tooltip = ({ children, text, content, config, reversed = false, className, withTriangle, initialShouldShow = false, useReactPortal = true, }) => {
+const Tooltip = ({ children, text, content, config, reversed = false, className, hoverableClassName, withTriangle, initialShouldShow = false, useReactPortal = true, }) => {
     const [shouldShow, setShouldShow] = React.useState(initialShouldShow);
     const [hoverableElement, setHoverableElement] = React.useState(null);
-    const classNames = {
-        container: className && `${className} ${className}-container`,
-        tip: className && `${className}-tip`,
-        wrap: className && `${className}-wrap`,
-        triangle: className && `${className}-triangle`,
-        hoverable: className && `${className}-hoverable`,
-    };
     const hasText = text ? text.trim().length > 0 : false;
     const hasContent = !!(content || hasText);
+    // Backward-compatible suffix classes for monolith consumers that
+    // target sub-elements via the className prefix convention.
+    const legacyClassNames = className
+        ? {
+            tip: `${className}-tip`,
+            wrap: `${className}-wrap`,
+            triangle: `${className}-triangle`,
+        }
+        : undefined;
     if (!hasContent)
         return children;
     const show = () => setShouldShow(true);
     const hide = () => setShouldShow(false);
-    return (React__default.default.createElement(styled.Container, { className: classNames.container },
+    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([Tooltip_module.container, className, className && `${className}-container`]) },
         React__default.default.createElement(framerMotion.AnimatePresence, null, shouldShow && (React__default.default.createElement(WithOptionalPortal, { usePortal: useReactPortal },
-            React__default.default.createElement(TooltipPopover.TooltipPopover, { key: "tooltip-popover", classNames: classNames, hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content })))),
-        React__default.default.createElement(styled.Container, { ref: setHoverableElement, className: classNames.hoverable, onMouseEnter: show, onMouseLeave: hide }, children)));
+            React__default.default.createElement(TooltipPopover.TooltipPopover, { key: "tooltip-popover", hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content, legacyClassNames: legacyClassNames })))),
+        React__default.default.createElement("div", { ref: setHoverableElement, className: buildClassnames.buildClassnames([Tooltip_module.hoverable, hoverableClassName, className && `${className}-hoverable`]), onMouseEnter: show, onMouseLeave: hide }, children)));
 };
 
 exports.Tooltip = Tooltip;

package/dist/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\nimport { TooltipProps } from './types';\nimport { Container } from './components/styled';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { Portal } from '../Portal';\n\nconst WithOptionalPortal: React.FC<{ usePortal: boolean; children: ReactNode }> = ({\n  usePortal = false,\n  children,\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n}) => (usePortal ? <Portal>{children}</Portal> : <>{children}</>);\n\nexport const Tooltip = ({\n  children,\n  text,\n  content,\n  config,\n  reversed = false,\n  className,\n  withTriangle,\n  initialShouldShow = false,\n  useReactPortal = true,\n}: TooltipProps): JSX.Element | null => {\n  const [shouldShow, setShouldShow] = useState(initialShouldShow);\n  const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n  const classNames = {\n    container: className && `${className} ${className}-container`,\n    tip: className && `${className}-tip`,\n    wrap: className && `${className}-wrap`,\n    triangle: className && `${className}-triangle`,\n    hoverable: className && `${className}-hoverable`,\n  };\n\n  const hasText = text ? text.trim().length > 0 : false;\n  const hasContent = !!(content || hasText);\n\n  if (!hasContent) return children;\n\n  const show = () => setShouldShow(true);\n  const hide = () => setShouldShow(false);\n\n  return (\n    <Container className={classNames.container}>\n      <AnimatePresence>\n        {shouldShow && (\n          <WithOptionalPortal usePortal={useReactPortal}>\n            <TooltipPopover\n              key=\"tooltip-popover\"\n              classNames={classNames}\n              hoverableElement={hoverableElement}\n              config={config}\n              reversed={reversed}\n              withTriangle={withTriangle}\n              text={text}\n              content={content}\n            />\n          </WithOptionalPortal>\n        )}\n      </AnimatePresence>\n\n      <Container\n        ref={setHoverableElement}\n        className={classNames.hoverable}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n      >\n        {children}\n      </Container>\n    </Container>\n  );\n};\n"],"names":["React","Portal","useState","Container","AnimatePresence","TooltipPopover"],"mappings":";;;;;;;;;;;;AAOA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,sBAAA,CAAA,aAAA,CAACC,aAAM,QAAE,QAAQ,CAAU,GAAGD,4EAAG,QAAQ,CAAI,CAAC;AAE1D,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAwB;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGE,cAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,CAAA,EAAI,SAAS,CAAA,UAAA,CAAY;AAC7D,QAAA,GAAG,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM;AACpC,QAAA,IAAI,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;AACtC,QAAA,QAAQ,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW;AAC9C,QAAA,SAAS,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;KACjD;AAED,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;IACrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;AAEzC,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;IAEvC,QACEF,qCAACG,gBAAS,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;QACxCH,sBAAA,CAAA,aAAA,CAACI,4BAAe,EAAA,IAAA,EACb,UAAU,KACTJ,qCAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,YAAAA,sBAAA,CAAA,aAAA,CAACK,6BAAc,EAAA,EACb,GAAG,EAAC,iBAAiB,EACrB,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAAA,CAChB,CACiB,CACtB,CACe;QAElBL,sBAAA,CAAA,aAAA,CAACG,gBAAS,EAAA,EACR,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,UAAU,CAAC,SAAS,EAC/B,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,IAEjB,QAAQ,CACC,CACF;AAEhB;;;;"}
+{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\nimport { TooltipProps } from './types';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { LegacyClassNames } from './components/types';\nimport { Portal } from '../Portal';\nimport { buildClassnames } from '../../utils';\nimport tooltipStyles from './Tooltip.module.scss';\n\nconst WithOptionalPortal: React.FC<{ usePortal: boolean; children: ReactNode }> = ({\n  usePortal = false,\n  children,\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n}) => (usePortal ? <Portal>{children}</Portal> : <>{children}</>);\n\nexport const Tooltip = ({\n  children,\n  text,\n  content,\n  config,\n  reversed = false,\n  className,\n  hoverableClassName,\n  withTriangle,\n  initialShouldShow = false,\n  useReactPortal = true,\n}: TooltipProps): JSX.Element | null => {\n  const [shouldShow, setShouldShow] = useState(initialShouldShow);\n  const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n  const hasText = text ? text.trim().length > 0 : false;\n  const hasContent = !!(content || hasText);\n\n  // Backward-compatible suffix classes for monolith consumers that\n  // target sub-elements via the className prefix convention.\n  const legacyClassNames: LegacyClassNames | undefined = className\n    ? {\n        tip: `${className}-tip`,\n        wrap: `${className}-wrap`,\n        triangle: `${className}-triangle`,\n      }\n    : undefined;\n\n  if (!hasContent) return children;\n\n  const show = () => setShouldShow(true);\n  const hide = () => setShouldShow(false);\n\n  return (\n    <div className={buildClassnames([tooltipStyles.container, className, className && `${className}-container`])}>\n      <AnimatePresence>\n        {shouldShow && (\n          <WithOptionalPortal usePortal={useReactPortal}>\n            <TooltipPopover\n              key=\"tooltip-popover\"\n              hoverableElement={hoverableElement}\n              config={config}\n              reversed={reversed}\n              withTriangle={withTriangle}\n              text={text}\n              content={content}\n              legacyClassNames={legacyClassNames}\n            />\n          </WithOptionalPortal>\n        )}\n      </AnimatePresence>\n\n      <div\n        ref={setHoverableElement}\n        className={buildClassnames([tooltipStyles.hoverable, hoverableClassName, className && `${className}-hoverable`])}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","Portal","useState","buildClassnames","tooltipStyles","AnimatePresence","TooltipPopover"],"mappings":";;;;;;;;;;;;;;AASA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,sBAAA,CAAA,aAAA,CAACC,aAAM,QAAE,QAAQ,CAAU,GAAGD,4EAAG,QAAQ,CAAI,CAAC;AAE1D,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAwB;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGE,cAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;IACrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;;;IAIzC,MAAM,gBAAgB,GAAiC;AACrD,UAAE;YACE,GAAG,EAAE,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM;YACvB,IAAI,EAAE,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;YACzB,QAAQ,EAAE,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW;AAClC;UACD,SAAS;AAEb,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;AAEvC,IAAA,QACEF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEG,+BAAe,CAAC,CAACC,cAAa,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,UAAA,CAAY,CAAC,CAAC,EAAA;QAC1GJ,sBAAA,CAAA,aAAA,CAACK,4BAAe,EAAA,IAAA,EACb,UAAU,KACTL,qCAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,YAAAA,sBAAA,CAAA,aAAA,CAACM,6BAAc,EAAA,EACb,GAAG,EAAC,iBAAiB,EACrB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAAA,CAClC,CACiB,CACtB,CACe;AAElB,QAAAN,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAEG,+BAAe,CAAC,CAACC,cAAa,CAAC,SAAS,EAAE,kBAAkB,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,YAAY,CAAC,CAAC,EAChH,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,EAAA,EAEjB,QAAQ,CACL,CACF;AAEV;;;;"}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,2 +1,2 @@
 import { TooltipProps } from './types';
-export declare const Tooltip: ({ children, text, content, config, reversed, className, withTriangle, initialShouldShow, useReactPortal, }: TooltipProps) => JSX.Element | null;
+export declare const Tooltip: ({ children, text, content, config, reversed, className, hoverableClassName, withTriangle, initialShouldShow, useReactPortal, }: TooltipProps) => JSX.Element | null;

package/dist/components/Tooltip/Tooltip.js

@@ -1,32 +1,36 @@
 import React__default, { useState } from 'react';
 import { AnimatePresence } from 'framer-motion';
-import { Container } from './components/styled.js';
 import { TooltipPopover } from './components/TooltipPopover.js';
 import { Portal } from '../Portal/Portal.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import tooltipStyles from './Tooltip.module.scss.js';
 
 const WithOptionalPortal = ({ usePortal = false, children,
 // eslint-disable-next-line react/jsx-no-useless-fragment
  }) => (usePortal ? React__default.createElement(Portal, null, children) : React__default.createElement(React__default.Fragment, null, children));
-const Tooltip = ({ children, text, content, config, reversed = false, className, withTriangle, initialShouldShow = false, useReactPortal = true, }) => {
+const Tooltip = ({ children, text, content, config, reversed = false, className, hoverableClassName, withTriangle, initialShouldShow = false, useReactPortal = true, }) => {
     const [shouldShow, setShouldShow] = useState(initialShouldShow);
     const [hoverableElement, setHoverableElement] = useState(null);
-    const classNames = {
-        container: className && `${className} ${className}-container`,
-        tip: className && `${className}-tip`,
-        wrap: className && `${className}-wrap`,
-        triangle: className && `${className}-triangle`,
-        hoverable: className && `${className}-hoverable`,
-    };
     const hasText = text ? text.trim().length > 0 : false;
     const hasContent = !!(content || hasText);
+    // Backward-compatible suffix classes for monolith consumers that
+    // target sub-elements via the className prefix convention.
+    const legacyClassNames = className
+        ? {
+            tip: `${className}-tip`,
+            wrap: `${className}-wrap`,
+            triangle: `${className}-triangle`,
+        }
+        : undefined;
     if (!hasContent)
         return children;
     const show = () => setShouldShow(true);
     const hide = () => setShouldShow(false);
-    return (React__default.createElement(Container, { className: classNames.container },
+    return (React__default.createElement("div", { className: buildClassnames([tooltipStyles.container, className, className && `${className}-container`]) },
         React__default.createElement(AnimatePresence, null, shouldShow && (React__default.createElement(WithOptionalPortal, { usePortal: useReactPortal },
-            React__default.createElement(TooltipPopover, { key: "tooltip-popover", classNames: classNames, hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content })))),
-        React__default.createElement(Container, { ref: setHoverableElement, className: classNames.hoverable, onMouseEnter: show, onMouseLeave: hide }, children)));
+            React__default.createElement(TooltipPopover, { key: "tooltip-popover", hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content, legacyClassNames: legacyClassNames })))),
+        React__default.createElement("div", { ref: setHoverableElement, className: buildClassnames([tooltipStyles.hoverable, hoverableClassName, className && `${className}-hoverable`]), onMouseEnter: show, onMouseLeave: hide }, children)));
 };
 
 export { Tooltip };

package/dist/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\nimport { TooltipProps } from './types';\nimport { Container } from './components/styled';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { Portal } from '../Portal';\n\nconst WithOptionalPortal: React.FC<{ usePortal: boolean; children: ReactNode }> = ({\n  usePortal = false,\n  children,\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n}) => (usePortal ? <Portal>{children}</Portal> : <>{children}</>);\n\nexport const Tooltip = ({\n  children,\n  text,\n  content,\n  config,\n  reversed = false,\n  className,\n  withTriangle,\n  initialShouldShow = false,\n  useReactPortal = true,\n}: TooltipProps): JSX.Element | null => {\n  const [shouldShow, setShouldShow] = useState(initialShouldShow);\n  const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n  const classNames = {\n    container: className && `${className} ${className}-container`,\n    tip: className && `${className}-tip`,\n    wrap: className && `${className}-wrap`,\n    triangle: className && `${className}-triangle`,\n    hoverable: className && `${className}-hoverable`,\n  };\n\n  const hasText = text ? text.trim().length > 0 : false;\n  const hasContent = !!(content || hasText);\n\n  if (!hasContent) return children;\n\n  const show = () => setShouldShow(true);\n  const hide = () => setShouldShow(false);\n\n  return (\n    <Container className={classNames.container}>\n      <AnimatePresence>\n        {shouldShow && (\n          <WithOptionalPortal usePortal={useReactPortal}>\n            <TooltipPopover\n              key=\"tooltip-popover\"\n              classNames={classNames}\n              hoverableElement={hoverableElement}\n              config={config}\n              reversed={reversed}\n              withTriangle={withTriangle}\n              text={text}\n              content={content}\n            />\n          </WithOptionalPortal>\n        )}\n      </AnimatePresence>\n\n      <Container\n        ref={setHoverableElement}\n        className={classNames.hoverable}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n      >\n        {children}\n      </Container>\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AAOA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,cAAA,CAAA,aAAA,CAAC,MAAM,QAAE,QAAQ,CAAU,GAAGA,4DAAG,QAAQ,CAAI,CAAC;AAE1D,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAwB;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,CAAA,EAAI,SAAS,CAAA,UAAA,CAAY;AAC7D,QAAA,GAAG,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM;AACpC,QAAA,IAAI,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;AACtC,QAAA,QAAQ,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW;AAC9C,QAAA,SAAS,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;KACjD;AAED,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;IACrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;AAEzC,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;IAEvC,QACEA,6BAAC,SAAS,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;QACxCA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA,EACb,UAAU,KACTA,6BAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,YAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,GAAG,EAAC,iBAAiB,EACrB,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAAA,CAChB,CACiB,CACtB,CACe;QAElBA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,UAAU,CAAC,SAAS,EAC/B,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,IAEjB,QAAQ,CACC,CACF;AAEhB;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\nimport { TooltipProps } from './types';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { LegacyClassNames } from './components/types';\nimport { Portal } from '../Portal';\nimport { buildClassnames } from '../../utils';\nimport tooltipStyles from './Tooltip.module.scss';\n\nconst WithOptionalPortal: React.FC<{ usePortal: boolean; children: ReactNode }> = ({\n  usePortal = false,\n  children,\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n}) => (usePortal ? <Portal>{children}</Portal> : <>{children}</>);\n\nexport const Tooltip = ({\n  children,\n  text,\n  content,\n  config,\n  reversed = false,\n  className,\n  hoverableClassName,\n  withTriangle,\n  initialShouldShow = false,\n  useReactPortal = true,\n}: TooltipProps): JSX.Element | null => {\n  const [shouldShow, setShouldShow] = useState(initialShouldShow);\n  const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n  const hasText = text ? text.trim().length > 0 : false;\n  const hasContent = !!(content || hasText);\n\n  // Backward-compatible suffix classes for monolith consumers that\n  // target sub-elements via the className prefix convention.\n  const legacyClassNames: LegacyClassNames | undefined = className\n    ? {\n        tip: `${className}-tip`,\n        wrap: `${className}-wrap`,\n        triangle: `${className}-triangle`,\n      }\n    : undefined;\n\n  if (!hasContent) return children;\n\n  const show = () => setShouldShow(true);\n  const hide = () => setShouldShow(false);\n\n  return (\n    <div className={buildClassnames([tooltipStyles.container, className, className && `${className}-container`])}>\n      <AnimatePresence>\n        {shouldShow && (\n          <WithOptionalPortal usePortal={useReactPortal}>\n            <TooltipPopover\n              key=\"tooltip-popover\"\n              hoverableElement={hoverableElement}\n              config={config}\n              reversed={reversed}\n              withTriangle={withTriangle}\n              text={text}\n              content={content}\n              legacyClassNames={legacyClassNames}\n            />\n          </WithOptionalPortal>\n        )}\n      </AnimatePresence>\n\n      <div\n        ref={setHoverableElement}\n        className={buildClassnames([tooltipStyles.hoverable, hoverableClassName, className && `${className}-hoverable`])}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AASA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,cAAA,CAAA,aAAA,CAAC,MAAM,QAAE,QAAQ,CAAU,GAAGA,4DAAG,QAAQ,CAAI,CAAC;AAE1D,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAwB;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;IACrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;;;IAIzC,MAAM,gBAAgB,GAAiC;AACrD,UAAE;YACE,GAAG,EAAE,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM;YACvB,IAAI,EAAE,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;YACzB,QAAQ,EAAE,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW;AAClC;UACD,SAAS;AAEb,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;AAEvC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,UAAA,CAAY,CAAC,CAAC,EAAA;QAC1GA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA,EACb,UAAU,KACTA,6BAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,YAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,GAAG,EAAC,iBAAiB,EACrB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAAA,CAClC,CACiB,CACtB,CACe;AAElB,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC,SAAS,EAAE,kBAAkB,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,YAAY,CAAC,CAAC,EAChH,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,EAAA,EAEjB,QAAQ,CACL,CACF;AAEV;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._container_soh5t_1 {\n  display: inline-block;\n}\n\n._hoverable_soh5t_5 {\n  display: inline-block;\n}\n\n._tip_soh5t_9 {\n  width: max-content;\n  pointer-events: none;\n  will-change: opacity, transform;\n}\n._tip_soh5t_9[data-popper-placement^=top-start] > ._triangle_soh5t_14 {\n  left: 8px;\n  bottom: 0;\n}\n._tip_soh5t_9[data-popper-placement^=top-end] > ._triangle_soh5t_14 {\n  right: 8px;\n  bottom: 0;\n}\n._tip_soh5t_9[data-popper-placement^=bottom-start] > ._triangle_soh5t_14 {\n  left: 8px;\n  top: -4px;\n}\n._tip_soh5t_9[data-popper-placement^=bottom-end] > ._triangle_soh5t_14 {\n  right: 8px;\n  top: -4px;\n}\n\n._wrap_soh5t_31 {\n  display: inline-block;\n  padding: var(--sizes-base) var(--sizes-5);\n  overflow: hidden;\n  z-index: 10;\n  min-width: var(--tip-min-width);\n  max-width: var(--tip-max-width);\n  color: #fff;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-base);\n  background: var(--colors-neutral-ink-dark);\n}\n\n._triangle_soh5t_14 {\n  background-color: var(--colors-neutral-ink-dark);\n  height: 16px;\n  width: 16px;\n  position: absolute;\n  transform: rotate(45deg);\n  z-index: var(--layers-tooltip);\n}");
+var tooltipStyles = {"container":"_container_soh5t_1","hoverable":"_hoverable_soh5t_5","tip":"_tip_soh5t_9","triangle":"_triangle_soh5t_14","wrap":"_wrap_soh5t_31"};
+
+module.exports = tooltipStyles;
+//# sourceMappingURL=Tooltip.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.module.scss.cjs","sources":["../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".container {\n  display: inline-block;\n}\n\n.hoverable {\n  display: inline-block;\n}\n\n.tip {\n  width: max-content;\n  pointer-events: none;\n  will-change: opacity, transform;\n\n  &[data-popper-placement^='top-start'] > .triangle {\n    left: 8px;\n    bottom: 0;\n  }\n\n  &[data-popper-placement^='top-end'] > .triangle {\n    right: 8px;\n    bottom: 0;\n  }\n\n  &[data-popper-placement^='bottom-start'] > .triangle {\n    left: 8px;\n    top: -4px;\n  }\n\n  &[data-popper-placement^='bottom-end'] > .triangle {\n    right: 8px;\n    top: -4px;\n  }\n}\n\n.wrap {\n  display: inline-block;\n  padding: var(--sizes-base) var(--sizes-5);\n  overflow: hidden;\n  z-index: 10;\n  min-width: var(--tip-min-width);\n  max-width: var(--tip-max-width);\n  color: #fff;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-base);\n  background: var(--colors-neutral-ink-dark);\n}\n\n.triangle {\n  background-color: var(--colors-neutral-ink-dark);\n  height: 16px;\n  width: 16px;\n  position: absolute;\n  transform: rotate(45deg);\n  z-index: var(--layers-tooltip);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,opCAAA;;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._container_soh5t_1 {\n  display: inline-block;\n}\n\n._hoverable_soh5t_5 {\n  display: inline-block;\n}\n\n._tip_soh5t_9 {\n  width: max-content;\n  pointer-events: none;\n  will-change: opacity, transform;\n}\n._tip_soh5t_9[data-popper-placement^=top-start] > ._triangle_soh5t_14 {\n  left: 8px;\n  bottom: 0;\n}\n._tip_soh5t_9[data-popper-placement^=top-end] > ._triangle_soh5t_14 {\n  right: 8px;\n  bottom: 0;\n}\n._tip_soh5t_9[data-popper-placement^=bottom-start] > ._triangle_soh5t_14 {\n  left: 8px;\n  top: -4px;\n}\n._tip_soh5t_9[data-popper-placement^=bottom-end] > ._triangle_soh5t_14 {\n  right: 8px;\n  top: -4px;\n}\n\n._wrap_soh5t_31 {\n  display: inline-block;\n  padding: var(--sizes-base) var(--sizes-5);\n  overflow: hidden;\n  z-index: 10;\n  min-width: var(--tip-min-width);\n  max-width: var(--tip-max-width);\n  color: #fff;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-base);\n  background: var(--colors-neutral-ink-dark);\n}\n\n._triangle_soh5t_14 {\n  background-color: var(--colors-neutral-ink-dark);\n  height: 16px;\n  width: 16px;\n  position: absolute;\n  transform: rotate(45deg);\n  z-index: var(--layers-tooltip);\n}");
+var tooltipStyles = {"container":"_container_soh5t_1","hoverable":"_hoverable_soh5t_5","tip":"_tip_soh5t_9","triangle":"_triangle_soh5t_14","wrap":"_wrap_soh5t_31"};
+
+export { tooltipStyles as default };
+//# sourceMappingURL=Tooltip.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.module.scss.js","sources":["../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".container {\n  display: inline-block;\n}\n\n.hoverable {\n  display: inline-block;\n}\n\n.tip {\n  width: max-content;\n  pointer-events: none;\n  will-change: opacity, transform;\n\n  &[data-popper-placement^='top-start'] > .triangle {\n    left: 8px;\n    bottom: 0;\n  }\n\n  &[data-popper-placement^='top-end'] > .triangle {\n    right: 8px;\n    bottom: 0;\n  }\n\n  &[data-popper-placement^='bottom-start'] > .triangle {\n    left: 8px;\n    top: -4px;\n  }\n\n  &[data-popper-placement^='bottom-end'] > .triangle {\n    right: 8px;\n    top: -4px;\n  }\n}\n\n.wrap {\n  display: inline-block;\n  padding: var(--sizes-base) var(--sizes-5);\n  overflow: hidden;\n  z-index: 10;\n  min-width: var(--tip-min-width);\n  max-width: var(--tip-max-width);\n  color: #fff;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-base);\n  background: var(--colors-neutral-ink-dark);\n}\n\n.triangle {\n  background-color: var(--colors-neutral-ink-dark);\n  height: 16px;\n  width: 16px;\n  position: absolute;\n  transform: rotate(45deg);\n  z-index: var(--layers-tooltip);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,opCAAA;;;;;"}