@doist/reactist 28.3.0 → 28.3.2

package/es/base-field/base-field.js

@@ -96,15 +96,13 @@ function BaseField({
   const [characterCount, setCharacterCount] = React.useState(inputLength.count);
   const [characterCountTone, setCharacterCountTone] = React.useState(inputLength.tone);
   const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : message ? messageId : null;
-  /**
-   * Renders the character count element.
-   * If the characterCountPosition value is 'hidden', it returns null.
-   */
+  const renderCharacterCountBelow = characterCountPosition === 'below' && characterCount !== null;
+  const renderCharacterCountInline = characterCountPosition === 'inline' && characterCount !== null;
 
   function renderCharacterCount() {
-    return characterCountPosition !== 'hidden' ? /*#__PURE__*/React.createElement(FieldCharacterCount, {
+    return /*#__PURE__*/React.createElement(FieldCharacterCount, {
       tone: characterCountTone
-    }, characterCount) : null;
+    }, characterCount);
   }
 
   const childrenProps = _objectSpread2(_objectSpread2({
@@ -129,7 +127,7 @@ function BaseField({
     },
 
     // If the character count is inline, we pass it as a prop to the children element so it can be rendered inline
-    characterCountElement: characterCountPosition === 'inline' ? renderCharacterCount() : null
+    characterCountElement: renderCharacterCountInline ? renderCharacterCount() : null
   });
 
   React.useEffect(function updateCharacterCountOnPropChange() {
@@ -169,7 +167,7 @@ function BaseField({
   }, label) : null), auxiliaryLabel ? /*#__PURE__*/React.createElement(Box, {
     className: modules_540a88ff.auxiliaryLabel,
     paddingLeft: "small"
-  }, auxiliaryLabel) : null) : null, children(childrenProps)), endSlot && endSlotPosition === 'fullHeight' ? endSlot : null), message || characterCount ? /*#__PURE__*/React.createElement(Columns, {
+  }, auxiliaryLabel) : null) : null, children(childrenProps)), endSlot && endSlotPosition === 'fullHeight' ? endSlot : null), message || renderCharacterCountBelow ? /*#__PURE__*/React.createElement(Columns, {
     align: "right",
     space: "small",
     maxWidth: maxWidth

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

@@ -1 +1 @@
-{"version":3,"file":"base-field.js","sources":["../../src/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../utils/common-helpers'\nimport { Text } from '../text'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\nimport type { WithEnhancedClassName } from '../utils/common-types'\nimport { Spinner } from '../spinner'\nimport { Column, Columns } from '../columns'\n\n// Define the remaining characters before the character count turns red\n// See: https://twist.com/a/1585/ch/765851/t/6664583/c/93631846 for latest spec\nconst MAX_LENGTH_THRESHOLD = 0\n\ntype FieldTone = 'neutral' | 'success' | 'error' | 'loading'\n\ntype FieldMessageProps = {\n    id: string\n    children: React.ReactNode\n    tone: FieldTone\n}\n\nfunction fieldToneToTextTone(tone: FieldTone) {\n    return tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'secondary'\n}\n\nfunction FieldMessage({ id, children, tone }: FieldMessageProps) {\n    return (\n        <Text as=\"p\" tone={fieldToneToTextTone(tone)} size=\"copy\" id={id}>\n            {tone === 'loading' ? (\n                <Box\n                    as=\"span\"\n                    marginRight=\"xsmall\"\n                    display=\"inlineFlex\"\n                    className={styles.loadingIcon}\n                >\n                    <Spinner size={16} />\n                </Box>\n            ) : null}\n            {children}\n        </Text>\n    )\n}\n\ntype FieldCharacterCountProps = {\n    children: React.ReactNode\n    tone: FieldTone\n}\n\nfunction FieldCharacterCount({ children, tone }: FieldCharacterCountProps) {\n    return (\n        <Text tone={fieldToneToTextTone(tone)} size=\"copy\">\n            {children}\n        </Text>\n    )\n}\n\ntype ValidateInputLengthProps = {\n    value?: React.InputHTMLAttributes<unknown>['value']\n    maxLength?: number\n}\n\ntype ValidateInputLengthResult = {\n    count: string | null\n    tone: FieldTone\n}\n\nfunction validateInputLength({\n    value,\n    maxLength,\n}: ValidateInputLengthProps): ValidateInputLengthResult {\n    if (!maxLength) {\n        return {\n            count: null,\n            tone: 'neutral',\n        }\n    }\n\n    const currentLength = String(value || '').length\n    const isNearMaxLength = maxLength - currentLength <= MAX_LENGTH_THRESHOLD\n\n    return {\n        count: `${currentLength}/${maxLength}`,\n        tone: isNearMaxLength ? 'error' : 'neutral',\n    }\n}\n\n//\n// BaseField\n//\n\ntype ChildrenRenderProps = {\n    id: string\n    value?: React.InputHTMLAttributes<unknown>['value']\n    'aria-describedby'?: string\n    'aria-invalid'?: true\n    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>\n    characterCountElement?: React.ReactNode | null\n}\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldVariant = 'default' | 'bordered'\ntype BaseFieldVariantProps = {\n    /**\n     * Provides alternative visual layouts or modes that the field can be rendered in.\n     *\n     * Namely, there are two variants supported:\n     *\n     * - the default one\n     * - a \"bordered\" variant, where the border of the field surrounds also the labels, instead\n     *   of just surrounding the actual field element\n     *\n     * In both cases, the message and description texts for the field lie outside the bordered\n     * area.\n     */\n    variant?: BaseFieldVariant\n}\n\nexport type BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'maxLength' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * This prop is not optional. Consumers of field components must be explicit about not\n         * wanting a label by passing `label=\"\"` or `label={null}`. In those situations, consumers\n         * should make sure that fields are properly labelled semantically by other means (e.g using\n         * `aria-labelledby`, or rendering a `<label />` element referencing the field by id).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        label: React.ReactNode\n\n        /**\n         * The initial value for this field element.\n         *\n         * This prop is used to calculate the character count for the initial value, and is then\n         * passed to the underlying child element.\n         */\n        value?: React.InputHTMLAttributes<unknown>['value']\n\n        /**\n         * An optional extra element to be placed to the right of the main label.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see BaseFieldProps['label']\n         *\n         * @deprecated The usage of this element is discouraged given that it was removed from the\n         * latest form field spec revision.\n         */\n        auxiliaryLabel?: React.ReactNode\n\n        /**\n         * A message associated with the field. It is rendered below the field, and with an\n         * appearance that conveys the tone of the field (e.g. coloured red for errors, green for\n         * success, etc).\n         *\n         * The message element is associated to the field via the `aria-describedby` attribute.\n         *\n         * In the future, when `aria-errormessage` gets better user agent support, we should use it\n         * to associate the filed with a message when tone is `\"error\"`.\n         *\n         * @see BaseFieldProps['tone']\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid\n         */\n        message?: React.ReactNode\n\n        /**\n         * The tone with which the message, if any, is presented.\n         *\n         * If the tone is `\"error\"`, the field border turns red, and the message, if any, is also\n         * red.\n         *\n         * When the tone is `\"loading\"`, it is recommended that you also disable the field. However,\n         * this is not enforced by the component. It is only a recommendation.\n         *\n         * @see BaseFieldProps['message']\n         * @see BaseFieldProps['hint']\n         */\n        tone?: FieldTone\n\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n\n        /**\n         * The maximum number of characters that the input field can accept.\n         * When this limit is reached, the input field will not accept any more characters.\n         * The counter element will turn red when the number of characters is within 10 of the maximum limit.\n         */\n        maxLength?: number\n\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: ChildrenRenderProps) => React.ReactNode\n\n        /**\n         * The position of the character count element.\n         * It can be shown below the field or inline with the field.\n         *\n         * @default 'below'\n         */\n        characterCountPosition?: 'below' | 'inline' | 'hidden'\n    } & (\n        | {\n              supportsStartAndEndSlots?: false\n              endSlot?: never\n              endSlotPosition?: never\n          }\n        | {\n              supportsStartAndEndSlots: true\n              endSlot?: React.ReactElement | string | number\n              /**\n               * This is solely for `bordered` variants of TextField. When set to `bottom` (the default),\n               * the endSlot will be placed inline with the input field. When set to `fullHeight`, the endSlot\n               * will be placed to the side of both the input field and the label.\n               */\n              endSlotPosition?: 'bottom' | 'fullHeight'\n          }\n    )\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'fieldRef' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\n/**\n * BaseField is a base component that provides a consistent structure for form fields.\n */\nfunction BaseField({\n    variant = 'default',\n    label,\n    value,\n    auxiliaryLabel,\n    message,\n    tone = 'neutral',\n    className,\n    children,\n    maxWidth,\n    maxLength,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n    characterCountPosition = 'below',\n    endSlot,\n    endSlotPosition = 'bottom',\n}: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const messageId = useId()\n\n    const inputLength = validateInputLength({ value, maxLength })\n\n    const [characterCount, setCharacterCount] = React.useState<string | null>(inputLength.count)\n    const [characterCountTone, setCharacterCountTone] = React.useState<FieldTone>(inputLength.tone)\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (message ? messageId : null)\n\n    /**\n     * Renders the character count element.\n     * If the characterCountPosition value is 'hidden', it returns null.\n     */\n    function renderCharacterCount() {\n        return characterCountPosition !== 'hidden' ? (\n            <FieldCharacterCount tone={characterCountTone}>{characterCount}</FieldCharacterCount>\n        ) : null\n    }\n\n    const childrenProps: ChildrenRenderProps = {\n        id,\n        value,\n        ...(ariaDescribedBy ? { 'aria-describedby': ariaDescribedBy } : {}),\n        'aria-invalid': tone === 'error' ? true : undefined,\n        onChange(event) {\n            if (!maxLength) {\n                return\n            }\n\n            const inputLength = validateInputLength({\n                value: event.currentTarget.value,\n                maxLength,\n            })\n\n            setCharacterCount(inputLength.count)\n            setCharacterCountTone(inputLength.tone)\n        },\n        // If the character count is inline, we pass it as a prop to the children element so it can be rendered inline\n        characterCountElement: characterCountPosition === 'inline' ? renderCharacterCount() : null,\n    }\n\n    React.useEffect(\n        function updateCharacterCountOnPropChange() {\n            if (!maxLength) {\n                return\n            }\n\n            const inputLength = validateInputLength({\n                value,\n                maxLength,\n            })\n\n            setCharacterCount(inputLength.count)\n            setCharacterCountTone(inputLength.tone)\n        },\n        [maxLength, value],\n    )\n\n    return (\n        <Stack space=\"xsmall\" hidden={hidden}>\n            <Box\n                display=\"flex\"\n                flexDirection=\"row\"\n                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n                alignItems=\"center\"\n            >\n                <Box flexGrow={1}>\n                    {label || auxiliaryLabel ? (\n                        <Box\n                            as=\"span\"\n                            display=\"flex\"\n                            justifyContent=\"spaceBetween\"\n                            alignItems=\"flexEnd\"\n                        >\n                            <Text\n                                size={variant === 'bordered' ? 'caption' : 'body'}\n                                as=\"label\"\n                                htmlFor={id}\n                            >\n                                {label ? (\n                                    <span className={styles.primaryLabel}>{label}</span>\n                                ) : null}\n                            </Text>\n                            {auxiliaryLabel ? (\n                                <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                                    {auxiliaryLabel}\n                                </Box>\n                            ) : null}\n                        </Box>\n                    ) : null}\n                    {children(childrenProps)}\n                </Box>\n                {endSlot && endSlotPosition === 'fullHeight' ? endSlot : null}\n            </Box>\n\n            {message || characterCount ? (\n                <Columns align=\"right\" space=\"small\" maxWidth={maxWidth}>\n                    {message ? (\n                        <Column width=\"auto\">\n                            <FieldMessage id={messageId} tone={tone}>\n                                {message}\n                            </FieldMessage>\n                        </Column>\n                    ) : null}\n\n                    {/* If the character count is below the field, we render it, if it's inline,\n                        we pass it as a prop to the children element so it can be rendered inline */}\n                    {characterCountPosition === 'below' ? (\n                        <Column width=\"content\">{renderCharacterCount()}</Column>\n                    ) : null}\n                </Columns>\n            ) : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["MAX_LENGTH_THRESHOLD","fieldToneToTextTone","tone","FieldMessage","id","children","React","Text","as","size","createElement","Box","marginRight","display","className","styles","loadingIcon","Spinner","FieldCharacterCount","validateInputLength","value","maxLength","count","currentLength","String","length","isNearMaxLength","BaseField","variant","label","auxiliaryLabel","message","maxWidth","hidden","originalAriaDescribedBy","originalId","characterCountPosition","endSlot","endSlotPosition","useId","messageId","inputLength","characterCount","setCharacterCount","useState","characterCountTone","setCharacterCountTone","ariaDescribedBy","renderCharacterCount","childrenProps","_objectSpread","undefined","onChange","event","currentTarget","characterCountElement","useEffect","updateCharacterCountOnPropChange","Stack","space","flexDirection","container","error","bordered","alignItems","flexGrow","justifyContent","htmlFor","primaryLabel","paddingLeft","Columns","align","Column","width"],"mappings":"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"}
+{"version":3,"file":"base-field.js","sources":["../../src/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../utils/common-helpers'\nimport { Text } from '../text'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\nimport type { WithEnhancedClassName } from '../utils/common-types'\nimport { Spinner } from '../spinner'\nimport { Column, Columns } from '../columns'\n\n// Define the remaining characters before the character count turns red\n// See: https://twist.com/a/1585/ch/765851/t/6664583/c/93631846 for latest spec\nconst MAX_LENGTH_THRESHOLD = 0\n\ntype FieldTone = 'neutral' | 'success' | 'error' | 'loading'\n\ntype FieldMessageProps = {\n    id: string\n    children: React.ReactNode\n    tone: FieldTone\n}\n\nfunction fieldToneToTextTone(tone: FieldTone) {\n    return tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'secondary'\n}\n\nfunction FieldMessage({ id, children, tone }: FieldMessageProps) {\n    return (\n        <Text as=\"p\" tone={fieldToneToTextTone(tone)} size=\"copy\" id={id}>\n            {tone === 'loading' ? (\n                <Box\n                    as=\"span\"\n                    marginRight=\"xsmall\"\n                    display=\"inlineFlex\"\n                    className={styles.loadingIcon}\n                >\n                    <Spinner size={16} />\n                </Box>\n            ) : null}\n            {children}\n        </Text>\n    )\n}\n\ntype FieldCharacterCountProps = {\n    children: React.ReactNode\n    tone: FieldTone\n}\n\nfunction FieldCharacterCount({ children, tone }: FieldCharacterCountProps) {\n    return (\n        <Text tone={fieldToneToTextTone(tone)} size=\"copy\">\n            {children}\n        </Text>\n    )\n}\n\ntype ValidateInputLengthProps = {\n    value?: React.InputHTMLAttributes<unknown>['value']\n    maxLength?: number\n}\n\ntype ValidateInputLengthResult = {\n    count: string | null\n    tone: FieldTone\n}\n\nfunction validateInputLength({\n    value,\n    maxLength,\n}: ValidateInputLengthProps): ValidateInputLengthResult {\n    if (!maxLength) {\n        return {\n            count: null,\n            tone: 'neutral',\n        }\n    }\n\n    const currentLength = String(value || '').length\n    const isNearMaxLength = maxLength - currentLength <= MAX_LENGTH_THRESHOLD\n\n    return {\n        count: `${currentLength}/${maxLength}`,\n        tone: isNearMaxLength ? 'error' : 'neutral',\n    }\n}\n\n//\n// BaseField\n//\n\ntype ChildrenRenderProps = {\n    id: string\n    value?: React.InputHTMLAttributes<unknown>['value']\n    'aria-describedby'?: string\n    'aria-invalid'?: true\n    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>\n    characterCountElement?: React.ReactNode | null\n}\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldVariant = 'default' | 'bordered'\ntype BaseFieldVariantProps = {\n    /**\n     * Provides alternative visual layouts or modes that the field can be rendered in.\n     *\n     * Namely, there are two variants supported:\n     *\n     * - the default one\n     * - a \"bordered\" variant, where the border of the field surrounds also the labels, instead\n     *   of just surrounding the actual field element\n     *\n     * In both cases, the message and description texts for the field lie outside the bordered\n     * area.\n     */\n    variant?: BaseFieldVariant\n}\n\nexport type BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'maxLength' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * This prop is not optional. Consumers of field components must be explicit about not\n         * wanting a label by passing `label=\"\"` or `label={null}`. In those situations, consumers\n         * should make sure that fields are properly labelled semantically by other means (e.g using\n         * `aria-labelledby`, or rendering a `<label />` element referencing the field by id).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        label: React.ReactNode\n\n        /**\n         * The initial value for this field element.\n         *\n         * This prop is used to calculate the character count for the initial value, and is then\n         * passed to the underlying child element.\n         */\n        value?: React.InputHTMLAttributes<unknown>['value']\n\n        /**\n         * An optional extra element to be placed to the right of the main label.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see BaseFieldProps['label']\n         *\n         * @deprecated The usage of this element is discouraged given that it was removed from the\n         * latest form field spec revision.\n         */\n        auxiliaryLabel?: React.ReactNode\n\n        /**\n         * A message associated with the field. It is rendered below the field, and with an\n         * appearance that conveys the tone of the field (e.g. coloured red for errors, green for\n         * success, etc).\n         *\n         * The message element is associated to the field via the `aria-describedby` attribute.\n         *\n         * In the future, when `aria-errormessage` gets better user agent support, we should use it\n         * to associate the filed with a message when tone is `\"error\"`.\n         *\n         * @see BaseFieldProps['tone']\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid\n         */\n        message?: React.ReactNode\n\n        /**\n         * The tone with which the message, if any, is presented.\n         *\n         * If the tone is `\"error\"`, the field border turns red, and the message, if any, is also\n         * red.\n         *\n         * When the tone is `\"loading\"`, it is recommended that you also disable the field. However,\n         * this is not enforced by the component. It is only a recommendation.\n         *\n         * @see BaseFieldProps['message']\n         * @see BaseFieldProps['hint']\n         */\n        tone?: FieldTone\n\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n\n        /**\n         * The maximum number of characters that the input field can accept.\n         * When this limit is reached, the input field will not accept any more characters.\n         * The counter element will turn red when the number of characters is within 10 of the maximum limit.\n         */\n        maxLength?: number\n\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: ChildrenRenderProps) => React.ReactNode\n\n        /**\n         * The position of the character count element.\n         * It can be shown below the field or inline with the field.\n         *\n         * @default 'below'\n         */\n        characterCountPosition?: 'below' | 'inline' | 'hidden'\n    } & (\n        | {\n              supportsStartAndEndSlots?: false\n              endSlot?: never\n              endSlotPosition?: never\n          }\n        | {\n              supportsStartAndEndSlots: true\n              endSlot?: React.ReactElement | string | number\n              /**\n               * This is solely for `bordered` variants of TextField. When set to `bottom` (the default),\n               * the endSlot will be placed inline with the input field. When set to `fullHeight`, the endSlot\n               * will be placed to the side of both the input field and the label.\n               */\n              endSlotPosition?: 'bottom' | 'fullHeight'\n          }\n    )\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'fieldRef' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\n/**\n * BaseField is a base component that provides a consistent structure for form fields.\n */\nfunction BaseField({\n    variant = 'default',\n    label,\n    value,\n    auxiliaryLabel,\n    message,\n    tone = 'neutral',\n    className,\n    children,\n    maxWidth,\n    maxLength,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n    characterCountPosition = 'below',\n    endSlot,\n    endSlotPosition = 'bottom',\n}: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const messageId = useId()\n\n    const inputLength = validateInputLength({ value, maxLength })\n\n    const [characterCount, setCharacterCount] = React.useState<string | null>(inputLength.count)\n    const [characterCountTone, setCharacterCountTone] = React.useState<FieldTone>(inputLength.tone)\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (message ? messageId : null)\n\n    const renderCharacterCountBelow = characterCountPosition === 'below' && characterCount !== null\n    const renderCharacterCountInline =\n        characterCountPosition === 'inline' && characterCount !== null\n\n    function renderCharacterCount() {\n        return <FieldCharacterCount tone={characterCountTone}>{characterCount}</FieldCharacterCount>\n    }\n\n    const childrenProps: ChildrenRenderProps = {\n        id,\n        value,\n        ...(ariaDescribedBy ? { 'aria-describedby': ariaDescribedBy } : {}),\n        'aria-invalid': tone === 'error' ? true : undefined,\n        onChange(event) {\n            if (!maxLength) {\n                return\n            }\n\n            const inputLength = validateInputLength({\n                value: event.currentTarget.value,\n                maxLength,\n            })\n\n            setCharacterCount(inputLength.count)\n            setCharacterCountTone(inputLength.tone)\n        },\n        // If the character count is inline, we pass it as a prop to the children element so it can be rendered inline\n        characterCountElement: renderCharacterCountInline ? renderCharacterCount() : null,\n    }\n\n    React.useEffect(\n        function updateCharacterCountOnPropChange() {\n            if (!maxLength) {\n                return\n            }\n\n            const inputLength = validateInputLength({\n                value,\n                maxLength,\n            })\n\n            setCharacterCount(inputLength.count)\n            setCharacterCountTone(inputLength.tone)\n        },\n        [maxLength, value],\n    )\n\n    return (\n        <Stack space=\"xsmall\" hidden={hidden}>\n            <Box\n                display=\"flex\"\n                flexDirection=\"row\"\n                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n                alignItems=\"center\"\n            >\n                <Box flexGrow={1}>\n                    {label || auxiliaryLabel ? (\n                        <Box\n                            as=\"span\"\n                            display=\"flex\"\n                            justifyContent=\"spaceBetween\"\n                            alignItems=\"flexEnd\"\n                        >\n                            <Text\n                                size={variant === 'bordered' ? 'caption' : 'body'}\n                                as=\"label\"\n                                htmlFor={id}\n                            >\n                                {label ? (\n                                    <span className={styles.primaryLabel}>{label}</span>\n                                ) : null}\n                            </Text>\n                            {auxiliaryLabel ? (\n                                <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                                    {auxiliaryLabel}\n                                </Box>\n                            ) : null}\n                        </Box>\n                    ) : null}\n                    {children(childrenProps)}\n                </Box>\n                {endSlot && endSlotPosition === 'fullHeight' ? endSlot : null}\n            </Box>\n\n            {message || renderCharacterCountBelow ? (\n                <Columns align=\"right\" space=\"small\" maxWidth={maxWidth}>\n                    {message ? (\n                        <Column width=\"auto\">\n                            <FieldMessage id={messageId} tone={tone}>\n                                {message}\n                            </FieldMessage>\n                        </Column>\n                    ) : null}\n\n                    {/* If the character count is below the field, we render it, if it's inline,\n                        we pass it as a prop to the children element so it can be rendered inline */}\n                    {characterCountPosition === 'below' ? (\n                        <Column width=\"content\">{renderCharacterCount()}</Column>\n                    ) : null}\n                </Columns>\n            ) : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["MAX_LENGTH_THRESHOLD","fieldToneToTextTone","tone","FieldMessage","id","children","React","Text","as","size","createElement","Box","marginRight","display","className","styles","loadingIcon","Spinner","FieldCharacterCount","validateInputLength","value","maxLength","count","currentLength","String","length","isNearMaxLength","BaseField","variant","label","auxiliaryLabel","message","maxWidth","hidden","originalAriaDescribedBy","originalId","characterCountPosition","endSlot","endSlotPosition","useId","messageId","inputLength","characterCount","setCharacterCount","useState","characterCountTone","setCharacterCountTone","ariaDescribedBy","renderCharacterCountBelow","renderCharacterCountInline","renderCharacterCount","childrenProps","_objectSpread","undefined","onChange","event","currentTarget","characterCountElement","useEffect","updateCharacterCountOnPropChange","Stack","space","flexDirection","container","error","bordered","alignItems","flexGrow","justifyContent","htmlFor","primaryLabel","paddingLeft","Columns","align","Column","width"],"mappings":"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"}

package/es/box/box.module.css.js

@@ -1,4 +1,4 @@
-var modules_54d944f2 = {"box":"fb8d74bb","position-absolute":"_18f74af9","position-fixed":"b292fef1","position-relative":"e4e217d4","position-sticky":"_66895b64","tablet-position-absolute":"_00e8a0ce","tablet-position-fixed":"efaf64be","tablet-position-relative":"_76e540fd","tablet-position-sticky":"bd286900","desktop-position-absolute":"_09e9f472","desktop-position-fixed":"_893383f1","desktop-position-relative":"dea3890d","desktop-position-sticky":"_6a61c94d","display-block":"_64dcc902","display-flex":"_14423c92","display-inline":"_6a38242d","display-inlineBlock":"_348efc1f","display-inlineFlex":"_150907c8","display-none":"_3da48ad6","tablet-display-block":"_0daac9f2","tablet-display-flex":"f62c43b1","tablet-display-inline":"_5839a4e4","tablet-display-inlineBlock":"_8068aaf2","tablet-display-inlineFlex":"_76562ea5","tablet-display-none":"_4f7a886f","desktop-display-block":"_4fd4b789","desktop-display-flex":"_4d08e78f","desktop-display-inline":"_0da15585","desktop-display-inlineBlock":"d0fcc019","desktop-display-inlineFlex":"_79f967d4","desktop-display-none":"_2ffa0d03","flexDirection-column":"_2d7320f2","flexDirection-row":"_5f8879d9","tablet-flexDirection-column":"_2c919a43","tablet-flexDirection-row":"_4da1f194","desktop-flexDirection-column":"_66fd35ea","desktop-flexDirection-row":"_4b79448d","flexWrap-wrap":"_202b0c8c","flexWrap-nowrap":"_45a8f27f","flexShrink-0":"_7d9ec5b0","flexGrow-0":"_9ce442fb","flexGrow-1":"c3b69d70","alignItems-flexStart":"_7cc6458c","alignItems-center":"b76144ce","alignItems-flexEnd":"e42ffab4","alignItems-baseline":"_3975b234","tablet-alignItems-flexStart":"b670f77e","tablet-alignItems-center":"_976e7156","tablet-alignItems-flexEnd":"_385c60b1","tablet-alignItems-baseline":"_52b577fc","desktop-alignItems-flexStart":"_2e1cc27f","desktop-alignItems-center":"_3a9e51e9","desktop-alignItems-flexEnd":"dfc189b2","desktop-alignItems-baseline":"_5fabaec4","justifyContent-flexStart":"a65d9c55","justifyContent-center":"b4e05554","justifyContent-flexEnd":"f76804e6","justifyContent-spaceAround":"_0095203e","justifyContent-spaceBetween":"_6eb365d1","justifyContent-spaceEvenly":"_4111e641","tablet-justifyContent-flexStart":"_6fda855d","tablet-justifyContent-center":"c2d359f8","tablet-justifyContent-flexEnd":"e271941d","tablet-justifyContent-spaceAround":"_2321488d","tablet-justifyContent-spaceBetween":"e4a9b2e3","tablet-justifyContent-spaceEvenly":"bdc232f2","desktop-justifyContent-flexStart":"_0d16bb5c","desktop-justifyContent-center":"eca8082a","desktop-justifyContent-flexEnd":"_97ea6bb7","desktop-justifyContent-spaceBetween":"_58e61602","alignSelf-stretch":"_794c8ab8","alignSelf-flexStart":"c510efd5","alignSelf-center":"b3f71626","alignSelf-flexEnd":"_13771d73","alignSelf-baseline":"_64318454","tablet-alignSelf-stretch":"_309c6ba7","tablet-alignSelf-flexStart":"_92dfd036","tablet-alignSelf-center":"_811f9906","tablet-alignSelf-flexEnd":"_2cd2336e","tablet-alignSelf-baseline":"bd2c9dad","desktop-alignSelf-stretch":"d8215926","desktop-alignSelf-flexStart":"b78f5c06","desktop-alignSelf-center":"_683e0cdb","desktop-alignSelf-flexEnd":"_489f1dc8","desktop-alignSelf-baseline":"_4aca1032","overflow-hidden":"_68aab614","overflow-auto":"ac28a3b1","overflow-visible":"_50b88b52","overflow-scroll":"c2fdd1c1","height-full":"_75ca308a","bg-default":"a9ca9830","bg-aside":"b9ff0c93","bg-highlight":"efc303e5","bg-selected":"ec657626","bg-toast":"_00d3482f","borderRadius-standard":"_958da546","borderRadius-full":"_79077c62","border-primary":"_68981e89","border-secondary":"_2bda8f7a","border-tertiary":"_7152c573","textAlign-start":"_1f362dec","textAlign-center":"_1c09cd18","textAlign-end":"b9663f5e","textAlign-justify":"a0eba489","tablet-textAlign-start":"_60b9abf8","tablet-textAlign-center":"_2c70943c","tablet-textAlign-end":"a512d4e1","tablet-textAlign-justify":"_5d02c334","desktop-textAlign-start":"ad2496a1","desktop-textAlign-center":"ee87b016","desktop-textAlign-end":"_6dd48127","desktop-textAlign-justify":"_1e70d216"};
+var modules_54d944f2 = {"box":"fc42413d","position-absolute":"fae81daf","position-fixed":"a5bc8416","position-relative":"fc1a1048","position-sticky":"bf792080","tablet-position-absolute":"_077996a2","tablet-position-fixed":"fa51626b","tablet-position-relative":"fbe5cea1","tablet-position-sticky":"_78273192","desktop-position-absolute":"_0683335b","desktop-position-fixed":"bcf9a7db","desktop-position-relative":"dab014b0","desktop-position-sticky":"e55b598a","display-block":"bf535c88","display-flex":"_27c1200b","display-inline":"_1ef58463","display-inlineBlock":"a895e180","display-inlineFlex":"_02433984","display-none":"_19b230db","tablet-display-block":"_2eb0ba1d","tablet-display-flex":"_69ab5292","tablet-display-inline":"_09a172d4","tablet-display-inlineBlock":"c867403c","tablet-display-inlineFlex":"a06f5b03","tablet-display-none":"_308a410d","desktop-display-block":"b5ea9f74","desktop-display-flex":"_81a526b3","desktop-display-inline":"_33230982","desktop-display-inlineBlock":"c7c28f1c","desktop-display-inlineFlex":"_5dfe6a6a","desktop-display-none":"fa742bb1","flexDirection-column":"_4e77e331","flexDirection-row":"c5d6948b","tablet-flexDirection-column":"_722ad9d8","tablet-flexDirection-row":"d84857d6","desktop-flexDirection-column":"d210a0a6","desktop-flexDirection-row":"a595b7c2","flexWrap-wrap":"_5cf75136","flexWrap-nowrap":"c6d608b1","flexShrink-0":"_939846ab","flexGrow-0":"f395bbe4","flexGrow-1":"cdffd92b","alignItems-flexStart":"da077e1e","alignItems-center":"_7c11de88","alignItems-flexEnd":"_09800955","alignItems-baseline":"_56fe7031","tablet-alignItems-flexStart":"_4c1e3df8","tablet-alignItems-center":"b8ba195f","tablet-alignItems-flexEnd":"_458238a7","tablet-alignItems-baseline":"f6955d23","desktop-alignItems-flexStart":"_8e366cca","desktop-alignItems-center":"e80b2a2b","desktop-alignItems-flexEnd":"e6f78987","desktop-alignItems-baseline":"f743fd7d","justifyContent-flexStart":"_2cd556a2","justifyContent-center":"_77dba57f","justifyContent-flexEnd":"_7ead66ef","justifyContent-spaceAround":"_427c6b6d","justifyContent-spaceBetween":"_9c70828c","justifyContent-spaceEvenly":"_78d2888b","tablet-justifyContent-flexStart":"b0f972a3","tablet-justifyContent-center":"d7cc571a","tablet-justifyContent-flexEnd":"_9d4cb75e","tablet-justifyContent-spaceAround":"d2908336","tablet-justifyContent-spaceBetween":"efa22111","tablet-justifyContent-spaceEvenly":"fad3882e","desktop-justifyContent-flexStart":"_82791437","desktop-justifyContent-center":"_3eede6d0","desktop-justifyContent-flexEnd":"_1317e3be","desktop-justifyContent-spaceBetween":"_162f8f46","alignSelf-stretch":"_5a4d7786","alignSelf-flexStart":"_23686007","alignSelf-center":"_8c629ed6","alignSelf-flexEnd":"_1a1362d5","alignSelf-baseline":"_931e11af","tablet-alignSelf-stretch":"_074adf9d","tablet-alignSelf-flexStart":"_10b3c4c3","tablet-alignSelf-center":"ec7bfaa3","tablet-alignSelf-flexEnd":"_082cde15","tablet-alignSelf-baseline":"_8364dd8d","desktop-alignSelf-stretch":"_59829012","desktop-alignSelf-flexStart":"_1a16b466","desktop-alignSelf-center":"_14dfc484","desktop-alignSelf-flexEnd":"cbb32b7a","desktop-alignSelf-baseline":"f20b993e","overflow-hidden":"_38c1c8db","overflow-auto":"e2ecdf44","overflow-visible":"_59aa1494","overflow-scroll":"b9d7368e","height-full":"_16a71a93","bg-default":"_823d82e1","bg-aside":"a04264ee","bg-highlight":"_37ba068e","bg-selected":"_9d78e1a8","bg-toast":"_386112c4","borderRadius-standard":"_922c85d2","borderRadius-full":"_39557ce4","border-primary":"_5c33734d","border-secondary":"_933e6ebb","border-tertiary":"_5a5e0ae6","textAlign-start":"_0302f2e4","textAlign-center":"daebe850","textAlign-end":"_98e44132","textAlign-justify":"e49be40c","tablet-textAlign-start":"_7ec524c5","tablet-textAlign-center":"ce28df84","tablet-textAlign-end":"_77593dc2","tablet-textAlign-justify":"_69855088","desktop-textAlign-start":"c11d2bf7","desktop-textAlign-center":"_793b791a","desktop-textAlign-end":"_28ec2d24","desktop-textAlign-justify":"_14e4fc76"};
 
 export { modules_54d944f2 as default };
 //# sourceMappingURL=box.module.css.js.map

package/lib/base-field/base-field.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),n=require("../box/box.js"),r=require("../utils/common-helpers.js"),l=require("../text/text.js"),a=require("./base-field.module.css.js"),i=require("../stack/stack.js"),u=require("../spinner/spinner.js"),o=require("../columns/columns.js");function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,t}var c=s(t);function d(e){return"error"===e?"danger":"success"===e?"positive":"secondary"}function m({id:e,children:t,tone:r}){return c.createElement(l.Text,{as:"p",tone:d(r),size:"copy",id:e},"loading"===r?c.createElement(n.Box,{as:"span",marginRight:"xsmall",display:"inlineFlex",className:a.default.loadingIcon},c.createElement(u.Spinner,{size:16})):null,t)}function f({children:e,tone:t}){return c.createElement(l.Text,{tone:d(t),size:"copy"},e)}function x({value:e,maxLength:t}){if(!t)return{count:null,tone:"neutral"};const n=String(e||"").length;return{count:n+"/"+t,tone:t-n<=0?"error":"neutral"}}exports.BaseField=function({variant:t="default",label:u,value:s,auxiliaryLabel:d,message:p,tone:b="neutral",className:g,children:h,maxWidth:E,maxLength:v,hidden:y,"aria-describedby":j,id:q,characterCountPosition:L="below",endSlot:S,endSlotPosition:w="bottom"}){const B=r.useId(q),C=r.useId(),O=x({value:s,maxLength:v}),[P,_]=c.useState(O.count),[I,N]=c.useState(O.tone),k=null!=j?j:p?C:null;function z(){return"hidden"!==L?c.createElement(f,{tone:I},P):null}const F=e.objectSpread2(e.objectSpread2({id:B,value:s},k?{"aria-describedby":k}:{}),{},{"aria-invalid":"error"===b||void 0,onChange(e){if(!v)return;const t=x({value:e.currentTarget.value,maxLength:v});_(t.count),N(t.tone)},characterCountElement:"inline"===L?z():null});return c.useEffect((function(){if(!v)return;const e=x({value:s,maxLength:v});_(e.count),N(e.tone)}),[v,s]),c.createElement(i.Stack,{space:"xsmall",hidden:y},c.createElement(n.Box,{display:"flex",flexDirection:"row",className:[g,a.default.container,"error"===b?a.default.error:null,"bordered"===t?a.default.bordered:null],maxWidth:E,alignItems:"center"},c.createElement(n.Box,{flexGrow:1},u||d?c.createElement(n.Box,{as:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd"},c.createElement(l.Text,{size:"bordered"===t?"caption":"body",as:"label",htmlFor:B},u?c.createElement("span",{className:a.default.primaryLabel},u):null),d?c.createElement(n.Box,{className:a.default.auxiliaryLabel,paddingLeft:"small"},d):null):null,h(F)),S&&"fullHeight"===w?S:null),p||P?c.createElement(o.Columns,{align:"right",space:"small",maxWidth:E},p?c.createElement(o.Column,{width:"auto"},c.createElement(m,{id:C,tone:b},p)):null,"below"===L?c.createElement(o.Column,{width:"content"},z()):null):null)},exports.FieldMessage=m;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),n=require("../box/box.js"),l=require("../utils/common-helpers.js"),r=require("../text/text.js"),a=require("./base-field.module.css.js"),u=require("../stack/stack.js"),o=require("../spinner/spinner.js"),i=require("../columns/columns.js");function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,l.get?l:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,t}var c=s(t);function d(e){return"error"===e?"danger":"success"===e?"positive":"secondary"}function m({id:e,children:t,tone:l}){return c.createElement(r.Text,{as:"p",tone:d(l),size:"copy",id:e},"loading"===l?c.createElement(n.Box,{as:"span",marginRight:"xsmall",display:"inlineFlex",className:a.default.loadingIcon},c.createElement(o.Spinner,{size:16})):null,t)}function f({children:e,tone:t}){return c.createElement(r.Text,{tone:d(t),size:"copy"},e)}function x({value:e,maxLength:t}){if(!t)return{count:null,tone:"neutral"};const n=String(e||"").length;return{count:n+"/"+t,tone:t-n<=0?"error":"neutral"}}exports.BaseField=function({variant:t="default",label:o,value:s,auxiliaryLabel:d,message:p,tone:b="neutral",className:g,children:h,maxWidth:E,maxLength:v,hidden:y,"aria-describedby":j,id:q,characterCountPosition:w="below",endSlot:L,endSlotPosition:S="bottom"}){const B=l.useId(q),C=l.useId(),O=x({value:s,maxLength:v}),[P,_]=c.useState(O.count),[I,N]=c.useState(O.tone),k=null!=j?j:p?C:null,z="below"===w&&null!==P,F="inline"===w&&null!==P;function T(){return c.createElement(f,{tone:I},P)}const M=e.objectSpread2(e.objectSpread2({id:B,value:s},k?{"aria-describedby":k}:{}),{},{"aria-invalid":"error"===b||void 0,onChange(e){if(!v)return;const t=x({value:e.currentTarget.value,maxLength:v});_(t.count),N(t.tone)},characterCountElement:F?T():null});return c.useEffect((function(){if(!v)return;const e=x({value:s,maxLength:v});_(e.count),N(e.tone)}),[v,s]),c.createElement(u.Stack,{space:"xsmall",hidden:y},c.createElement(n.Box,{display:"flex",flexDirection:"row",className:[g,a.default.container,"error"===b?a.default.error:null,"bordered"===t?a.default.bordered:null],maxWidth:E,alignItems:"center"},c.createElement(n.Box,{flexGrow:1},o||d?c.createElement(n.Box,{as:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd"},c.createElement(r.Text,{size:"bordered"===t?"caption":"body",as:"label",htmlFor:B},o?c.createElement("span",{className:a.default.primaryLabel},o):null),d?c.createElement(n.Box,{className:a.default.auxiliaryLabel,paddingLeft:"small"},d):null):null,h(M)),L&&"fullHeight"===S?L:null),p||z?c.createElement(i.Columns,{align:"right",space:"small",maxWidth:E},p?c.createElement(i.Column,{width:"auto"},c.createElement(m,{id:C,tone:b},p)):null,"below"===w?c.createElement(i.Column,{width:"content"},T()):null):null)},exports.FieldMessage=m;
 //# sourceMappingURL=base-field.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"base-field.js","sources":["../../src/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../utils/common-helpers'\nimport { Text } from '../text'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\nimport type { WithEnhancedClassName } from '../utils/common-types'\nimport { Spinner } from '../spinner'\nimport { Column, Columns } from '../columns'\n\n// Define the remaining characters before the character count turns red\n// See: https://twist.com/a/1585/ch/765851/t/6664583/c/93631846 for latest spec\nconst MAX_LENGTH_THRESHOLD = 0\n\ntype FieldTone = 'neutral' | 'success' | 'error' | 'loading'\n\ntype FieldMessageProps = {\n    id: string\n    children: React.ReactNode\n    tone: FieldTone\n}\n\nfunction fieldToneToTextTone(tone: FieldTone) {\n    return tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'secondary'\n}\n\nfunction FieldMessage({ id, children, tone }: FieldMessageProps) {\n    return (\n        <Text as=\"p\" tone={fieldToneToTextTone(tone)} size=\"copy\" id={id}>\n            {tone === 'loading' ? (\n                <Box\n                    as=\"span\"\n                    marginRight=\"xsmall\"\n                    display=\"inlineFlex\"\n                    className={styles.loadingIcon}\n                >\n                    <Spinner size={16} />\n                </Box>\n            ) : null}\n            {children}\n        </Text>\n    )\n}\n\ntype FieldCharacterCountProps = {\n    children: React.ReactNode\n    tone: FieldTone\n}\n\nfunction FieldCharacterCount({ children, tone }: FieldCharacterCountProps) {\n    return (\n        <Text tone={fieldToneToTextTone(tone)} size=\"copy\">\n            {children}\n        </Text>\n    )\n}\n\ntype ValidateInputLengthProps = {\n    value?: React.InputHTMLAttributes<unknown>['value']\n    maxLength?: number\n}\n\ntype ValidateInputLengthResult = {\n    count: string | null\n    tone: FieldTone\n}\n\nfunction validateInputLength({\n    value,\n    maxLength,\n}: ValidateInputLengthProps): ValidateInputLengthResult {\n    if (!maxLength) {\n        return {\n            count: null,\n            tone: 'neutral',\n        }\n    }\n\n    const currentLength = String(value || '').length\n    const isNearMaxLength = maxLength - currentLength <= MAX_LENGTH_THRESHOLD\n\n    return {\n        count: `${currentLength}/${maxLength}`,\n        tone: isNearMaxLength ? 'error' : 'neutral',\n    }\n}\n\n//\n// BaseField\n//\n\ntype ChildrenRenderProps = {\n    id: string\n    value?: React.InputHTMLAttributes<unknown>['value']\n    'aria-describedby'?: string\n    'aria-invalid'?: true\n    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>\n    characterCountElement?: React.ReactNode | null\n}\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldVariant = 'default' | 'bordered'\ntype BaseFieldVariantProps = {\n    /**\n     * Provides alternative visual layouts or modes that the field can be rendered in.\n     *\n     * Namely, there are two variants supported:\n     *\n     * - the default one\n     * - a \"bordered\" variant, where the border of the field surrounds also the labels, instead\n     *   of just surrounding the actual field element\n     *\n     * In both cases, the message and description texts for the field lie outside the bordered\n     * area.\n     */\n    variant?: BaseFieldVariant\n}\n\nexport type BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'maxLength' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * This prop is not optional. Consumers of field components must be explicit about not\n         * wanting a label by passing `label=\"\"` or `label={null}`. In those situations, consumers\n         * should make sure that fields are properly labelled semantically by other means (e.g using\n         * `aria-labelledby`, or rendering a `<label />` element referencing the field by id).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        label: React.ReactNode\n\n        /**\n         * The initial value for this field element.\n         *\n         * This prop is used to calculate the character count for the initial value, and is then\n         * passed to the underlying child element.\n         */\n        value?: React.InputHTMLAttributes<unknown>['value']\n\n        /**\n         * An optional extra element to be placed to the right of the main label.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see BaseFieldProps['label']\n         *\n         * @deprecated The usage of this element is discouraged given that it was removed from the\n         * latest form field spec revision.\n         */\n        auxiliaryLabel?: React.ReactNode\n\n        /**\n         * A message associated with the field. It is rendered below the field, and with an\n         * appearance that conveys the tone of the field (e.g. coloured red for errors, green for\n         * success, etc).\n         *\n         * The message element is associated to the field via the `aria-describedby` attribute.\n         *\n         * In the future, when `aria-errormessage` gets better user agent support, we should use it\n         * to associate the filed with a message when tone is `\"error\"`.\n         *\n         * @see BaseFieldProps['tone']\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid\n         */\n        message?: React.ReactNode\n\n        /**\n         * The tone with which the message, if any, is presented.\n         *\n         * If the tone is `\"error\"`, the field border turns red, and the message, if any, is also\n         * red.\n         *\n         * When the tone is `\"loading\"`, it is recommended that you also disable the field. However,\n         * this is not enforced by the component. It is only a recommendation.\n         *\n         * @see BaseFieldProps['message']\n         * @see BaseFieldProps['hint']\n         */\n        tone?: FieldTone\n\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n\n        /**\n         * The maximum number of characters that the input field can accept.\n         * When this limit is reached, the input field will not accept any more characters.\n         * The counter element will turn red when the number of characters is within 10 of the maximum limit.\n         */\n        maxLength?: number\n\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: ChildrenRenderProps) => React.ReactNode\n\n        /**\n         * The position of the character count element.\n         * It can be shown below the field or inline with the field.\n         *\n         * @default 'below'\n         */\n        characterCountPosition?: 'below' | 'inline' | 'hidden'\n    } & (\n        | {\n              supportsStartAndEndSlots?: false\n              endSlot?: never\n              endSlotPosition?: never\n          }\n        | {\n              supportsStartAndEndSlots: true\n              endSlot?: React.ReactElement | string | number\n              /**\n               * This is solely for `bordered` variants of TextField. When set to `bottom` (the default),\n               * the endSlot will be placed inline with the input field. When set to `fullHeight`, the endSlot\n               * will be placed to the side of both the input field and the label.\n               */\n              endSlotPosition?: 'bottom' | 'fullHeight'\n          }\n    )\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'fieldRef' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\n/**\n * BaseField is a base component that provides a consistent structure for form fields.\n */\nfunction BaseField({\n    variant = 'default',\n    label,\n    value,\n    auxiliaryLabel,\n    message,\n    tone = 'neutral',\n    className,\n    children,\n    maxWidth,\n    maxLength,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n    characterCountPosition = 'below',\n    endSlot,\n    endSlotPosition = 'bottom',\n}: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const messageId = useId()\n\n    const inputLength = validateInputLength({ value, maxLength })\n\n    const [characterCount, setCharacterCount] = React.useState<string | null>(inputLength.count)\n    const [characterCountTone, setCharacterCountTone] = React.useState<FieldTone>(inputLength.tone)\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (message ? messageId : null)\n\n    /**\n     * Renders the character count element.\n     * If the characterCountPosition value is 'hidden', it returns null.\n     */\n    function renderCharacterCount() {\n        return characterCountPosition !== 'hidden' ? (\n            <FieldCharacterCount tone={characterCountTone}>{characterCount}</FieldCharacterCount>\n        ) : null\n    }\n\n    const childrenProps: ChildrenRenderProps = {\n        id,\n        value,\n        ...(ariaDescribedBy ? { 'aria-describedby': ariaDescribedBy } : {}),\n        'aria-invalid': tone === 'error' ? true : undefined,\n        onChange(event) {\n            if (!maxLength) {\n                return\n            }\n\n            const inputLength = validateInputLength({\n                value: event.currentTarget.value,\n                maxLength,\n            })\n\n            setCharacterCount(inputLength.count)\n            setCharacterCountTone(inputLength.tone)\n        },\n        // If the character count is inline, we pass it as a prop to the children element so it can be rendered inline\n        characterCountElement: characterCountPosition === 'inline' ? renderCharacterCount() : null,\n    }\n\n    React.useEffect(\n        function updateCharacterCountOnPropChange() {\n            if (!maxLength) {\n                return\n            }\n\n            const inputLength = validateInputLength({\n                value,\n                maxLength,\n            })\n\n            setCharacterCount(inputLength.count)\n            setCharacterCountTone(inputLength.tone)\n        },\n        [maxLength, value],\n    )\n\n    return (\n        <Stack space=\"xsmall\" hidden={hidden}>\n            <Box\n                display=\"flex\"\n                flexDirection=\"row\"\n                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n                alignItems=\"center\"\n            >\n                <Box flexGrow={1}>\n                    {label || auxiliaryLabel ? (\n                        <Box\n                            as=\"span\"\n                            display=\"flex\"\n                            justifyContent=\"spaceBetween\"\n                            alignItems=\"flexEnd\"\n                        >\n                            <Text\n                                size={variant === 'bordered' ? 'caption' : 'body'}\n                                as=\"label\"\n                                htmlFor={id}\n                            >\n                                {label ? (\n                                    <span className={styles.primaryLabel}>{label}</span>\n                                ) : null}\n                            </Text>\n                            {auxiliaryLabel ? (\n                                <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                                    {auxiliaryLabel}\n                                </Box>\n                            ) : null}\n                        </Box>\n                    ) : null}\n                    {children(childrenProps)}\n                </Box>\n                {endSlot && endSlotPosition === 'fullHeight' ? endSlot : null}\n            </Box>\n\n            {message || characterCount ? (\n                <Columns align=\"right\" space=\"small\" maxWidth={maxWidth}>\n                    {message ? (\n                        <Column width=\"auto\">\n                            <FieldMessage id={messageId} tone={tone}>\n                                {message}\n                            </FieldMessage>\n                        </Column>\n                    ) : null}\n\n                    {/* If the character count is below the field, we render it, if it's inline,\n                        we pass it as a prop to the children element so it can be rendered inline */}\n                    {characterCountPosition === 'below' ? (\n                        <Column width=\"content\">{renderCharacterCount()}</Column>\n                    ) : null}\n                </Columns>\n            ) : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["fieldToneToTextTone","tone","FieldMessage","id","children","React","Text","as","size","createElement","Box","marginRight","display","className","styles","loadingIcon","Spinner","FieldCharacterCount","validateInputLength","value","maxLength","count","currentLength","String","length","variant","label","auxiliaryLabel","message","maxWidth","hidden","aria-describedby","originalAriaDescribedBy","originalId","characterCountPosition","endSlot","endSlotPosition","useId","messageId","inputLength","characterCount","setCharacterCount","useState","characterCountTone","setCharacterCountTone","ariaDescribedBy","renderCharacterCount","childrenProps","_objectSpread","objectSpread2","aria-invalid","undefined","onChange","event","currentTarget","characterCountElement","useEffect","Stack","space","flexDirection","container","error","bordered","alignItems","flexGrow","justifyContent","htmlFor","primaryLabel","paddingLeft","Columns","align","Column","width"],"mappings":"ypBAuBA,SAASA,EAAoBC,GACzB,MAAgB,UAATA,EAAmB,SAAoB,YAATA,EAAqB,WAAa,YAG3E,SAASC,GAAaC,GAAEA,EAAFC,SAAMA,EAANH,KAAgBA,IAClC,OACII,gBAACC,OAAI,CAACC,GAAG,IAAIN,KAAMD,EAAoBC,GAAOO,KAAK,OAAOL,GAAIA,GAChD,YAATF,EACGI,EAACI,cAAAC,EAAAA,IACG,CAAAH,GAAG,OACHI,YAAY,SACZC,QAAQ,aACRC,UAAWC,EAAM,QAACC,aAElBV,EAACI,cAAAO,UAAQ,CAAAR,KAAM,MAEnB,KACHJ,GAUb,SAASa,GAAoBb,SAAEA,EAAFH,KAAYA,IACrC,OACII,EAACI,cAAAH,QAAKL,KAAMD,EAAoBC,GAAOO,KAAK,QACvCJ,GAeb,SAASc,GAAoBC,MACzBA,EADyBC,UAEzBA,IAEA,IAAKA,EACD,MAAO,CACHC,MAAO,KACPpB,KAAM,WAId,MAAMqB,EAAgBC,OAAOJ,GAAS,IAAIK,OAG1C,MAAO,CACHH,MAAUC,EAAL,IAAsBF,EAC3BnB,KAJoBmB,EAAYE,GAnEX,EAuEG,QAAU,6BA8J1C,UAAmBG,QACfA,EAAU,UADKC,MAEfA,EAFeP,MAGfA,EAHeQ,eAIfA,EAJeC,QAKfA,EALe3B,KAMfA,EAAO,UANQY,UAOfA,EAPeT,SAQfA,EAReyB,SASfA,EATeT,UAUfA,EAVeU,OAWfA,EACAC,mBAAoBC,EACpB7B,GAAI8B,EAbWC,uBAcfA,EAAyB,QAdVC,QAefA,EAfeC,gBAgBfA,EAAkB,WAElB,MAAMjC,EAAKkC,QAAMJ,GACXK,EAAYD,EAAAA,QAEZE,EAAcrB,EAAoB,CAAEC,MAAAA,EAAOC,UAAAA,KAE1CoB,EAAgBC,GAAqBpC,EAAMqC,SAAwBH,EAAYlB,QAC/EsB,EAAoBC,GAAyBvC,EAAMqC,SAAoBH,EAAYtC,MAEpF4C,EAAkBb,MAAAA,EAAAA,EAA4BJ,EAAUU,EAAY,KAM1E,SAASQ,IACL,MAAkC,WAA3BZ,EACH7B,gBAACY,EAAmB,CAAChB,KAAM0C,GAAqBH,GAChD,KAGR,MAAMO,EAAaC,EAAAC,cAAAD,gBAAA,CACf7C,GAAAA,EACAgB,MAAAA,GACI0B,EAAkB,CAAEd,mBAAoBc,GAAoB,IAHjD,GAAA,CAIfK,eAAyB,UAATjD,QAA0BkD,EAC1CC,SAASC,GACL,IAAKjC,EACD,OAGJ,MAAMmB,EAAcrB,EAAoB,CACpCC,MAAOkC,EAAMC,cAAcnC,MAC3BC,UAAAA,IAGJqB,EAAkBF,EAAYlB,OAC9BuB,EAAsBL,EAAYtC,OAGtCsD,sBAAkD,WAA3BrB,EAAsCY,IAAyB,OAoB1F,OAjBAzC,EAAMmD,WACF,WACI,IAAKpC,EACD,OAGJ,MAAMmB,EAAcrB,EAAoB,CACpCC,MAAAA,EACAC,UAAAA,IAGJqB,EAAkBF,EAAYlB,OAC9BuB,EAAsBL,EAAYtC,QAEtC,CAACmB,EAAWD,IAIZd,EAACI,cAAAgD,QAAM,CAAAC,MAAM,SAAS5B,OAAQA,GAC1BzB,EAACI,cAAAC,MACG,CAAAE,QAAQ,OACR+C,cAAc,MACd9C,UAAW,CACPA,EACAC,EAAAA,QAAO8C,UACE,UAAT3D,EAAmBa,EAAAA,QAAO+C,MAAQ,KACtB,aAAZpC,EAAyBX,EAAAA,QAAOgD,SAAW,MAE/CjC,SAAUA,EACVkC,WAAW,UAEX1D,EAAAI,cAACC,MAAG,CAACsD,SAAU,GACVtC,GAASC,EACNtB,EAAAI,cAACC,EAAAA,IAAG,CACAH,GAAG,OACHK,QAAQ,OACRqD,eAAe,eACfF,WAAW,WAEX1D,EAAAI,cAACH,OACG,CAAAE,KAAkB,aAAZiB,EAAyB,UAAY,OAC3ClB,GAAG,QACH2D,QAAS/D,GAERuB,EACGrB,EAAAI,cAAA,OAAA,CAAMI,UAAWC,EAAM,QAACqD,cAAezC,GACvC,MAEPC,EACGtB,EAACI,cAAAC,MAAI,CAAAG,UAAWC,EAAM,QAACa,eAAgByC,YAAY,SAC9CzC,GAEL,MAER,KACHvB,EAAS2C,IAEbZ,GAA+B,eAApBC,EAAmCD,EAAU,MAG5DP,GAAWY,EACRnC,gBAACgE,UAAO,CAACC,MAAM,QAAQZ,MAAM,QAAQ7B,SAAUA,GAC1CD,EACGvB,gBAACkE,SAAM,CAACC,MAAM,QACVnE,EAAAI,cAACP,EAAa,CAAAC,GAAImC,EAAWrC,KAAMA,GAC9B2B,IAGT,KAIwB,UAA3BM,EACG7B,EAACI,cAAA8D,SAAO,CAAAC,MAAM,WAAW1B,KACzB,MAER"}
+{"version":3,"file":"base-field.js","sources":["../../src/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../utils/common-helpers'\nimport { Text } from '../text'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\nimport type { WithEnhancedClassName } from '../utils/common-types'\nimport { Spinner } from '../spinner'\nimport { Column, Columns } from '../columns'\n\n// Define the remaining characters before the character count turns red\n// See: https://twist.com/a/1585/ch/765851/t/6664583/c/93631846 for latest spec\nconst MAX_LENGTH_THRESHOLD = 0\n\ntype FieldTone = 'neutral' | 'success' | 'error' | 'loading'\n\ntype FieldMessageProps = {\n    id: string\n    children: React.ReactNode\n    tone: FieldTone\n}\n\nfunction fieldToneToTextTone(tone: FieldTone) {\n    return tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'secondary'\n}\n\nfunction FieldMessage({ id, children, tone }: FieldMessageProps) {\n    return (\n        <Text as=\"p\" tone={fieldToneToTextTone(tone)} size=\"copy\" id={id}>\n            {tone === 'loading' ? (\n                <Box\n                    as=\"span\"\n                    marginRight=\"xsmall\"\n                    display=\"inlineFlex\"\n                    className={styles.loadingIcon}\n                >\n                    <Spinner size={16} />\n                </Box>\n            ) : null}\n            {children}\n        </Text>\n    )\n}\n\ntype FieldCharacterCountProps = {\n    children: React.ReactNode\n    tone: FieldTone\n}\n\nfunction FieldCharacterCount({ children, tone }: FieldCharacterCountProps) {\n    return (\n        <Text tone={fieldToneToTextTone(tone)} size=\"copy\">\n            {children}\n        </Text>\n    )\n}\n\ntype ValidateInputLengthProps = {\n    value?: React.InputHTMLAttributes<unknown>['value']\n    maxLength?: number\n}\n\ntype ValidateInputLengthResult = {\n    count: string | null\n    tone: FieldTone\n}\n\nfunction validateInputLength({\n    value,\n    maxLength,\n}: ValidateInputLengthProps): ValidateInputLengthResult {\n    if (!maxLength) {\n        return {\n            count: null,\n            tone: 'neutral',\n        }\n    }\n\n    const currentLength = String(value || '').length\n    const isNearMaxLength = maxLength - currentLength <= MAX_LENGTH_THRESHOLD\n\n    return {\n        count: `${currentLength}/${maxLength}`,\n        tone: isNearMaxLength ? 'error' : 'neutral',\n    }\n}\n\n//\n// BaseField\n//\n\ntype ChildrenRenderProps = {\n    id: string\n    value?: React.InputHTMLAttributes<unknown>['value']\n    'aria-describedby'?: string\n    'aria-invalid'?: true\n    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>\n    characterCountElement?: React.ReactNode | null\n}\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldVariant = 'default' | 'bordered'\ntype BaseFieldVariantProps = {\n    /**\n     * Provides alternative visual layouts or modes that the field can be rendered in.\n     *\n     * Namely, there are two variants supported:\n     *\n     * - the default one\n     * - a \"bordered\" variant, where the border of the field surrounds also the labels, instead\n     *   of just surrounding the actual field element\n     *\n     * In both cases, the message and description texts for the field lie outside the bordered\n     * area.\n     */\n    variant?: BaseFieldVariant\n}\n\nexport type BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'maxLength' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * This prop is not optional. Consumers of field components must be explicit about not\n         * wanting a label by passing `label=\"\"` or `label={null}`. In those situations, consumers\n         * should make sure that fields are properly labelled semantically by other means (e.g using\n         * `aria-labelledby`, or rendering a `<label />` element referencing the field by id).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        label: React.ReactNode\n\n        /**\n         * The initial value for this field element.\n         *\n         * This prop is used to calculate the character count for the initial value, and is then\n         * passed to the underlying child element.\n         */\n        value?: React.InputHTMLAttributes<unknown>['value']\n\n        /**\n         * An optional extra element to be placed to the right of the main label.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see BaseFieldProps['label']\n         *\n         * @deprecated The usage of this element is discouraged given that it was removed from the\n         * latest form field spec revision.\n         */\n        auxiliaryLabel?: React.ReactNode\n\n        /**\n         * A message associated with the field. It is rendered below the field, and with an\n         * appearance that conveys the tone of the field (e.g. coloured red for errors, green for\n         * success, etc).\n         *\n         * The message element is associated to the field via the `aria-describedby` attribute.\n         *\n         * In the future, when `aria-errormessage` gets better user agent support, we should use it\n         * to associate the filed with a message when tone is `\"error\"`.\n         *\n         * @see BaseFieldProps['tone']\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid\n         */\n        message?: React.ReactNode\n\n        /**\n         * The tone with which the message, if any, is presented.\n         *\n         * If the tone is `\"error\"`, the field border turns red, and the message, if any, is also\n         * red.\n         *\n         * When the tone is `\"loading\"`, it is recommended that you also disable the field. However,\n         * this is not enforced by the component. It is only a recommendation.\n         *\n         * @see BaseFieldProps['message']\n         * @see BaseFieldProps['hint']\n         */\n        tone?: FieldTone\n\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n\n        /**\n         * The maximum number of characters that the input field can accept.\n         * When this limit is reached, the input field will not accept any more characters.\n         * The counter element will turn red when the number of characters is within 10 of the maximum limit.\n         */\n        maxLength?: number\n\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: ChildrenRenderProps) => React.ReactNode\n\n        /**\n         * The position of the character count element.\n         * It can be shown below the field or inline with the field.\n         *\n         * @default 'below'\n         */\n        characterCountPosition?: 'below' | 'inline' | 'hidden'\n    } & (\n        | {\n              supportsStartAndEndSlots?: false\n              endSlot?: never\n              endSlotPosition?: never\n          }\n        | {\n              supportsStartAndEndSlots: true\n              endSlot?: React.ReactElement | string | number\n              /**\n               * This is solely for `bordered` variants of TextField. When set to `bottom` (the default),\n               * the endSlot will be placed inline with the input field. When set to `fullHeight`, the endSlot\n               * will be placed to the side of both the input field and the label.\n               */\n              endSlotPosition?: 'bottom' | 'fullHeight'\n          }\n    )\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'fieldRef' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\n/**\n * BaseField is a base component that provides a consistent structure for form fields.\n */\nfunction BaseField({\n    variant = 'default',\n    label,\n    value,\n    auxiliaryLabel,\n    message,\n    tone = 'neutral',\n    className,\n    children,\n    maxWidth,\n    maxLength,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n    characterCountPosition = 'below',\n    endSlot,\n    endSlotPosition = 'bottom',\n}: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const messageId = useId()\n\n    const inputLength = validateInputLength({ value, maxLength })\n\n    const [characterCount, setCharacterCount] = React.useState<string | null>(inputLength.count)\n    const [characterCountTone, setCharacterCountTone] = React.useState<FieldTone>(inputLength.tone)\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (message ? messageId : null)\n\n    const renderCharacterCountBelow = characterCountPosition === 'below' && characterCount !== null\n    const renderCharacterCountInline =\n        characterCountPosition === 'inline' && characterCount !== null\n\n    function renderCharacterCount() {\n        return <FieldCharacterCount tone={characterCountTone}>{characterCount}</FieldCharacterCount>\n    }\n\n    const childrenProps: ChildrenRenderProps = {\n        id,\n        value,\n        ...(ariaDescribedBy ? { 'aria-describedby': ariaDescribedBy } : {}),\n        'aria-invalid': tone === 'error' ? true : undefined,\n        onChange(event) {\n            if (!maxLength) {\n                return\n            }\n\n            const inputLength = validateInputLength({\n                value: event.currentTarget.value,\n                maxLength,\n            })\n\n            setCharacterCount(inputLength.count)\n            setCharacterCountTone(inputLength.tone)\n        },\n        // If the character count is inline, we pass it as a prop to the children element so it can be rendered inline\n        characterCountElement: renderCharacterCountInline ? renderCharacterCount() : null,\n    }\n\n    React.useEffect(\n        function updateCharacterCountOnPropChange() {\n            if (!maxLength) {\n                return\n            }\n\n            const inputLength = validateInputLength({\n                value,\n                maxLength,\n            })\n\n            setCharacterCount(inputLength.count)\n            setCharacterCountTone(inputLength.tone)\n        },\n        [maxLength, value],\n    )\n\n    return (\n        <Stack space=\"xsmall\" hidden={hidden}>\n            <Box\n                display=\"flex\"\n                flexDirection=\"row\"\n                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n                alignItems=\"center\"\n            >\n                <Box flexGrow={1}>\n                    {label || auxiliaryLabel ? (\n                        <Box\n                            as=\"span\"\n                            display=\"flex\"\n                            justifyContent=\"spaceBetween\"\n                            alignItems=\"flexEnd\"\n                        >\n                            <Text\n                                size={variant === 'bordered' ? 'caption' : 'body'}\n                                as=\"label\"\n                                htmlFor={id}\n                            >\n                                {label ? (\n                                    <span className={styles.primaryLabel}>{label}</span>\n                                ) : null}\n                            </Text>\n                            {auxiliaryLabel ? (\n                                <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                                    {auxiliaryLabel}\n                                </Box>\n                            ) : null}\n                        </Box>\n                    ) : null}\n                    {children(childrenProps)}\n                </Box>\n                {endSlot && endSlotPosition === 'fullHeight' ? endSlot : null}\n            </Box>\n\n            {message || renderCharacterCountBelow ? (\n                <Columns align=\"right\" space=\"small\" maxWidth={maxWidth}>\n                    {message ? (\n                        <Column width=\"auto\">\n                            <FieldMessage id={messageId} tone={tone}>\n                                {message}\n                            </FieldMessage>\n                        </Column>\n                    ) : null}\n\n                    {/* If the character count is below the field, we render it, if it's inline,\n                        we pass it as a prop to the children element so it can be rendered inline */}\n                    {characterCountPosition === 'below' ? (\n                        <Column width=\"content\">{renderCharacterCount()}</Column>\n                    ) : null}\n                </Columns>\n            ) : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["fieldToneToTextTone","tone","FieldMessage","id","children","React","Text","as","size","createElement","Box","marginRight","display","className","styles","loadingIcon","Spinner","FieldCharacterCount","validateInputLength","value","maxLength","count","currentLength","String","length","variant","label","auxiliaryLabel","message","maxWidth","hidden","aria-describedby","originalAriaDescribedBy","originalId","characterCountPosition","endSlot","endSlotPosition","useId","messageId","inputLength","characterCount","setCharacterCount","useState","characterCountTone","setCharacterCountTone","ariaDescribedBy","renderCharacterCountBelow","renderCharacterCountInline","renderCharacterCount","childrenProps","_objectSpread","objectSpread2","aria-invalid","undefined","onChange","event","currentTarget","characterCountElement","useEffect","Stack","space","flexDirection","container","error","bordered","alignItems","flexGrow","justifyContent","htmlFor","primaryLabel","paddingLeft","Columns","align","Column","width"],"mappings":"ypBAuBA,SAASA,EAAoBC,GACzB,MAAgB,UAATA,EAAmB,SAAoB,YAATA,EAAqB,WAAa,YAG3E,SAASC,GAAaC,GAAEA,EAAFC,SAAMA,EAANH,KAAgBA,IAClC,OACII,gBAACC,OAAI,CAACC,GAAG,IAAIN,KAAMD,EAAoBC,GAAOO,KAAK,OAAOL,GAAIA,GAChD,YAATF,EACGI,EAACI,cAAAC,EAAAA,IACG,CAAAH,GAAG,OACHI,YAAY,SACZC,QAAQ,aACRC,UAAWC,EAAM,QAACC,aAElBV,EAACI,cAAAO,UAAQ,CAAAR,KAAM,MAEnB,KACHJ,GAUb,SAASa,GAAoBb,SAAEA,EAAFH,KAAYA,IACrC,OACII,EAACI,cAAAH,QAAKL,KAAMD,EAAoBC,GAAOO,KAAK,QACvCJ,GAeb,SAASc,GAAoBC,MACzBA,EADyBC,UAEzBA,IAEA,IAAKA,EACD,MAAO,CACHC,MAAO,KACPpB,KAAM,WAId,MAAMqB,EAAgBC,OAAOJ,GAAS,IAAIK,OAG1C,MAAO,CACHH,MAAUC,EAAL,IAAsBF,EAC3BnB,KAJoBmB,EAAYE,GAnEX,EAuEG,QAAU,6BA8J1C,UAAmBG,QACfA,EAAU,UADKC,MAEfA,EAFeP,MAGfA,EAHeQ,eAIfA,EAJeC,QAKfA,EALe3B,KAMfA,EAAO,UANQY,UAOfA,EAPeT,SAQfA,EAReyB,SASfA,EATeT,UAUfA,EAVeU,OAWfA,EACAC,mBAAoBC,EACpB7B,GAAI8B,EAbWC,uBAcfA,EAAyB,QAdVC,QAefA,EAfeC,gBAgBfA,EAAkB,WAElB,MAAMjC,EAAKkC,QAAMJ,GACXK,EAAYD,EAAAA,QAEZE,EAAcrB,EAAoB,CAAEC,MAAAA,EAAOC,UAAAA,KAE1CoB,EAAgBC,GAAqBpC,EAAMqC,SAAwBH,EAAYlB,QAC/EsB,EAAoBC,GAAyBvC,EAAMqC,SAAoBH,EAAYtC,MAEpF4C,EAAkBb,MAAAA,EAAAA,EAA4BJ,EAAUU,EAAY,KAEpEQ,EAAuD,UAA3BZ,GAAyD,OAAnBM,EAClEO,EACyB,WAA3Bb,GAA0D,OAAnBM,EAE3C,SAASQ,IACL,OAAO3C,EAAAI,cAACQ,EAAoB,CAAAhB,KAAM0C,GAAqBH,GAG3D,MAAMS,EAAaC,EAAAC,cAAAD,gBAAA,CACf/C,GAAAA,EACAgB,MAAAA,GACI0B,EAAkB,CAAEd,mBAAoBc,GAAoB,IAHjD,GAAA,CAIfO,eAAyB,UAATnD,QAA0BoD,EAC1CC,SAASC,GACL,IAAKnC,EACD,OAGJ,MAAMmB,EAAcrB,EAAoB,CACpCC,MAAOoC,EAAMC,cAAcrC,MAC3BC,UAAAA,IAGJqB,EAAkBF,EAAYlB,OAC9BuB,EAAsBL,EAAYtC,OAGtCwD,sBAAuBV,EAA6BC,IAAyB,OAoBjF,OAjBA3C,EAAMqD,WACF,WACI,IAAKtC,EACD,OAGJ,MAAMmB,EAAcrB,EAAoB,CACpCC,MAAAA,EACAC,UAAAA,IAGJqB,EAAkBF,EAAYlB,OAC9BuB,EAAsBL,EAAYtC,QAEtC,CAACmB,EAAWD,IAIZd,EAACI,cAAAkD,QAAM,CAAAC,MAAM,SAAS9B,OAAQA,GAC1BzB,EAACI,cAAAC,MACG,CAAAE,QAAQ,OACRiD,cAAc,MACdhD,UAAW,CACPA,EACAC,EAAAA,QAAOgD,UACE,UAAT7D,EAAmBa,EAAAA,QAAOiD,MAAQ,KACtB,aAAZtC,EAAyBX,EAAAA,QAAOkD,SAAW,MAE/CnC,SAAUA,EACVoC,WAAW,UAEX5D,EAAAI,cAACC,MAAG,CAACwD,SAAU,GACVxC,GAASC,EACNtB,EAAAI,cAACC,EAAAA,IAAG,CACAH,GAAG,OACHK,QAAQ,OACRuD,eAAe,eACfF,WAAW,WAEX5D,EAAAI,cAACH,OACG,CAAAE,KAAkB,aAAZiB,EAAyB,UAAY,OAC3ClB,GAAG,QACH6D,QAASjE,GAERuB,EACGrB,EAAAI,cAAA,OAAA,CAAMI,UAAWC,EAAM,QAACuD,cAAe3C,GACvC,MAEPC,EACGtB,EAACI,cAAAC,MAAI,CAAAG,UAAWC,EAAM,QAACa,eAAgB2C,YAAY,SAC9C3C,GAEL,MAER,KACHvB,EAAS6C,IAEbd,GAA+B,eAApBC,EAAmCD,EAAU,MAG5DP,GAAWkB,EACRzC,gBAACkE,UAAO,CAACC,MAAM,QAAQZ,MAAM,QAAQ/B,SAAUA,GAC1CD,EACGvB,gBAACoE,SAAM,CAACC,MAAM,QACVrE,EAAAI,cAACP,EAAa,CAAAC,GAAImC,EAAWrC,KAAMA,GAC9B2B,IAGT,KAIwB,UAA3BM,EACG7B,EAACI,cAAAgE,SAAO,CAAAC,MAAM,WAAW1B,KACzB,MAER"}

package/lib/box/box.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={box:"fb8d74bb","position-absolute":"_18f74af9","position-fixed":"b292fef1","position-relative":"e4e217d4","position-sticky":"_66895b64","tablet-position-absolute":"_00e8a0ce","tablet-position-fixed":"efaf64be","tablet-position-relative":"_76e540fd","tablet-position-sticky":"bd286900","desktop-position-absolute":"_09e9f472","desktop-position-fixed":"_893383f1","desktop-position-relative":"dea3890d","desktop-position-sticky":"_6a61c94d","display-block":"_64dcc902","display-flex":"_14423c92","display-inline":"_6a38242d","display-inlineBlock":"_348efc1f","display-inlineFlex":"_150907c8","display-none":"_3da48ad6","tablet-display-block":"_0daac9f2","tablet-display-flex":"f62c43b1","tablet-display-inline":"_5839a4e4","tablet-display-inlineBlock":"_8068aaf2","tablet-display-inlineFlex":"_76562ea5","tablet-display-none":"_4f7a886f","desktop-display-block":"_4fd4b789","desktop-display-flex":"_4d08e78f","desktop-display-inline":"_0da15585","desktop-display-inlineBlock":"d0fcc019","desktop-display-inlineFlex":"_79f967d4","desktop-display-none":"_2ffa0d03","flexDirection-column":"_2d7320f2","flexDirection-row":"_5f8879d9","tablet-flexDirection-column":"_2c919a43","tablet-flexDirection-row":"_4da1f194","desktop-flexDirection-column":"_66fd35ea","desktop-flexDirection-row":"_4b79448d","flexWrap-wrap":"_202b0c8c","flexWrap-nowrap":"_45a8f27f","flexShrink-0":"_7d9ec5b0","flexGrow-0":"_9ce442fb","flexGrow-1":"c3b69d70","alignItems-flexStart":"_7cc6458c","alignItems-center":"b76144ce","alignItems-flexEnd":"e42ffab4","alignItems-baseline":"_3975b234","tablet-alignItems-flexStart":"b670f77e","tablet-alignItems-center":"_976e7156","tablet-alignItems-flexEnd":"_385c60b1","tablet-alignItems-baseline":"_52b577fc","desktop-alignItems-flexStart":"_2e1cc27f","desktop-alignItems-center":"_3a9e51e9","desktop-alignItems-flexEnd":"dfc189b2","desktop-alignItems-baseline":"_5fabaec4","justifyContent-flexStart":"a65d9c55","justifyContent-center":"b4e05554","justifyContent-flexEnd":"f76804e6","justifyContent-spaceAround":"_0095203e","justifyContent-spaceBetween":"_6eb365d1","justifyContent-spaceEvenly":"_4111e641","tablet-justifyContent-flexStart":"_6fda855d","tablet-justifyContent-center":"c2d359f8","tablet-justifyContent-flexEnd":"e271941d","tablet-justifyContent-spaceAround":"_2321488d","tablet-justifyContent-spaceBetween":"e4a9b2e3","tablet-justifyContent-spaceEvenly":"bdc232f2","desktop-justifyContent-flexStart":"_0d16bb5c","desktop-justifyContent-center":"eca8082a","desktop-justifyContent-flexEnd":"_97ea6bb7","desktop-justifyContent-spaceBetween":"_58e61602","alignSelf-stretch":"_794c8ab8","alignSelf-flexStart":"c510efd5","alignSelf-center":"b3f71626","alignSelf-flexEnd":"_13771d73","alignSelf-baseline":"_64318454","tablet-alignSelf-stretch":"_309c6ba7","tablet-alignSelf-flexStart":"_92dfd036","tablet-alignSelf-center":"_811f9906","tablet-alignSelf-flexEnd":"_2cd2336e","tablet-alignSelf-baseline":"bd2c9dad","desktop-alignSelf-stretch":"d8215926","desktop-alignSelf-flexStart":"b78f5c06","desktop-alignSelf-center":"_683e0cdb","desktop-alignSelf-flexEnd":"_489f1dc8","desktop-alignSelf-baseline":"_4aca1032","overflow-hidden":"_68aab614","overflow-auto":"ac28a3b1","overflow-visible":"_50b88b52","overflow-scroll":"c2fdd1c1","height-full":"_75ca308a","bg-default":"a9ca9830","bg-aside":"b9ff0c93","bg-highlight":"efc303e5","bg-selected":"ec657626","bg-toast":"_00d3482f","borderRadius-standard":"_958da546","borderRadius-full":"_79077c62","border-primary":"_68981e89","border-secondary":"_2bda8f7a","border-tertiary":"_7152c573","textAlign-start":"_1f362dec","textAlign-center":"_1c09cd18","textAlign-end":"b9663f5e","textAlign-justify":"a0eba489","tablet-textAlign-start":"_60b9abf8","tablet-textAlign-center":"_2c70943c","tablet-textAlign-end":"a512d4e1","tablet-textAlign-justify":"_5d02c334","desktop-textAlign-start":"ad2496a1","desktop-textAlign-center":"ee87b016","desktop-textAlign-end":"_6dd48127","desktop-textAlign-justify":"_1e70d216"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={box:"fc42413d","position-absolute":"fae81daf","position-fixed":"a5bc8416","position-relative":"fc1a1048","position-sticky":"bf792080","tablet-position-absolute":"_077996a2","tablet-position-fixed":"fa51626b","tablet-position-relative":"fbe5cea1","tablet-position-sticky":"_78273192","desktop-position-absolute":"_0683335b","desktop-position-fixed":"bcf9a7db","desktop-position-relative":"dab014b0","desktop-position-sticky":"e55b598a","display-block":"bf535c88","display-flex":"_27c1200b","display-inline":"_1ef58463","display-inlineBlock":"a895e180","display-inlineFlex":"_02433984","display-none":"_19b230db","tablet-display-block":"_2eb0ba1d","tablet-display-flex":"_69ab5292","tablet-display-inline":"_09a172d4","tablet-display-inlineBlock":"c867403c","tablet-display-inlineFlex":"a06f5b03","tablet-display-none":"_308a410d","desktop-display-block":"b5ea9f74","desktop-display-flex":"_81a526b3","desktop-display-inline":"_33230982","desktop-display-inlineBlock":"c7c28f1c","desktop-display-inlineFlex":"_5dfe6a6a","desktop-display-none":"fa742bb1","flexDirection-column":"_4e77e331","flexDirection-row":"c5d6948b","tablet-flexDirection-column":"_722ad9d8","tablet-flexDirection-row":"d84857d6","desktop-flexDirection-column":"d210a0a6","desktop-flexDirection-row":"a595b7c2","flexWrap-wrap":"_5cf75136","flexWrap-nowrap":"c6d608b1","flexShrink-0":"_939846ab","flexGrow-0":"f395bbe4","flexGrow-1":"cdffd92b","alignItems-flexStart":"da077e1e","alignItems-center":"_7c11de88","alignItems-flexEnd":"_09800955","alignItems-baseline":"_56fe7031","tablet-alignItems-flexStart":"_4c1e3df8","tablet-alignItems-center":"b8ba195f","tablet-alignItems-flexEnd":"_458238a7","tablet-alignItems-baseline":"f6955d23","desktop-alignItems-flexStart":"_8e366cca","desktop-alignItems-center":"e80b2a2b","desktop-alignItems-flexEnd":"e6f78987","desktop-alignItems-baseline":"f743fd7d","justifyContent-flexStart":"_2cd556a2","justifyContent-center":"_77dba57f","justifyContent-flexEnd":"_7ead66ef","justifyContent-spaceAround":"_427c6b6d","justifyContent-spaceBetween":"_9c70828c","justifyContent-spaceEvenly":"_78d2888b","tablet-justifyContent-flexStart":"b0f972a3","tablet-justifyContent-center":"d7cc571a","tablet-justifyContent-flexEnd":"_9d4cb75e","tablet-justifyContent-spaceAround":"d2908336","tablet-justifyContent-spaceBetween":"efa22111","tablet-justifyContent-spaceEvenly":"fad3882e","desktop-justifyContent-flexStart":"_82791437","desktop-justifyContent-center":"_3eede6d0","desktop-justifyContent-flexEnd":"_1317e3be","desktop-justifyContent-spaceBetween":"_162f8f46","alignSelf-stretch":"_5a4d7786","alignSelf-flexStart":"_23686007","alignSelf-center":"_8c629ed6","alignSelf-flexEnd":"_1a1362d5","alignSelf-baseline":"_931e11af","tablet-alignSelf-stretch":"_074adf9d","tablet-alignSelf-flexStart":"_10b3c4c3","tablet-alignSelf-center":"ec7bfaa3","tablet-alignSelf-flexEnd":"_082cde15","tablet-alignSelf-baseline":"_8364dd8d","desktop-alignSelf-stretch":"_59829012","desktop-alignSelf-flexStart":"_1a16b466","desktop-alignSelf-center":"_14dfc484","desktop-alignSelf-flexEnd":"cbb32b7a","desktop-alignSelf-baseline":"f20b993e","overflow-hidden":"_38c1c8db","overflow-auto":"e2ecdf44","overflow-visible":"_59aa1494","overflow-scroll":"b9d7368e","height-full":"_16a71a93","bg-default":"_823d82e1","bg-aside":"a04264ee","bg-highlight":"_37ba068e","bg-selected":"_9d78e1a8","bg-toast":"_386112c4","borderRadius-standard":"_922c85d2","borderRadius-full":"_39557ce4","border-primary":"_5c33734d","border-secondary":"_933e6ebb","border-tertiary":"_5a5e0ae6","textAlign-start":"_0302f2e4","textAlign-center":"daebe850","textAlign-end":"_98e44132","textAlign-justify":"e49be40c","tablet-textAlign-start":"_7ec524c5","tablet-textAlign-center":"ce28df84","tablet-textAlign-end":"_77593dc2","tablet-textAlign-justify":"_69855088","desktop-textAlign-start":"c11d2bf7","desktop-textAlign-center":"_793b791a","desktop-textAlign-end":"_28ec2d24","desktop-textAlign-justify":"_14e4fc76"};
 //# sourceMappingURL=box.module.css.js.map

package/package.json

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

package/styles/avatar.css

@@ -1,5 +1,5 @@
 :root{--reactist-avatar-size-xxsmall:16px;--reactist-avatar-size-xsmall:20px;--reactist-avatar-size-small:30px;--reactist-avatar-size-medium:32px;--reactist-avatar-size-large:34px;--reactist-avatar-size-xlarge:48px;--reactist-avatar-size-xxlarge:70px;--reactist-avatar-size-xxxlarge:100px;--reactist-avatar-size:var(--reactist-avatar-size-large)}._38a1be89{flex-shrink:0;background-position:50%;color:#fff;text-align:center;border-radius:50%;width:var(--reactist-avatar-size);height:var(--reactist-avatar-size);line-height:var(--reactist-avatar-size);background-size:var(--reactist-avatar-size);font-size:calc(var(--reactist-avatar-size)/2)}.d32e92ae{--reactist-avatar-size:var(--reactist-avatar-size-xxsmall)}._0667d719{--reactist-avatar-size:var(--reactist-avatar-size-xsmall)}.cf529fcf{--reactist-avatar-size:var(--reactist-avatar-size-small)}._6e268eab{--reactist-avatar-size:var(--reactist-avatar-size-medium)}.d64c62cf{--reactist-avatar-size:var(--reactist-avatar-size-large)}._44fb77de{--reactist-avatar-size:var(--reactist-avatar-size-xlarge)}._01f85e0e{--reactist-avatar-size:var(--reactist-avatar-size-xxlarge)}._41a5fe19{--reactist-avatar-size:var(--reactist-avatar-size-xxxlarge)}@media (min-width:768px){._6ab1577d{--reactist-avatar-size:var(--reactist-avatar-size-xxsmall)}.b52a4963{--reactist-avatar-size:var(--reactist-avatar-size-xsmall)}._714a8419{--reactist-avatar-size:var(--reactist-avatar-size-small)}._81cd4d51{--reactist-avatar-size:var(--reactist-avatar-size-medium)}.bf0a4edb{--reactist-avatar-size:var(--reactist-avatar-size-large)}.e4f0dabd{--reactist-avatar-size:var(--reactist-avatar-size-xlarge)}._67ea065d{--reactist-avatar-size:var(--reactist-avatar-size-xxlarge)}._2af7f76f{--reactist-avatar-size:var(--reactist-avatar-size-xxxlarge)}}@media (min-width:992px){._759081dc{--reactist-avatar-size:var(--reactist-avatar-size-xxsmall)}._8290d1c1{--reactist-avatar-size:var(--reactist-avatar-size-xsmall)}._48ea172d{--reactist-avatar-size:var(--reactist-avatar-size-small)}._758f6641{--reactist-avatar-size:var(--reactist-avatar-size-medium)}.f9ada088{--reactist-avatar-size:var(--reactist-avatar-size-large)}.d3bb7470{--reactist-avatar-size:var(--reactist-avatar-size-xlarge)}._9a312ee3{--reactist-avatar-size:var(--reactist-avatar-size-xxlarge)}.a1d30c23{--reactist-avatar-size:var(--reactist-avatar-size-xxxlarge)}}
-.fb8d74bb{box-sizing:border-box;border:0;margin:0;padding:0;font-size:var(--reactist-font-size-body);font-family:inherit;vertical-align:baseline;background-color:transparent;list-style:none}pre.fb8d74bb{font-family:var(--reactist-font-family-monospace)}.fb8d74bb[hidden]{display:none!important}._18f74af9{position:absolute}.b292fef1{position:fixed}.e4e217d4{position:relative}._66895b64{position:-webkit-sticky;position:sticky}@media (min-width:768px){._00e8a0ce{position:absolute}.efaf64be{position:fixed}._76e540fd{position:relative}.bd286900{position:-webkit-sticky;position:sticky}}@media (min-width:992px){._09e9f472{position:absolute}._893383f1{position:fixed}.dea3890d{position:relative}._6a61c94d{position:-webkit-sticky;position:sticky}}._64dcc902{display:block}._14423c92{display:flex}._6a38242d{display:inline}._348efc1f{display:inline-block}._150907c8{display:inline-flex}._3da48ad6{display:none}@media (min-width:768px){._0daac9f2{display:block}.f62c43b1{display:flex}._5839a4e4{display:inline}._8068aaf2{display:inline-block}._76562ea5{display:inline-flex}._4f7a886f{display:none}}@media (min-width:992px){._4fd4b789{display:block}._4d08e78f{display:flex}._0da15585{display:inline}.d0fcc019{display:inline-block}._79f967d4{display:inline-flex}._2ffa0d03{display:none}}._2d7320f2{flex-direction:column}._5f8879d9{flex-direction:row}@media (min-width:768px){._2c919a43{flex-direction:column}._4da1f194{flex-direction:row}}@media (min-width:992px){._66fd35ea{flex-direction:column}._4b79448d{flex-direction:row}}._202b0c8c{flex-wrap:wrap}._45a8f27f{flex-wrap:nowrap}._7d9ec5b0{flex-shrink:0}._9ce442fb{flex-grow:0}.c3b69d70{flex-grow:1}._7cc6458c{align-items:flex-start}.b76144ce{align-items:center}.e42ffab4{align-items:flex-end}._3975b234{align-items:baseline}@media (min-width:768px){.b670f77e{align-items:flex-start}._976e7156{align-items:center}._385c60b1{align-items:flex-end}._52b577fc{align-items:baseline}}@media (min-width:992px){._2e1cc27f{align-items:flex-start}._3a9e51e9{align-items:center}.dfc189b2{align-items:flex-end}._5fabaec4{align-items:baseline}}.a65d9c55{justify-content:flex-start}.b4e05554{justify-content:center}.f76804e6{justify-content:flex-end}._0095203e{justify-content:space-around}._6eb365d1{justify-content:space-between}._4111e641{justify-content:space-evenly}@media (min-width:768px){._6fda855d{justify-content:flex-start}.c2d359f8{justify-content:center}.e271941d{justify-content:flex-end}._2321488d{justify-content:space-around}.e4a9b2e3{justify-content:space-between}.bdc232f2{justify-content:space-evenly}}@media (min-width:992px){._0d16bb5c{justify-content:flex-start}.eca8082a{justify-content:center}._97ea6bb7{justify-content:flex-end}._2321488d{justify-content:space-around}._58e61602{justify-content:space-between}.bdc232f2{justify-content:space-evenly}}._794c8ab8{align-self:stretch}.c510efd5{align-self:flex-start}.b3f71626{align-self:center}._13771d73{align-self:flex-end}._64318454{align-self:baseline}@media (min-width:768px){._309c6ba7{align-self:stretch}._92dfd036{align-self:flex-start}._811f9906{align-self:center}._2cd2336e{align-self:flex-end}.bd2c9dad{align-self:baseline}}@media (min-width:992px){.d8215926{align-self:stretch}.b78f5c06{align-self:flex-start}._683e0cdb{align-self:center}._489f1dc8{align-self:flex-end}._4aca1032{align-self:baseline}}._68aab614{overflow:hidden}.ac28a3b1{overflow:auto}._50b88b52{overflow:visible}.c2fdd1c1{overflow:scroll}._75ca308a{height:100%}.a9ca9830{background-color:var(--reactist-bg-default)}.b9ff0c93{background-color:var(--reactist-bg-aside)}.efc303e5{background-color:var(--reactist-bg-highlight)}.ec657626{background-color:var(--reactist-bg-selected)}._00d3482f{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)}._958da546{border-radius:var(--reactist-border-radius-small)}._79077c62{border-radius:var(--reactist-border-radius-large)}._68981e89{border:1px solid var(--reactist-divider-primary)}._2bda8f7a{border:1px solid var(--reactist-divider-secondary)}._7152c573{border:1px solid var(--reactist-divider-tertiary)}._1f362dec{text-align:start}._1c09cd18{text-align:center}.b9663f5e{text-align:end}.a0eba489{text-align:justify}@media (min-width:768px){._60b9abf8{text-align:start}._2c70943c{text-align:center}.a512d4e1{text-align:end}._5d02c334{text-align:justify}}@media (min-width:992px){.ad2496a1{text-align:start}.ee87b016{text-align:center}._6dd48127{text-align:end}._1e70d216{text-align:justify}}
+.fc42413d{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.fc42413d{font-family:var(--reactist-font-family-monospace)}.fc42413d[hidden]{display:none!important}.fae81daf{position:absolute}.a5bc8416{position:fixed}.fc1a1048{position:relative}.bf792080{position:-webkit-sticky;position:sticky}@media (min-width:768px){._077996a2{position:absolute}.fa51626b{position:fixed}.fbe5cea1{position:relative}._78273192{position:-webkit-sticky;position:sticky}}@media (min-width:992px){._0683335b{position:absolute}.bcf9a7db{position:fixed}.dab014b0{position:relative}.e55b598a{position:-webkit-sticky;position:sticky}}.bf535c88{display:block}._27c1200b{display:flex}._1ef58463{display:inline}.a895e180{display:inline-block}._02433984{display:inline-flex}._19b230db{display:none}@media (min-width:768px){._2eb0ba1d{display:block}._69ab5292{display:flex}._09a172d4{display:inline}.c867403c{display:inline-block}.a06f5b03{display:inline-flex}._308a410d{display:none}}@media (min-width:992px){.b5ea9f74{display:block}._81a526b3{display:flex}._33230982{display:inline}.c7c28f1c{display:inline-block}._5dfe6a6a{display:inline-flex}.fa742bb1{display:none}}._4e77e331{flex-direction:column}.c5d6948b{flex-direction:row}@media (min-width:768px){._722ad9d8{flex-direction:column}.d84857d6{flex-direction:row}}@media (min-width:992px){.d210a0a6{flex-direction:column}.a595b7c2{flex-direction:row}}._5cf75136{flex-wrap:wrap}.c6d608b1{flex-wrap:nowrap}._939846ab{flex-shrink:0}.f395bbe4{flex-grow:0}.cdffd92b{flex-grow:1}.da077e1e{align-items:flex-start}._7c11de88{align-items:center}._09800955{align-items:flex-end}._56fe7031{align-items:baseline}@media (min-width:768px){._4c1e3df8{align-items:flex-start}.b8ba195f{align-items:center}._458238a7{align-items:flex-end}.f6955d23{align-items:baseline}}@media (min-width:992px){._8e366cca{align-items:flex-start}.e80b2a2b{align-items:center}.e6f78987{align-items:flex-end}.f743fd7d{align-items:baseline}}._2cd556a2{justify-content:flex-start}._77dba57f{justify-content:center}._7ead66ef{justify-content:flex-end}._427c6b6d{justify-content:space-around}._9c70828c{justify-content:space-between}._78d2888b{justify-content:space-evenly}@media (min-width:768px){.b0f972a3{justify-content:flex-start}.d7cc571a{justify-content:center}._9d4cb75e{justify-content:flex-end}.d2908336{justify-content:space-around}.efa22111{justify-content:space-between}.fad3882e{justify-content:space-evenly}}@media (min-width:992px){._82791437{justify-content:flex-start}._3eede6d0{justify-content:center}._1317e3be{justify-content:flex-end}.d2908336{justify-content:space-around}._162f8f46{justify-content:space-between}.fad3882e{justify-content:space-evenly}}._5a4d7786{align-self:stretch}._23686007{align-self:flex-start}._8c629ed6{align-self:center}._1a1362d5{align-self:flex-end}._931e11af{align-self:baseline}@media (min-width:768px){._074adf9d{align-self:stretch}._10b3c4c3{align-self:flex-start}.ec7bfaa3{align-self:center}._082cde15{align-self:flex-end}._8364dd8d{align-self:baseline}}@media (min-width:992px){._59829012{align-self:stretch}._1a16b466{align-self:flex-start}._14dfc484{align-self:center}.cbb32b7a{align-self:flex-end}.f20b993e{align-self:baseline}}._38c1c8db{overflow:hidden}.e2ecdf44{overflow:auto}._59aa1494{overflow:visible}.b9d7368e{overflow:scroll}._16a71a93{height:100%}._823d82e1{background-color:var(--reactist-bg-default)}.a04264ee{background-color:var(--reactist-bg-aside)}._37ba068e{background-color:var(--reactist-bg-highlight)}._9d78e1a8{background-color:var(--reactist-bg-selected)}._386112c4{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)}._922c85d2{border-radius:var(--reactist-border-radius-small)}._39557ce4{border-radius:var(--reactist-border-radius-large)}._5c33734d{border:1px solid var(--reactist-divider-primary)}._933e6ebb{border:1px solid var(--reactist-divider-secondary)}._5a5e0ae6{border:1px solid var(--reactist-divider-tertiary)}._0302f2e4{text-align:start}.daebe850{text-align:center}._98e44132{text-align:end}.e49be40c{text-align:justify}@media (min-width:768px){._7ec524c5{text-align:start}.ce28df84{text-align:center}._77593dc2{text-align:end}._69855088{text-align:justify}}@media (min-width:992px){.c11d2bf7{text-align:start}._793b791a{text-align:center}._28ec2d24{text-align:end}._14e4fc76{text-align:justify}}
 .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)}}
 .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)}}
 ._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)}

package/styles/badge.css

@@ -1,4 +1,4 @@
-.fb8d74bb{box-sizing:border-box;border:0;margin:0;padding:0;font-size:var(--reactist-font-size-body);font-family:inherit;vertical-align:baseline;background-color:transparent;list-style:none}pre.fb8d74bb{font-family:var(--reactist-font-family-monospace)}.fb8d74bb[hidden]{display:none!important}._18f74af9{position:absolute}.b292fef1{position:fixed}.e4e217d4{position:relative}._66895b64{position:-webkit-sticky;position:sticky}@media (min-width:768px){._00e8a0ce{position:absolute}.efaf64be{position:fixed}._76e540fd{position:relative}.bd286900{position:-webkit-sticky;position:sticky}}@media (min-width:992px){._09e9f472{position:absolute}._893383f1{position:fixed}.dea3890d{position:relative}._6a61c94d{position:-webkit-sticky;position:sticky}}._64dcc902{display:block}._14423c92{display:flex}._6a38242d{display:inline}._348efc1f{display:inline-block}._150907c8{display:inline-flex}._3da48ad6{display:none}@media (min-width:768px){._0daac9f2{display:block}.f62c43b1{display:flex}._5839a4e4{display:inline}._8068aaf2{display:inline-block}._76562ea5{display:inline-flex}._4f7a886f{display:none}}@media (min-width:992px){._4fd4b789{display:block}._4d08e78f{display:flex}._0da15585{display:inline}.d0fcc019{display:inline-block}._79f967d4{display:inline-flex}._2ffa0d03{display:none}}._2d7320f2{flex-direction:column}._5f8879d9{flex-direction:row}@media (min-width:768px){._2c919a43{flex-direction:column}._4da1f194{flex-direction:row}}@media (min-width:992px){._66fd35ea{flex-direction:column}._4b79448d{flex-direction:row}}._202b0c8c{flex-wrap:wrap}._45a8f27f{flex-wrap:nowrap}._7d9ec5b0{flex-shrink:0}._9ce442fb{flex-grow:0}.c3b69d70{flex-grow:1}._7cc6458c{align-items:flex-start}.b76144ce{align-items:center}.e42ffab4{align-items:flex-end}._3975b234{align-items:baseline}@media (min-width:768px){.b670f77e{align-items:flex-start}._976e7156{align-items:center}._385c60b1{align-items:flex-end}._52b577fc{align-items:baseline}}@media (min-width:992px){._2e1cc27f{align-items:flex-start}._3a9e51e9{align-items:center}.dfc189b2{align-items:flex-end}._5fabaec4{align-items:baseline}}.a65d9c55{justify-content:flex-start}.b4e05554{justify-content:center}.f76804e6{justify-content:flex-end}._0095203e{justify-content:space-around}._6eb365d1{justify-content:space-between}._4111e641{justify-content:space-evenly}@media (min-width:768px){._6fda855d{justify-content:flex-start}.c2d359f8{justify-content:center}.e271941d{justify-content:flex-end}._2321488d{justify-content:space-around}.e4a9b2e3{justify-content:space-between}.bdc232f2{justify-content:space-evenly}}@media (min-width:992px){._0d16bb5c{justify-content:flex-start}.eca8082a{justify-content:center}._97ea6bb7{justify-content:flex-end}._2321488d{justify-content:space-around}._58e61602{justify-content:space-between}.bdc232f2{justify-content:space-evenly}}._794c8ab8{align-self:stretch}.c510efd5{align-self:flex-start}.b3f71626{align-self:center}._13771d73{align-self:flex-end}._64318454{align-self:baseline}@media (min-width:768px){._309c6ba7{align-self:stretch}._92dfd036{align-self:flex-start}._811f9906{align-self:center}._2cd2336e{align-self:flex-end}.bd2c9dad{align-self:baseline}}@media (min-width:992px){.d8215926{align-self:stretch}.b78f5c06{align-self:flex-start}._683e0cdb{align-self:center}._489f1dc8{align-self:flex-end}._4aca1032{align-self:baseline}}._68aab614{overflow:hidden}.ac28a3b1{overflow:auto}._50b88b52{overflow:visible}.c2fdd1c1{overflow:scroll}._75ca308a{height:100%}.a9ca9830{background-color:var(--reactist-bg-default)}.b9ff0c93{background-color:var(--reactist-bg-aside)}.efc303e5{background-color:var(--reactist-bg-highlight)}.ec657626{background-color:var(--reactist-bg-selected)}._00d3482f{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)}._958da546{border-radius:var(--reactist-border-radius-small)}._79077c62{border-radius:var(--reactist-border-radius-large)}._68981e89{border:1px solid var(--reactist-divider-primary)}._2bda8f7a{border:1px solid var(--reactist-divider-secondary)}._7152c573{border:1px solid var(--reactist-divider-tertiary)}._1f362dec{text-align:start}._1c09cd18{text-align:center}.b9663f5e{text-align:end}.a0eba489{text-align:justify}@media (min-width:768px){._60b9abf8{text-align:start}._2c70943c{text-align:center}.a512d4e1{text-align:end}._5d02c334{text-align:justify}}@media (min-width:992px){.ad2496a1{text-align:start}.ee87b016{text-align:center}._6dd48127{text-align:end}._1e70d216{text-align:justify}}
+.fc42413d{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.fc42413d{font-family:var(--reactist-font-family-monospace)}.fc42413d[hidden]{display:none!important}.fae81daf{position:absolute}.a5bc8416{position:fixed}.fc1a1048{position:relative}.bf792080{position:-webkit-sticky;position:sticky}@media (min-width:768px){._077996a2{position:absolute}.fa51626b{position:fixed}.fbe5cea1{position:relative}._78273192{position:-webkit-sticky;position:sticky}}@media (min-width:992px){._0683335b{position:absolute}.bcf9a7db{position:fixed}.dab014b0{position:relative}.e55b598a{position:-webkit-sticky;position:sticky}}.bf535c88{display:block}._27c1200b{display:flex}._1ef58463{display:inline}.a895e180{display:inline-block}._02433984{display:inline-flex}._19b230db{display:none}@media (min-width:768px){._2eb0ba1d{display:block}._69ab5292{display:flex}._09a172d4{display:inline}.c867403c{display:inline-block}.a06f5b03{display:inline-flex}._308a410d{display:none}}@media (min-width:992px){.b5ea9f74{display:block}._81a526b3{display:flex}._33230982{display:inline}.c7c28f1c{display:inline-block}._5dfe6a6a{display:inline-flex}.fa742bb1{display:none}}._4e77e331{flex-direction:column}.c5d6948b{flex-direction:row}@media (min-width:768px){._722ad9d8{flex-direction:column}.d84857d6{flex-direction:row}}@media (min-width:992px){.d210a0a6{flex-direction:column}.a595b7c2{flex-direction:row}}._5cf75136{flex-wrap:wrap}.c6d608b1{flex-wrap:nowrap}._939846ab{flex-shrink:0}.f395bbe4{flex-grow:0}.cdffd92b{flex-grow:1}.da077e1e{align-items:flex-start}._7c11de88{align-items:center}._09800955{align-items:flex-end}._56fe7031{align-items:baseline}@media (min-width:768px){._4c1e3df8{align-items:flex-start}.b8ba195f{align-items:center}._458238a7{align-items:flex-end}.f6955d23{align-items:baseline}}@media (min-width:992px){._8e366cca{align-items:flex-start}.e80b2a2b{align-items:center}.e6f78987{align-items:flex-end}.f743fd7d{align-items:baseline}}._2cd556a2{justify-content:flex-start}._77dba57f{justify-content:center}._7ead66ef{justify-content:flex-end}._427c6b6d{justify-content:space-around}._9c70828c{justify-content:space-between}._78d2888b{justify-content:space-evenly}@media (min-width:768px){.b0f972a3{justify-content:flex-start}.d7cc571a{justify-content:center}._9d4cb75e{justify-content:flex-end}.d2908336{justify-content:space-around}.efa22111{justify-content:space-between}.fad3882e{justify-content:space-evenly}}@media (min-width:992px){._82791437{justify-content:flex-start}._3eede6d0{justify-content:center}._1317e3be{justify-content:flex-end}.d2908336{justify-content:space-around}._162f8f46{justify-content:space-between}.fad3882e{justify-content:space-evenly}}._5a4d7786{align-self:stretch}._23686007{align-self:flex-start}._8c629ed6{align-self:center}._1a1362d5{align-self:flex-end}._931e11af{align-self:baseline}@media (min-width:768px){._074adf9d{align-self:stretch}._10b3c4c3{align-self:flex-start}.ec7bfaa3{align-self:center}._082cde15{align-self:flex-end}._8364dd8d{align-self:baseline}}@media (min-width:992px){._59829012{align-self:stretch}._1a16b466{align-self:flex-start}._14dfc484{align-self:center}.cbb32b7a{align-self:flex-end}.f20b993e{align-self:baseline}}._38c1c8db{overflow:hidden}.e2ecdf44{overflow:auto}._59aa1494{overflow:visible}.b9d7368e{overflow:scroll}._16a71a93{height:100%}._823d82e1{background-color:var(--reactist-bg-default)}.a04264ee{background-color:var(--reactist-bg-aside)}._37ba068e{background-color:var(--reactist-bg-highlight)}._9d78e1a8{background-color:var(--reactist-bg-selected)}._386112c4{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)}._922c85d2{border-radius:var(--reactist-border-radius-small)}._39557ce4{border-radius:var(--reactist-border-radius-large)}._5c33734d{border:1px solid var(--reactist-divider-primary)}._933e6ebb{border:1px solid var(--reactist-divider-secondary)}._5a5e0ae6{border:1px solid var(--reactist-divider-tertiary)}._0302f2e4{text-align:start}.daebe850{text-align:center}._98e44132{text-align:end}.e49be40c{text-align:justify}@media (min-width:768px){._7ec524c5{text-align:start}.ce28df84{text-align:center}._77593dc2{text-align:end}._69855088{text-align:justify}}@media (min-width:992px){.c11d2bf7{text-align:start}._793b791a{text-align:center}._28ec2d24{text-align:end}._14e4fc76{text-align:justify}}
 .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)}}
 .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)}}
 ._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)}

package/styles/banner.css

@@ -1,4 +1,4 @@
-.fb8d74bb{box-sizing:border-box;border:0;margin:0;padding:0;font-size:var(--reactist-font-size-body);font-family:inherit;vertical-align:baseline;background-color:transparent;list-style:none}pre.fb8d74bb{font-family:var(--reactist-font-family-monospace)}.fb8d74bb[hidden]{display:none!important}._18f74af9{position:absolute}.b292fef1{position:fixed}.e4e217d4{position:relative}._66895b64{position:-webkit-sticky;position:sticky}@media (min-width:768px){._00e8a0ce{position:absolute}.efaf64be{position:fixed}._76e540fd{position:relative}.bd286900{position:-webkit-sticky;position:sticky}}@media (min-width:992px){._09e9f472{position:absolute}._893383f1{position:fixed}.dea3890d{position:relative}._6a61c94d{position:-webkit-sticky;position:sticky}}._64dcc902{display:block}._14423c92{display:flex}._6a38242d{display:inline}._348efc1f{display:inline-block}._150907c8{display:inline-flex}._3da48ad6{display:none}@media (min-width:768px){._0daac9f2{display:block}.f62c43b1{display:flex}._5839a4e4{display:inline}._8068aaf2{display:inline-block}._76562ea5{display:inline-flex}._4f7a886f{display:none}}@media (min-width:992px){._4fd4b789{display:block}._4d08e78f{display:flex}._0da15585{display:inline}.d0fcc019{display:inline-block}._79f967d4{display:inline-flex}._2ffa0d03{display:none}}._2d7320f2{flex-direction:column}._5f8879d9{flex-direction:row}@media (min-width:768px){._2c919a43{flex-direction:column}._4da1f194{flex-direction:row}}@media (min-width:992px){._66fd35ea{flex-direction:column}._4b79448d{flex-direction:row}}._202b0c8c{flex-wrap:wrap}._45a8f27f{flex-wrap:nowrap}._7d9ec5b0{flex-shrink:0}._9ce442fb{flex-grow:0}.c3b69d70{flex-grow:1}._7cc6458c{align-items:flex-start}.b76144ce{align-items:center}.e42ffab4{align-items:flex-end}._3975b234{align-items:baseline}@media (min-width:768px){.b670f77e{align-items:flex-start}._976e7156{align-items:center}._385c60b1{align-items:flex-end}._52b577fc{align-items:baseline}}@media (min-width:992px){._2e1cc27f{align-items:flex-start}._3a9e51e9{align-items:center}.dfc189b2{align-items:flex-end}._5fabaec4{align-items:baseline}}.a65d9c55{justify-content:flex-start}.b4e05554{justify-content:center}.f76804e6{justify-content:flex-end}._0095203e{justify-content:space-around}._6eb365d1{justify-content:space-between}._4111e641{justify-content:space-evenly}@media (min-width:768px){._6fda855d{justify-content:flex-start}.c2d359f8{justify-content:center}.e271941d{justify-content:flex-end}._2321488d{justify-content:space-around}.e4a9b2e3{justify-content:space-between}.bdc232f2{justify-content:space-evenly}}@media (min-width:992px){._0d16bb5c{justify-content:flex-start}.eca8082a{justify-content:center}._97ea6bb7{justify-content:flex-end}._2321488d{justify-content:space-around}._58e61602{justify-content:space-between}.bdc232f2{justify-content:space-evenly}}._794c8ab8{align-self:stretch}.c510efd5{align-self:flex-start}.b3f71626{align-self:center}._13771d73{align-self:flex-end}._64318454{align-self:baseline}@media (min-width:768px){._309c6ba7{align-self:stretch}._92dfd036{align-self:flex-start}._811f9906{align-self:center}._2cd2336e{align-self:flex-end}.bd2c9dad{align-self:baseline}}@media (min-width:992px){.d8215926{align-self:stretch}.b78f5c06{align-self:flex-start}._683e0cdb{align-self:center}._489f1dc8{align-self:flex-end}._4aca1032{align-self:baseline}}._68aab614{overflow:hidden}.ac28a3b1{overflow:auto}._50b88b52{overflow:visible}.c2fdd1c1{overflow:scroll}._75ca308a{height:100%}.a9ca9830{background-color:var(--reactist-bg-default)}.b9ff0c93{background-color:var(--reactist-bg-aside)}.efc303e5{background-color:var(--reactist-bg-highlight)}.ec657626{background-color:var(--reactist-bg-selected)}._00d3482f{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)}._958da546{border-radius:var(--reactist-border-radius-small)}._79077c62{border-radius:var(--reactist-border-radius-large)}._68981e89{border:1px solid var(--reactist-divider-primary)}._2bda8f7a{border:1px solid var(--reactist-divider-secondary)}._7152c573{border:1px solid var(--reactist-divider-tertiary)}._1f362dec{text-align:start}._1c09cd18{text-align:center}.b9663f5e{text-align:end}.a0eba489{text-align:justify}@media (min-width:768px){._60b9abf8{text-align:start}._2c70943c{text-align:center}.a512d4e1{text-align:end}._5d02c334{text-align:justify}}@media (min-width:992px){.ad2496a1{text-align:start}.ee87b016{text-align:center}._6dd48127{text-align:end}._1e70d216{text-align:justify}}
+.fc42413d{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.fc42413d{font-family:var(--reactist-font-family-monospace)}.fc42413d[hidden]{display:none!important}.fae81daf{position:absolute}.a5bc8416{position:fixed}.fc1a1048{position:relative}.bf792080{position:-webkit-sticky;position:sticky}@media (min-width:768px){._077996a2{position:absolute}.fa51626b{position:fixed}.fbe5cea1{position:relative}._78273192{position:-webkit-sticky;position:sticky}}@media (min-width:992px){._0683335b{position:absolute}.bcf9a7db{position:fixed}.dab014b0{position:relative}.e55b598a{position:-webkit-sticky;position:sticky}}.bf535c88{display:block}._27c1200b{display:flex}._1ef58463{display:inline}.a895e180{display:inline-block}._02433984{display:inline-flex}._19b230db{display:none}@media (min-width:768px){._2eb0ba1d{display:block}._69ab5292{display:flex}._09a172d4{display:inline}.c867403c{display:inline-block}.a06f5b03{display:inline-flex}._308a410d{display:none}}@media (min-width:992px){.b5ea9f74{display:block}._81a526b3{display:flex}._33230982{display:inline}.c7c28f1c{display:inline-block}._5dfe6a6a{display:inline-flex}.fa742bb1{display:none}}._4e77e331{flex-direction:column}.c5d6948b{flex-direction:row}@media (min-width:768px){._722ad9d8{flex-direction:column}.d84857d6{flex-direction:row}}@media (min-width:992px){.d210a0a6{flex-direction:column}.a595b7c2{flex-direction:row}}._5cf75136{flex-wrap:wrap}.c6d608b1{flex-wrap:nowrap}._939846ab{flex-shrink:0}.f395bbe4{flex-grow:0}.cdffd92b{flex-grow:1}.da077e1e{align-items:flex-start}._7c11de88{align-items:center}._09800955{align-items:flex-end}._56fe7031{align-items:baseline}@media (min-width:768px){._4c1e3df8{align-items:flex-start}.b8ba195f{align-items:center}._458238a7{align-items:flex-end}.f6955d23{align-items:baseline}}@media (min-width:992px){._8e366cca{align-items:flex-start}.e80b2a2b{align-items:center}.e6f78987{align-items:flex-end}.f743fd7d{align-items:baseline}}._2cd556a2{justify-content:flex-start}._77dba57f{justify-content:center}._7ead66ef{justify-content:flex-end}._427c6b6d{justify-content:space-around}._9c70828c{justify-content:space-between}._78d2888b{justify-content:space-evenly}@media (min-width:768px){.b0f972a3{justify-content:flex-start}.d7cc571a{justify-content:center}._9d4cb75e{justify-content:flex-end}.d2908336{justify-content:space-around}.efa22111{justify-content:space-between}.fad3882e{justify-content:space-evenly}}@media (min-width:992px){._82791437{justify-content:flex-start}._3eede6d0{justify-content:center}._1317e3be{justify-content:flex-end}.d2908336{justify-content:space-around}._162f8f46{justify-content:space-between}.fad3882e{justify-content:space-evenly}}._5a4d7786{align-self:stretch}._23686007{align-self:flex-start}._8c629ed6{align-self:center}._1a1362d5{align-self:flex-end}._931e11af{align-self:baseline}@media (min-width:768px){._074adf9d{align-self:stretch}._10b3c4c3{align-self:flex-start}.ec7bfaa3{align-self:center}._082cde15{align-self:flex-end}._8364dd8d{align-self:baseline}}@media (min-width:992px){._59829012{align-self:stretch}._1a16b466{align-self:flex-start}._14dfc484{align-self:center}.cbb32b7a{align-self:flex-end}.f20b993e{align-self:baseline}}._38c1c8db{overflow:hidden}.e2ecdf44{overflow:auto}._59aa1494{overflow:visible}.b9d7368e{overflow:scroll}._16a71a93{height:100%}._823d82e1{background-color:var(--reactist-bg-default)}.a04264ee{background-color:var(--reactist-bg-aside)}._37ba068e{background-color:var(--reactist-bg-highlight)}._9d78e1a8{background-color:var(--reactist-bg-selected)}._386112c4{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)}._922c85d2{border-radius:var(--reactist-border-radius-small)}._39557ce4{border-radius:var(--reactist-border-radius-large)}._5c33734d{border:1px solid var(--reactist-divider-primary)}._933e6ebb{border:1px solid var(--reactist-divider-secondary)}._5a5e0ae6{border:1px solid var(--reactist-divider-tertiary)}._0302f2e4{text-align:start}.daebe850{text-align:center}._98e44132{text-align:end}.e49be40c{text-align:justify}@media (min-width:768px){._7ec524c5{text-align:start}.ce28df84{text-align:center}._77593dc2{text-align:end}._69855088{text-align:justify}}@media (min-width:992px){.c11d2bf7{text-align:start}._793b791a{text-align:center}._28ec2d24{text-align:end}._14e4fc76{text-align:justify}}
 .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)}}
 .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)}}
 ._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)}