@doist/reactist 25.2.0 → 26.1.0

package/es/select-field/select-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-field.js","sources":["../../src/select-field/select-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\ninterface SelectFieldProps extends FieldComponentProps<HTMLSelectElement>, BaseFieldVariantProps {}\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    data-testid=\"select-wrapper\"\n                    className={[\n                        styles.selectWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                >\n                    <select {...props} {...extraProps} ref={ref}>\n                        {children}\n                    </select>\n                    <SelectChevron aria-hidden />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction SelectChevron(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { SelectField }\nexport type { SelectFieldProps }\n"],"names":["SelectField","React","forwardRef","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","ariaDescribedBy","props","createElement","BaseField","extraProps","Box","className","styles","selectWrapper","error","bordered","_objectSpread","SelectChevron","width","height","fill","xmlns","d"],"mappings":";;;;;;;AAOMA,MAAAA,WAAW,gBAAGC,KAAK,CAACC,UAAN,CAAsD,SAASF,WAAT,CAgBtEG,IAAAA,EAAAA,GAhBsE,EAgBnE;EAAA,IAfH;AACIC,IAAAA,OAAO,GAAG,SADd;IAEIC,EAFJ;IAGIC,KAHJ;IAIIC,cAJJ;IAKIC,cALJ;IAMIC,IANJ;IAOIC,OAPJ;IAQIC,IARJ;IASIC,QATJ;IAUIC,QAVJ;IAWIC,MAXJ;IAYI,kBAAoBC,EAAAA,eAAAA;GAGrB,GAAA,IAAA;AAAA,MAFIC,KAEJ,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;AAEH,EAAA,oBACIf,KAAC,CAAAgB,aAAD,CAACC,SAAD,EACI;AAAAd,IAAAA,OAAO,EAAEA,OAAT;AACAC,IAAAA,EAAE,EAAEA,EADJ;AAEAC,IAAAA,KAAK,EAAEA,KAFP;AAGAC,IAAAA,cAAc,EAAEA,cAHhB;AAIAC,IAAAA,cAAc,EAAEA,cAJhB;AAKAC,IAAAA,IAAI,EAAEA,IALN;AAMAC,IAAAA,OAAO,EAAEA,OANT;AAOAC,IAAAA,IAAI,EAAEA,IAPN;AAQAC,IAAAA,QAAQ,EAAEA,QARV;AASAE,IAAAA,MAAM,EAAEA,MATR;IASc,kBACIC,EAAAA,eAAAA;GAXtB,EAaMI,UAAD,iBACGlB,KAAC,CAAAgB,aAAD,CAACG,GAAD,EACgB;AAAA,IAAA,aAAA,EAAA,gBAAA;IACZC,SAAS,EAAE,CACPC,gBAAM,CAACC,aADA,EAEPZ,IAAI,KAAK,OAAT,GAAmBW,gBAAM,CAACE,KAA1B,GAAkC,IAF3B,EAGPpB,OAAO,KAAK,UAAZ,GAAyBkB,gBAAM,CAACG,QAAhC,GAA2C,IAHpC,CAAA;GAFf,eAQIxB,KAAY,CAAAgB,aAAZ,CAAY,QAAZ,EAAAS,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAA,EAAA,EAAYV,KAAZ,CAAA,EAAuBG,UAAvB,CAAA,EAAA,EAAA,EAAA;AAAmChB,IAAAA,GAAG,EAAEA,GAAAA;GACnCU,CAAAA,EAAAA,QADL,CARJ,eAWIZ,KAAA,CAAAgB,aAAA,CAACU,aAAD,EAA6B;IAAA,aAAA,EAAA,IAAA;GAA7B,CAXJ,CAdR,CADJ,CAAA;AA+BH,CAjDmB,EAApB;;AAmDA,SAASA,aAAT,CAAuBX,KAAvB,EAA0D;AACtD,EAAA,oBACIf,KAAK,CAAAgB,aAAL,CAAK,KAAL,EAAAS,cAAA,CAAA;AAAKE,IAAAA,KAAK,EAAC,IAAX;AAAgBC,IAAAA,MAAM,EAAC,IAAvB;AAA4BC,IAAAA,IAAI,EAAC,MAAjC;AAAwCC,IAAAA,KAAK,EAAC,4BAAA;AAA9C,GAAA,EAA+Ef,KAA/E,CACIf,eAAAA,KACI,CAAAgB,aADJ,CACI,MADJ,EACI;AAAAe,IAAAA,CAAC,EAAC,yGAAF;AACAF,IAAAA,IAAI,EAAC,cAAA;AADL,GADJ,CADJ,CADJ,CAAA;AAQH;;;;"}
+{"version":3,"file":"select-field.js","sources":["../../src/select-field/select-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\ninterface SelectFieldProps extends FieldComponentProps<HTMLSelectElement>, BaseFieldVariantProps {}\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    data-testid=\"select-wrapper\"\n                    className={[\n                        styles.selectWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                >\n                    <select\n                        {...props}\n                        {...extraProps}\n                        ref={ref}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                        }}\n                    >\n                        {children}\n                    </select>\n                    <SelectChevron aria-hidden />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction SelectChevron(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { SelectField }\nexport type { SelectFieldProps }\n"],"names":["SelectField","React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","children","hidden","ariaDescribedBy","onChange","originalOnChange","props","createElement","BaseField","extraProps","Box","className","styles","selectWrapper","error","bordered","_objectSpread","event","SelectChevron","width","height","fill","xmlns","d"],"mappings":";;;;;;;AAOMA,MAAAA,WAAW,gBAAGC,KAAK,CAACC,UAAN,CAAsD,SAASF,WAAT,CAgBtEG,IAAAA,EAAAA,GAhBsE,EAgBnE;EAAA,IAfH;AACIC,IAAAA,OAAO,GAAG,SADd;IAEIC,EAFJ;IAGIC,KAHJ;IAIIC,KAJJ;IAKIC,cALJ;IAMIC,OANJ;IAOIC,IAPJ;IAQIC,QARJ;IASIC,QATJ;IAUIC,MAVJ;AAWI,IAAA,kBAAA,EAAoBC,eAXxB;AAYIC,IAAAA,QAAQ,EAAEC,gBAAAA;GAGX,GAAA,IAAA;AAAA,MAFIC,KAEJ,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;AAEH,EAAA,oBACIhB,KAAC,CAAAiB,aAAD,CAACC,SAAD,EACI;AAAAf,IAAAA,OAAO,EAAEA,OAAT;AACAC,IAAAA,EAAE,EAAEA,EADJ;AAEAC,IAAAA,KAAK,EAAEA,KAFP;AAGAC,IAAAA,KAAK,EAAEA,KAHP;AAIAC,IAAAA,cAAc,EAAEA,cAJhB;AAKAC,IAAAA,OAAO,EAAEA,OALT;AAMAC,IAAAA,IAAI,EAAEA,IANN;AAOAC,IAAAA,QAAQ,EAAEA,QAPV;AAQAE,IAAAA,MAAM,EAAEA,MARR;IASkB,kBAAAC,EAAAA,eAAAA;GAVtB,EAYMM,UAAD,iBACGnB,KAAC,CAAAiB,aAAD,CAACG,GAAD,EACgB;AAAA,IAAA,aAAA,EAAA,gBAAA;IACZC,SAAS,EAAE,CACPC,gBAAM,CAACC,aADA,EAEPd,IAAI,KAAK,OAAT,GAAmBa,gBAAM,CAACE,KAA1B,GAAkC,IAF3B,EAGPrB,OAAO,KAAK,UAAZ,GAAyBmB,gBAAM,CAACG,QAAhC,GAA2C,IAHpC,CAAA;GAFf,eAQIzB,KAAA,CAAAiB,aAAA,CAAA,QAAA,EAAAS,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAA,EAAA,EACQV,KADR,CAAA,EAEQG,UAFR,CAAA,EAAA,EAAA,EAAA;AAGIjB,IAAAA,GAAG,EAAEA,GAHT;IAIIY,QAAQ,EAAGa,KAAD,IAAU;AAChBZ,MAAAA,gBAAgB,IAAhB,IAAA,GAAA,KAAA,CAAA,GAAAA,gBAAgB,CAAGY,KAAH,CAAhB,CAAA;AACH,KAAA;GAEAhB,CAAAA,EAAAA,QARL,CARJ,eAkBIX,KAAA,CAAAiB,aAAA,CAACW,aAAD,EAA6B;IAAA,aAAA,EAAA,IAAA;GAA7B,CAlBJ,CAbR,CADJ,CAAA;AAqCH,CAvDmB,EAApB;;AAyDA,SAASA,aAAT,CAAuBZ,KAAvB,EAA0D;AACtD,EAAA,oBACIhB,KAAK,CAAAiB,aAAL,CAAK,KAAL,EAAAS,cAAA,CAAA;AAAKG,IAAAA,KAAK,EAAC,IAAX;AAAgBC,IAAAA,MAAM,EAAC,IAAvB;AAA4BC,IAAAA,IAAI,EAAC,MAAjC;AAAwCC,IAAAA,KAAK,EAAC,4BAAA;AAA9C,GAAA,EAA+EhB,KAA/E,CACIhB,eAAAA,KACI,CAAAiB,aADJ,CACI,MADJ,EACI;AAAAgB,IAAAA,CAAC,EAAC,yGAAF;AACAF,IAAAA,IAAI,EAAC,cAAA;AADL,GADJ,CADJ,CADJ,CAAA;AAQH;;;;"}

package/es/switch-field/switch-field.js

@@ -4,17 +4,18 @@ import { Box } from '../box/box.js';
 import { Stack } from '../stack/stack.js';
 import { Text } from '../text/text.js';
 import { HiddenVisually } from '../hidden-visually/hidden-visually.js';
-import { FieldHint } from '../base-field/base-field.js';
+import { FieldMessage } from '../base-field/base-field.js';
 import { useId } from '../utils/common-helpers.js';
 import modules_8e05f7c9 from './switch-field.module.css.js';
 
-const _excluded = ["label", "hint", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "aria-label", "aria-labelledby", "onChange"];
+const _excluded = ["label", "message", "tone", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "aria-label", "aria-labelledby", "onChange"];
 const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref) {
   var _ref2, _props$checked, _props$checked2;
 
   let {
     label,
-    hint,
+    message,
+    tone = 'neutral',
     disabled = false,
     hidden,
     defaultChecked,
@@ -27,8 +28,8 @@ const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref
       props = _objectWithoutProperties(_ref, _excluded);
 
   const id = useId(originalId);
-  const hintId = useId();
-  const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : hint ? hintId : undefined;
+  const messageId = useId();
+  const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : message ? messageId : undefined;
   const ariaLabel = originalAriaLabel != null ? originalAriaLabel : undefined;
   const ariaLabelledBy = originalAriaLabelledby != null ? originalAriaLabelledby : undefined;
   const [keyFocused, setKeyFocused] = React.useState(false);
@@ -77,9 +78,10 @@ const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref
     className: modules_8e05f7c9.handle
   })), /*#__PURE__*/React.createElement(Text, {
     exceptionallySetClassName: modules_8e05f7c9.label
-  }, label)), hint ? /*#__PURE__*/React.createElement(FieldHint, {
-    id: hintId
-  }, hint) : null);
+  }, label)), message ? /*#__PURE__*/React.createElement(FieldMessage, {
+    id: messageId,
+    tone: tone
+  }, message) : null);
 });
 
 export { SwitchField };

package/es/switch-field/switch-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch-field.js","sources":["../../src/switch-field/switch-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\nimport { HiddenVisually } from '../hidden-visually'\nimport { FieldComponentProps, FieldHint } from '../base-field'\nimport { useId } from '../utils/common-helpers'\nimport styles from './switch-field.module.css'\n\ninterface SwitchFieldProps\n    extends Omit<\n        FieldComponentProps<HTMLInputElement>,\n        | 'type'\n        | 'secondaryLabel'\n        | 'auxiliaryLabel'\n        | 'maxWidth'\n        | 'aria-describedby'\n        | 'aria-label'\n        | 'aria-labelledby'\n    > {\n    /**\n     * Identifies the element (or elements) that describes the switch for assistive technologies.\n     */\n    'aria-describedby'?: string\n\n    /**\n     * Defines a string value that labels the current switch for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current switch for assistive technologies.\n     */\n    'aria-labelledby'?: string\n}\n\nconst SwitchField = React.forwardRef<HTMLInputElement, SwitchFieldProps>(function SwitchField(\n    {\n        label,\n        hint,\n        disabled = false,\n        hidden,\n        defaultChecked,\n        id: originalId,\n        'aria-describedby': originalAriaDescribedBy,\n        'aria-label': originalAriaLabel,\n        'aria-labelledby': originalAriaLabelledby,\n        onChange,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(originalId)\n    const hintId = useId()\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (hint ? hintId : undefined)\n    const ariaLabel = originalAriaLabel ?? undefined\n    const ariaLabelledBy = originalAriaLabelledby ?? undefined\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    return (\n        <Stack space=\"small\" hidden={hidden}>\n            <Box\n                className={[\n                    styles.container,\n                    disabled ? styles.disabled : null,\n                    isChecked ? styles.checked : null,\n                    keyFocused ? styles.keyFocused : null,\n                ]}\n                as=\"label\"\n                display=\"flex\"\n                alignItems=\"center\"\n            >\n                <Box\n                    position=\"relative\"\n                    display=\"inlineBlock\"\n                    overflow=\"visible\"\n                    marginRight=\"small\"\n                    flexShrink={0}\n                    className={styles.toggle}\n                >\n                    <HiddenVisually>\n                        <input\n                            {...props}\n                            id={id}\n                            type=\"checkbox\"\n                            disabled={disabled}\n                            aria-describedby={ariaDescribedBy}\n                            aria-label={ariaLabel}\n                            aria-labelledby={ariaLabelledBy}\n                            ref={ref}\n                            checked={isChecked}\n                            onChange={(event) => {\n                                onChange?.(event)\n                                if (!event.defaultPrevented) {\n                                    setChecked(event.currentTarget.checked)\n                                }\n                            }}\n                            onBlur={(event) => {\n                                setKeyFocused(false)\n                                props?.onBlur?.(event)\n                            }}\n                            onKeyUp={(event) => {\n                                setKeyFocused(true)\n                                props?.onKeyUp?.(event)\n                            }}\n                        />\n                    </HiddenVisually>\n                    <span className={styles.handle} />\n                </Box>\n                <Text exceptionallySetClassName={styles.label}>{label}</Text>\n            </Box>\n            {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n        </Stack>\n    )\n})\n\nexport { SwitchField }\nexport type { SwitchFieldProps }\n"],"names":["SwitchField","React","forwardRef","ref","label","hint","disabled","hidden","defaultChecked","id","originalId","originalAriaDescribedBy","originalAriaLabel","originalAriaLabelledby","onChange","props","useId","hintId","ariaDescribedBy","undefined","ariaLabel","ariaLabelledBy","keyFocused","setKeyFocused","useState","checkedState","setChecked","checked","isChecked","createElement","Stack","space","Box","className","styles","container","as","display","alignItems","position","overflow","marginRight","flexShrink","toggle","HiddenVisually","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","handle","Text","exceptionallySetClassName","FieldHint"],"mappings":"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"}
+{"version":3,"file":"switch-field.js","sources":["../../src/switch-field/switch-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\nimport { HiddenVisually } from '../hidden-visually'\nimport { FieldComponentProps, FieldMessage } from '../base-field'\nimport { useId } from '../utils/common-helpers'\nimport styles from './switch-field.module.css'\n\ninterface SwitchFieldProps\n    extends Omit<\n        FieldComponentProps<HTMLInputElement>,\n        | 'type'\n        | 'auxiliaryLabel'\n        | 'maxWidth'\n        | 'aria-describedby'\n        | 'aria-label'\n        | 'aria-labelledby'\n    > {\n    /**\n     * Identifies the element (or elements) that describes the switch for assistive technologies.\n     */\n    'aria-describedby'?: string\n\n    /**\n     * Defines a string value that labels the current switch for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current switch for assistive technologies.\n     */\n    'aria-labelledby'?: string\n}\n\nconst SwitchField = React.forwardRef<HTMLInputElement, SwitchFieldProps>(function SwitchField(\n    {\n        label,\n        message,\n        tone = 'neutral',\n        disabled = false,\n        hidden,\n        defaultChecked,\n        id: originalId,\n        'aria-describedby': originalAriaDescribedBy,\n        'aria-label': originalAriaLabel,\n        'aria-labelledby': originalAriaLabelledby,\n        onChange,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(originalId)\n    const messageId = useId()\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (message ? messageId : undefined)\n    const ariaLabel = originalAriaLabel ?? undefined\n    const ariaLabelledBy = originalAriaLabelledby ?? undefined\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    return (\n        <Stack space=\"small\" hidden={hidden}>\n            <Box\n                className={[\n                    styles.container,\n                    disabled ? styles.disabled : null,\n                    isChecked ? styles.checked : null,\n                    keyFocused ? styles.keyFocused : null,\n                ]}\n                as=\"label\"\n                display=\"flex\"\n                alignItems=\"center\"\n            >\n                <Box\n                    position=\"relative\"\n                    display=\"inlineBlock\"\n                    overflow=\"visible\"\n                    marginRight=\"small\"\n                    flexShrink={0}\n                    className={styles.toggle}\n                >\n                    <HiddenVisually>\n                        <input\n                            {...props}\n                            id={id}\n                            type=\"checkbox\"\n                            disabled={disabled}\n                            aria-describedby={ariaDescribedBy}\n                            aria-label={ariaLabel}\n                            aria-labelledby={ariaLabelledBy}\n                            ref={ref}\n                            checked={isChecked}\n                            onChange={(event) => {\n                                onChange?.(event)\n                                if (!event.defaultPrevented) {\n                                    setChecked(event.currentTarget.checked)\n                                }\n                            }}\n                            onBlur={(event) => {\n                                setKeyFocused(false)\n                                props?.onBlur?.(event)\n                            }}\n                            onKeyUp={(event) => {\n                                setKeyFocused(true)\n                                props?.onKeyUp?.(event)\n                            }}\n                        />\n                    </HiddenVisually>\n                    <span className={styles.handle} />\n                </Box>\n                <Text exceptionallySetClassName={styles.label}>{label}</Text>\n            </Box>\n            {message ? (\n                <FieldMessage id={messageId} tone={tone}>\n                    {message}\n                </FieldMessage>\n            ) : null}\n        </Stack>\n    )\n})\n\nexport { SwitchField }\nexport type { SwitchFieldProps }\n"],"names":["SwitchField","React","forwardRef","ref","label","message","tone","disabled","hidden","defaultChecked","id","originalId","originalAriaDescribedBy","originalAriaLabel","originalAriaLabelledby","onChange","props","useId","messageId","ariaDescribedBy","undefined","ariaLabel","ariaLabelledBy","keyFocused","setKeyFocused","useState","checkedState","setChecked","checked","isChecked","createElement","Stack","space","Box","className","styles","container","as","display","alignItems","position","overflow","marginRight","flexShrink","toggle","HiddenVisually","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","handle","Text","exceptionallySetClassName","FieldMessage"],"mappings":"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"}

package/es/text-area/text-area.js

@@ -1,32 +1,37 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
+import classNames from 'classnames';
 import { useMergeRefs } from 'use-callback-ref';
 import { BaseField } from '../base-field/base-field.js';
 import { Box } from '../box/box.js';
 import modules_2728c236 from './text-area.module.css.js';
 
-const _excluded = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "hidden", "aria-describedby", "rows", "autoExpand"];
+const _excluded = ["variant", "id", "label", "value", "auxiliaryLabel", "message", "tone", "maxWidth", "maxLength", "hidden", "aria-describedby", "rows", "autoExpand", "disableResize", "onChange"],
+      _excluded2 = ["onChange"];
 const TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
   let {
     variant = 'default',
     id,
     label,
-    secondaryLabel,
+    value,
     auxiliaryLabel,
-    hint,
     message,
     tone,
     maxWidth,
+    maxLength,
     hidden,
     'aria-describedby': ariaDescribedBy,
     rows,
-    autoExpand = false
+    autoExpand = false,
+    disableResize = false,
+    onChange: originalOnChange
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
   const containerRef = React.useRef(null);
   const internalRef = React.useRef(null);
   const combinedRef = useMergeRefs([ref, internalRef]);
+  const textAreaClassName = classNames([autoExpand ? modules_2728c236.disableResize : null, disableResize ? modules_2728c236.disableResize : null]);
   React.useEffect(function setupAutoExpand() {
     const containerElement = containerRef.current;
 
@@ -55,25 +60,37 @@ const TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
     variant: variant,
     id: id,
     label: label,
-    secondaryLabel: secondaryLabel,
+    value: value,
     auxiliaryLabel: auxiliaryLabel,
-    hint: hint,
     message: message,
     tone: tone,
     hidden: hidden,
     "aria-describedby": ariaDescribedBy,
     className: [modules_2728c236.textAreaContainer, tone === 'error' ? modules_2728c236.error : null, variant === 'bordered' ? modules_2728c236.bordered : null],
-    maxWidth: maxWidth
-  }, extraProps => /*#__PURE__*/React.createElement(Box, {
-    width: "full",
-    display: "flex",
-    className: modules_2728c236.innerContainer,
-    ref: containerRef
-  }, /*#__PURE__*/React.createElement("textarea", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
-    ref: combinedRef,
-    rows: rows,
-    className: autoExpand ? modules_2728c236.autoExpand : undefined
-  }))));
+    maxWidth: maxWidth,
+    maxLength: maxLength
+  }, _ref2 => {
+    let {
+      onChange
+    } = _ref2,
+        extraProps = _objectWithoutProperties(_ref2, _excluded2);
+
+    return /*#__PURE__*/React.createElement(Box, {
+      width: "full",
+      display: "flex",
+      className: modules_2728c236.innerContainer,
+      ref: containerRef
+    }, /*#__PURE__*/React.createElement("textarea", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
+      ref: combinedRef,
+      rows: rows,
+      className: textAreaClassName,
+      maxLength: maxLength,
+      onChange: event => {
+        originalOnChange == null ? void 0 : originalOnChange(event);
+        onChange == null ? void 0 : onChange(event);
+      }
+    })));
+  });
 });
 
 export { TextArea };

package/es/text-area/text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sources":["../../src/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ninterface TextAreaProps extends FieldComponentProps<HTMLTextAreaElement>, BaseFieldVariantProps {\n    /**\n     * The number of visible text lines for the text area.\n     *\n     * If it is specified, it must be a positive integer. If it is not specified, the default\n     * value is 2 (set by the browser).\n     *\n     * When `autoExpand` is true, this value serves the purpose of specifying the minimum number\n     * of rows that the textarea will shrink to when the content is not large enough to make it\n     * expand.\n     *\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n     */\n    rows?: number\n\n    /**\n     * If `true`, the textarea will auto-expand or shrink vertically to fit the content.\n     */\n    autoExpand?: boolean\n}\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\n        ...props\n    },\n    ref,\n) {\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    React.useEffect(\n        function setupAutoExpand() {\n            const containerElement = containerRef.current\n\n            function handleAutoExpand(value: string) {\n                if (containerElement) {\n                    containerElement.dataset.replicatedValue = value\n                }\n            }\n\n            function handleInput(event: Event) {\n                handleAutoExpand((event.currentTarget as HTMLTextAreaElement).value)\n            }\n\n            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand) {\n                return undefined\n            }\n\n            // Apply change initially, in case the text area has a non-empty initial value\n            handleAutoExpand(textAreaElement.value)\n\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand],\n    )\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            className={[\n                styles.textAreaContainer,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n        >\n            {(extraProps) => (\n                <Box\n                    width=\"full\"\n                    display=\"flex\"\n                    className={styles.innerContainer}\n                    ref={containerRef}\n                >\n                    <textarea\n                        {...props}\n                        {...extraProps}\n                        ref={combinedRef}\n                        rows={rows}\n                        className={autoExpand ? styles.autoExpand : undefined}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["TextArea","React","forwardRef","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","hidden","ariaDescribedBy","rows","autoExpand","props","containerRef","useRef","internalRef","combinedRef","useMergeRefs","useEffect","setupAutoExpand","containerElement","current","handleAutoExpand","value","dataset","replicatedValue","handleInput","event","currentTarget","textAreaElement","undefined","addEventListener","removeEventListener","createElement","BaseField","className","styles","textAreaContainer","error","bordered","extraProps","Box","width","display","innerContainer","_objectSpread"],"mappings":";;;;;;;;AA2BMA,MAAAA,QAAQ,gBAAGC,KAAK,CAACC,UAAN,CAAqD,SAASF,QAAT,CAiBlEG,IAAAA,EAAAA,GAjBkE,EAiB/D;EAAA,IAhBH;AACIC,IAAAA,OAAO,GAAG,SADd;IAEIC,EAFJ;IAGIC,KAHJ;IAIIC,cAJJ;IAKIC,cALJ;IAMIC,IANJ;IAOIC,OAPJ;IAQIC,IARJ;IASIC,QATJ;IAUIC,MAVJ;AAWI,IAAA,kBAAA,EAAoBC,eAXxB;IAYIC,IAZJ;AAaIC,IAAAA,UAAU,GAAG,KAAA;GAGd,GAAA,IAAA;AAAA,MAFIC,KAEJ,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;AAEH,EAAA,MAAMC,YAAY,GAAGjB,KAAK,CAACkB,MAAN,CAA6B,IAA7B,CAArB,CAAA;AACA,EAAA,MAAMC,WAAW,GAAGnB,KAAK,CAACkB,MAAN,CAAkC,IAAlC,CAApB,CAAA;EACA,MAAME,WAAW,GAAGC,YAAY,CAAC,CAACnB,GAAD,EAAMiB,WAAN,CAAD,CAAhC,CAAA;AAEAnB,EAAAA,KAAK,CAACsB,SAAN,CACI,SAASC,eAAT,GAAwB;AACpB,IAAA,MAAMC,gBAAgB,GAAGP,YAAY,CAACQ,OAAtC,CAAA;;IAEA,SAASC,gBAAT,CAA0BC,KAA1B,EAAuC;AACnC,MAAA,IAAIH,gBAAJ,EAAsB;AAClBA,QAAAA,gBAAgB,CAACI,OAAjB,CAAyBC,eAAzB,GAA2CF,KAA3C,CAAA;AACH,OAAA;AACJ,KAAA;;IAED,SAASG,WAAT,CAAqBC,KAArB,EAAiC;AAC7BL,MAAAA,gBAAgB,CAAEK,KAAK,CAACC,aAAN,CAA4CL,KAA9C,CAAhB,CAAA;AACH,KAAA;;AAED,IAAA,MAAMM,eAAe,GAAGd,WAAW,CAACM,OAApC,CAAA;;AACA,IAAA,IAAI,CAACQ,eAAD,IAAoB,CAAClB,UAAzB,EAAqC;AACjC,MAAA,OAAOmB,SAAP,CAAA;AACH,KAhBmB;;;AAmBpBR,IAAAA,gBAAgB,CAACO,eAAe,CAACN,KAAjB,CAAhB,CAAA;AAEAM,IAAAA,eAAe,CAACE,gBAAhB,CAAiC,OAAjC,EAA0CL,WAA1C,CAAA,CAAA;IACA,OAAO,MAAMG,eAAe,CAACG,mBAAhB,CAAoC,OAApC,EAA6CN,WAA7C,CAAb,CAAA;GAvBR,EAyBI,CAACf,UAAD,CAzBJ,CAAA,CAAA;AA4BA,EAAA,oBACIf,KAAC,CAAAqC,aAAD,CAACC,SAAD;AACInC,IAAAA,OAAO,EAAEA;AACTC,IAAAA,EAAE,EAAEA;AACJC,IAAAA,KAAK,EAAEA;AACPC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,OAAO,EAAEA;AACTC,IAAAA,IAAI,EAAEA;AACNE,IAAAA,MAAM,EAAEA;wBACUC;IAClB0B,SAAS,EAAE,CACPC,gBAAM,CAACC,iBADA,EAEP/B,IAAI,KAAK,OAAT,GAAmB8B,gBAAM,CAACE,KAA1B,GAAkC,IAF3B,EAGPvC,OAAO,KAAK,UAAZ,GAAyBqC,gBAAM,CAACG,QAAhC,GAA2C,IAHpC;AAKXhC,IAAAA,QAAQ,EAAEA,QAAAA;GAhBd,EAkBMiC,UAAD,iBACG5C,KAAC,CAAAqC,aAAD,CAACQ,GAAD,EACI;AAAAC,IAAAA,KAAK,EAAC,MAAN;AACAC,IAAAA,OAAO,EAAC,MADR;IAEAR,SAAS,EAAEC,gBAAM,CAACQ,cAFlB;AAGA9C,IAAAA,GAAG,EAAEe,YAAAA;GAJT,eAMIjB,KAAA,CAAAqC,aAAA,CAAA,UAAA,EAAAY,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAA,EAAA,EACQjC,KADR,CAAA,EAEQ4B,UAFR,CAAA,EAAA,EAAA,EAAA;AAGI1C,IAAAA,GAAG,EAAEkB,WAHT;AAIIN,IAAAA,IAAI,EAAEA,IAJV;AAKIyB,IAAAA,SAAS,EAAExB,UAAU,GAAGyB,gBAAM,CAACzB,UAAV,GAAuBmB,SAAAA;AALhD,GAAA,CAAA,CANJ,CAnBR,CADJ,CAAA;AAqCH,CAxFgB;;;;"}
+{"version":3,"file":"text-area.js","sources":["../../src/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ninterface TextAreaProps extends FieldComponentProps<HTMLTextAreaElement>, BaseFieldVariantProps {\n    /**\n     * The number of visible text lines for the text area.\n     *\n     * If it is specified, it must be a positive integer. If it is not specified, the default\n     * value is 2 (set by the browser).\n     *\n     * When `autoExpand` is true, this value serves the purpose of specifying the minimum number\n     * of rows that the textarea will shrink to when the content is not large enough to make it\n     * expand.\n     *\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n     */\n    rows?: number\n\n    /**\n     * If `true`, the textarea will be automatically resized to fit the content, and the ability to\n     * manually resize the textarea will be disabled.\n     */\n    autoExpand?: boolean\n\n    /**\n     * If `true`, the ability to manually resize the textarea will be disabled.\n     *\n     * When `autoExpand` is true, this property serves no purpose, because the ability to manually\n     * resize the textarea is always disabled when `autoExpand` is true.\n     */\n    disableResize?: boolean\n}\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\n        disableResize = false,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    const textAreaClassName = classNames([\n        autoExpand ? styles.disableResize : null,\n        disableResize ? styles.disableResize : null,\n    ])\n\n    React.useEffect(\n        function setupAutoExpand() {\n            const containerElement = containerRef.current\n\n            function handleAutoExpand(value: string) {\n                if (containerElement) {\n                    containerElement.dataset.replicatedValue = value\n                }\n            }\n\n            function handleInput(event: Event) {\n                handleAutoExpand((event.currentTarget as HTMLTextAreaElement).value)\n            }\n\n            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand) {\n                return undefined\n            }\n\n            // Apply change initially, in case the text area has a non-empty initial value\n            handleAutoExpand(textAreaElement.value)\n\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand],\n    )\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            className={[\n                styles.textAreaContainer,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n            maxLength={maxLength}\n        >\n            {({ onChange, ...extraProps }) => (\n                <Box\n                    width=\"full\"\n                    display=\"flex\"\n                    className={styles.innerContainer}\n                    ref={containerRef}\n                >\n                    <textarea\n                        {...props}\n                        {...extraProps}\n                        ref={combinedRef}\n                        rows={rows}\n                        className={textAreaClassName}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["TextArea","React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","ariaDescribedBy","rows","autoExpand","disableResize","onChange","originalOnChange","props","containerRef","useRef","internalRef","combinedRef","useMergeRefs","textAreaClassName","classNames","styles","useEffect","setupAutoExpand","containerElement","current","handleAutoExpand","dataset","replicatedValue","handleInput","event","currentTarget","textAreaElement","undefined","addEventListener","removeEventListener","createElement","BaseField","className","textAreaContainer","error","bordered","extraProps","Box","width","display","innerContainer","_objectSpread"],"mappings":"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"}

package/es/text-area/text-area.module.css.js

@@ -1,4 +1,4 @@
-var modules_2728c236 = {"textAreaContainer":"_55ccf266","innerContainer":"_89bb7098","bordered":"_02a47358","error":"_704ff540","autoExpand":"_145ca8f0"};
+var modules_2728c236 = {"textAreaContainer":"a95cb864","innerContainer":"ab9873f7","bordered":"de380efd","error":"_29a9d12f","disableResize":"_44f7147e"};
 
 export { modules_2728c236 as default };
 //# sourceMappingURL=text-area.module.css.js.map

package/es/text-field/text-field.js

@@ -5,23 +5,25 @@ import { Box } from '../box/box.js';
 import modules_aaf25250 from './text-field.module.css.js';
 import { useMergeRefs } from 'use-callback-ref';
 
-const _excluded = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "type", "maxWidth", "hidden", "aria-describedby", "startSlot", "endSlot"];
+const _excluded = ["variant", "id", "label", "value", "auxiliaryLabel", "message", "tone", "type", "maxWidth", "maxLength", "hidden", "aria-describedby", "startSlot", "endSlot", "onChange"],
+      _excluded2 = ["onChange"];
 const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
   let {
     variant = 'default',
     id,
     label,
-    secondaryLabel,
+    value,
     auxiliaryLabel,
-    hint,
     message,
     tone,
     type = 'text',
     maxWidth,
+    maxLength,
     hidden,
     'aria-describedby': ariaDescribedBy,
     startSlot,
-    endSlot
+    endSlot,
+    onChange: originalOnChange
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -39,33 +41,45 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
     variant: variant,
     id: id,
     label: label,
-    secondaryLabel: secondaryLabel,
+    value: value,
     auxiliaryLabel: auxiliaryLabel,
-    hint: hint,
     message: message,
     tone: tone,
     maxWidth: maxWidth,
+    maxLength: maxLength,
     hidden: hidden,
     "aria-describedby": ariaDescribedBy
-  }, extraProps => /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    alignItems: "center",
-    className: [modules_aaf25250.inputWrapper, tone === 'error' ? modules_aaf25250.error : null, variant === 'bordered' ? modules_aaf25250.bordered : null],
-    onClick: handleClick
-  }, startSlot ? /*#__PURE__*/React.createElement(Box, {
-    className: modules_aaf25250.slot,
-    display: "flex",
-    marginRight: variant === 'bordered' ? 'xsmall' : '-xsmall',
-    marginLeft: variant === 'bordered' ? '-xsmall' : 'xsmall'
-  }, startSlot) : null, /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
-    type: type,
-    ref: combinedRef
-  })), endSlot ? /*#__PURE__*/React.createElement(Box, {
-    className: modules_aaf25250.slot,
-    display: "flex",
-    marginRight: variant === 'bordered' ? '-xsmall' : 'xsmall',
-    marginLeft: variant === 'bordered' ? 'xsmall' : '-xsmall'
-  }, endSlot) : null));
+  }, _ref2 => {
+    let {
+      onChange
+    } = _ref2,
+        extraProps = _objectWithoutProperties(_ref2, _excluded2);
+
+    return /*#__PURE__*/React.createElement(Box, {
+      display: "flex",
+      alignItems: "center",
+      className: [modules_aaf25250.inputWrapper, tone === 'error' ? modules_aaf25250.error : null, variant === 'bordered' ? modules_aaf25250.bordered : null, props.readOnly ? modules_aaf25250.readOnly : null],
+      onClick: handleClick
+    }, startSlot ? /*#__PURE__*/React.createElement(Box, {
+      className: modules_aaf25250.slot,
+      display: "flex",
+      marginRight: variant === 'bordered' ? 'xsmall' : '-xsmall',
+      marginLeft: variant === 'bordered' ? '-xsmall' : 'xsmall'
+    }, startSlot) : null, /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
+      type: type,
+      ref: combinedRef,
+      maxLength: maxLength,
+      onChange: event => {
+        originalOnChange == null ? void 0 : originalOnChange(event);
+        onChange == null ? void 0 : onChange(event);
+      }
+    })), endSlot ? /*#__PURE__*/React.createElement(Box, {
+      className: modules_aaf25250.slot,
+      display: "flex",
+      marginRight: variant === 'bordered' ? '-xsmall' : 'xsmall',
+      marginLeft: variant === 'bordered' ? 'xsmall' : '-xsmall'
+    }, endSlot) : null);
+  });
 });
 
 export { TextField };

package/es/text-field/text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","sources":["../../src/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-field.module.css'\nimport type { FieldComponentProps } from '../base-field'\nimport { useMergeRefs } from 'use-callback-ref'\n\ntype TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url'\n\ninterface TextFieldProps\n    extends Omit<FieldComponentProps<HTMLInputElement>, 'type'>,\n        BaseFieldVariantProps {\n    type?: TextFieldType\n    startSlot?: React.ReactElement | string | number\n    endSlot?: React.ReactElement | string | number\n}\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        type = 'text',\n        maxWidth,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        startSlot,\n        endSlot,\n        ...props\n    },\n    ref,\n) {\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    function handleClick(event: React.MouseEvent) {\n        if (event.currentTarget === combinedRef.current) return\n        internalRef.current?.focus()\n    }\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[\n                        styles.inputWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                    onClick={handleClick}\n                >\n                    {startSlot ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                            marginLeft={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                        >\n                            {startSlot}\n                        </Box>\n                    ) : null}\n                    <input {...props} {...extraProps} type={type} ref={combinedRef} />\n                    {endSlot ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                            marginLeft={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                        >\n                            {endSlot}\n                        </Box>\n                    ) : null}\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["TextField","React","forwardRef","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","type","maxWidth","hidden","ariaDescribedBy","startSlot","endSlot","props","internalRef","useRef","combinedRef","useMergeRefs","handleClick","event","currentTarget","current","focus","createElement","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","error","bordered","onClick","slot","marginRight","marginLeft"],"mappings":"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"}
+{"version":3,"file":"text-field.js","sources":["../../src/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-field.module.css'\nimport type { FieldComponentProps } from '../base-field'\nimport { useMergeRefs } from 'use-callback-ref'\n\ntype TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url'\n\ninterface TextFieldProps\n    extends Omit<FieldComponentProps<HTMLInputElement>, 'type'>,\n        BaseFieldVariantProps {\n    type?: TextFieldType\n    startSlot?: React.ReactElement | string | number\n    endSlot?: React.ReactElement | string | number\n}\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        type = 'text',\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        startSlot,\n        endSlot,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    function handleClick(event: React.MouseEvent) {\n        if (event.currentTarget === combinedRef.current) return\n        internalRef.current?.focus()\n    }\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            maxLength={maxLength}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {({ onChange, ...extraProps }) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[\n                        styles.inputWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                        props.readOnly ? styles.readOnly : null,\n                    ]}\n                    onClick={handleClick}\n                >\n                    {startSlot ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                            marginLeft={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                        >\n                            {startSlot}\n                        </Box>\n                    ) : null}\n                    <input\n                        {...props}\n                        {...extraProps}\n                        type={type}\n                        ref={combinedRef}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                    {endSlot ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                            marginLeft={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                        >\n                            {endSlot}\n                        </Box>\n                    ) : null}\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["TextField","React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","type","maxWidth","maxLength","hidden","ariaDescribedBy","startSlot","endSlot","onChange","originalOnChange","props","internalRef","useRef","combinedRef","useMergeRefs","handleClick","event","currentTarget","current","focus","createElement","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","error","bordered","readOnly","onClick","slot","marginRight","marginLeft"],"mappings":"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"}

package/es/text-field/text-field.module.css.js

@@ -1,4 +1,4 @@
-var modules_aaf25250 = {"inputWrapper":"dea25485","bordered":"_80b6b376","error":"_1a32867a","slot":"dbbd207e"};
+var modules_aaf25250 = {"inputWrapper":"f2de4e8d","readOnly":"ee26e40c","bordered":"_3afb1a56","error":"f3ff9f57","slot":"_3eb7b0ef"};
 
 export { modules_aaf25250 as default };
 //# sourceMappingURL=text-field.module.css.js.map

package/es/tooltip/tooltip.js

@@ -9,12 +9,14 @@ function Tooltip({
   position = 'top',
   gapSize = 3,
   withArrow = false,
+  showTimeout = 500,
+  hideTimeout = 100,
   exceptionallySetClassName
 }) {
   const tooltip = useTooltipStore({
     placement: position,
-    showTimeout: 500,
-    hideTimeout: 100
+    showTimeout,
+    hideTimeout
   });
   const isOpen = tooltip.useState('open');
   const child = React.Children.only(children);

package/es/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    useTooltipStore,\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n} from '@ariakit/react'\nimport { Box } from '../box'\n\nimport type { TooltipStoreState } from '@ariakit/react'\n\nimport styles from './tooltip.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\ninterface TooltipProps extends ObfuscatedClassName {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: TooltipStoreState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    withArrow = false,\n    exceptionallySetClassName,\n}: TooltipProps) {\n    const tooltip = useTooltipStore({ placement: position, showTimeout: 500, hideTimeout: 100 })\n    const isOpen = tooltip.useState('open')\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n    )\n\n    if (!child) {\n        return child\n    }\n\n    if (typeof child.ref === 'string') {\n        throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n    }\n\n    return (\n        <>\n            <TooltipAnchor render={child} store={tooltip} ref={child.ref} />\n            {isOpen && content ? (\n                <AriakitTooltip\n                    store={tooltip}\n                    gutter={gapSize}\n                    render={\n                        <Box\n                            className={[styles.tooltip, exceptionallySetClassName]}\n                            background=\"toast\"\n                            borderRadius=\"standard\"\n                            paddingX=\"small\"\n                            paddingY=\"xsmall\"\n                            maxWidth=\"medium\"\n                            width=\"fitContent\"\n                            overflow=\"hidden\"\n                            textAlign=\"center\"\n                        />\n                    }\n                >\n                    {withArrow ? <TooltipArrow /> : null}\n                    {typeof content === 'function' ? content() : content}\n                </AriakitTooltip>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n"],"names":["Tooltip","children","content","position","gapSize","withArrow","exceptionallySetClassName","tooltip","useTooltipStore","placement","showTimeout","hideTimeout","isOpen","useState","child","React","Children","only","ref","Error","createElement","Fragment","TooltipAnchor","render","store","AriakitTooltip","gutter","Box","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow"],"mappings":";;;;;AAsEA,SAASA,OAAT,CAAiB;EACbC,QADa;EAEbC,OAFa;AAGbC,EAAAA,QAAQ,GAAG,KAHE;AAIbC,EAAAA,OAAO,GAAG,CAJG;AAKbC,EAAAA,SAAS,GAAG,KALC;AAMbC,EAAAA,yBAAAA;AANa,CAAjB,EAOe;EACX,MAAMC,OAAO,GAAGC,eAAe,CAAC;AAAEC,IAAAA,SAAS,EAAEN,QAAb;AAAuBO,IAAAA,WAAW,EAAE,GAApC;AAAyCC,IAAAA,WAAW,EAAE,GAAA;AAAtD,GAAD,CAA/B,CAAA;AACA,EAAA,MAAMC,MAAM,GAAGL,OAAO,CAACM,QAAR,CAAiB,MAAjB,CAAf,CAAA;EAEA,MAAMC,KAAK,GAAGC,KAAK,CAACC,QAAN,CAAeC,IAAf,CACVhB,QADU,CAAd,CAAA;;EAIA,IAAI,CAACa,KAAL,EAAY;AACR,IAAA,OAAOA,KAAP,CAAA;AACH,GAAA;;AAED,EAAA,IAAI,OAAOA,KAAK,CAACI,GAAb,KAAqB,QAAzB,EAAmC;AAC/B,IAAA,MAAM,IAAIC,KAAJ,CAAU,iEAAV,CAAN,CAAA;AACH,GAAA;;AAED,EAAA,oBACIJ,KAAA,CAAAK,aAAA,CAAAL,KAAA,CAAAM,QAAA,EAAA,IAAA,eACIN,KAAA,CAAAK,aAAA,CAACE,aAAD,EAAc;AAACC,IAAAA,MAAM,EAAET,KAAT;AAAgBU,IAAAA,KAAK,EAAEjB,OAAvB;IAAgCW,GAAG,EAAEJ,KAAK,CAACI,GAAAA;GAAzD,CADJ,EAEKN,MAAM,IAAIV,OAAV,gBACGa,KAAC,CAAAK,aAAD,CAACK,SAAD,EACI;AAAAD,IAAAA,KAAK,EAAEjB,OAAP;AACAmB,IAAAA,MAAM,EAAEtB,OADR;AAEAmB,IAAAA,MAAM,eACFR,KAAA,CAAAK,aAAA,CAACO,GAAD,EAAI;AACAC,MAAAA,SAAS,EAAE,CAACC,gBAAM,CAACtB,OAAR,EAAiBD,yBAAjB,CADX;AAEAwB,MAAAA,UAAU,EAAC,OAFX;AAGAC,MAAAA,YAAY,EAAC,UAHb;AAIAC,MAAAA,QAAQ,EAAC,OAJT;AAKAC,MAAAA,QAAQ,EAAC,QALT;AAMAC,MAAAA,QAAQ,EAAC,QANT;AAOAC,MAAAA,KAAK,EAAC,YAPN;AAQAC,MAAAA,QAAQ,EAAC,QART;AASAC,MAAAA,SAAS,EAAC,QAAA;KATd,CAAA;GAJR,EAiBKhC,SAAS,gBAAGU,KAAA,CAAAK,aAAA,CAACkB,YAAD,EAAgB,IAAhB,CAAH,GAAsB,IAjBpC,EAkBK,OAAOpC,OAAP,KAAmB,UAAnB,GAAgCA,OAAO,EAAvC,GAA4CA,OAlBjD,CADH,GAqBG,IAvBR,CADJ,CAAA;AA2BH;;;;"}
+{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    useTooltipStore,\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n} from '@ariakit/react'\nimport { Box } from '../box'\n\nimport type { TooltipStoreState } from '@ariakit/react'\n\nimport styles from './tooltip.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\ninterface TooltipProps extends ObfuscatedClassName {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: TooltipStoreState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n\n    /**\n     * The amount of time in milliseconds to wait before showing the tooltip\n     * @default 500\n     */\n    showTimeout?: number\n\n    /**\n     * The amount of time in milliseconds to wait before hiding the tooltip\n     * @default 100\n     */\n    hideTimeout?: number\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    withArrow = false,\n    showTimeout = 500,\n    hideTimeout = 100,\n    exceptionallySetClassName,\n}: TooltipProps) {\n    const tooltip = useTooltipStore({ placement: position, showTimeout, hideTimeout })\n    const isOpen = tooltip.useState('open')\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n    )\n\n    if (!child) {\n        return child\n    }\n\n    if (typeof child.ref === 'string') {\n        throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n    }\n\n    return (\n        <>\n            <TooltipAnchor render={child} store={tooltip} ref={child.ref} />\n            {isOpen && content ? (\n                <AriakitTooltip\n                    store={tooltip}\n                    gutter={gapSize}\n                    render={\n                        <Box\n                            className={[styles.tooltip, exceptionallySetClassName]}\n                            background=\"toast\"\n                            borderRadius=\"standard\"\n                            paddingX=\"small\"\n                            paddingY=\"xsmall\"\n                            maxWidth=\"medium\"\n                            width=\"fitContent\"\n                            overflow=\"hidden\"\n                            textAlign=\"center\"\n                        />\n                    }\n                >\n                    {withArrow ? <TooltipArrow /> : null}\n                    {typeof content === 'function' ? content() : content}\n                </AriakitTooltip>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n"],"names":["Tooltip","children","content","position","gapSize","withArrow","showTimeout","hideTimeout","exceptionallySetClassName","tooltip","useTooltipStore","placement","isOpen","useState","child","React","Children","only","ref","Error","createElement","Fragment","TooltipAnchor","render","store","AriakitTooltip","gutter","Box","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow"],"mappings":";;;;;AAkFA,SAASA,OAAT,CAAiB;EACbC,QADa;EAEbC,OAFa;AAGbC,EAAAA,QAAQ,GAAG,KAHE;AAIbC,EAAAA,OAAO,GAAG,CAJG;AAKbC,EAAAA,SAAS,GAAG,KALC;AAMbC,EAAAA,WAAW,GAAG,GAND;AAObC,EAAAA,WAAW,GAAG,GAPD;AAQbC,EAAAA,yBAAAA;AARa,CAAjB,EASe;EACX,MAAMC,OAAO,GAAGC,eAAe,CAAC;AAAEC,IAAAA,SAAS,EAAER,QAAb;IAAuBG,WAAvB;AAAoCC,IAAAA,WAAAA;AAApC,GAAD,CAA/B,CAAA;AACA,EAAA,MAAMK,MAAM,GAAGH,OAAO,CAACI,QAAR,CAAiB,MAAjB,CAAf,CAAA;EAEA,MAAMC,KAAK,GAAGC,KAAK,CAACC,QAAN,CAAeC,IAAf,CACVhB,QADU,CAAd,CAAA;;EAIA,IAAI,CAACa,KAAL,EAAY;AACR,IAAA,OAAOA,KAAP,CAAA;AACH,GAAA;;AAED,EAAA,IAAI,OAAOA,KAAK,CAACI,GAAb,KAAqB,QAAzB,EAAmC;AAC/B,IAAA,MAAM,IAAIC,KAAJ,CAAU,iEAAV,CAAN,CAAA;AACH,GAAA;;AAED,EAAA,oBACIJ,KAAA,CAAAK,aAAA,CAAAL,KAAA,CAAAM,QAAA,EAAA,IAAA,eACIN,KAAA,CAAAK,aAAA,CAACE,aAAD,EAAc;AAACC,IAAAA,MAAM,EAAET,KAAT;AAAgBU,IAAAA,KAAK,EAAEf,OAAvB;IAAgCS,GAAG,EAAEJ,KAAK,CAACI,GAAAA;GAAzD,CADJ,EAEKN,MAAM,IAAIV,OAAV,gBACGa,KAAC,CAAAK,aAAD,CAACK,SAAD,EACI;AAAAD,IAAAA,KAAK,EAAEf,OAAP;AACAiB,IAAAA,MAAM,EAAEtB,OADR;AAEAmB,IAAAA,MAAM,eACFR,KAAA,CAAAK,aAAA,CAACO,GAAD,EAAI;AACAC,MAAAA,SAAS,EAAE,CAACC,gBAAM,CAACpB,OAAR,EAAiBD,yBAAjB,CADX;AAEAsB,MAAAA,UAAU,EAAC,OAFX;AAGAC,MAAAA,YAAY,EAAC,UAHb;AAIAC,MAAAA,QAAQ,EAAC,OAJT;AAKAC,MAAAA,QAAQ,EAAC,QALT;AAMAC,MAAAA,QAAQ,EAAC,QANT;AAOAC,MAAAA,KAAK,EAAC,YAPN;AAQAC,MAAAA,QAAQ,EAAC,QART;AASAC,MAAAA,SAAS,EAAC,QAAA;KATd,CAAA;GAJR,EAiBKhC,SAAS,gBAAGU,KAAA,CAAAK,aAAA,CAACkB,YAAD,EAAgB,IAAhB,CAAH,GAAsB,IAjBpC,EAkBK,OAAOpC,OAAP,KAAmB,UAAnB,GAAgCA,OAAO,EAAvC,GAA4CA,OAlBjD,CADH,GAqBG,IAvBR,CADJ,CAAA;AA2BH;;;;"}

package/lib/alert/alert.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../utils/responsive-props.js"),l=require("../box/box.js"),r=require("../button/button.js"),n=require("../columns/columns.js"),a=require("../icons/alert-icon.js"),o=require("../icons/close-icon.js"),u=require("./alert.module.css.js");function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(l){if("default"!==l){var r=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(t,l,r.get?r:{enumerable:!0,get:function(){return e[l]}})}})),t.default=e,t}var s=i(e);exports.Alert=function({id:e,children:i,tone:c,closeLabel:m,onClose:d}){return s.createElement(l.Box,{id:e,role:"alert","aria-live":"polite",borderRadius:"full",className:[u.default.container,t.getClassNames(u.default,"tone",c)]},s.createElement(n.Columns,{space:"small",alignY:"center"},s.createElement(n.Column,{width:"content"},s.createElement(a.AlertIcon,{tone:c,className:u.default.icon})),s.createElement(n.Column,null,s.createElement(l.Box,{paddingY:"xsmall",paddingRight:null!=d&&null!=m?void 0:"small"},i)),null!=d&&null!=m?s.createElement(n.Column,{width:"content"},s.createElement(r.Button,{variant:"quaternary",size:"small",onClick:d,"aria-label":m,icon:s.createElement(o.CloseIcon,null),style:{"--reactist-btn-hover-fill":"transparent"}})):null))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../utils/responsive-props.js"),l=require("../box/box.js"),n=require("../button/button.js"),r=require("../columns/columns.js"),a=require("../icons/alert-icon.js"),o=require("../icons/close-icon.js"),s=require("./alert.module.css.js");function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(l){if("default"!==l){var n=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(t,l,n.get?n:{enumerable:!0,get:function(){return e[l]}})}})),t.default=e,t}var i=c(e);exports.Alert=function({id:e,children:c,tone:u,closeLabel:m,onClose:d}){return i.createElement(l.Box,{id:e,role:"alert","aria-live":"polite",borderRadius:"full",className:[s.default.container,t.getClassNames(s.default,"tone",u)]},i.createElement(r.Columns,{space:"small",alignY:"center"},i.createElement(r.Column,{width:"content"},i.createElement(a.AlertIcon,{tone:u,className:s.default.icon})),i.createElement(r.Column,null,i.createElement(l.Box,{paddingY:"xsmall",paddingRight:null!=d&&null!=m?void 0:"small",display:"flex",alignItems:"center",className:s.default.content},c)),null!=d&&null!=m?i.createElement(r.Column,{width:"content"},i.createElement(n.IconButton,{variant:"quaternary",size:"small",onClick:d,"aria-label":m,icon:i.createElement(o.CloseIcon,null),style:{"--reactist-btn-hover-fill":"transparent"}})):null))};
 //# sourceMappingURL=alert.js.map

package/lib/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../src/alert/alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { Button } from '../button'\nimport { Columns, Column } from '../columns'\n\nimport { AlertIcon } from '../icons/alert-icon'\nimport { CloseIcon } from '../icons/close-icon'\n\nimport styles from './alert.module.css'\n\nimport type { AlertTone } from '../utils/common-types'\n\ntype AllOrNone<T> = T | { [K in keyof T]?: never }\n\ntype AlertCloseProps = AllOrNone<{\n    closeLabel: string\n    onClose: () => void\n}>\n\ntype AlertProps = {\n    id?: string\n    children: React.ReactNode\n    tone: AlertTone\n} & AlertCloseProps\n\nfunction Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {\n    return (\n        <Box\n            id={id}\n            role=\"alert\"\n            aria-live=\"polite\"\n            borderRadius=\"full\"\n            className={[styles.container, getClassNames(styles, 'tone', tone)]}\n        >\n            <Columns space=\"small\" alignY=\"center\">\n                <Column width=\"content\">\n                    <AlertIcon tone={tone} className={styles.icon} />\n                </Column>\n                <Column>\n                    <Box\n                        paddingY=\"xsmall\"\n                        paddingRight={onClose != null && closeLabel != null ? undefined : 'small'}\n                    >\n                        {children}\n                    </Box>\n                </Column>\n                {onClose != null && closeLabel != null ? (\n                    <Column width=\"content\">\n                        <Button\n                            variant=\"quaternary\"\n                            size=\"small\"\n                            onClick={onClose}\n                            aria-label={closeLabel}\n                            icon={<CloseIcon />}\n                            style={{\n                                // @ts-expect-error not sure how to make TypeScript understand custom CSS properties\n                                '--reactist-btn-hover-fill': 'transparent',\n                            }}\n                        />\n                    </Column>\n                ) : null}\n            </Columns>\n        </Box>\n    )\n}\n\nexport { Alert }\nexport type { AlertProps }\n"],"names":["id","children","tone","closeLabel","onClose","React","createElement","Box","role","aria-live","borderRadius","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon","icon","paddingY","paddingRight","undefined","Button","variant","size","onClick","aria-label","CloseIcon","style","--reactist-btn-hover-fill"],"mappings":"wnBA0BA,UAAeA,GAAEA,EAAFC,SAAMA,EAANC,KAAgBA,EAAhBC,WAAsBA,EAAtBC,QAAkCA,IAC7C,OACIC,EAAAC,cAACC,MAAG,CACAP,GAAIA,EACJQ,KAAK,QACKC,YAAA,SACVC,aAAa,OACbC,UAAW,CAACC,EAAAA,QAAOC,UAAWC,EAAaA,cAACF,UAAQ,OAAQV,KAE5DG,EAACC,cAAAS,WAAQC,MAAM,QAAQC,OAAO,UAC1BZ,EAAAC,cAACY,SAAM,CAACC,MAAM,WACVd,EAAAC,cAACc,YAAS,CAAClB,KAAMA,EAAMS,UAAWC,EAAM,QAACS,QAE7ChB,EAAAC,cAACY,EAAAA,OAAM,KACHb,EAACC,cAAAC,MACG,CAAAe,SAAS,SACTC,aAAyB,MAAXnB,GAAiC,MAAdD,OAAqBqB,EAAY,SAEjEvB,IAGG,MAAXG,GAAiC,MAAdD,EAChBE,EAACC,cAAAY,SAAO,CAAAC,MAAM,WACVd,EAACC,cAAAmB,UACGC,QAAQ,aACRC,KAAK,QACLC,QAASxB,EAAOyB,aACJ1B,EACZkB,KAAMhB,gBAACyB,EAAAA,UAAS,MAChBC,MAAO,CAEHC,4BAA6B,kBAIzC"}
+{"version":3,"file":"alert.js","sources":["../../src/alert/alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { IconButton } from '../button'\nimport { Columns, Column } from '../columns'\n\nimport { AlertIcon } from '../icons/alert-icon'\nimport { CloseIcon } from '../icons/close-icon'\n\nimport styles from './alert.module.css'\n\nimport type { AlertTone } from '../utils/common-types'\n\ntype AllOrNone<T> = T | { [K in keyof T]?: never }\n\ntype AlertCloseProps = AllOrNone<{\n    closeLabel: string\n    onClose: () => void\n}>\n\ntype AlertProps = {\n    id?: string\n    children: React.ReactNode\n    tone: AlertTone\n} & AlertCloseProps\n\nfunction Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {\n    return (\n        <Box\n            id={id}\n            role=\"alert\"\n            aria-live=\"polite\"\n            borderRadius=\"full\"\n            className={[styles.container, getClassNames(styles, 'tone', tone)]}\n        >\n            <Columns space=\"small\" alignY=\"center\">\n                <Column width=\"content\">\n                    <AlertIcon tone={tone} className={styles.icon} />\n                </Column>\n                <Column>\n                    <Box\n                        paddingY=\"xsmall\"\n                        paddingRight={onClose != null && closeLabel != null ? undefined : 'small'}\n                        display=\"flex\"\n                        alignItems=\"center\"\n                        className={styles.content}\n                    >\n                        {children}\n                    </Box>\n                </Column>\n                {onClose != null && closeLabel != null ? (\n                    <Column width=\"content\">\n                        <IconButton\n                            variant=\"quaternary\"\n                            size=\"small\"\n                            onClick={onClose}\n                            aria-label={closeLabel}\n                            icon={<CloseIcon />}\n                            style={{\n                                // @ts-expect-error not sure how to make TypeScript understand custom CSS properties\n                                '--reactist-btn-hover-fill': 'transparent',\n                            }}\n                        />\n                    </Column>\n                ) : null}\n            </Columns>\n        </Box>\n    )\n}\n\nexport { Alert }\nexport type { AlertProps }\n"],"names":["id","children","tone","closeLabel","onClose","React","createElement","Box","role","aria-live","borderRadius","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon","icon","paddingY","paddingRight","undefined","display","alignItems","content","IconButton","variant","size","onClick","aria-label","CloseIcon","style","--reactist-btn-hover-fill"],"mappings":"wnBA0BA,UAAeA,GAAEA,EAAFC,SAAMA,EAANC,KAAgBA,EAAhBC,WAAsBA,EAAtBC,QAAkCA,IAC7C,OACIC,EAAAC,cAACC,MAAG,CACAP,GAAIA,EACJQ,KAAK,QACKC,YAAA,SACVC,aAAa,OACbC,UAAW,CAACC,EAAAA,QAAOC,UAAWC,EAAaA,cAACF,UAAQ,OAAQV,KAE5DG,EAACC,cAAAS,WAAQC,MAAM,QAAQC,OAAO,UAC1BZ,EAAAC,cAACY,SAAM,CAACC,MAAM,WACVd,EAAAC,cAACc,YAAS,CAAClB,KAAMA,EAAMS,UAAWC,EAAM,QAACS,QAE7ChB,EAAAC,cAACY,EAAAA,OAAM,KACHb,EAAAC,cAACC,MACG,CAAAe,SAAS,SACTC,aAAyB,MAAXnB,GAAiC,MAAdD,OAAqBqB,EAAY,QAClEC,QAAQ,OACRC,WAAW,SACXf,UAAWC,EAAM,QAACe,SAEjB1B,IAGG,MAAXG,GAAiC,MAAdD,EAChBE,EAACC,cAAAY,SAAO,CAAAC,MAAM,WACVd,EAACC,cAAAsB,cACGC,QAAQ,aACRC,KAAK,QACLC,QAAS3B,EAAO4B,aACJ7B,EACZkB,KAAMhB,gBAAC4B,EAAAA,UAAS,MAChBC,MAAO,CAEHC,4BAA6B,kBAIzC"}

package/lib/alert/alert.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"_51a84fb3","tone-info":"_5649104a",icon:"_79fa06e2","tone-positive":"c67632e4","tone-caution":"_654ff216","tone-critical":"b1ee4ff1"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"d6be7fe9",content:"ad8ace2f",icon:"ab71a9dc","tone-info":"_043941a6","tone-positive":"f34b89d4","tone-caution":"a069ea07","tone-critical":"e505aabb"};
 //# sourceMappingURL=alert.module.css.js.map