@doist/reactist 27.0.0 → 27.1.0

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\nconst MAX_LENGTH_THRESHOLD = 10\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}\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\ntype 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         * 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\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'fieldRef' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\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}: 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 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    }\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                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n            >\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 ? <span className={styles.primaryLabel}>{label}</span> : 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            {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                    {characterCount ? (\n                        <Column width=\"content\">\n                            <FieldCharacterCount tone={characterCountTone}>\n                                {characterCount}\n                            </FieldCharacterCount>\n                        </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","useId","messageId","inputLength","characterCount","setCharacterCount","useState","characterCountTone","setCharacterCountTone","ariaDescribedBy","childrenProps","_objectSpread","undefined","onChange","event","currentTarget","useEffect","updateCharacterCountOnPropChange","Stack","space","container","error","bordered","justifyContent","alignItems","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\nconst MAX_LENGTH_THRESHOLD = 10\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}\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\ntype 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\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'fieldRef' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\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}: 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 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    }\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                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n            >\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 ? <span className={styles.primaryLabel}>{label}</span> : 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            {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                    {characterCount ? (\n                        <Column width=\"content\">\n                            <FieldCharacterCount tone={characterCountTone}>\n                                {characterCount}\n                            </FieldCharacterCount>\n                        </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","useId","messageId","inputLength","characterCount","setCharacterCount","useState","characterCountTone","setCharacterCountTone","ariaDescribedBy","childrenProps","_objectSpread","undefined","onChange","event","currentTarget","useEffect","updateCharacterCountOnPropChange","Stack","space","container","error","bordered","justifyContent","alignItems","htmlFor","primaryLabel","paddingLeft","Columns","align","Column","width"],"mappings":"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"}

package/es/icons/banner-icon.js

@@ -1,5 +1,6 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
+import modules_de8ae2e5 from './banner-icon.module.css.js';
 
 const _excluded = ["type"];
 const bannerIconForType = {
@@ -20,6 +21,7 @@ function BannerIcon(_ref) {
   const Icon = bannerIconForType[type];
   return Icon ? /*#__PURE__*/React.createElement(Icon, _objectSpread2(_objectSpread2({}, props), {}, {
     "data-testid": "banner-icon-" + type,
+    className: modules_de8ae2e5[type],
     "aria-hidden": true
   })) : null;
 }
@@ -31,7 +33,7 @@ function BannerInfoIcon(props) {
     height: "24",
     fill: "none"
   }, props), /*#__PURE__*/React.createElement("path", {
-    fill: "#316FEA",
+    fill: "currentColor",
     fillRule: "evenodd",
     d: "M21 12.25a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-8-3.94a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2.75 1.94a.75.75 0 0 0 0 1.5h1.25v3.5h-1.25a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5H13V11a.752.752 0 0 0-.75-.75h-2Z",
     clipRule: "evenodd"
@@ -45,7 +47,7 @@ function BannerUpgradeIcon(props) {
     height: "24",
     fill: "none"
   }, props), /*#__PURE__*/React.createElement("path", {
-    fill: "#F48318",
+    fill: "currentColor",
     fillRule: "evenodd",
     d: "M13.974 4.226a2.485 2.485 0 0 0-3.948 0 2.485 2.485 0 0 1-2.304.954A2.485 2.485 0 0 0 4.93 7.972a2.485 2.485 0 0 1-.954 2.304 2.485 2.485 0 0 0 0 3.948 2.485 2.485 0 0 1 .954 2.304 2.485 2.485 0 0 0 2.792 2.792 2.485 2.485 0 0 1 2.304.954 2.485 2.485 0 0 0 3.948 0 2.485 2.485 0 0 1 2.304-.954 2.485 2.485 0 0 0 2.792-2.792 2.485 2.485 0 0 1 .954-2.304 2.485 2.485 0 0 0 0-3.948 2.485 2.485 0 0 1-.954-2.304 2.485 2.485 0 0 0-2.792-2.792 2.485 2.485 0 0 1-2.304-.954ZM11.228 7.08c-.297-.581-1.177-.345-1.144.306l.125 2.437a.605.605 0 0 1-.635.635l-2.437-.125c-.651-.033-.887.847-.306 1.144l2.172 1.11c.32.163.428.567.233.868L7.91 15.503c-.355.548.289 1.192.837.837l2.047-1.326a.605.605 0 0 1 .868.233l1.11 2.172c.297.581 1.177.345 1.144-.306l-.125-2.437a.605.605 0 0 1 .635-.635l2.437.125c.651.033.887-.847.306-1.144l-2.172-1.11a.605.605 0 0 1-.233-.868l1.326-2.047c.355-.548-.289-1.192-.837-.837l-2.047 1.326a.605.605 0 0 1-.868-.233l-1.11-2.172Z",
     clipRule: "evenodd"
@@ -62,7 +64,7 @@ function BannerExperimentIcon(props) {
     height: "25",
     fill: "none"
   }, props), /*#__PURE__*/React.createElement("path", {
-    fill: "#F48318",
+    fill: "currentColor",
     fillRule: "evenodd",
     d: "M12 3.25a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-3 4.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H14v4.333a2 2 0 0 0 .4 1.2l4.4 5.867a1 1 0 0 1-.8 1.6H6a1 1 0 0 1-.8-1.6l4.4-5.867a2 2 0 0 0 .4-1.2V8.25h-.5a.5.5 0 0 1-.5-.5Zm1.5-2.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-4 3v4.333a3 3 0 0 1-.6 1.8l-.752 1.003c.11.078.245.16.403.226.41.173.985.253 1.682-.188.808-.51 1.547-.67 2.142-.674l-.275-.367a3 3 0 0 1-.6-1.8V8.25h-2Z",
     clipRule: "evenodd"
@@ -76,7 +78,7 @@ function BannerWarningIcon(props) {
     height: "24",
     fill: "none"
   }, props), /*#__PURE__*/React.createElement("path", {
-    fill: "#EB8909",
+    fill: "currentColor",
     fillRule: "evenodd",
     d: "m10.272 5.212-7.018 12.03a2 2 0 0 0 1.728 3.008h14.036a2 2 0 0 0 1.727-3.008l-7.018-12.03a2 2 0 0 0-3.455 0ZM13 16.75a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.014-7.014A.987.987 0 0 0 12 8.75h-.027l-.028.002a.987.987 0 0 0-.93 1.04l.236 4.25c.053.944 1.445.944 1.498 0l.236-4.25.001-.028v-.028Z",
     clipRule: "evenodd"
@@ -90,7 +92,7 @@ function BannerErrorIcon(props) {
     height: "24",
     fill: "none"
   }, props), /*#__PURE__*/React.createElement("path", {
-    fill: "#DC4C3E",
+    fill: "currentColor",
     fillRule: "evenodd",
     d: "M12.987 2.5a2.07 2.07 0 0 0-1.974 0L4.048 6.287A1.989 1.989 0 0 0 3 8.032v7.436c0 .725.401 1.393 1.048 1.745L11.013 21a2.07 2.07 0 0 0 1.974 0l6.965-3.787A1.989 1.989 0 0 0 21 15.468V8.032c0-.725-.401-1.393-1.048-1.745L12.987 2.5ZM12 7.25a.987.987 0 0 1 .986 1.014l-.001.027-.236 4.25c-.053.945-1.445.945-1.498 0l-.236-4.25a.987.987 0 0 1 .93-1.04h.028L12 7.25Zm1 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",
     clipRule: "evenodd"
@@ -104,7 +106,7 @@ function BannerSuccessIcon(props) {
     height: "24",
     fill: "none"
   }, props), /*#__PURE__*/React.createElement("path", {
-    fill: "#058527",
+    fill: "currentColor",
     fillRule: "evenodd",
     d: "M21 12.25a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-5.555-2.99a.75.75 0 0 1 1.06 1.06l-5.303 5.303a.748.748 0 0 1-1.061 0L7.666 13.15a.75.75 0 1 1 1.06-1.06l1.945 1.944 4.774-4.773Z",
     clipRule: "evenodd"

package/es/icons/banner-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner-icon.js","sources":["../../src/icons/banner-icon.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { SystemBannerType } from '../banner/banner'\n\nconst bannerIconForType: Record<SystemBannerType, typeof BannerInfoIcon> = {\n    info: BannerInfoIcon,\n    upgrade: BannerUpgradeIcon,\n    experiment: BannerExperimentIcon,\n    warning: BannerWarningIcon,\n    error: BannerErrorIcon,\n    success: BannerSuccessIcon,\n}\n\nfunction BannerIcon({ type, ...props }: JSX.IntrinsicElements['svg'] & { type: SystemBannerType }) {\n    const Icon = bannerIconForType[type]\n    return Icon ? <Icon {...props} data-testid={`banner-icon-${type}`} aria-hidden /> : null\n}\n\nfunction BannerInfoIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"#316FEA\"\n                fillRule=\"evenodd\"\n                d=\"M21 12.25a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-8-3.94a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2.75 1.94a.75.75 0 0 0 0 1.5h1.25v3.5h-1.25a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5H13V11a.752.752 0 0 0-.75-.75h-2Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerUpgradeIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"#F48318\"\n                fillRule=\"evenodd\"\n                d=\"M13.974 4.226a2.485 2.485 0 0 0-3.948 0 2.485 2.485 0 0 1-2.304.954A2.485 2.485 0 0 0 4.93 7.972a2.485 2.485 0 0 1-.954 2.304 2.485 2.485 0 0 0 0 3.948 2.485 2.485 0 0 1 .954 2.304 2.485 2.485 0 0 0 2.792 2.792 2.485 2.485 0 0 1 2.304.954 2.485 2.485 0 0 0 3.948 0 2.485 2.485 0 0 1 2.304-.954 2.485 2.485 0 0 0 2.792-2.792 2.485 2.485 0 0 1 .954-2.304 2.485 2.485 0 0 0 0-3.948 2.485 2.485 0 0 1-.954-2.304 2.485 2.485 0 0 0-2.792-2.792 2.485 2.485 0 0 1-2.304-.954ZM11.228 7.08c-.297-.581-1.177-.345-1.144.306l.125 2.437a.605.605 0 0 1-.635.635l-2.437-.125c-.651-.033-.887.847-.306 1.144l2.172 1.11c.32.163.428.567.233.868L7.91 15.503c-.355.548.289 1.192.837.837l2.047-1.326a.605.605 0 0 1 .868.233l1.11 2.172c.297.581 1.177.345 1.144-.306l-.125-2.437a.605.605 0 0 1 .635-.635l2.437.125c.651.033.887-.847.306-1.144l-2.172-1.11a.605.605 0 0 1-.233-.868l1.326-2.047c.355-.548-.289-1.192-.837-.837l-2.047 1.326a.605.605 0 0 1-.868-.233l-1.11-2.172Z\"\n                clipRule=\"evenodd\"\n            />\n            <path\n                fill=\"#fff\"\n                d=\"M10.084 7.387c-.033-.651.847-.887 1.144-.306l1.11 2.172c.163.32.567.428.868.233l2.047-1.326c.548-.355 1.192.289.837.837l-1.326 2.047a.605.605 0 0 0 .233.868l2.172 1.11c.581.297.345 1.177-.306 1.144l-2.437-.125a.605.605 0 0 0-.635.635l.125 2.437c.033.651-.847.887-1.144.306l-1.11-2.172a.605.605 0 0 0-.868-.233L8.747 16.34c-.548.355-1.192-.289-.837-.837l1.326-2.047a.605.605 0 0 0-.233-.868l-2.172-1.11c-.581-.297-.345-1.177.306-1.144l2.437.125a.605.605 0 0 0 .635-.635l-.125-2.437Z\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerExperimentIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" fill=\"none\" {...props}>\n            <path\n                fill=\"#F48318\"\n                fillRule=\"evenodd\"\n                d=\"M12 3.25a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-3 4.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H14v4.333a2 2 0 0 0 .4 1.2l4.4 5.867a1 1 0 0 1-.8 1.6H6a1 1 0 0 1-.8-1.6l4.4-5.867a2 2 0 0 0 .4-1.2V8.25h-.5a.5.5 0 0 1-.5-.5Zm1.5-2.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-4 3v4.333a3 3 0 0 1-.6 1.8l-.752 1.003c.11.078.245.16.403.226.41.173.985.253 1.682-.188.808-.51 1.547-.67 2.142-.674l-.275-.367a3 3 0 0 1-.6-1.8V8.25h-2Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerWarningIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"#EB8909\"\n                fillRule=\"evenodd\"\n                d=\"m10.272 5.212-7.018 12.03a2 2 0 0 0 1.728 3.008h14.036a2 2 0 0 0 1.727-3.008l-7.018-12.03a2 2 0 0 0-3.455 0ZM13 16.75a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.014-7.014A.987.987 0 0 0 12 8.75h-.027l-.028.002a.987.987 0 0 0-.93 1.04l.236 4.25c.053.944 1.445.944 1.498 0l.236-4.25.001-.028v-.028Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerErrorIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"#DC4C3E\"\n                fillRule=\"evenodd\"\n                d=\"M12.987 2.5a2.07 2.07 0 0 0-1.974 0L4.048 6.287A1.989 1.989 0 0 0 3 8.032v7.436c0 .725.401 1.393 1.048 1.745L11.013 21a2.07 2.07 0 0 0 1.974 0l6.965-3.787A1.989 1.989 0 0 0 21 15.468V8.032c0-.725-.401-1.393-1.048-1.745L12.987 2.5ZM12 7.25a.987.987 0 0 1 .986 1.014l-.001.027-.236 4.25c-.053.945-1.445.945-1.498 0l-.236-4.25a.987.987 0 0 1 .93-1.04h.028L12 7.25Zm1 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerSuccessIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"#058527\"\n                fillRule=\"evenodd\"\n                d=\"M21 12.25a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-5.555-2.99a.75.75 0 0 1 1.06 1.06l-5.303 5.303a.748.748 0 0 1-1.061 0L7.666 13.15a.75.75 0 1 1 1.06-1.06l1.945 1.944 4.774-4.773Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nexport { BannerIcon }\n"],"names":["bannerIconForType","info","BannerInfoIcon","upgrade","BannerUpgradeIcon","experiment","BannerExperimentIcon","warning","BannerWarningIcon","error","BannerErrorIcon","success","BannerSuccessIcon","BannerIcon","type","props","Icon","React","createElement","_objectSpread","xmlns","width","height","fill","fillRule","d","clipRule"],"mappings":"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"}
+{"version":3,"file":"banner-icon.js","sources":["../../src/icons/banner-icon.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { SystemBannerType } from '../banner/banner'\n\nimport styles from './banner-icon.module.css'\n\nconst bannerIconForType: Record<SystemBannerType, typeof BannerInfoIcon> = {\n    info: BannerInfoIcon,\n    upgrade: BannerUpgradeIcon,\n    experiment: BannerExperimentIcon,\n    warning: BannerWarningIcon,\n    error: BannerErrorIcon,\n    success: BannerSuccessIcon,\n}\n\nfunction BannerIcon({ type, ...props }: JSX.IntrinsicElements['svg'] & { type: SystemBannerType }) {\n    const Icon = bannerIconForType[type]\n    return Icon ? (\n        <Icon {...props} data-testid={`banner-icon-${type}`} className={styles[type]} aria-hidden />\n    ) : null\n}\n\nfunction BannerInfoIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n                d=\"M21 12.25a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-8-3.94a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2.75 1.94a.75.75 0 0 0 0 1.5h1.25v3.5h-1.25a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5H13V11a.752.752 0 0 0-.75-.75h-2Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerUpgradeIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n                d=\"M13.974 4.226a2.485 2.485 0 0 0-3.948 0 2.485 2.485 0 0 1-2.304.954A2.485 2.485 0 0 0 4.93 7.972a2.485 2.485 0 0 1-.954 2.304 2.485 2.485 0 0 0 0 3.948 2.485 2.485 0 0 1 .954 2.304 2.485 2.485 0 0 0 2.792 2.792 2.485 2.485 0 0 1 2.304.954 2.485 2.485 0 0 0 3.948 0 2.485 2.485 0 0 1 2.304-.954 2.485 2.485 0 0 0 2.792-2.792 2.485 2.485 0 0 1 .954-2.304 2.485 2.485 0 0 0 0-3.948 2.485 2.485 0 0 1-.954-2.304 2.485 2.485 0 0 0-2.792-2.792 2.485 2.485 0 0 1-2.304-.954ZM11.228 7.08c-.297-.581-1.177-.345-1.144.306l.125 2.437a.605.605 0 0 1-.635.635l-2.437-.125c-.651-.033-.887.847-.306 1.144l2.172 1.11c.32.163.428.567.233.868L7.91 15.503c-.355.548.289 1.192.837.837l2.047-1.326a.605.605 0 0 1 .868.233l1.11 2.172c.297.581 1.177.345 1.144-.306l-.125-2.437a.605.605 0 0 1 .635-.635l2.437.125c.651.033.887-.847.306-1.144l-2.172-1.11a.605.605 0 0 1-.233-.868l1.326-2.047c.355-.548-.289-1.192-.837-.837l-2.047 1.326a.605.605 0 0 1-.868-.233l-1.11-2.172Z\"\n                clipRule=\"evenodd\"\n            />\n            <path\n                fill=\"#fff\"\n                d=\"M10.084 7.387c-.033-.651.847-.887 1.144-.306l1.11 2.172c.163.32.567.428.868.233l2.047-1.326c.548-.355 1.192.289.837.837l-1.326 2.047a.605.605 0 0 0 .233.868l2.172 1.11c.581.297.345 1.177-.306 1.144l-2.437-.125a.605.605 0 0 0-.635.635l.125 2.437c.033.651-.847.887-1.144.306l-1.11-2.172a.605.605 0 0 0-.868-.233L8.747 16.34c-.548.355-1.192-.289-.837-.837l1.326-2.047a.605.605 0 0 0-.233-.868l-2.172-1.11c-.581-.297-.345-1.177.306-1.144l2.437.125a.605.605 0 0 0 .635-.635l-.125-2.437Z\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerExperimentIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" fill=\"none\" {...props}>\n            <path\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n                d=\"M12 3.25a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-3 4.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H14v4.333a2 2 0 0 0 .4 1.2l4.4 5.867a1 1 0 0 1-.8 1.6H6a1 1 0 0 1-.8-1.6l4.4-5.867a2 2 0 0 0 .4-1.2V8.25h-.5a.5.5 0 0 1-.5-.5Zm1.5-2.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-4 3v4.333a3 3 0 0 1-.6 1.8l-.752 1.003c.11.078.245.16.403.226.41.173.985.253 1.682-.188.808-.51 1.547-.67 2.142-.674l-.275-.367a3 3 0 0 1-.6-1.8V8.25h-2Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerWarningIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n                d=\"m10.272 5.212-7.018 12.03a2 2 0 0 0 1.728 3.008h14.036a2 2 0 0 0 1.727-3.008l-7.018-12.03a2 2 0 0 0-3.455 0ZM13 16.75a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.014-7.014A.987.987 0 0 0 12 8.75h-.027l-.028.002a.987.987 0 0 0-.93 1.04l.236 4.25c.053.944 1.445.944 1.498 0l.236-4.25.001-.028v-.028Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerErrorIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n                d=\"M12.987 2.5a2.07 2.07 0 0 0-1.974 0L4.048 6.287A1.989 1.989 0 0 0 3 8.032v7.436c0 .725.401 1.393 1.048 1.745L11.013 21a2.07 2.07 0 0 0 1.974 0l6.965-3.787A1.989 1.989 0 0 0 21 15.468V8.032c0-.725-.401-1.393-1.048-1.745L12.987 2.5ZM12 7.25a.987.987 0 0 1 .986 1.014l-.001.027-.236 4.25c-.053.945-1.445.945-1.498 0l-.236-4.25a.987.987 0 0 1 .93-1.04h.028L12 7.25Zm1 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerSuccessIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n                d=\"M21 12.25a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-5.555-2.99a.75.75 0 0 1 1.06 1.06l-5.303 5.303a.748.748 0 0 1-1.061 0L7.666 13.15a.75.75 0 1 1 1.06-1.06l1.945 1.944 4.774-4.773Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nexport { BannerIcon }\n"],"names":["bannerIconForType","info","BannerInfoIcon","upgrade","BannerUpgradeIcon","experiment","BannerExperimentIcon","warning","BannerWarningIcon","error","BannerErrorIcon","success","BannerSuccessIcon","BannerIcon","type","props","Icon","React","createElement","className","styles","_objectSpread","xmlns","width","height","fill","fillRule","d","clipRule"],"mappings":"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"}

package/es/icons/banner-icon.module.css.js

@@ -0,0 +1,4 @@
+var modules_de8ae2e5 = {"info":"_447f8e53","upgrade":"cdb7a2b8","experiment":"_210efb55","warning":"cd91167f","error":"a52763ee","success":"c6229331"};
+
+export { modules_de8ae2e5 as default };
+//# sourceMappingURL=banner-icon.module.css.js.map

package/es/icons/banner-icon.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner-icon.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

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

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

@@ -97,6 +97,12 @@ type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLInputEleme
      * The maximum width that the input field can expand to.
      */
     maxWidth?: BoxProps['maxWidth'];
+    /**
+     * The maximum number of characters that the input field can accept.
+     * When this limit is reached, the input field will not accept any more characters.
+     * The counter element will turn red when the number of characters is within 10 of the maximum limit.
+     */
+    maxLength?: number;
     /**
      * Used internally by components composed using `BaseField`. It is not exposed as part of
      * the public props of such components.

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\nconst MAX_LENGTH_THRESHOLD = 10\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}\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\ntype 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         * 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\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'fieldRef' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\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}: 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 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    }\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                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n            >\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 ? <span className={styles.primaryLabel}>{label}</span> : 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            {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                    {characterCount ? (\n                        <Column width=\"content\">\n                            <FieldCharacterCount tone={characterCountTone}>\n                                {characterCount}\n                            </FieldCharacterCount>\n                        </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","useId","messageId","inputLength","characterCount","setCharacterCount","useState","characterCountTone","setCharacterCountTone","ariaDescribedBy","childrenProps","_objectSpread","objectSpread2","aria-invalid","undefined","onChange","event","currentTarget","useEffect","Stack","space","container","error","bordered","justifyContent","alignItems","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\nconst MAX_LENGTH_THRESHOLD = 10\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}\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\ntype 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\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'fieldRef' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\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}: 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 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    }\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                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n            >\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 ? <span className={styles.primaryLabel}>{label}</span> : 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            {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                    {characterCount ? (\n                        <Column width=\"content\">\n                            <FieldCharacterCount tone={characterCountTone}>\n                                {characterCount}\n                            </FieldCharacterCount>\n                        </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","useId","messageId","inputLength","characterCount","setCharacterCount","useState","characterCountTone","setCharacterCountTone","ariaDescribedBy","childrenProps","_objectSpread","objectSpread2","aria-invalid","undefined","onChange","event","currentTarget","useEffect","Stack","space","container","error","bordered","justifyContent","alignItems","htmlFor","primaryLabel","paddingLeft","Columns","align","Column","width"],"mappings":"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"}

package/lib/icons/banner-icon.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js");function l(e){if(e&&e.__esModule)return e;var l=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(l,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),l.default=e,l}var t=l(require("react"));const a=["type"],n={info:function(l){return t.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none"},l),t.createElement("path",{fill:"#316FEA",fillRule:"evenodd",d:"M21 12.25a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-8-3.94a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2.75 1.94a.75.75 0 0 0 0 1.5h1.25v3.5h-1.25a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5H13V11a.752.752 0 0 0-.75-.75h-2Z",clipRule:"evenodd"}))},upgrade:function(l){return t.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none"},l),t.createElement("path",{fill:"#F48318",fillRule:"evenodd",d:"M13.974 4.226a2.485 2.485 0 0 0-3.948 0 2.485 2.485 0 0 1-2.304.954A2.485 2.485 0 0 0 4.93 7.972a2.485 2.485 0 0 1-.954 2.304 2.485 2.485 0 0 0 0 3.948 2.485 2.485 0 0 1 .954 2.304 2.485 2.485 0 0 0 2.792 2.792 2.485 2.485 0 0 1 2.304.954 2.485 2.485 0 0 0 3.948 0 2.485 2.485 0 0 1 2.304-.954 2.485 2.485 0 0 0 2.792-2.792 2.485 2.485 0 0 1 .954-2.304 2.485 2.485 0 0 0 0-3.948 2.485 2.485 0 0 1-.954-2.304 2.485 2.485 0 0 0-2.792-2.792 2.485 2.485 0 0 1-2.304-.954ZM11.228 7.08c-.297-.581-1.177-.345-1.144.306l.125 2.437a.605.605 0 0 1-.635.635l-2.437-.125c-.651-.033-.887.847-.306 1.144l2.172 1.11c.32.163.428.567.233.868L7.91 15.503c-.355.548.289 1.192.837.837l2.047-1.326a.605.605 0 0 1 .868.233l1.11 2.172c.297.581 1.177.345 1.144-.306l-.125-2.437a.605.605 0 0 1 .635-.635l2.437.125c.651.033.887-.847.306-1.144l-2.172-1.11a.605.605 0 0 1-.233-.868l1.326-2.047c.355-.548-.289-1.192-.837-.837l-2.047 1.326a.605.605 0 0 1-.868-.233l-1.11-2.172Z",clipRule:"evenodd"}),t.createElement("path",{fill:"#fff",d:"M10.084 7.387c-.033-.651.847-.887 1.144-.306l1.11 2.172c.163.32.567.428.868.233l2.047-1.326c.548-.355 1.192.289.837.837l-1.326 2.047a.605.605 0 0 0 .233.868l2.172 1.11c.581.297.345 1.177-.306 1.144l-2.437-.125a.605.605 0 0 0-.635.635l.125 2.437c.033.651-.847.887-1.144.306l-1.11-2.172a.605.605 0 0 0-.868-.233L8.747 16.34c-.548.355-1.192-.289-.837-.837l1.326-2.047a.605.605 0 0 0-.233-.868l-2.172-1.11c-.581-.297-.345-1.177.306-1.144l2.437.125a.605.605 0 0 0 .635-.635l-.125-2.437Z"}))},experiment:function(l){return t.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",fill:"none"},l),t.createElement("path",{fill:"#F48318",fillRule:"evenodd",d:"M12 3.25a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-3 4.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H14v4.333a2 2 0 0 0 .4 1.2l4.4 5.867a1 1 0 0 1-.8 1.6H6a1 1 0 0 1-.8-1.6l4.4-5.867a2 2 0 0 0 .4-1.2V8.25h-.5a.5.5 0 0 1-.5-.5Zm1.5-2.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-4 3v4.333a3 3 0 0 1-.6 1.8l-.752 1.003c.11.078.245.16.403.226.41.173.985.253 1.682-.188.808-.51 1.547-.67 2.142-.674l-.275-.367a3 3 0 0 1-.6-1.8V8.25h-2Z",clipRule:"evenodd"}))},warning:function(l){return t.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none"},l),t.createElement("path",{fill:"#EB8909",fillRule:"evenodd",d:"m10.272 5.212-7.018 12.03a2 2 0 0 0 1.728 3.008h14.036a2 2 0 0 0 1.727-3.008l-7.018-12.03a2 2 0 0 0-3.455 0ZM13 16.75a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.014-7.014A.987.987 0 0 0 12 8.75h-.027l-.028.002a.987.987 0 0 0-.93 1.04l.236 4.25c.053.944 1.445.944 1.498 0l.236-4.25.001-.028v-.028Z",clipRule:"evenodd"}))},error:function(l){return t.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none"},l),t.createElement("path",{fill:"#DC4C3E",fillRule:"evenodd",d:"M12.987 2.5a2.07 2.07 0 0 0-1.974 0L4.048 6.287A1.989 1.989 0 0 0 3 8.032v7.436c0 .725.401 1.393 1.048 1.745L11.013 21a2.07 2.07 0 0 0 1.974 0l6.965-3.787A1.989 1.989 0 0 0 21 15.468V8.032c0-.725-.401-1.393-1.048-1.745L12.987 2.5ZM12 7.25a.987.987 0 0 1 .986 1.014l-.001.027-.236 4.25c-.053.945-1.445.945-1.498 0l-.236-4.25a.987.987 0 0 1 .93-1.04h.028L12 7.25Zm1 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",clipRule:"evenodd"}))},success:function(l){return t.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none"},l),t.createElement("path",{fill:"#058527",fillRule:"evenodd",d:"M21 12.25a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-5.555-2.99a.75.75 0 0 1 1.06 1.06l-5.303 5.303a.748.748 0 0 1-1.061 0L7.666 13.15a.75.75 0 1 1 1.06-1.06l1.945 1.944 4.774-4.773Z",clipRule:"evenodd"}))}};exports.BannerIcon=function(l){let{type:r}=l,c=e.objectWithoutProperties(l,a);const i=n[r];return i?t.createElement(i,e.objectSpread2(e.objectSpread2({},c),{},{"data-testid":"banner-icon-"+r,"aria-hidden":!0})):null};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),t=require("./banner-icon.module.css.js");function r(e){if(e&&e.__esModule)return e;var l=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(l,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),l.default=e,l}var n=r(l);const a=["type"],c={info:function(l){return n.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none"},l),n.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M21 12.25a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-8-3.94a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2.75 1.94a.75.75 0 0 0 0 1.5h1.25v3.5h-1.25a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5H13V11a.752.752 0 0 0-.75-.75h-2Z",clipRule:"evenodd"}))},upgrade:function(l){return n.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none"},l),n.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M13.974 4.226a2.485 2.485 0 0 0-3.948 0 2.485 2.485 0 0 1-2.304.954A2.485 2.485 0 0 0 4.93 7.972a2.485 2.485 0 0 1-.954 2.304 2.485 2.485 0 0 0 0 3.948 2.485 2.485 0 0 1 .954 2.304 2.485 2.485 0 0 0 2.792 2.792 2.485 2.485 0 0 1 2.304.954 2.485 2.485 0 0 0 3.948 0 2.485 2.485 0 0 1 2.304-.954 2.485 2.485 0 0 0 2.792-2.792 2.485 2.485 0 0 1 .954-2.304 2.485 2.485 0 0 0 0-3.948 2.485 2.485 0 0 1-.954-2.304 2.485 2.485 0 0 0-2.792-2.792 2.485 2.485 0 0 1-2.304-.954ZM11.228 7.08c-.297-.581-1.177-.345-1.144.306l.125 2.437a.605.605 0 0 1-.635.635l-2.437-.125c-.651-.033-.887.847-.306 1.144l2.172 1.11c.32.163.428.567.233.868L7.91 15.503c-.355.548.289 1.192.837.837l2.047-1.326a.605.605 0 0 1 .868.233l1.11 2.172c.297.581 1.177.345 1.144-.306l-.125-2.437a.605.605 0 0 1 .635-.635l2.437.125c.651.033.887-.847.306-1.144l-2.172-1.11a.605.605 0 0 1-.233-.868l1.326-2.047c.355-.548-.289-1.192-.837-.837l-2.047 1.326a.605.605 0 0 1-.868-.233l-1.11-2.172Z",clipRule:"evenodd"}),n.createElement("path",{fill:"#fff",d:"M10.084 7.387c-.033-.651.847-.887 1.144-.306l1.11 2.172c.163.32.567.428.868.233l2.047-1.326c.548-.355 1.192.289.837.837l-1.326 2.047a.605.605 0 0 0 .233.868l2.172 1.11c.581.297.345 1.177-.306 1.144l-2.437-.125a.605.605 0 0 0-.635.635l.125 2.437c.033.651-.847.887-1.144.306l-1.11-2.172a.605.605 0 0 0-.868-.233L8.747 16.34c-.548.355-1.192-.289-.837-.837l1.326-2.047a.605.605 0 0 0-.233-.868l-2.172-1.11c-.581-.297-.345-1.177.306-1.144l2.437.125a.605.605 0 0 0 .635-.635l-.125-2.437Z"}))},experiment:function(l){return n.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",fill:"none"},l),n.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M12 3.25a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-3 4.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H14v4.333a2 2 0 0 0 .4 1.2l4.4 5.867a1 1 0 0 1-.8 1.6H6a1 1 0 0 1-.8-1.6l4.4-5.867a2 2 0 0 0 .4-1.2V8.25h-.5a.5.5 0 0 1-.5-.5Zm1.5-2.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-4 3v4.333a3 3 0 0 1-.6 1.8l-.752 1.003c.11.078.245.16.403.226.41.173.985.253 1.682-.188.808-.51 1.547-.67 2.142-.674l-.275-.367a3 3 0 0 1-.6-1.8V8.25h-2Z",clipRule:"evenodd"}))},warning:function(l){return n.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none"},l),n.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"m10.272 5.212-7.018 12.03a2 2 0 0 0 1.728 3.008h14.036a2 2 0 0 0 1.727-3.008l-7.018-12.03a2 2 0 0 0-3.455 0ZM13 16.75a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.014-7.014A.987.987 0 0 0 12 8.75h-.027l-.028.002a.987.987 0 0 0-.93 1.04l.236 4.25c.053.944 1.445.944 1.498 0l.236-4.25.001-.028v-.028Z",clipRule:"evenodd"}))},error:function(l){return n.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none"},l),n.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M12.987 2.5a2.07 2.07 0 0 0-1.974 0L4.048 6.287A1.989 1.989 0 0 0 3 8.032v7.436c0 .725.401 1.393 1.048 1.745L11.013 21a2.07 2.07 0 0 0 1.974 0l6.965-3.787A1.989 1.989 0 0 0 21 15.468V8.032c0-.725-.401-1.393-1.048-1.745L12.987 2.5ZM12 7.25a.987.987 0 0 1 .986 1.014l-.001.027-.236 4.25c-.053.945-1.445.945-1.498 0l-.236-4.25a.987.987 0 0 1 .93-1.04h.028L12 7.25Zm1 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",clipRule:"evenodd"}))},success:function(l){return n.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none"},l),n.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M21 12.25a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-5.555-2.99a.75.75 0 0 1 1.06 1.06l-5.303 5.303a.748.748 0 0 1-1.061 0L7.666 13.15a.75.75 0 1 1 1.06-1.06l1.945 1.944 4.774-4.773Z",clipRule:"evenodd"}))}};exports.BannerIcon=function(l){let{type:r}=l,o=e.objectWithoutProperties(l,a);const i=c[r];return i?n.createElement(i,e.objectSpread2(e.objectSpread2({},o),{},{"data-testid":"banner-icon-"+r,className:t.default[r],"aria-hidden":!0})):null};
 //# sourceMappingURL=banner-icon.js.map

package/lib/icons/banner-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner-icon.js","sources":["../../src/icons/banner-icon.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { SystemBannerType } from '../banner/banner'\n\nconst bannerIconForType: Record<SystemBannerType, typeof BannerInfoIcon> = {\n    info: BannerInfoIcon,\n    upgrade: BannerUpgradeIcon,\n    experiment: BannerExperimentIcon,\n    warning: BannerWarningIcon,\n    error: BannerErrorIcon,\n    success: BannerSuccessIcon,\n}\n\nfunction BannerIcon({ type, ...props }: JSX.IntrinsicElements['svg'] & { type: SystemBannerType }) {\n    const Icon = bannerIconForType[type]\n    return Icon ? <Icon {...props} data-testid={`banner-icon-${type}`} aria-hidden /> : null\n}\n\nfunction BannerInfoIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"#316FEA\"\n                fillRule=\"evenodd\"\n                d=\"M21 12.25a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-8-3.94a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2.75 1.94a.75.75 0 0 0 0 1.5h1.25v3.5h-1.25a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5H13V11a.752.752 0 0 0-.75-.75h-2Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerUpgradeIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"#F48318\"\n                fillRule=\"evenodd\"\n                d=\"M13.974 4.226a2.485 2.485 0 0 0-3.948 0 2.485 2.485 0 0 1-2.304.954A2.485 2.485 0 0 0 4.93 7.972a2.485 2.485 0 0 1-.954 2.304 2.485 2.485 0 0 0 0 3.948 2.485 2.485 0 0 1 .954 2.304 2.485 2.485 0 0 0 2.792 2.792 2.485 2.485 0 0 1 2.304.954 2.485 2.485 0 0 0 3.948 0 2.485 2.485 0 0 1 2.304-.954 2.485 2.485 0 0 0 2.792-2.792 2.485 2.485 0 0 1 .954-2.304 2.485 2.485 0 0 0 0-3.948 2.485 2.485 0 0 1-.954-2.304 2.485 2.485 0 0 0-2.792-2.792 2.485 2.485 0 0 1-2.304-.954ZM11.228 7.08c-.297-.581-1.177-.345-1.144.306l.125 2.437a.605.605 0 0 1-.635.635l-2.437-.125c-.651-.033-.887.847-.306 1.144l2.172 1.11c.32.163.428.567.233.868L7.91 15.503c-.355.548.289 1.192.837.837l2.047-1.326a.605.605 0 0 1 .868.233l1.11 2.172c.297.581 1.177.345 1.144-.306l-.125-2.437a.605.605 0 0 1 .635-.635l2.437.125c.651.033.887-.847.306-1.144l-2.172-1.11a.605.605 0 0 1-.233-.868l1.326-2.047c.355-.548-.289-1.192-.837-.837l-2.047 1.326a.605.605 0 0 1-.868-.233l-1.11-2.172Z\"\n                clipRule=\"evenodd\"\n            />\n            <path\n                fill=\"#fff\"\n                d=\"M10.084 7.387c-.033-.651.847-.887 1.144-.306l1.11 2.172c.163.32.567.428.868.233l2.047-1.326c.548-.355 1.192.289.837.837l-1.326 2.047a.605.605 0 0 0 .233.868l2.172 1.11c.581.297.345 1.177-.306 1.144l-2.437-.125a.605.605 0 0 0-.635.635l.125 2.437c.033.651-.847.887-1.144.306l-1.11-2.172a.605.605 0 0 0-.868-.233L8.747 16.34c-.548.355-1.192-.289-.837-.837l1.326-2.047a.605.605 0 0 0-.233-.868l-2.172-1.11c-.581-.297-.345-1.177.306-1.144l2.437.125a.605.605 0 0 0 .635-.635l-.125-2.437Z\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerExperimentIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" fill=\"none\" {...props}>\n            <path\n                fill=\"#F48318\"\n                fillRule=\"evenodd\"\n                d=\"M12 3.25a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-3 4.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H14v4.333a2 2 0 0 0 .4 1.2l4.4 5.867a1 1 0 0 1-.8 1.6H6a1 1 0 0 1-.8-1.6l4.4-5.867a2 2 0 0 0 .4-1.2V8.25h-.5a.5.5 0 0 1-.5-.5Zm1.5-2.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-4 3v4.333a3 3 0 0 1-.6 1.8l-.752 1.003c.11.078.245.16.403.226.41.173.985.253 1.682-.188.808-.51 1.547-.67 2.142-.674l-.275-.367a3 3 0 0 1-.6-1.8V8.25h-2Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerWarningIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"#EB8909\"\n                fillRule=\"evenodd\"\n                d=\"m10.272 5.212-7.018 12.03a2 2 0 0 0 1.728 3.008h14.036a2 2 0 0 0 1.727-3.008l-7.018-12.03a2 2 0 0 0-3.455 0ZM13 16.75a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.014-7.014A.987.987 0 0 0 12 8.75h-.027l-.028.002a.987.987 0 0 0-.93 1.04l.236 4.25c.053.944 1.445.944 1.498 0l.236-4.25.001-.028v-.028Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerErrorIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"#DC4C3E\"\n                fillRule=\"evenodd\"\n                d=\"M12.987 2.5a2.07 2.07 0 0 0-1.974 0L4.048 6.287A1.989 1.989 0 0 0 3 8.032v7.436c0 .725.401 1.393 1.048 1.745L11.013 21a2.07 2.07 0 0 0 1.974 0l6.965-3.787A1.989 1.989 0 0 0 21 15.468V8.032c0-.725-.401-1.393-1.048-1.745L12.987 2.5ZM12 7.25a.987.987 0 0 1 .986 1.014l-.001.027-.236 4.25c-.053.945-1.445.945-1.498 0l-.236-4.25a.987.987 0 0 1 .93-1.04h.028L12 7.25Zm1 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerSuccessIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"#058527\"\n                fillRule=\"evenodd\"\n                d=\"M21 12.25a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-5.555-2.99a.75.75 0 0 1 1.06 1.06l-5.303 5.303a.748.748 0 0 1-1.061 0L7.666 13.15a.75.75 0 1 1 1.06-1.06l1.945 1.944 4.774-4.773Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nexport { BannerIcon }\n"],"names":["bannerIconForType","info","props","React","createElement","_objectSpread","xmlns","width","height","fill","fillRule","d","clipRule","upgrade","experiment","warning","error","success","_ref","type","_objectWithoutProperties","objectWithoutProperties","_excluded","Icon","data-testid","aria-hidden"],"mappings":"ybAGMA,EAAqE,CACvEC,KAaJ,SAAwBC,GACpB,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,KAAK,QAAWP,GAC3EC,EAAAC,cAAA,OAAA,CACIK,KAAK,UACLC,SAAS,UACTC,EAAE,wMACFC,SAAS,cAnBrBC,QAyBJ,SAA2BX,GACvB,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,KAAK,QAAWP,GAC3EC,EAAAC,cAAA,OAAA,CACIK,KAAK,UACLC,SAAS,UACTC,EAAE,s7BACFC,SAAS,YAEbT,EACIC,cAAA,OAAA,CAAAK,KAAK,OACLE,EAAE,weAnCdG,WAyCJ,SAA8BZ,GAC1B,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,KAAK,QAAWP,GAC3EC,EAAAC,cAAA,OAAA,CACIK,KAAK,UACLC,SAAS,UACTC,EAAE,obACFC,SAAS,cA/CrBG,QAqDJ,SAA2Bb,GACvB,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,KAAK,QAAWP,GAC3EC,EAAAC,cAAA,OAAA,CACIK,KAAK,UACLC,SAAS,UACTC,EAAE,+RACFC,SAAS,cA3DrBI,MAiEJ,SAAyBd,GACrB,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,KAAK,QAAWP,GAC3EC,EAAAC,cAAA,OAAA,CACIK,KAAK,UACLC,SAAS,UACTC,EAAE,6YACFC,SAAS,cAvErBK,QA6EJ,SAA2Bf,GACvB,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,KAAK,QAAWP,GAC3EC,EAAAC,cAAA,OAAA,CACIK,KAAK,UACLC,SAAS,UACTC,EAAE,8KACFC,SAAS,kCAjFzB,SAAiGM,GAAA,IAA7EC,KAAEA,GAA2ED,EAAlEhB,EAAkEkB,EAAAC,wBAAAH,EAAAI,GAC7F,MAAMC,EAAOvB,EAAkBmB,GAC/B,OAAOI,EAAOpB,EAAAC,cAACmB,qCAASrB,GAAV,GAAA,CAA8BsB,cAAA,eAAeL,EAAMM,eAAA,KAAmB"}
+{"version":3,"file":"banner-icon.js","sources":["../../src/icons/banner-icon.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { SystemBannerType } from '../banner/banner'\n\nimport styles from './banner-icon.module.css'\n\nconst bannerIconForType: Record<SystemBannerType, typeof BannerInfoIcon> = {\n    info: BannerInfoIcon,\n    upgrade: BannerUpgradeIcon,\n    experiment: BannerExperimentIcon,\n    warning: BannerWarningIcon,\n    error: BannerErrorIcon,\n    success: BannerSuccessIcon,\n}\n\nfunction BannerIcon({ type, ...props }: JSX.IntrinsicElements['svg'] & { type: SystemBannerType }) {\n    const Icon = bannerIconForType[type]\n    return Icon ? (\n        <Icon {...props} data-testid={`banner-icon-${type}`} className={styles[type]} aria-hidden />\n    ) : null\n}\n\nfunction BannerInfoIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n                d=\"M21 12.25a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-8-3.94a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2.75 1.94a.75.75 0 0 0 0 1.5h1.25v3.5h-1.25a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5H13V11a.752.752 0 0 0-.75-.75h-2Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerUpgradeIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n                d=\"M13.974 4.226a2.485 2.485 0 0 0-3.948 0 2.485 2.485 0 0 1-2.304.954A2.485 2.485 0 0 0 4.93 7.972a2.485 2.485 0 0 1-.954 2.304 2.485 2.485 0 0 0 0 3.948 2.485 2.485 0 0 1 .954 2.304 2.485 2.485 0 0 0 2.792 2.792 2.485 2.485 0 0 1 2.304.954 2.485 2.485 0 0 0 3.948 0 2.485 2.485 0 0 1 2.304-.954 2.485 2.485 0 0 0 2.792-2.792 2.485 2.485 0 0 1 .954-2.304 2.485 2.485 0 0 0 0-3.948 2.485 2.485 0 0 1-.954-2.304 2.485 2.485 0 0 0-2.792-2.792 2.485 2.485 0 0 1-2.304-.954ZM11.228 7.08c-.297-.581-1.177-.345-1.144.306l.125 2.437a.605.605 0 0 1-.635.635l-2.437-.125c-.651-.033-.887.847-.306 1.144l2.172 1.11c.32.163.428.567.233.868L7.91 15.503c-.355.548.289 1.192.837.837l2.047-1.326a.605.605 0 0 1 .868.233l1.11 2.172c.297.581 1.177.345 1.144-.306l-.125-2.437a.605.605 0 0 1 .635-.635l2.437.125c.651.033.887-.847.306-1.144l-2.172-1.11a.605.605 0 0 1-.233-.868l1.326-2.047c.355-.548-.289-1.192-.837-.837l-2.047 1.326a.605.605 0 0 1-.868-.233l-1.11-2.172Z\"\n                clipRule=\"evenodd\"\n            />\n            <path\n                fill=\"#fff\"\n                d=\"M10.084 7.387c-.033-.651.847-.887 1.144-.306l1.11 2.172c.163.32.567.428.868.233l2.047-1.326c.548-.355 1.192.289.837.837l-1.326 2.047a.605.605 0 0 0 .233.868l2.172 1.11c.581.297.345 1.177-.306 1.144l-2.437-.125a.605.605 0 0 0-.635.635l.125 2.437c.033.651-.847.887-1.144.306l-1.11-2.172a.605.605 0 0 0-.868-.233L8.747 16.34c-.548.355-1.192-.289-.837-.837l1.326-2.047a.605.605 0 0 0-.233-.868l-2.172-1.11c-.581-.297-.345-1.177.306-1.144l2.437.125a.605.605 0 0 0 .635-.635l-.125-2.437Z\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerExperimentIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" fill=\"none\" {...props}>\n            <path\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n                d=\"M12 3.25a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-3 4.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H14v4.333a2 2 0 0 0 .4 1.2l4.4 5.867a1 1 0 0 1-.8 1.6H6a1 1 0 0 1-.8-1.6l4.4-5.867a2 2 0 0 0 .4-1.2V8.25h-.5a.5.5 0 0 1-.5-.5Zm1.5-2.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-4 3v4.333a3 3 0 0 1-.6 1.8l-.752 1.003c.11.078.245.16.403.226.41.173.985.253 1.682-.188.808-.51 1.547-.67 2.142-.674l-.275-.367a3 3 0 0 1-.6-1.8V8.25h-2Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerWarningIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n                d=\"m10.272 5.212-7.018 12.03a2 2 0 0 0 1.728 3.008h14.036a2 2 0 0 0 1.727-3.008l-7.018-12.03a2 2 0 0 0-3.455 0ZM13 16.75a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.014-7.014A.987.987 0 0 0 12 8.75h-.027l-.028.002a.987.987 0 0 0-.93 1.04l.236 4.25c.053.944 1.445.944 1.498 0l.236-4.25.001-.028v-.028Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerErrorIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n                d=\"M12.987 2.5a2.07 2.07 0 0 0-1.974 0L4.048 6.287A1.989 1.989 0 0 0 3 8.032v7.436c0 .725.401 1.393 1.048 1.745L11.013 21a2.07 2.07 0 0 0 1.974 0l6.965-3.787A1.989 1.989 0 0 0 21 15.468V8.032c0-.725-.401-1.393-1.048-1.745L12.987 2.5ZM12 7.25a.987.987 0 0 1 .986 1.014l-.001.027-.236 4.25c-.053.945-1.445.945-1.498 0l-.236-4.25a.987.987 0 0 1 .93-1.04h.028L12 7.25Zm1 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerSuccessIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n                d=\"M21 12.25a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-5.555-2.99a.75.75 0 0 1 1.06 1.06l-5.303 5.303a.748.748 0 0 1-1.061 0L7.666 13.15a.75.75 0 1 1 1.06-1.06l1.945 1.944 4.774-4.773Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nexport { BannerIcon }\n"],"names":["bannerIconForType","info","props","React","createElement","_objectSpread","xmlns","width","height","fill","fillRule","d","clipRule","upgrade","experiment","warning","error","success","_ref","type","_objectWithoutProperties","objectWithoutProperties","_excluded","Icon","data-testid","className","styles","aria-hidden"],"mappings":"seAKMA,EAAqE,CACvEC,KAeJ,SAAwBC,GACpB,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,KAAK,QAAWP,GAC3EC,EAAAC,cAAA,OAAA,CACIK,KAAK,eACLC,SAAS,UACTC,EAAE,wMACFC,SAAS,cArBrBC,QA2BJ,SAA2BX,GACvB,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,KAAK,QAAWP,GAC3EC,EAAAC,cAAA,OAAA,CACIK,KAAK,eACLC,SAAS,UACTC,EAAE,s7BACFC,SAAS,YAEbT,EACIC,cAAA,OAAA,CAAAK,KAAK,OACLE,EAAE,weArCdG,WA2CJ,SAA8BZ,GAC1B,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,KAAK,QAAWP,GAC3EC,EAAAC,cAAA,OAAA,CACIK,KAAK,eACLC,SAAS,UACTC,EAAE,obACFC,SAAS,cAjDrBG,QAuDJ,SAA2Bb,GACvB,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,KAAK,QAAWP,GAC3EC,EAAAC,cAAA,OAAA,CACIK,KAAK,eACLC,SAAS,UACTC,EAAE,+RACFC,SAAS,cA7DrBI,MAmEJ,SAAyBd,GACrB,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,KAAK,QAAWP,GAC3EC,EAAAC,cAAA,OAAA,CACIK,KAAK,eACLC,SAAS,UACTC,EAAE,6YACFC,SAAS,cAzErBK,QA+EJ,SAA2Bf,GACvB,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,KAAK,QAAWP,GAC3EC,EAAAC,cAAA,OAAA,CACIK,KAAK,eACLC,SAAS,UACTC,EAAE,8KACFC,SAAS,kCAnFzB,SAAiGM,GAAA,IAA7EC,KAAEA,GAA2ED,EAAlEhB,EAAkEkB,EAAAC,wBAAAH,EAAAI,GAC7F,MAAMC,EAAOvB,EAAkBmB,GAC/B,OAAOI,EACHpB,EAACC,cAAAmB,qCAASrB,GAAV,GAAA,CAA8BsB,cAAA,eAAeL,EAAQM,UAAWC,EAAM,QAACP,GAAqBQ,eAAA,KAC5F"}

package/lib/icons/banner-icon.module.css.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={info:"_447f8e53",upgrade:"cdb7a2b8",experiment:"_210efb55",warning:"cd91167f",error:"a52763ee",success:"c6229331"};
+//# sourceMappingURL=banner-icon.module.css.js.map

package/lib/icons/banner-icon.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner-icon.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -6,6 +6,12 @@ interface TextFieldProps extends Omit<FieldComponentProps<HTMLInputElement>, 'ty
     type?: TextFieldType;
     startSlot?: React.ReactElement | string | number;
     endSlot?: React.ReactElement | string | number;
+    /**
+     * The maximum number of characters that the input field can accept.
+     * When this limit is reached, the input field will not accept any more characters.
+     * The counter element will turn red when the number of characters is within 10 of the maximum limit.
+     */
+    maxLength?: number;
 }
 declare const TextField: React.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export { TextField };

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

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","sources":["../../src/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-field.module.css'\nimport type { FieldComponentProps } from '../base-field'\nimport { useMergeRefs } from 'use-callback-ref'\n\ntype TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url'\n\ninterface TextFieldProps\n    extends Omit<FieldComponentProps<HTMLInputElement>, 'type'>,\n        BaseFieldVariantProps {\n    type?: TextFieldType\n    startSlot?: React.ReactElement | string | number\n    endSlot?: React.ReactElement | string | number\n}\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        type = 'text',\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        startSlot,\n        endSlot,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    function handleClick(event: React.MouseEvent) {\n        if (event.currentTarget === combinedRef.current) return\n        internalRef.current?.focus()\n    }\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            maxLength={maxLength}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {({ onChange, ...extraProps }) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[\n                        styles.inputWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                        props.readOnly ? styles.readOnly : null,\n                    ]}\n                    onClick={handleClick}\n                >\n                    {startSlot ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                            marginLeft={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                        >\n                            {startSlot}\n                        </Box>\n                    ) : null}\n                    <input\n                        {...props}\n                        {...extraProps}\n                        type={type}\n                        ref={combinedRef}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                    {endSlot ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                            marginLeft={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                        >\n                            {endSlot}\n                        </Box>\n                    ) : null}\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","type","maxWidth","maxLength","hidden","aria-describedby","ariaDescribedBy","startSlot","endSlot","onChange","originalOnChange","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","internalRef","useRef","combinedRef","useMergeRefs","handleClick","event","_internalRef$current","currentTarget","current","focus","createElement","BaseField","_ref2","extraProps","_excluded2","Box","display","alignItems","className","styles","inputWrapper","error","bordered","readOnly","onClick","slot","marginRight","marginLeft"],"mappings":"6vBAiBkBA,EAAMC,YAA6C,SAmBjEC,EAAAA,GAAG,IAlBHC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,MAIIA,EAJJC,eAKIA,EALJC,QAMIA,EANJC,KAOIA,EAPJC,KAQIA,EAAO,OARXC,SASIA,EATJC,UAUIA,EAVJC,OAWIA,EACAC,mBAAoBC,EAZxBC,UAaIA,EAbJC,QAcIA,EACAC,SAAUC,GAGXC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMC,EAAczB,EAAM0B,OAAyB,MAC7CC,EAAcC,EAAYA,aAAC,CAAC1B,EAAKuB,IAEvC,SAASI,EAAYC,GAAuB,IAAAC,EACpCD,EAAME,gBAAkBL,EAAYM,UACxC,OAAAF,EAAAN,EAAYQ,UAAZF,EAAqBG,SAGzB,OACIlC,EAAAmC,cAACC,YAAS,CACNjC,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,MAAOA,EACPC,eAAgBA,EAChBC,QAASA,EACTC,KAAMA,EACNE,SAAUA,EACVC,UAAWA,EACXC,OAAQA,EACUC,mBAAAC,GAEjBsB,IAAA,IAACnB,SAAEA,GAAHmB,EAAgBC,EAAhBhB,EAAAC,wBAAAc,EAAAE,GAAA,OACGvC,EAAAmC,cAACK,MACG,CAAAC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,EAAM,QAACC,aACE,UAATpC,EAAmBmC,EAAM,QAACE,MAAQ,KACtB,aAAZ3C,EAAyByC,EAAM,QAACG,SAAW,KAC3C1B,EAAM2B,SAAWJ,EAAM,QAACI,SAAW,MAEvCC,QAASpB,GAERb,EACGhB,gBAACwC,MAAG,CACAG,UAAWC,EAAM,QAACM,KAClBT,QAAQ,OACRU,YAAyB,aAAZhD,EAAyB,SAAW,UACjDiD,WAAwB,aAAZjD,EAAyB,UAAY,UAEhDa,GAEL,KACJhB,EACQmC,cAAA,QAAAd,EAAAA,cAAAA,EAAAA,cAAAA,EAAAA,cAAAA,GAAAA,GACAiB,GAFR,GAAA,CAGI5B,KAAMA,EACNR,IAAKyB,EACLf,UAAWA,EACXM,SAAWY,IACP,MAAAX,GAAAA,EAAmBW,GACnB,MAAAZ,GAAAA,EAAWY,OAGlBb,EACGjB,EAAAmC,cAACK,EAAAA,IAAG,CACAG,UAAWC,EAAM,QAACM,KAClBT,QAAQ,OACRU,YAAyB,aAAZhD,EAAyB,UAAY,SAClDiD,WAAwB,aAAZjD,EAAyB,SAAW,WAE/Cc,GAEL"}
+{"version":3,"file":"text-field.js","sources":["../../src/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-field.module.css'\nimport type { FieldComponentProps } from '../base-field'\nimport { useMergeRefs } from 'use-callback-ref'\n\ntype TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url'\n\ninterface TextFieldProps\n    extends Omit<FieldComponentProps<HTMLInputElement>, 'type'>,\n        BaseFieldVariantProps {\n    type?: TextFieldType\n    startSlot?: React.ReactElement | string | number\n    endSlot?: React.ReactElement | string | number\n    /**\n     * 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\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        type = 'text',\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        startSlot,\n        endSlot,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    function handleClick(event: React.MouseEvent) {\n        if (event.currentTarget === combinedRef.current) return\n        internalRef.current?.focus()\n    }\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            maxLength={maxLength}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {({ onChange, ...extraProps }) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[\n                        styles.inputWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                        props.readOnly ? styles.readOnly : null,\n                    ]}\n                    onClick={handleClick}\n                >\n                    {startSlot ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                            marginLeft={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                        >\n                            {startSlot}\n                        </Box>\n                    ) : null}\n                    <input\n                        {...props}\n                        {...extraProps}\n                        type={type}\n                        ref={combinedRef}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                    {endSlot ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                            marginLeft={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                        >\n                            {endSlot}\n                        </Box>\n                    ) : null}\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","type","maxWidth","maxLength","hidden","aria-describedby","ariaDescribedBy","startSlot","endSlot","onChange","originalOnChange","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","internalRef","useRef","combinedRef","useMergeRefs","handleClick","event","_internalRef$current","currentTarget","current","focus","createElement","BaseField","_ref2","extraProps","_excluded2","Box","display","alignItems","className","styles","inputWrapper","error","bordered","readOnly","onClick","slot","marginRight","marginLeft"],"mappings":"6vBAuBkBA,EAAMC,YAA6C,SAmBjEC,EAAAA,GAAG,IAlBHC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,MAIIA,EAJJC,eAKIA,EALJC,QAMIA,EANJC,KAOIA,EAPJC,KAQIA,EAAO,OARXC,SASIA,EATJC,UAUIA,EAVJC,OAWIA,EACAC,mBAAoBC,EAZxBC,UAaIA,EAbJC,QAcIA,EACAC,SAAUC,GAGXC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMC,EAAczB,EAAM0B,OAAyB,MAC7CC,EAAcC,EAAYA,aAAC,CAAC1B,EAAKuB,IAEvC,SAASI,EAAYC,GAAuB,IAAAC,EACpCD,EAAME,gBAAkBL,EAAYM,UACxC,OAAAF,EAAAN,EAAYQ,UAAZF,EAAqBG,SAGzB,OACIlC,EAAAmC,cAACC,YAAS,CACNjC,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,MAAOA,EACPC,eAAgBA,EAChBC,QAASA,EACTC,KAAMA,EACNE,SAAUA,EACVC,UAAWA,EACXC,OAAQA,EACUC,mBAAAC,GAEjBsB,IAAA,IAACnB,SAAEA,GAAHmB,EAAgBC,EAAhBhB,EAAAC,wBAAAc,EAAAE,GAAA,OACGvC,EAAAmC,cAACK,MACG,CAAAC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,EAAM,QAACC,aACE,UAATpC,EAAmBmC,EAAM,QAACE,MAAQ,KACtB,aAAZ3C,EAAyByC,EAAM,QAACG,SAAW,KAC3C1B,EAAM2B,SAAWJ,EAAM,QAACI,SAAW,MAEvCC,QAASpB,GAERb,EACGhB,gBAACwC,MAAG,CACAG,UAAWC,EAAM,QAACM,KAClBT,QAAQ,OACRU,YAAyB,aAAZhD,EAAyB,SAAW,UACjDiD,WAAwB,aAAZjD,EAAyB,UAAY,UAEhDa,GAEL,KACJhB,EACQmC,cAAA,QAAAd,EAAAA,cAAAA,EAAAA,cAAAA,EAAAA,cAAAA,GAAAA,GACAiB,GAFR,GAAA,CAGI5B,KAAMA,EACNR,IAAKyB,EACLf,UAAWA,EACXM,SAAWY,IACP,MAAAX,GAAAA,EAAmBW,GACnB,MAAAZ,GAAAA,EAAWY,OAGlBb,EACGjB,EAAAmC,cAACK,EAAAA,IAAG,CACAG,UAAWC,EAAM,QAACM,KAClBT,QAAQ,OACRU,YAAyB,aAAZhD,EAAyB,UAAY,SAClDiD,WAAwB,aAAZjD,EAAyB,SAAW,WAE/Cc,GAEL"}

package/package.json

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

package/styles/banner-icon.css

@@ -0,0 +1 @@
+:root{--reactist-banner-info-icon-color:#316fea;--reactist-banner-upgrade-icon-color:#f48318;--reactist-banner-experiment-icon-color:#f48318;--reactist-banner-warning-icon-color:#eb8909;--reactist-banner-error-icon-color:#dc4c3e;--reactist-banner-success-icon-color:#058527}._447f8e53{color:var(--reactist-banner-info-icon-color)}.cdb7a2b8{color:var(--reactist-banner-upgrade-icon-color)}._210efb55{color:var(--reactist-banner-experiment-icon-color)}.cd91167f{color:var(--reactist-banner-warning-icon-color)}.a52763ee{color:var(--reactist-banner-error-icon-color)}.c6229331{color:var(--reactist-banner-success-icon-color)}

package/styles/banner.css

@@ -7,4 +7,5 @@
 :root{--reactist-spinner-tint:var(--reactist-bg-brand);--reactist-spinner-fill:var(--reactist-framework-fill-crest)}@-webkit-keyframes _54fbe2b3{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes _54fbe2b3{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}._51539197{-webkit-animation-name:_54fbe2b3;animation-name:_54fbe2b3;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.a0c466ed{fill:var(--reactist-spinner-tint)}._745b73d3{fill:var(--reactist-spinner-fill)}
 ._487c82cd{text-overflow:ellipsis;max-width:300px;z-index:var(--reactist-stacking-order-tooltip)}
 :root{--reactist-button-small-font-size:var(--reactist-font-size-caption);--reactist-button-small-spacing:var(--reactist-spacing-small);--reactist-button-small-height:28px;--reactist-button-normal-font-size:var(--reactist-font-size-copy);--reactist-button-normal-spacing:var(--reactist-spacing-medium);--reactist-button-normal-height:32px;--reactist-button-large-font-size:var(--reactist-font-size-body);--reactist-button-large-spacing:var(--reactist-spacing-large);--reactist-button-large-height:36px;--reactist-actionable-primary-idle-tint:#fff;--reactist-actionable-primary-idle-fill:#008aa6;--reactist-actionable-primary-hover-tint:#fff;--reactist-actionable-primary-hover-fill:#007992;--reactist-actionable-primary-disabled-tint:#fff;--reactist-actionable-primary-disabled-fill:#99d0db;--reactist-actionable-secondary-idle-tint:#282f30;--reactist-actionable-secondary-idle-fill:#f2f6f7;--reactist-actionable-secondary-hover-tint:#282f30;--reactist-actionable-secondary-hover-fill:#e3e7e8;--reactist-actionable-secondary-disabled-tint:#a9acac;--reactist-actionable-secondary-disabled-fill:#f2f6f7;--reactist-actionable-tertiary-idle-tint:#006f85;--reactist-actionable-tertiary-hover-tint:#006f85;--reactist-actionable-tertiary-hover-fill:#f2f6f7;--reactist-actionable-tertiary-disabled-tint:#99c5ce;--reactist-actionable-quaternary-idle-tint:#6c777a;--reactist-actionable-quaternary-hover-tint:#282f30;--reactist-actionable-quaternary-hover-fill:#e0e7e8;--reactist-actionable-quaternary-disabled-tint:#c4c9ca;--reactist-actionable-primary-destructive-idle-tint:#fff;--reactist-actionable-primary-destructive-idle-fill:#dc4c3e;--reactist-actionable-primary-destructive-hover-tint:#fff;--reactist-actionable-primary-destructive-hover-fill:#b03d32;--reactist-actionable-primary-destructive-disabled-tint:#fff;--reactist-actionable-primary-destructive-disabled-fill:#f1b7b2;--reactist-actionable-secondary-destructive-idle-tint:#dc4c3e;--reactist-actionable-secondary-destructive-hover-tint:#b03d32;--reactist-actionable-secondary-destructive-hover-fill:transparent;--reactist-actionable-secondary-destructive-disabled-tint:#f1b7b2}._3930afa0{max-width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;background-color:transparent;border-radius:var(--reactist-border-radius-small);white-space:nowrap;font-family:var(--reactist-font-family);font-weight:var(--reactist-font-weight-medium);text-decoration:none;border:1px solid transparent;transition-duration:.3s;transition-property:color,background-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}._90654824{text-overflow:ellipsis;white-space:nowrap;font-size:inherit}._3930afa0:active:not([aria-disabled=true]){transform:scale(.97);transition:transform .2s cubic-bezier(.02,1.505,.745,1.235)}._3930afa0{padding:0 var(--reactist-btn-spacing);font-size:var(--reactist-btn-font-size);height:var(--reactist-btn-height);line-height:var(--reactist-btn-height);--reactist-spinner-tint:var(--reactist-btn-idle-tint);--reactist-spinner-fill:var(--reactist-btn-idle-fill)}._3930afa0.c05d17c2{border-radius:1000px}._3930afa0._1e29d236{--reactist-btn-height:var(--reactist-button-small-height);--reactist-btn-spacing:var(--reactist-button-small-spacing);--reactist-btn-font-size:var(--reactist-button-small-font-size)}._3930afa0._7246d092{--reactist-btn-height:var(--reactist-button-normal-height);--reactist-btn-spacing:var(--reactist-button-normal-spacing);--reactist-btn-font-size:var(--reactist-button-normal-font-size)}._3930afa0._2d084671{--reactist-btn-height:var(--reactist-button-large-height);--reactist-btn-spacing:var(--reactist-button-large-spacing);--reactist-btn-font-size:var(--reactist-button-large-font-size)}._3930afa0:not(._2b0b9d95){color:var(--reactist-btn-idle-tint);background-color:var(--reactist-btn-idle-fill)}._3930afa0:focus-visible:not([aria-disabled=true]),._3930afa0:hover:not([aria-disabled=true]),._3930afa0[aria-expanded=true]{color:var(--reactist-btn-hover-tint);background-color:var(--reactist-btn-hover-fill)}._3930afa0._2b0b9d95{cursor:not-allowed;color:var(--reactist-btn-disabled-tint);background-color:var(--reactist-btn-disabled-fill)}._3930afa0:not(.abd5766f){min-width:68px}._3930afa0.abd5766f{width:var(--reactist-btn-height);height:var(--reactist-btn-height);padding:0}._3930afa0 ._380e7c73{margin-right:calc(var(--reactist-btn-spacing) - 6px);margin-left:-6px}._3930afa0 ._20fe4105{margin-left:calc(var(--reactist-btn-spacing) - 6px);margin-right:-6px}._3930afa0>*{pointer-events:none}._7ea1378e{--reactist-btn-idle-tint:var(--reactist-actionable-primary-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-primary-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-primary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-primary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-primary-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-primary-disabled-fill)}._64ee8afd{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-secondary-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-secondary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-secondary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-secondary-disabled-fill)}._650176bf{--reactist-btn-idle-tint:var(--reactist-actionable-tertiary-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-tertiary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-tertiary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-tertiary-disabled-tint)}.aa19cb97,._650176bf{--reactist-btn-idle-fill:transparent;--reactist-btn-disabled-fill:transparent}.aa19cb97{--reactist-btn-idle-tint:var(--reactist-actionable-quaternary-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-quaternary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-quaternary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-quaternary-disabled-tint)}._7ea1378e._7a2d9a8c{--reactist-btn-idle-tint:var(--reactist-actionable-primary-destructive-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-primary-destructive-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-primary-destructive-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-primary-destructive-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-primary-destructive-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-primary-destructive-disabled-fill)}._64ee8afd._7a2d9a8c{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-destructive-idle-tint);--reactist-btn-idle-fill:transparent;--reactist-btn-hover-tint:var(--reactist-actionable-secondary-destructive-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-secondary-destructive-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-destructive-disabled-tint);--reactist-btn-disabled-fill:transparent;border-color:var(--reactist-btn-idle-tint)}._64ee8afd._7a2d9a8c:hover{border-color:var(--reactist-btn-hover-tint)}._64ee8afd._7a2d9a8c._2b0b9d95{border-color:var(--reactist-btn-disabled-tint)}.aa19cb97._7a2d9a8c,._650176bf._7a2d9a8c{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-destructive-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-secondary-destructive-hover-tint);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-destructive-disabled-tint)}
+:root{--reactist-banner-info-icon-color:#316fea;--reactist-banner-upgrade-icon-color:#f48318;--reactist-banner-experiment-icon-color:#f48318;--reactist-banner-warning-icon-color:#eb8909;--reactist-banner-error-icon-color:#dc4c3e;--reactist-banner-success-icon-color:#058527}._447f8e53{color:var(--reactist-banner-info-icon-color)}.cdb7a2b8{color:var(--reactist-banner-upgrade-icon-color)}._210efb55{color:var(--reactist-banner-experiment-icon-color)}.cd91167f{color:var(--reactist-banner-warning-icon-color)}.a52763ee{color:var(--reactist-banner-error-icon-color)}.c6229331{color:var(--reactist-banner-success-icon-color)}
 :root{--reactist-text-link-idle-tint:#246fe0;--reactist-text-link-hover-tint:var(--reactist-text-link-idle-tint);--reactist-text-link-idle-decoration:none;--reactist-text-link-hover-decoration:underline}.fdc181b3{font-size:inherit;font-weight:inherit;font-family:inherit;-webkit-text-decoration:var(--reactist-text-link-idle-decoration);text-decoration:var(--reactist-text-link-idle-decoration);color:var(--reactist-text-link-idle-tint);cursor:pointer}.fdc181b3:hover{-webkit-text-decoration:var(--reactist-text-link-hover-decoration);text-decoration:var(--reactist-text-link-hover-decoration);color:var(--reactist-text-link-hover-tint)}.fdc181b3 svg{display:inline-block;width:1em;height:1em;font-size:inherit;color:inherit;vertical-align:-.125em;fill:currentColor;padding:0 6px}