@doist/reactist 28.1.1 → 28.1.2

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

@@ -31,31 +31,13 @@ const TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
   const containerRef = React.useRef(null);
   const internalRef = React.useRef(null);
   const combinedRef = useMergeRefs([ref, internalRef]);
+  useAutoExpand({
+    value,
+    autoExpand,
+    containerRef,
+    internalRef
+  });
   const textAreaClassName = classNames([autoExpand ? modules_2728c236.disableResize : null, disableResize ? modules_2728c236.disableResize : null]);
-  React.useEffect(function setupAutoExpand() {
-    const containerElement = containerRef.current;
-
-    function handleAutoExpand(value) {
-      if (containerElement) {
-        containerElement.dataset.replicatedValue = value;
-      }
-    }
-
-    function handleInput(event) {
-      handleAutoExpand(event.currentTarget.value);
-    }
-
-    const textAreaElement = internalRef.current;
-
-    if (!textAreaElement || !autoExpand) {
-      return undefined;
-    } // Apply change initially, in case the text area has a non-empty initial value
-
-
-    handleAutoExpand(textAreaElement.value);
-    textAreaElement.addEventListener('input', handleInput);
-    return () => textAreaElement.removeEventListener('input', handleInput);
-  }, [autoExpand]);
   return /*#__PURE__*/React.createElement(BaseField, {
     variant: variant,
     id: id,
@@ -93,5 +75,49 @@ const TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
   });
 });
 
+function useAutoExpand({
+  value,
+  autoExpand,
+  containerRef,
+  internalRef
+}) {
+  const isControlled = value !== undefined;
+  React.useEffect(function setupAutoExpandWhenUncontrolled() {
+    const textAreaElement = internalRef.current;
+
+    if (!textAreaElement || !autoExpand || isControlled) {
+      return undefined;
+    }
+
+    const containerElement = containerRef.current;
+
+    function handleAutoExpand(value) {
+      if (containerElement) {
+        containerElement.dataset.replicatedValue = value;
+      }
+    }
+
+    function handleInput(event) {
+      handleAutoExpand(event.currentTarget.value);
+    } // Apply change initially, in case the text area has a non-empty initial value
+
+
+    handleAutoExpand(textAreaElement.value);
+    textAreaElement.addEventListener('input', handleInput);
+    return () => textAreaElement.removeEventListener('input', handleInput);
+  }, [autoExpand, containerRef, internalRef, isControlled]);
+  React.useEffect(function setupAutoExpandWhenControlled() {
+    if (!isControlled) {
+      return;
+    }
+
+    const containerElement = containerRef.current;
+
+    if (containerElement) {
+      containerElement.dataset.replicatedValue = value;
+    }
+  }, [value, containerRef, isControlled]);
+}
+
 export { TextArea };
 //# sourceMappingURL=text-area.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sources":["../../src/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ninterface TextAreaProps\n    extends Omit<FieldComponentProps<HTMLTextAreaElement>, 'characterCountPosition'>,\n        Omit<BaseFieldVariantProps, 'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition'> {\n    /**\n     * The number of visible text lines for the text area.\n     *\n     * If it is specified, it must be a positive integer. If it is not specified, the default\n     * value is 2 (set by the browser).\n     *\n     * When `autoExpand` is true, this value serves the purpose of specifying the minimum number\n     * of rows that the textarea will shrink to when the content is not large enough to make it\n     * expand.\n     *\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n     */\n    rows?: number\n\n    /**\n     * If `true`, the textarea will be automatically resized to fit the content, and the ability to\n     * manually resize the textarea will be disabled.\n     */\n    autoExpand?: boolean\n\n    /**\n     * If `true`, the ability to manually resize the textarea will be disabled.\n     *\n     * When `autoExpand` is true, this property serves no purpose, because the ability to manually\n     * resize the textarea is always disabled when `autoExpand` is true.\n     */\n    disableResize?: boolean\n}\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\n        disableResize = false,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    const textAreaClassName = classNames([\n        autoExpand ? styles.disableResize : null,\n        disableResize ? styles.disableResize : null,\n    ])\n\n    React.useEffect(\n        function setupAutoExpand() {\n            const containerElement = containerRef.current\n\n            function handleAutoExpand(value: string) {\n                if (containerElement) {\n                    containerElement.dataset.replicatedValue = value\n                }\n            }\n\n            function handleInput(event: Event) {\n                handleAutoExpand((event.currentTarget as HTMLTextAreaElement).value)\n            }\n\n            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand) {\n                return undefined\n            }\n\n            // Apply change initially, in case the text area has a non-empty initial value\n            handleAutoExpand(textAreaElement.value)\n\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand],\n    )\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            className={[\n                styles.textAreaContainer,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n            maxLength={maxLength}\n        >\n            {({ onChange, ...extraProps }) => (\n                <Box\n                    width=\"full\"\n                    display=\"flex\"\n                    className={styles.innerContainer}\n                    ref={containerRef}\n                >\n                    <textarea\n                        {...props}\n                        {...extraProps}\n                        ref={combinedRef}\n                        rows={rows}\n                        className={textAreaClassName}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["TextArea","React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","ariaDescribedBy","rows","autoExpand","disableResize","onChange","originalOnChange","props","containerRef","useRef","internalRef","combinedRef","useMergeRefs","textAreaClassName","classNames","styles","useEffect","setupAutoExpand","containerElement","current","handleAutoExpand","dataset","replicatedValue","handleInput","event","currentTarget","textAreaElement","undefined","addEventListener","removeEventListener","createElement","BaseField","className","textAreaContainer","error","bordered","extraProps","Box","width","display","innerContainer","_objectSpread"],"mappings":"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"}
+{"version":3,"file":"text-area.js","sources":["../../src/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ninterface TextAreaProps\n    extends Omit<FieldComponentProps<HTMLTextAreaElement>, 'characterCountPosition'>,\n        Omit<\n            BaseFieldVariantProps,\n            'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition' | 'value'\n        > {\n    /**\n     * The value of the text area.\n     *\n     * If this prop is not specified, the text area will be uncontrolled and the component will\n     * manage its own state.\n     */\n    value?: string\n\n    /**\n     * The number of visible text lines for the text area.\n     *\n     * If it is specified, it must be a positive integer. If it is not specified, the default\n     * value is 2 (set by the browser).\n     *\n     * When `autoExpand` is true, this value serves the purpose of specifying the minimum number\n     * of rows that the textarea will shrink to when the content is not large enough to make it\n     * expand.\n     *\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n     */\n    rows?: number\n\n    /**\n     * If `true`, the textarea will be automatically resized to fit the content, and the ability to\n     * manually resize the textarea will be disabled.\n     */\n    autoExpand?: boolean\n\n    /**\n     * If `true`, the ability to manually resize the textarea will be disabled.\n     *\n     * When `autoExpand` is true, this property serves no purpose, because the ability to manually\n     * resize the textarea is always disabled when `autoExpand` is true.\n     */\n    disableResize?: boolean\n}\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\n        disableResize = false,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    useAutoExpand({ value, autoExpand, containerRef, internalRef })\n\n    const textAreaClassName = classNames([\n        autoExpand ? styles.disableResize : null,\n        disableResize ? styles.disableResize : null,\n    ])\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            className={[\n                styles.textAreaContainer,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n            maxLength={maxLength}\n        >\n            {({ onChange, ...extraProps }) => (\n                <Box\n                    width=\"full\"\n                    display=\"flex\"\n                    className={styles.innerContainer}\n                    ref={containerRef}\n                >\n                    <textarea\n                        {...props}\n                        {...extraProps}\n                        ref={combinedRef}\n                        rows={rows}\n                        className={textAreaClassName}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction useAutoExpand({\n    value,\n    autoExpand,\n    containerRef,\n    internalRef,\n}: {\n    value: string | undefined\n    autoExpand: boolean\n    containerRef: React.RefObject<HTMLDivElement>\n    internalRef: React.RefObject<HTMLTextAreaElement>\n}) {\n    const isControlled = value !== undefined\n\n    React.useEffect(\n        function setupAutoExpandWhenUncontrolled() {\n            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand || isControlled) {\n                return undefined\n            }\n\n            const containerElement = containerRef.current\n\n            function handleAutoExpand(value: string) {\n                if (containerElement) {\n                    containerElement.dataset.replicatedValue = value\n                }\n            }\n\n            function handleInput(event: Event) {\n                handleAutoExpand((event.currentTarget as HTMLTextAreaElement).value)\n            }\n\n            // Apply change initially, in case the text area has a non-empty initial value\n            handleAutoExpand(textAreaElement.value)\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand, containerRef, internalRef, isControlled],\n    )\n\n    React.useEffect(\n        function setupAutoExpandWhenControlled() {\n            if (!isControlled) {\n                return\n            }\n\n            const containerElement = containerRef.current\n            if (containerElement) {\n                containerElement.dataset.replicatedValue = value\n            }\n        },\n        [value, containerRef, isControlled],\n    )\n}\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["TextArea","React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","ariaDescribedBy","rows","autoExpand","disableResize","onChange","originalOnChange","props","containerRef","useRef","internalRef","combinedRef","useMergeRefs","useAutoExpand","textAreaClassName","classNames","styles","createElement","BaseField","className","textAreaContainer","error","bordered","extraProps","Box","width","display","innerContainer","_objectSpread","event","isControlled","undefined","useEffect","setupAutoExpandWhenUncontrolled","textAreaElement","current","containerElement","handleAutoExpand","dataset","replicatedValue","handleInput","currentTarget","addEventListener","removeEventListener","setupAutoExpandWhenControlled"],"mappings":"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"}

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

@@ -1,6 +1,13 @@
 import * as React from 'react';
 import { BaseFieldVariantProps, FieldComponentProps } from '../base-field';
-interface TextAreaProps extends Omit<FieldComponentProps<HTMLTextAreaElement>, 'characterCountPosition'>, Omit<BaseFieldVariantProps, 'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition'> {
+interface TextAreaProps extends Omit<FieldComponentProps<HTMLTextAreaElement>, 'characterCountPosition'>, Omit<BaseFieldVariantProps, 'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition' | 'value'> {
+    /**
+     * The value of the text area.
+     *
+     * If this prop is not specified, the text area will be uncontrolled and the component will
+     * manage its own state.
+     */
+    value?: string;
     /**
      * The number of visible text lines for the text area.
      *

package/lib/text-area/text-area.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),t=require("classnames"),r=require("use-callback-ref"),n=require("../base-field/base-field.js"),l=require("../box/box.js"),u=require("./text-area.module.css.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var a=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),a.default=e,a}var d=s(a),o=i(t);const c=["variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","aria-describedby","rows","autoExpand","disableResize","onChange"],f=["onChange"];exports.TextArea=d.forwardRef((function(a,t){let{variant:i="default",id:s,label:b,value:x,auxiliaryLabel:m,message:p,tone:h,maxWidth:g,maxLength:v,hidden:j,"aria-describedby":y,rows:E,autoExpand:L=!1,disableResize:R=!1,onChange:q}=a,C=e.objectWithoutProperties(a,c);const w=d.useRef(null),O=d.useRef(null),P=r.useMergeRefs([t,O]),_=o.default([L?u.default.disableResize:null,R?u.default.disableResize:null]);return d.useEffect((function(){const e=w.current;function a(a){e&&(e.dataset.replicatedValue=a)}function t(e){a(e.currentTarget.value)}const r=O.current;if(r&&L)return a(r.value),r.addEventListener("input",t),()=>r.removeEventListener("input",t)}),[L]),d.createElement(n.BaseField,{variant:i,id:s,label:b,value:x,auxiliaryLabel:m,message:p,tone:h,hidden:j,"aria-describedby":y,className:[u.default.textAreaContainer,"error"===h?u.default.error:null,"bordered"===i?u.default.bordered:null],maxWidth:g,maxLength:v},a=>{let{onChange:t}=a,r=e.objectWithoutProperties(a,f);return d.createElement(l.Box,{width:"full",display:"flex",className:u.default.innerContainer,ref:w},d.createElement("textarea",e.objectSpread2(e.objectSpread2(e.objectSpread2({},C),r),{},{ref:P,rows:E,className:_,maxLength:v,onChange:e=>{null==q||q(e),null==t||t(e)}})))})}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=require("classnames"),r=require("use-callback-ref"),n=require("../base-field/base-field.js"),l=require("../box/box.js"),u=require("./text-area.module.css.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,t}var s=o(t),d=i(a);const c=["variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","aria-describedby","rows","autoExpand","disableResize","onChange"],f=["onChange"];exports.TextArea=s.forwardRef((function(t,a){let{variant:i="default",id:o,label:b,value:x,auxiliaryLabel:p,message:m,tone:v,maxWidth:h,maxLength:g,hidden:j,"aria-describedby":y,rows:E,autoExpand:R=!1,disableResize:L=!1,onChange:q}=t,C=e.objectWithoutProperties(t,c);const w=s.useRef(null),O=s.useRef(null),P=r.useMergeRefs([a,O]);!function({value:e,autoExpand:t,containerRef:a,internalRef:r}){const n=void 0!==e;s.useEffect((function(){const e=r.current;if(!e||!t||n)return;const l=a.current;function u(e){l&&(l.dataset.replicatedValue=e)}function i(e){u(e.currentTarget.value)}return u(e.value),e.addEventListener("input",i),()=>e.removeEventListener("input",i)}),[t,a,r,n]),s.useEffect((function(){if(!n)return;const t=a.current;t&&(t.dataset.replicatedValue=e)}),[e,a,n])}({value:x,autoExpand:R,containerRef:w,internalRef:O});const _=d.default([R?u.default.disableResize:null,L?u.default.disableResize:null]);return s.createElement(n.BaseField,{variant:i,id:o,label:b,value:x,auxiliaryLabel:p,message:m,tone:v,hidden:j,"aria-describedby":y,className:[u.default.textAreaContainer,"error"===v?u.default.error:null,"bordered"===i?u.default.bordered:null],maxWidth:h,maxLength:g},t=>{let{onChange:a}=t,r=e.objectWithoutProperties(t,f);return s.createElement(l.Box,{width:"full",display:"flex",className:u.default.innerContainer,ref:w},s.createElement("textarea",e.objectSpread2(e.objectSpread2(e.objectSpread2({},C),r),{},{ref:P,rows:E,className:_,maxLength:g,onChange:e=>{null==q||q(e),null==a||a(e)}})))})}));
 //# sourceMappingURL=text-area.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sources":["../../src/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ninterface TextAreaProps\n    extends Omit<FieldComponentProps<HTMLTextAreaElement>, 'characterCountPosition'>,\n        Omit<BaseFieldVariantProps, 'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition'> {\n    /**\n     * The number of visible text lines for the text area.\n     *\n     * If it is specified, it must be a positive integer. If it is not specified, the default\n     * value is 2 (set by the browser).\n     *\n     * When `autoExpand` is true, this value serves the purpose of specifying the minimum number\n     * of rows that the textarea will shrink to when the content is not large enough to make it\n     * expand.\n     *\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n     */\n    rows?: number\n\n    /**\n     * If `true`, the textarea will be automatically resized to fit the content, and the ability to\n     * manually resize the textarea will be disabled.\n     */\n    autoExpand?: boolean\n\n    /**\n     * If `true`, the ability to manually resize the textarea will be disabled.\n     *\n     * When `autoExpand` is true, this property serves no purpose, because the ability to manually\n     * resize the textarea is always disabled when `autoExpand` is true.\n     */\n    disableResize?: boolean\n}\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\n        disableResize = false,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    const textAreaClassName = classNames([\n        autoExpand ? styles.disableResize : null,\n        disableResize ? styles.disableResize : null,\n    ])\n\n    React.useEffect(\n        function setupAutoExpand() {\n            const containerElement = containerRef.current\n\n            function handleAutoExpand(value: string) {\n                if (containerElement) {\n                    containerElement.dataset.replicatedValue = value\n                }\n            }\n\n            function handleInput(event: Event) {\n                handleAutoExpand((event.currentTarget as HTMLTextAreaElement).value)\n            }\n\n            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand) {\n                return undefined\n            }\n\n            // Apply change initially, in case the text area has a non-empty initial value\n            handleAutoExpand(textAreaElement.value)\n\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand],\n    )\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            className={[\n                styles.textAreaContainer,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n            maxLength={maxLength}\n        >\n            {({ onChange, ...extraProps }) => (\n                <Box\n                    width=\"full\"\n                    display=\"flex\"\n                    className={styles.innerContainer}\n                    ref={containerRef}\n                >\n                    <textarea\n                        {...props}\n                        {...extraProps}\n                        ref={combinedRef}\n                        rows={rows}\n                        className={textAreaClassName}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","aria-describedby","ariaDescribedBy","rows","autoExpand","disableResize","onChange","originalOnChange","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","containerRef","useRef","internalRef","combinedRef","useMergeRefs","textAreaClassName","classNames","styles","useEffect","containerElement","current","handleAutoExpand","dataset","replicatedValue","handleInput","event","currentTarget","textAreaElement","addEventListener","removeEventListener","createElement","BaseField","className","textAreaContainer","error","bordered","_ref2","extraProps","_excluded2","Box","width","display","innerContainer","_objectSpread","objectSpread2"],"mappings":"y2BAuCiBA,EAAMC,YAA+C,SAmBlEC,EAAAA,GAAG,IAlBHC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,MAIIA,EAJJC,eAKIA,EALJC,QAMIA,EANJC,KAOIA,EAPJC,SAQIA,EARJC,UASIA,EATJC,OAUIA,EACAC,mBAAoBC,EAXxBC,KAYIA,EAZJC,WAaIA,GAAa,EAbjBC,cAcIA,GAAgB,EAChBC,SAAUC,GAGXC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMC,EAAezB,EAAM0B,OAAuB,MAC5CC,EAAc3B,EAAM0B,OAA4B,MAChDE,EAAcC,EAAYA,aAAC,CAAC3B,EAAKyB,IAEjCG,EAAoBC,EAAAA,QAAW,CACjCf,EAAagB,EAAAA,QAAOf,cAAgB,KACpCA,EAAgBe,EAAM,QAACf,cAAgB,OA+B3C,OA5BAjB,EAAMiC,WACF,WACI,MAAMC,EAAmBT,EAAaU,QAEtC,SAASC,EAAiB9B,GAClB4B,IACAA,EAAiBG,QAAQC,gBAAkBhC,GAInD,SAASiC,EAAYC,GACjBJ,EAAkBI,EAAMC,cAAsCnC,OAGlE,MAAMoC,EAAkBf,EAAYQ,QACpC,GAAKO,GAAoB1B,EAQzB,OAHAoB,EAAiBM,EAAgBpC,OAEjCoC,EAAgBC,iBAAiB,QAASJ,GACnC,IAAMG,EAAgBE,oBAAoB,QAASL,KAE9D,CAACvB,IAIDhB,EAAC6C,cAAAC,YACG,CAAA3C,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,MAAOA,EACPC,eAAgBA,EAChBC,QAASA,EACTC,KAAMA,EACNG,OAAQA,qBACUE,EAClBiC,UAAW,CACPf,EAAM,QAACgB,kBACE,UAATvC,EAAmBuB,EAAM,QAACiB,MAAQ,KACtB,aAAZ9C,EAAyB6B,EAAAA,QAAOkB,SAAW,MAE/CxC,SAAUA,EACVC,UAAWA,GAEVwC,IAAA,IAACjC,SAAEA,GAAHiC,EAAgBC,EAAhB9B,EAAAC,wBAAA4B,EAAAE,GAAA,OACGrD,EAAC6C,cAAAS,OACGC,MAAM,OACNC,QAAQ,OACRT,UAAWf,EAAM,QAACyB,eAClBvD,IAAKuB,GAELzB,EACQ6C,cAAA,WADRa,EAAAC,cAAAD,EAAAC,cAAAD,gBAAA,GACQrC,GACA+B,GAFR,GAAA,CAGIlD,IAAK0B,EACLb,KAAMA,EACNgC,UAAWjB,EACXnB,UAAWA,EACXO,SAAWsB,IACP,MAAArB,GAAAA,EAAmBqB,GACnB,MAAAtB,GAAAA,EAAWsB"}
+{"version":3,"file":"text-area.js","sources":["../../src/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ninterface TextAreaProps\n    extends Omit<FieldComponentProps<HTMLTextAreaElement>, 'characterCountPosition'>,\n        Omit<\n            BaseFieldVariantProps,\n            'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition' | 'value'\n        > {\n    /**\n     * The value of the text area.\n     *\n     * If this prop is not specified, the text area will be uncontrolled and the component will\n     * manage its own state.\n     */\n    value?: string\n\n    /**\n     * The number of visible text lines for the text area.\n     *\n     * If it is specified, it must be a positive integer. If it is not specified, the default\n     * value is 2 (set by the browser).\n     *\n     * When `autoExpand` is true, this value serves the purpose of specifying the minimum number\n     * of rows that the textarea will shrink to when the content is not large enough to make it\n     * expand.\n     *\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n     */\n    rows?: number\n\n    /**\n     * If `true`, the textarea will be automatically resized to fit the content, and the ability to\n     * manually resize the textarea will be disabled.\n     */\n    autoExpand?: boolean\n\n    /**\n     * If `true`, the ability to manually resize the textarea will be disabled.\n     *\n     * When `autoExpand` is true, this property serves no purpose, because the ability to manually\n     * resize the textarea is always disabled when `autoExpand` is true.\n     */\n    disableResize?: boolean\n}\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\n        disableResize = false,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    useAutoExpand({ value, autoExpand, containerRef, internalRef })\n\n    const textAreaClassName = classNames([\n        autoExpand ? styles.disableResize : null,\n        disableResize ? styles.disableResize : null,\n    ])\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            className={[\n                styles.textAreaContainer,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n            maxLength={maxLength}\n        >\n            {({ onChange, ...extraProps }) => (\n                <Box\n                    width=\"full\"\n                    display=\"flex\"\n                    className={styles.innerContainer}\n                    ref={containerRef}\n                >\n                    <textarea\n                        {...props}\n                        {...extraProps}\n                        ref={combinedRef}\n                        rows={rows}\n                        className={textAreaClassName}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction useAutoExpand({\n    value,\n    autoExpand,\n    containerRef,\n    internalRef,\n}: {\n    value: string | undefined\n    autoExpand: boolean\n    containerRef: React.RefObject<HTMLDivElement>\n    internalRef: React.RefObject<HTMLTextAreaElement>\n}) {\n    const isControlled = value !== undefined\n\n    React.useEffect(\n        function setupAutoExpandWhenUncontrolled() {\n            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand || isControlled) {\n                return undefined\n            }\n\n            const containerElement = containerRef.current\n\n            function handleAutoExpand(value: string) {\n                if (containerElement) {\n                    containerElement.dataset.replicatedValue = value\n                }\n            }\n\n            function handleInput(event: Event) {\n                handleAutoExpand((event.currentTarget as HTMLTextAreaElement).value)\n            }\n\n            // Apply change initially, in case the text area has a non-empty initial value\n            handleAutoExpand(textAreaElement.value)\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand, containerRef, internalRef, isControlled],\n    )\n\n    React.useEffect(\n        function setupAutoExpandWhenControlled() {\n            if (!isControlled) {\n                return\n            }\n\n            const containerElement = containerRef.current\n            if (containerElement) {\n                containerElement.dataset.replicatedValue = value\n            }\n        },\n        [value, containerRef, isControlled],\n    )\n}\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","aria-describedby","ariaDescribedBy","rows","autoExpand","disableResize","onChange","originalOnChange","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","containerRef","useRef","internalRef","combinedRef","useMergeRefs","isControlled","undefined","useEffect","textAreaElement","current","containerElement","handleAutoExpand","dataset","replicatedValue","handleInput","event","currentTarget","addEventListener","removeEventListener","useAutoExpand","textAreaClassName","classNames","styles","createElement","BaseField","className","textAreaContainer","error","bordered","_ref2","extraProps","_excluded2","Box","width","display","innerContainer","_objectSpread","objectSpread2"],"mappings":"y2BAkDiBA,EAAMC,YAA+C,SAmBlEC,EAAAA,GAAG,IAlBHC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,MAIIA,EAJJC,eAKIA,EALJC,QAMIA,EANJC,KAOIA,EAPJC,SAQIA,EARJC,UASIA,EATJC,OAUIA,EACAC,mBAAoBC,EAXxBC,KAYIA,EAZJC,WAaIA,GAAa,EAbjBC,cAcIA,GAAgB,EAChBC,SAAUC,GAGXC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMC,EAAezB,EAAM0B,OAAuB,MAC5CC,EAAc3B,EAAM0B,OAA4B,MAChDE,EAAcC,EAAYA,aAAC,CAAC3B,EAAKyB,KAqD3C,UAAuBrB,MACnBA,EADmBU,WAEnBA,EAFmBS,aAGnBA,EAHmBE,YAInBA,IAOA,MAAMG,OAAyBC,IAAVzB,EAErBN,EAAMgC,WACF,WACI,MAAMC,EAAkBN,EAAYO,QACpC,IAAKD,IAAoBjB,GAAcc,EACnC,OAGJ,MAAMK,EAAmBV,EAAaS,QAEtC,SAASE,EAAiB9B,GAClB6B,IACAA,EAAiBE,QAAQC,gBAAkBhC,GAInD,SAASiC,EAAYC,GACjBJ,EAAkBI,EAAMC,cAAsCnC,OAMlE,OAFA8B,EAAiBH,EAAgB3B,OACjC2B,EAAgBS,iBAAiB,QAASH,GACnC,IAAMN,EAAgBU,oBAAoB,QAASJ,KAE9D,CAACvB,EAAYS,EAAcE,EAAaG,IAG5C9B,EAAMgC,WACF,WACI,IAAKF,EACD,OAGJ,MAAMK,EAAmBV,EAAaS,QAClCC,IACAA,EAAiBE,QAAQC,gBAAkBhC,KAGnD,CAACA,EAAOmB,EAAcK,IAtG1Bc,CAAc,CAAEtC,MAAAA,EAAOU,WAAAA,EAAYS,aAAAA,EAAcE,YAAAA,IAEjD,MAAMkB,EAAoBC,EAAAA,QAAW,CACjC9B,EAAa+B,EAAAA,QAAO9B,cAAgB,KACpCA,EAAgB8B,EAAM,QAAC9B,cAAgB,OAG3C,OACIjB,EAACgD,cAAAC,YACG,CAAA9C,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,MAAOA,EACPC,eAAgBA,EAChBC,QAASA,EACTC,KAAMA,EACNG,OAAQA,qBACUE,EAClBoC,UAAW,CACPH,EAAM,QAACI,kBACE,UAAT1C,EAAmBsC,EAAM,QAACK,MAAQ,KACtB,aAAZjD,EAAyB4C,EAAAA,QAAOM,SAAW,MAE/C3C,SAAUA,EACVC,UAAWA,GAEV2C,IAAA,IAACpC,SAAEA,GAAHoC,EAAgBC,EAAhBjC,EAAAC,wBAAA+B,EAAAE,GAAA,OACGxD,EAACgD,cAAAS,OACGC,MAAM,OACNC,QAAQ,OACRT,UAAWH,EAAM,QAACa,eAClB1D,IAAKuB,GAELzB,EACQgD,cAAA,WADRa,EAAAC,cAAAD,EAAAC,cAAAD,gBAAA,GACQxC,GACAkC,GAFR,GAAA,CAGIrD,IAAK0B,EACLb,KAAMA,EACNmC,UAAWL,EACXlC,UAAWA,EACXO,SAAWsB,IACP,MAAArB,GAAAA,EAAmBqB,GACnB,MAAAtB,GAAAA,EAAWsB"}

package/package.json

@@ -6,7 +6,7 @@
         "email": "henning@doist.com",
         "url": "http://doist.com"
     },
-    "version": "28.1.1",
+    "version": "28.1.2",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

package/styles/index.css

@@ -4,5 +4,4 @@
 ._68ab48ca{min-width:0}._6fa2b565{min-width:var(--reactist-width-xsmall)}.dd50fabd{min-width:var(--reactist-width-small)}.e7e2c808{min-width:var(--reactist-width-medium)}._6abbe25e{min-width:var(--reactist-width-large)}._54f479ac{min-width:var(--reactist-width-xlarge)}._148492bc{max-width:var(--reactist-width-xsmall)}.bd023b96{max-width:var(--reactist-width-small)}.e102903f{max-width:var(--reactist-width-medium)}._0e8d76d7{max-width:var(--reactist-width-large)}._47a031d0{max-width:var(--reactist-width-xlarge)}.cd4c8183{max-width:100%}._5f5959e8{width:0}._8c75067a{width:100%}._56a651f6{width:auto}._26f87bb8{width:-moz-max-content;width:-webkit-max-content;width:max-content}._07a6ab44{width:-moz-min-content;width:-webkit-min-content;width:min-content}.a87016fa{width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}._1a972e50{width:var(--reactist-width-xsmall)}.c96d8261{width:var(--reactist-width-small)}.f3829d42{width:var(--reactist-width-medium)}._2caef228{width:var(--reactist-width-large)}._069e1491{width:var(--reactist-width-xlarge)}
 ._64ed24f4{gap:0}._2580a74b{gap:var(--reactist-spacing-xsmall)}.c68f8bf6{gap:var(--reactist-spacing-small)}._43e5f8e9{gap:var(--reactist-spacing-medium)}._966b120f{gap:var(--reactist-spacing-large)}.f957894c{gap:var(--reactist-spacing-xlarge)}._8cca104b{gap:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._5797cee2{gap:0}._9015672f{gap:var(--reactist-spacing-xsmall)}._7ec86eec{gap:var(--reactist-spacing-small)}._714d7179{gap:var(--reactist-spacing-medium)}.ae1deb59{gap:var(--reactist-spacing-large)}.e1cfce55{gap:var(--reactist-spacing-xlarge)}._168a8ff8{gap:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._43e2b619{gap:0}._0ea9bf88{gap:var(--reactist-spacing-xsmall)}.d451307a{gap:var(--reactist-spacing-small)}.bf93cf66{gap:var(--reactist-spacing-medium)}._1430cddf{gap:var(--reactist-spacing-large)}.fa00c93e{gap:var(--reactist-spacing-xlarge)}._6f3aee54{gap:var(--reactist-spacing-xxlarge)}}
 ._487c82cd{text-overflow:ellipsis;max-width:300px;z-index:var(--reactist-stacking-order-tooltip)}
-.reactist_button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;border:none;background-color:transparent;padding:0}.reactist_button[aria-disabled=true]{opacity:.4;cursor:not-allowed}.reactist_button--small{font-size:.81rem;color:#202020;font-weight:400;line-height:1.6}.reactist_button--danger,.reactist_button--primary,.reactist_button--secondary{font-size:.875rem;color:#202020;font-weight:400;line-height:1.7;box-sizing:border-box;padding:5px 15px;border:1px solid rgba(0,0,0,.1);border-radius:3px}.reactist_button--danger.reactist_button--small,.reactist_button--primary.reactist_button--small,.reactist_button--secondary.reactist_button--small{padding:5px 10px}.reactist_button--danger.reactist_button--large,.reactist_button--primary.reactist_button--large,.reactist_button--secondary.reactist_button--large{padding:10px 15px}.reactist_button--primary{background-color:#3f82ef;color:#fff}.reactist_button--primary:not([disabled]):hover{background-color:#3b7be2}.reactist_button--danger{background-color:#de4c4a;color:#fff}.reactist_button--danger:not([disabled]):hover{background-color:#cf2826}.reactist_button--secondary{background-color:#fff;color:#202020;border-color:#dcdcdc}.reactist_button--secondary:not([disabled]):hover{background-color:#f9f9f9}.reactist_button--link{color:#3f82ef;text-decoration:none}.reactist_button--link:disabled{color:grey}.reactist_button--link:not(:disabled):hover{text-decoration:underline}.reactist_button--link:not(.reactist_button--link--small):not(.reactist_button--link--large){font-size:inherit}.reactist_button--danger.reactist_button--loading,.reactist_button--primary.reactist_button--loading,.reactist_button--secondary.reactist_button--loading{cursor:progress!important}.reactist_button--danger.reactist_button--loading:after,.reactist_button--primary.reactist_button--loading:after,.reactist_button--secondary.reactist_button--loading:after{background-repeat:no-repeat;background-size:15px;content:"";display:inline-block;height:15px;margin-left:12px;vertical-align:middle;width:15px;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:reactistRotateRight;animation-name:reactistRotateRight;-webkit-animation-timing-function:linear;animation-timing-function:linear;color:#fff;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNi4yNTciIGhlaWdodD0iMTYuMjU3IiB2aWV3Qm94PSItMTQ3LjgxMyAyMDYuNzUgMTYuMjU3IDE2LjI1NyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMTQ3LjgxMyAyMDYuNzUgMTYuMjU3IDE2LjI1NyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMikiPjxkZWZzPjxmaWx0ZXIgaWQ9ImEiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iLTE0Ny42ODQiIHk9IjIxMC45MjkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMy45NSI+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIxIDAgMCAwIDAgMCAxIDAgMCAwIDAgMCAxIDAgMCAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L2RlZnM+PG1hc2sgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iLTE0Ny42ODQiIHk9IjIxMC45MjkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMy45NSIgaWQ9ImIiPjxnIGZpbHRlcj0idXJsKCNhKSI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTS0xNDguNTg0IDIwNy45NzloMTh2MThoLTE4eiIvPjwvZz48L21hc2s+PHBhdGggbWFzaz0idXJsKCNiKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTS0xNDQuNjM0IDIxMS45MjlhNi45OTkgNi45OTkgMCAwMDAgOS44OTloMGE2Ljk5OSA2Ljk5OSAwIDAwOS44OTkgMCA2Ljk5OSA2Ljk5OSAwIDAwMC05Ljg5OSIvPjwvZz48L3N2Zz4=")}.reactist_button--secondary.reactist_button--loading{border-color:#dcdcdc;background-color:#dcdcdc;color:grey}@-webkit-keyframes reactistRotateRight{0%{transform:rotate(0deg);transform-origin:center center}to{transform:rotate(1turn);transform-origin:center center}}@keyframes reactistRotateRight{0%{transform:rotate(0deg);transform-origin:center center}to{transform:rotate(1turn);transform-origin:center center}}
-.reactist_dropdown .trigger{cursor:pointer;display:block}.reactist_dropdown .body{border-radius:3px;border:1px solid #dcdcdc;overflow:hidden;box-shadow:0 1px 8px 0 rgba(0,0,0,.08);z-index:1;background-color:#fff}.reactist_dropdown hr{border:none;height:1px;background-color:#dcdcdc;margin:0 5px}.reactist_dropdown .with_arrow:after,.reactist_dropdown .with_arrow:before{z-index:1;content:"";display:block;position:absolute;width:0;height:0;border-style:solid;border-width:6px;right:14px}.reactist_dropdown .with_arrow:after{top:-11px;border-color:transparent transparent #fff}.reactist_dropdown .with_arrow:before{top:-12px;border-color:transparent transparent #dcdcdc}.reactist_dropdown .with_arrow.top:after{top:-1px;border-color:#fff transparent transparent}.reactist_dropdown .with_arrow.top:before{top:-1px;right:13px;border-width:7px;border-color:#dcdcdc transparent transparent}
+.reactist_button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;border:none;background-color:transparent;padding:0}.reactist_button[aria-disabled=true]{opacity:.4;cursor:not-allowed}.reactist_button--small{font-size:.81rem;color:#202020;font-weight:400;line-height:1.6}.reactist_button--danger,.reactist_button--primary,.reactist_button--secondary{font-size:.875rem;color:#202020;font-weight:400;line-height:1.7;box-sizing:border-box;padding:5px 15px;border:1px solid rgba(0,0,0,.1);border-radius:3px}.reactist_button--danger.reactist_button--small,.reactist_button--primary.reactist_button--small,.reactist_button--secondary.reactist_button--small{padding:5px 10px}.reactist_button--danger.reactist_button--large,.reactist_button--primary.reactist_button--large,.reactist_button--secondary.reactist_button--large{padding:10px 15px}.reactist_button--primary{background-color:#3f82ef;color:#fff}.reactist_button--primary:not([disabled]):hover{background-color:#3b7be2}.reactist_button--danger{background-color:#de4c4a;color:#fff}.reactist_button--danger:not([disabled]):hover{background-color:#cf2826}.reactist_button--secondary{background-color:#fff;color:#202020;border-color:#dcdcdc}.reactist_button--secondary:not([disabled]):hover{background-color:#f9f9f9}.reactist_button--link{color:#3f82ef;text-decoration:none}.reactist_button--link:disabled{color:grey}.reactist_button--link:not(:disabled):hover{text-decoration:underline}.reactist_button--link:not(.reactist_button--link--small):not(.reactist_button--link--large){font-size:inherit}.reactist_button--danger.reactist_button--loading,.reactist_button--primary.reactist_button--loading,.reactist_button--secondary.reactist_button--loading{cursor:progress!important}.reactist_button--danger.reactist_button--loading:after,.reactist_button--primary.reactist_button--loading:after,.reactist_button--secondary.reactist_button--loading:after{background-repeat:no-repeat;background-size:15px;content:"";display:inline-block;height:15px;margin-left:12px;vertical-align:middle;width:15px;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:reactistRotateRight;animation-name:reactistRotateRight;-webkit-animation-timing-function:linear;animation-timing-function:linear;color:#fff;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNi4yNTciIGhlaWdodD0iMTYuMjU3IiB2aWV3Qm94PSItMTQ3LjgxMyAyMDYuNzUgMTYuMjU3IDE2LjI1NyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMTQ3LjgxMyAyMDYuNzUgMTYuMjU3IDE2LjI1NyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMikiPjxkZWZzPjxmaWx0ZXIgaWQ9ImEiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iLTE0Ny42ODQiIHk9IjIxMC45MjkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMy45NSI+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIxIDAgMCAwIDAgMCAxIDAgMCAwIDAgMCAxIDAgMCAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L2RlZnM+PG1hc2sgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iLTE0Ny42ODQiIHk9IjIxMC45MjkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMy45NSIgaWQ9ImIiPjxnIGZpbHRlcj0idXJsKCNhKSI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTS0xNDguNTg0IDIwNy45NzloMTh2MThoLTE4eiIvPjwvZz48L21hc2s+PHBhdGggbWFzaz0idXJsKCNiKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTS0xNDQuNjM0IDIxMS45MjlhNi45OTkgNi45OTkgMCAwMDAgOS44OTloMGE2Ljk5OSA2Ljk5OSAwIDAwOS44OTkgMCA2Ljk5OSA2Ljk5OSAwIDAwMC05Ljg5OSIvPjwvZz48L3N2Zz4=")}.reactist_button--secondary.reactist_button--loading{border-color:#dcdcdc;background-color:#dcdcdc;color:grey}@-webkit-keyframes reactistRotateRight{0%{transform:rotate(0deg);transform-origin:center center}to{transform:rotate(1turn);transform-origin:center center}}@keyframes reactistRotateRight{0%{transform:rotate(0deg);transform-origin:center center}to{transform:rotate(1turn);transform-origin:center center}}