@doist/reactist 20.2.0 → 21.0.0

package/es/index.js

@@ -19,11 +19,11 @@ export { Prose } from './prose/prose.js';
 export { ButtonLink } from './button-link/button-link.js';
 export { TextLink } from './text-link/text-link.js';
 export { CheckboxField } from './checkbox-field/checkbox-field.js';
+export { TextField } from './text-field/text-field.js';
 export { PasswordField } from './password-field/password-field.js';
 export { SelectField } from './select-field/select-field.js';
 export { SwitchField } from './switch-field/switch-field.js';
 export { TextArea } from './text-area/text-area.js';
-export { TextField } from './text-field/text-field.js';
 export { Avatar } from './avatar/avatar.js';
 export { Badge } from './badge/badge.js';
 export { Modal, ModalActions, ModalBody, ModalCloseButton, ModalFooter, ModalHeader } from './modal/modal.js';

package/es/password-field/password-field.js

@@ -1,75 +1,32 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { forwardRef, useRef, useState, createElement } from 'react';
-import { Box } from '../box/box.js';
-import { Tooltip } from '../tooltip/tooltip.js';
-import { useId } from '../utils/common-helpers.js';
-import { useForkRef } from 'ariakit-react-utils';
-import { BaseField } from '../base-field/base-field.js';
+import { forwardRef, useState, createElement } from 'react';
+import { Button } from '../button/button.js';
 import { PasswordVisibleIcon } from '../icons/password-visible-icon.js';
 import { PasswordHiddenIcon } from '../icons/password-hidden-icon.js';
-import styles from './password-field.module.css.js';
-import styles$1 from '../text-field/text-field.module.css.js';
+import { TextField } from '../text-field/text-field.js';
 
-const _excluded = ["variant", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "togglePasswordLabel", "hidden", "aria-describedby"];
+const _excluded = ["togglePasswordLabel"];
 const PasswordField = /*#__PURE__*/forwardRef(function PasswordField(_ref, ref) {
   let {
-    variant = 'default',
-    label,
-    secondaryLabel,
-    auxiliaryLabel,
-    hint,
-    message,
-    tone,
-    maxWidth,
-    togglePasswordLabel = 'Toggle password visibility',
-    hidden,
-    'aria-describedby': ariaDescribedBy
+    togglePasswordLabel = 'Toggle password visibility'
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  const id = useId(props.id);
-  const internalRef = useRef(null);
-  const inputRef = useForkRef(internalRef, ref);
   const [isPasswordVisible, setPasswordVisible] = useState(false);
-
-  function togglePasswordVisibility() {
-    var _internalRef$current;
-
-    setPasswordVisible(v => !v);
-    (_internalRef$current = internalRef.current) == null ? void 0 : _internalRef$current.focus();
-  }
-
-  return /*#__PURE__*/createElement(BaseField, {
-    variant: variant,
-    id: id,
-    label: label,
-    secondaryLabel: secondaryLabel,
-    auxiliaryLabel: auxiliaryLabel,
-    hint: hint,
-    message: message,
-    tone: tone,
-    maxWidth: maxWidth,
-    hidden: hidden,
-    "aria-describedby": ariaDescribedBy
-  }, extraProps => /*#__PURE__*/createElement(Box, {
-    display: "flex",
-    alignItems: "center",
-    className: [styles.inputWrapper, styles$1.inputWrapper, tone === 'error' ? styles$1.error : null, variant === 'bordered' ? styles$1.bordered : null]
-  }, /*#__PURE__*/createElement("input", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
-    ref: inputRef,
-    type: isPasswordVisible ? 'text' : 'password'
-  })), /*#__PURE__*/createElement(Tooltip, {
-    content: togglePasswordLabel
-  }, /*#__PURE__*/createElement("button", {
-    type: "button",
-    onClick: togglePasswordVisibility,
-    "aria-label": togglePasswordLabel,
-    tabIndex: -1
-  }, isPasswordVisible ? /*#__PURE__*/createElement(PasswordVisibleIcon, {
-    "aria-hidden": true
-  }) : /*#__PURE__*/createElement(PasswordHiddenIcon, {
-    "aria-hidden": true
-  })))));
+  const Icon = isPasswordVisible ? PasswordVisibleIcon : PasswordHiddenIcon;
+  return /*#__PURE__*/createElement(TextField, _objectSpread2(_objectSpread2({}, props), {}, {
+    ref: ref,
+    // @ts-expect-error TextField does not support type="password", so we override the type check here
+    type: isPasswordVisible ? 'text' : 'password',
+    endSlot: /*#__PURE__*/createElement(Button, {
+      variant: "quaternary",
+      icon: /*#__PURE__*/createElement(Icon, {
+        "aria-hidden": true
+      }),
+      "aria-label": togglePasswordLabel,
+      onClick: () => setPasswordVisible(v => !v)
+    })
+  }));
 });
 
 export { PasswordField };

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

@@ -1 +1 @@
-{"version":3,"file":"password-field.js","sources":["../../src/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-react-utils'\nimport { Tooltip } from '../tooltip'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport { useId } from '../utils/common-helpers'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport styles from './password-field.module.css'\nimport textFieldStyles from '../text-field/text-field.module.css'\n\nimport type { TextFieldProps } from '../text-field'\n\ntype PasswordFieldProps = Omit<TextFieldProps, 'type'> &\n    BaseFieldVariantProps & {\n        togglePasswordLabel?: string\n    }\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    {\n        variant = 'default',\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        togglePasswordLabel = 'Toggle password visibility',\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(props.id)\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const inputRef = useForkRef(internalRef, ref)\n\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n\n    function togglePasswordVisibility() {\n        setPasswordVisible((v) => !v)\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                        textFieldStyles.inputWrapper,\n                        tone === 'error' ? textFieldStyles.error : null,\n                        variant === 'bordered' ? textFieldStyles.bordered : null,\n                    ]}\n                >\n                    <input\n                        {...props}\n                        {...extraProps}\n                        ref={inputRef}\n                        type={isPasswordVisible ? 'text' : 'password'}\n                    />\n                    <Tooltip content={togglePasswordLabel}>\n                        <button\n                            type=\"button\"\n                            onClick={togglePasswordVisibility}\n                            aria-label={togglePasswordLabel}\n                            tabIndex={-1}\n                        >\n                            {isPasswordVisible ? (\n                                <PasswordVisibleIcon aria-hidden />\n                            ) : (\n                                <PasswordHiddenIcon aria-hidden />\n                            )}\n                        </button>\n                    </Tooltip>\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["PasswordField","React","ref","variant","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","togglePasswordLabel","hidden","ariaDescribedBy","props","id","useId","internalRef","inputRef","useForkRef","isPasswordVisible","setPasswordVisible","togglePasswordVisibility","v","current","focus","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","textFieldStyles","error","bordered","type","Tooltip","content","onClick","tabIndex","PasswordVisibleIcon","PasswordHiddenIcon"],"mappings":";;;;;;;;;;;;;MAoBMA,aAAa,gBAAGC,UAAA,CAAuD,SAASD,aAAT,OAezEE,GAfyE;MACzE;IACIC,OAAO,GAAG,SADd;IAEIC,KAFJ;IAGIC,cAHJ;IAIIC,cAJJ;IAKIC,IALJ;IAMIC,OANJ;IAOIC,IAPJ;IAQIC,QARJ;IASIC,mBAAmB,GAAG,4BAT1B;IAUIC,MAVJ;IAWI,oBAAoBC;;MACjBC;;EAIP,MAAMC,EAAE,GAAGC,KAAK,CAACF,KAAK,CAACC,EAAP,CAAhB;EACA,MAAME,WAAW,GAAGhB,MAAA,CAA+B,IAA/B,CAApB;EACA,MAAMiB,QAAQ,GAAGC,UAAU,CAACF,WAAD,EAAcf,GAAd,CAA3B;EAEA,MAAM,CAACkB,iBAAD,EAAoBC,kBAApB,IAA0CpB,QAAA,CAAe,KAAf,CAAhD;;EAEA,SAASqB,wBAAT;;;IACID,kBAAkB,CAAEE,CAAD,IAAO,CAACA,CAAT,CAAlB;IACA,wBAAAN,WAAW,CAACO,OAAZ,0CAAqBC,KAArB;;;EAGJ,oBACIxB,aAAA,CAACyB,SAAD;IACIvB,OAAO,EAAEA;IACTY,EAAE,EAAEA;IACJX,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,OAAO,EAAEA;IACTC,IAAI,EAAEA;IACNC,QAAQ,EAAEA;IACVE,MAAM,EAAEA;wBACUC;GAXtB,EAaMc,UAAD,iBACG1B,aAAA,CAAC2B,GAAD;IACIC,OAAO,EAAC;IACRC,UAAU,EAAC;IACXC,SAAS,EAAE,CACPC,MAAM,CAACC,YADA,EAEPC,QAAe,CAACD,YAFT,EAGPxB,IAAI,KAAK,OAAT,GAAmByB,QAAe,CAACC,KAAnC,GAA2C,IAHpC,EAIPhC,OAAO,KAAK,UAAZ,GAAyB+B,QAAe,CAACE,QAAzC,GAAoD,IAJ7C;GAHf,eAUInC,aAAA,QAAA,mDACQa,KADR,GAEQa,UAFR;IAGIzB,GAAG,EAAEgB,QAHT;IAIImB,IAAI,EAAEjB,iBAAiB,GAAG,MAAH,GAAY;KAd3C,eAgBInB,aAAA,CAACqC,OAAD;IAASC,OAAO,EAAE5B;GAAlB,eACIV,aAAA,SAAA;IACIoC,IAAI,EAAC;IACLG,OAAO,EAAElB;kBACGX;IACZ8B,QAAQ,EAAE,CAAC;GAJf,EAMKrB,iBAAiB,gBACdnB,aAAA,CAACyC,mBAAD;;GAAA,CADc,gBAGdzC,aAAA,CAAC0C,kBAAD;;GAAA,CATR,CADJ,CAhBJ,CAdR,CADJ;AAiDH,CA7EqB;;;;"}
+{"version":3,"file":"password-field.js","sources":["../../src/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport { TextField, TextFieldProps } from '../text-field'\nimport { Button } from '../button'\n\nimport type { BaseFieldVariantProps } from '../base-field'\n\ntype PasswordFieldProps = Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot'> &\n    BaseFieldVariantProps & {\n        togglePasswordLabel?: string\n    }\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    { togglePasswordLabel = 'Toggle password visibility', ...props },\n    ref,\n) {\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n    const Icon = isPasswordVisible ? PasswordVisibleIcon : PasswordHiddenIcon\n    return (\n        <TextField\n            {...props}\n            ref={ref}\n            // @ts-expect-error TextField does not support type=\"password\", so we override the type check here\n            type={isPasswordVisible ? 'text' : 'password'}\n            endSlot={\n                <Button\n                    variant=\"quaternary\"\n                    icon={<Icon aria-hidden />}\n                    aria-label={togglePasswordLabel}\n                    onClick={() => setPasswordVisible((v) => !v)}\n                />\n            }\n        />\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["PasswordField","React","ref","togglePasswordLabel","props","isPasswordVisible","setPasswordVisible","Icon","PasswordVisibleIcon","PasswordHiddenIcon","TextField","type","endSlot","Button","variant","icon","onClick","v"],"mappings":";;;;;;;;MAeMA,aAAa,gBAAGC,UAAA,CAAuD,SAASD,aAAT,OAEzEE,GAFyE;MACzE;IAAEC,mBAAmB,GAAG;;MAAiCC;;EAGzD,MAAM,CAACC,iBAAD,EAAoBC,kBAApB,IAA0CL,QAAA,CAAe,KAAf,CAAhD;EACA,MAAMM,IAAI,GAAGF,iBAAiB,GAAGG,mBAAH,GAAyBC,kBAAvD;EACA,oBACIR,aAAA,CAACS,SAAD,oCACQN,KADR;IAEIF,GAAG,EAAEA,GAFT;;IAIIS,IAAI,EAAEN,iBAAiB,GAAG,MAAH,GAAY,UAJvC;IAKIO,OAAO,eACHX,aAAA,CAACY,MAAD;MACIC,OAAO,EAAC;MACRC,IAAI,eAAEd,aAAA,CAACM,IAAD;;OAAA;oBACMJ;MACZa,OAAO,EAAE,MAAMV,kBAAkB,CAAEW,CAAD,IAAO,CAACA,CAAT;KAJrC;KAPZ;AAgBH,CAtBqB;;;;"}

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

@@ -5,7 +5,7 @@ import { BaseField } from '../base-field/base-field.js';
 import styles 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", "startIcon"];
+const _excluded = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "type", "maxWidth", "hidden", "aria-describedby", "startSlot", "endSlot"];
 const TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
   let {
     variant = 'default',
@@ -20,16 +20,18 @@ const TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
     maxWidth,
     hidden,
     'aria-describedby': ariaDescribedBy,
-    startIcon
+    startSlot,
+    endSlot
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
   const internalRef = useRef(null);
   const combinedRef = useMergeRefs([ref, internalRef]);
 
-  function focusOnIconClick() {
+  function handleClick(event) {
     var _internalRef$current;
 
+    if (event.currentTarget === combinedRef.current) return;
     (_internalRef$current = internalRef.current) == null ? void 0 : _internalRef$current.focus();
   }
 
@@ -48,18 +50,22 @@ const TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
   }, extraProps => /*#__PURE__*/createElement(Box, {
     display: "flex",
     alignItems: "center",
-    className: [styles.inputWrapper, tone === 'error' ? styles.error : null, variant === 'bordered' ? styles.bordered : null]
-  }, startIcon ? /*#__PURE__*/createElement(Box, {
+    className: [styles.inputWrapper, tone === 'error' ? styles.error : null, variant === 'bordered' ? styles.bordered : null],
+    onClick: handleClick
+  }, startSlot ? /*#__PURE__*/createElement(Box, {
+    className: styles.slot,
     display: "flex",
-    className: styles.startIcon,
-    onClick: focusOnIconClick,
-    marginRight: "-xsmall",
-    marginLeft: "small",
-    "aria-hidden": true
-  }, startIcon) : null, /*#__PURE__*/createElement("input", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
+    marginRight: variant === 'bordered' ? 'xsmall' : '-xsmall',
+    marginLeft: variant === 'bordered' ? '-xsmall' : 'xsmall'
+  }, startSlot) : null, /*#__PURE__*/createElement("input", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
     type: type,
     ref: combinedRef
-  }))));
+  })), endSlot ? /*#__PURE__*/createElement(Box, {
+    className: styles.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\ntype TextFieldProps = Omit<FieldComponentProps<HTMLInputElement>, 'type'> &\n    BaseFieldVariantProps & {\n        type?: TextFieldType\n        startIcon?: React.ReactChild\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        startIcon,\n        ...props\n    },\n    ref,\n) {\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    function focusOnIconClick() {\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                >\n                    {startIcon ? (\n                        <Box\n                            display=\"flex\"\n                            className={styles.startIcon}\n                            onClick={focusOnIconClick}\n                            marginRight=\"-xsmall\"\n                            marginLeft=\"small\"\n                            aria-hidden\n                        >\n                            {startIcon}\n                        </Box>\n                    ) : null}\n                    <input {...props} {...extraProps} type={type} ref={combinedRef} />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["TextField","React","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","type","maxWidth","hidden","ariaDescribedBy","startIcon","props","internalRef","combinedRef","useMergeRefs","focusOnIconClick","current","focus","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","error","bordered","onClick","marginRight","marginLeft"],"mappings":";;;;;;;;MAeMA,SAAS,gBAAGC,UAAA,CAAmD,SAASD,SAAT,OAiBjEE,GAjBiE;MACjE;IACIC,OAAO,GAAG,SADd;IAEIC,EAFJ;IAGIC,KAHJ;IAIIC,cAJJ;IAKIC,cALJ;IAMIC,IANJ;IAOIC,OAPJ;IAQIC,IARJ;IASIC,IAAI,GAAG,MATX;IAUIC,QAVJ;IAWIC,MAXJ;IAYI,oBAAoBC,eAZxB;IAaIC;;MACGC;;EAIP,MAAMC,WAAW,GAAGhB,MAAA,CAA+B,IAA/B,CAApB;EACA,MAAMiB,WAAW,GAAGC,YAAY,CAAC,CAACjB,GAAD,EAAMe,WAAN,CAAD,CAAhC;;EAEA,SAASG,gBAAT;;;IACI,wBAAAH,WAAW,CAACI,OAAZ,0CAAqBC,KAArB;;;EAGJ,oBACIrB,aAAA,CAACsB,SAAD;IACIpB,OAAO,EAAEA;IACTC,EAAE,EAAEA;IACJC,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,OAAO,EAAEA;IACTC,IAAI,EAAEA;IACNE,QAAQ,EAAEA;IACVC,MAAM,EAAEA;wBACUC;GAXtB,EAaMU,UAAD,iBACGvB,aAAA,CAACwB,GAAD;IACIC,OAAO,EAAC;IACRC,UAAU,EAAC;IACXC,SAAS,EAAE,CACPC,MAAM,CAACC,YADA,EAEPpB,IAAI,KAAK,OAAT,GAAmBmB,MAAM,CAACE,KAA1B,GAAkC,IAF3B,EAGP5B,OAAO,KAAK,UAAZ,GAAyB0B,MAAM,CAACG,QAAhC,GAA2C,IAHpC;GAHf,EASKjB,SAAS,gBACNd,aAAA,CAACwB,GAAD;IACIC,OAAO,EAAC;IACRE,SAAS,EAAEC,MAAM,CAACd;IAClBkB,OAAO,EAAEb;IACTc,WAAW,EAAC;IACZC,UAAU,EAAC;;GALf,EAQKpB,SARL,CADM,GAWN,IApBR,eAqBId,aAAA,QAAA,mDAAWe,KAAX,GAAsBQ,UAAtB;IAAkCb,IAAI,EAAEA,IAAxC;IAA8CT,GAAG,EAAEgB;KArBvD,CAdR,CADJ;AAyCH,CAnEiB;;;;"}
+{"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\ntype TextFieldProps = Omit<FieldComponentProps<HTMLInputElement>, 'type'> &\n    BaseFieldVariantProps & {\n        type?: TextFieldType\n        startSlot?: React.ReactChild\n        endSlot?: React.ReactChild\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","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","type","maxWidth","hidden","ariaDescribedBy","startSlot","endSlot","props","internalRef","combinedRef","useMergeRefs","handleClick","event","currentTarget","current","focus","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","error","bordered","onClick","slot","marginRight","marginLeft"],"mappings":";;;;;;;;MAgBMA,SAAS,gBAAGC,UAAA,CAAmD,SAASD,SAAT,OAkBjEE,GAlBiE;MACjE;IACIC,OAAO,GAAG,SADd;IAEIC,EAFJ;IAGIC,KAHJ;IAIIC,cAJJ;IAKIC,cALJ;IAMIC,IANJ;IAOIC,OAPJ;IAQIC,IARJ;IASIC,IAAI,GAAG,MATX;IAUIC,QAVJ;IAWIC,MAXJ;IAYI,oBAAoBC,eAZxB;IAaIC,SAbJ;IAcIC;;MACGC;;EAIP,MAAMC,WAAW,GAAGjB,MAAA,CAA+B,IAA/B,CAApB;EACA,MAAMkB,WAAW,GAAGC,YAAY,CAAC,CAAClB,GAAD,EAAMgB,WAAN,CAAD,CAAhC;;EAEA,SAASG,WAAT,CAAqBC,KAArB;;;IACI,IAAIA,KAAK,CAACC,aAAN,KAAwBJ,WAAW,CAACK,OAAxC,EAAiD;IACjD,wBAAAN,WAAW,CAACM,OAAZ,0CAAqBC,KAArB;;;EAGJ,oBACIxB,aAAA,CAACyB,SAAD;IACIvB,OAAO,EAAEA;IACTC,EAAE,EAAEA;IACJC,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,OAAO,EAAEA;IACTC,IAAI,EAAEA;IACNE,QAAQ,EAAEA;IACVC,MAAM,EAAEA;wBACUC;GAXtB,EAaMa,UAAD,iBACG1B,aAAA,CAAC2B,GAAD;IACIC,OAAO,EAAC;IACRC,UAAU,EAAC;IACXC,SAAS,EAAE,CACPC,MAAM,CAACC,YADA,EAEPvB,IAAI,KAAK,OAAT,GAAmBsB,MAAM,CAACE,KAA1B,GAAkC,IAF3B,EAGP/B,OAAO,KAAK,UAAZ,GAAyB6B,MAAM,CAACG,QAAhC,GAA2C,IAHpC;IAKXC,OAAO,EAAEf;GARb,EAUKN,SAAS,gBACNd,aAAA,CAAC2B,GAAD;IACIG,SAAS,EAAEC,MAAM,CAACK;IAClBR,OAAO,EAAC;IACRS,WAAW,EAAEnC,OAAO,KAAK,UAAZ,GAAyB,QAAzB,GAAoC;IACjDoC,UAAU,EAAEpC,OAAO,KAAK,UAAZ,GAAyB,SAAzB,GAAqC;GAJrD,EAMKY,SANL,CADM,GASN,IAnBR,eAoBId,aAAA,QAAA,mDAAWgB,KAAX,GAAsBU,UAAtB;IAAkChB,IAAI,EAAEA,IAAxC;IAA8CT,GAAG,EAAEiB;KApBvD,EAqBKH,OAAO,gBACJf,aAAA,CAAC2B,GAAD;IACIG,SAAS,EAAEC,MAAM,CAACK;IAClBR,OAAO,EAAC;IACRS,WAAW,EAAEnC,OAAO,KAAK,UAAZ,GAAyB,SAAzB,GAAqC;IAClDoC,UAAU,EAAEpC,OAAO,KAAK,UAAZ,GAAyB,QAAzB,GAAoC;GAJpD,EAMKa,OANL,CADI,GASJ,IA9BR,CAdR,CADJ;AAkDH,CA9EiB;;;;"}

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

@@ -1,4 +1,4 @@
-var modules_aaf25250 = {"inputWrapper":"fb09cd05","bordered":"f65f40dd","error":"_29118bf0","startIcon":"a40eb111"};
+var modules_aaf25250 = {"inputWrapper":"_6c84b26d","bordered":"_8522aec5","error":"d4d62845","slot":"_9c20ca38"};
 
 export default modules_aaf25250;
 //# sourceMappingURL=text-field.module.css.js.map

package/es/toast/static-toast.js

@@ -82,5 +82,5 @@ function ToastContentSlot({
   }, children);
 }
 
-export { StaticToast };
+export { StaticToast, isActionObject };
 //# sourceMappingURL=static-toast.js.map

package/es/toast/static-toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"static-toast.js","sources":["../../src/toast/static-toast.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Box } from '../box'\nimport { Button } from '../button'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\n\nimport styles from './toast.module.css'\n\ntype ToastActionObject = {\n    label: string\n    onClick: () => void\n}\n\ntype StaticToastProps = {\n    /**\n     * The message shown in the toast.\n     */\n    message: NonNullable<React.ReactNode>\n\n    /**\n     * An optional extra description that complements the main message shown in the toast.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An icon to be shown in front of the message.\n     */\n    icon?: React.ReactNode\n\n    /**\n     * The action to call when the user clicks on the dismiss button. If omitted, the dismiss button\n     * does not appear.\n     */\n    onDismiss?: () => void\n\n    /**\n     * The label for the button that dismisses the toast.\n     */\n    dismissLabel?: string\n\n    /**\n     * What to render in the action slot. Usually a button or link.\n     *\n     * You can also pass an object that containst the action label, and a function that performs the\n     * action. This is used by the toast component to render a button for you.\n     *\n     * In general, you should prefer the action object most of the time. But it is possible to pass\n     * a React element instead, if you need more control over what to render. For instance, you may\n     * want to render a link instead of a button.\n     *\n     * Keep in mind, though, that the default button rendered uses `variant=\"tertiary\"` and\n     * `size=\"small\"`. In most cases you should stick to the variants `tertiary` or `primary`, which\n     * are the ones that look better in the toast's dark background. And in all cases you should use\n     * size `small`.\n     */\n    action?: React.ReactElement | ToastActionObject\n}\n\n/**\n * A toast that shows a message, and an optional action associated with it.\n *\n * This component is generally not meant to be used directly. Most of the time you'll want to use\n * toasts generated via `useToasts` instead. However, this component is available in case you need\n * to take control of rendering a toast under different circumstances than that of notification-like\n * floating toasts.\n *\n * This component makes no assumptions outwardly about how it is positioned on the screen. That is,\n * it will not be shown floating or fixed to the viewport edges, as toasts normally show up. It only\n * provides the toast look and feel, but you are responsible for positioning it as you want.\n *\n * @see useToasts\n */\nconst StaticToast = React.forwardRef<HTMLDivElement, StaticToastProps>(function Toast(\n    { message, description, icon, action, onDismiss, dismissLabel = 'Close', ...props },\n    ref,\n) {\n    return (\n        <Box\n            ref={ref}\n            role=\"alert\"\n            aria-live=\"polite\"\n            borderRadius=\"full\"\n            width=\"fitContent\"\n            background=\"toast\"\n            display=\"flex\"\n            padding=\"large\"\n            alignItems=\"center\"\n            className={styles.toastContainer}\n            {...props}\n        >\n            {icon ? <ToastContentSlot>{icon}</ToastContentSlot> : null}\n\n            <Box flexGrow={1} maxWidth=\"small\">\n                {description ? (\n                    <Stack space=\"small\">\n                        <Text weight=\"bold\">{message} </Text>\n                        <Text>{description}</Text>\n                    </Stack>\n                ) : (\n                    <Text>{message}</Text>\n                )}\n            </Box>\n\n            {action ? (\n                <ToastContentSlot>\n                    {isActionObject(action) ? (\n                        <Button variant=\"tertiary\" size=\"small\" onClick={action.onClick}>\n                            {action.label}\n                        </Button>\n                    ) : (\n                        action\n                    )}\n                </ToastContentSlot>\n            ) : null}\n\n            {onDismiss ? (\n                <ToastContentSlot>\n                    <Button\n                        variant=\"quaternary\"\n                        size=\"small\"\n                        onClick={onDismiss}\n                        aria-label={dismissLabel}\n                        icon={<CloseIcon />}\n                    />\n                </ToastContentSlot>\n            ) : null}\n        </Box>\n    )\n})\n\nfunction isActionObject(action: StaticToastProps['action']): action is ToastActionObject {\n    return (\n        action != null &&\n        typeof action === 'object' &&\n        'label' in action &&\n        'onClick' in action &&\n        typeof action.label === 'string' &&\n        typeof action.onClick === 'function'\n    )\n}\n\nfunction ToastContentSlot({ children }: { children: React.ReactNode }) {\n    return (\n        <Box\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            marginX=\"-xsmall\"\n            marginY=\"-medium\"\n            className={styles.slot}\n        >\n            {children}\n        </Box>\n    )\n}\n\nexport { StaticToast }\nexport type { StaticToastProps }\n"],"names":["StaticToast","React","forwardRef","Toast","ref","message","description","icon","action","onDismiss","dismissLabel","props","Box","role","borderRadius","width","background","display","padding","alignItems","className","styles","toastContainer","ToastContentSlot","flexGrow","maxWidth","Stack","space","Text","weight","isActionObject","Button","variant","size","onClick","label","CloseIcon","children","justifyContent","marginX","marginY","slot"],"mappings":";;;;;;;;;;AA4DA;;;;;;;;;;;;;;;MAcMA,WAAW,gBAAGC,cAAK,CAACC,UAAN,CAAmD,SAASC,KAAT,OAEnEC,GAFmE;MACnE;IAAEC,OAAF;IAAWC,WAAX;IAAwBC,IAAxB;IAA8BC,MAA9B;IAAsCC,SAAtC;IAAiDC,YAAY,GAAG;;MAAYC;;EAG5E,oBACIV,4BAAA,CAACW,GAAD;IACIR,GAAG,EAAEA,GADT;IAEIS,IAAI,EAAC,OAFT;iBAGc,QAHd;IAIIC,YAAY,EAAC,MAJjB;IAKIC,KAAK,EAAC,YALV;IAMIC,UAAU,EAAC,OANf;IAOIC,OAAO,EAAC,MAPZ;IAQIC,OAAO,EAAC,OARZ;IASIC,UAAU,EAAC,QATf;IAUIC,SAAS,EAAEC,MAAM,CAACC;KACdX,KAXR,GAaKJ,IAAI,gBAAGN,4BAAA,CAACsB,gBAAD,MAAA,EAAmBhB,IAAnB,CAAH,GAAiD,IAb1D,eAeIN,4BAAA,CAACW,GAAD;IAAKY,QAAQ,EAAE;IAAGC,QAAQ,EAAC;GAA3B,EACKnB,WAAW,gBACRL,4BAAA,CAACyB,KAAD;IAAOC,KAAK,EAAC;GAAb,eACI1B,4BAAA,CAAC2B,IAAD;IAAMC,MAAM,EAAC;GAAb,EAAqBxB,OAArB,KAAA,CADJ,eAEIJ,4BAAA,CAAC2B,IAAD,MAAA,EAAOtB,WAAP,CAFJ,CADQ,gBAMRL,4BAAA,CAAC2B,IAAD,MAAA,EAAOvB,OAAP,CAPR,CAfJ,EA0BKG,MAAM,gBACHP,4BAAA,CAACsB,gBAAD,MAAA,EACKO,cAAc,CAACtB,MAAD,CAAd,gBACGP,4BAAA,CAAC8B,MAAD;IAAQC,OAAO,EAAC;IAAWC,IAAI,EAAC;IAAQC,OAAO,EAAE1B,MAAM,CAAC0B;GAAxD,EACK1B,MAAM,CAAC2B,KADZ,CADH,GAKG3B,MANR,CADG,GAUH,IApCR,EAsCKC,SAAS,gBACNR,4BAAA,CAACsB,gBAAD,MAAA,eACItB,4BAAA,CAAC8B,MAAD;IACIC,OAAO,EAAC;IACRC,IAAI,EAAC;IACLC,OAAO,EAAEzB;kBACGC;IACZH,IAAI,eAAEN,4BAAA,CAACmC,SAAD,MAAA;GALV,CADJ,CADM,GAUN,IAhDR,CADJ;AAoDH,CAxDmB;;AA0DpB,SAASN,cAAT,CAAwBtB,MAAxB;EACI,OACIA,MAAM,IAAI,IAAV,IACA,OAAOA,MAAP,KAAkB,QADlB,IAEA,WAAWA,MAFX,IAGA,aAAaA,MAHb,IAIA,OAAOA,MAAM,CAAC2B,KAAd,KAAwB,QAJxB,IAKA,OAAO3B,MAAM,CAAC0B,OAAd,KAA0B,UAN9B;AAQH;;AAED,SAASX,gBAAT,CAA0B;EAAEc;AAAF,CAA1B;EACI,oBACIpC,4BAAA,CAACW,GAAD;IACIK,OAAO,EAAC;IACRE,UAAU,EAAC;IACXmB,cAAc,EAAC;IACfC,OAAO,EAAC;IACRC,OAAO,EAAC;IACRpB,SAAS,EAAEC,MAAM,CAACoB;GANtB,EAQKJ,QARL,CADJ;AAYH;;;;"}
+{"version":3,"file":"static-toast.js","sources":["../../src/toast/static-toast.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Box } from '../box'\nimport { Button } from '../button'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\n\nimport styles from './toast.module.css'\n\ntype ToastActionObject = {\n    label: string\n    onClick: () => void\n}\n\ntype StaticToastProps = {\n    /**\n     * The message shown in the toast.\n     */\n    message: NonNullable<React.ReactNode>\n\n    /**\n     * An optional extra description that complements the main message shown in the toast.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An icon to be shown in front of the message.\n     */\n    icon?: React.ReactNode\n\n    /**\n     * The action to call when the user clicks on the dismiss button. If omitted, the dismiss button\n     * does not appear.\n     */\n    onDismiss?: () => void\n\n    /**\n     * The label for the button that dismisses the toast.\n     */\n    dismissLabel?: string\n\n    /**\n     * What to render in the action slot. Usually a button or link.\n     *\n     * You can also pass an object that containst the action label, and a function that performs the\n     * action. This is used by the toast component to render a button for you.\n     *\n     * In general, you should prefer the action object most of the time. But it is possible to pass\n     * a React element instead, if you need more control over what to render. For instance, you may\n     * want to render a link instead of a button.\n     *\n     * Keep in mind, though, that the default button rendered uses `variant=\"tertiary\"` and\n     * `size=\"small\"`. In most cases you should stick to the variants `tertiary` or `primary`, which\n     * are the ones that look better in the toast's dark background. And in all cases you should use\n     * size `small`.\n     */\n    action?: React.ReactElement | ToastActionObject\n}\n\n/**\n * A toast that shows a message, and an optional action associated with it.\n *\n * This component is generally not meant to be used directly. Most of the time you'll want to use\n * toasts generated via `useToasts` instead. However, this component is available in case you need\n * to take control of rendering a toast under different circumstances than that of notification-like\n * floating toasts.\n *\n * This component makes no assumptions outwardly about how it is positioned on the screen. That is,\n * it will not be shown floating or fixed to the viewport edges, as toasts normally show up. It only\n * provides the toast look and feel, but you are responsible for positioning it as you want.\n *\n * @see useToasts\n */\nconst StaticToast = React.forwardRef<HTMLDivElement, StaticToastProps>(function Toast(\n    { message, description, icon, action, onDismiss, dismissLabel = 'Close', ...props },\n    ref,\n) {\n    return (\n        <Box\n            ref={ref}\n            role=\"alert\"\n            aria-live=\"polite\"\n            borderRadius=\"full\"\n            width=\"fitContent\"\n            background=\"toast\"\n            display=\"flex\"\n            padding=\"large\"\n            alignItems=\"center\"\n            className={styles.toastContainer}\n            {...props}\n        >\n            {icon ? <ToastContentSlot>{icon}</ToastContentSlot> : null}\n\n            <Box flexGrow={1} maxWidth=\"small\">\n                {description ? (\n                    <Stack space=\"small\">\n                        <Text weight=\"bold\">{message} </Text>\n                        <Text>{description}</Text>\n                    </Stack>\n                ) : (\n                    <Text>{message}</Text>\n                )}\n            </Box>\n\n            {action ? (\n                <ToastContentSlot>\n                    {isActionObject(action) ? (\n                        <Button variant=\"tertiary\" size=\"small\" onClick={action.onClick}>\n                            {action.label}\n                        </Button>\n                    ) : (\n                        action\n                    )}\n                </ToastContentSlot>\n            ) : null}\n\n            {onDismiss ? (\n                <ToastContentSlot>\n                    <Button\n                        variant=\"quaternary\"\n                        size=\"small\"\n                        onClick={onDismiss}\n                        aria-label={dismissLabel}\n                        icon={<CloseIcon />}\n                    />\n                </ToastContentSlot>\n            ) : null}\n        </Box>\n    )\n})\n\nfunction isActionObject(action: StaticToastProps['action']): action is ToastActionObject {\n    return (\n        action != null &&\n        typeof action === 'object' &&\n        'label' in action &&\n        'onClick' in action &&\n        typeof action.label === 'string' &&\n        typeof action.onClick === 'function'\n    )\n}\n\nfunction ToastContentSlot({ children }: { children: React.ReactNode }) {\n    return (\n        <Box\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            marginX=\"-xsmall\"\n            marginY=\"-medium\"\n            className={styles.slot}\n        >\n            {children}\n        </Box>\n    )\n}\n\nexport { StaticToast, isActionObject }\nexport type { StaticToastProps }\n"],"names":["StaticToast","React","forwardRef","Toast","ref","message","description","icon","action","onDismiss","dismissLabel","props","Box","role","borderRadius","width","background","display","padding","alignItems","className","styles","toastContainer","ToastContentSlot","flexGrow","maxWidth","Stack","space","Text","weight","isActionObject","Button","variant","size","onClick","label","CloseIcon","children","justifyContent","marginX","marginY","slot"],"mappings":";;;;;;;;;;AA4DA;;;;;;;;;;;;;;;MAcMA,WAAW,gBAAGC,cAAK,CAACC,UAAN,CAAmD,SAASC,KAAT,OAEnEC,GAFmE;MACnE;IAAEC,OAAF;IAAWC,WAAX;IAAwBC,IAAxB;IAA8BC,MAA9B;IAAsCC,SAAtC;IAAiDC,YAAY,GAAG;;MAAYC;;EAG5E,oBACIV,4BAAA,CAACW,GAAD;IACIR,GAAG,EAAEA,GADT;IAEIS,IAAI,EAAC,OAFT;iBAGc,QAHd;IAIIC,YAAY,EAAC,MAJjB;IAKIC,KAAK,EAAC,YALV;IAMIC,UAAU,EAAC,OANf;IAOIC,OAAO,EAAC,MAPZ;IAQIC,OAAO,EAAC,OARZ;IASIC,UAAU,EAAC,QATf;IAUIC,SAAS,EAAEC,MAAM,CAACC;KACdX,KAXR,GAaKJ,IAAI,gBAAGN,4BAAA,CAACsB,gBAAD,MAAA,EAAmBhB,IAAnB,CAAH,GAAiD,IAb1D,eAeIN,4BAAA,CAACW,GAAD;IAAKY,QAAQ,EAAE;IAAGC,QAAQ,EAAC;GAA3B,EACKnB,WAAW,gBACRL,4BAAA,CAACyB,KAAD;IAAOC,KAAK,EAAC;GAAb,eACI1B,4BAAA,CAAC2B,IAAD;IAAMC,MAAM,EAAC;GAAb,EAAqBxB,OAArB,KAAA,CADJ,eAEIJ,4BAAA,CAAC2B,IAAD,MAAA,EAAOtB,WAAP,CAFJ,CADQ,gBAMRL,4BAAA,CAAC2B,IAAD,MAAA,EAAOvB,OAAP,CAPR,CAfJ,EA0BKG,MAAM,gBACHP,4BAAA,CAACsB,gBAAD,MAAA,EACKO,cAAc,CAACtB,MAAD,CAAd,gBACGP,4BAAA,CAAC8B,MAAD;IAAQC,OAAO,EAAC;IAAWC,IAAI,EAAC;IAAQC,OAAO,EAAE1B,MAAM,CAAC0B;GAAxD,EACK1B,MAAM,CAAC2B,KADZ,CADH,GAKG3B,MANR,CADG,GAUH,IApCR,EAsCKC,SAAS,gBACNR,4BAAA,CAACsB,gBAAD,MAAA,eACItB,4BAAA,CAAC8B,MAAD;IACIC,OAAO,EAAC;IACRC,IAAI,EAAC;IACLC,OAAO,EAAEzB;kBACGC;IACZH,IAAI,eAAEN,4BAAA,CAACmC,SAAD,MAAA;GALV,CADJ,CADM,GAUN,IAhDR,CADJ;AAoDH,CAxDmB;;AA0DpB,SAASN,cAAT,CAAwBtB,MAAxB;EACI,OACIA,MAAM,IAAI,IAAV,IACA,OAAOA,MAAP,KAAkB,QADlB,IAEA,WAAWA,MAFX,IAGA,aAAaA,MAHb,IAIA,OAAOA,MAAM,CAAC2B,KAAd,KAAwB,QAJxB,IAKA,OAAO3B,MAAM,CAAC0B,OAAd,KAA0B,UAN9B;AAQH;;AAED,SAASX,gBAAT,CAA0B;EAAEc;AAAF,CAA1B;EACI,oBACIpC,4BAAA,CAACW,GAAD;IACIK,OAAO,EAAC;IACRE,UAAU,EAAC;IACXmB,cAAc,EAAC;IACfC,OAAO,EAAC;IACRC,OAAO,EAAC;IACRpB,SAAS,EAAEC,MAAM,CAACoB;GANtB,EAQKJ,QARL,CADJ;AAYH;;;;"}

package/es/toast/use-toasts.js

@@ -4,7 +4,7 @@ import { Box } from '../box/box.js';
 import { Stack } from '../stack/stack.js';
 import { generateElementId } from '../utils/common-helpers.js';
 import styles from './toast.module.css.js';
-import { StaticToast } from './static-toast.js';
+import { isActionObject, StaticToast } from './static-toast.js';
 import { Portal } from 'ariakit/portal';
 import { useToastsAnimation } from './toast-animation.js';
 
@@ -33,24 +33,44 @@ const InternalToast = /*#__PURE__*/React__default.forwardRef(function InternalTo
     clearTimeout(timeoutRef.current);
     timeoutRef.current = undefined;
   }, []);
+  const removeToast = React__default.useCallback(function removeToast() {
+    onRemoveToast(toastId);
+    onDismiss == null ? void 0 : onDismiss();
+  }, [onDismiss, onRemoveToast, toastId]);
   React__default.useEffect(function setupAutoDismiss() {
     if (!timeoutRunning || !autoDismissDelay) return;
-    timeoutRef.current = window.setTimeout(() => {
-      onRemoveToast(toastId);
-      onDismiss == null ? void 0 : onDismiss();
-    }, autoDismissDelay * 1000);
+    timeoutRef.current = window.setTimeout(removeToast, autoDismissDelay * 1000);
     return stopTimeout;
-  }, [autoDismissDelay, onDismiss, onRemoveToast, toastId, stopTimeout, timeoutRunning]);
+  }, [autoDismissDelay, removeToast, stopTimeout, timeoutRunning]);
+  /**
+   * If the action is toast action object and not a custom element,
+   * the `onClick` property is wrapped in another handler responsible
+   * for removing the toast when the action is triggered.
+   */
+
+  const actionWithCustomActionHandler = React__default.useMemo(() => {
+    if (!isActionObject(action)) {
+      return action;
+    }
+
+    return _objectSpread2(_objectSpread2({}, action), {}, {
+      onClick: function handleActionClick() {
+        if (!action) {
+          return;
+        }
+
+        action.onClick();
+        removeToast();
+      }
+    });
+  }, [action, removeToast]);
   return /*#__PURE__*/React__default.createElement(StaticToast, {
     ref: ref,
     message: message,
     description: description,
     icon: icon,
-    action: action,
-    onDismiss: showDismissButton ? () => {
-      onDismiss == null ? void 0 : onDismiss();
-      onRemoveToast(toastId);
-    } : undefined,
+    action: actionWithCustomActionHandler,
+    onDismiss: showDismissButton ? removeToast : undefined,
     dismissLabel: dismissLabel,
     // @ts-expect-error
     onMouseEnter: stopTimeout,

package/es/toast/use-toasts.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-toasts.js","sources":["../../src/toast/use-toasts.tsx"],"sourcesContent":["import React from 'react'\nimport { Portal } from 'ariakit/portal'\n\nimport { generateElementId } from '../utils/common-helpers'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { StaticToast, StaticToastProps } from './static-toast'\n\nimport styles from './toast.module.css'\n\nimport type { Space } from '../utils/common-types'\nimport { useToastsAnimation } from './toast-animation'\n\n/**\n * The props needed to fire up a new notification toast.\n */\ntype ToastProps = StaticToastProps & {\n    /**\n     * The number of seconds the toast is expected to be shown before it is dismissed automatically,\n     * or false to disable auto-dismiss.\n     *\n     * It defaults to whatever is the autoDismissDelay set in the ToastsProvider.\n     */\n    autoDismissDelay?: number | false\n\n    /**\n     * The label for the button that dismisses the toast.\n     *\n     * It defaults to the value set in the ToastsProvider, but individual toasts can have a\n     * different value if needed.\n     */\n    dismissLabel?: string\n\n    /**\n     * Whether to show the dismiss button or not.\n     *\n     * Use this value with care. If combined with disabling `autoDismissDelay`, it may leave you\n     * with toasts that the user won't be able to dismiss at will. It then is your responsibility to\n     * dismiss the toast by calling the function returned by `showToast`.\n     */\n    showDismissButton?: boolean\n}\n\n//\n// InternalToast component and its props\n//\n\ntype InternalToastProps = Omit<ToastProps, 'autoDismissDelay' | 'dismissLabel'> &\n    Required<Pick<ToastProps, 'autoDismissDelay' | 'dismissLabel'>> & {\n        toastId: string\n        onRemoveToast: (toastId: string) => void\n    }\n\n/** @private */\nconst InternalToast = React.forwardRef<HTMLDivElement, InternalToastProps>(function InternalToast(\n    {\n        message,\n        description,\n        icon,\n        action,\n        autoDismissDelay,\n        dismissLabel,\n        showDismissButton = true,\n        toastId,\n        onDismiss,\n        onRemoveToast,\n    },\n    ref,\n) {\n    const [timeoutRunning, setTimeoutRunning] = React.useState(Boolean(autoDismissDelay))\n    const timeoutRef = React.useRef<number | undefined>()\n\n    const startTimeout = React.useCallback(function startTimeout() {\n        setTimeoutRunning(true)\n    }, [])\n\n    const stopTimeout = React.useCallback(function stopTimeout() {\n        setTimeoutRunning(false)\n        clearTimeout(timeoutRef.current)\n        timeoutRef.current = undefined\n    }, [])\n\n    React.useEffect(\n        function setupAutoDismiss() {\n            if (!timeoutRunning || !autoDismissDelay) return\n            timeoutRef.current = window.setTimeout(() => {\n                onRemoveToast(toastId)\n                onDismiss?.()\n            }, autoDismissDelay * 1000)\n            return stopTimeout\n        },\n        [autoDismissDelay, onDismiss, onRemoveToast, toastId, stopTimeout, timeoutRunning],\n    )\n\n    return (\n        <StaticToast\n            ref={ref}\n            message={message}\n            description={description}\n            icon={icon}\n            action={action}\n            onDismiss={\n                showDismissButton\n                    ? () => {\n                          onDismiss?.()\n                          onRemoveToast(toastId)\n                      }\n                    : undefined\n            }\n            dismissLabel={dismissLabel}\n            // @ts-expect-error\n            onMouseEnter={stopTimeout}\n            onMouseLeave={startTimeout}\n        />\n    )\n})\n\n//\n// Internal state and context\n//\n\ntype InternalToastEntry = Omit<InternalToastProps, 'onRemoveToast'>\ntype ToastsList = readonly InternalToastEntry[]\n\ntype ShowToastAction = (props: ToastProps) => () => void\nconst ToastsContext = React.createContext<ShowToastAction>(() => () => undefined)\n\n/**\n * The props needed by the ToastsProvider component.\n *\n * @see ToastsProvider\n */\ntype ToastsProviderProps = {\n    /**\n     * The default label to apply to toast dismiss buttons.\n     *\n     * This is useful in environments that need locatization, so you do not need to pass the same\n     * translated label every time you trigger a toast.\n     *\n     * However, you can still apply a different label to a specific toast, by passing a different\n     * value when calling showToast.\n     *\n     * @default 'Close'\n     */\n    defaultDismissLabel?: string\n\n    /**\n     * The default number of seconds after which the toast will be dismissed automatically.\n     *\n     * You can pass a different value to a specific toast when calling `showToast`. You can even\n     * pass `false` if you want a certain toast to never be dismissed automatically.\n     *\n     * @default 10 (seconds)\n     */\n    defaultAutoDismissDelay?: number\n\n    /**\n     * The padding used to separate the toasts from the viewport borders.\n     *\n     * @default 'large'\n     */\n    padding?: Space\n\n    /**\n     * The app wrapped by the provider.\n     */\n    children: NonNullable<React.ReactNode>\n}\n\n/**\n * Provides the state management and rendering of the toasts currently active.\n *\n * You need to render this near the top of your app components tree, in order to `useToasts`.\n *\n * @see useToasts\n */\nfunction ToastsProvider({\n    children,\n    padding = 'large',\n    defaultAutoDismissDelay = 10 /* seconds */,\n    defaultDismissLabel = 'Close',\n}: ToastsProviderProps) {\n    const [toasts, setToasts] = React.useState<ToastsList>([])\n    const { mappedRef, animateRemove } = useToastsAnimation()\n\n    const removeToast = React.useCallback(\n        function onRemoveToast(toastId: string) {\n            animateRemove(toastId, () => {\n                setToasts((list) => {\n                    const index = list.findIndex((n) => n.toastId === toastId)\n                    if (index < 0) return list\n                    const copy = [...list]\n                    copy.splice(index, 1)\n                    return copy\n                })\n            })\n        },\n        [animateRemove],\n    )\n\n    const showToast = React.useCallback(\n        function showToast(props: ToastProps) {\n            const toastId = generateElementId('toast')\n            const newToast: InternalToastEntry = {\n                autoDismissDelay: defaultAutoDismissDelay,\n                dismissLabel: defaultDismissLabel,\n                ...props,\n                toastId,\n            }\n            setToasts((list) => [...list, newToast])\n            return () => removeToast(toastId)\n        },\n        [defaultAutoDismissDelay, defaultDismissLabel, removeToast],\n    )\n\n    return (\n        <ToastsContext.Provider value={showToast}>\n            {children}\n            <Portal>\n                {toasts.length === 0 ? null : (\n                    <Box\n                        className={styles.stackedToastsView}\n                        position=\"fixed\"\n                        width=\"full\"\n                        paddingX={padding}\n                        paddingBottom={padding}\n                    >\n                        <Stack space=\"medium\">\n                            {toasts.map(({ toastId, ...props }) => (\n                                <InternalToast\n                                    key={toastId}\n                                    ref={mappedRef(toastId)}\n                                    toastId={toastId}\n                                    onRemoveToast={removeToast}\n                                    {...props}\n                                />\n                            ))}\n                        </Stack>\n                    </Box>\n                )}\n            </Portal>\n        </ToastsContext.Provider>\n    )\n}\n\n/**\n * Provides a function `showToast` that shows a new toast every time you call it.\n *\n * ```jsx\n * const showToast = useToasts()\n *\n * <button onClick={() => showToast({ message: 'Hello' })}>\n *   Say hello\n * </button>\n * ```\n *\n * All toasts fired via this function are rendered in a global fixed location, and stacked one on\n * top of the other.\n *\n * When called, `showToast` returns a function that dismisses the toast when called.\n *\n * @see ToastsProvider\n */\nfunction useToasts() {\n    return React.useContext(ToastsContext)\n}\n\n/**\n * Adds a toast to be rendered, stacked alongside any other currently active toasts.\n *\n * For most situations, you should prefer to use the `showToast` function obtained from `useToasts`.\n * This component is provided for convenience to render toasts in the markup, but it has some\n * peculiarities, which are discussed below.\n *\n * Internally, this calls `showToast`. It is provided for two reasons:\n *\n * 1. Convenience, when you want to fire a toast in markup/jsx code. Keep in mind, though, that\n *    toasts rendered in this way will be removed from view when the context where it is rendered\n *    is unmounted. Unlike toasts fired with `showToast`, which will normally be dismissed, either\n *    by the user or after a delay. They'll still be animated on their way out, though.\n * 2. When combined with disabling dismissing it (e.g. `showDismissButton={false}` and\n *    `autoDismissDelay={false}` it provides a way to show \"permanent\" toasts that only go away when\n *    the component ceases to be rendered).\n *\n * This is useful for cases when the consumer wants to control when a toast is visible, and to keep\n * it visible based on an app-specific condition.\n *\n * Something important to note about this component is that it triggers the toast based on the props\n * passed when first rendered, and it does not update the toast if these props change on subsequent\n * renders. In this sense, this is an imperative component, more than a descriptive one. This is\n * done to simplify the internals, and to keep it in line with how `showToast` works: you fire up a\n * toast imperatively, and you loose control over it. It remains rendered according to the props you\n * first passed.\n *\n * @see useToasts\n */\nfunction Toast(props: ToastProps) {\n    const showToast = useToasts()\n    const propsRef = React.useRef<ToastProps>(props)\n    React.useEffect(() => {\n        const dismissToast = showToast(propsRef.current)\n        return dismissToast\n    }, [showToast])\n    return null\n}\n\nexport { Toast, ToastsProvider, useToasts }\nexport type { ToastProps, ToastsProviderProps }\n"],"names":["InternalToast","React","forwardRef","message","description","icon","action","autoDismissDelay","dismissLabel","showDismissButton","toastId","onDismiss","onRemoveToast","ref","timeoutRunning","setTimeoutRunning","useState","Boolean","timeoutRef","useRef","startTimeout","useCallback","stopTimeout","clearTimeout","current","undefined","useEffect","setupAutoDismiss","window","setTimeout","StaticToast","onMouseEnter","onMouseLeave","ToastsContext","createContext","ToastsProvider","children","padding","defaultAutoDismissDelay","defaultDismissLabel","toasts","setToasts","mappedRef","animateRemove","useToastsAnimation","removeToast","list","index","findIndex","n","copy","splice","showToast","props","generateElementId","newToast","Provider","value","Portal","length","Box","className","styles","stackedToastsView","position","width","paddingX","paddingBottom","Stack","space","map","key","useToasts","useContext","Toast","propsRef","dismissToast"],"mappings":"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"}
+{"version":3,"file":"use-toasts.js","sources":["../../src/toast/use-toasts.tsx"],"sourcesContent":["import React from 'react'\nimport { Portal } from 'ariakit/portal'\n\nimport { generateElementId } from '../utils/common-helpers'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { isActionObject, StaticToast, StaticToastProps } from './static-toast'\n\nimport styles from './toast.module.css'\n\nimport type { Space } from '../utils/common-types'\nimport { useToastsAnimation } from './toast-animation'\n\n/**\n * The props needed to fire up a new notification toast.\n */\ntype ToastProps = StaticToastProps & {\n    /**\n     * The number of seconds the toast is expected to be shown before it is dismissed automatically,\n     * or false to disable auto-dismiss.\n     *\n     * It defaults to whatever is the autoDismissDelay set in the ToastsProvider.\n     */\n    autoDismissDelay?: number | false\n\n    /**\n     * The label for the button that dismisses the toast.\n     *\n     * It defaults to the value set in the ToastsProvider, but individual toasts can have a\n     * different value if needed.\n     */\n    dismissLabel?: string\n\n    /**\n     * Whether to show the dismiss button or not.\n     *\n     * Use this value with care. If combined with disabling `autoDismissDelay`, it may leave you\n     * with toasts that the user won't be able to dismiss at will. It then is your responsibility to\n     * dismiss the toast by calling the function returned by `showToast`.\n     */\n    showDismissButton?: boolean\n}\n\n//\n// InternalToast component and its props\n//\n\ntype InternalToastProps = Omit<ToastProps, 'autoDismissDelay' | 'dismissLabel'> &\n    Required<Pick<ToastProps, 'autoDismissDelay' | 'dismissLabel'>> & {\n        toastId: string\n        onRemoveToast: (toastId: string) => void\n    }\n\n/** @private */\nconst InternalToast = React.forwardRef<HTMLDivElement, InternalToastProps>(function InternalToast(\n    {\n        message,\n        description,\n        icon,\n        action,\n        autoDismissDelay,\n        dismissLabel,\n        showDismissButton = true,\n        toastId,\n        onDismiss,\n        onRemoveToast,\n    },\n    ref,\n) {\n    const [timeoutRunning, setTimeoutRunning] = React.useState(Boolean(autoDismissDelay))\n    const timeoutRef = React.useRef<number | undefined>()\n\n    const startTimeout = React.useCallback(function startTimeout() {\n        setTimeoutRunning(true)\n    }, [])\n\n    const stopTimeout = React.useCallback(function stopTimeout() {\n        setTimeoutRunning(false)\n        clearTimeout(timeoutRef.current)\n        timeoutRef.current = undefined\n    }, [])\n\n    const removeToast = React.useCallback(\n        function removeToast() {\n            onRemoveToast(toastId)\n            onDismiss?.()\n        },\n        [onDismiss, onRemoveToast, toastId],\n    )\n\n    React.useEffect(\n        function setupAutoDismiss() {\n            if (!timeoutRunning || !autoDismissDelay) return\n            timeoutRef.current = window.setTimeout(removeToast, autoDismissDelay * 1000)\n            return stopTimeout\n        },\n        [autoDismissDelay, removeToast, stopTimeout, timeoutRunning],\n    )\n\n    /**\n     * If the action is toast action object and not a custom element,\n     * the `onClick` property is wrapped in another handler responsible\n     * for removing the toast when the action is triggered.\n     */\n    const actionWithCustomActionHandler = React.useMemo(() => {\n        if (!isActionObject(action)) {\n            return action\n        }\n\n        return {\n            ...action,\n            onClick: function handleActionClick() {\n                if (!action) {\n                    return\n                }\n\n                action.onClick()\n                removeToast()\n            },\n        }\n    }, [action, removeToast])\n\n    return (\n        <StaticToast\n            ref={ref}\n            message={message}\n            description={description}\n            icon={icon}\n            action={actionWithCustomActionHandler}\n            onDismiss={showDismissButton ? removeToast : undefined}\n            dismissLabel={dismissLabel}\n            // @ts-expect-error\n            onMouseEnter={stopTimeout}\n            onMouseLeave={startTimeout}\n        />\n    )\n})\n\n//\n// Internal state and context\n//\n\ntype InternalToastEntry = Omit<InternalToastProps, 'onRemoveToast'>\ntype ToastsList = readonly InternalToastEntry[]\n\ntype ShowToastAction = (props: ToastProps) => () => void\nconst ToastsContext = React.createContext<ShowToastAction>(() => () => undefined)\n\n/**\n * The props needed by the ToastsProvider component.\n *\n * @see ToastsProvider\n */\ntype ToastsProviderProps = {\n    /**\n     * The default label to apply to toast dismiss buttons.\n     *\n     * This is useful in environments that need locatization, so you do not need to pass the same\n     * translated label every time you trigger a toast.\n     *\n     * However, you can still apply a different label to a specific toast, by passing a different\n     * value when calling showToast.\n     *\n     * @default 'Close'\n     */\n    defaultDismissLabel?: string\n\n    /**\n     * The default number of seconds after which the toast will be dismissed automatically.\n     *\n     * You can pass a different value to a specific toast when calling `showToast`. You can even\n     * pass `false` if you want a certain toast to never be dismissed automatically.\n     *\n     * @default 10 (seconds)\n     */\n    defaultAutoDismissDelay?: number\n\n    /**\n     * The padding used to separate the toasts from the viewport borders.\n     *\n     * @default 'large'\n     */\n    padding?: Space\n\n    /**\n     * The app wrapped by the provider.\n     */\n    children: NonNullable<React.ReactNode>\n}\n\n/**\n * Provides the state management and rendering of the toasts currently active.\n *\n * You need to render this near the top of your app components tree, in order to `useToasts`.\n *\n * @see useToasts\n */\nfunction ToastsProvider({\n    children,\n    padding = 'large',\n    defaultAutoDismissDelay = 10 /* seconds */,\n    defaultDismissLabel = 'Close',\n}: ToastsProviderProps) {\n    const [toasts, setToasts] = React.useState<ToastsList>([])\n    const { mappedRef, animateRemove } = useToastsAnimation()\n\n    const removeToast = React.useCallback(\n        function onRemoveToast(toastId: string) {\n            animateRemove(toastId, () => {\n                setToasts((list) => {\n                    const index = list.findIndex((n) => n.toastId === toastId)\n                    if (index < 0) return list\n                    const copy = [...list]\n                    copy.splice(index, 1)\n                    return copy\n                })\n            })\n        },\n        [animateRemove],\n    )\n\n    const showToast = React.useCallback(\n        function showToast(props: ToastProps) {\n            const toastId = generateElementId('toast')\n            const newToast: InternalToastEntry = {\n                autoDismissDelay: defaultAutoDismissDelay,\n                dismissLabel: defaultDismissLabel,\n                ...props,\n                toastId,\n            }\n            setToasts((list) => [...list, newToast])\n            return () => removeToast(toastId)\n        },\n        [defaultAutoDismissDelay, defaultDismissLabel, removeToast],\n    )\n\n    return (\n        <ToastsContext.Provider value={showToast}>\n            {children}\n            <Portal>\n                {toasts.length === 0 ? null : (\n                    <Box\n                        className={styles.stackedToastsView}\n                        position=\"fixed\"\n                        width=\"full\"\n                        paddingX={padding}\n                        paddingBottom={padding}\n                    >\n                        <Stack space=\"medium\">\n                            {toasts.map(({ toastId, ...props }) => (\n                                <InternalToast\n                                    key={toastId}\n                                    ref={mappedRef(toastId)}\n                                    toastId={toastId}\n                                    onRemoveToast={removeToast}\n                                    {...props}\n                                />\n                            ))}\n                        </Stack>\n                    </Box>\n                )}\n            </Portal>\n        </ToastsContext.Provider>\n    )\n}\n\n/**\n * Provides a function `showToast` that shows a new toast every time you call it.\n *\n * ```jsx\n * const showToast = useToasts()\n *\n * <button onClick={() => showToast({ message: 'Hello' })}>\n *   Say hello\n * </button>\n * ```\n *\n * All toasts fired via this function are rendered in a global fixed location, and stacked one on\n * top of the other.\n *\n * When called, `showToast` returns a function that dismisses the toast when called.\n *\n * @see ToastsProvider\n */\nfunction useToasts() {\n    return React.useContext(ToastsContext)\n}\n\n/**\n * Adds a toast to be rendered, stacked alongside any other currently active toasts.\n *\n * For most situations, you should prefer to use the `showToast` function obtained from `useToasts`.\n * This component is provided for convenience to render toasts in the markup, but it has some\n * peculiarities, which are discussed below.\n *\n * Internally, this calls `showToast`. It is provided for two reasons:\n *\n * 1. Convenience, when you want to fire a toast in markup/jsx code. Keep in mind, though, that\n *    toasts rendered in this way will be removed from view when the context where it is rendered\n *    is unmounted. Unlike toasts fired with `showToast`, which will normally be dismissed, either\n *    by the user or after a delay. They'll still be animated on their way out, though.\n * 2. When combined with disabling dismissing it (e.g. `showDismissButton={false}` and\n *    `autoDismissDelay={false}` it provides a way to show \"permanent\" toasts that only go away when\n *    the component ceases to be rendered).\n *\n * This is useful for cases when the consumer wants to control when a toast is visible, and to keep\n * it visible based on an app-specific condition.\n *\n * Something important to note about this component is that it triggers the toast based on the props\n * passed when first rendered, and it does not update the toast if these props change on subsequent\n * renders. In this sense, this is an imperative component, more than a descriptive one. This is\n * done to simplify the internals, and to keep it in line with how `showToast` works: you fire up a\n * toast imperatively, and you loose control over it. It remains rendered according to the props you\n * first passed.\n *\n * @see useToasts\n */\nfunction Toast(props: ToastProps) {\n    const showToast = useToasts()\n    const propsRef = React.useRef<ToastProps>(props)\n    React.useEffect(() => {\n        const dismissToast = showToast(propsRef.current)\n        return dismissToast\n    }, [showToast])\n    return null\n}\n\nexport { Toast, ToastsProvider, useToasts }\nexport type { ToastProps, ToastsProviderProps }\n"],"names":["InternalToast","React","forwardRef","message","description","icon","action","autoDismissDelay","dismissLabel","showDismissButton","toastId","onDismiss","onRemoveToast","ref","timeoutRunning","setTimeoutRunning","useState","Boolean","timeoutRef","useRef","startTimeout","useCallback","stopTimeout","clearTimeout","current","undefined","removeToast","useEffect","setupAutoDismiss","window","setTimeout","actionWithCustomActionHandler","useMemo","isActionObject","onClick","handleActionClick","StaticToast","onMouseEnter","onMouseLeave","ToastsContext","createContext","ToastsProvider","children","padding","defaultAutoDismissDelay","defaultDismissLabel","toasts","setToasts","mappedRef","animateRemove","useToastsAnimation","list","index","findIndex","n","copy","splice","showToast","props","generateElementId","newToast","Provider","value","Portal","length","Box","className","styles","stackedToastsView","position","width","paddingX","paddingBottom","Stack","space","map","key","useToasts","useContext","Toast","propsRef","dismissToast"],"mappings":"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"}

package/lib/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./box/box.js"),t=require("./columns/columns.js"),r=require("./divider/divider.js"),o=require("./inline/inline.js"),s=require("./stack/stack.js"),i=require("./hidden/hidden.js"),a=require("./hidden-visually/hidden-visually.js"),d=require("./tooltip/tooltip.js"),n=require("./button/button.js"),p=require("./alert/alert.js"),u=require("./banner/banner.js"),l=require("./loading/loading.js"),x=require("./notice/notice.js"),c=require("./text/text.js"),j=require("./toast/static-toast.js"),q=require("./toast/use-toasts.js"),M=require("./heading/heading.js"),b=require("./prose/prose.js"),T=require("./button-link/button-link.js"),m=require("./text-link/text-link.js"),k=require("./checkbox-field/checkbox-field.js"),B=require("./password-field/password-field.js"),D=require("./select-field/select-field.js"),f=require("./switch-field/switch-field.js"),S=require("./text-area/text-area.js"),g=require("./text-field/text-field.js"),h=require("./avatar/avatar.js"),C=require("./badge/badge.js"),y=require("./modal/modal.js"),P=require("./tabs/tabs.js"),v=require("./menu/menu.js"),F=require("./components/deprecated-button/index.js"),w=require("./components/deprecated-dropdown/index.js"),A=require("./components/color-picker/color-picker.js"),L=require("./components/color-picker/index.js"),H=require("./components/keyboard-shortcut/index.js"),O=require("./components/key-capturer/key-capturer.js"),I=require("./components/key-capturer/index.js"),E=require("./components/progress-bar/index.js"),K=require("./components/time/index.js"),R=require("./components/deprecated-input/index.js"),_=require("./components/deprecated-select/index.js"),G=require("./deprecated-modal/modal.js");exports.Box=e.Box,exports.Column=t.Column,exports.Columns=t.Columns,exports.Divider=r.Divider,exports.Inline=o.Inline,exports.Stack=s.Stack,exports.Hidden=i.Hidden,exports.HiddenVisually=a.HiddenVisually,exports.Tooltip=d.Tooltip,exports.Button=n.Button,exports.Alert=p.Alert,exports.Banner=u.Banner,exports.Loading=l.Loading,exports.Notice=x.Notice,exports.Text=c.Text,exports.StaticToast=j.StaticToast,exports.Toast=q.Toast,exports.ToastsProvider=q.ToastsProvider,exports.useToasts=q.useToasts,exports.Heading=M.Heading,exports.Prose=b.Prose,exports.ButtonLink=T.ButtonLink,exports.TextLink=m.TextLink,exports.CheckboxField=k.CheckboxField,exports.PasswordField=B.PasswordField,exports.SelectField=D.SelectField,exports.SwitchField=f.SwitchField,exports.TextArea=S.TextArea,exports.TextField=g.TextField,exports.Avatar=h.Avatar,exports.Badge=C.Badge,exports.Modal=y.Modal,exports.ModalActions=y.ModalActions,exports.ModalBody=y.ModalBody,exports.ModalCloseButton=y.ModalCloseButton,exports.ModalFooter=y.ModalFooter,exports.ModalHeader=y.ModalHeader,exports.Tab=P.Tab,exports.TabAwareSlot=P.TabAwareSlot,exports.TabList=P.TabList,exports.TabPanel=P.TabPanel,exports.Tabs=P.Tabs,exports.ContextMenuTrigger=v.ContextMenuTrigger,exports.Menu=v.Menu,exports.MenuButton=v.MenuButton,exports.MenuGroup=v.MenuGroup,exports.MenuItem=v.MenuItem,exports.MenuList=v.MenuList,exports.SubMenu=v.SubMenu,exports.DeprecatedButton=F.default,exports.DeprecatedDropdown=w.default,exports.COLORS=A.COLORS,exports.ColorPicker=L.default,exports.KeyboardShortcut=H.default,exports.SUPPORTED_KEYS=O.SUPPORTED_KEYS,exports.KeyCapturer=I.default,exports.ProgressBar=E.default,exports.Time=K.default,exports.DeprecatedInput=R.default,exports.DeprecatedSelect=_.default,exports.DeprecatedModal=G.DeprecatedModal,exports.DeprecatedModalActions=G.DeprecatedModalActions,exports.DeprecatedModalBody=G.DeprecatedModalBody,exports.DeprecatedModalCloseButton=G.DeprecatedModalCloseButton,exports.DeprecatedModalFooter=G.DeprecatedModalFooter,exports.DeprecatedModalHeader=G.DeprecatedModalHeader;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./box/box.js"),t=require("./columns/columns.js"),r=require("./divider/divider.js"),o=require("./inline/inline.js"),s=require("./stack/stack.js"),i=require("./hidden/hidden.js"),a=require("./hidden-visually/hidden-visually.js"),d=require("./tooltip/tooltip.js"),n=require("./button/button.js"),p=require("./alert/alert.js"),u=require("./banner/banner.js"),l=require("./loading/loading.js"),x=require("./notice/notice.js"),c=require("./text/text.js"),j=require("./toast/static-toast.js"),q=require("./toast/use-toasts.js"),M=require("./heading/heading.js"),b=require("./prose/prose.js"),T=require("./button-link/button-link.js"),m=require("./text-link/text-link.js"),k=require("./checkbox-field/checkbox-field.js"),B=require("./text-field/text-field.js"),D=require("./password-field/password-field.js"),f=require("./select-field/select-field.js"),S=require("./switch-field/switch-field.js"),g=require("./text-area/text-area.js"),h=require("./avatar/avatar.js"),C=require("./badge/badge.js"),y=require("./modal/modal.js"),P=require("./tabs/tabs.js"),v=require("./menu/menu.js"),F=require("./components/deprecated-button/index.js"),w=require("./components/deprecated-dropdown/index.js"),A=require("./components/color-picker/color-picker.js"),L=require("./components/color-picker/index.js"),H=require("./components/keyboard-shortcut/index.js"),O=require("./components/key-capturer/key-capturer.js"),I=require("./components/key-capturer/index.js"),E=require("./components/progress-bar/index.js"),K=require("./components/time/index.js"),R=require("./components/deprecated-input/index.js"),_=require("./components/deprecated-select/index.js"),G=require("./deprecated-modal/modal.js");exports.Box=e.Box,exports.Column=t.Column,exports.Columns=t.Columns,exports.Divider=r.Divider,exports.Inline=o.Inline,exports.Stack=s.Stack,exports.Hidden=i.Hidden,exports.HiddenVisually=a.HiddenVisually,exports.Tooltip=d.Tooltip,exports.Button=n.Button,exports.Alert=p.Alert,exports.Banner=u.Banner,exports.Loading=l.Loading,exports.Notice=x.Notice,exports.Text=c.Text,exports.StaticToast=j.StaticToast,exports.Toast=q.Toast,exports.ToastsProvider=q.ToastsProvider,exports.useToasts=q.useToasts,exports.Heading=M.Heading,exports.Prose=b.Prose,exports.ButtonLink=T.ButtonLink,exports.TextLink=m.TextLink,exports.CheckboxField=k.CheckboxField,exports.TextField=B.TextField,exports.PasswordField=D.PasswordField,exports.SelectField=f.SelectField,exports.SwitchField=S.SwitchField,exports.TextArea=g.TextArea,exports.Avatar=h.Avatar,exports.Badge=C.Badge,exports.Modal=y.Modal,exports.ModalActions=y.ModalActions,exports.ModalBody=y.ModalBody,exports.ModalCloseButton=y.ModalCloseButton,exports.ModalFooter=y.ModalFooter,exports.ModalHeader=y.ModalHeader,exports.Tab=P.Tab,exports.TabAwareSlot=P.TabAwareSlot,exports.TabList=P.TabList,exports.TabPanel=P.TabPanel,exports.Tabs=P.Tabs,exports.ContextMenuTrigger=v.ContextMenuTrigger,exports.Menu=v.Menu,exports.MenuButton=v.MenuButton,exports.MenuGroup=v.MenuGroup,exports.MenuItem=v.MenuItem,exports.MenuList=v.MenuList,exports.SubMenu=v.SubMenu,exports.DeprecatedButton=F.default,exports.DeprecatedDropdown=w.default,exports.COLORS=A.COLORS,exports.ColorPicker=L.default,exports.KeyboardShortcut=H.default,exports.SUPPORTED_KEYS=O.SUPPORTED_KEYS,exports.KeyCapturer=I.default,exports.ProgressBar=E.default,exports.Time=K.default,exports.DeprecatedInput=R.default,exports.DeprecatedSelect=_.default,exports.DeprecatedModal=G.DeprecatedModal,exports.DeprecatedModalActions=G.DeprecatedModalActions,exports.DeprecatedModalBody=G.DeprecatedModalBody,exports.DeprecatedModalCloseButton=G.DeprecatedModalCloseButton,exports.DeprecatedModalFooter=G.DeprecatedModalFooter,exports.DeprecatedModalHeader=G.DeprecatedModalHeader;
 //# sourceMappingURL=index.js.map

package/lib/password-field/password-field.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { BaseFieldVariantProps } from '../base-field';
-import type { TextFieldProps } from '../text-field';
-declare type PasswordFieldProps = Omit<TextFieldProps, 'type'> & BaseFieldVariantProps & {
+import { TextFieldProps } from '../text-field';
+import type { BaseFieldVariantProps } from '../base-field';
+declare type PasswordFieldProps = Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot'> & BaseFieldVariantProps & {
     togglePasswordLabel?: string;
 };
-declare const PasswordField: React.ForwardRefExoticComponent<Pick<PasswordFieldProps, "id" | "hidden" | "aria-describedby" | "children" | "variant" | "label" | "secondaryLabel" | "auxiliaryLabel" | "message" | "tone" | "hint" | "maxWidth" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "startIcon" | "togglePasswordLabel"> & React.RefAttributes<HTMLInputElement>>;
+declare const PasswordField: React.ForwardRefExoticComponent<Pick<PasswordFieldProps, "id" | "hidden" | "aria-describedby" | "children" | "variant" | "label" | "secondaryLabel" | "auxiliaryLabel" | "message" | "tone" | "hint" | "maxWidth" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "togglePasswordLabel"> & React.RefAttributes<HTMLInputElement>>;
 export { PasswordField };
 export type { PasswordFieldProps };

package/lib/password-field/password-field.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),a=require("../box/box.js"),t=require("../tooltip/tooltip.js"),i=require("../utils/common-helpers.js"),s=require("ariakit-react-utils"),l=require("../base-field/base-field.js"),o=require("../icons/password-visible-icon.js"),d=require("../icons/password-hidden-icon.js"),n=require("./password-field.module.css.js"),u=require("../text-field/text-field.module.css.js");const c=["variant","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","togglePasswordLabel","hidden","aria-describedby"];exports.PasswordField=r.forwardRef((function(b,p){let{variant:f="default",label:m,secondaryLabel:x,auxiliaryLabel:j,hint:y,message:h,tone:g,maxWidth:q,togglePasswordLabel:w="Toggle password visibility",hidden:v,"aria-describedby":L}=b,P=e.objectWithoutProperties(b,c);const E=i.useId(P.id),W=r.useRef(null),I=s.useForkRef(W,p),[S,_]=r.useState(!1);function k(){var e;_(e=>!e),null==(e=W.current)||e.focus()}return r.createElement(l.BaseField,{variant:f,id:E,label:m,secondaryLabel:x,auxiliaryLabel:j,hint:y,message:h,tone:g,maxWidth:q,hidden:v,"aria-describedby":L},i=>r.createElement(a.Box,{display:"flex",alignItems:"center",className:[n.default.inputWrapper,u.default.inputWrapper,"error"===g?u.default.error:null,"bordered"===f?u.default.bordered:null]},r.createElement("input",e.objectSpread2(e.objectSpread2(e.objectSpread2({},P),i),{},{ref:I,type:S?"text":"password"})),r.createElement(t.Tooltip,{content:w},r.createElement("button",{type:"button",onClick:k,"aria-label":w,tabIndex:-1},r.createElement(S?o.PasswordVisibleIcon:d.PasswordHiddenIcon,{"aria-hidden":!0})))))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../button/button.js"),o=require("../icons/password-visible-icon.js"),s=require("../icons/password-hidden-icon.js"),i=require("../text-field/text-field.js");const a=["togglePasswordLabel"];exports.PasswordField=r.forwardRef((function(l,n){let{togglePasswordLabel:d="Toggle password visibility"}=l,c=e.objectWithoutProperties(l,a);const[u,b]=r.useState(!1),p=u?o.PasswordVisibleIcon:s.PasswordHiddenIcon;return r.createElement(i.TextField,e.objectSpread2(e.objectSpread2({},c),{},{ref:n,type:u?"text":"password",endSlot:r.createElement(t.Button,{variant:"quaternary",icon:r.createElement(p,{"aria-hidden":!0}),"aria-label":d,onClick:()=>b(e=>!e)})}))}));
 //# sourceMappingURL=password-field.js.map

package/lib/password-field/password-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"password-field.js","sources":["../../src/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-react-utils'\nimport { Tooltip } from '../tooltip'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport { useId } from '../utils/common-helpers'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport styles from './password-field.module.css'\nimport textFieldStyles from '../text-field/text-field.module.css'\n\nimport type { TextFieldProps } from '../text-field'\n\ntype PasswordFieldProps = Omit<TextFieldProps, 'type'> &\n    BaseFieldVariantProps & {\n        togglePasswordLabel?: string\n    }\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    {\n        variant = 'default',\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        togglePasswordLabel = 'Toggle password visibility',\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(props.id)\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const inputRef = useForkRef(internalRef, ref)\n\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n\n    function togglePasswordVisibility() {\n        setPasswordVisible((v) => !v)\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                        textFieldStyles.inputWrapper,\n                        tone === 'error' ? textFieldStyles.error : null,\n                        variant === 'bordered' ? textFieldStyles.bordered : null,\n                    ]}\n                >\n                    <input\n                        {...props}\n                        {...extraProps}\n                        ref={inputRef}\n                        type={isPasswordVisible ? 'text' : 'password'}\n                    />\n                    <Tooltip content={togglePasswordLabel}>\n                        <button\n                            type=\"button\"\n                            onClick={togglePasswordVisibility}\n                            aria-label={togglePasswordLabel}\n                            tabIndex={-1}\n                        >\n                            {isPasswordVisible ? (\n                                <PasswordVisibleIcon aria-hidden />\n                            ) : (\n                                <PasswordHiddenIcon aria-hidden />\n                            )}\n                        </button>\n                    </Tooltip>\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["React","ref","variant","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","togglePasswordLabel","hidden","aria-describedby","ariaDescribedBy","props","id","useId","internalRef","inputRef","useForkRef","isPasswordVisible","setPasswordVisible","togglePasswordVisibility","v","current","focus","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","textFieldStyles","error","bordered","type","Tooltip","content","onClick","tabIndex","PasswordVisibleIcon","PasswordHiddenIcon"],"mappings":"uqBAoBsBA,cAAuD,WAezEC,OAdAC,QACIA,EAAU,UADdC,MAEIA,EAFJC,eAGIA,EAHJC,eAIIA,EAJJC,KAKIA,EALJC,QAMIA,EANJC,KAOIA,EAPJC,SAQIA,EARJC,oBASIA,EAAsB,6BAT1BC,OAUIA,EACAC,mBAAoBC,KACjBC,iCAIP,MAAMC,EAAKC,QAAMF,EAAMC,IACjBE,EAAcjB,SAA+B,MAC7CkB,EAAWC,aAAWF,EAAahB,IAElCmB,EAAmBC,GAAsBrB,YAAe,GAE/D,SAASsB,UACLD,EAAoBE,IAAOA,YAC3BN,EAAYO,YAASC,QAGzB,OACIzB,gBAAC0B,aACGxB,QAASA,EACTa,GAAIA,EACJZ,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNC,SAAUA,EACVE,OAAQA,qBACUE,GAEhBc,GACE3B,gBAAC4B,OACGC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,UAAOC,aACPC,UAAgBD,aACP,UAATzB,EAAmB0B,UAAgBC,MAAQ,KAC/B,aAAZjC,EAAyBgC,UAAgBE,SAAW,OAGxDpC,2EACQc,GACAa,OACJ1B,IAAKiB,EACLmB,KAAMjB,EAAoB,OAAS,cAEvCpB,gBAACsC,WAAQC,QAAS7B,GACdV,0BACIqC,KAAK,SACLG,QAASlB,eACGZ,EACZ+B,UAAW,GAGPzC,gBADHoB,EACIsB,sBAEAC"}
+{"version":3,"file":"password-field.js","sources":["../../src/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport { TextField, TextFieldProps } from '../text-field'\nimport { Button } from '../button'\n\nimport type { BaseFieldVariantProps } from '../base-field'\n\ntype PasswordFieldProps = Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot'> &\n    BaseFieldVariantProps & {\n        togglePasswordLabel?: string\n    }\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    { togglePasswordLabel = 'Toggle password visibility', ...props },\n    ref,\n) {\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n    const Icon = isPasswordVisible ? PasswordVisibleIcon : PasswordHiddenIcon\n    return (\n        <TextField\n            {...props}\n            ref={ref}\n            // @ts-expect-error TextField does not support type=\"password\", so we override the type check here\n            type={isPasswordVisible ? 'text' : 'password'}\n            endSlot={\n                <Button\n                    variant=\"quaternary\"\n                    icon={<Icon aria-hidden />}\n                    aria-label={togglePasswordLabel}\n                    onClick={() => setPasswordVisible((v) => !v)}\n                />\n            }\n        />\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["React","ref","togglePasswordLabel","props","isPasswordVisible","setPasswordVisible","Icon","PasswordVisibleIcon","PasswordHiddenIcon","TextField","type","endSlot","Button","variant","icon","onClick","v"],"mappings":"8WAesBA,cAAuD,WAEzEC,OADAC,oBAAEA,EAAsB,gCAAiCC,iCAGzD,MAAOC,EAAmBC,GAAsBL,YAAe,GACzDM,EAAOF,EAAoBG,sBAAsBC,qBACvD,OACIR,gBAACS,+CACON,OACJF,IAAKA,EAELS,KAAMN,EAAoB,OAAS,WACnCO,QACIX,gBAACY,UACGC,QAAQ,aACRC,KAAMd,gBAACM,mCACKJ,EACZa,QAAS,IAAMV,EAAoBW,IAAOA"}

package/lib/text-field/text-field.d.ts

@@ -4,8 +4,9 @@ import type { FieldComponentProps } from '../base-field';
 declare type TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url';
 declare type TextFieldProps = Omit<FieldComponentProps<HTMLInputElement>, 'type'> & BaseFieldVariantProps & {
     type?: TextFieldType;
-    startIcon?: React.ReactChild;
+    startSlot?: React.ReactChild;
+    endSlot?: React.ReactChild;
 };
-declare const TextField: React.ForwardRefExoticComponent<Pick<TextFieldProps, "id" | "hidden" | "aria-describedby" | "children" | "variant" | "label" | "secondaryLabel" | "auxiliaryLabel" | "message" | "tone" | "hint" | "maxWidth" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "startIcon"> & React.RefAttributes<HTMLInputElement>>;
+declare const TextField: React.ForwardRefExoticComponent<Pick<TextFieldProps, "id" | "hidden" | "aria-describedby" | "children" | "variant" | "label" | "secondaryLabel" | "auxiliaryLabel" | "message" | "tone" | "hint" | "maxWidth" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "startSlot" | "endSlot"> & React.RefAttributes<HTMLInputElement>>;
 export { TextField };
 export type { TextFieldProps, TextFieldType };