@doist/reactist 28.6.0 → 28.7.0

package/es/banner/banner.js

@@ -12,6 +12,14 @@ const _excluded = ["id", "type", "title", "description", "action", "icon", "imag
       _excluded2 = ["label"],
       _excluded3 = ["type", "label"],
       _excluded4 = ["type", "label", "variant"];
+/**
+ * Type guard to check if the action is an Action object (button or link)
+ */
+
+function isActionObject(action) {
+  return typeof action === 'object' && action !== null && 'type' in action && (action.type === 'button' || action.type === 'link');
+}
+
 const Banner = /*#__PURE__*/React.forwardRef(function Banner(_ref, ref) {
   let {
     id,
@@ -90,7 +98,7 @@ const Banner = /*#__PURE__*/React.forwardRef(function Banner(_ref, ref) {
     className: modules_afa80466.actions,
     display: "flex",
     gap: "small"
-  }, (action == null ? void 0 : action.type) === 'button' ? /*#__PURE__*/React.createElement(ActionButton, _objectSpread2({}, action)) : null, (action == null ? void 0 : action.type) === 'link' ? /*#__PURE__*/React.createElement(ActionLink, _objectSpread2({}, action)) : null, closeButton) : null));
+  }, action ? isActionObject(action) ? action.type === 'button' ? /*#__PURE__*/React.createElement(ActionButton, _objectSpread2({}, action)) : /*#__PURE__*/React.createElement(ActionLink, _objectSpread2({}, action)) : action : null, closeButton) : null));
 });
 
 function ActionButton(_ref3) {

package/es/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 { 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":["Banner","React","forwardRef","ref","id","type","title","description","action","icon","image","inlineLinks","closeLabel","onClose","props","titleId","useId","descriptionId","closeButton","createElement","IconButton","exceptionallySetClassName","styles","variant","onClick","CloseIcon","Box","display","flexDirection","justifyContent","role","undefined","tabIndex","borderRadius","className","banner","content","gap","alignItems","staticContent","flexGrow","BannerIcon","copy","secondary","map","index","label","Fragment","key","TextLink","inlineLink","length","actions","ActionButton","_objectSpread","ActionLink","Button","render","rel","target"],"mappings":"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"}
+{"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 | React.ReactNode\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\n/**\n * Type guard to check if the action is an Action object (button or link)\n */\nfunction isActionObject(action: Action | React.ReactNode): action is Action {\n    return (\n        typeof action === 'object' &&\n        action !== null &&\n        'type' in action &&\n        (action.type === 'button' || action.type === 'link')\n    )\n}\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 ? (\n                            isActionObject(action) ? (\n                                action.type === 'button' ? (\n                                    <ActionButton {...action} />\n                                ) : (\n                                    <ActionLink {...action} />\n                                )\n                            ) : (\n                                action\n                            )\n                        ) : 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":["isActionObject","action","type","Banner","React","forwardRef","ref","id","title","description","icon","image","inlineLinks","closeLabel","onClose","props","titleId","useId","descriptionId","closeButton","createElement","IconButton","exceptionallySetClassName","styles","variant","onClick","CloseIcon","Box","display","flexDirection","justifyContent","role","undefined","tabIndex","borderRadius","className","banner","content","gap","alignItems","staticContent","flexGrow","BannerIcon","copy","secondary","map","index","label","Fragment","key","TextLink","inlineLink","length","actions","ActionButton","_objectSpread","ActionLink","Button","render","rel","target"],"mappings":"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"}

package/lib/banner/banner.d.ts

@@ -51,7 +51,7 @@ type BaseBanner = {
     id?: string;
     title?: React.ReactNode;
     description: Exclude<React.ReactNode, null | undefined | boolean>;
-    action?: Action;
+    action?: Action | React.ReactNode;
     inlineLinks?: InlineLink[];
 } & CloseButton;
 /**

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"),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))}));
+"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"],p=["label"],b=["type","label"],m=["type","label","variant"];function f(t){let{label:l}=t,n=e.objectWithoutProperties(t,b);return u.createElement(r.Button,e.objectSpread2({},n),l)}function y(t){let{label:l,variant:n}=t,a=e.objectWithoutProperties(t,m);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:b,type:m,title:x,description:j,action:E,icon:B,image:g,inlineLinks:v,closeLabel:k,onClose:N}=t,q=e.objectWithoutProperties(t,d);const C=n.useId(),S=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:b,display:"flex",flexDirection:"column",justifyContent:"center",role:"status","aria-labelledby":x?C:S,"aria-describedby":x?S:void 0,"aria-live":"polite",tabIndex:0,borderRadius:"full",className:a.default.banner}),g?u.createElement(l.Box,{className:a.default.image},g):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"===m?B:u.createElement(i.BannerIcon,{type:m}),P),u.createElement(l.Box,{className:a.default.copy,display:"flex",flexDirection:"column"},x?u.createElement(l.Box,{id:C,className:a.default.title},x):null,u.createElement(l.Box,{id:S,className:[a.default.description,x?a.default.secondary:null]},j,null==v?void 0:v.map((t,l)=>{let{label:n}=t,r=e.objectWithoutProperties(t,p);return u.createElement(u.Fragment,{key:l},u.createElement(c.TextLink,e.objectSpread2(e.objectSpread2({},r),{},{exceptionallySetClassName:a.default.inlineLink}),n),l<v.length-1?u.createElement("span",null," · "):"")})))),E||P?u.createElement(l.Box,{className:a.default.actions,display:"flex",gap:"small"},E?function(e){return"object"==typeof e&&null!==e&&"type"in e&&("button"===e.type||"link"===e.type)}(E)?u.createElement("button"===E.type?f:y,e.objectSpread2({},E)):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 { 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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"}
+{"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 | React.ReactNode\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\n/**\n * Type guard to check if the action is an Action object (button or link)\n */\nfunction isActionObject(action: Action | React.ReactNode): action is Action {\n    return (\n        typeof action === 'object' &&\n        action !== null &&\n        'type' in action &&\n        (action.type === 'button' || action.type === 'link')\n    )\n}\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 ? (\n                            isActionObject(action) ? (\n                                action.type === 'button' ? (\n                                    <ActionButton {...action} />\n                                ) : (\n                                    <ActionLink {...action} />\n                                )\n                            ) : (\n                                action\n                            )\n                        ) : 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","isActionObject","objectSpread2"],"mappings":"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"}

package/package.json

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

package/styles/index.css

@@ -4,4 +4,5 @@
 ._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_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}