@doist/reactist 28.5.4 → 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":";;;;;;;;;;;;;;AA6FMA,MAAAA,MAAM,gBAAGC,KAAK,CAACC,UAAN,CAA8C,SAASF,MAAT,CAczDG,IAAAA,EAAAA,GAdyD,EActD;EAAA,IAbH;IACIC,EADJ;IAEIC,IAFJ;IAGIC,KAHJ;IAIIC,WAJJ;IAKIC,MALJ;IAMIC,IANJ;IAOIC,KAPJ;IAQIC,WARJ;IASIC,UATJ;AAUIC,IAAAA,OAAAA;GAGD,GAAA,IAAA;AAAA,MAFIC,KAEJ,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;EAEH,MAAMC,OAAO,GAAGC,KAAK,EAArB,CAAA;EACA,MAAMC,aAAa,GAAGD,KAAK,EAA3B,CAAA;EAEA,MAAME,WAAW,GAAGL,OAAO,gBACvBZ,KAAA,CAAAkB,aAAA,CAACC,UAAD,EAAW;IACPC,yBAAyB,EAAEC,gBAAM,CAACJ,WAD3B;AAEPK,IAAAA,OAAO,EAAC,YAFD;AAGPC,IAAAA,OAAO,EAAEX,OAHF;IAIPJ,IAAI,eAAER,KAAA,CAAAkB,aAAA,CAACM,SAAD,EAAa,IAAb,CAJC;IAIY,YACPb,EAAAA,UADO,IACPA,IAAAA,GAAAA,UADO,GACO,cAAA;GAL9B,CADuB,GAQvB,IARJ,CAAA;AAUA,EAAA,oBACIX,KAAA,CAAAkB,aAAA,CAACO,GAAD,oCACQZ,KADR,CAAA,EAAA,EAAA,EAAA;AAEIX,IAAAA,GAAG,EAAEA,GAFT;AAGIC,IAAAA,EAAE,EAAEA,EAHR;AAIIuB,IAAAA,OAAO,EAAC,MAJZ;AAKIC,IAAAA,aAAa,EAAC,QALlB;AAMIC,IAAAA,cAAc,EAAC,QANnB;AAOIC,IAAAA,IAAI,EAAC,QAPT;uBAQqBxB,KAAK,GAAGS,OAAH,GAAaE,aARvC;AAQoD,IAAA,kBAAA,EAC9BX,KAAK,GAAGW,aAAH,GAAmBc,SAT9C;AAUc,IAAA,WAAA,EAAA,QAVd;AAWIC,IAAAA,QAAQ,EAAE,CAXd;AAYIC,IAAAA,YAAY,EAAC,MAZjB;IAaIC,SAAS,EAAEZ,gBAAM,CAACa,MAAAA;AAbtB,GAAA,CAAA,EAeKzB,KAAK,gBAAGT,KAAC,CAAAkB,aAAD,CAACO,GAAD;IAAKQ,SAAS,EAAEZ,gBAAM,CAACZ,KAAAA;GAAvB,EAA+BA,KAA/B,CAAH,GAAiD,IAf3D,eAiBIT,KAAA,CAAAkB,aAAA,CAACO,GAAD,EAAK;IAAAQ,SAAS,EAAEZ,gBAAM,CAACc,OAAlB;AAA2BT,IAAAA,OAAO,EAAC,MAAnC;AAA0CU,IAAAA,GAAG,EAAC,OAA9C;AAAsDC,IAAAA,UAAU,EAAC,QAAA;AAAjE,GAAL,eACIrC,KAAA,CAAAkB,aAAA,CAACO,GAAD,EAAK;IAAAQ,SAAS,EAAEZ,gBAAM,CAACiB,aAAlB;AAAiCZ,IAAAA,OAAO,EAAC,MAAzC;AAAgDU,IAAAA,GAAG,EAAC,OAApD;AAA4DG,IAAAA,QAAQ,EAAE,CAAA;AAAtE,GAAL,eACIvC,KAAA,CAAAkB,aAAA,CAACO,GAAD,EAAK;IAAAQ,SAAS,EAAEZ,gBAAM,CAACb,IAAAA;AAAlB,GAAL,EACKJ,IAAI,KAAK,SAAT,GAAqBI,IAArB,gBAA4BR,mBAAA,CAACwC,UAAD,EAAW;AAACpC,IAAAA,IAAI,EAAEA,IAAAA;GAAlB,CADjC,EAEKa,WAFL,CADJ,eAMIjB,KAAA,CAAAkB,aAAA,CAACO,GAAD,EAAI;IAACQ,SAAS,EAAEZ,gBAAM,CAACoB,IAAnB;AAAyBf,IAAAA,OAAO,EAAC,MAAjC;AAAwCC,IAAAA,aAAa,EAAC,QAAA;GAA1D,EACKtB,KAAK,gBACFL,mBAAA,CAACyB,GAAD,EAAI;AAACtB,IAAAA,EAAE,EAAEW,OAAL;IAAcmB,SAAS,EAAEZ,gBAAM,CAAChB,KAAAA;GAApC,EACKA,KADL,CADE,GAIF,IALR,eAMIL,KAAC,CAAAkB,aAAD,CAACO,GAAD,EACI;AAAAtB,IAAAA,EAAE,EAAEa,aAAJ;AACAiB,IAAAA,SAAS,EAAE,CAACZ,gBAAM,CAACf,WAAR,EAAqBD,KAAK,GAAGgB,gBAAM,CAACqB,SAAV,GAAsB,IAAhD,CAAA;GAFf,EAIKpC,WAJL,EAKKI,WALL,IAAA,IAAA,GAAA,KAAA,CAAA,GAKKA,WAAW,CAAEiC,GAAb,CAAiB,CAAsBC,KAAAA,EAAAA,KAAtB,KAA+B;IAAA,IAA9B;AAAEC,MAAAA,KAAAA;KAA4B,GAAA,KAAA;AAAA,QAAlBhC,KAAkB,GAAA,wBAAA,CAAA,KAAA,EAAA,UAAA,CAAA,CAAA;;AAC7C,IAAA,oBACIb,mBAAA,CAACA,KAAK,CAAC8C,QAAP,EAAgB;AAAAC,MAAAA,GAAG,EAAEH,KAAAA;AAAL,KAAhB,eACI5C,KAAC,CAAAkB,aAAD,CAAC8B,QAAD,oCACQnC,KADR,CAAA,EAAA,EAAA,EAAA;MAEIO,yBAAyB,EAAEC,gBAAM,CAAC4B,UAAAA;KAEjCJ,CAAAA,EAAAA,KAJL,CADJ,EAOKD,KAAK,GAAGlC,WAAW,CAACwC,MAAZ,GAAqB,CAA7B,gBAAiClD,KAAA,CAAAkB,aAAA,CAAA,MAAA,EAAA,IAAA,EAAA,UAAA,CAAjC,GAAoD,EAPzD,CADJ,CAAA;AAWH,GAZA,CALL,CANJ,CANJ,CADJ,EAmCKX,MAAM,IAAIU,WAAV,gBACGjB,KAAA,CAAAkB,aAAA,CAACO,GAAD,EAAK;IAAAQ,SAAS,EAAEZ,gBAAM,CAAC8B,OAAlB;AAA2BzB,IAAAA,OAAO,EAAC,MAAnC;AAA0CU,IAAAA,GAAG,EAAC,OAAA;GAAnD,EACK,CAAA7B,MAAM,IAAA,IAAN,YAAAA,MAAM,CAAEH,IAAR,MAAiB,QAAjB,gBAA4BJ,KAAC,CAAAkB,aAAD,CAACkC,YAAD,EAAAC,cAAA,CAAA,EAAA,EAAkB9C,MAAlB,CAA5B,CAAA,GAA2D,IADhE,EAEK,CAAAA,MAAM,QAAN,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEH,IAAR,MAAiB,MAAjB,gBAA0BJ,KAAC,CAAAkB,aAAD,CAACoC,UAAD,qBAAgB/C,MAAhB,CAAA,CAA1B,GAAuD,IAF5D,EAGKU,WAHL,CADH,GAMG,IAzCR,CAjBJ,CADJ,CAAA;AA+DH,CA5Fc,EAAf;;AA8FA,SAASmC,YAAT,CAA6D,KAAA,EAAA;EAAA,IAAvC;IAAEhD,IAAF;AAAQyC,IAAAA,KAAAA;GAA+B,GAAA,KAAA;AAAA,MAArBhC,KAAqB,GAAA,wBAAA,CAAA,KAAA,EAAA,UAAA,CAAA,CAAA;;EACzD,oBAAOb,mBAAA,CAACuD,MAAD,EAAY1C,cAAAA,CAAAA,EAAAA,EAAAA,KAAZ,CAAoBgC,EAAAA,KAApB,CAAP,CAAA;AACH,CAAA;;AAED,SAASS,UAAT,CAAkE,KAAA,EAAA;EAAA,IAA9C;IAAElD,IAAF;IAAQyC,KAAR;AAAevB,IAAAA,OAAAA;GAA+B,GAAA,KAAA;AAAA,MAAnBT,KAAmB,GAAA,wBAAA,CAAA,KAAA,EAAA,UAAA,CAAA,CAAA;;AAC9D,EAAA,oBACIb,KAAC,CAAAkB,aAAD,CAACqC,MAAD,EACI;AAAAjC,IAAAA,OAAO,EAAEA,OAAT;AACAkC,IAAAA,MAAM,eAAExD,KAAG,CAAAkB,aAAH,CAAG,GAAH,EAAAmC,cAAA,CAAA;AAAGI,MAAAA,GAAG,EAAC,qBAAP;AAA6BC,MAAAA,MAAM,EAAC,QAAA;AAApC,KAAA,EAAiD7C,KAAjD,CAAA,CAAA;GAFZ,EAIKgC,KAJL,CADJ,CAAA;AAQH;;;;"}
+{"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/es/tooltip/tooltip.js

@@ -24,7 +24,7 @@ function TooltipProvider({
   }, children);
 }
 
-function Tooltip({
+const Tooltip = /*#__PURE__*/React.forwardRef(({
   children,
   content,
   position = 'top',
@@ -33,7 +33,7 @@ function Tooltip({
   showTimeout,
   hideTimeout,
   exceptionallySetClassName
-}) {
+}, ref) => {
   const {
     showTimeout: globalShowTimeout,
     hideTimeout: globalHideTimeout
@@ -43,6 +43,7 @@ function Tooltip({
     showTimeout: showTimeout != null ? showTimeout : globalShowTimeout,
     hideTimeout: hideTimeout != null ? hideTimeout : globalHideTimeout
   });
+  React.useImperativeHandle(ref, () => tooltip, [tooltip]);
   const isOpen = tooltip.useState('open');
   const child = React.Children.only(children);
 
@@ -73,7 +74,8 @@ function Tooltip({
       textAlign: "center"
     })
   }, withArrow ? /*#__PURE__*/React.createElement(TooltipArrow, null) : null, typeof content === 'function' ? content() : content) : null);
-}
+});
+Tooltip.displayName = 'Tooltip';
 
 export { Tooltip, TooltipProvider };
 //# sourceMappingURL=tooltip.js.map

package/es/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    useTooltipStore,\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n} from '@ariakit/react'\nimport { Box } from '../box'\n\nimport type { TooltipStoreState } from '@ariakit/react'\n\nimport styles from './tooltip.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\nconst defaultShowTimeout = 500\nconst defaultHideTimeout = 100\n\ntype TooltipContextState = {\n    showTimeout: number\n    hideTimeout: number\n}\n\nconst TooltipContext = React.createContext<TooltipContextState>({\n    showTimeout: defaultShowTimeout,\n    hideTimeout: defaultHideTimeout,\n})\n\nfunction TooltipProvider({\n    showTimeout = defaultShowTimeout,\n    hideTimeout = defaultHideTimeout,\n    children,\n}: React.PropsWithChildren<{\n    showTimeout?: number\n    hideTimeout?: number\n}>) {\n    const value = React.useMemo(() => ({ showTimeout, hideTimeout }), [showTimeout, hideTimeout])\n    return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>\n}\n\ninterface TooltipProps extends ObfuscatedClassName {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: TooltipStoreState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n\n    /**\n     * The amount of time in milliseconds to wait before showing the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 500\n     */\n    showTimeout?: number\n\n    /**\n     * The amount of time in milliseconds to wait before hiding the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 100\n     */\n    hideTimeout?: number\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    withArrow = false,\n    showTimeout,\n    hideTimeout,\n    exceptionallySetClassName,\n}: TooltipProps) {\n    const { showTimeout: globalShowTimeout, hideTimeout: globalHideTimeout } = React.useContext(\n        TooltipContext,\n    )\n    const tooltip = useTooltipStore({\n        placement: position,\n        showTimeout: showTimeout ?? globalShowTimeout,\n        hideTimeout: hideTimeout ?? globalHideTimeout,\n    })\n    const isOpen = tooltip.useState('open')\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n    )\n\n    if (!child) {\n        return child\n    }\n\n    if (typeof child.ref === 'string') {\n        throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n    }\n\n    return (\n        <>\n            <TooltipAnchor render={child} store={tooltip} ref={child.ref} />\n            {isOpen && content ? (\n                <AriakitTooltip\n                    store={tooltip}\n                    gutter={gapSize}\n                    render={\n                        <Box\n                            className={[styles.tooltip, exceptionallySetClassName]}\n                            background=\"toast\"\n                            borderRadius=\"standard\"\n                            paddingX=\"small\"\n                            paddingY=\"xsmall\"\n                            maxWidth=\"medium\"\n                            width=\"fitContent\"\n                            overflow=\"hidden\"\n                            textAlign=\"center\"\n                        />\n                    }\n                >\n                    {withArrow ? <TooltipArrow /> : null}\n                    {typeof content === 'function' ? content() : content}\n                </AriakitTooltip>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip, TooltipProvider }\n"],"names":["defaultShowTimeout","defaultHideTimeout","TooltipContext","React","createContext","showTimeout","hideTimeout","TooltipProvider","children","value","useMemo","createElement","Provider","Tooltip","content","position","gapSize","withArrow","exceptionallySetClassName","globalShowTimeout","globalHideTimeout","useContext","tooltip","useTooltipStore","placement","isOpen","useState","child","Children","only","ref","Error","Fragment","TooltipAnchor","render","store","AriakitTooltip","gutter","Box","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow"],"mappings":"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"}
+{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    useTooltipStore,\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n} from '@ariakit/react'\nimport { Box } from '../box'\n\nimport type { TooltipStoreState, TooltipStore } from '@ariakit/react'\n\nimport styles from './tooltip.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\nconst defaultShowTimeout = 500\nconst defaultHideTimeout = 100\n\ntype TooltipContextState = {\n    showTimeout: number\n    hideTimeout: number\n}\n\nconst TooltipContext = React.createContext<TooltipContextState>({\n    showTimeout: defaultShowTimeout,\n    hideTimeout: defaultHideTimeout,\n})\n\nfunction TooltipProvider({\n    showTimeout = defaultShowTimeout,\n    hideTimeout = defaultHideTimeout,\n    children,\n}: React.PropsWithChildren<{\n    showTimeout?: number\n    hideTimeout?: number\n}>) {\n    const value = React.useMemo(() => ({ showTimeout, hideTimeout }), [showTimeout, hideTimeout])\n    return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>\n}\n\ninterface TooltipProps extends ObfuscatedClassName {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: TooltipStoreState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n\n    /**\n     * The amount of time in milliseconds to wait before showing the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 500\n     */\n    showTimeout?: number\n\n    /**\n     * The amount of time in milliseconds to wait before hiding the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 100\n     */\n    hideTimeout?: number\n}\n\nconst Tooltip = React.forwardRef<TooltipStore, TooltipProps>(\n    (\n        {\n            children,\n            content,\n            position = 'top',\n            gapSize = 3,\n            withArrow = false,\n            showTimeout,\n            hideTimeout,\n            exceptionallySetClassName,\n        },\n        ref,\n    ) => {\n        const { showTimeout: globalShowTimeout, hideTimeout: globalHideTimeout } = React.useContext(\n            TooltipContext,\n        )\n\n        const tooltip = useTooltipStore({\n            placement: position,\n            showTimeout: showTimeout ?? globalShowTimeout,\n            hideTimeout: hideTimeout ?? globalHideTimeout,\n        })\n\n        React.useImperativeHandle(ref, () => tooltip, [tooltip])\n\n        const isOpen = tooltip.useState('open')\n\n        const child = React.Children.only(\n            children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n        )\n\n        if (!child) {\n            return child\n        }\n\n        if (typeof child.ref === 'string') {\n            throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n        }\n\n        return (\n            <>\n                <TooltipAnchor render={child} store={tooltip} ref={child.ref} />\n                {isOpen && content ? (\n                    <AriakitTooltip\n                        store={tooltip}\n                        gutter={gapSize}\n                        render={\n                            <Box\n                                className={[styles.tooltip, exceptionallySetClassName]}\n                                background=\"toast\"\n                                borderRadius=\"standard\"\n                                paddingX=\"small\"\n                                paddingY=\"xsmall\"\n                                maxWidth=\"medium\"\n                                width=\"fitContent\"\n                                overflow=\"hidden\"\n                                textAlign=\"center\"\n                            />\n                        }\n                    >\n                        {withArrow ? <TooltipArrow /> : null}\n                        {typeof content === 'function' ? content() : content}\n                    </AriakitTooltip>\n                ) : null}\n            </>\n        )\n    },\n)\n\nTooltip.displayName = 'Tooltip'\n\nexport type { TooltipProps }\nexport { Tooltip, TooltipProvider }\n"],"names":["defaultShowTimeout","defaultHideTimeout","TooltipContext","React","createContext","showTimeout","hideTimeout","TooltipProvider","children","value","useMemo","createElement","Provider","Tooltip","forwardRef","content","position","gapSize","withArrow","exceptionallySetClassName","ref","globalShowTimeout","globalHideTimeout","useContext","tooltip","useTooltipStore","placement","useImperativeHandle","isOpen","useState","child","Children","only","Error","Fragment","TooltipAnchor","render","store","AriakitTooltip","gutter","Box","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow","displayName"],"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/lib/tooltip/tooltip.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { TooltipStoreState } from '@ariakit/react';
+import type { TooltipStoreState, TooltipStore } from '@ariakit/react';
 import type { ObfuscatedClassName } from '../utils/common-types';
 declare function TooltipProvider({ showTimeout, hideTimeout, children, }: React.PropsWithChildren<{
     showTimeout?: number;
@@ -67,6 +67,6 @@ interface TooltipProps extends ObfuscatedClassName {
      */
     hideTimeout?: number;
 }
-declare function Tooltip({ children, content, position, gapSize, withArrow, showTimeout, hideTimeout, exceptionallySetClassName, }: TooltipProps): React.JSX.Element | null;
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<TooltipStore>>;
 export type { TooltipProps };
 export { Tooltip, TooltipProvider };

package/lib/tooltip/tooltip.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@ariakit/react"),o=require("../box/box.js"),r=require("./tooltip.module.css.js");function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,r.get?r:{enumerable:!0,get:function(){return e[o]}})}})),t.default=e,t}var i=n(e);const u=i.createContext({showTimeout:500,hideTimeout:100});exports.Tooltip=function({children:e,content:n,position:l="top",gapSize:a=3,withArrow:s=!1,showTimeout:c,hideTimeout:d,exceptionallySetClassName:m}){const{showTimeout:p,hideTimeout:f}=i.useContext(u),h=t.useTooltipStore({placement:l,showTimeout:null!=c?c:p,hideTimeout:null!=d?d:f}),T=h.useState("open"),w=i.Children.only(e);if(!w)return w;if("string"==typeof w.ref)throw new Error("Tooltip: String refs cannot be used as they cannot be forwarded");return i.createElement(i.Fragment,null,i.createElement(t.TooltipAnchor,{render:w,store:h,ref:w.ref}),T&&n?i.createElement(t.Tooltip,{store:h,gutter:a,render:i.createElement(o.Box,{className:[r.default.tooltip,m],background:"toast",borderRadius:"standard",paddingX:"small",paddingY:"xsmall",maxWidth:"medium",width:"fitContent",overflow:"hidden",textAlign:"center"})},s?i.createElement(t.TooltipArrow,null):null,"function"==typeof n?n():n):null)},exports.TooltipProvider=function({showTimeout:e=500,hideTimeout:t=100,children:o}){const r=i.useMemo(()=>({showTimeout:e,hideTimeout:t}),[e,t]);return i.createElement(u.Provider,{value:r},o)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@ariakit/react"),o=require("../box/box.js"),r=require("./tooltip.module.css.js");function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,r.get?r:{enumerable:!0,get:function(){return e[o]}})}})),t.default=e,t}var n=i(e);const l=n.createContext({showTimeout:500,hideTimeout:100}),u=n.forwardRef(({children:e,content:i,position:u="top",gapSize:a=3,withArrow:s=!1,showTimeout:d,hideTimeout:c,exceptionallySetClassName:m},p)=>{const{showTimeout:f,hideTimeout:h}=n.useContext(l),T=t.useTooltipStore({placement:u,showTimeout:null!=d?d:f,hideTimeout:null!=c?c:h});n.useImperativeHandle(p,()=>T,[T]);const w=T.useState("open"),b=n.Children.only(e);if(!b)return b;if("string"==typeof b.ref)throw new Error("Tooltip: String refs cannot be used as they cannot be forwarded");return n.createElement(n.Fragment,null,n.createElement(t.TooltipAnchor,{render:b,store:T,ref:b.ref}),w&&i?n.createElement(t.Tooltip,{store:T,gutter:a,render:n.createElement(o.Box,{className:[r.default.tooltip,m],background:"toast",borderRadius:"standard",paddingX:"small",paddingY:"xsmall",maxWidth:"medium",width:"fitContent",overflow:"hidden",textAlign:"center"})},s?n.createElement(t.TooltipArrow,null):null,"function"==typeof i?i():i):null)});u.displayName="Tooltip",exports.Tooltip=u,exports.TooltipProvider=function({showTimeout:e=500,hideTimeout:t=100,children:o}){const r=n.useMemo(()=>({showTimeout:e,hideTimeout:t}),[e,t]);return n.createElement(l.Provider,{value:r},o)};
 //# sourceMappingURL=tooltip.js.map

package/lib/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    useTooltipStore,\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n} from '@ariakit/react'\nimport { Box } from '../box'\n\nimport type { TooltipStoreState } from '@ariakit/react'\n\nimport styles from './tooltip.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\nconst defaultShowTimeout = 500\nconst defaultHideTimeout = 100\n\ntype TooltipContextState = {\n    showTimeout: number\n    hideTimeout: number\n}\n\nconst TooltipContext = React.createContext<TooltipContextState>({\n    showTimeout: defaultShowTimeout,\n    hideTimeout: defaultHideTimeout,\n})\n\nfunction TooltipProvider({\n    showTimeout = defaultShowTimeout,\n    hideTimeout = defaultHideTimeout,\n    children,\n}: React.PropsWithChildren<{\n    showTimeout?: number\n    hideTimeout?: number\n}>) {\n    const value = React.useMemo(() => ({ showTimeout, hideTimeout }), [showTimeout, hideTimeout])\n    return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>\n}\n\ninterface TooltipProps extends ObfuscatedClassName {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: TooltipStoreState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n\n    /**\n     * The amount of time in milliseconds to wait before showing the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 500\n     */\n    showTimeout?: number\n\n    /**\n     * The amount of time in milliseconds to wait before hiding the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 100\n     */\n    hideTimeout?: number\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    withArrow = false,\n    showTimeout,\n    hideTimeout,\n    exceptionallySetClassName,\n}: TooltipProps) {\n    const { showTimeout: globalShowTimeout, hideTimeout: globalHideTimeout } = React.useContext(\n        TooltipContext,\n    )\n    const tooltip = useTooltipStore({\n        placement: position,\n        showTimeout: showTimeout ?? globalShowTimeout,\n        hideTimeout: hideTimeout ?? globalHideTimeout,\n    })\n    const isOpen = tooltip.useState('open')\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n    )\n\n    if (!child) {\n        return child\n    }\n\n    if (typeof child.ref === 'string') {\n        throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n    }\n\n    return (\n        <>\n            <TooltipAnchor render={child} store={tooltip} ref={child.ref} />\n            {isOpen && content ? (\n                <AriakitTooltip\n                    store={tooltip}\n                    gutter={gapSize}\n                    render={\n                        <Box\n                            className={[styles.tooltip, exceptionallySetClassName]}\n                            background=\"toast\"\n                            borderRadius=\"standard\"\n                            paddingX=\"small\"\n                            paddingY=\"xsmall\"\n                            maxWidth=\"medium\"\n                            width=\"fitContent\"\n                            overflow=\"hidden\"\n                            textAlign=\"center\"\n                        />\n                    }\n                >\n                    {withArrow ? <TooltipArrow /> : null}\n                    {typeof content === 'function' ? content() : content}\n                </AriakitTooltip>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip, TooltipProvider }\n"],"names":["TooltipContext","React","createContext","showTimeout","hideTimeout","children","content","position","gapSize","withArrow","exceptionallySetClassName","globalShowTimeout","globalHideTimeout","useContext","tooltip","useTooltipStore","placement","isOpen","useState","child","Children","only","ref","Error","createElement","Fragment","TooltipAnchor","render","store","AriakitTooltip","gutter","Box","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow","value","useMemo","Provider"],"mappings":"kdAeA,MAQMA,EAAiBC,EAAMC,cAAmC,CAC5DC,YATuB,IAUvBC,YATuB,sBA6F3B,UAAiBC,SACbA,EADaC,QAEbA,EAFaC,SAGbA,EAAW,MAHEC,QAIbA,EAAU,EAJGC,UAKbA,GAAY,EALCN,YAMbA,EANaC,YAObA,EAPaM,0BAQbA,IAEA,MAAQP,YAAaQ,EAAmBP,YAAaQ,GAAsBX,EAAMY,WAC7Eb,GAEEc,EAAUC,EAAAA,gBAAgB,CAC5BC,UAAWT,EACXJ,YAAaA,MAAAA,EAAAA,EAAeQ,EAC5BP,YAAaA,MAAAA,EAAAA,EAAeQ,IAE1BK,EAASH,EAAQI,SAAS,QAE1BC,EAAQlB,EAAMmB,SAASC,KACzBhB,GAGJ,IAAKc,EACD,OAAOA,EAGX,GAAyB,iBAAdA,EAAMG,IACb,MAAM,IAAIC,MAAM,mEAGpB,OACItB,EAAAuB,cAAAvB,EAAAwB,SAAA,KACIxB,EAAAuB,cAACE,gBAAa,CAACC,OAAQR,EAAOS,MAAOd,EAASQ,IAAKH,EAAMG,MACxDL,GAAUX,EACPL,EAACuB,cAAAK,EAAAA,QACG,CAAAD,MAAOd,EACPgB,OAAQtB,EACRmB,OACI1B,EAAAuB,cAACO,MAAG,CACAC,UAAW,CAACC,EAAAA,QAAOnB,QAASJ,GAC5BwB,WAAW,QACXC,aAAa,WACbC,SAAS,QACTC,SAAS,SACTC,SAAS,SACTC,MAAM,aACNC,SAAS,SACTC,UAAU,YAIjBhC,EAAYR,EAAAuB,cAACkB,EAADA,aAAgB,MAAG,KACZ,mBAAZpC,EAAyBA,IAAYA,GAEjD,+BAzIhB,UAAyBH,YACrBA,EAduB,IAaFC,YAErBA,EAduB,IAYFC,SAGrBA,IAKA,MAAMsC,EAAQ1C,EAAM2C,QAAQ,KAAO,CAAEzC,YAAAA,EAAaC,YAAAA,IAAgB,CAACD,EAAaC,IAChF,OAAOH,EAAAuB,cAACxB,EAAe6C,SAAQ,CAACF,MAAOA,GAAQtC"}
+{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    useTooltipStore,\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n} from '@ariakit/react'\nimport { Box } from '../box'\n\nimport type { TooltipStoreState, TooltipStore } from '@ariakit/react'\n\nimport styles from './tooltip.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\nconst defaultShowTimeout = 500\nconst defaultHideTimeout = 100\n\ntype TooltipContextState = {\n    showTimeout: number\n    hideTimeout: number\n}\n\nconst TooltipContext = React.createContext<TooltipContextState>({\n    showTimeout: defaultShowTimeout,\n    hideTimeout: defaultHideTimeout,\n})\n\nfunction TooltipProvider({\n    showTimeout = defaultShowTimeout,\n    hideTimeout = defaultHideTimeout,\n    children,\n}: React.PropsWithChildren<{\n    showTimeout?: number\n    hideTimeout?: number\n}>) {\n    const value = React.useMemo(() => ({ showTimeout, hideTimeout }), [showTimeout, hideTimeout])\n    return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>\n}\n\ninterface TooltipProps extends ObfuscatedClassName {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: TooltipStoreState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n\n    /**\n     * The amount of time in milliseconds to wait before showing the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 500\n     */\n    showTimeout?: number\n\n    /**\n     * The amount of time in milliseconds to wait before hiding the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 100\n     */\n    hideTimeout?: number\n}\n\nconst Tooltip = React.forwardRef<TooltipStore, TooltipProps>(\n    (\n        {\n            children,\n            content,\n            position = 'top',\n            gapSize = 3,\n            withArrow = false,\n            showTimeout,\n            hideTimeout,\n            exceptionallySetClassName,\n        },\n        ref,\n    ) => {\n        const { showTimeout: globalShowTimeout, hideTimeout: globalHideTimeout } = React.useContext(\n            TooltipContext,\n        )\n\n        const tooltip = useTooltipStore({\n            placement: position,\n            showTimeout: showTimeout ?? globalShowTimeout,\n            hideTimeout: hideTimeout ?? globalHideTimeout,\n        })\n\n        React.useImperativeHandle(ref, () => tooltip, [tooltip])\n\n        const isOpen = tooltip.useState('open')\n\n        const child = React.Children.only(\n            children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n        )\n\n        if (!child) {\n            return child\n        }\n\n        if (typeof child.ref === 'string') {\n            throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n        }\n\n        return (\n            <>\n                <TooltipAnchor render={child} store={tooltip} ref={child.ref} />\n                {isOpen && content ? (\n                    <AriakitTooltip\n                        store={tooltip}\n                        gutter={gapSize}\n                        render={\n                            <Box\n                                className={[styles.tooltip, exceptionallySetClassName]}\n                                background=\"toast\"\n                                borderRadius=\"standard\"\n                                paddingX=\"small\"\n                                paddingY=\"xsmall\"\n                                maxWidth=\"medium\"\n                                width=\"fitContent\"\n                                overflow=\"hidden\"\n                                textAlign=\"center\"\n                            />\n                        }\n                    >\n                        {withArrow ? <TooltipArrow /> : null}\n                        {typeof content === 'function' ? content() : content}\n                    </AriakitTooltip>\n                ) : null}\n            </>\n        )\n    },\n)\n\nTooltip.displayName = 'Tooltip'\n\nexport type { TooltipProps }\nexport { Tooltip, TooltipProvider }\n"],"names":["TooltipContext","React","createContext","showTimeout","hideTimeout","Tooltip","forwardRef","children","content","position","gapSize","withArrow","exceptionallySetClassName","ref","globalShowTimeout","globalHideTimeout","useContext","tooltip","useTooltipStore","placement","useImperativeHandle","isOpen","useState","child","Children","only","Error","createElement","Fragment","TooltipAnchor","render","store","AriakitTooltip","gutter","Box","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow","displayName","value","useMemo","Provider"],"mappings":"kdAeA,MAQMA,EAAiBC,EAAMC,cAAmC,CAC5DC,YATuB,IAUvBC,YATuB,MA6FrBC,EAAUJ,EAAMK,WAClB,EAEQC,SAAAA,EACAC,QAAAA,EACAC,SAAAA,EAAW,MACXC,QAAAA,EAAU,EACVC,UAAAA,GAAY,EACZR,YAAAA,EACAC,YAAAA,EACAQ,0BAAAA,GAEJC,KAEA,MAAQV,YAAaW,EAAmBV,YAAaW,GAAsBd,EAAMe,WAC7EhB,GAGEiB,EAAUC,EAAAA,gBAAgB,CAC5BC,UAAWV,EACXN,YAAaA,MAAAA,EAAAA,EAAeW,EAC5BV,YAAaA,MAAAA,EAAAA,EAAeW,IAGhCd,EAAMmB,oBAAoBP,EAAK,IAAMI,EAAS,CAACA,IAE/C,MAAMI,EAASJ,EAAQK,SAAS,QAE1BC,EAAQtB,EAAMuB,SAASC,KACzBlB,GAGJ,IAAKgB,EACD,OAAOA,EAGX,GAAyB,iBAAdA,EAAMV,IACb,MAAM,IAAIa,MAAM,mEAGpB,OACIzB,EAAA0B,cAAA1B,EAAA2B,SAAA,KACI3B,EAAA0B,cAACE,gBAAa,CAACC,OAAQP,EAAOQ,MAAOd,EAASJ,IAAKU,EAAMV,MACxDQ,GAAUb,EACPP,EAAC0B,cAAAK,EAAAA,QACG,CAAAD,MAAOd,EACPgB,OAAQvB,EACRoB,OACI7B,EAAA0B,cAACO,MAAG,CACAC,UAAW,CAACC,EAAAA,QAAOnB,QAASL,GAC5ByB,WAAW,QACXC,aAAa,WACbC,SAAS,QACTC,SAAS,SACTC,SAAS,SACTC,MAAM,aACNC,SAAS,SACTC,UAAU,YAIjBjC,EAAYV,EAAA0B,cAACkB,EAADA,aAAgB,MAAG,KACZ,mBAAZrC,EAAyBA,IAAYA,GAEjD,QAMpBH,EAAQyC,YAAc,oDAvJtB,UAAyB3C,YACrBA,EAduB,IAaFC,YAErBA,EAduB,IAYFG,SAGrBA,IAKA,MAAMwC,EAAQ9C,EAAM+C,QAAQ,KAAO,CAAE7C,YAAAA,EAAaC,YAAAA,IAAgB,CAACD,EAAaC,IAChF,OAAOH,EAAA0B,cAAC3B,EAAeiD,SAAQ,CAACF,MAAOA,GAAQxC"}

package/package.json

@@ -6,7 +6,7 @@
         "email": "henning@doist.com",
         "url": "http://doist.com"
     },
-    "version": "28.5.4",
+    "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}