@doist/reactist 26.2.5 → 27.1.0

package/lib/banner/banner.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("../box/box.js"),l=require("../columns/columns.js"),n=require("../utils/common-helpers.js"),a=require("./banner.module.css.js");function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,l.get?l:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var o=i(t);const u=["id","tone","icon","title","description","action"];exports.Banner=o.forwardRef((function(t,i){let{id:c,tone:d,icon:s,title:m,description:f,action:b}=t,p=e.objectWithoutProperties(t,u);const j=n.useId(),x=n.useId();return o.createElement(r.Box,e.objectSpread2(e.objectSpread2({},p),{},{ref:i,id:c,role:"status","aria-labelledby":j,"aria-describedby":x,"aria-live":"polite",tabIndex:0,borderRadius:"standard",className:[a.default.banner,a.default["banner-"+d]]}),o.createElement(l.Columns,{space:"medium",alignY:"center"},o.createElement(l.Column,{width:"content","aria-hidden":!0,style:{lineHeight:0}},s),o.createElement(l.Column,null,o.createElement(r.Box,{paddingY:"xsmall"},o.createElement(r.Box,f?{id:j,className:[a.default.title,a.default["title-"+d]]}:{id:j,className:[a.default.title,a.default["title-without-description"],a.default["title-"+d]]},m),f?o.createElement(r.Box,{id:x,className:[a.default.description,a.default["description-"+d]]},f):null)),b?o.createElement(l.Column,{width:"content"},b):null))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),l=require("../box/box.js"),n=require("../utils/common-helpers.js"),a=require("./banner.module.css.js"),r=require("../button/button.js"),o=require("../icons/close-icon.js"),i=require("../icons/banner-icon.js"),c=require("../text-link/text-link.js");function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(l){if("default"!==l){var n=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(t,l,n.get?n:{enumerable:!0,get:function(){return e[l]}})}})),t.default=e,t}var u=s(t);const d=["id","type","title","description","action","icon","image","inlineLinks","closeLabel","onClose"],m=["label"],p=["type","label"],b=["type","label","variant"];function f(t){let{label:l}=t,n=e.objectWithoutProperties(t,p);return u.createElement(r.Button,e.objectSpread2({},n),l)}function x(t){let{label:l,variant:n}=t,a=e.objectWithoutProperties(t,b);return u.createElement(r.Button,{variant:n,render:u.createElement("a",e.objectSpread2({rel:"noopener noreferrer",target:"_blank"},a))},l)}exports.Banner=u.forwardRef((function(t,s){let{id:p,type:b,title:j,description:y,action:E,icon:B,image:v,inlineLinks:g,closeLabel:k,onClose:N}=t,q=e.objectWithoutProperties(t,d);const S=n.useId(),C=n.useId(),P=N?u.createElement(r.IconButton,{exceptionallySetClassName:a.default.closeButton,variant:"quaternary",onClick:N,icon:u.createElement(o.CloseIcon,null),"aria-label":null!=k?k:"Close banner"}):null;return u.createElement(l.Box,e.objectSpread2(e.objectSpread2({},q),{},{ref:s,id:p,display:"flex",flexDirection:"column",justifyContent:"center",role:"status","aria-labelledby":j?S:C,"aria-describedby":j?C:void 0,"aria-live":"polite",tabIndex:0,borderRadius:"full",className:a.default.banner}),v?u.createElement(l.Box,{className:a.default.image},v):null,u.createElement(l.Box,{className:a.default.content,display:"flex",gap:"small",alignItems:"center"},u.createElement(l.Box,{className:a.default.staticContent,display:"flex",gap:"small",flexGrow:1},u.createElement(l.Box,{className:a.default.icon},"neutral"===b?B:u.createElement(i.BannerIcon,{type:b}),P),u.createElement(l.Box,{className:a.default.copy,display:"flex",flexDirection:"column"},j?u.createElement(l.Box,{id:S,className:a.default.title},j):null,u.createElement(l.Box,{id:C,className:[a.default.description,j?a.default.secondary:null]},y,null==g?void 0:g.map((t,l)=>{let{label:n}=t,r=e.objectWithoutProperties(t,m);return u.createElement(u.Fragment,{key:l},u.createElement(c.TextLink,e.objectSpread2(e.objectSpread2({},r),{},{exceptionallySetClassName:a.default.inlineLink}),n),l<g.length-1?u.createElement("span",null," · "):"")})))),E||P?u.createElement(l.Box,{className:a.default.actions,display:"flex",gap:"small"},"button"===(null==E?void 0:E.type)?u.createElement(f,e.objectSpread2({},E)):null,"link"===(null==E?void 0:E.type)?u.createElement(x,e.objectSpread2({},E)):null,P):null))}));
 //# sourceMappingURL=banner.js.map

package/lib/banner/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","sources":["../../src/banner/banner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\nimport { useId } from '../utils/common-helpers'\n\nimport styles from './banner.module.css'\n\nexport type BannerTone = 'info' | 'promotion'\n\ntype BannerProps = {\n    id?: string\n\n    /**\n     * The tone of the Banner. Affects the background color and the outline.\n     */\n    tone: BannerTone\n\n    /**\n     * The icon that should be added inside the Banner.\n     */\n    icon: React.ReactElement | string | number\n\n    /**\n     * The title to be displayed at the top of the Banner.\n     */\n    title: React.ReactNode\n\n    /**\n     * An optional description to be displayed inside the Banner.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An optional action to displayed inside the Banner.\n     */\n    action?: React.ReactElement | string | number\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(\n    { id, tone, icon, title, description, action, ...props }: BannerProps,\n    ref,\n) {\n    const titleId = useId()\n    const descriptionId = useId()\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            id={id}\n            role=\"status\"\n            aria-labelledby={titleId}\n            aria-describedby={descriptionId}\n            aria-live=\"polite\"\n            tabIndex={0}\n            borderRadius=\"standard\"\n            className={[styles.banner, styles[`banner-${tone}`]]}\n        >\n            <Columns space=\"medium\" alignY=\"center\">\n                <Column\n                    width=\"content\"\n                    aria-hidden\n                    style={{\n                        /* Make sure the icon is centered vertically */\n                        lineHeight: 0,\n                    }}\n                >\n                    {icon}\n                </Column>\n                <Column>\n                    <Box paddingY=\"xsmall\">\n                        {description ? (\n                            <Box id={titleId} className={[styles.title, styles[`title-${tone}`]]}>\n                                {title}\n                            </Box>\n                        ) : (\n                            <Box\n                                id={titleId}\n                                className={[\n                                    styles.title,\n                                    // If the banner does not have a description, we need to slightly tweak\n                                    // the styling of the title applying an extra css class\n                                    styles[`title-without-description`],\n                                    styles[`title-${tone}`],\n                                ]}\n                            >\n                                {title}\n                            </Box>\n                        )}\n                        {description ? (\n                            <Box\n                                id={descriptionId}\n                                className={[styles.description, styles[`description-${tone}`]]}\n                            >\n                                {description}\n                            </Box>\n                        ) : null}\n                    </Box>\n                </Column>\n                {action ? <Column width=\"content\">{action}</Column> : null}\n            </Columns>\n        </Box>\n    )\n})\n\nexport { Banner }\nexport type { BannerProps }\n"],"names":["React","forwardRef","ref","id","tone","icon","title","description","action","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","titleId","useId","descriptionId","Box","role","aria-labelledby","aria-live","tabIndex","borderRadius","className","styles","banner","createElement","Columns","space","alignY","Column","width","aria-hidden","style","lineHeight","paddingY"],"mappings":"ioBAsCeA,EAAMC,YAAwC,SAEzDC,EAAAA,GAAG,IADHC,GAAEA,EAAFC,KAAMA,EAANC,KAAYA,EAAZC,MAAkBA,EAAlBC,YAAyBA,EAAzBC,OAAsCA,GACnCC,EAD8CC,EAC9CC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMC,EAAUC,EAAAA,QACVC,EAAgBD,EAAAA,QACtB,OACIf,gBAACiB,yCACOP,GADR,GAAA,CAEIR,IAAKA,EACLC,GAAIA,EACJe,KAAK,SACYC,kBAAAL,qBACCE,EAAaI,YACrB,SACVC,SAAU,EACVC,aAAa,WACbC,UAAW,CAACC,EAAAA,QAAOC,OAAQD,EAAAA,QAAiBpB,UAAAA,MAE5CJ,EAAC0B,cAAAC,WAAQC,MAAM,SAASC,OAAO,UAC3B7B,EAAA0B,cAACI,SACG,CAAAC,MAAM,UAASC,eAAA,EAEfC,MAAO,CAEHC,WAAY,IAGf7B,GAELL,EAAA0B,cAACI,EAADA,OAAO,KACH9B,EAAA0B,cAACT,MAAG,CAACkB,SAAS,UAENnC,EAAC0B,cAAAT,MADJV,GACQJ,GAAIW,EAASS,UAAW,CAACC,EAAAA,QAAOlB,MAAOkB,EAAAA,QAAgBpB,SAAAA,KAKxD,CAAAD,GAAIW,EACJS,UAAW,CACPC,EAAAA,QAAOlB,MAGPkB,EAAAA,QAJO,6BAKPA,EAAM,QAAA,SAAUpB,KAVnBE,GAgBRC,EACGP,gBAACiB,EAAAA,IAAG,CACAd,GAAIa,EACJO,UAAW,CAACC,EAAAA,QAAOjB,YAAaiB,EAAAA,QAAsBpB,eAAAA,KAErDG,GAEL,OAGXC,EAASR,gBAAC8B,SAAM,CAACC,MAAM,WAAWvB,GAAmB"}
+{"version":3,"file":"banner.js","sources":["../../src/banner/banner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { useId } from '../utils/common-helpers'\n\nimport styles from './banner.module.css'\nimport { Button, ButtonProps, IconButton } from '../button'\nimport { CloseIcon } from '../icons/close-icon'\nimport { BannerIcon } from '../icons/banner-icon'\nimport { TextLink } from '../text-link'\n\n/**\n * Represents the type of a banner.\n * 'neutral' accepts a custom icon, the rest do not.\n * @default 'neutral'\n */\nexport type BannerType = 'neutral' | SystemBannerType\n\n/**\n * Predefined system types for banners.\n * Each type has its own preset icon.\n */\nexport type SystemBannerType = 'info' | 'upgrade' | 'experiment' | 'warning' | 'error' | 'success'\n\ntype BaseAction = {\n    variant: 'primary' | 'tertiary'\n    label: string\n} & Pick<ButtonProps, 'loading' | 'disabled'>\ntype ActionButton = BaseAction & { type: 'button' } & Omit<\n        React.ButtonHTMLAttributes<HTMLButtonElement>,\n        'className'\n    >\ntype ActionLink = BaseAction & { type: 'link' } & Omit<\n        React.AnchorHTMLAttributes<HTMLAnchorElement>,\n        'className'\n    >\n/**\n * Represents an action that can be taken from the banner.\n * Can be either a button or a link, sharing common properties from BaseAction.\n */\ntype Action = ActionButton | ActionLink\n\n/**\n * Configuration for inline links within the banner description.\n * Extends TextLink component props with a required label.\n */\ntype InlineLink = { label: string } & React.ComponentProps<typeof TextLink>\n\ntype WithCloseButton = {\n    closeLabel?: string\n    onClose: () => void\n}\ntype WithoutCloseButton = {\n    closeLabel?: never\n    onClose?: never\n}\n/**\n * Controls the close button behavior.\n * If none is provided, the banner will not have a close button.\n */\ntype CloseButton = WithCloseButton | WithoutCloseButton\n\ntype BaseBanner = {\n    id?: string\n    title?: React.ReactNode\n    description: Exclude<React.ReactNode, null | undefined | boolean>\n    action?: Action\n    inlineLinks?: InlineLink[]\n} & CloseButton\n\n/**\n * Configuration for neutral banners.\n * Can include either an image, an icon, or neither, but never both.\n */\ntype NeutralBanner = BaseBanner & {\n    type: Extract<BannerType, 'neutral'>\n} & (\n        | { image: React.ReactElement; icon?: never }\n        | { icon: React.ReactElement; image?: never }\n        | { image?: never; icon?: never }\n    )\n\n/**\n * Configuration for system banners.\n * Cannot include custom images or icons as they use preset ones.\n */\ntype SystemBanner = BaseBanner & {\n    type: SystemBannerType\n    image?: never\n    icon?: never\n}\n\ntype BannerProps = NeutralBanner | SystemBanner\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(\n    {\n        id,\n        type,\n        title,\n        description,\n        action,\n        icon,\n        image,\n        inlineLinks,\n        closeLabel,\n        onClose,\n        ...props\n    }: BannerProps,\n    ref,\n) {\n    const titleId = useId()\n    const descriptionId = useId()\n\n    const closeButton = onClose ? (\n        <IconButton\n            exceptionallySetClassName={styles.closeButton}\n            variant=\"quaternary\"\n            onClick={onClose}\n            icon={<CloseIcon />}\n            aria-label={closeLabel ?? 'Close banner'}\n        />\n    ) : null\n\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            id={id}\n            display=\"flex\"\n            flexDirection=\"column\"\n            justifyContent=\"center\"\n            role=\"status\"\n            aria-labelledby={title ? titleId : descriptionId}\n            aria-describedby={title ? descriptionId : undefined}\n            aria-live=\"polite\"\n            tabIndex={0}\n            borderRadius=\"full\"\n            className={styles.banner}\n        >\n            {image ? <Box className={styles.image}>{image}</Box> : null}\n\n            <Box className={styles.content} display=\"flex\" gap=\"small\" alignItems=\"center\">\n                <Box className={styles.staticContent} display=\"flex\" gap=\"small\" flexGrow={1}>\n                    <Box className={styles.icon}>\n                        {type === 'neutral' ? icon : <BannerIcon type={type} />}\n                        {closeButton}\n                    </Box>\n\n                    <Box className={styles.copy} display=\"flex\" flexDirection=\"column\">\n                        {title ? (\n                            <Box id={titleId} className={styles.title}>\n                                {title}\n                            </Box>\n                        ) : null}\n                        <Box\n                            id={descriptionId}\n                            className={[styles.description, title ? styles.secondary : null]}\n                        >\n                            {description}\n                            {inlineLinks?.map(({ label, ...props }, index) => {\n                                return (\n                                    <React.Fragment key={index}>\n                                        <TextLink\n                                            {...props}\n                                            exceptionallySetClassName={styles.inlineLink}\n                                        >\n                                            {label}\n                                        </TextLink>\n                                        {index < inlineLinks.length - 1 ? <span> · </span> : ''}\n                                    </React.Fragment>\n                                )\n                            })}\n                        </Box>\n                    </Box>\n                </Box>\n\n                {action || closeButton ? (\n                    <Box className={styles.actions} display=\"flex\" gap=\"small\">\n                        {action?.type === 'button' ? <ActionButton {...action} /> : null}\n                        {action?.type === 'link' ? <ActionLink {...action} /> : null}\n                        {closeButton}\n                    </Box>\n                ) : null}\n            </Box>\n        </Box>\n    )\n})\n\nfunction ActionButton({ type, label, ...props }: ActionButton) {\n    return <Button {...props}>{label}</Button>\n}\n\nfunction ActionLink({ type, label, variant, ...props }: ActionLink) {\n    return (\n        <Button\n            variant={variant}\n            render={<a rel=\"noopener noreferrer\" target=\"_blank\" {...props} />}\n        >\n            {label}\n        </Button>\n    )\n}\n\nexport { Banner }\nexport type { BannerProps }\n"],"names":["ActionButton","_ref3","label","props","_objectWithoutProperties","objectWithoutProperties","_excluded3","React","Button","ActionLink","_ref4","variant","_excluded4","createElement","render","_objectSpread","rel","target","forwardRef","ref","id","type","title","description","action","icon","image","inlineLinks","closeLabel","onClose","_ref","_excluded","titleId","useId","descriptionId","closeButton","IconButton","exceptionallySetClassName","styles","onClick","CloseIcon","aria-label","Box","display","flexDirection","justifyContent","role","aria-describedby","undefined","aria-live","tabIndex","borderRadius","className","banner","content","gap","alignItems","staticContent","flexGrow","BannerIcon","copy","secondary","map","index","_ref2","_excluded2","Fragment","key","TextLink","inlineLink","length","actions"],"mappings":"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"}

package/lib/banner/banner.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={banner:"c1dffd60","banner-info":"_9d552538","banner-promotion":"d797752e",title:"_8cd610da","title-without-description":"_78ea5373","title-info":"_319c73fa","title-promotion":"fc84253f",description:"af4bd758","description-info":"b95a8c07","description-promotion":"_3c33f615"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={banner:"a3c628a9",image:"b2cb529e",content:"_608df6ce",description:"_7d8d68de",title:"_05e2783a",secondary:"d5e077f5",icon:"dbf93d2e",closeButton:"_22f9ed25",copy:"_99ded674",inlineLink:"fe6dd094",staticContent:"e6ed6d9e",actions:"_51bd96a8"};
 //# sourceMappingURL=banner.module.css.js.map

package/lib/banner/story-promo-image.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare function PromoImage({ theme }: {
+    theme?: 'light' | 'dark';
+}): React.JSX.Element;

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":"ypBAqBA,SAASA,EAAoBC,GACzB,MAAgB,UAATA,EAAmB,SAAoB,YAATA,EAAqB,WAAa,YAG3E,SAASC,GAAaC,GAAEA,EAAFC,SAAMA,EAANH,KAAgBA,IAClC,OACII,gBAACC,OAAI,CAACC,GAAG,IAAIN,KAAMD,EAAoBC,GAAOO,KAAK,OAAOL,GAAIA,GAChD,YAATF,EACGI,EAACI,cAAAC,EAAAA,IACG,CAAAH,GAAG,OACHI,YAAY,SACZC,QAAQ,aACRC,UAAWC,EAAM,QAACC,aAElBV,EAACI,cAAAO,UAAQ,CAAAR,KAAM,MAEnB,KACHJ,GAUb,SAASa,GAAoBb,SAAEA,EAAFH,KAAYA,IACrC,OACII,EAACI,cAAAH,QAAKL,KAAMD,EAAoBC,GAAOO,KAAK,QACvCJ,GAeb,SAASc,GAAoBC,MACzBA,EADyBC,UAEzBA,IAEA,IAAKA,EACD,MAAO,CACHC,MAAO,KACPpB,KAAM,WAId,MAAMqB,EAAgBC,OAAOJ,GAAS,IAAIK,OAG1C,MAAO,CACHH,MAAUC,EAAL,IAAsBF,EAC3BnB,KAJoBmB,EAAYE,GAnEX,GAuEG,QAAU,6BAkI1C,UAAmBG,QACfA,EAAU,UADKC,MAEfA,EAFeP,MAGfA,EAHeQ,eAIfA,EAJeC,QAKfA,EALe3B,KAMfA,EAAO,UANQY,UAOfA,EAPeT,SAQfA,EAReyB,SASfA,EATeT,UAUfA,EAVeU,OAWfA,EACAC,mBAAoBC,EACpB7B,GAAI8B,IAEJ,MAAM9B,EAAK+B,QAAMD,GACXE,EAAYD,EAAAA,QAEZE,EAAclB,EAAoB,CAAEC,MAAAA,EAAOC,UAAAA,KAE1CiB,EAAgBC,GAAqBjC,EAAMkC,SAAwBH,EAAYf,QAC/EmB,EAAoBC,GAAyBpC,EAAMkC,SAAoBH,EAAYnC,MAEpFyC,EAAkBV,MAAAA,EAAAA,EAA4BJ,EAAUO,EAAY,KAEpEQ,EAAaC,EAAAC,cAAAD,gBAAA,CACfzC,GAAAA,EACAgB,MAAAA,GACIuB,EAAkB,CAAEX,mBAAoBW,GAAoB,IAHjD,GAAA,CAIfI,eAAyB,UAAT7C,QAA0B8C,EAC1CC,SAASC,GACL,IAAK7B,EACD,OAGJ,MAAMgB,EAAclB,EAAoB,CACpCC,MAAO8B,EAAMC,cAAc/B,MAC3BC,UAAAA,IAGJkB,EAAkBF,EAAYf,OAC9BoB,EAAsBL,EAAYnC,SAqB1C,OAjBAI,EAAM8C,WACF,WACI,IAAK/B,EACD,OAGJ,MAAMgB,EAAclB,EAAoB,CACpCC,MAAAA,EACAC,UAAAA,IAGJkB,EAAkBF,EAAYf,OAC9BoB,EAAsBL,EAAYnC,QAEtC,CAACmB,EAAWD,IAIZd,EAACI,cAAA2C,QAAM,CAAAC,MAAM,SAASvB,OAAQA,GAC1BzB,EAACI,cAAAC,MACG,CAAAG,UAAW,CACPA,EACAC,EAAAA,QAAOwC,UACE,UAATrD,EAAmBa,EAAAA,QAAOyC,MAAQ,KACtB,aAAZ9B,EAAyBX,EAAAA,QAAO0C,SAAW,MAE/C3B,SAAUA,GAETH,GAASC,EACNtB,EAAAI,cAACC,EAAAA,IAAG,CACAH,GAAG,OACHK,QAAQ,OACR6C,eAAe,eACfC,WAAW,WAEXrD,EAAAI,cAACH,OACG,CAAAE,KAAkB,aAAZiB,EAAyB,UAAY,OAC3ClB,GAAG,QACHoD,QAASxD,GAERuB,EAAQrB,wBAAMQ,UAAWC,EAAM,QAAC8C,cAAelC,GAAgB,MAEnEC,EACGtB,EAACI,cAAAC,MAAI,CAAAG,UAAWC,EAAM,QAACa,eAAgBkC,YAAY,SAC9ClC,GAEL,MAER,KACHvB,EAASuC,IAEbf,GAAWS,EACRhC,gBAACyD,EAAAA,QAAO,CAACC,MAAM,QAAQV,MAAM,QAAQxB,SAAUA,GAC1CD,EACGvB,gBAAC2D,SAAM,CAACC,MAAM,QACV5D,EAAAI,cAACP,EAAa,CAAAC,GAAIgC,EAAWlC,KAAMA,GAC9B2B,IAGT,KACHS,EACGhC,gBAAC2D,SAAM,CAACC,MAAM,WACV5D,EAACI,cAAAQ,GAAoBhB,KAAMuC,GACtBH,IAGT,MAER"}

package/lib/icons/banner-icon.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { SystemBannerType } from '../banner/banner';
+declare function BannerIcon({ type, ...props }: JSX.IntrinsicElements['svg'] & {
+    type: SystemBannerType;
+}): React.JSX.Element | null;
+export { BannerIcon };

package/lib/icons/banner-icon.js

@@ -0,0 +1,2 @@
+"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

@@ -0,0 +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\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/index.d.ts

@@ -6,7 +6,6 @@ export * from './inline';
 export * from './stack';
 export * from './hidden';
 export * from './hidden-visually';
-export * from './alert';
 export * from './banner';
 export * from './loading';
 export * from './notice';

package/lib/index.js

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

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": "26.2.5",
+    "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

@@ -3,5 +3,9 @@
 .c7813d79{margin-top:var(--reactist-spacing-xsmall)}.d3449da6{margin-top:var(--reactist-spacing-small)}._4ea254c1{margin-top:var(--reactist-spacing-medium)}.c0844f64{margin-top:var(--reactist-spacing-large)}._213145b4{margin-top:var(--reactist-spacing-xlarge)}.df61c84c{margin-top:var(--reactist-spacing-xxlarge)}.efe72b13{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}._870c2768{margin-top:calc(var(--reactist-spacing-small)*-1)}._0b927c57{margin-top:calc(var(--reactist-spacing-medium)*-1)}._461db014{margin-top:calc(var(--reactist-spacing-large)*-1)}._2a3a8cb8{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}._9bcda921{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._6add01e4{margin-top:var(--reactist-spacing-xsmall)}._735ef86b{margin-top:var(--reactist-spacing-small)}._0477d068{margin-top:var(--reactist-spacing-medium)}._2c90af97{margin-top:var(--reactist-spacing-large)}._63a82db6{margin-top:var(--reactist-spacing-xlarge)}._03cd7726{margin-top:var(--reactist-spacing-xxlarge)}.c986a62a{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}.be2bdcdd{margin-top:calc(var(--reactist-spacing-small)*-1)}._47d2686b{margin-top:calc(var(--reactist-spacing-medium)*-1)}._25e5af9d{margin-top:calc(var(--reactist-spacing-large)*-1)}.ee82f441{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.a6f9d404{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._4d8d9a36{margin-top:var(--reactist-spacing-xsmall)}.e813cee7{margin-top:var(--reactist-spacing-small)}._56975b7d{margin-top:var(--reactist-spacing-medium)}._53b367f6{margin-top:var(--reactist-spacing-large)}.d69e7311{margin-top:var(--reactist-spacing-xlarge)}._92f57c7e{margin-top:var(--reactist-spacing-xxlarge)}._96880d3e{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}.dc3f3555{margin-top:calc(var(--reactist-spacing-small)*-1)}._86dd06bb{margin-top:calc(var(--reactist-spacing-medium)*-1)}.c93ef12e{margin-top:calc(var(--reactist-spacing-large)*-1)}.bc8fd4a2{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.b12a9124{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}}._6016f4fb{margin-right:var(--reactist-spacing-xsmall)}.b85e3dfa{margin-right:var(--reactist-spacing-small)}._297575f4{margin-right:var(--reactist-spacing-medium)}.b401ac6c{margin-right:var(--reactist-spacing-large)}.dc3ec387{margin-right:var(--reactist-spacing-xlarge)}._24694604{margin-right:var(--reactist-spacing-xxlarge)}._8e9bf2ee{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}.ae9d1115{margin-right:calc(var(--reactist-spacing-small)*-1)}._14e46fc3{margin-right:calc(var(--reactist-spacing-medium)*-1)}._3370631b{margin-right:calc(var(--reactist-spacing-large)*-1)}._3f0e9b50{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}.bc13e010{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._6fa1aae3{margin-right:var(--reactist-spacing-xsmall)}._2976c5cb{margin-right:var(--reactist-spacing-small)}._38d94802{margin-right:var(--reactist-spacing-medium)}.db9569b5{margin-right:var(--reactist-spacing-large)}._4a52f06d{margin-right:var(--reactist-spacing-xlarge)}._8a0f0410{margin-right:var(--reactist-spacing-xxlarge)}.e7d40e9d{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}._680fde91{margin-right:calc(var(--reactist-spacing-small)*-1)}._021010ca{margin-right:calc(var(--reactist-spacing-medium)*-1)}._9e52c87c{margin-right:calc(var(--reactist-spacing-large)*-1)}._4d602613{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}._21b1b65a{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._7321bc07{margin-right:var(--reactist-spacing-xsmall)}.fa1721f4{margin-right:var(--reactist-spacing-small)}._3fd7b4b8{margin-right:var(--reactist-spacing-medium)}._4fdc2f74{margin-right:var(--reactist-spacing-large)}.c0254761{margin-right:var(--reactist-spacing-xlarge)}._710a5f09{margin-right:var(--reactist-spacing-xxlarge)}.e08bee7f{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}.e5ab73d2{margin-right:calc(var(--reactist-spacing-small)*-1)}._5e731477{margin-right:calc(var(--reactist-spacing-medium)*-1)}._0f57a22e{margin-right:calc(var(--reactist-spacing-large)*-1)}._25f26ed3{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}._11a3b4e0{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}}._6a4f69f7{margin-bottom:var(--reactist-spacing-xsmall)}.db26b033{margin-bottom:var(--reactist-spacing-small)}.c7313022{margin-bottom:var(--reactist-spacing-medium)}.a5885889{margin-bottom:var(--reactist-spacing-large)}._33dfbd8e{margin-bottom:var(--reactist-spacing-xlarge)}._795ad2de{margin-bottom:var(--reactist-spacing-xxlarge)}.a329dbd3{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._85e739fb{margin-bottom:calc(var(--reactist-spacing-small)*-1)}._681f65ff{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}.caf50d8f{margin-bottom:calc(var(--reactist-spacing-large)*-1)}._1e084cbf{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}._3dfb1c7e{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){.ef4735be{margin-bottom:var(--reactist-spacing-xsmall)}.de55afba{margin-bottom:var(--reactist-spacing-small)}._0e33ce88{margin-bottom:var(--reactist-spacing-medium)}._8ca391fc{margin-bottom:var(--reactist-spacing-large)}._3a609d23{margin-bottom:var(--reactist-spacing-xlarge)}._3e1177e4{margin-bottom:var(--reactist-spacing-xxlarge)}.d384884d{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._75254cec{margin-bottom:calc(var(--reactist-spacing-small)*-1)}._5d9f127d{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}._835f1089{margin-bottom:calc(var(--reactist-spacing-large)*-1)}.dad52a72{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}._8703a4bf{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._90fd20e9{margin-bottom:var(--reactist-spacing-xsmall)}.f3769191{margin-bottom:var(--reactist-spacing-small)}._156410f8{margin-bottom:var(--reactist-spacing-medium)}._7fed74d0{margin-bottom:var(--reactist-spacing-large)}._477dc10e{margin-bottom:var(--reactist-spacing-xlarge)}._85c82d89{margin-bottom:var(--reactist-spacing-xxlarge)}._4f09c1e0{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._9523e048{margin-bottom:calc(var(--reactist-spacing-small)*-1)}.efe10240{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}.c43971e6{margin-bottom:calc(var(--reactist-spacing-large)*-1)}.f9b4da15{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}.a10fdf70{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}}.f9be90b4{margin-left:var(--reactist-spacing-xsmall)}.f53218d5{margin-left:var(--reactist-spacing-small)}.c4a9b3ab{margin-left:var(--reactist-spacing-medium)}._5755e2c3{margin-left:var(--reactist-spacing-large)}._33fc9354{margin-left:var(--reactist-spacing-xlarge)}._4749a3bf{margin-left:var(--reactist-spacing-xxlarge)}.c76cb3c7{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}._96003c07{margin-left:calc(var(--reactist-spacing-small)*-1)}._09988d07{margin-left:calc(var(--reactist-spacing-medium)*-1)}.b4a486f6{margin-left:calc(var(--reactist-spacing-large)*-1)}.f396e75e{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._81d1f26d{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._0a46e8f1{margin-left:var(--reactist-spacing-xsmall)}._57c970af{margin-left:var(--reactist-spacing-small)}._4b6099d3{margin-left:var(--reactist-spacing-medium)}._378fcff5{margin-left:var(--reactist-spacing-large)}.f8785663{margin-left:var(--reactist-spacing-xlarge)}._72f957ee{margin-left:var(--reactist-spacing-xxlarge)}._2288c7e1{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.b27c1c05{margin-left:calc(var(--reactist-spacing-small)*-1)}._702cbb13{margin-left:calc(var(--reactist-spacing-medium)*-1)}._1a2748b4{margin-left:calc(var(--reactist-spacing-large)*-1)}.b8c043a5{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._8dc8ff63{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){.c2af646d{margin-left:var(--reactist-spacing-xsmall)}.c03d07be{margin-left:var(--reactist-spacing-small)}._915fb1d3{margin-left:var(--reactist-spacing-medium)}._64214ee1{margin-left:var(--reactist-spacing-large)}._7be4a22c{margin-left:var(--reactist-spacing-xlarge)}._5ec0a401{margin-left:var(--reactist-spacing-xxlarge)}.ea29f1ee{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.c26652c7{margin-left:calc(var(--reactist-spacing-small)*-1)}.c24f6af9{margin-left:calc(var(--reactist-spacing-medium)*-1)}.c2671f27{margin-left:calc(var(--reactist-spacing-large)*-1)}.cc51a04e{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}.fd581f54{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}}
 ._68ab48ca{min-width:0}._6fa2b565{min-width:var(--reactist-width-xsmall)}.dd50fabd{min-width:var(--reactist-width-small)}.e7e2c808{min-width:var(--reactist-width-medium)}._6abbe25e{min-width:var(--reactist-width-large)}._54f479ac{min-width:var(--reactist-width-xlarge)}._148492bc{max-width:var(--reactist-width-xsmall)}.bd023b96{max-width:var(--reactist-width-small)}.e102903f{max-width:var(--reactist-width-medium)}._0e8d76d7{max-width:var(--reactist-width-large)}._47a031d0{max-width:var(--reactist-width-xlarge)}.cd4c8183{max-width:100%}._5f5959e8{width:0}._8c75067a{width:100%}._56a651f6{width:auto}._26f87bb8{width:-moz-max-content;width:-webkit-max-content;width:max-content}._07a6ab44{width:-moz-min-content;width:-webkit-min-content;width:min-content}.a87016fa{width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}._1a972e50{width:var(--reactist-width-xsmall)}.c96d8261{width:var(--reactist-width-small)}.f3829d42{width:var(--reactist-width-medium)}._2caef228{width:var(--reactist-width-large)}._069e1491{width:var(--reactist-width-xlarge)}
 ._64ed24f4{gap:0}._2580a74b{gap:var(--reactist-spacing-xsmall)}.c68f8bf6{gap:var(--reactist-spacing-small)}._43e5f8e9{gap:var(--reactist-spacing-medium)}._966b120f{gap:var(--reactist-spacing-large)}.f957894c{gap:var(--reactist-spacing-xlarge)}._8cca104b{gap:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._5797cee2{gap:0}._9015672f{gap:var(--reactist-spacing-xsmall)}._7ec86eec{gap:var(--reactist-spacing-small)}._714d7179{gap:var(--reactist-spacing-medium)}.ae1deb59{gap:var(--reactist-spacing-large)}.e1cfce55{gap:var(--reactist-spacing-xlarge)}._168a8ff8{gap:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._43e2b619{gap:0}._0ea9bf88{gap:var(--reactist-spacing-xsmall)}.d451307a{gap:var(--reactist-spacing-small)}.bf93cf66{gap:var(--reactist-spacing-medium)}._1430cddf{gap:var(--reactist-spacing-large)}.fa00c93e{gap:var(--reactist-spacing-xlarge)}._6f3aee54{gap:var(--reactist-spacing-xxlarge)}}
-.eae3d34f,.eae3d34f>:last-child{--reactist-columns-gap:0px}._9b4012c9{--reactist-columns-gap:var(--reactist-spacing-xsmall)}.e35e0320{--reactist-columns-gap:var(--reactist-spacing-small)}._0703e67f{--reactist-columns-gap:var(--reactist-spacing-medium)}._1cf15621{--reactist-columns-gap:var(--reactist-spacing-large)}._1c7dff67{--reactist-columns-gap:var(--reactist-spacing-xlarge)}._25bee9b6{--reactist-columns-gap:var(--reactist-spacing-xxlarge)}._4bb9987d{flex-basis:content}._9dd31975{flex-basis:auto}._38d11c0e{flex-basis:calc(50% - var(--reactist-columns-gap))}._7ac225c6{flex-basis:calc(33.33333% - var(--reactist-columns-gap))}._9c340680{flex-basis:calc(66.66667% - var(--reactist-columns-gap))}._81cb99d2{flex-basis:calc(25% - var(--reactist-columns-gap))}._10fd355f{flex-basis:calc(75% - var(--reactist-columns-gap))}._3ee66520{flex-basis:calc(20% - var(--reactist-columns-gap))}.df1201a5{flex-basis:calc(40% - var(--reactist-columns-gap))}.f772e0b2{flex-basis:calc(60% - var(--reactist-columns-gap))}._880cbbb1{flex-basis:calc(80% - var(--reactist-columns-gap))}
-:root{--reactist-banner-title-font-size:14px;--reactist-banner-title-line-height:21px;--reactist-banner-description-font-size:12px;--reactist-banner-description-line-height:20px;--reactist-banner-info-border:#eee;--reactist-banner-info-background:#fafafa;--reactist-banner-info-title:#202020;--reactist-banner-info-description:#666;--reactist-banner-promotion-border:#fae8d6;--reactist-banner-promotion-background:#fffaf4;--reactist-banner-promotion-title:#202020;--reactist-banner-promotion-description:#666}.c1dffd60{border-style:solid;border-width:1px;padding:var(--reactist-spacing-small) var(--reactist-spacing-large);letter-spacing:-.15px;font-family:var(--reactist-font-family)}._9d552538{background-color:var(--reactist-banner-info-background);border-color:var(--reactist-banner-info-border)}.d797752e{background-color:var(--reactist-banner-promotion-background);border-color:var(--reactist-banner-promotion-border)}._8cd610da{font-size:var(--reactist-banner-title-font-size);line-height:var(--reactist-banner-title-line-height);font-weight:var(--reactist-font-weight-strong)}._78ea5373{font-weight:var(--reactist-font-weight-regular)}._319c73fa{color:var(--reactist-banner-info-title)}.fc84253f{color:var(--reactist-banner-promotion-title)}.af4bd758{font-size:var(--reactist-banner-description-font-size);line-height:var(--reactist-banner-description-line-height);font-weight:var(--reactist-font-weight-regular)}.b95a8c07{color:var(--reactist-banner-info-description)}._3c33f615{color:var(--reactist-banner-promotion-description)}
+:root{--reactist-banner-background-color:#fcfaf8;--reactist-banner-border-color:#e6e6e6;--reactist-divider-color:var(--reactist-divider-secondary);--reactist-banner-main-copy-font-size:14px;--reactist-banner-main-copy-line-height:21px;--reactist-banner-main-copy-spacing:-0.15px;--reactist-banner-main-copy-color:#202020;--reactist-banner-secondary-copy-font-size:12px;--reactist-banner-secondary-copy-line-height:20px;--reactist-banner-secondary-copy-color:#666}.a3c628a9{container-name:banner;container-type:inline-size;background-color:var(--reactist-banner-background-color);font-family:var(--reactist-font-family);border:1px solid var(--reactist-banner-border-color);overflow:hidden;min-height:64px}.a3c628a9:has(.b2cb529e){width:-webkit-min-content;width:-moz-min-content;width:min-content;container-type:normal}._608df6ce{padding:var(--reactist-spacing-large)}._7d8d68de,._05e2783a{font-size:var(--reactist-banner-main-copy-font-size);line-height:var(--reactist-banner-main-copy-line-height);letter-spacing:var(--reactist-banner-main-copy-spacing);color:var(--reactist-banner-main-copy-color)}._05e2783a{font-weight:var(--reactist-font-weight-strong)}._7d8d68de.d5e077f5{font-size:var(--reactist-banner-secondary-copy-font-size);line-height:var(--reactist-banner-secondary-copy-line-height);color:var(--reactist-banner-secondary-copy-color);letter-spacing:normal}.b2cb529e{border-bottom:1px solid var(--reactist-banner-divider-color)}.dbf93d2e svg,.b2cb529e img{display:block}.dbf93d2e ._22f9ed25{display:none}._99ded674{padding:calc(var(--reactist-spacing-xsmall)/2) 0}._99ded674 .fe6dd094:first-of-type{margin-left:var(--reactist-spacing-xsmall)}@container banner (width < 235px){._608df6ce,.e6ed6d9e{flex-direction:column;align-items:flex-start}.dbf93d2e{width:100%;align-items:center;justify-content:space-between}.dbf93d2e,.dbf93d2e ._22f9ed25{display:flex}.dbf93d2e ._22f9ed25:only-child{margin-left:auto}._51bd96a8 ._22f9ed25{display:none}}
+: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}

package/styles/banner.module.css.css

@@ -1 +1 @@
-:root{--reactist-banner-title-font-size:14px;--reactist-banner-title-line-height:21px;--reactist-banner-description-font-size:12px;--reactist-banner-description-line-height:20px;--reactist-banner-info-border:#eee;--reactist-banner-info-background:#fafafa;--reactist-banner-info-title:#202020;--reactist-banner-info-description:#666;--reactist-banner-promotion-border:#fae8d6;--reactist-banner-promotion-background:#fffaf4;--reactist-banner-promotion-title:#202020;--reactist-banner-promotion-description:#666}.c1dffd60{border-style:solid;border-width:1px;padding:var(--reactist-spacing-small) var(--reactist-spacing-large);letter-spacing:-.15px;font-family:var(--reactist-font-family)}._9d552538{background-color:var(--reactist-banner-info-background);border-color:var(--reactist-banner-info-border)}.d797752e{background-color:var(--reactist-banner-promotion-background);border-color:var(--reactist-banner-promotion-border)}._8cd610da{font-size:var(--reactist-banner-title-font-size);line-height:var(--reactist-banner-title-line-height);font-weight:var(--reactist-font-weight-strong)}._78ea5373{font-weight:var(--reactist-font-weight-regular)}._319c73fa{color:var(--reactist-banner-info-title)}.fc84253f{color:var(--reactist-banner-promotion-title)}.af4bd758{font-size:var(--reactist-banner-description-font-size);line-height:var(--reactist-banner-description-line-height);font-weight:var(--reactist-font-weight-regular)}.b95a8c07{color:var(--reactist-banner-info-description)}._3c33f615{color:var(--reactist-banner-promotion-description)}
+:root{--reactist-banner-background-color:#fcfaf8;--reactist-banner-border-color:#e6e6e6;--reactist-divider-color:var(--reactist-divider-secondary);--reactist-banner-main-copy-font-size:14px;--reactist-banner-main-copy-line-height:21px;--reactist-banner-main-copy-spacing:-0.15px;--reactist-banner-main-copy-color:#202020;--reactist-banner-secondary-copy-font-size:12px;--reactist-banner-secondary-copy-line-height:20px;--reactist-banner-secondary-copy-color:#666}.a3c628a9{container-name:banner;container-type:inline-size;background-color:var(--reactist-banner-background-color);font-family:var(--reactist-font-family);border:1px solid var(--reactist-banner-border-color);overflow:hidden;min-height:64px}.a3c628a9:has(.b2cb529e){width:-webkit-min-content;width:-moz-min-content;width:min-content;container-type:normal}._608df6ce{padding:var(--reactist-spacing-large)}._7d8d68de,._05e2783a{font-size:var(--reactist-banner-main-copy-font-size);line-height:var(--reactist-banner-main-copy-line-height);letter-spacing:var(--reactist-banner-main-copy-spacing);color:var(--reactist-banner-main-copy-color)}._05e2783a{font-weight:var(--reactist-font-weight-strong)}._7d8d68de.d5e077f5{font-size:var(--reactist-banner-secondary-copy-font-size);line-height:var(--reactist-banner-secondary-copy-line-height);color:var(--reactist-banner-secondary-copy-color);letter-spacing:normal}.b2cb529e{border-bottom:1px solid var(--reactist-banner-divider-color)}.dbf93d2e svg,.b2cb529e img{display:block}.dbf93d2e ._22f9ed25{display:none}._99ded674{padding:calc(var(--reactist-spacing-xsmall)/2) 0}._99ded674 .fe6dd094:first-of-type{margin-left:var(--reactist-spacing-xsmall)}@container banner (width < 235px){._608df6ce,.e6ed6d9e{flex-direction:column;align-items:flex-start}.dbf93d2e{width:100%;align-items:center;justify-content:space-between}.dbf93d2e,.dbf93d2e ._22f9ed25{display:flex}.dbf93d2e ._22f9ed25:only-child{margin-left:auto}._51bd96a8 ._22f9ed25{display:none}}

package/styles/index.css

@@ -1,7 +1,9 @@
+.reactist_button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;border:none;background-color:transparent;padding:0}.reactist_button[aria-disabled=true]{opacity:.4;cursor:not-allowed}.reactist_button--small{font-size:.81rem;color:#202020;font-weight:400;line-height:1.6}.reactist_button--danger,.reactist_button--primary,.reactist_button--secondary{font-size:.875rem;color:#202020;font-weight:400;line-height:1.7;box-sizing:border-box;padding:5px 15px;border:1px solid rgba(0,0,0,.1);border-radius:3px}.reactist_button--danger.reactist_button--small,.reactist_button--primary.reactist_button--small,.reactist_button--secondary.reactist_button--small{padding:5px 10px}.reactist_button--danger.reactist_button--large,.reactist_button--primary.reactist_button--large,.reactist_button--secondary.reactist_button--large{padding:10px 15px}.reactist_button--primary{background-color:#3f82ef;color:#fff}.reactist_button--primary:not([disabled]):hover{background-color:#3b7be2}.reactist_button--danger{background-color:#de4c4a;color:#fff}.reactist_button--danger:not([disabled]):hover{background-color:#cf2826}.reactist_button--secondary{background-color:#fff;color:#202020;border-color:#dcdcdc}.reactist_button--secondary:not([disabled]):hover{background-color:#f9f9f9}.reactist_button--link{color:#3f82ef;text-decoration:none}.reactist_button--link:disabled{color:grey}.reactist_button--link:not(:disabled):hover{text-decoration:underline}.reactist_button--link:not(.reactist_button--link--small):not(.reactist_button--link--large){font-size:inherit}.reactist_button--danger.reactist_button--loading,.reactist_button--primary.reactist_button--loading,.reactist_button--secondary.reactist_button--loading{cursor:progress!important}.reactist_button--danger.reactist_button--loading:after,.reactist_button--primary.reactist_button--loading:after,.reactist_button--secondary.reactist_button--loading:after{background-repeat:no-repeat;background-size:15px;content:"";display:inline-block;height:15px;margin-left:12px;vertical-align:middle;width:15px;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:reactistRotateRight;animation-name:reactistRotateRight;-webkit-animation-timing-function:linear;animation-timing-function:linear;color:#fff;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNi4yNTciIGhlaWdodD0iMTYuMjU3IiB2aWV3Qm94PSItMTQ3LjgxMyAyMDYuNzUgMTYuMjU3IDE2LjI1NyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMTQ3LjgxMyAyMDYuNzUgMTYuMjU3IDE2LjI1NyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMikiPjxkZWZzPjxmaWx0ZXIgaWQ9ImEiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iLTE0Ny42ODQiIHk9IjIxMC45MjkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMy45NSI+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIxIDAgMCAwIDAgMCAxIDAgMCAwIDAgMCAxIDAgMCAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L2RlZnM+PG1hc2sgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iLTE0Ny42ODQiIHk9IjIxMC45MjkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMy45NSIgaWQ9ImIiPjxnIGZpbHRlcj0idXJsKCNhKSI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTS0xNDguNTg0IDIwNy45NzloMTh2MThoLTE4eiIvPjwvZz48L21hc2s+PHBhdGggbWFzaz0idXJsKCNiKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTS0xNDQuNjM0IDIxMS45MjlhNi45OTkgNi45OTkgMCAwMDAgOS44OTloMGE2Ljk5OSA2Ljk5OSAwIDAwOS44OTkgMCA2Ljk5OSA2Ljk5OSAwIDAwMC05Ljg5OSIvPjwvZz48L3N2Zz4=")}.reactist_button--secondary.reactist_button--loading{border-color:#dcdcdc;background-color:#dcdcdc;color:grey}@-webkit-keyframes reactistRotateRight{0%{transform:rotate(0deg);transform-origin:center center}to{transform:rotate(1turn);transform-origin:center center}}@keyframes reactistRotateRight{0%{transform:rotate(0deg);transform-origin:center center}to{transform:rotate(1turn);transform-origin:center center}}
+.reactist_dropdown .trigger{cursor:pointer;display:block}.reactist_dropdown .body{border-radius:3px;border:1px solid #dcdcdc;overflow:hidden;box-shadow:0 1px 8px 0 rgba(0,0,0,.08);z-index:1;background-color:#fff}.reactist_dropdown hr{border:none;height:1px;background-color:#dcdcdc;margin:0 5px}.reactist_dropdown .with_arrow:after,.reactist_dropdown .with_arrow:before{z-index:1;content:"";display:block;position:absolute;width:0;height:0;border-style:solid;border-width:6px;right:14px}.reactist_dropdown .with_arrow:after{top:-11px;border-color:transparent transparent #fff}.reactist_dropdown .with_arrow:before{top:-12px;border-color:transparent transparent #dcdcdc}.reactist_dropdown .with_arrow.top:after{top:-1px;border-color:#fff transparent transparent}.reactist_dropdown .with_arrow.top:before{top:-1px;right:13px;border-width:7px;border-color:#dcdcdc transparent transparent}
 .fb8d74bb{box-sizing:border-box;border:0;margin:0;padding:0;font-size:var(--reactist-font-size-body);font-family:inherit;vertical-align:baseline;background-color:transparent;list-style:none}pre.fb8d74bb{font-family:var(--reactist-font-family-monospace)}.fb8d74bb[hidden]{display:none!important}._18f74af9{position:absolute}.b292fef1{position:fixed}.e4e217d4{position:relative}._66895b64{position:-webkit-sticky;position:sticky}@media (min-width:768px){._00e8a0ce{position:absolute}.efaf64be{position:fixed}._76e540fd{position:relative}.bd286900{position:-webkit-sticky;position:sticky}}@media (min-width:992px){._09e9f472{position:absolute}._893383f1{position:fixed}.dea3890d{position:relative}._6a61c94d{position:-webkit-sticky;position:sticky}}._64dcc902{display:block}._14423c92{display:flex}._6a38242d{display:inline}._348efc1f{display:inline-block}._150907c8{display:inline-flex}._3da48ad6{display:none}@media (min-width:768px){._0daac9f2{display:block}.f62c43b1{display:flex}._5839a4e4{display:inline}._8068aaf2{display:inline-block}._76562ea5{display:inline-flex}._4f7a886f{display:none}}@media (min-width:992px){._4fd4b789{display:block}._4d08e78f{display:flex}._0da15585{display:inline}.d0fcc019{display:inline-block}._79f967d4{display:inline-flex}._2ffa0d03{display:none}}._2d7320f2{flex-direction:column}._5f8879d9{flex-direction:row}@media (min-width:768px){._2c919a43{flex-direction:column}._4da1f194{flex-direction:row}}@media (min-width:992px){._66fd35ea{flex-direction:column}._4b79448d{flex-direction:row}}._202b0c8c{flex-wrap:wrap}._45a8f27f{flex-wrap:nowrap}._7d9ec5b0{flex-shrink:0}._9ce442fb{flex-grow:0}.c3b69d70{flex-grow:1}._7cc6458c{align-items:flex-start}.b76144ce{align-items:center}.e42ffab4{align-items:flex-end}._3975b234{align-items:baseline}@media (min-width:768px){.b670f77e{align-items:flex-start}._976e7156{align-items:center}._385c60b1{align-items:flex-end}._52b577fc{align-items:baseline}}@media (min-width:992px){._2e1cc27f{align-items:flex-start}._3a9e51e9{align-items:center}.dfc189b2{align-items:flex-end}._5fabaec4{align-items:baseline}}.a65d9c55{justify-content:flex-start}.b4e05554{justify-content:center}.f76804e6{justify-content:flex-end}._0095203e{justify-content:space-around}._6eb365d1{justify-content:space-between}._4111e641{justify-content:space-evenly}@media (min-width:768px){._6fda855d{justify-content:flex-start}.c2d359f8{justify-content:center}.e271941d{justify-content:flex-end}._2321488d{justify-content:space-around}.e4a9b2e3{justify-content:space-between}.bdc232f2{justify-content:space-evenly}}@media (min-width:992px){._0d16bb5c{justify-content:flex-start}.eca8082a{justify-content:center}._97ea6bb7{justify-content:flex-end}._2321488d{justify-content:space-around}._58e61602{justify-content:space-between}.bdc232f2{justify-content:space-evenly}}._794c8ab8{align-self:stretch}.c510efd5{align-self:flex-start}.b3f71626{align-self:center}._13771d73{align-self:flex-end}._64318454{align-self:baseline}@media (min-width:768px){._309c6ba7{align-self:stretch}._92dfd036{align-self:flex-start}._811f9906{align-self:center}._2cd2336e{align-self:flex-end}.bd2c9dad{align-self:baseline}}@media (min-width:992px){.d8215926{align-self:stretch}.b78f5c06{align-self:flex-start}._683e0cdb{align-self:center}._489f1dc8{align-self:flex-end}._4aca1032{align-self:baseline}}._68aab614{overflow:hidden}.ac28a3b1{overflow:auto}._50b88b52{overflow:visible}.c2fdd1c1{overflow:scroll}._75ca308a{height:100%}.a9ca9830{background-color:var(--reactist-bg-default)}.b9ff0c93{background-color:var(--reactist-bg-aside)}.efc303e5{background-color:var(--reactist-bg-highlight)}.ec657626{background-color:var(--reactist-bg-selected)}._00d3482f{background-color:var(--reactist-bg-toast);color:var(--reactist-content-primary);--reactist-content-primary:var(--reactist-toast-content-primary);--reactist-content-secondary:var(--reactist-toast-content-secondary);--reactist-text-link-idle-tint:var(--reactist-content-primary);--reactist-text-link-idle-decoration:var(--reactist-text-link-hover-decoration);--reactist-actionable-tertiary-idle-tint:var(--reactist-toast-actionable-primary-tint);--reactist-actionable-tertiary-hover-tint:var(--reactist-toast-actionable-primary-tint);--reactist-actionable-tertiary-hover-fill:var(--reactist-toast-actionable-hover-fill);--reactist-actionable-quaternary-idle-tint:var(--reactist-toast-actionable-secondary-tint);--reactist-actionable-quaternary-hover-tint:var(--reactist-toast-actionable-secondary-tint);--reactist-actionable-quaternary-hover-fill:var(--reactist-toast-actionable-hover-fill)}._958da546{border-radius:var(--reactist-border-radius-small)}._79077c62{border-radius:var(--reactist-border-radius-large)}._68981e89{border:1px solid var(--reactist-divider-primary)}._2bda8f7a{border:1px solid var(--reactist-divider-secondary)}._7152c573{border:1px solid var(--reactist-divider-tertiary)}._1f362dec{text-align:start}._1c09cd18{text-align:center}.b9663f5e{text-align:end}.a0eba489{text-align:justify}@media (min-width:768px){._60b9abf8{text-align:start}._2c70943c{text-align:center}.a512d4e1{text-align:end}._5d02c334{text-align:justify}}@media (min-width:992px){.ad2496a1{text-align:start}.ee87b016{text-align:center}._6dd48127{text-align:end}._1e70d216{text-align:justify}}
 .c4803194{padding-top:var(--reactist-spacing-xsmall)}._4e9ab24b{padding-top:var(--reactist-spacing-small)}._1d226e27{padding-top:var(--reactist-spacing-medium)}.eb6097f1{padding-top:var(--reactist-spacing-large)}.d3229ba4{padding-top:var(--reactist-spacing-xlarge)}._47978ba4{padding-top:var(--reactist-spacing-xxlarge)}@media (min-width:768px){.f987719c{padding-top:var(--reactist-spacing-xsmall)}._8dbc4b4d{padding-top:var(--reactist-spacing-small)}.ae44fe07{padding-top:var(--reactist-spacing-medium)}.ffe9548d{padding-top:var(--reactist-spacing-large)}.f2b76a44{padding-top:var(--reactist-spacing-xlarge)}.c6eb8f43{padding-top:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._8699b560{padding-top:var(--reactist-spacing-xsmall)}._02c374b7{padding-top:var(--reactist-spacing-small)}._0dd0332f{padding-top:var(--reactist-spacing-medium)}.da55f1f6{padding-top:var(--reactist-spacing-large)}._8ef2a278{padding-top:var(--reactist-spacing-xlarge)}._8b493b28{padding-top:var(--reactist-spacing-xxlarge)}}._211eebc7{padding-right:var(--reactist-spacing-xsmall)}.ad0ccf15{padding-right:var(--reactist-spacing-small)}.a03e39af{padding-right:var(--reactist-spacing-medium)}.f0941ead{padding-right:var(--reactist-spacing-large)}.e47c5a43{padding-right:var(--reactist-spacing-xlarge)}.e849a5cf{padding-right:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._85374228{padding-right:var(--reactist-spacing-xsmall)}._89df37b9{padding-right:var(--reactist-spacing-small)}._1cc50ebe{padding-right:var(--reactist-spacing-medium)}._1060982b{padding-right:var(--reactist-spacing-large)}.be58847d{padding-right:var(--reactist-spacing-xlarge)}._45093484{padding-right:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.f8d99d6a{padding-right:var(--reactist-spacing-xsmall)}.efa076d9{padding-right:var(--reactist-spacing-small)}.e59caa64{padding-right:var(--reactist-spacing-medium)}.da42f46a{padding-right:var(--reactist-spacing-large)}.b3ee2580{padding-right:var(--reactist-spacing-xlarge)}._3ef94658{padding-right:var(--reactist-spacing-xxlarge)}}.b0e6eab4{padding-bottom:var(--reactist-spacing-xsmall)}._9510d053{padding-bottom:var(--reactist-spacing-small)}.d7af60c9{padding-bottom:var(--reactist-spacing-medium)}.b75f86cd{padding-bottom:var(--reactist-spacing-large)}.fbd4ce29{padding-bottom:var(--reactist-spacing-xlarge)}._33e3ad63{padding-bottom:var(--reactist-spacing-xxlarge)}@media (min-width:768px){.f0302da7{padding-bottom:var(--reactist-spacing-xsmall)}._4f9b8012{padding-bottom:var(--reactist-spacing-small)}._4333e20e{padding-bottom:var(--reactist-spacing-medium)}._30bbc76c{padding-bottom:var(--reactist-spacing-large)}.ba5a4008{padding-bottom:var(--reactist-spacing-xlarge)}._423a3b1a{padding-bottom:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.b40139b7{padding-bottom:var(--reactist-spacing-xsmall)}.f96071fa{padding-bottom:var(--reactist-spacing-small)}.fe803c9a{padding-bottom:var(--reactist-spacing-medium)}._01686eb9{padding-bottom:var(--reactist-spacing-large)}.afa763d8{padding-bottom:var(--reactist-spacing-xlarge)}.a95785f1{padding-bottom:var(--reactist-spacing-xxlarge)}}.cad4e2ec{padding-left:var(--reactist-spacing-xsmall)}.d70b3c17{padding-left:var(--reactist-spacing-small)}._8c851bd6{padding-left:var(--reactist-spacing-medium)}._078feb3c{padding-left:var(--reactist-spacing-large)}._76ab968c{padding-left:var(--reactist-spacing-xlarge)}.aaca85d7{padding-left:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._5eb0e5aa{padding-left:var(--reactist-spacing-xsmall)}._0384fb4f{padding-left:var(--reactist-spacing-small)}.edffff6f{padding-left:var(--reactist-spacing-medium)}._873b9a46{padding-left:var(--reactist-spacing-large)}._89105db5{padding-left:var(--reactist-spacing-xlarge)}.db1966fe{padding-left:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.b17f826b{padding-left:var(--reactist-spacing-xsmall)}._6dc83610{padding-left:var(--reactist-spacing-small)}._3421b8b2{padding-left:var(--reactist-spacing-medium)}._68cec7a6{padding-left:var(--reactist-spacing-large)}._94bde020{padding-left:var(--reactist-spacing-xlarge)}.b94ee579{padding-left:var(--reactist-spacing-xxlarge)}}
 .c7813d79{margin-top:var(--reactist-spacing-xsmall)}.d3449da6{margin-top:var(--reactist-spacing-small)}._4ea254c1{margin-top:var(--reactist-spacing-medium)}.c0844f64{margin-top:var(--reactist-spacing-large)}._213145b4{margin-top:var(--reactist-spacing-xlarge)}.df61c84c{margin-top:var(--reactist-spacing-xxlarge)}.efe72b13{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}._870c2768{margin-top:calc(var(--reactist-spacing-small)*-1)}._0b927c57{margin-top:calc(var(--reactist-spacing-medium)*-1)}._461db014{margin-top:calc(var(--reactist-spacing-large)*-1)}._2a3a8cb8{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}._9bcda921{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._6add01e4{margin-top:var(--reactist-spacing-xsmall)}._735ef86b{margin-top:var(--reactist-spacing-small)}._0477d068{margin-top:var(--reactist-spacing-medium)}._2c90af97{margin-top:var(--reactist-spacing-large)}._63a82db6{margin-top:var(--reactist-spacing-xlarge)}._03cd7726{margin-top:var(--reactist-spacing-xxlarge)}.c986a62a{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}.be2bdcdd{margin-top:calc(var(--reactist-spacing-small)*-1)}._47d2686b{margin-top:calc(var(--reactist-spacing-medium)*-1)}._25e5af9d{margin-top:calc(var(--reactist-spacing-large)*-1)}.ee82f441{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.a6f9d404{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._4d8d9a36{margin-top:var(--reactist-spacing-xsmall)}.e813cee7{margin-top:var(--reactist-spacing-small)}._56975b7d{margin-top:var(--reactist-spacing-medium)}._53b367f6{margin-top:var(--reactist-spacing-large)}.d69e7311{margin-top:var(--reactist-spacing-xlarge)}._92f57c7e{margin-top:var(--reactist-spacing-xxlarge)}._96880d3e{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}.dc3f3555{margin-top:calc(var(--reactist-spacing-small)*-1)}._86dd06bb{margin-top:calc(var(--reactist-spacing-medium)*-1)}.c93ef12e{margin-top:calc(var(--reactist-spacing-large)*-1)}.bc8fd4a2{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.b12a9124{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}}._6016f4fb{margin-right:var(--reactist-spacing-xsmall)}.b85e3dfa{margin-right:var(--reactist-spacing-small)}._297575f4{margin-right:var(--reactist-spacing-medium)}.b401ac6c{margin-right:var(--reactist-spacing-large)}.dc3ec387{margin-right:var(--reactist-spacing-xlarge)}._24694604{margin-right:var(--reactist-spacing-xxlarge)}._8e9bf2ee{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}.ae9d1115{margin-right:calc(var(--reactist-spacing-small)*-1)}._14e46fc3{margin-right:calc(var(--reactist-spacing-medium)*-1)}._3370631b{margin-right:calc(var(--reactist-spacing-large)*-1)}._3f0e9b50{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}.bc13e010{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._6fa1aae3{margin-right:var(--reactist-spacing-xsmall)}._2976c5cb{margin-right:var(--reactist-spacing-small)}._38d94802{margin-right:var(--reactist-spacing-medium)}.db9569b5{margin-right:var(--reactist-spacing-large)}._4a52f06d{margin-right:var(--reactist-spacing-xlarge)}._8a0f0410{margin-right:var(--reactist-spacing-xxlarge)}.e7d40e9d{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}._680fde91{margin-right:calc(var(--reactist-spacing-small)*-1)}._021010ca{margin-right:calc(var(--reactist-spacing-medium)*-1)}._9e52c87c{margin-right:calc(var(--reactist-spacing-large)*-1)}._4d602613{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}._21b1b65a{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._7321bc07{margin-right:var(--reactist-spacing-xsmall)}.fa1721f4{margin-right:var(--reactist-spacing-small)}._3fd7b4b8{margin-right:var(--reactist-spacing-medium)}._4fdc2f74{margin-right:var(--reactist-spacing-large)}.c0254761{margin-right:var(--reactist-spacing-xlarge)}._710a5f09{margin-right:var(--reactist-spacing-xxlarge)}.e08bee7f{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}.e5ab73d2{margin-right:calc(var(--reactist-spacing-small)*-1)}._5e731477{margin-right:calc(var(--reactist-spacing-medium)*-1)}._0f57a22e{margin-right:calc(var(--reactist-spacing-large)*-1)}._25f26ed3{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}._11a3b4e0{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}}._6a4f69f7{margin-bottom:var(--reactist-spacing-xsmall)}.db26b033{margin-bottom:var(--reactist-spacing-small)}.c7313022{margin-bottom:var(--reactist-spacing-medium)}.a5885889{margin-bottom:var(--reactist-spacing-large)}._33dfbd8e{margin-bottom:var(--reactist-spacing-xlarge)}._795ad2de{margin-bottom:var(--reactist-spacing-xxlarge)}.a329dbd3{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._85e739fb{margin-bottom:calc(var(--reactist-spacing-small)*-1)}._681f65ff{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}.caf50d8f{margin-bottom:calc(var(--reactist-spacing-large)*-1)}._1e084cbf{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}._3dfb1c7e{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){.ef4735be{margin-bottom:var(--reactist-spacing-xsmall)}.de55afba{margin-bottom:var(--reactist-spacing-small)}._0e33ce88{margin-bottom:var(--reactist-spacing-medium)}._8ca391fc{margin-bottom:var(--reactist-spacing-large)}._3a609d23{margin-bottom:var(--reactist-spacing-xlarge)}._3e1177e4{margin-bottom:var(--reactist-spacing-xxlarge)}.d384884d{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._75254cec{margin-bottom:calc(var(--reactist-spacing-small)*-1)}._5d9f127d{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}._835f1089{margin-bottom:calc(var(--reactist-spacing-large)*-1)}.dad52a72{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}._8703a4bf{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._90fd20e9{margin-bottom:var(--reactist-spacing-xsmall)}.f3769191{margin-bottom:var(--reactist-spacing-small)}._156410f8{margin-bottom:var(--reactist-spacing-medium)}._7fed74d0{margin-bottom:var(--reactist-spacing-large)}._477dc10e{margin-bottom:var(--reactist-spacing-xlarge)}._85c82d89{margin-bottom:var(--reactist-spacing-xxlarge)}._4f09c1e0{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._9523e048{margin-bottom:calc(var(--reactist-spacing-small)*-1)}.efe10240{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}.c43971e6{margin-bottom:calc(var(--reactist-spacing-large)*-1)}.f9b4da15{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}.a10fdf70{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}}.f9be90b4{margin-left:var(--reactist-spacing-xsmall)}.f53218d5{margin-left:var(--reactist-spacing-small)}.c4a9b3ab{margin-left:var(--reactist-spacing-medium)}._5755e2c3{margin-left:var(--reactist-spacing-large)}._33fc9354{margin-left:var(--reactist-spacing-xlarge)}._4749a3bf{margin-left:var(--reactist-spacing-xxlarge)}.c76cb3c7{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}._96003c07{margin-left:calc(var(--reactist-spacing-small)*-1)}._09988d07{margin-left:calc(var(--reactist-spacing-medium)*-1)}.b4a486f6{margin-left:calc(var(--reactist-spacing-large)*-1)}.f396e75e{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._81d1f26d{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._0a46e8f1{margin-left:var(--reactist-spacing-xsmall)}._57c970af{margin-left:var(--reactist-spacing-small)}._4b6099d3{margin-left:var(--reactist-spacing-medium)}._378fcff5{margin-left:var(--reactist-spacing-large)}.f8785663{margin-left:var(--reactist-spacing-xlarge)}._72f957ee{margin-left:var(--reactist-spacing-xxlarge)}._2288c7e1{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.b27c1c05{margin-left:calc(var(--reactist-spacing-small)*-1)}._702cbb13{margin-left:calc(var(--reactist-spacing-medium)*-1)}._1a2748b4{margin-left:calc(var(--reactist-spacing-large)*-1)}.b8c043a5{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._8dc8ff63{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){.c2af646d{margin-left:var(--reactist-spacing-xsmall)}.c03d07be{margin-left:var(--reactist-spacing-small)}._915fb1d3{margin-left:var(--reactist-spacing-medium)}._64214ee1{margin-left:var(--reactist-spacing-large)}._7be4a22c{margin-left:var(--reactist-spacing-xlarge)}._5ec0a401{margin-left:var(--reactist-spacing-xxlarge)}.ea29f1ee{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.c26652c7{margin-left:calc(var(--reactist-spacing-small)*-1)}.c24f6af9{margin-left:calc(var(--reactist-spacing-medium)*-1)}.c2671f27{margin-left:calc(var(--reactist-spacing-large)*-1)}.cc51a04e{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}.fd581f54{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}}
 ._68ab48ca{min-width:0}._6fa2b565{min-width:var(--reactist-width-xsmall)}.dd50fabd{min-width:var(--reactist-width-small)}.e7e2c808{min-width:var(--reactist-width-medium)}._6abbe25e{min-width:var(--reactist-width-large)}._54f479ac{min-width:var(--reactist-width-xlarge)}._148492bc{max-width:var(--reactist-width-xsmall)}.bd023b96{max-width:var(--reactist-width-small)}.e102903f{max-width:var(--reactist-width-medium)}._0e8d76d7{max-width:var(--reactist-width-large)}._47a031d0{max-width:var(--reactist-width-xlarge)}.cd4c8183{max-width:100%}._5f5959e8{width:0}._8c75067a{width:100%}._56a651f6{width:auto}._26f87bb8{width:-moz-max-content;width:-webkit-max-content;width:max-content}._07a6ab44{width:-moz-min-content;width:-webkit-min-content;width:min-content}.a87016fa{width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}._1a972e50{width:var(--reactist-width-xsmall)}.c96d8261{width:var(--reactist-width-small)}.f3829d42{width:var(--reactist-width-medium)}._2caef228{width:var(--reactist-width-large)}._069e1491{width:var(--reactist-width-xlarge)}
 ._64ed24f4{gap:0}._2580a74b{gap:var(--reactist-spacing-xsmall)}.c68f8bf6{gap:var(--reactist-spacing-small)}._43e5f8e9{gap:var(--reactist-spacing-medium)}._966b120f{gap:var(--reactist-spacing-large)}.f957894c{gap:var(--reactist-spacing-xlarge)}._8cca104b{gap:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._5797cee2{gap:0}._9015672f{gap:var(--reactist-spacing-xsmall)}._7ec86eec{gap:var(--reactist-spacing-small)}._714d7179{gap:var(--reactist-spacing-medium)}.ae1deb59{gap:var(--reactist-spacing-large)}.e1cfce55{gap:var(--reactist-spacing-xlarge)}._168a8ff8{gap:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._43e2b619{gap:0}._0ea9bf88{gap:var(--reactist-spacing-xsmall)}.d451307a{gap:var(--reactist-spacing-small)}.bf93cf66{gap:var(--reactist-spacing-medium)}._1430cddf{gap:var(--reactist-spacing-large)}.fa00c93e{gap:var(--reactist-spacing-xlarge)}._6f3aee54{gap:var(--reactist-spacing-xxlarge)}}
 ._487c82cd{text-overflow:ellipsis;max-width:300px;z-index:var(--reactist-stacking-order-tooltip)}
-.reactist_button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;border:none;background-color:transparent;padding:0}.reactist_button[aria-disabled=true]{opacity:.4;cursor:not-allowed}.reactist_button--small{font-size:.81rem;color:#202020;font-weight:400;line-height:1.6}.reactist_button--danger,.reactist_button--primary,.reactist_button--secondary{font-size:.875rem;color:#202020;font-weight:400;line-height:1.7;box-sizing:border-box;padding:5px 15px;border:1px solid rgba(0,0,0,.1);border-radius:3px}.reactist_button--danger.reactist_button--small,.reactist_button--primary.reactist_button--small,.reactist_button--secondary.reactist_button--small{padding:5px 10px}.reactist_button--danger.reactist_button--large,.reactist_button--primary.reactist_button--large,.reactist_button--secondary.reactist_button--large{padding:10px 15px}.reactist_button--primary{background-color:#3f82ef;color:#fff}.reactist_button--primary:not([disabled]):hover{background-color:#3b7be2}.reactist_button--danger{background-color:#de4c4a;color:#fff}.reactist_button--danger:not([disabled]):hover{background-color:#cf2826}.reactist_button--secondary{background-color:#fff;color:#202020;border-color:#dcdcdc}.reactist_button--secondary:not([disabled]):hover{background-color:#f9f9f9}.reactist_button--link{color:#3f82ef;text-decoration:none}.reactist_button--link:disabled{color:grey}.reactist_button--link:not(:disabled):hover{text-decoration:underline}.reactist_button--link:not(.reactist_button--link--small):not(.reactist_button--link--large){font-size:inherit}.reactist_button--danger.reactist_button--loading,.reactist_button--primary.reactist_button--loading,.reactist_button--secondary.reactist_button--loading{cursor:progress!important}.reactist_button--danger.reactist_button--loading:after,.reactist_button--primary.reactist_button--loading:after,.reactist_button--secondary.reactist_button--loading:after{background-repeat:no-repeat;background-size:15px;content:"";display:inline-block;height:15px;margin-left:12px;vertical-align:middle;width:15px;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:reactistRotateRight;animation-name:reactistRotateRight;-webkit-animation-timing-function:linear;animation-timing-function:linear;color:#fff;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNi4yNTciIGhlaWdodD0iMTYuMjU3IiB2aWV3Qm94PSItMTQ3LjgxMyAyMDYuNzUgMTYuMjU3IDE2LjI1NyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMTQ3LjgxMyAyMDYuNzUgMTYuMjU3IDE2LjI1NyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMikiPjxkZWZzPjxmaWx0ZXIgaWQ9ImEiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iLTE0Ny42ODQiIHk9IjIxMC45MjkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMy45NSI+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIxIDAgMCAwIDAgMCAxIDAgMCAwIDAgMCAxIDAgMCAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L2RlZnM+PG1hc2sgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iLTE0Ny42ODQiIHk9IjIxMC45MjkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMy45NSIgaWQ9ImIiPjxnIGZpbHRlcj0idXJsKCNhKSI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTS0xNDguNTg0IDIwNy45NzloMTh2MThoLTE4eiIvPjwvZz48L21hc2s+PHBhdGggbWFzaz0idXJsKCNiKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTS0xNDQuNjM0IDIxMS45MjlhNi45OTkgNi45OTkgMCAwMDAgOS44OTloMGE2Ljk5OSA2Ljk5OSAwIDAwOS44OTkgMCA2Ljk5OSA2Ljk5OSAwIDAwMC05Ljg5OSIvPjwvZz48L3N2Zz4=")}.reactist_button--secondary.reactist_button--loading{border-color:#dcdcdc;background-color:#dcdcdc;color:grey}@-webkit-keyframes reactistRotateRight{0%{transform:rotate(0deg);transform-origin:center center}to{transform:rotate(1turn);transform-origin:center center}}@keyframes reactistRotateRight{0%{transform:rotate(0deg);transform-origin:center center}to{transform:rotate(1turn);transform-origin:center center}}
+.reactist_color_picker .color_trigger{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:24px;width:24px;border-radius:50%;cursor:pointer;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS4yNSAxMC42NDZsMi42NDYgMi42NDcgMi42NDctMi42NDdhLjUuNSAwIDAxLjcwNy43MDhMMTIuNjA0IDE0YTEgMSAwIDAxLTEuNDE1IDBsLTIuNjQ2LTIuNjQ2YS41LjUgMCAwMS43MDctLjcwOHoiLz48L3N2Zz4=);background-position:50%;background-repeat:no-repeat;background-size:24px}.reactist_color_picker .color_trigger--inner_ring{background-color:rgba(0,0,0,.1);width:14px;height:14px;border-radius:50%;visibility:hidden}.reactist_color_picker .color_trigger:hover .color_trigger--inner_ring{visibility:visible}.reactist_color_picker .color_trigger.small{height:18px;width:18px}.reactist_color_picker .color_trigger.small .color_trigger--inner_ring{width:12px;height:12px}.reactist_color_picker .color_item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;margin:4px;width:32px;height:32px;border-radius:50%;cursor:pointer}.reactist_color_picker .color_item--inner_ring{background-color:transparent;border:2px solid #fff;height:24px;width:24px;border-radius:50%;visibility:hidden}.reactist_color_picker .color_item:hover .color_item--inner_ring{visibility:visible}.reactist_color_picker .color_item.active{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAuOTc0IDE0Ljc3MWw0LjE2LTcuMjA0YS40OTkuNDk5IDAgMTEuODYzLjQ5OWwtNC40NyA3Ljc0NGEuNDk5LjQ5OSAwIDAxLS43MzUuMTQ3LjUwMi41MDIgMCAwMS0uMDYxLS4wNDhsLTMuMzY2LTMuMTRhLjQ5OS40OTkgMCAxMS42OC0uNzI5bDIuOTI5IDIuNzMxeiIvPjwvc3ZnPg==);background-position:50%;background-repeat:no-repeat}.reactist_color_picker .color_options{padding:6px;display:flex;flex-wrap:wrap;width:164px;position:relative}.reactist_color_picker .with_arrow:after,.reactist_color_picker .with_arrow:before{visibility:hidden}

package/styles/reactist.css

@@ -8,8 +8,8 @@
 ._3f3a401c{border-bottom:1px solid var(--reactist-divider-primary)}._03b05b70{border-bottom:1px solid var(--reactist-divider-secondary)}.b6f67ff8{border-bottom:1px solid var(--reactist-divider-tertiary)}
 @media print{._0e595dea{display:none}}
 ._618235b7{width:1px;height:1px;clip:rect(1px,1px,1px,1px);white-space:nowrap}
-.d6be7fe9{border-style:solid;border-width:1px;color:var(--reactist-content-primary);padding:var(--reactist-spacing-small)}.ad8ace2f{min-height:var(--reactist-button-small-height)}.ab71a9dc{display:block}._043941a6{background-color:var(--reactist-alert-tone-info-background);border-color:var(--reactist-alert-tone-info-border)}._043941a6 .ab71a9dc{color:var(--reactist-alert-tone-info-icon)}.f34b89d4{background-color:var(--reactist-alert-tone-positive-background);border-color:var(--reactist-alert-tone-positive-border)}.f34b89d4 .ab71a9dc{color:var(--reactist-alert-tone-positive-icon)}.a069ea07{background-color:var(--reactist-alert-tone-caution-background);border-color:var(--reactist-alert-tone-caution-border)}.a069ea07 .ab71a9dc{color:var(--reactist-alert-tone-caution-icon)}.e505aabb{background-color:var(--reactist-alert-tone-critical-background);border-color:var(--reactist-alert-tone-critical-border)}.e505aabb .ab71a9dc{color:var(--reactist-alert-tone-critical-icon)}
-:root{--reactist-banner-title-font-size:14px;--reactist-banner-title-line-height:21px;--reactist-banner-description-font-size:12px;--reactist-banner-description-line-height:20px;--reactist-banner-info-border:#eee;--reactist-banner-info-background:#fafafa;--reactist-banner-info-title:#202020;--reactist-banner-info-description:#666;--reactist-banner-promotion-border:#fae8d6;--reactist-banner-promotion-background:#fffaf4;--reactist-banner-promotion-title:#202020;--reactist-banner-promotion-description:#666}.c1dffd60{border-style:solid;border-width:1px;padding:var(--reactist-spacing-small) var(--reactist-spacing-large);letter-spacing:-.15px;font-family:var(--reactist-font-family)}._9d552538{background-color:var(--reactist-banner-info-background);border-color:var(--reactist-banner-info-border)}.d797752e{background-color:var(--reactist-banner-promotion-background);border-color:var(--reactist-banner-promotion-border)}._8cd610da{font-size:var(--reactist-banner-title-font-size);line-height:var(--reactist-banner-title-line-height);font-weight:var(--reactist-font-weight-strong)}._78ea5373{font-weight:var(--reactist-font-weight-regular)}._319c73fa{color:var(--reactist-banner-info-title)}.fc84253f{color:var(--reactist-banner-promotion-title)}.af4bd758{font-size:var(--reactist-banner-description-font-size);line-height:var(--reactist-banner-description-line-height);font-weight:var(--reactist-font-weight-regular)}.b95a8c07{color:var(--reactist-banner-info-description)}._3c33f615{color:var(--reactist-banner-promotion-description)}
+:root{--reactist-banner-background-color:#fcfaf8;--reactist-banner-border-color:#e6e6e6;--reactist-divider-color:var(--reactist-divider-secondary);--reactist-banner-main-copy-font-size:14px;--reactist-banner-main-copy-line-height:21px;--reactist-banner-main-copy-spacing:-0.15px;--reactist-banner-main-copy-color:#202020;--reactist-banner-secondary-copy-font-size:12px;--reactist-banner-secondary-copy-line-height:20px;--reactist-banner-secondary-copy-color:#666}.a3c628a9{container-name:banner;container-type:inline-size;background-color:var(--reactist-banner-background-color);font-family:var(--reactist-font-family);border:1px solid var(--reactist-banner-border-color);overflow:hidden;min-height:64px}.a3c628a9:has(.b2cb529e){width:-webkit-min-content;width:-moz-min-content;width:min-content;container-type:normal}._608df6ce{padding:var(--reactist-spacing-large)}._7d8d68de,._05e2783a{font-size:var(--reactist-banner-main-copy-font-size);line-height:var(--reactist-banner-main-copy-line-height);letter-spacing:var(--reactist-banner-main-copy-spacing);color:var(--reactist-banner-main-copy-color)}._05e2783a{font-weight:var(--reactist-font-weight-strong)}._7d8d68de.d5e077f5{font-size:var(--reactist-banner-secondary-copy-font-size);line-height:var(--reactist-banner-secondary-copy-line-height);color:var(--reactist-banner-secondary-copy-color);letter-spacing:normal}.b2cb529e{border-bottom:1px solid var(--reactist-banner-divider-color)}.dbf93d2e svg,.b2cb529e img{display:block}.dbf93d2e ._22f9ed25{display:none}._99ded674{padding:calc(var(--reactist-spacing-xsmall)/2) 0}._99ded674 .fe6dd094:first-of-type{margin-left:var(--reactist-spacing-xsmall)}@container banner (width < 235px){._608df6ce,.e6ed6d9e{flex-direction:column;align-items:flex-start}.dbf93d2e{width:100%;align-items:center;justify-content:space-between}.dbf93d2e,.dbf93d2e ._22f9ed25{display:flex}.dbf93d2e ._22f9ed25:only-child{margin-left:auto}._51bd96a8 ._22f9ed25{display:none}}
+: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-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)}
 ._2e62197a{color:var(--reactist-content-primary)}.b7e8d846{padding-top:calc(var(--reactist-spacing-xsmall)/2)}._1c02ef4a{display:block}._940b3b19 ._1c02ef4a{color:var(--reactist-alert-tone-info-icon)}._6261fc66 ._1c02ef4a{color:var(--reactist-alert-tone-positive-icon)}._255e20fe ._1c02ef4a{color:var(--reactist-alert-tone-caution-icon)}.e225437d ._1c02ef4a{color:var(--reactist-alert-tone-critical-icon)}
 ._616cc3f3{bottom:0;pointer-events:none;z-index:var(--reactist-stacking-order-toast)}._1b5f8e86{pointer-events:all;gap:var(--reactist-spacing-medium);box-shadow:var(--reactist-toast-box-shadow)}.ce2e3476{color:var(--reactist-content-primary)}@media (max-width:500px){._1b5f8e86{width:100%!important}}