@doist/reactist 28.5.2 → 28.5.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/reactist.cjs.development.js +3 -3
- package/dist/reactist.cjs.development.js.map +1 -1
- package/dist/reactist.cjs.production.min.js +1 -1
- package/dist/reactist.cjs.production.min.js.map +1 -1
- package/es/spinner/spinner.js +1 -1
- package/es/spinner/spinner.js.map +1 -1
- package/es/text-area/text-area.js +2 -2
- package/es/text-area/text-area.js.map +1 -1
- package/lib/spinner/spinner.js +1 -1
- package/lib/spinner/spinner.js.map +1 -1
- package/lib/text-area/text-area.js +1 -1
- package/lib/text-area/text-area.js.map +1 -1
- package/package.json +1 -1
- package/styles/index.css +7 -1
package/es/spinner/spinner.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner.js","sources":["../../src/spinner/spinner.tsx"],"sourcesContent":["import * as React from 'react'\nimport styles from './spinner.module.css'\n\nfunction Spinner({ size =
|
|
1
|
+
{"version":3,"file":"spinner.js","sources":["../../src/spinner/spinner.tsx"],"sourcesContent":["import * as React from 'react'\nimport styles from './spinner.module.css'\n\nfunction Spinner({ size = 18 }: { size?: number }) {\n return (\n <svg\n aria-hidden\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n className={styles.svg}\n data-chromatic=\"ignore\"\n >\n <g fill=\"none\" fillRule=\"nonzero\">\n <path\n className={styles.tint}\n d=\"M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z\"\n />\n <path\n className={styles.fill}\n d=\"M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z\"\n />\n </g>\n </svg>\n )\n}\n\nexport { Spinner }\n"],"names":["Spinner","size","React","width","height","viewBox","className","styles","svg","createElement","fill","fillRule","tint","d"],"mappings":";;;AAGA,SAASA,OAAT,CAAiB;AAAEC,EAAAA,IAAI,GAAG,EAAA;AAAT,CAAjB,EAAiD;AAC7C,EAAA,oBACIC,mBAAA,MAAA;;AAEIC,IAAAA,KAAK,EAAEF;AACPG,IAAAA,MAAM,EAAEH;AACRI,IAAAA,OAAO,EAAC;IACRC,SAAS,EAAEC,gBAAM,CAACC;oBACH,EAAA,QAAA;GANnB,eAQIN,KAAA,CAAAO,aAAA,CAAA,GAAA,EAAA;AAAGC,IAAAA,IAAI,EAAC,MAAR;AAAeC,IAAAA,QAAQ,EAAC,SAAA;AAAxB,GAAA,eACIT,KACI,CAAAO,aADJ,CACI,MADJ,EACI;IAAAH,SAAS,EAAEC,gBAAM,CAACK,IAAlB;AACAC,IAAAA,CAAC,EAAC,8IAAA;AADF,GADJ,CADJ,eAKIX,KAAA,CAAAO,aAAA,CAAA,MAAA,EAAA;IACIH,SAAS,EAAEC,gBAAM,CAACG,IADtB;AAEIG,IAAAA,CAAC,EAAC,2NAAA;GAFN,CALJ,CARJ,CADJ,CAAA;AAqBH;;;;"}
|
|
@@ -107,7 +107,7 @@ function useAutoExpand({
|
|
|
107
107
|
return () => textAreaElement.removeEventListener('input', handleInput);
|
|
108
108
|
}, [autoExpand, containerRef, internalRef, isControlled]);
|
|
109
109
|
React.useEffect(function setupAutoExpandWhenControlled() {
|
|
110
|
-
if (!isControlled) {
|
|
110
|
+
if (!isControlled || !autoExpand) {
|
|
111
111
|
return;
|
|
112
112
|
}
|
|
113
113
|
|
|
@@ -116,7 +116,7 @@ function useAutoExpand({
|
|
|
116
116
|
if (containerElement) {
|
|
117
117
|
containerElement.dataset.replicatedValue = value;
|
|
118
118
|
}
|
|
119
|
-
}, [value, containerRef, isControlled]);
|
|
119
|
+
}, [value, containerRef, isControlled, autoExpand]);
|
|
120
120
|
}
|
|
121
121
|
|
|
122
122
|
export { TextArea };
|
|
@@ -1 +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<\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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"}
|
|
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<\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 || !autoExpand) {\n return\n }\n\n const containerElement = containerRef.current\n if (containerElement) {\n containerElement.dataset.replicatedValue = value\n }\n },\n [value, containerRef, isControlled, autoExpand],\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/spinner/spinner.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./spinner.module.css.js");function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var a=r(e);exports.Spinner=function({size:e=
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./spinner.module.css.js");function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var a=r(e);exports.Spinner=function({size:e=18}){return a.createElement("svg",{"aria-hidden":!0,width:e,height:e,viewBox:"0 0 24 24",className:t.default.svg,"data-chromatic":"ignore"},a.createElement("g",{fill:"none",fillRule:"nonzero"},a.createElement("path",{className:t.default.tint,d:"M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z"}),a.createElement("path",{className:t.default.fill,d:"M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z"})))};
|
|
2
2
|
//# sourceMappingURL=spinner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner.js","sources":["../../src/spinner/spinner.tsx"],"sourcesContent":["import * as React from 'react'\nimport styles from './spinner.module.css'\n\nfunction Spinner({ size =
|
|
1
|
+
{"version":3,"file":"spinner.js","sources":["../../src/spinner/spinner.tsx"],"sourcesContent":["import * as React from 'react'\nimport styles from './spinner.module.css'\n\nfunction Spinner({ size = 18 }: { size?: number }) {\n return (\n <svg\n aria-hidden\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n className={styles.svg}\n data-chromatic=\"ignore\"\n >\n <g fill=\"none\" fillRule=\"nonzero\">\n <path\n className={styles.tint}\n d=\"M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z\"\n />\n <path\n className={styles.fill}\n d=\"M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z\"\n />\n </g>\n </svg>\n )\n}\n\nexport { Spinner }\n"],"names":["size","React","width","height","viewBox","className","styles","svg","createElement","fill","fillRule","tint","d"],"mappings":"2aAGA,UAAiBA,KAAEA,EAAO,KACtB,OACIC,wCAEIC,MAAOF,EACPG,OAAQH,EACRI,QAAQ,YACRC,UAAWC,EAAM,QAACC,qBACH,UAEfN,EAAAO,cAAA,IAAA,CAAGC,KAAK,OAAOC,SAAS,WACpBT,EACIO,cAAA,OAAA,CAAAH,UAAWC,EAAM,QAACK,KAClBC,EAAE,iJAENX,EAAAO,cAAA,OAAA,CACIH,UAAWC,EAAM,QAACG,KAClBG,EAAE"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"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
|
|
1
|
+
"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||!t)return;const r=a.current;r&&(r.dataset.replicatedValue=e)}),[e,a,n,t])}({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)}})))})}));
|
|
2
2
|
//# sourceMappingURL=text-area.js.map
|
|
@@ -1 +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<\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,
|
|
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<\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 || !autoExpand) {\n return\n }\n\n const containerElement = containerRef.current\n if (containerElement) {\n containerElement.dataset.replicatedValue = value\n }\n },\n [value, containerRef, isControlled, autoExpand],\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,IAAiBd,EAClB,OAGJ,MAAMmB,EAAmBV,EAAaS,QAClCC,IACAA,EAAiBE,QAAQC,gBAAkBhC,KAGnD,CAACA,EAAOmB,EAAcK,EAAcd,IAtGxC4B,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
CHANGED
package/styles/index.css
CHANGED
|
@@ -1 +1,7 @@
|
|
|
1
|
-
.
|
|
1
|
+
._19abae45{box-sizing:border-box;border:0;margin:0;padding:0;font-size:inherit;font-family:inherit;vertical-align:baseline;background-color:transparent;list-style:none}pre._19abae45{font-family:var(--reactist-font-family-monospace)}._19abae45[hidden]{display:none!important}.c77f2a47{position:absolute}._2fe771e3{position:fixed}._7fb159a0{position:relative}._1b0c2c53{position:-webkit-sticky;position:sticky}@media (min-width:768px){.fbfd01f5{position:absolute}._718d00e5{position:fixed}.ce0fef03{position:relative}._8ede9d51{position:-webkit-sticky;position:sticky}}@media (min-width:992px){._5037d59d{position:absolute}._2cf38f34{position:fixed}.bf2d89a9{position:relative}._0a00a995{position:-webkit-sticky;position:sticky}}._5e944bac{display:block}.a7c6de33{display:flex}._8ed03dfe{display:inline}.d7c72ae2{display:inline-block}.baf095bf{display:inline-flex}.fdecf61b{display:none}@media (min-width:768px){.e67bff4d{display:block}.cd8908ce{display:flex}._859da319{display:inline}._9cfe10c7{display:inline-block}.bdc812ae{display:inline-flex}._21f0dae7{display:none}}@media (min-width:992px){.d94bf997{display:block}.e6925ae5{display:flex}._57151837{display:inline}._7721cd07{display:inline-block}._0e197a41{display:inline-flex}.dc1fe7a5{display:none}}._1e47f652{flex-direction:column}._194d8611{flex-direction:row}@media (min-width:768px){._11ca3004{flex-direction:column}._7e4f2f2b{flex-direction:row}}@media (min-width:992px){.fbca1929{flex-direction:column}._50dd05a2{flex-direction:row}}.afd15909{flex-wrap:wrap}._7682c7ed{flex-wrap:nowrap}.b834b77e{flex-shrink:0}._89d517e2{flex-grow:0}.bfa58fdf{flex-grow:1}._4e2075e2{align-items:flex-start}._8ad6a17c{align-items:center}.a6235493{align-items:flex-end}._1e964f8a{align-items:baseline}@media (min-width:768px){._87c0c7f8{align-items:flex-start}._812a2195{align-items:center}._207fa4f7{align-items:flex-end}._6415fbe8{align-items:baseline}}@media (min-width:992px){._84ec8c58{align-items:flex-start}.afdff695{align-items:center}._78607c32{align-items:flex-end}._57428c98{align-items:baseline}}._9e8363f8{justify-content:flex-start}.f88bdaf1{justify-content:center}._0315ed60{justify-content:flex-end}._81fc01b2{justify-content:space-around}._54d85bfe{justify-content:space-between}.b09b6390{justify-content:space-evenly}@media (min-width:768px){.bea77b61{justify-content:flex-start}._2f6925fc{justify-content:center}._462a9e07{justify-content:flex-end}._1c555ae4{justify-content:space-around}._7a9768a8{justify-content:space-between}._859b8158{justify-content:space-evenly}}@media (min-width:992px){.c190fc20{justify-content:flex-start}._73777561{justify-content:center}.d2151eb8{justify-content:flex-end}._1c555ae4{justify-content:space-around}.b8ec7870{justify-content:space-between}._859b8158{justify-content:space-evenly}}.d607c41c{align-self:stretch}._30b9c3a2{align-self:flex-start}.f1f37bf1{align-self:center}._341847ab{align-self:flex-end}._2c7dfaf8{align-self:baseline}@media (min-width:768px){._8be172b1{align-self:stretch}._84af0ad2{align-self:flex-start}._2fb0b3f1{align-self:center}.d8b98da0{align-self:flex-end}._096c96ed{align-self:baseline}}@media (min-width:992px){._217cc45f{align-self:stretch}._29964d59{align-self:flex-start}.e76ee627{align-self:center}._7435c694{align-self:flex-end}._84758309{align-self:baseline}}._47471e4e{overflow:hidden}._37460640{overflow:auto}._73d1ede9{overflow:visible}.a39c32d7{overflow:scroll}._5cede05a{height:100%}.b50b47ee{background-color:var(--reactist-bg-default)}._5912d165{background-color:var(--reactist-bg-aside)}.c4b77c63{background-color:var(--reactist-bg-highlight)}._7ab4d8a9{background-color:var(--reactist-bg-selected)}._9ce2e0c1{background-color:var(--reactist-bg-toast);color:var(--reactist-content-primary);--reactist-content-primary:var(--reactist-toast-content-primary);--reactist-content-secondary:var(--reactist-toast-content-secondary);--reactist-text-link-idle-tint:var(--reactist-content-primary);--reactist-text-link-idle-decoration:var(--reactist-text-link-hover-decoration);--reactist-actionable-tertiary-idle-tint:var(--reactist-toast-actionable-primary-tint);--reactist-actionable-tertiary-hover-tint:var(--reactist-toast-actionable-primary-tint);--reactist-actionable-tertiary-hover-fill:var(--reactist-toast-actionable-hover-fill);--reactist-actionable-quaternary-idle-tint:var(--reactist-toast-actionable-secondary-tint);--reactist-actionable-quaternary-hover-tint:var(--reactist-toast-actionable-secondary-tint);--reactist-actionable-quaternary-hover-fill:var(--reactist-toast-actionable-hover-fill)}.f6a2af5a{border-radius:var(--reactist-border-radius-small)}._7e67e1f6{border-radius:var(--reactist-border-radius-large)}.f5b8570f{border:1px solid var(--reactist-divider-primary)}._5dd76b5f{border:1px solid var(--reactist-divider-secondary)}._7c14c801{border:1px solid var(--reactist-divider-tertiary)}._57086b20{text-align:start}.b7f35b86{text-align:center}._6596dbcd{text-align:end}.d5210e4f{text-align:justify}@media (min-width:768px){._97da11d5{text-align:start}._9add5f3d{text-align:center}.f8b12189{text-align:end}.d5acd111{text-align:justify}}@media (min-width:992px){.b33bdab7{text-align:start}._0fc7972b{text-align:center}.a0f648ae{text-align:end}.a0bdba20{text-align:justify}}.d19e99ad{overflow:auto}.d19e99ad::-webkit-scrollbar{width:var(--reactist-spacing-small)}.d19e99ad::-webkit-scrollbar-track{background:transparent}.d19e99ad::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--reactist-border-radius-large)}.d19e99ad:hover::-webkit-scrollbar-thumb{background-color:var(--reactist-scrollbar-thumb-idle)}.d19e99ad{scrollbar-width:thin;scrollbar-color:transparent transparent}.d19e99ad:hover{scrollbar-color:var(--reactist-scrollbar-thumb-idle) transparent}
|
|
2
|
+
.c4803194{padding-top:var(--reactist-spacing-xsmall)}._4e9ab24b{padding-top:var(--reactist-spacing-small)}._1d226e27{padding-top:var(--reactist-spacing-medium)}.eb6097f1{padding-top:var(--reactist-spacing-large)}.d3229ba4{padding-top:var(--reactist-spacing-xlarge)}._47978ba4{padding-top:var(--reactist-spacing-xxlarge)}@media (min-width:768px){.f987719c{padding-top:var(--reactist-spacing-xsmall)}._8dbc4b4d{padding-top:var(--reactist-spacing-small)}.ae44fe07{padding-top:var(--reactist-spacing-medium)}.ffe9548d{padding-top:var(--reactist-spacing-large)}.f2b76a44{padding-top:var(--reactist-spacing-xlarge)}.c6eb8f43{padding-top:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._8699b560{padding-top:var(--reactist-spacing-xsmall)}._02c374b7{padding-top:var(--reactist-spacing-small)}._0dd0332f{padding-top:var(--reactist-spacing-medium)}.da55f1f6{padding-top:var(--reactist-spacing-large)}._8ef2a278{padding-top:var(--reactist-spacing-xlarge)}._8b493b28{padding-top:var(--reactist-spacing-xxlarge)}}._211eebc7{padding-right:var(--reactist-spacing-xsmall)}.ad0ccf15{padding-right:var(--reactist-spacing-small)}.a03e39af{padding-right:var(--reactist-spacing-medium)}.f0941ead{padding-right:var(--reactist-spacing-large)}.e47c5a43{padding-right:var(--reactist-spacing-xlarge)}.e849a5cf{padding-right:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._85374228{padding-right:var(--reactist-spacing-xsmall)}._89df37b9{padding-right:var(--reactist-spacing-small)}._1cc50ebe{padding-right:var(--reactist-spacing-medium)}._1060982b{padding-right:var(--reactist-spacing-large)}.be58847d{padding-right:var(--reactist-spacing-xlarge)}._45093484{padding-right:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.f8d99d6a{padding-right:var(--reactist-spacing-xsmall)}.efa076d9{padding-right:var(--reactist-spacing-small)}.e59caa64{padding-right:var(--reactist-spacing-medium)}.da42f46a{padding-right:var(--reactist-spacing-large)}.b3ee2580{padding-right:var(--reactist-spacing-xlarge)}._3ef94658{padding-right:var(--reactist-spacing-xxlarge)}}.b0e6eab4{padding-bottom:var(--reactist-spacing-xsmall)}._9510d053{padding-bottom:var(--reactist-spacing-small)}.d7af60c9{padding-bottom:var(--reactist-spacing-medium)}.b75f86cd{padding-bottom:var(--reactist-spacing-large)}.fbd4ce29{padding-bottom:var(--reactist-spacing-xlarge)}._33e3ad63{padding-bottom:var(--reactist-spacing-xxlarge)}@media (min-width:768px){.f0302da7{padding-bottom:var(--reactist-spacing-xsmall)}._4f9b8012{padding-bottom:var(--reactist-spacing-small)}._4333e20e{padding-bottom:var(--reactist-spacing-medium)}._30bbc76c{padding-bottom:var(--reactist-spacing-large)}.ba5a4008{padding-bottom:var(--reactist-spacing-xlarge)}._423a3b1a{padding-bottom:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.b40139b7{padding-bottom:var(--reactist-spacing-xsmall)}.f96071fa{padding-bottom:var(--reactist-spacing-small)}.fe803c9a{padding-bottom:var(--reactist-spacing-medium)}._01686eb9{padding-bottom:var(--reactist-spacing-large)}.afa763d8{padding-bottom:var(--reactist-spacing-xlarge)}.a95785f1{padding-bottom:var(--reactist-spacing-xxlarge)}}.cad4e2ec{padding-left:var(--reactist-spacing-xsmall)}.d70b3c17{padding-left:var(--reactist-spacing-small)}._8c851bd6{padding-left:var(--reactist-spacing-medium)}._078feb3c{padding-left:var(--reactist-spacing-large)}._76ab968c{padding-left:var(--reactist-spacing-xlarge)}.aaca85d7{padding-left:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._5eb0e5aa{padding-left:var(--reactist-spacing-xsmall)}._0384fb4f{padding-left:var(--reactist-spacing-small)}.edffff6f{padding-left:var(--reactist-spacing-medium)}._873b9a46{padding-left:var(--reactist-spacing-large)}._89105db5{padding-left:var(--reactist-spacing-xlarge)}.db1966fe{padding-left:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.b17f826b{padding-left:var(--reactist-spacing-xsmall)}._6dc83610{padding-left:var(--reactist-spacing-small)}._3421b8b2{padding-left:var(--reactist-spacing-medium)}._68cec7a6{padding-left:var(--reactist-spacing-large)}._94bde020{padding-left:var(--reactist-spacing-xlarge)}.b94ee579{padding-left:var(--reactist-spacing-xxlarge)}}
|
|
3
|
+
.c7813d79{margin-top:var(--reactist-spacing-xsmall)}.d3449da6{margin-top:var(--reactist-spacing-small)}._4ea254c1{margin-top:var(--reactist-spacing-medium)}.c0844f64{margin-top:var(--reactist-spacing-large)}._213145b4{margin-top:var(--reactist-spacing-xlarge)}.df61c84c{margin-top:var(--reactist-spacing-xxlarge)}.efe72b13{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}._870c2768{margin-top:calc(var(--reactist-spacing-small)*-1)}._0b927c57{margin-top:calc(var(--reactist-spacing-medium)*-1)}._461db014{margin-top:calc(var(--reactist-spacing-large)*-1)}._2a3a8cb8{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}._9bcda921{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._6add01e4{margin-top:var(--reactist-spacing-xsmall)}._735ef86b{margin-top:var(--reactist-spacing-small)}._0477d068{margin-top:var(--reactist-spacing-medium)}._2c90af97{margin-top:var(--reactist-spacing-large)}._63a82db6{margin-top:var(--reactist-spacing-xlarge)}._03cd7726{margin-top:var(--reactist-spacing-xxlarge)}.c986a62a{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}.be2bdcdd{margin-top:calc(var(--reactist-spacing-small)*-1)}._47d2686b{margin-top:calc(var(--reactist-spacing-medium)*-1)}._25e5af9d{margin-top:calc(var(--reactist-spacing-large)*-1)}.ee82f441{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.a6f9d404{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._4d8d9a36{margin-top:var(--reactist-spacing-xsmall)}.e813cee7{margin-top:var(--reactist-spacing-small)}._56975b7d{margin-top:var(--reactist-spacing-medium)}._53b367f6{margin-top:var(--reactist-spacing-large)}.d69e7311{margin-top:var(--reactist-spacing-xlarge)}._92f57c7e{margin-top:var(--reactist-spacing-xxlarge)}._96880d3e{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}.dc3f3555{margin-top:calc(var(--reactist-spacing-small)*-1)}._86dd06bb{margin-top:calc(var(--reactist-spacing-medium)*-1)}.c93ef12e{margin-top:calc(var(--reactist-spacing-large)*-1)}.bc8fd4a2{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.b12a9124{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}}._6016f4fb{margin-right:var(--reactist-spacing-xsmall)}.b85e3dfa{margin-right:var(--reactist-spacing-small)}._297575f4{margin-right:var(--reactist-spacing-medium)}.b401ac6c{margin-right:var(--reactist-spacing-large)}.dc3ec387{margin-right:var(--reactist-spacing-xlarge)}._24694604{margin-right:var(--reactist-spacing-xxlarge)}._8e9bf2ee{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}.ae9d1115{margin-right:calc(var(--reactist-spacing-small)*-1)}._14e46fc3{margin-right:calc(var(--reactist-spacing-medium)*-1)}._3370631b{margin-right:calc(var(--reactist-spacing-large)*-1)}._3f0e9b50{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}.bc13e010{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._6fa1aae3{margin-right:var(--reactist-spacing-xsmall)}._2976c5cb{margin-right:var(--reactist-spacing-small)}._38d94802{margin-right:var(--reactist-spacing-medium)}.db9569b5{margin-right:var(--reactist-spacing-large)}._4a52f06d{margin-right:var(--reactist-spacing-xlarge)}._8a0f0410{margin-right:var(--reactist-spacing-xxlarge)}.e7d40e9d{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}._680fde91{margin-right:calc(var(--reactist-spacing-small)*-1)}._021010ca{margin-right:calc(var(--reactist-spacing-medium)*-1)}._9e52c87c{margin-right:calc(var(--reactist-spacing-large)*-1)}._4d602613{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}._21b1b65a{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._7321bc07{margin-right:var(--reactist-spacing-xsmall)}.fa1721f4{margin-right:var(--reactist-spacing-small)}._3fd7b4b8{margin-right:var(--reactist-spacing-medium)}._4fdc2f74{margin-right:var(--reactist-spacing-large)}.c0254761{margin-right:var(--reactist-spacing-xlarge)}._710a5f09{margin-right:var(--reactist-spacing-xxlarge)}.e08bee7f{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}.e5ab73d2{margin-right:calc(var(--reactist-spacing-small)*-1)}._5e731477{margin-right:calc(var(--reactist-spacing-medium)*-1)}._0f57a22e{margin-right:calc(var(--reactist-spacing-large)*-1)}._25f26ed3{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}._11a3b4e0{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}}._6a4f69f7{margin-bottom:var(--reactist-spacing-xsmall)}.db26b033{margin-bottom:var(--reactist-spacing-small)}.c7313022{margin-bottom:var(--reactist-spacing-medium)}.a5885889{margin-bottom:var(--reactist-spacing-large)}._33dfbd8e{margin-bottom:var(--reactist-spacing-xlarge)}._795ad2de{margin-bottom:var(--reactist-spacing-xxlarge)}.a329dbd3{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._85e739fb{margin-bottom:calc(var(--reactist-spacing-small)*-1)}._681f65ff{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}.caf50d8f{margin-bottom:calc(var(--reactist-spacing-large)*-1)}._1e084cbf{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}._3dfb1c7e{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){.ef4735be{margin-bottom:var(--reactist-spacing-xsmall)}.de55afba{margin-bottom:var(--reactist-spacing-small)}._0e33ce88{margin-bottom:var(--reactist-spacing-medium)}._8ca391fc{margin-bottom:var(--reactist-spacing-large)}._3a609d23{margin-bottom:var(--reactist-spacing-xlarge)}._3e1177e4{margin-bottom:var(--reactist-spacing-xxlarge)}.d384884d{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._75254cec{margin-bottom:calc(var(--reactist-spacing-small)*-1)}._5d9f127d{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}._835f1089{margin-bottom:calc(var(--reactist-spacing-large)*-1)}.dad52a72{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}._8703a4bf{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._90fd20e9{margin-bottom:var(--reactist-spacing-xsmall)}.f3769191{margin-bottom:var(--reactist-spacing-small)}._156410f8{margin-bottom:var(--reactist-spacing-medium)}._7fed74d0{margin-bottom:var(--reactist-spacing-large)}._477dc10e{margin-bottom:var(--reactist-spacing-xlarge)}._85c82d89{margin-bottom:var(--reactist-spacing-xxlarge)}._4f09c1e0{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._9523e048{margin-bottom:calc(var(--reactist-spacing-small)*-1)}.efe10240{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}.c43971e6{margin-bottom:calc(var(--reactist-spacing-large)*-1)}.f9b4da15{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}.a10fdf70{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}}.f9be90b4{margin-left:var(--reactist-spacing-xsmall)}.f53218d5{margin-left:var(--reactist-spacing-small)}.c4a9b3ab{margin-left:var(--reactist-spacing-medium)}._5755e2c3{margin-left:var(--reactist-spacing-large)}._33fc9354{margin-left:var(--reactist-spacing-xlarge)}._4749a3bf{margin-left:var(--reactist-spacing-xxlarge)}.c76cb3c7{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}._96003c07{margin-left:calc(var(--reactist-spacing-small)*-1)}._09988d07{margin-left:calc(var(--reactist-spacing-medium)*-1)}.b4a486f6{margin-left:calc(var(--reactist-spacing-large)*-1)}.f396e75e{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._81d1f26d{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._0a46e8f1{margin-left:var(--reactist-spacing-xsmall)}._57c970af{margin-left:var(--reactist-spacing-small)}._4b6099d3{margin-left:var(--reactist-spacing-medium)}._378fcff5{margin-left:var(--reactist-spacing-large)}.f8785663{margin-left:var(--reactist-spacing-xlarge)}._72f957ee{margin-left:var(--reactist-spacing-xxlarge)}._2288c7e1{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.b27c1c05{margin-left:calc(var(--reactist-spacing-small)*-1)}._702cbb13{margin-left:calc(var(--reactist-spacing-medium)*-1)}._1a2748b4{margin-left:calc(var(--reactist-spacing-large)*-1)}.b8c043a5{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._8dc8ff63{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){.c2af646d{margin-left:var(--reactist-spacing-xsmall)}.c03d07be{margin-left:var(--reactist-spacing-small)}._915fb1d3{margin-left:var(--reactist-spacing-medium)}._64214ee1{margin-left:var(--reactist-spacing-large)}._7be4a22c{margin-left:var(--reactist-spacing-xlarge)}._5ec0a401{margin-left:var(--reactist-spacing-xxlarge)}.ea29f1ee{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.c26652c7{margin-left:calc(var(--reactist-spacing-small)*-1)}.c24f6af9{margin-left:calc(var(--reactist-spacing-medium)*-1)}.c2671f27{margin-left:calc(var(--reactist-spacing-large)*-1)}.cc51a04e{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}.fd581f54{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}}
|
|
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)}
|
|
5
|
+
._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)}}
|
|
6
|
+
._487c82cd{text-overflow:ellipsis;max-width:300px;z-index:var(--reactist-stacking-order-tooltip)}
|
|
7
|
+
.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}}
|