@amboss/design-system 4.8.2-canary.0 → 4.9.0

package/build/esm/components/SubThemeProvider/SubThemeProvider.js

@@ -1 +1 @@
-import React,{useMemo}from"react";import{ThemeProvider}from"@emotion/react";import{SubThemeContext}from"./SubThemeContext";function isObject(item){return item&&"object"==typeof item&&!Array.isArray(item)}let baseThemeByName=new Map,setBaseTheme=theme=>{theme.name&&!baseThemeByName.has(theme.name)&&baseThemeByName.set(theme.name,theme)},getBaseTheme=theme=>baseThemeByName.get(theme.name)??theme,subThemeCreator=(parentTheme,name)=>(setBaseTheme(parentTheme),function mergeDeep(target,...sources){if(!sources.length)return target;let source=sources.shift();if(isObject(target)&&isObject(source))for(let key in source)isObject(source[key])?(target[key]||Object.assign(target,{[key]:{}}),mergeDeep(target[key],source[key])):Object.assign(target,{[key]:source[key]});return mergeDeep(target,...sources)}({},parentTheme,{values:{...parentTheme.values.subThemes[name]}}));export function SubThemeProvider({name,children,as,"data-e2e-test-id":dataE2eTestId}){let memoizedTheme=useMemo(()=>parentTheme=>"unset"===name?getBaseTheme(parentTheme):subThemeCreator(parentTheme,name),[name]);return React.createElement(ThemeProvider,{theme:memoizedTheme},React.createElement(SubThemeContext.Provider,{value:name},"div"===as?React.createElement("div",{"data-subtheme":name,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"SubThemeProvider"},children):children))}
+import React,{useMemo}from"react";import{ThemeProvider}from"@emotion/react";import{SubThemeContext}from"./SubThemeContext";function isObject(item){return!!item&&"object"==typeof item&&!Array.isArray(item)}let baseThemeByName=new Map,setBaseTheme=theme=>{theme.name&&!baseThemeByName.has(theme.name)&&baseThemeByName.set(theme.name,theme)},getBaseTheme=theme=>baseThemeByName.get(theme.name)??theme,subThemeCreator=(parentTheme,name)=>(setBaseTheme(parentTheme),function mergeDeep(target,...sources){if(!sources.length)return target;let source=sources.shift();if(isObject(target)&&isObject(source)){for(let key in source)if(Object.prototype.hasOwnProperty.call(source,key)){let sourceValue=source[key];if(isObject(sourceValue)){let nestedTarget=target[key]||{};Object.assign(target,{[key]:nestedTarget}),mergeDeep(nestedTarget,sourceValue)}else Object.assign(target,{[key]:sourceValue})}}return mergeDeep(target,...sources)}({},parentTheme,{values:{...parentTheme.values.subThemes[name]}}));export function SubThemeProvider({name,children,as,"data-e2e-test-id":dataE2eTestId}){let memoizedTheme=useMemo(()=>parentTheme=>"unset"===name?getBaseTheme(parentTheme):subThemeCreator(parentTheme,name),[name]);return React.createElement(ThemeProvider,{theme:memoizedTheme},React.createElement(SubThemeContext.Provider,{value:name},"div"===as?React.createElement("div",{"data-subtheme":name,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"SubThemeProvider"},children):children))}

package/build/esm/components/Tabs/Tabs.js

@@ -1 +1 @@
-import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import React,{useId,useRef}from"react";import{useResponsiveStyles}from"../../shared/mediaQueries";import{useKeyboard}from"../../shared/useKeyboard";import{Icon}from"../Icon/Icon";import{Stack}from"../Stack/Stack";import{Tooltip}from"../Tooltip/Tooltip";import{useTabFocus}from"./useTabFocus";import{getButtonAppearanceReset}from"../../shared/mixins/Button/getButtonAppearanceReset";let StyledContainer=styled("div",{shouldForwardProp:prop=>isPropValid(prop),target:"e2kj0g00",label:"StyledContainer"})(({theme,horizontalPadding,hideBottomBorder})=>({display:"flex",flexDirection:"row",...useResponsiveStyles({gap:[["m","l","l"],theme.variables.size.spacing],paddingInline:[horizontalPadding,theme.variables.size.spacing]}),...!hideBottomBorder&&{borderBottom:`1px solid ${theme.values.color.border.secondary.default}`},whiteSpace:"nowrap",overflow:"auto",scrollbarWidth:"none",msOverflowStyle:"none","::-webkit-scrollbar":{display:"none"}})),StyledTab=styled("button",{shouldForwardProp:prop=>isPropValid(prop)&&"active"!==prop&&"disabled"!==prop,target:"e2kj0g01",label:"StyledTab"})(({theme,active,disabled,hideBottomBorder,activeTabClickable})=>({...getButtonAppearanceReset(),padding:0,display:"flex",gap:theme.variables.size.spacing.xxs,alignItems:"center",boxSizing:"border-box",color:theme.values.color.text.secondary.default,fontFamily:theme.variables.fontFamily.lato,fontWeight:theme.variables.weight.bold,fontSize:theme.variables.size.font.s,lineHeight:theme.variables.size.lineHeight.xs,borderBottom:"4px solid transparent",paddingTop:hideBottomBorder?theme.variables.size.spacing.m:`calc(${theme.variables.size.spacing.m} - 1px)`,paddingBottom:`calc(${theme.variables.size.spacing.m} - 4px)`,...active&&!disabled&&{color:theme.values.color.text.accent.default,borderBottomColor:theme.values.color.border.accent.default},...!active&&!disabled&&{cursor:"pointer","&:hover":{color:theme.values.color.text.primary.default,borderBottomColor:theme.values.color.border.secondary.default},"&:active":{color:theme.values.color.text.primary.default,borderBottomColor:theme.values.color.border.secondary.active}},...activeTabClickable&&{cursor:"pointer"},...disabled&&{opacity:theme.variables.opacity.disabled,cursor:"not-allowed"},"&:focus-visible":{outlineWidth:2,outlineOffset:-1}})),addSubtitle=text=>text?`(${text})`:"";export function Tabs({tabs,horizontalPadding,activeTab=0,children,onTabSelect,activeTabClickable,tabPanelId:tabPanelIdProp,"data-e2e-test-id":dataE2eTestId,hideBottomBorder,...ariaAttributes}){let tablistRef=useRef(null),instanceId=useId(),tabPanelId=tabPanelIdProp||`${instanceId}-panel`,{onBlur,onTabFocus,getTabIndex,focusNextTab}=useTabFocus({tabs,activeTab,tablistRef,tabAttribute:"data-tab-index"});useKeyboard({ArrowRight:()=>focusNextTab(1),ArrowLeft:()=>focusNextTab(-1)},tablistRef,!0);let getTabId=index=>`${instanceId}-tab-${index}`;return React.createElement(Stack,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Tabs"},React.createElement(StyledContainer,{...ariaAttributes,hideBottomBorder:hideBottomBorder,horizontalPadding:horizontalPadding,onBlur:onBlur,ref:tablistRef,"aria-orientation":"horizontal",role:"tablist"},tabs.map(({label,sublabel,icon,as="button",disabled,tooltipContent,...rest},i)=>{let iconConfig;icon&&(iconConfig="string"==typeof icon?{name:icon,position:"left"}:icon);let Tab=React.createElement(StyledTab,{id:getTabId(i),activeTabClickable:activeTabClickable,hideBottomBorder:hideBottomBorder,disabled:disabled,as:as,key:label,active:activeTab===i,...rest,onFocus:e=>{onTabFocus(i),rest.onFocus?.(e)},onClick:e=>{disabled||(onTabSelect?.(i),rest.onClick?.(e))},tabIndex:getTabIndex(i),"data-tab-index":i,type:"button"!==as?void 0:"button",role:"tab","aria-selected":activeTab===i,"aria-disabled":disabled||void 0,"aria-controls":children?tabPanelId:void 0},iconConfig&&"left"===iconConfig.position&&React.createElement(Icon,{size:"s",name:iconConfig.name}),label," ",addSubtitle(sublabel),iconConfig&&"right"===iconConfig.position&&React.createElement(Icon,{size:"s",name:iconConfig.name}));return disabled&&tooltipContent?React.createElement(Tooltip,{key:label,content:tooltipContent},Tab):Tab})),children&&null!=activeTab&&React.createElement("div",{role:"tabpanel",id:tabPanelId,"aria-labelledby":getTabId(activeTab)},children))}
+import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import React,{useId,useRef}from"react";import{useResponsiveStyles}from"../../shared/mediaQueries";import{useKeyboard}from"../../shared/useKeyboard";import{Icon}from"../Icon/Icon";import{Stack}from"../Stack/Stack";import{Tooltip}from"../Tooltip/Tooltip";import{useTabFocus}from"./useTabFocus";import{getButtonAppearanceReset}from"../../shared/mixins/Button/getButtonAppearanceReset";let StyledContainer=styled("div",{shouldForwardProp:prop=>isPropValid(prop),target:"e1ab8gc80",label:"StyledContainer"})(({theme,horizontalPadding,hideBottomBorder})=>({display:"flex",flexDirection:"row",...useResponsiveStyles({gap:[["m","l","l"],theme.variables.size.spacing],paddingInline:[horizontalPadding,theme.variables.size.spacing]}),...!hideBottomBorder&&{borderBottom:`1px solid ${theme.values.color.border.secondary.default}`},whiteSpace:"nowrap",overflow:"auto",scrollbarWidth:"none",msOverflowStyle:"none","::-webkit-scrollbar":{display:"none"}})),StyledTab=styled("button",{shouldForwardProp:prop=>isPropValid(prop)&&"active"!==prop&&"disabled"!==prop,target:"e1ab8gc81",label:"StyledTab"})(({theme,active,disabled,hideBottomBorder,activeTabClickable})=>({...getButtonAppearanceReset(),padding:0,display:"flex",gap:theme.variables.size.spacing.xxs,alignItems:"center",boxSizing:"border-box",color:theme.values.color.text.secondary.default,fontFamily:theme.variables.fontFamily.lato,fontWeight:theme.variables.weight.bold,fontSize:theme.variables.size.font.s,lineHeight:theme.variables.size.lineHeight.xs,borderBottom:"4px solid transparent",paddingTop:hideBottomBorder?theme.variables.size.spacing.m:`calc(${theme.variables.size.spacing.m} - 1px)`,paddingBottom:`calc(${theme.variables.size.spacing.m} - 4px)`,...active&&!disabled&&{color:theme.values.color.text.accent.default,borderBottomColor:theme.values.color.border.accent.default},...!active&&!disabled&&{cursor:"pointer","&:hover":{color:theme.values.color.text.primary.default,borderBottomColor:theme.values.color.border.secondary.default},"&:active":{color:theme.values.color.text.primary.default,borderBottomColor:theme.values.color.border.secondary.active}},...activeTabClickable&&{cursor:"pointer"},...disabled&&{opacity:theme.variables.opacity.disabled,cursor:"not-allowed"},"&:focus-visible":{outlineWidth:2,outlineOffset:-1}})),addSubtitle=text=>text?`(${text})`:"";export function Tabs({tabs,horizontalPadding,activeTab=0,children,onTabSelect,activeTabClickable,tabPanelId:tabPanelIdProp,"data-e2e-test-id":dataE2eTestId,hideBottomBorder,...ariaAttributes}){let tablistRef=useRef(null),instanceId=useId(),tabPanelId=tabPanelIdProp||`${instanceId}-panel`,{onBlur,onTabFocus,getTabIndex,focusNextTab}=useTabFocus({tabs,activeTab,tablistRef,tabAttribute:"data-tab-index"});useKeyboard({ArrowRight:()=>focusNextTab(1),ArrowLeft:()=>focusNextTab(-1)},tablistRef,!0);let getTabId=index=>`${instanceId}-tab-${index}`;return React.createElement(Stack,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Tabs"},React.createElement(StyledContainer,{...ariaAttributes,hideBottomBorder:hideBottomBorder,horizontalPadding:horizontalPadding,onBlur:onBlur,ref:tablistRef,"aria-orientation":"horizontal",role:"tablist"},tabs.map(({label,sublabel,icon,as="button",disabled,tooltipContent,...rest},i)=>{let iconConfig;icon&&(iconConfig="string"==typeof icon?{name:icon,position:"left"}:icon);let Tab=React.createElement(StyledTab,{id:getTabId(i),activeTabClickable:activeTabClickable,hideBottomBorder:hideBottomBorder,disabled:disabled,as:as,key:label,active:activeTab===i,...rest,onFocus:e=>{onTabFocus(i),rest.onFocus?.(e)},onClick:e=>{disabled||(onTabSelect?.(i),rest.onClick?.(e))},tabIndex:getTabIndex(i),"data-tab-index":i,type:"button"!==as?void 0:"button",role:"tab","aria-selected":activeTab===i,"aria-disabled":disabled||void 0,"aria-controls":children?tabPanelId:void 0},iconConfig&&"left"===iconConfig.position&&React.createElement(Icon,{size:"s",name:iconConfig.name}),label," ",addSubtitle(sublabel),iconConfig&&"right"===iconConfig.position&&React.createElement(Icon,{size:"s",name:iconConfig.name}));return disabled&&tooltipContent?React.createElement(Tooltip,{key:label,content:tooltipContent},Tab):Tab})),children&&null!=activeTab&&React.createElement("div",{role:"tabpanel",id:tabPanelId,"aria-labelledby":getTabId(activeTab)},children))}

package/build/esm/components/TagGroup/TagGroup.js

@@ -1 +1 @@
-import React,{useState,useRef}from"react";import styled from"@emotion/styled";import{keyframes}from"@emotion/react";import{Tag}from"../Tag/Tag";import{MAX_TAG_WIDTH}from"../Internal/BaseTag/BaseTag";let shrink=currentWidth=>keyframes({from:{width:`${currentWidth}px`},to:{width:"0px"}},"label:shrink"),StyledContainer=styled("div",{target:"e7a71ut0",label:"StyledContainer"})(({theme})=>({display:"flex",flexWrap:"wrap",gap:theme.variables.size.spacing.xs})),StyledTagContainer=styled("div",{target:"e7a71ut1",label:"StyledTagContainer"})(({theme,toBeRemoved,tagWidth})=>({overflow:"hidden",...toBeRemoved&&{opacity:theme.variables.opacity.hidden,marginLeft:`-${theme.variables.size.spacing.xs}`,animation:`0.2s ease-out 0s normal forwards ${shrink(tagWidth)}`}}));export function TagGroup({colorVariant="gray",isTagRemovable=!1,tags,onRemoveTag,"data-e2e-test-id":dataE2eTestId}){let[tagToBeRemoved,setTagToBeRemoved]=useState(null),containerRef=useRef(null),handleTagRemove=(tag,index)=>{let width=MAX_TAG_WIDTH;containerRef.current&&(width=containerRef.current.children[index].clientWidth),setTagToBeRemoved({tag,tagWidth:width})},handleAnimationEnd=()=>{onRemoveTag&&tagToBeRemoved&&onRemoveTag(tagToBeRemoved.tag)},tagElms=tags.map((tag,index)=>{let{label,clearBtnAriaLabel}=tag;if(isTagRemovable){let isToBeRemovedTag=tagToBeRemoved&&tagToBeRemoved.tag.label===label;return React.createElement(StyledTagContainer,{key:label,toBeRemoved:isToBeRemovedTag,onAnimationEnd:handleAnimationEnd,tagWidth:isToBeRemovedTag&&tagToBeRemoved?.tagWidth},React.createElement(Tag,{label:label,colorVariant:colorVariant,clearBtnAriaLabel:clearBtnAriaLabel,onClear:()=>handleTagRemove(tag,index),isRemovable:!0}))}return React.createElement(Tag,{key:label,label:label,colorVariant:colorVariant})});return React.createElement(StyledContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"TagGroup",ref:containerRef},tagElms)}
+import React,{useState,useRef}from"react";import styled from"@emotion/styled";import{keyframes}from"@emotion/react";import{Tag}from"../Tag/Tag";import{MAX_TAG_WIDTH}from"../Internal/BaseTag/BaseTag";let shrink=currentWidth=>keyframes({from:{width:`${currentWidth}px`},to:{width:"0px"}},"label:shrink"),StyledContainer=styled("div",{target:"e1q0hgtq0",label:"StyledContainer"})(({theme})=>({display:"flex",flexWrap:"wrap",gap:theme.variables.size.spacing.xs})),StyledTagContainer=styled("div",{target:"e1q0hgtq1",label:"StyledTagContainer"})(({theme,toBeRemoved,tagWidth})=>({overflow:"hidden",...toBeRemoved&&{opacity:theme.variables.opacity.hidden,marginLeft:`-${theme.variables.size.spacing.xs}`,animation:`0.2s ease-out 0s normal forwards ${shrink(tagWidth)}`}}));export function TagGroup({colorVariant="gray",isTagRemovable=!1,tags,onRemoveTag,"data-e2e-test-id":dataE2eTestId}){let[tagToBeRemoved,setTagToBeRemoved]=useState(null),containerRef=useRef(null),handleTagRemove=(tag,index)=>{let width=MAX_TAG_WIDTH;containerRef.current&&(width=containerRef.current.children[index].clientWidth),setTagToBeRemoved({tag,tagWidth:width})},handleAnimationEnd=()=>{onRemoveTag&&tagToBeRemoved&&onRemoveTag(tagToBeRemoved.tag)},tagElms=tags.map((tag,index)=>{let{label,clearBtnAriaLabel}=tag;if(isTagRemovable){let isToBeRemovedTag=tagToBeRemoved?.tag.label===label;return React.createElement(StyledTagContainer,{key:label,toBeRemoved:isToBeRemovedTag,onAnimationEnd:handleAnimationEnd,tagWidth:tagToBeRemoved?.tagWidth??MAX_TAG_WIDTH},React.createElement(Tag,{label:label,colorVariant:colorVariant,clearBtnAriaLabel:clearBtnAriaLabel,onClear:()=>handleTagRemove(tag,index),isRemovable:!0}))}return React.createElement(Tag,{key:label,label:label,colorVariant:colorVariant})});return React.createElement(StyledContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"TagGroup",ref:containerRef},tagElms)}

package/build/esm/components/Toast/Toast.d.ts

@@ -11,10 +11,11 @@ export type ToastProps<C extends React.ElementType = "button"> = {
     isVisible: boolean;
     message: string | ReactElement;
     autoDismissDuration?: "none" | "s" | "m" | "l";
+    /** Accessible name for the close button. */
     closeButtonAriaLabel?: string;
     actionButton?: PolymorphicComponentPropsWithRef<C, ButtonProps>;
     onDismiss: (reason: DismissReason) => void;
     "data-e2e-test-id"?: string;
 } & Pick<PortalProps, "portalContainer"> & AriaAttributes;
-export declare function Toast<C extends React.ElementType = "button">({ type, iconName, isVisible, message, portalContainer, actionButton, autoDismissDuration, closeButtonAriaLabel, onDismiss, "data-e2e-test-id": dataE2eTestId, ...ariaAttributes }: ToastProps<C>): React.ReactElement;
+export declare function Toast<C extends React.ElementType = "button">({ type, iconName, isVisible, message, portalContainer, actionButton, autoDismissDuration, closeButtonAriaLabel, onDismiss, "data-e2e-test-id": dataE2eTestId, ...ariaAttributes }: ToastProps<C>): React.ReactElement | null;
 export {};

package/build/esm/components/Toast/Toast.js

@@ -1 +1 @@
-import React,{useState,useEffect,useCallback,useContext,useRef,useId}from"react";import{keyframes}from"@emotion/react";import styled from"@emotion/styled";import{Text}from"../Typography/Text/Text";import{Box}from"../Box/Box";import{PictogramButton}from"../PictogramButton/PictogramButton";import{SubThemeProvider}from"../SubThemeProvider/SubThemeProvider";import{Portal,usePortalChildZIndex}from"../Portal/Portal";import{Container}from"../Container/Container";import{Button}from"../Button/Button";import{Inline}from"../Inline/Inline";import{ToastContext}from"./ToastProvider";import{Icon}from"../Icon/Icon";import{useResponsiveValue}from"../../shared/mediaQueries";let StyledContainer=styled("aside",{target:"eht99970",label:"StyledContainer"})(({theme,isShowing,isHiding})=>{let entryAnimation=keyframes({from:{transform:`translate(-50%, ${theme.variables.animation.toast.entry.distanceY})`,opacity:theme.variables.opacity.hidden},to:{transform:"translate(-50%, 0px)",opacity:theme.variables.opacity.visible}}),exitAnimation=keyframes({from:{transform:"translate(-50%, 0px)",opacity:theme.variables.opacity.visible},to:{transform:`translate(-50%, ${theme.variables.animation.toast.exit.distanceY})`,opacity:theme.variables.opacity.hidden}}),animation="none";return isShowing?animation=`${theme.variables.animation.toast.entry.duration} ease forwards ${entryAnimation}`:isHiding&&(animation=`${theme.variables.animation.toast.exit.duration} ease forwards ${exitAnimation}`),{position:"fixed",opacity:"none"===animation?theme.variables.opacity.visible:theme.variables.opacity.hidden,left:"50%",transform:"translateX(-50%)",animation,zIndex:usePortalChildZIndex(theme.variables.zIndex.tooltip),...useResponsiveValue({maxWidth:[void 0,520],minWidth:[void 0,280],width:[`calc(100% - (2 * ${theme.variables.size.spacing.m}))`,"auto"],bottom:[theme.variables.size.spacing.m,theme.variables.size.spacing.l]})}}),StyledIconContainer=styled("div",{target:"eht99971",label:"StyledIconContainer"})(()=>useResponsiveValue({display:["none","block"]})),DEFAULT_ICONS_BY_TYPE={info:"info",success:"check",error:"alert-triangle",neutral:"info"},TYPE_TO_SUB_THEME_NAMES={info:"info",success:"success",error:"error",neutral:"dimmed"},AUTO_DISMISS_DURATION={none:0,s:5e3,m:1e4,l:15e3};export function Toast({type="info",iconName=DEFAULT_ICONS_BY_TYPE[type],isVisible,message,portalContainer,actionButton,autoDismissDuration=actionButton?"m":"s",closeButtonAriaLabel,onDismiss,"data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let[isShowing,setIsShowing]=useState(!1),[isHiding,setIsHiding]=useState(!1),[isToastVisible,setIsToastVisible]=useState(!1),toastContext=useContext(ToastContext),timeoutId=useRef(null),id=useId(),autoDismissDurationMs=AUTO_DISMISS_DURATION[autoDismissDuration],showToast=useCallback(()=>{!isToastVisible&&(setIsShowing(!0),autoDismissDurationMs&&(timeoutId.current=setTimeout(()=>onDismiss("timeout"),autoDismissDurationMs)))},[isToastVisible,autoDismissDurationMs,onDismiss]),hideToast=useCallback(()=>{isToastVisible&&setIsHiding(!0)},[isToastVisible]);if(useEffect(()=>()=>{clearTimeout(timeoutId.current)},[]),useEffect(()=>{isVisible?showToast():(clearTimeout(timeoutId.current),hideToast())},[isVisible,showToast,hideToast]),useEffect(()=>{isToastVisible&&toastContext&&toastContext.lastToastId&&toastContext.lastToastId!==id&&onDismiss("replaced")},[isToastVisible,toastContext,id,onDismiss]),!(isToastVisible||isShowing||isHiding))return null;let actionButtonElm=actionButton?React.createElement(Button,{...actionButton,variant:"secondary",size:"s","aria-hidden":"true"}):null;return React.createElement(Portal,{portalContainer:portalContainer},React.createElement(StyledContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Toast",...ariaAttributes,role:"alert",isShowing:isShowing,isHiding:isHiding,onAnimationEnd:()=>{isShowing&&(setIsShowing(!1),setIsToastVisible(!0),toastContext&&toastContext.setLastToastId(id)),isHiding&&(setIsHiding(!1),setIsToastVisible(!1))},onKeyDown:evt=>{"Escape"===evt.key&&onDismiss("close")}},React.createElement(SubThemeProvider,{name:TYPE_TO_SUB_THEME_NAMES[type]},React.createElement(Container,{elevation:3,borderRadius:"s"},React.createElement(Box,{space:"m",vSpace:"s",rSpace:"s"},React.createElement(Inline,{space:"m",alignItems:"spaceBetween",vAlignItems:"top",noWrap:!0},React.createElement(Box,{space:"zero",vSpace:"xxs"},React.createElement(Inline,{space:"s",vAlignItems:"top",noWrap:!0},iconName&&React.createElement(StyledIconContainer,null,React.createElement(Text,{as:"span"},React.createElement(Icon,{name:iconName,"data-e2e-test-id":iconName}))),React.createElement(Text,null,message))),React.createElement(Inline,{space:"xs",vAlignItems:"center",noWrap:!0},actionButtonElm,React.createElement(PictogramButton,{"data-e2e-test-id":"close-button","aria-label":closeButtonAriaLabel,variant:"quaternary",icon:"x",size:"s",onClick:()=>onDismiss("close")}))))))))}
+import React,{useState,useEffect,useCallback,useContext,useRef,useId}from"react";import{keyframes}from"@emotion/react";import styled from"@emotion/styled";import{Text}from"../Typography/Text/Text";import{Box}from"../Box/Box";import{PictogramButton}from"../PictogramButton/PictogramButton";import{SubThemeProvider}from"../SubThemeProvider/SubThemeProvider";import{Portal,usePortalChildZIndex}from"../Portal/Portal";import{Container}from"../Container/Container";import{Button}from"../Button/Button";import{Inline}from"../Inline/Inline";import{ToastContext}from"./ToastProvider";import{Icon}from"../Icon/Icon";import{useResponsiveValue}from"../../shared/mediaQueries";let StyledContainer=styled("aside",{target:"e2cd6ok0",label:"StyledContainer"})(({theme,isShowing,isHiding})=>{let entryAnimation=keyframes({from:{transform:`translate(-50%, ${theme.variables.animation.toast.entry.distanceY})`,opacity:theme.variables.opacity.hidden},to:{transform:"translate(-50%, 0px)",opacity:theme.variables.opacity.visible}}),exitAnimation=keyframes({from:{transform:"translate(-50%, 0px)",opacity:theme.variables.opacity.visible},to:{transform:`translate(-50%, ${theme.variables.animation.toast.exit.distanceY})`,opacity:theme.variables.opacity.hidden}}),animation="none";return isShowing?animation=`${theme.variables.animation.toast.entry.duration} ease forwards ${entryAnimation}`:isHiding&&(animation=`${theme.variables.animation.toast.exit.duration} ease forwards ${exitAnimation}`),{position:"fixed",opacity:"none"===animation?theme.variables.opacity.visible:theme.variables.opacity.hidden,left:"50%",transform:"translateX(-50%)",animation,zIndex:usePortalChildZIndex(theme.variables.zIndex.tooltip),...useResponsiveValue({maxWidth:["none",520],minWidth:[0,280],width:[`calc(100% - (2 * ${theme.variables.size.spacing.m}))`,"auto"],bottom:[theme.variables.size.spacing.m,theme.variables.size.spacing.l]})}}),StyledIconContainer=styled("div",{target:"e2cd6ok1",label:"StyledIconContainer"})(()=>useResponsiveValue({display:["none","block"]})),DEFAULT_ICONS_BY_TYPE={info:"info",success:"check",error:"alert-triangle",neutral:"info"},TYPE_TO_SUB_THEME_NAMES={info:"info",success:"success",error:"error",neutral:"dimmed"},AUTO_DISMISS_DURATION={none:0,s:5e3,m:1e4,l:15e3};export function Toast({type="info",iconName=DEFAULT_ICONS_BY_TYPE[type],isVisible,message,portalContainer,actionButton,autoDismissDuration=actionButton?"m":"s",closeButtonAriaLabel="Dismiss notification",onDismiss,"data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let[isShowing,setIsShowing]=useState(!1),[isHiding,setIsHiding]=useState(!1),[isToastVisible,setIsToastVisible]=useState(!1),toastContext=useContext(ToastContext),timeoutId=useRef(null),id=useId(),autoDismissDurationMs=AUTO_DISMISS_DURATION[autoDismissDuration],showToast=useCallback(()=>{!isToastVisible&&(setIsShowing(!0),autoDismissDurationMs&&(timeoutId.current=setTimeout(()=>onDismiss("timeout"),autoDismissDurationMs)))},[isToastVisible,autoDismissDurationMs,onDismiss]),hideToast=useCallback(()=>{isToastVisible&&setIsHiding(!0)},[isToastVisible]);if(useEffect(()=>()=>{clearTimeout(timeoutId.current??void 0)},[]),useEffect(()=>{isVisible?showToast():(clearTimeout(timeoutId.current??void 0),hideToast())},[isVisible,showToast,hideToast]),useEffect(()=>{isToastVisible&&toastContext&&toastContext.lastToastId&&toastContext.lastToastId!==id&&onDismiss("replaced")},[isToastVisible,toastContext,id,onDismiss]),!(isToastVisible||isShowing||isHiding))return null;let actionButtonElm=actionButton?React.createElement(Button,{...actionButton,variant:"secondary",size:"s","aria-hidden":"true"}):null;return React.createElement(Portal,{portalContainer:portalContainer},React.createElement(StyledContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Toast",...ariaAttributes,role:"alert",isShowing:isShowing,isHiding:isHiding,onAnimationEnd:()=>{isShowing&&(setIsShowing(!1),setIsToastVisible(!0),toastContext&&toastContext.setLastToastId(id)),isHiding&&(setIsHiding(!1),setIsToastVisible(!1))},onKeyDown:evt=>{"Escape"===evt.key&&onDismiss("close")}},React.createElement(SubThemeProvider,{name:TYPE_TO_SUB_THEME_NAMES[type]},React.createElement(Container,{elevation:3,borderRadius:"s"},React.createElement(Box,{space:"m",vSpace:"s",rSpace:"s"},React.createElement(Inline,{space:"m",alignItems:"spaceBetween",vAlignItems:"top",noWrap:!0},React.createElement(Box,{space:"zero",vSpace:"xxs"},React.createElement(Inline,{space:"s",vAlignItems:"top",noWrap:!0},iconName&&React.createElement(StyledIconContainer,null,React.createElement(Text,{as:"span"},React.createElement(Icon,{name:iconName,"data-e2e-test-id":iconName}))),React.createElement(Text,null,message))),React.createElement(Inline,{space:"xs",vAlignItems:"center",noWrap:!0},actionButtonElm,React.createElement(PictogramButton,{"data-e2e-test-id":"close-button","aria-label":closeButtonAriaLabel,variant:"quaternary",icon:"x",size:"s",onClick:()=>onDismiss("close")}))))))))}

package/build/esm/components/Toast/ToastProvider.d.ts

@@ -1,7 +1,9 @@
 import type { PropsWithChildren, ReactElement } from "react";
 import React from "react";
-export declare const ToastContext: React.Context<{
-    lastToastId: string;
+type ToastContextValue = {
+    lastToastId: string | null;
     setLastToastId: React.Dispatch<string>;
-}>;
+} | null;
+export declare const ToastContext: React.Context<ToastContextValue>;
 export declare function ToastProvider({ children }: PropsWithChildren): ReactElement;
+export {};

package/build/esm/components/Toggletip/BasePopover.js

@@ -1 +1 @@
-import styled from"@emotion/styled";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{getAriaAttributes}from"../../shared/ariaAttributes";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";import{useBreakpoints}from"../../shared/useBreakpoints";import{PopoverContext}from"../Patterns/Popover/PopoverContext";import{Sheet}from"../Sheet/Sheet";import{TooltipContent}from"../Tooltip/TooltipContent";let StyledContainer=styled("div",{target:"e39b55t0",label:"StyledContainer"})(()=>({borderRadius:"inherit"})),FocusTrapContent=React.forwardRef(({children},ref)=>React.createElement(StyledContainer,{ref:ref},children)),VisibilityChangeReason={triggerClick:"triggerClick",outsideClick:"outsideClick"};function getAriaPopupType(role){let popupType=String(role);return(role||(popupType="true"),"alertdialog"===role)?"dialog":popupType}export function BasePopover({placement="auto",content,children,contentPadding="m",maxWidth,externalTriggerRef,portalContainer,name="Popover",isVisible:isPopoverVisible,dismissOnOutsideClick=!0,retainOnOutsideClick,"data-e2e-test-id":dataE2eTestId,subTheme,defaultVerticalPlacement,onVisibilityChange,disableInitialFocus=!1,disableReturnFocusToTrigger=!1,renderAsSheetOnMobile=!1,forceSheetLayout=!1,role,sheetProps,...restContentProps}){let tooltipId=useMemo(()=>`DS${name}_${Math.floor(Date.now()*Math.random())}`,[name]),[isVisible,setVisible]=useState(isPopoverVisible),{isMobileInPortrait,isMobileInLandscape}=useBreakpoints(),internalTriggerRef=useRef(null),triggerRef=externalTriggerRef||internalTriggerRef,isOutsideClickOnTrigger=useRef(!1),ariaAttributes=getAriaAttributes(restContentProps),popoverContextValue=useMemo(()=>({isWithinPopover:!0,portalContainer}),[portalContainer]),contentWithProvider=React.createElement(PopoverContext.Provider,{value:popoverContextValue},content),toggleVisibility=useCallback((status,reason)=>{setVisible(status),onVisibilityChange&&onVisibilityChange(status,reason)},[onVisibilityChange]),handleTriggerClick=useCallback(()=>{isOutsideClickOnTrigger.current?isOutsideClickOnTrigger.current=!1:toggleVisibility(!isVisible,VisibilityChangeReason.triggerClick)},[toggleVisibility,isVisible]),handleClickOutsideDeactivates=useCallback(evt=>!retainOnOutsideClick?.(evt)&&(triggerRef.current&&triggerRef.current.contains(evt.target)&&(isOutsideClickOnTrigger.current=!0),!0),[triggerRef,isOutsideClickOnTrigger,retainOnOutsideClick]),handlePostDeactivate=useCallback(()=>{toggleVisibility(!1,isOutsideClickOnTrigger.current?VisibilityChangeReason.triggerClick:VisibilityChangeReason.outsideClick)},[toggleVisibility]);useEffect(()=>{setVisible(isPopoverVisible)},[isPopoverVisible]),useEffect(()=>{let trigger=triggerRef.current;if(trigger)return trigger.addEventListener("click",handleTriggerClick),()=>{trigger.removeEventListener("click",handleTriggerClick)}},[handleTriggerClick,triggerRef]),useEffect(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current,triggerTabIndex=trigger.getAttribute("tabindex");trigger.setAttribute("tabindex",triggerTabIndex??"0")}},[externalTriggerRef,children]),useEffect(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current;trigger.setAttribute("aria-haspopup",getAriaPopupType(role)),trigger.setAttribute("aria-expanded",String(!!isVisible)),isVisible?trigger.setAttribute("aria-controls",tooltipId):trigger.removeAttribute("aria-controls")}},[externalTriggerRef,children,role,tooltipId,isVisible]);let triggerElm=children?React.cloneElement(children,{ref:triggerRef,"aria-expanded":!!isVisible,...isVisible&&{"aria-controls":tooltipId},tabIndex:children.props.tabIndex??0,"aria-haspopup":getAriaPopupType(role)}):null;if(forceSheetLayout||renderAsSheetOnMobile&&(isMobileInPortrait||isMobileInLandscape)){let sheetElm=React.createElement(Sheet,{id:tooltipId,isVisible:isVisible,portalContainer:portalContainer,dismissOnOutsideClick:dismissOnOutsideClick,disableInitialFocus:disableInitialFocus,disableReturnFocusToTrigger:disableReturnFocusToTrigger,onClose:handlePostDeactivate,onClickOutsideDeactivates:handleClickOutsideDeactivates,role:role,...sheetProps??{},...ariaAttributes},contentWithProvider);return React.createElement(React.Fragment,null,triggerElm,sheetElm)}let contentElm=React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{clickOutsideDeactivates:dismissOnOutsideClick&&handleClickOutsideDeactivates,allowOutsideClick:!0,escapeDeactivates:!0,fallbackFocus:`#${tooltipId}`,onPostDeactivate:handlePostDeactivate,preventScroll:!0,initialFocus:()=>!disableInitialFocus,returnFocusOnDeactivate:!disableReturnFocusToTrigger}},React.createElement(FocusTrapContent,null,contentWithProvider)),tooltipElm=React.createElement(TooltipContent,{...restContentProps,role:role,defaultVerticalPlacement:defaultVerticalPlacement,dataDSId:name,content:contentElm,contentPadding:contentPadding,maxWidth:maxWidth,placement:placement,portalContainer:portalContainer,dataE2eTestId:dataE2eTestId,subTheme:subTheme,isVisible:isVisible,tooltipId:tooltipId,triggerRef:triggerRef,isHiddenOnInvisibleTrigger:!0});return React.createElement(React.Fragment,null,triggerElm,tooltipElm)}
+import styled from"@emotion/styled";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{getAriaAttributes}from"../../shared/ariaAttributes";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";import{useBreakpoints}from"../../shared/useBreakpoints";import{PopoverContext}from"../Patterns/Popover/PopoverContext";import{Sheet}from"../Sheet/Sheet";import{TooltipContent}from"../Tooltip/TooltipContent";let StyledContainer=styled("div",{target:"e1bmyswc0",label:"StyledContainer"})(()=>({borderRadius:"inherit"})),FocusTrapContent=React.forwardRef(({children},ref)=>React.createElement(StyledContainer,{ref:ref},children)),VisibilityChangeReason={triggerClick:"triggerClick",outsideClick:"outsideClick"};function getAriaPopupType(role){let popupType=String(role);return(role||(popupType="true"),"alertdialog"===role)?"dialog":popupType}export function BasePopover({placement="auto",content,children,contentPadding="m",maxWidth,externalTriggerRef,portalContainer,name="Popover",isVisible:isPopoverVisible,dismissOnOutsideClick=!0,retainOnOutsideClick,"data-e2e-test-id":dataE2eTestId,subTheme,defaultVerticalPlacement,onVisibilityChange,disableInitialFocus=!1,disableReturnFocusToTrigger=!1,renderAsSheetOnMobile=!1,forceSheetLayout=!1,role,sheetProps,...restContentProps}){let tooltipId=useMemo(()=>`DS${name}_${Math.floor(Date.now()*Math.random())}`,[name]),[isVisible,setVisible]=useState(isPopoverVisible),{isMobileInPortrait,isMobileInLandscape}=useBreakpoints(),internalTriggerRef=useRef(null),triggerRef=externalTriggerRef||internalTriggerRef,isOutsideClickOnTrigger=useRef(!1),ariaAttributes=getAriaAttributes(restContentProps),popoverContextValue=useMemo(()=>({isWithinPopover:!0,portalContainer}),[portalContainer]),contentWithProvider=React.createElement(PopoverContext.Provider,{value:popoverContextValue},content),toggleVisibility=useCallback((status,reason)=>{setVisible(status),onVisibilityChange&&onVisibilityChange(status,reason)},[onVisibilityChange]),handleTriggerClick=useCallback(()=>{isOutsideClickOnTrigger.current?isOutsideClickOnTrigger.current=!1:toggleVisibility(!isVisible,VisibilityChangeReason.triggerClick)},[toggleVisibility,isVisible]),handleClickOutsideDeactivates=useCallback(evt=>!retainOnOutsideClick?.(evt)&&(triggerRef.current&&triggerRef.current.contains(evt.target)&&(isOutsideClickOnTrigger.current=!0),!0),[triggerRef,isOutsideClickOnTrigger,retainOnOutsideClick]),handlePostDeactivate=useCallback(()=>{toggleVisibility(!1,isOutsideClickOnTrigger.current?VisibilityChangeReason.triggerClick:VisibilityChangeReason.outsideClick)},[toggleVisibility]);useEffect(()=>{setVisible(isPopoverVisible)},[isPopoverVisible]),useEffect(()=>{let trigger=triggerRef.current;if(trigger)return trigger.addEventListener("click",handleTriggerClick),()=>{trigger.removeEventListener("click",handleTriggerClick)}},[handleTriggerClick,triggerRef]),useEffect(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current,triggerTabIndex=trigger.getAttribute("tabindex");trigger.setAttribute("tabindex",triggerTabIndex??"0")}},[externalTriggerRef,children]),useEffect(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current;trigger.setAttribute("aria-haspopup",getAriaPopupType(role)),trigger.setAttribute("aria-expanded",String(!!isVisible)),isVisible?trigger.setAttribute("aria-controls",tooltipId):trigger.removeAttribute("aria-controls")}},[externalTriggerRef,children,role,tooltipId,isVisible]);let triggerElm=children?React.cloneElement(children,{ref:triggerRef,"aria-expanded":!!isVisible,...isVisible&&{"aria-controls":tooltipId},tabIndex:children.props.tabIndex??0,"aria-haspopup":getAriaPopupType(role)}):null;if(forceSheetLayout||renderAsSheetOnMobile&&(isMobileInPortrait||isMobileInLandscape)){let sheetElm=React.createElement(Sheet,{id:tooltipId,isVisible:!!isVisible,portalContainer:portalContainer??void 0,dismissOnOutsideClick:dismissOnOutsideClick,disableInitialFocus:disableInitialFocus,disableReturnFocusToTrigger:disableReturnFocusToTrigger,onClose:handlePostDeactivate,onClickOutsideDeactivates:handleClickOutsideDeactivates,role:role,...sheetProps??{},...ariaAttributes},contentWithProvider);return React.createElement(React.Fragment,null,triggerElm,sheetElm)}let contentElm=React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{clickOutsideDeactivates:dismissOnOutsideClick&&handleClickOutsideDeactivates,allowOutsideClick:!0,escapeDeactivates:!0,fallbackFocus:`#${tooltipId}`,onPostDeactivate:handlePostDeactivate,preventScroll:!0,initialFocus:()=>!disableInitialFocus,returnFocusOnDeactivate:!disableReturnFocusToTrigger}},React.createElement(FocusTrapContent,null,contentWithProvider)),tooltipElm=React.createElement(TooltipContent,{...restContentProps,role:role,defaultVerticalPlacement:defaultVerticalPlacement,dataDSId:name,content:contentElm,contentPadding:contentPadding,maxWidth:maxWidth,placement:placement,portalContainer:portalContainer,dataE2eTestId:dataE2eTestId,subTheme:subTheme,isVisible:isVisible,tooltipId:tooltipId,triggerRef:triggerRef,isHiddenOnInvisibleTrigger:!0});return React.createElement(React.Fragment,null,triggerElm,tooltipElm)}

package/build/esm/components/Tooltip/TooltipContent.d.ts

@@ -52,4 +52,4 @@ export type TooltipContentProps = {
     privateProps?: TooltipPrivateProps;
 } & Pick<PortalProps, "portalContainer"> & AriaAttributes;
 /** This component is used to display the overlay for both Toggletip and Tooltip components */
-export declare function TooltipContent({ placement, content, tooltipId, triggerRef, portalContainer, dataE2eTestId, dataDSId, isVisible, "aria-hidden": ariaHidden, role, tabIndex, contentPadding, maxWidth, subTheme, defaultVerticalPlacement, hideArrow, isHiddenOnInvisibleTrigger, onTooltipPointerEnter, onTooltipPointerLeave, onOverflowViewport, privateProps, ...ariaAttributes }: TooltipContentProps): React.ReactElement;
+export declare function TooltipContent({ placement, content, tooltipId, triggerRef, portalContainer, dataE2eTestId, dataDSId, isVisible, "aria-hidden": ariaHidden, role, tabIndex, contentPadding, maxWidth, subTheme, defaultVerticalPlacement, hideArrow, isHiddenOnInvisibleTrigger, onTooltipPointerEnter, onTooltipPointerLeave, onOverflowViewport, privateProps, ...ariaAttributes }: TooltipContentProps): React.ReactElement | null;

package/build/esm/components/Tooltip/TooltipContent.js

@@ -1 +1 @@
-import{keyframes}from"@emotion/react";import styled from"@emotion/styled";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Portal,usePortalChildZIndex}from"../Portal/Portal";import{SubThemeProvider}from"../SubThemeProvider/SubThemeProvider";import{useFloatingPosition}from"../Utilities/FloatingPosition/useFloatingPosition";import{FloatingPositionedContext}from"./FloatingPositionedContext";import{ANIMATION_DISTANCE,ARROW_SIZE,ARROW_SIZE_BIG,createOverflowViewportReporter,DISTANCE_FROM_TRIGGER,getPlacementSide,getTooltipOffsetOptions,SIDE_PLACEMENT_SIDE,sidePlacementOffset,toFloatingAnchor,toFloatingPlacement}from"./utils";let StyledContainer=styled("div",{target:"e1l7l62c0",label:"StyledContainer"})(({theme,side,maxWidth,contentPadding,subTheme,isHidden,isSidePlacement})=>{let zIndex=usePortalChildZIndex(theme.variables.zIndex.tooltip),animationDistance="top"===side?`${-ANIMATION_DISTANCE}px`:`${ANIMATION_DISTANCE}px`,animation=keyframes({from:{opacity:theme.variables.opacity.hidden,...!isSidePlacement&&{transform:`translateY(${animationDistance})`}},to:{opacity:theme.variables.opacity.visible,...!isSidePlacement&&{transform:"translateY(0)"}}}),contentPaddingMap={s:theme.variables.size.spacing.xxs,m:theme.variables.size.spacing.s},invertedSubThemeStyles={padding:`${theme.variables.size.spacing.xs} ${theme.variables.size.spacing.s}`,...contentPadding&&{padding:contentPaddingMap[contentPadding]}};return{zIndex,opacity:theme.variables.opacity.hidden,animation:`200ms ease-out forwards ${animation}`,maxWidth,width:"max-content",boxSizing:"border-box",backgroundColor:subTheme?theme.values.color.background.primary.default:theme.values.color.background.elevated.default,borderRadius:subTheme?theme.variables.size.borderRadius.xs:theme.variables.size.borderRadius.s,...isHidden&&{visibility:"hidden"},...!!subTheme&&invertedSubThemeStyles,...!subTheme&&{":after":{content:'" "',position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none",borderRadius:"inherit",boxShadow:theme.values.elevation[3]}}}}),StyledArrow=styled("div",{target:"e1l7l62c1",label:"StyledArrow"})(({theme,subTheme,side,size=ARROW_SIZE,arrowOffsetLeft})=>{let adjustmentForShadow=+!subTheme,arrowContainerHeight=size+DISTANCE_FROM_TRIGGER,arrowSideLength=Math.sqrt(size**2+(size+adjustmentForShadow)**2);return{position:"absolute",left:arrowOffsetLeft,width:40,height:arrowContainerHeight,zIndex:1,overflow:"hidden",..."top"===side&&{top:`calc(100% - ${adjustmentForShadow}px)`},..."bottom"===side&&{top:`-${arrowContainerHeight-adjustmentForShadow}px`},"&::after":{content:'" "',position:"absolute",top:"top"===side?0:"100%",left:"50%",width:arrowSideLength,height:arrowSideLength,backgroundColor:subTheme?theme.values.color.background.primary.default:theme.values.color.background.elevated.default,transform:"translate(-50%, -50%) rotate(45deg)",...!subTheme&&{boxShadow:theme.values.elevation[3]}}}}),lastTooltipHideTimestamp=0;export function TooltipContent({placement="auto",content,tooltipId,triggerRef,portalContainer,dataE2eTestId,dataDSId,isVisible,"aria-hidden":ariaHidden,role,tabIndex,contentPadding,maxWidth=224,subTheme,defaultVerticalPlacement,hideArrow=!1,isHiddenOnInvisibleTrigger=!1,onTooltipPointerEnter,onTooltipPointerLeave,onOverflowViewport,privateProps,...ariaAttributes}){let animationDuration,[isHidden,setIsHidden]=useState(!1),arrowRef=useRef(null),isOverflowCallbackCalledRef=useRef(!1),{placement:sidePlacement,offset:sideOffset=sidePlacementOffset,maxWidth:privateMaxWidth}=privateProps??{},arrowSize=useMemo(()=>hideArrow?0:subTheme?ARROW_SIZE:ARROW_SIZE_BIG,[subTheme,hideArrow]),handleViewportOverflow=useCallback((triggerRect,tooltipRect,viewportHeight)=>{isOverflowCallbackCalledRef.current||(onOverflowViewport?.(triggerRect,tooltipRect,viewportHeight),isOverflowCallbackCalledRef.current=!0)},[onOverflowViewport,isOverflowCallbackCalledRef]),overflowMiddleware=useMemo(()=>"auto"===placement?[createOverflowViewportReporter(handleViewportOverflow)]:void 0,[placement,handleViewportOverflow]),{placement:preferredPlacement,fallbackPlacements}=useMemo(()=>toFloatingPlacement({placement,defaultVerticalPlacement,sidePlacement}),[placement,defaultVerticalPlacement,sidePlacement]),offset=useMemo(()=>getTooltipOffsetOptions({arrowSize,sideOffset}),[arrowSize,sideOffset]),anchorRef=useRef(null),anchorSourceRef=useRef(null);anchorSourceRef.current!==triggerRef.current&&(anchorSourceRef.current=triggerRef.current,anchorRef.current=toFloatingAnchor(triggerRef.current));let{setFloating,floatingStyles,placement:resolvedPlacement,isPositioned,middlewareData}=useFloatingPosition({anchorRef,placement:preferredPlacement,offset,flip:{fallbackPlacements},arrowRef:hideArrow?void 0:arrowRef,disableTransform:!0,trackAnimationFrame:!0,isOpen:!!isVisible,extraMiddleware:overflowMiddleware});if(useEffect(()=>{isVisible||(lastTooltipHideTimestamp=Date.now())},[isVisible]),useEffect(()=>{isOverflowCallbackCalledRef.current=!1},[isVisible,isOverflowCallbackCalledRef]),useEffect(()=>{let observer;return isHiddenOnInvisibleTrigger&&triggerRef.current&&isVisible&&"undefined"!=typeof IntersectionObserver&&(observer=new IntersectionObserver(entries=>entries.forEach(entry=>{let rect=entry.boundingClientRect;(rect?.width!==0||rect?.height!==0)&&setIsHidden(!entry.isIntersecting)}),{root:null,threshold:.99})).observe(triggerRef.current),()=>{observer&&observer.disconnect()}},[triggerRef,isVisible,isHiddenOnInvisibleTrigger]),!isVisible)return null;let side=getPlacementSide(resolvedPlacement),isSidePlacement=side===SIDE_PLACEMENT_SIDE,tooltipElm=React.createElement(StyledContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":dataDSId,"data-placement":resolvedPlacement,style:{...floatingStyles,animationDuration:(animationDuration="200ms",lastTooltipHideTimestamp&&Date.now()-lastTooltipHideTimestamp<700&&(animationDuration="0ms"),animationDuration)},ref:setFloating,id:tooltipId,role:role,...ariaAttributes,"aria-hidden":ariaHidden,subTheme:subTheme,tabIndex:tabIndex,side:side,maxWidth:privateMaxWidth??maxWidth,contentPadding:contentPadding,isHidden:isHidden||!isPositioned,isSidePlacement:isSidePlacement,onPointerEnter:onTooltipPointerEnter,onPointerLeave:onTooltipPointerLeave},React.createElement(FloatingPositionedContext.Provider,{value:isPositioned},content),!hideArrow&&side!==SIDE_PLACEMENT_SIDE&&React.createElement(StyledArrow,{ref:arrowRef,"data-e2e-test-id":`${dataE2eTestId}_arrow`,subTheme:subTheme,side:side,size:arrowSize,arrowOffsetLeft:middlewareData.arrow?.x})),wrapperElm=subTheme?React.createElement(SubThemeProvider,{name:subTheme},tooltipElm):tooltipElm;return React.createElement(Portal,{portalContainer:portalContainer},wrapperElm)}
+import{keyframes}from"@emotion/react";import styled from"@emotion/styled";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Portal,usePortalChildZIndex}from"../Portal/Portal";import{SubThemeProvider}from"../SubThemeProvider/SubThemeProvider";import{useFloatingPosition}from"../Utilities/FloatingPosition/useFloatingPosition";import{FloatingPositionedContext}from"./FloatingPositionedContext";import{ANIMATION_DISTANCE,ARROW_SIZE,ARROW_SIZE_BIG,createOverflowViewportReporter,DISTANCE_FROM_TRIGGER,getPlacementSide,getTooltipOffsetOptions,SIDE_PLACEMENT_SIDE,sidePlacementOffset,toFloatingAnchor,toFloatingPlacement}from"./utils";let StyledContainer=styled("div",{target:"emzgnl30",label:"StyledContainer"})(({theme,side,maxWidth,contentPadding,subTheme,isHidden,isSidePlacement})=>{let zIndex=usePortalChildZIndex(theme.variables.zIndex.tooltip),animationDistance="top"===side?`${-ANIMATION_DISTANCE}px`:`${ANIMATION_DISTANCE}px`,animation=keyframes({from:{opacity:theme.variables.opacity.hidden,...!isSidePlacement&&{transform:`translateY(${animationDistance})`}},to:{opacity:theme.variables.opacity.visible,...!isSidePlacement&&{transform:"translateY(0)"}}}),contentPaddingMap={s:theme.variables.size.spacing.xxs,m:theme.variables.size.spacing.s},invertedSubThemeStyles={padding:`${theme.variables.size.spacing.xs} ${theme.variables.size.spacing.s}`,...contentPadding&&{padding:contentPaddingMap[contentPadding]}};return{zIndex,opacity:theme.variables.opacity.hidden,animation:`200ms ease-out forwards ${animation}`,maxWidth,width:"max-content",boxSizing:"border-box",backgroundColor:subTheme?theme.values.color.background.primary.default:theme.values.color.background.elevated.default,borderRadius:subTheme?theme.variables.size.borderRadius.xs:theme.variables.size.borderRadius.s,...isHidden&&{visibility:"hidden"},...!!subTheme&&invertedSubThemeStyles,...!subTheme&&{":after":{content:'" "',position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none",borderRadius:"inherit",boxShadow:theme.values.elevation[3]}}}}),StyledArrow=styled("div",{target:"emzgnl31",label:"StyledArrow"})(({theme,subTheme,side,size=ARROW_SIZE,arrowOffsetLeft})=>{let adjustmentForShadow=+!subTheme,arrowContainerHeight=size+DISTANCE_FROM_TRIGGER,arrowSideLength=Math.sqrt(size**2+(size+adjustmentForShadow)**2);return{position:"absolute",left:arrowOffsetLeft,width:40,height:arrowContainerHeight,zIndex:1,overflow:"hidden",..."top"===side&&{top:`calc(100% - ${adjustmentForShadow}px)`},..."bottom"===side&&{top:`-${arrowContainerHeight-adjustmentForShadow}px`},"&::after":{content:'" "',position:"absolute",top:"top"===side?0:"100%",left:"50%",width:arrowSideLength,height:arrowSideLength,backgroundColor:subTheme?theme.values.color.background.primary.default:theme.values.color.background.elevated.default,transform:"translate(-50%, -50%) rotate(45deg)",...!subTheme&&{boxShadow:theme.values.elevation[3]}}}}),lastTooltipHideTimestamp=0;export function TooltipContent({placement="auto",content,tooltipId,triggerRef,portalContainer,dataE2eTestId,dataDSId,isVisible,"aria-hidden":ariaHidden,role,tabIndex,contentPadding,maxWidth=224,subTheme,defaultVerticalPlacement,hideArrow=!1,isHiddenOnInvisibleTrigger=!1,onTooltipPointerEnter,onTooltipPointerLeave,onOverflowViewport,privateProps,...ariaAttributes}){let animationDuration,[isHidden,setIsHidden]=useState(!1),arrowRef=useRef(null),isOverflowCallbackCalledRef=useRef(!1),{placement:sidePlacement,offset:sideOffset=sidePlacementOffset,maxWidth:privateMaxWidth}=privateProps??{},arrowSize=useMemo(()=>hideArrow?0:subTheme?ARROW_SIZE:ARROW_SIZE_BIG,[subTheme,hideArrow]),handleViewportOverflow=useCallback((triggerRect,tooltipRect,viewportHeight)=>{isOverflowCallbackCalledRef.current||(onOverflowViewport?.(triggerRect,tooltipRect,viewportHeight),isOverflowCallbackCalledRef.current=!0)},[onOverflowViewport,isOverflowCallbackCalledRef]),overflowMiddleware=useMemo(()=>"auto"===placement?[createOverflowViewportReporter(handleViewportOverflow)]:void 0,[placement,handleViewportOverflow]),{placement:preferredPlacement,fallbackPlacements}=useMemo(()=>toFloatingPlacement({placement,defaultVerticalPlacement,sidePlacement}),[placement,defaultVerticalPlacement,sidePlacement]),offset=useMemo(()=>getTooltipOffsetOptions({arrowSize,sideOffset}),[arrowSize,sideOffset]),anchorRef=useRef(null),anchorSourceRef=useRef(null);anchorSourceRef.current!==triggerRef.current&&(anchorSourceRef.current=triggerRef.current,anchorRef.current=toFloatingAnchor(triggerRef.current));let{setFloating,floatingStyles,placement:resolvedPlacement,isPositioned,middlewareData}=useFloatingPosition({anchorRef,placement:preferredPlacement,offset,flip:{fallbackPlacements},arrowRef:hideArrow?void 0:arrowRef,disableTransform:!0,trackAnimationFrame:!0,isOpen:!!isVisible,extraMiddleware:overflowMiddleware});if(useEffect(()=>{isVisible||(lastTooltipHideTimestamp=Date.now())},[isVisible]),useEffect(()=>{isOverflowCallbackCalledRef.current=!1},[isVisible,isOverflowCallbackCalledRef]),useEffect(()=>{let observer;return isHiddenOnInvisibleTrigger&&triggerRef.current&&isVisible&&"undefined"!=typeof IntersectionObserver&&(observer=new IntersectionObserver(entries=>entries.forEach(entry=>{let rect=entry.boundingClientRect;(rect?.width!==0||rect?.height!==0)&&setIsHidden(!entry.isIntersecting)}),{root:null,threshold:.99})).observe(triggerRef.current),()=>{observer&&observer.disconnect()}},[triggerRef,isVisible,isHiddenOnInvisibleTrigger]),!isVisible)return null;let side=getPlacementSide(resolvedPlacement),isSidePlacement=side===SIDE_PLACEMENT_SIDE,tooltipElm=React.createElement(StyledContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":dataDSId,"data-placement":resolvedPlacement,style:{...floatingStyles,animationDuration:(animationDuration="200ms",lastTooltipHideTimestamp&&Date.now()-lastTooltipHideTimestamp<700&&(animationDuration="0ms"),animationDuration)},ref:setFloating,id:tooltipId,role:role,...ariaAttributes,"aria-hidden":ariaHidden,subTheme:subTheme,tabIndex:tabIndex,side:side,maxWidth:privateMaxWidth??maxWidth,contentPadding:contentPadding,isHidden:isHidden||!isPositioned,isSidePlacement:isSidePlacement,onPointerEnter:onTooltipPointerEnter,onPointerLeave:onTooltipPointerLeave},React.createElement(FloatingPositionedContext.Provider,{value:isPositioned},content),!hideArrow&&side!==SIDE_PLACEMENT_SIDE&&React.createElement(StyledArrow,{ref:arrowRef,"data-e2e-test-id":`${dataE2eTestId}_arrow`,subTheme:subTheme,side:side,size:arrowSize,arrowOffsetLeft:middlewareData.arrow?.x})),wrapperElm=subTheme?React.createElement(SubThemeProvider,{name:subTheme},tooltipElm):tooltipElm;return React.createElement(Portal,{portalContainer:portalContainer},wrapperElm)}

package/build/esm/components/Typography/StyledText/StyledText.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 export type FormattedElementProps = {
     key: string;
-    children: string | React.ReactNode[];
+    children: string | React.ReactNode[] | null;
 };
 export declare const makeStyledJSX: (string: string) => React.ReactNode[] | string | null;
 export type StyledTextProps = {

package/build/esm/components/Typography/StyledText/StyledText.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{Text}from"../Text/Text";let Italic=styled("i",{target:"e52exb50",label:"Italic"})({fontStyle:"italic"}),Bold=styled("b",{target:"e52exb51",label:"Bold"})({fontWeight:"bolder"}),Components={b:({key,children})=>React.createElement(Bold,{key:key},children),i:({key,children})=>React.createElement(Italic,{key:key},children),p:({key,children})=>React.createElement(Text,{key:key,as:"p",color:"primary"},children),small:({key,children})=>React.createElement(Text,{key:key,as:"span",color:"tertiary"},children),sup:({key,children})=>React.createElement("sup",{key:key},children),sub:({key,children})=>React.createElement("sub",{key:key},children)},getNodes=string=>{let closingTagStartIndex,closingTagEndIndex,elementNames=Object.keys(Components).join("|"),elementMatch=RegExp(`<(${elementNames})>.*</\\1>`).exec(string);if(!elementMatch)return null;let elementName=elementMatch[1],openingTagStartIndex=elementMatch.index,openingTagEndIndex=elementMatch.index+elementName.length+2,numberOpenTags=1,elementTagsRegex=RegExp(`(<${elementName}>)|(</${elementName}>)`,"g"),currentTagMatch=elementTagsRegex.exec(string);do if(currentTagMatch.index>openingTagStartIndex&&(currentTagMatch[1]?numberOpenTags+=1:currentTagMatch[2]&&(numberOpenTags-=1,closingTagEndIndex=(closingTagStartIndex=currentTagMatch.index)+currentTagMatch[2].length)),!(currentTagMatch=elementTagsRegex.exec(string)))break;while(numberOpenTags>0);return{elementName,prev:string.slice(0,openingTagStartIndex),node:string.slice(openingTagEndIndex,closingTagStartIndex),next:string.slice(closingTagEndIndex)}};export const makeStyledJSX=string=>{if(!string||string.length<1)return null;let nodes=getNodes(string);if(!nodes)return string;let{elementName,prev,node,next}=nodes;return[prev,Components[elementName]({key:node,children:makeStyledJSX(node)}),makeStyledJSX(next)].filter(i=>null!==i&&""!==i&&!(Array.isArray(i)&&!i.length))};export function StyledText({children,"data-e2e-test-id":dataE2eTestId}){return"string"!=typeof children?children:React.createElement("span",{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"StyledText"},makeStyledJSX(children))}
+import React from"react";import styled from"@emotion/styled";import{Text}from"../Text/Text";let Italic=styled("i",{target:"e839vll0",label:"Italic"})({fontStyle:"italic"}),Bold=styled("b",{target:"e839vll1",label:"Bold"})({fontWeight:"bolder"}),Components={b:({key,children})=>React.createElement(Bold,{key:key},children),i:({key,children})=>React.createElement(Italic,{key:key},children),p:({key,children})=>React.createElement(Text,{key:key,as:"p",color:"primary"},children),small:({key,children})=>React.createElement(Text,{key:key,as:"span",color:"tertiary"},children),sup:({key,children})=>React.createElement("sup",{key:key},children),sub:({key,children})=>React.createElement("sub",{key:key},children)},getNodes=string=>{let closingTagStartIndex,closingTagEndIndex,elementNames=Object.keys(Components).join("|"),elementMatch=RegExp(`<(${elementNames})>.*</\\1>`).exec(string);if(!elementMatch)return null;let elementName=elementMatch[1],openingTagStartIndex=elementMatch.index,openingTagEndIndex=elementMatch.index+elementName.length+2,numberOpenTags=1,elementTagsRegex=RegExp(`(<${elementName}>)|(</${elementName}>)`,"g"),currentTagMatch=elementTagsRegex.exec(string);for(;currentTagMatch&&(currentTagMatch.index>openingTagStartIndex&&(currentTagMatch[1]?numberOpenTags+=1:currentTagMatch[2]&&(numberOpenTags-=1,closingTagEndIndex=(closingTagStartIndex=currentTagMatch.index)+currentTagMatch[2].length)),currentTagMatch=elementTagsRegex.exec(string),!(numberOpenTags<=0)););return{elementName,prev:string.slice(0,openingTagStartIndex),node:string.slice(openingTagEndIndex,closingTagStartIndex),next:string.slice(closingTagEndIndex)}};export const makeStyledJSX=string=>{if(!string||string.length<1)return null;let nodes=getNodes(string);if(!nodes)return string;let{elementName,prev,node,next}=nodes;return[prev,Components[elementName]({key:node,children:makeStyledJSX(node)}),makeStyledJSX(next)].filter(i=>null!==i&&""!==i&&!(Array.isArray(i)&&!i.length))};export function StyledText({children,"data-e2e-test-id":dataE2eTestId}){return"string"!=typeof children?children:React.createElement("span",{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"StyledText"},makeStyledJSX(children))}

package/build/esm/components/Typography/Text/Text.d.ts

@@ -19,7 +19,7 @@ export type BaseTextProps = {
     /** @ignore */
     "data-ds-id"?: string;
 };
-export declare const TextContext: React.Context<Pick<BaseTextProps, "color" | "size" | "weight">>;
+export declare const TextContext: React.Context<Pick<BaseTextProps, "color" | "size" | "weight"> | null>;
 export declare const getTextLineHeight: ({ theme, size, }: {
     theme: Theme;
     size: TextSize;

package/build/esm/components/Typography/Text/Text.js

@@ -1 +1 @@
-import React,{createContext,useMemo,forwardRef}from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import{useResponsiveStyles}from"../../../shared/mediaQueries";export const TextContext=createContext(null);export const getTextLineHeight=({theme,size})=>({xxs:theme.variables.size.lineHeight.m,xs:theme.variables.size.lineHeight.m,s:theme.variables.size.lineHeight.l,m:theme.variables.size.lineHeight.xl,l:theme.variables.size.lineHeight.xl})[size];export const getTextFontSize=({theme,size})=>theme.variables.size.font[size];let StyledText=styled("p",{shouldForwardProp:prop=>isPropValid(prop)&&"color"!==prop&&"transform"!==prop,target:"erh4t6l0",label:"StyledText"})(({theme,align,weight,size,transform,hyphens,overflowWrap,color,userSelect,variant})=>({fontFamily:theme.variables.fontFamily.lato,margin:0,textTransform:transform,textAlign:align,fontWeight:theme.variables.weight[weight],color:theme.values.color.text[color]?.default??theme.values.color.text.primary.default,...userSelect&&{userSelect},...variant&&{color:theme.values.color.text[variant].default,..."primary"===variant&&{color:theme.values.color.text.accent.default},..."secondary"===variant&&{color:theme.values.color.text.primary.default}},fontSize:getTextFontSize({theme,size}),lineHeight:getTextLineHeight({theme,size}),...useResponsiveStyles({hyphens:[hyphens,{none:"none",auto:"auto",manual:"manual"}]}),overflowWrap}));export const Text=forwardRef(({size="m",weight="normal",transform="none",as="p",color:colorProp="primary",align="left",hyphens="none",overflowWrap="normal",variant,userSelect,"data-e2e-test-id":dataE2eTestId,children,...rest},ref)=>{let color=colorProp;variant&&(color="primary"===variant?"accent":"secondary"===variant?"primary":variant);let contextValues=useMemo(()=>({color,size,weight}),[color,size,weight]);return React.createElement(StyledText,{ref:ref,variant:variant,size:size,weight:weight,transform:transform,as:as,color:color,align:align,hyphens:hyphens,overflowWrap:overflowWrap,userSelect:userSelect,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Text",...rest},React.createElement(TextContext.Provider,{value:contextValues},children))});
+import React,{createContext,useMemo,forwardRef}from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import{useResponsiveStyles}from"../../../shared/mediaQueries";export const TextContext=createContext(null);export const getTextLineHeight=({theme,size})=>({xxs:theme.variables.size.lineHeight.m,xs:theme.variables.size.lineHeight.m,s:theme.variables.size.lineHeight.l,m:theme.variables.size.lineHeight.xl,l:theme.variables.size.lineHeight.xl})[size];export const getTextFontSize=({theme,size})=>theme.variables.size.font[size];let StyledText=styled("p",{shouldForwardProp:prop=>isPropValid(prop)&&"color"!==prop&&"transform"!==prop,target:"enx0zg50",label:"StyledText"})(({theme,align,weight="normal",size="m",transform,hyphens,overflowWrap,color="primary",userSelect,variant})=>({fontFamily:theme.variables.fontFamily.lato,margin:0,textTransform:transform,textAlign:align,fontWeight:theme.variables.weight[weight],color:theme.values.color.text[color]?.default??theme.values.color.text.primary.default,...userSelect&&{userSelect},...variant&&{color:theme.values.color.text[variant].default,..."primary"===variant&&{color:theme.values.color.text.accent.default},..."secondary"===variant&&{color:theme.values.color.text.primary.default}},fontSize:getTextFontSize({theme,size}),lineHeight:getTextLineHeight({theme,size}),...useResponsiveStyles({hyphens:[hyphens,{none:"none",auto:"auto",manual:"manual"}]}),overflowWrap}));export const Text=forwardRef(({size="m",weight="normal",transform="none",as="p",color:colorProp="primary",align="left",hyphens="none",overflowWrap="normal",variant,userSelect,"data-e2e-test-id":dataE2eTestId,children,...rest},ref)=>{let color=colorProp;variant&&(color="primary"===variant?"accent":"secondary"===variant?"primary":variant);let contextValues=useMemo(()=>({color,size,weight}),[color,size,weight]);return React.createElement(StyledText,{ref:ref,variant:variant,size:size,weight:weight,transform:transform,as:as,color:color,align:align,hyphens:hyphens,overflowWrap:overflowWrap,userSelect:userSelect,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Text",...rest},React.createElement(TextContext.Provider,{value:contextValues},children))});

package/build/esm/components/Typography/Text/TextSkeleton.js

@@ -1 +1 @@
-import React from"react";import{useTheme}from"@emotion/react";import styled from"@emotion/styled";import{Skeleton}from"../../Skeleton/Skeleton";import{getTextLineHeight}from"./Text";import{Stack}from"../../Stack/Stack";import{useResponsiveValue}from"../../../shared/mediaQueries";let StyledSkeletonContainer=styled("div",{target:"edovei40",label:"StyledSkeletonContainer"})(({height,width,inline})=>({display:"flex",alignItems:"center",...inline&&{display:"inline-block"},...useResponsiveValue({width,height})}));export function TextSkeleton({lines,size="m",width="100%",inline=!1,"data-e2e-test-id":dataE2eTestId}){let theme=useTheme(),containerHeight=`calc(${getTextLineHeight({theme,size})} * ${theme.variables.size.font[size]})`;return lines>1?React.createElement(Stack,{space:"zero",fullWidth:!0,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"TextSkeleton"},Array(lines).fill("").map((_elm,index)=>{let lineWidth=index===lines-1?`calc(${width} * 0.75)`:width;return React.createElement(StyledSkeletonContainer,{key:index,height:containerHeight,width:lineWidth},React.createElement(Skeleton,{height:"60%",borderRadius:"xs"}))})):React.createElement(StyledSkeletonContainer,{height:containerHeight,width:width,inline:inline,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"TextSkeleton"},React.createElement(Skeleton,{height:"60%",borderRadius:"xs"}))}
+import React from"react";import{useTheme}from"@emotion/react";import styled from"@emotion/styled";import{Skeleton}from"../../Skeleton/Skeleton";import{getTextLineHeight}from"./Text";import{Stack}from"../../Stack/Stack";import{useResponsiveValue}from"../../../shared/mediaQueries";let StyledSkeletonContainer=styled("div",{target:"e1ipwacj0",label:"StyledSkeletonContainer"})(({height,width,inline})=>({display:"flex",alignItems:"center",...inline&&{display:"inline-block"},...useResponsiveValue({width,height})}));export function TextSkeleton({lines=1,size="m",width="100%",inline=!1,"data-e2e-test-id":dataE2eTestId}){let theme=useTheme(),containerHeight=`calc(${getTextLineHeight({theme,size})} * ${theme.variables.size.font[size]})`;return lines>1?React.createElement(Stack,{space:"zero",fullWidth:!0,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"TextSkeleton"},Array(lines).fill("").map((_elm,index)=>{let lineWidth=index===lines-1?`calc(${width} * 0.75)`:width;return React.createElement(StyledSkeletonContainer,{key:index,height:containerHeight,width:lineWidth},React.createElement(Skeleton,{height:"60%",borderRadius:"xs"}))})):React.createElement(StyledSkeletonContainer,{height:containerHeight,width:width,inline:inline,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"TextSkeleton"},React.createElement(Skeleton,{height:"60%",borderRadius:"xs"}))}

package/build/esm/components/Typography/TextClamped/TextClamped.js

@@ -1 +1 @@
-import React,{forwardRef,useEffect,useRef}from"react";import styled from"@emotion/styled";import{ContentText}from"../../Content/ContentText/ContentText";let StyledContainer=styled("span",{target:"e8z318k0",label:"StyledContainer"})(({lines,expanded,breakAll})=>({display:"-webkit-box",WebkitBoxOrient:"vertical",overflow:"hidden",WebkitLineClamp:expanded?"unset":lines,...breakAll&&{wordBreak:"break-all"}}));export const TextClamped=forwardRef((props,ref)=>{let{lines=1,expanded,children,onExceedsLines,"data-e2e-test-id":dataE2eTestId,privateProps,...textProps}=props,containerRef=useRef(null),lastExceedsStateRef=useRef(null),onExceedsLinesRef=useRef(onExceedsLines);useEffect(()=>{onExceedsLinesRef.current=onExceedsLines});let hasCallback=!!onExceedsLines;return useEffect(()=>{let containerElement=containerRef.current;if(!containerElement||!hasCallback)return;let textLinesRange=document.createRange(),countRenderedLines=element=>(textLinesRange.selectNodeContents(element),textLinesRange.getClientRects().length),resizeObserver=new ResizeObserver(()=>{let currentExceeds=countRenderedLines(containerElement)>lines;currentExceeds!==lastExceedsStateRef.current&&(lastExceedsStateRef.current=currentExceeds,onExceedsLinesRef.current?.(currentExceeds))});return resizeObserver.observe(containerElement),()=>resizeObserver.disconnect()},[containerRef,hasCallback,lines,expanded,children]),React.createElement(ContentText,{ref:ref,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"TextClamped",...textProps},React.createElement(StyledContainer,{ref:containerRef,lines:lines,expanded:expanded,breakAll:privateProps?.breakAll},children))});
+import React,{forwardRef,useEffect,useRef}from"react";import styled from"@emotion/styled";import{ContentText}from"../../Content/ContentText/ContentText";let StyledContainer=styled("span",{target:"eyzubzy0",label:"StyledContainer"})(({lines,expanded,breakAll})=>({display:"-webkit-box",WebkitBoxOrient:"vertical",overflow:"hidden",WebkitLineClamp:expanded?"unset":lines,...breakAll&&{wordBreak:"break-all"}}));export const TextClamped=forwardRef((props,ref)=>{let{lines=1,expanded,children,onExceedsLines,"data-e2e-test-id":dataE2eTestId,privateProps,...textProps}=props,containerRef=useRef(null),lastExceedsStateRef=useRef(null),onExceedsLinesRef=useRef(onExceedsLines);useEffect(()=>{onExceedsLinesRef.current=onExceedsLines});let hasCallback=!!onExceedsLines;return useEffect(()=>{let containerElement=containerRef.current;if(!containerElement||!hasCallback)return;let textLinesRange=document.createRange(),countRenderedLines=element=>(textLinesRange.selectNodeContents(element),textLinesRange.getClientRects().length),resizeObserver=new ResizeObserver(()=>{let currentExceeds=countRenderedLines(containerElement)>lines;currentExceeds!==lastExceedsStateRef.current&&(lastExceedsStateRef.current=currentExceeds,onExceedsLinesRef.current?.(currentExceeds))});return resizeObserver.observe(containerElement),()=>resizeObserver.disconnect()},[containerRef,hasCallback,lines,expanded,children]),React.createElement(ContentText,{ref:ref,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"TextClamped",...textProps},React.createElement(StyledContainer,{ref:containerRef,lines:lines,expanded:expanded,breakAll:privateProps?.breakAll},children))});

package/build/esm/components/UserHighlightTooltip/UserHighlightTooltip.d.ts

@@ -7,4 +7,4 @@ export type UserHighlightTooltipProps = Pick<TooltipContentProps, "content" | "p
     selectedRange?: Range;
     positionAtStart?: boolean;
 };
-export declare function UserHighlightTooltip({ content, contentPadding, placement, maxWidth, portalContainer, "data-e2e-test-id": dataE2eTestId, triggerElements, selectedRange, onVisibilityChange, positionAtStart, ...ariaAttributes }: UserHighlightTooltipProps): React.ReactElement;
+export declare function UserHighlightTooltip({ content, contentPadding, placement, maxWidth, portalContainer, "data-e2e-test-id": dataE2eTestId, triggerElements, selectedRange, onVisibilityChange, positionAtStart, ...ariaAttributes }: UserHighlightTooltipProps): React.ReactElement | null;

package/build/esm/components/UserHighlightTooltip/UserHighlightTooltip.js

@@ -1 +1 @@
-import React,{useCallback,useEffect,useId,useMemo,useRef,useState}from"react";import{TooltipContent}from"../Tooltip/TooltipContent";import{findOverlappingTooltips}from"./-utils.ts/findOverlappingTooltips";import{getTopmostElement}from"./-utils.ts/getTopmostElement";import{TooltipRegistry}from"./-utils.ts/TooltipRegistry";let tooltipRegistry=new TooltipRegistry;export function UserHighlightTooltip({content,contentPadding="s",placement="auto",maxWidth,portalContainer,"data-e2e-test-id":dataE2eTestId,triggerElements,selectedRange,onVisibilityChange,positionAtStart,...ariaAttributes}){let tooltipId=useMemo(()=>`DSUserHighlightTooltip_${Math.floor(Date.now()*Math.random())}`,[]),instanceId=useId(),isTooltipHovered=useRef(!1),showTooltipTimeoutId=useRef(null),hideTooltipTimeoutId=useRef(null),triggerHovered=useRef(!1),rangeRef=useRef(null);useEffect(()=>{if(selectedRange)rangeRef.current=selectedRange;else{let range=document.createRange();if(positionAtStart){let text=triggerElements[0].childNodes[0];range.setStart(text,0),range.setEnd(text,1)}else range.setStart(triggerElements[0],0),range.setEnd(triggerElements[triggerElements.length-1],1);rangeRef.current=range}},[triggerElements,selectedRange,positionAtStart]);let[tooltipVisible,setTooltipVisible]=useState(!1),toggleVisibility=useCallback(status=>{setTooltipVisible(status),onVisibilityChange&&onVisibilityChange(status)},[onVisibilityChange]);useEffect(()=>(tooltipRegistry.set(instanceId,{id:instanceId,triggerElements,setVisible:visible=>{setTooltipVisible(visible),onVisibilityChange&&onVisibilityChange(visible)}}),()=>{tooltipRegistry.delete(instanceId)}),[instanceId,triggerElements,onVisibilityChange]),useEffect(()=>{selectedRange&&toggleVisibility(!0)},[]);let hideTooltipAfterDelay=useCallback(()=>{hideTooltipTimeoutId.current=setTimeout(()=>{triggerHovered.current||isTooltipHovered.current||!tooltipVisible||toggleVisibility(!1)},200)},[toggleVisibility,tooltipVisible]),handleTriggerPointerEnter=useCallback(event=>{triggerHovered.current=!0,clearTimeout(showTooltipTimeoutId.current),showTooltipTimeoutId.current=setTimeout(()=>{if(triggerHovered.current){let overlappingTooltips=findOverlappingTooltips(event?.target||triggerElements[0],instanceId,tooltipRegistry);if(overlappingTooltips.length>0){let allOverlappingElements=[...triggerElements];overlappingTooltips.forEach(tooltip=>{allOverlappingElements.push(...tooltip.triggerElements)});let topmostElement=getTopmostElement(allOverlappingElements,event);!topmostElement||triggerElements.includes(topmostElement)?(overlappingTooltips.forEach(tooltip=>{tooltip.setVisible(!1)}),tooltipVisible||toggleVisibility(!0)):tooltipVisible&&toggleVisibility(!1)}else tooltipVisible||toggleVisibility(!0)}},200)},[toggleVisibility,tooltipVisible,triggerElements,instanceId]),handleTriggerPointerLeave=useCallback(event=>{if(clearTimeout(hideTooltipTimeoutId.current),triggerHovered.current=!1,event&&"clientX"in event&&"clientY"in event)try{let elementUnderPointer=document.elementFromPoint(event.clientX,event.clientY);if(elementUnderPointer){let overlappingTooltips=findOverlappingTooltips(elementUnderPointer,instanceId,tooltipRegistry);if(overlappingTooltips.length>0){let allOverlappingElements=[];overlappingTooltips.forEach(tooltip=>{allOverlappingElements.push(...tooltip.triggerElements)});let topmostElement=getTopmostElement(allOverlappingElements,event);if(topmostElement&&!triggerElements.includes(topmostElement)){toggleVisibility(!1);let enterEvent=new PointerEvent("pointerenter",{bubbles:!0,cancelable:!0,clientX:event.clientX,clientY:event.clientY,pointerId:event.pointerId,pointerType:event.pointerType});topmostElement.dispatchEvent(enterEvent);return}}}}catch{}hideTooltipAfterDelay()},[hideTooltipAfterDelay,instanceId,toggleVisibility,triggerElements]);return(useEffect(()=>()=>{clearTimeout(showTooltipTimeoutId.current),clearTimeout(hideTooltipTimeoutId.current)},[]),useEffect(()=>{let wrappedHandleEnter=event=>{handleTriggerPointerEnter(event)};return triggerElements.forEach(node=>{node.addEventListener("pointerenter",wrappedHandleEnter),node.addEventListener("pointerleave",handleTriggerPointerLeave)}),()=>{triggerElements.forEach(node=>{node.removeEventListener("pointerenter",wrappedHandleEnter),node.removeEventListener("pointerleave",handleTriggerPointerLeave)})}},[handleTriggerPointerEnter,handleTriggerPointerLeave,triggerElements]),useEffect(()=>{triggerElements.forEach(node=>{tooltipVisible?node.setAttribute("aria-describedby",tooltipId):node.removeAttribute("aria-describedby")})},[tooltipId,tooltipVisible,triggerElements]),rangeRef.current)?React.createElement(TooltipContent,{dataDSId:"UserHighlightTooltip",content:content,placement:placement,portalContainer:portalContainer,dataE2eTestId:dataE2eTestId,isVisible:tooltipVisible,tooltipId:tooltipId,triggerRef:rangeRef,role:"tooltip",contentPadding:contentPadding,maxWidth:maxWidth,subTheme:"inverted",onTooltipPointerEnter:()=>{isTooltipHovered.current=!0},onTooltipPointerLeave:()=>{clearTimeout(hideTooltipTimeoutId.current),isTooltipHovered.current=!1,hideTooltipAfterDelay()},...ariaAttributes}):null}
+import React,{useCallback,useEffect,useId,useMemo,useRef,useState}from"react";import{TooltipContent}from"../Tooltip/TooltipContent";import{findOverlappingTooltips}from"./-utils.ts/findOverlappingTooltips";import{getTopmostElement}from"./-utils.ts/getTopmostElement";import{TooltipRegistry}from"./-utils.ts/TooltipRegistry";let tooltipRegistry=new TooltipRegistry;export function UserHighlightTooltip({content,contentPadding="s",placement="auto",maxWidth,portalContainer,"data-e2e-test-id":dataE2eTestId,triggerElements,selectedRange,onVisibilityChange,positionAtStart,...ariaAttributes}){let tooltipId=useMemo(()=>`DSUserHighlightTooltip_${Math.floor(Date.now()*Math.random())}`,[]),instanceId=useId(),isTooltipHovered=useRef(!1),showTooltipTimeoutId=useRef(null),hideTooltipTimeoutId=useRef(null),triggerHovered=useRef(!1),rangeRef=useRef(null);useEffect(()=>{if(selectedRange)rangeRef.current=selectedRange;else{let range=document.createRange();if(positionAtStart){let text=triggerElements[0].childNodes[0];range.setStart(text,0),range.setEnd(text,1)}else range.setStart(triggerElements[0],0),range.setEnd(triggerElements[triggerElements.length-1],1);rangeRef.current=range}},[triggerElements,selectedRange,positionAtStart]);let[tooltipVisible,setTooltipVisible]=useState(!1),toggleVisibility=useCallback(status=>{setTooltipVisible(status),onVisibilityChange&&onVisibilityChange(status)},[onVisibilityChange]);useEffect(()=>(tooltipRegistry.set(instanceId,{id:instanceId,triggerElements,setVisible:visible=>{setTooltipVisible(visible),onVisibilityChange&&onVisibilityChange(visible)}}),()=>{tooltipRegistry.delete(instanceId)}),[instanceId,triggerElements,onVisibilityChange]),useEffect(()=>{selectedRange&&toggleVisibility(!0)},[]);let hideTooltipAfterDelay=useCallback(()=>{hideTooltipTimeoutId.current=setTimeout(()=>{triggerHovered.current||isTooltipHovered.current||!tooltipVisible||toggleVisibility(!1)},200)},[toggleVisibility,tooltipVisible]),handleTriggerPointerEnter=useCallback(event=>{triggerHovered.current=!0,clearTimeout(showTooltipTimeoutId.current??void 0),showTooltipTimeoutId.current=setTimeout(()=>{if(triggerHovered.current){let overlappingTooltips=findOverlappingTooltips(event?.target||triggerElements[0],instanceId,tooltipRegistry);if(overlappingTooltips.length>0){let allOverlappingElements=[...triggerElements];overlappingTooltips.forEach(tooltip=>{allOverlappingElements.push(...tooltip.triggerElements)});let topmostElement=getTopmostElement(allOverlappingElements,event);!topmostElement||triggerElements.includes(topmostElement)?(overlappingTooltips.forEach(tooltip=>{tooltip.setVisible(!1)}),tooltipVisible||toggleVisibility(!0)):tooltipVisible&&toggleVisibility(!1)}else tooltipVisible||toggleVisibility(!0)}},200)},[toggleVisibility,tooltipVisible,triggerElements,instanceId]),handleTriggerPointerLeave=useCallback(event=>{if(clearTimeout(hideTooltipTimeoutId.current??void 0),triggerHovered.current=!1,event&&"clientX"in event&&"clientY"in event)try{let elementUnderPointer=document.elementFromPoint(event.clientX,event.clientY);if(elementUnderPointer){let overlappingTooltips=findOverlappingTooltips(elementUnderPointer,instanceId,tooltipRegistry);if(overlappingTooltips.length>0){let allOverlappingElements=[];overlappingTooltips.forEach(tooltip=>{allOverlappingElements.push(...tooltip.triggerElements)});let topmostElement=getTopmostElement(allOverlappingElements,event);if(topmostElement&&!triggerElements.includes(topmostElement)){toggleVisibility(!1);let enterEvent=new PointerEvent("pointerenter",{bubbles:!0,cancelable:!0,clientX:event.clientX,clientY:event.clientY,pointerId:event.pointerId,pointerType:event.pointerType});topmostElement.dispatchEvent(enterEvent);return}}}}catch{}hideTooltipAfterDelay()},[hideTooltipAfterDelay,instanceId,toggleVisibility,triggerElements]);return(useEffect(()=>()=>{clearTimeout(showTooltipTimeoutId.current??void 0),clearTimeout(hideTooltipTimeoutId.current??void 0)},[]),useEffect(()=>{let wrappedHandleEnter=event=>{handleTriggerPointerEnter(event)};return triggerElements.forEach(node=>{node.addEventListener("pointerenter",wrappedHandleEnter),node.addEventListener("pointerleave",handleTriggerPointerLeave)}),()=>{triggerElements.forEach(node=>{node.removeEventListener("pointerenter",wrappedHandleEnter),node.removeEventListener("pointerleave",handleTriggerPointerLeave)})}},[handleTriggerPointerEnter,handleTriggerPointerLeave,triggerElements]),useEffect(()=>{triggerElements.forEach(node=>{tooltipVisible?node.setAttribute("aria-describedby",tooltipId):node.removeAttribute("aria-describedby")})},[tooltipId,tooltipVisible,triggerElements]),rangeRef.current)?React.createElement(TooltipContent,{dataDSId:"UserHighlightTooltip",content:content,placement:placement,portalContainer:portalContainer,dataE2eTestId:dataE2eTestId,isVisible:tooltipVisible,tooltipId:tooltipId,triggerRef:rangeRef,role:"tooltip",contentPadding:contentPadding,maxWidth:maxWidth,subTheme:"inverted",onTooltipPointerEnter:()=>{isTooltipHovered.current=!0},onTooltipPointerLeave:()=>{clearTimeout(hideTooltipTimeoutId.current??void 0),isTooltipHovered.current=!1,hideTooltipAfterDelay()},...ariaAttributes}):null}

package/build/esm/components/Utilities/ContainerQuery/ContainerQueryContext.d.ts

@@ -1,2 +1,2 @@
 import type { ContainerQueryBreakpoints } from "../../../shared/mediaQueries";
-export declare const ContainerQueryContext: React.Context<ContainerQueryBreakpoints>;
+export declare const ContainerQueryContext: React.Context<ContainerQueryBreakpoints | undefined>;

package/build/esm/components/Utilities/Expandable/Expandable.js

@@ -1 +1 @@
-import React,{useCallback,useEffect,useState}from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import{useWindow}from"../../../shared/useWindow";let StyledContainer=styled("div",{target:"elbd590",label:"StyledContainer"})(({isExpanded,reduceMotion})=>({display:"grid",gridTemplateRows:"0fr",...!reduceMotion&&{transition:"200ms grid-template-rows cubic-bezier(0.0, 0.0, 0.25, 1.0)"},...isExpanded&&{gridTemplateRows:"1fr"}})),StyledContentContainer=styled("div",{shouldForwardProp:prop=>isPropValid(prop)&&"overflow"!==prop&&"isExpanded"!==prop,target:"elbd591",label:"StyledContentContainer"})(({isExpanded,overflow})=>({overflow:"hidden",...isExpanded&&{overflow}}));export function Expandable({id,isExpanded,children,overflow="visible",reduceMotion=!1,...ariaAttributes}){let[isContentContainerExpanded,setIsContentContainerExpanded]=useState(!!isExpanded),window=useWindow(),isMotionReduced=reduceMotion||window?.matchMedia("(prefers-reduced-motion: reduce)").matches,handleTransitionEnd=useCallback(()=>{isExpanded&&setIsContentContainerExpanded(!0)},[isExpanded]);return useEffect(()=>{if(isMotionReduced)return void setIsContentContainerExpanded(isExpanded);isExpanded||setIsContentContainerExpanded(!1)},[isExpanded,isMotionReduced]),React.createElement(StyledContainer,{onTransitionEnd:handleTransitionEnd,isExpanded:isExpanded,"data-ds-id":"Expandable",id:id,reduceMotion:isMotionReduced,...ariaAttributes},React.createElement(StyledContentContainer,{isExpanded:isContentContainerExpanded,overflow:overflow},children))}
+import React,{useCallback,useEffect,useState}from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import{useWindow}from"../../../shared/useWindow";let StyledContainer=styled("div",{target:"e10cpi5m0",label:"StyledContainer"})(({isExpanded,reduceMotion})=>({display:"grid",gridTemplateRows:"0fr",...!reduceMotion&&{transition:"200ms grid-template-rows cubic-bezier(0.0, 0.0, 0.25, 1.0)"},...isExpanded&&{gridTemplateRows:"1fr"}})),StyledContentContainer=styled("div",{shouldForwardProp:prop=>isPropValid(prop)&&"overflow"!==prop&&"isExpanded"!==prop,target:"e10cpi5m1",label:"StyledContentContainer"})(({isExpanded,overflow})=>({overflow:"hidden",...isExpanded&&{overflow}}));export function Expandable({id,isExpanded,children,overflow="visible",reduceMotion=!1,...ariaAttributes}){let[isContentContainerExpanded,setIsContentContainerExpanded]=useState(!!isExpanded),window=useWindow(),isMotionReduced=reduceMotion||window?.matchMedia("(prefers-reduced-motion: reduce)").matches,handleTransitionEnd=useCallback(()=>{isExpanded&&setIsContentContainerExpanded(!0)},[isExpanded]);return useEffect(()=>{if(isMotionReduced)return void setIsContentContainerExpanded(!!isExpanded);isExpanded||setIsContentContainerExpanded(!1)},[isExpanded,isMotionReduced]),React.createElement(StyledContainer,{onTransitionEnd:handleTransitionEnd,isExpanded:isExpanded,"data-ds-id":"Expandable",id:id,reduceMotion:isMotionReduced,...ariaAttributes},React.createElement(StyledContentContainer,{isExpanded:isContentContainerExpanded,overflow:overflow},children))}

package/build/esm/components/Utilities/FloatingPosition/utils.d.ts

@@ -24,7 +24,7 @@ export declare function viewportToFloatingPlacement(placement: ViewportPlacement
  * Both axes → a corner (`top` + `left` → `"top-start"`); a single axis →
  * centered on the other (`top` alone → `"top"`, `left` alone → `"left"`).
  */
-export declare function axesToViewportPlacement(positionY: "top" | "bottom" | undefined, positionX: "left" | "right" | undefined): ViewportPlacement;
+export declare function axesToViewportPlacement(positionY: "top" | "bottom" | undefined, positionX: "left" | "right" | undefined): ViewportPlacement | undefined;
 /**
  * Builds the (zero-size) reference rect for a viewport spot, in viewport
  * coordinates — used by the virtual element under `strategy: "fixed"`.

package/build/esm/components/VirtualScrollList/VirtualScrollList.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 export type VirtualScrollListProps = {
     "data-e2e-test-id"?: string;
-    id: string;
+    id?: string;
     maxHeight: number;
     /** initial estimate for virtual scrolling calculations, helps estimate how many
      * items fit in the viewport before real measurements.

package/build/esm/components/VirtualScrollList/VirtualScrollList.js

@@ -1 +1 @@
-import styled from"@emotion/styled";import React,{useRef,useReducer,useLayoutEffect,useEffect}from"react";import{VirtualScrollReducer}from"./VirtualScrollListReducer";let StyledContainer=styled("div",{target:"e1727xf20",label:"StyledContainer"})(({maxHeight})=>({overflow:"auto",width:"100%",height:"100%",maxHeight})),StyledScrollableContent=styled("div",{target:"e1727xf21",label:"StyledScrollableContent"})(({maxContentHeight})=>({overflow:"hidden",boxSizing:"border-box",height:maxContentHeight}));export function VirtualScrollList({id,maxHeight,itemHeight,itemAmount,emptyState=()=>null,itemInView,itemTemplate,containerStyle,"data-e2e-test-id":dataE2eTestId,onContentHeightChange,role,...ariaAttributes}){let scrollableContainerRef=useRef(null),viewportRef=useRef(null),adjustedForReflow=useRef(!1),[{scrolledItemCount,amountOfItemsInView,scrolledInPx,maxContentHeight=maxHeight,recommendedScrollPosition},dispatch]=useReducer(VirtualScrollReducer,{});useLayoutEffect(()=>{dispatch({type:"reset",itemHeight,maxHeight,overscan:10}),scrollableContainerRef.current.scrollTop=0},[itemHeight,itemAmount,maxHeight]),useEffect(()=>{dispatch({type:"recommendScrollPosition",scrollTop:scrollableContainerRef.current.scrollTop,itemToBeInView:itemInView})},[itemInView]),useEffect(()=>{null!==recommendedScrollPosition&&(scrollableContainerRef.current.scrollTop=recommendedScrollPosition)},[recommendedScrollPosition]),useLayoutEffect(()=>{viewportRef.current&&dispatch({type:"updateViewport",viewportNode:viewportRef.current,itemAmount})},[itemAmount,scrolledItemCount]),useEffect(()=>{onContentHeightChange?.()},[maxContentHeight,onContentHeightChange]);let itemCountToBeRendered=Math.min(Math.max(0,itemAmount-scrolledItemCount),amountOfItemsInView);return maxContentHeight>maxHeight&&!adjustedForReflow.current&&viewportRef.current&&(setTimeout(()=>{dispatch({type:"updateViewport",viewportNode:viewportRef.current,itemAmount})}),adjustedForReflow.current=!0),React.createElement(StyledContainer,{ref:scrollableContainerRef,maxHeight:maxHeight,style:{maxHeight,...containerStyle},"data-e2e-test-id":dataE2eTestId,"data-ds-id":"VirtualScrollList",onScroll:e=>{dispatch({type:"scroll",scrollTop:e.currentTarget.scrollTop})}},0===itemAmount?emptyState():React.createElement(StyledScrollableContent,{maxContentHeight:maxContentHeight},React.createElement("div",{ref:viewportRef,style:{transform:`translateY(${scrolledInPx}px`},role:role,id:id,...ariaAttributes},!!itemCountToBeRendered&&Array(itemCountToBeRendered).fill(0).map((_,index)=>itemTemplate(scrolledItemCount+index)))))}
+import styled from"@emotion/styled";import React,{useRef,useReducer,useLayoutEffect,useEffect}from"react";import{VirtualScrollReducer}from"./VirtualScrollListReducer";let StyledContainer=styled("div",{target:"e1cwopw60",label:"StyledContainer"})(({maxHeight})=>({overflow:"auto",width:"100%",height:"100%",maxHeight})),StyledScrollableContent=styled("div",{target:"e1cwopw61",label:"StyledScrollableContent"})(({maxContentHeight})=>({overflow:"hidden",boxSizing:"border-box",height:maxContentHeight}));export function VirtualScrollList({id,maxHeight,itemHeight,itemAmount,emptyState=()=>null,itemInView,itemTemplate,containerStyle,"data-e2e-test-id":dataE2eTestId,onContentHeightChange,role,...ariaAttributes}){let scrollableContainerRef=useRef(null),viewportRef=useRef(null),adjustedForReflow=useRef(!1),[{scrolledItemCount=0,amountOfItemsInView=0,scrolledInPx,maxContentHeight=maxHeight,recommendedScrollPosition},dispatch]=useReducer(VirtualScrollReducer,{});useLayoutEffect(()=>{dispatch({type:"reset",itemHeight,maxHeight,overscan:10});let scrollableContainer=scrollableContainerRef.current;scrollableContainer&&(scrollableContainer.scrollTop=0)},[itemHeight,itemAmount,maxHeight]),useEffect(()=>{let scrollableContainer=scrollableContainerRef.current;scrollableContainer&&dispatch({type:"recommendScrollPosition",scrollTop:scrollableContainer.scrollTop,itemToBeInView:itemInView})},[itemInView]),useEffect(()=>{if(null==recommendedScrollPosition)return;let scrollableContainer=scrollableContainerRef.current;scrollableContainer&&(scrollableContainer.scrollTop=recommendedScrollPosition)},[recommendedScrollPosition]),useLayoutEffect(()=>{viewportRef.current&&dispatch({type:"updateViewport",viewportNode:viewportRef.current,itemAmount})},[itemAmount,scrolledItemCount]),useEffect(()=>{onContentHeightChange?.()},[maxContentHeight,onContentHeightChange]);let itemCountToBeRendered=Math.min(Math.max(0,itemAmount-scrolledItemCount),amountOfItemsInView);return maxContentHeight>maxHeight&&!adjustedForReflow.current&&viewportRef.current&&(setTimeout(()=>{let viewportNode=viewportRef.current;viewportNode&&dispatch({type:"updateViewport",viewportNode,itemAmount})}),adjustedForReflow.current=!0),React.createElement(StyledContainer,{ref:scrollableContainerRef,maxHeight:maxHeight,style:{maxHeight,...containerStyle},"data-e2e-test-id":dataE2eTestId,"data-ds-id":"VirtualScrollList",onScroll:e=>{dispatch({type:"scroll",scrollTop:e.currentTarget.scrollTop})}},0===itemAmount?emptyState():React.createElement(StyledScrollableContent,{maxContentHeight:maxContentHeight},React.createElement("div",{ref:viewportRef,style:{transform:`translateY(${scrolledInPx}px`},role:role,id:id,...ariaAttributes},!!itemCountToBeRendered&&Array(itemCountToBeRendered).fill(0).map((_,index)=>itemTemplate(scrolledItemCount+index)))))}

package/build/esm/components/VirtualScrollList/VirtualScrollListReducer.d.ts

@@ -10,10 +10,10 @@ type State = {
     renderFrom?: number;
     scrolledItemCount?: number;
     scrolledInPx?: number;
-    lastItemHeight?: number;
+    lastItemHeight?: number | null;
     amountOfItemsInView?: number;
     maxContentHeight?: number;
-    recommendedScrollPosition?: number;
+    recommendedScrollPosition?: number | null;
 };
 type Action = {
     type: "scroll";

package/build/esm/components/VirtualScrollList/VirtualScrollListReducer.js

@@ -1 +1 @@
-let findClosestOffsetIndex=(arr,val)=>{let start=0,end=arr.length-1,mid=Math.floor((start+end)/2);for(;start<=end&&arr[mid=Math.floor((start+end)/2)].amount!==val;)val<arr[mid].amount?end=mid-1:start=mid+1;return mid},getMaxHeight=(maxAmountOfItems,offsets,lastItemHeight=0)=>{let amountOfOffsets=Math.min(offsets.length,maxAmountOfItems);return(offsets[amountOfOffsets-1]?.amount||0)+lastItemHeight},reduceScroll=(prevState,scrollTop)=>{let{topOffsets,overscan:tolerance}=prevState,scrolledItemCount=Math.max(0,findClosestOffsetIndex(topOffsets,scrollTop)-tolerance/2),scrolledInPx=topOffsets[scrolledItemCount]?.amount||0;return{...prevState,scrolledItemCount,scrolledInPx}},reduceUpdateViewport=(prevState,viewportNode,itemAmount)=>{let{topOffsets=[],scrolledInPx,scrolledItemCount,avgItemHeight,lastItemHeight,maxHeight,overscan:tolerance}=prevState,newTopOffsets=[...topOffsets],updatedLastItemHeight=lastItemHeight;Array.from(viewportNode.children).forEach((child,i)=>{newTopOffsets[i+scrolledItemCount]={amount:scrolledInPx+child.offsetTop,isInterpolated:!1},i+scrolledItemCount!==itemAmount-1||lastItemHeight||(updatedLastItemHeight=child.getBoundingClientRect().height)});let newAvgItemHeight=Math.max(avgItemHeight,viewportNode.getBoundingClientRect().height/(viewportNode.childElementCount||1));for(let i=0;i<itemAmount;i+=1)(!newTopOffsets[i]||newTopOffsets[i].isInterpolated)&&(newTopOffsets[i]={amount:newTopOffsets[i-1].amount+newAvgItemHeight,isInterpolated:!0});let maxContentHeight=getMaxHeight(itemAmount,newTopOffsets,updatedLastItemHeight);return{...prevState,lastItemHeight:updatedLastItemHeight,avgItemHeight:newAvgItemHeight,topOffsets:newTopOffsets,amountOfItemsInView:Math.round(maxHeight/newAvgItemHeight)+tolerance,maxContentHeight}},reduceReset=(prevState,itemHeight,maxHeight,overscan)=>({...prevState,lastItemHeight:null,topOffsets:[{amount:0,isInterpolated:!1}],scrolledInPx:0,scrolledItemCount:0,maxHeight,avgItemHeight:itemHeight,overscan}),reduceRecommendScrollPosition=(prevState,scrollTop,itemToBeInView)=>{let{topOffsets,maxHeight}=prevState;if(!topOffsets)return prevState;let bottomOfTarget=topOffsets[itemToBeInView+1]?.amount,topOfTarget=topOffsets[itemToBeInView]?.amount,recommendedScrollPosition=null;return topOfTarget<scrollTop&&(recommendedScrollPosition=topOfTarget),bottomOfTarget>=scrollTop+maxHeight&&(recommendedScrollPosition=bottomOfTarget-maxHeight),itemToBeInView===topOffsets.length-1&&(recommendedScrollPosition=topOffsets[itemToBeInView].amount),{...prevState,recommendedScrollPosition}};export const VirtualScrollReducer=(prevState,action)=>{switch(action.type){case"reset":return reduceReset(prevState,action.itemHeight,action.maxHeight,action.overscan);case"scroll":return reduceScroll(prevState,action.scrollTop);case"updateViewport":return reduceUpdateViewport(prevState,action.viewportNode,action.itemAmount);case"recommendScrollPosition":return reduceRecommendScrollPosition(prevState,action.scrollTop,action.itemToBeInView);default:throw Error()}};
+let findClosestOffsetIndex=(arr,val)=>{let start=0,end=arr.length-1,mid=Math.floor((start+end)/2);for(;start<=end&&arr[mid=Math.floor((start+end)/2)].amount!==val;)val<arr[mid].amount?end=mid-1:start=mid+1;return mid},getMaxHeight=(maxAmountOfItems,offsets,lastItemHeight)=>{let amountOfOffsets=Math.min(offsets.length,maxAmountOfItems);return(offsets[amountOfOffsets-1]?.amount||0)+(lastItemHeight??0)},reduceScroll=(prevState,scrollTop)=>{let{topOffsets=[],overscan:tolerance=0}=prevState,scrolledItemCount=Math.max(0,findClosestOffsetIndex(topOffsets,scrollTop)-tolerance/2),scrolledInPx=topOffsets[scrolledItemCount]?.amount||0;return{...prevState,scrolledItemCount,scrolledInPx}},reduceUpdateViewport=(prevState,viewportNode,itemAmount)=>{let{topOffsets=[],scrolledInPx=0,scrolledItemCount=0,avgItemHeight=0,lastItemHeight,maxHeight=0,overscan:tolerance=0}=prevState,newTopOffsets=[...topOffsets],updatedLastItemHeight=lastItemHeight;Array.from(viewportNode.children).forEach((child,i)=>{newTopOffsets[i+scrolledItemCount]={amount:scrolledInPx+child.offsetTop,isInterpolated:!1},i+scrolledItemCount!==itemAmount-1||lastItemHeight||(updatedLastItemHeight=child.getBoundingClientRect().height)});let newAvgItemHeight=Math.max(avgItemHeight,viewportNode.getBoundingClientRect().height/(viewportNode.childElementCount||1));for(let i=0;i<itemAmount;i+=1)(!newTopOffsets[i]||newTopOffsets[i].isInterpolated)&&(newTopOffsets[i]={amount:newTopOffsets[i-1].amount+newAvgItemHeight,isInterpolated:!0});let maxContentHeight=getMaxHeight(itemAmount,newTopOffsets,updatedLastItemHeight);return{...prevState,lastItemHeight:updatedLastItemHeight,avgItemHeight:newAvgItemHeight,topOffsets:newTopOffsets,amountOfItemsInView:Math.round(maxHeight/newAvgItemHeight)+tolerance,maxContentHeight}},reduceReset=(prevState,itemHeight,maxHeight,overscan)=>({...prevState,lastItemHeight:null,topOffsets:[{amount:0,isInterpolated:!1}],scrolledInPx:0,scrolledItemCount:0,maxHeight,avgItemHeight:itemHeight,overscan}),reduceRecommendScrollPosition=(prevState,scrollTop,itemToBeInView)=>{let{topOffsets,maxHeight}=prevState;if(!topOffsets||void 0===maxHeight)return prevState;let bottomOfTarget=topOffsets[itemToBeInView+1]?.amount,topOfTarget=topOffsets[itemToBeInView]?.amount,recommendedScrollPosition=null;return topOfTarget<scrollTop&&(recommendedScrollPosition=topOfTarget),bottomOfTarget>=scrollTop+maxHeight&&(recommendedScrollPosition=bottomOfTarget-maxHeight),itemToBeInView===topOffsets.length-1&&(recommendedScrollPosition=topOffsets[itemToBeInView].amount),{...prevState,recommendedScrollPosition}};export const VirtualScrollReducer=(prevState,action)=>{switch(action.type){case"reset":return reduceReset(prevState,action.itemHeight,action.maxHeight,action.overscan);case"scroll":return reduceScroll(prevState,action.scrollTop);case"updateViewport":return reduceUpdateViewport(prevState,action.viewportNode,action.itemAmount);case"recommendScrollPosition":return reduceRecommendScrollPosition(prevState,action.scrollTop,action.itemToBeInView);default:throw Error()}};

package/build/esm/shared/appendId.d.ts

@@ -1 +1 @@
-export declare function appendId(src: string, id: string): string;
+export declare function appendId(src: string | undefined, id: string): string;

package/build/esm/shared/forwardRefPolymorphic.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const forwardRefPolymorphic: <Component>(render: (props: never, ref: never) => React.ReactNode) => Component;

package/build/esm/shared/forwardRefPolymorphic.js

@@ -0,0 +1 @@
+import React from"react";export const forwardRefPolymorphic=render=>React.forwardRef(render);

package/build/esm/shared/intl/translations/de.json

@@ -6,5 +6,11 @@
   "InlineMessage.InfoIcon.AriaLabel": "Info",
   "PromptButtonGroup.OverflowButton.Label": "Weitere",
   "PromptButtonGroup.OverflowButton.AriaLabel": "Weitere Vorschläge anzeigen",
-  "PromptButtonGroup.Popover.AriaLabel": "Prompt-Vorschläge"
+  "PromptButtonGroup.Popover.AriaLabel": "Prompt-Vorschläge",
+  "CatalogCard.DropdownMenu.AriaLabel": "Weitere Optionen",
+  "DropdownMenu.Trigger.AriaLabel": "Weitere Optionen",
+  "EntityTree.ExpandButton.ExpandAriaLabel": "Aufklappen",
+  "EntityTree.ExpandButton.CollapseAriaLabel": "Zuklappen",
+  "SearchInput.ClearButton.AriaLabel": "Suche löschen",
+  "Tag.RemoveButton.AriaLabel": "Entfernen"
 }

package/build/esm/shared/intl/translations/en.json

@@ -6,5 +6,11 @@
   "InlineMessage.InfoIcon.AriaLabel": "Info",
   "PromptButtonGroup.OverflowButton.Label": "More",
   "PromptButtonGroup.OverflowButton.AriaLabel": "Show more suggestions",
-  "PromptButtonGroup.Popover.AriaLabel": "Prompt suggestions"
+  "PromptButtonGroup.Popover.AriaLabel": "Prompt suggestions",
+  "CatalogCard.DropdownMenu.AriaLabel": "More options",
+  "DropdownMenu.Trigger.AriaLabel": "More options",
+  "EntityTree.ExpandButton.ExpandAriaLabel": "Expand",
+  "EntityTree.ExpandButton.CollapseAriaLabel": "Collapse",
+  "SearchInput.ClearButton.AriaLabel": "Clear search",
+  "Tag.RemoveButton.AriaLabel": "Remove"
 }

package/build/esm/shared/mediaQueries.d.ts

@@ -2,8 +2,8 @@ import type { ColumnSizes, HorizontalAlignment, MQ, SpaceSizes, IconSizes, TextA
 export type Breakpoints = [string, string, string];
 export type ContainerQueryBreakpoints = [string, string?, string?];
 type MqProp<T> = [
-    T | MQ<T>,
-    (Record<T extends string ? T : never, string | number> | ((value: T) => string | number))
+    T | MQ<T> | undefined,
+    (Record<T extends string ? T : never, string | number | undefined> | ((value: T) => string | number))
 ];
 type MqRules = Record<string, MqProp<TextAlignment> | MqProp<SpaceSizes> | MqProp<HorizontalAlignment> | MqProp<VerticalAlignment> | MqProp<StackHorizontalAlignment> | MqProp<StackVerticalAlignment> | MqProp<LightboxVerticalAlignment> | MqProp<ColumnSizes> | MqProp<Order> | MqProp<ColumnAlignment> | MqProp<Hyphens> | MqProp<BorderRadius> | MqProp<boolean> | MqProp<IconSizes> | MqProp<ButtonSize> | MqProp<InlineMessageSize>>;
 type EmotionCssPropertyName = string;
@@ -13,7 +13,7 @@ type MqFunc = (rules: MqRules | {
     mq: MqRules;
     cq: MqRules;
 }) => Record<string, EmotionCssValue | EmotionCssDescription>;
-type ResponsiveValueRules = Record<EmotionCssPropertyName, EmotionCssValue[] | EmotionCssValue | MQ<EmotionCssValue>>;
+type ResponsiveValueRules = Record<EmotionCssPropertyName, EmotionCssValue[] | EmotionCssValue | MQ<EmotionCssValue> | undefined>;
 type ResponsiveValueResult = Record<string, EmotionCssValue | EmotionCssDescription>;
 export declare const mq: MqFunc;
 export declare const useResponsiveStyles: MqFunc;

package/build/esm/shared/mixins/Button/getPillStyles.js

@@ -1 +1 @@
-import{getButtonAppearanceReset}from"./getButtonAppearanceReset";import{getDisabledStyles}from"./getDisabledStyles";export function getPillStyles({theme,disabled,leftIcon,variant}){let verticalPadding=theme.variables.size.spacing.xs;return{...getButtonAppearanceReset(),borderRadius:theme.variables.size.borderRadius.full,fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.s,lineHeight:theme.variables.size.lineHeight.xs,fontWeight:theme.variables.weight.bold,cursor:"pointer",userSelect:"none",color:theme.values.color.text.secondary.default,backgroundColor:theme.values.color.background.primary.default,border:`2px solid ${theme.values.color.border.secondary.default}`,padding:`${verticalPadding} ${theme.variables.size.spacing.m}`,...!!leftIcon&&{padding:`${verticalPadding} ${theme.variables.size.spacing.m} ${verticalPadding} ${theme.variables.size.spacing.s}`},..."standalone"===variant&&{color:theme.values.color.text.ai.default},...!disabled&&{"&:hover, &:active":{backgroundColor:theme.values.color.background.transparent.hover,borderColor:theme.values.color.border.secondary.hover}},...disabled&&{...getDisabledStyles({theme})}}}
+import{getButtonAppearanceReset}from"./getButtonAppearanceReset";import{getDisabledStyles}from"./getDisabledStyles";export function getPillStyles({theme,disabled,leftIcon,variant}){let verticalPadding=theme.variables.size.spacing.xs;return{...getButtonAppearanceReset(),borderRadius:theme.variables.size.borderRadius.full,fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.s,lineHeight:theme.variables.size.lineHeight.xs,fontWeight:theme.variables.weight.bold,cursor:"pointer",userSelect:"none",color:theme.values.color.text.secondary.default,backgroundColor:theme.values.color.background.primary.default,border:`2px solid ${theme.values.color.border.secondary.default}`,padding:`${verticalPadding} ${theme.variables.size.spacing.m}`,...!!leftIcon&&{padding:`${verticalPadding} ${theme.variables.size.spacing.m} ${verticalPadding} ${theme.variables.size.spacing.s}`},..."standalone"===variant&&{color:theme.values.color.text.ai.default},...!disabled&&{"&:hover, &:active":{backgroundColor:theme.values.color.background.secondary.default,borderColor:theme.values.color.border.secondary.hover}},...disabled&&{...getDisabledStyles({theme})}}}

package/build/esm/shared/useAutoPosition.js

@@ -1 +1 @@
-import{useState,useLayoutEffect}from"react";import{useWindow}from"./useWindow";import{useDocument}from"./useDocument";export const useAutoPosition=({anchorRef,contentRef,isActive,forceVerticalPosition})=>{let[verticalPosition,setVerticalPosition]=useState("down"),[horizontalPosition,setHorizontalPosition]=useState("left"),document=useDocument(),window=useWindow();return useLayoutEffect(()=>{if(contentRef)if(isActive){let maxHeight=Math.max(document.documentElement.clientHeight||0,window.innerHeight||0),rect=contentRef.current.getBoundingClientRect(),anchorHeight=anchorRef.current.getBoundingClientRect().height,anchorX=anchorRef.current.getBoundingClientRect().x,screenWidth=window.innerWidth,isUp=rect.top+rect.height>maxHeight,isDown=rect.top-anchorHeight<rect.height;forceVerticalPosition?setVerticalPosition(forceVerticalPosition):isUp?setVerticalPosition("up"):isDown&&setVerticalPosition("down"),anchorX>screenWidth/2?setHorizontalPosition("left"):anchorX<screenWidth/2&&setHorizontalPosition("right")}else setVerticalPosition("down"),setHorizontalPosition("left")},[anchorRef,contentRef,document.documentElement.clientHeight,isActive,window.innerHeight,window.innerWidth,forceVerticalPosition]),[verticalPosition,horizontalPosition]};
+import{useState,useLayoutEffect}from"react";import{useWindow}from"./useWindow";import{useDocument}from"./useDocument";export const useAutoPosition=({anchorRef,contentRef,isActive,forceVerticalPosition})=>{let[verticalPosition,setVerticalPosition]=useState("down"),[horizontalPosition,setHorizontalPosition]=useState("left"),document=useDocument(),window=useWindow();return useLayoutEffect(()=>{if(contentRef)if(isActive){let maxHeight=Math.max(document.documentElement.clientHeight||0,window.innerHeight||0),contentElement=contentRef.current,anchorElement=anchorRef.current;if(!contentElement||!anchorElement)return;let rect=contentElement.getBoundingClientRect(),anchorHeight=anchorElement.getBoundingClientRect().height,anchorX=anchorElement.getBoundingClientRect().x,screenWidth=window.innerWidth,isUp=rect.top+rect.height>maxHeight,isDown=rect.top-anchorHeight<rect.height;forceVerticalPosition?setVerticalPosition(forceVerticalPosition):isUp?setVerticalPosition("up"):isDown&&setVerticalPosition("down"),anchorX>screenWidth/2?setHorizontalPosition("left"):anchorX<screenWidth/2&&setHorizontalPosition("right")}else setVerticalPosition("down"),setHorizontalPosition("left")},[anchorRef,contentRef,document.documentElement.clientHeight,isActive,window.innerHeight,window.innerWidth,forceVerticalPosition]),[verticalPosition,horizontalPosition]};

package/build/esm/shared/useHover.d.ts

@@ -1,2 +1,2 @@
 import type React from "react";
-export declare function useHover(ref: React.MutableRefObject<any>): boolean;
+export declare function useHover(ref: React.MutableRefObject<any> | false | null | undefined): boolean;

package/build/esm/shared/useHover.js

@@ -1 +1 @@
-import{useCallback,useEffect,useState}from"react";export function useHover(ref){let[hovered,setHovered]=useState(!1),handleMouseEnter=useCallback(()=>setHovered(!0),[]),handleMouseLeave=useCallback(()=>setHovered(!1),[]);return(useEffect(()=>{if(!ref)return;let node=ref.current;if(node)return node.addEventListener("mouseenter",handleMouseEnter),node.addEventListener("mouseleave",handleMouseLeave),()=>{node.removeEventListener("mouseenter",handleMouseEnter),node.removeEventListener("mouseleave",handleMouseLeave)}},[ref,handleMouseEnter,handleMouseLeave]),ref)?hovered:null}
+import{useCallback,useEffect,useState}from"react";export function useHover(ref){let[hovered,setHovered]=useState(!1),handleMouseEnter=useCallback(()=>setHovered(!0),[]),handleMouseLeave=useCallback(()=>setHovered(!1),[]);return useEffect(()=>{if(!ref)return;let node=ref.current;if(node)return node.addEventListener("mouseenter",handleMouseEnter),node.addEventListener("mouseleave",handleMouseLeave),()=>{node.removeEventListener("mouseenter",handleMouseEnter),node.removeEventListener("mouseleave",handleMouseLeave)}},[ref,handleMouseEnter,handleMouseLeave]),!!ref&&hovered}

package/build/esm/shared/useOutsideClickDeactivatesWithinPortal.d.ts

@@ -1,5 +1,5 @@
 export type OutsideClickDeactivatesWithinPortalOptions = {
-    portalContainerElement: Element;
+    portalContainerElement: Element | null;
     outerRef: {
         current: HTMLElement | null;
     } | undefined;

package/build/esm/shared/useOutsideClickDeactivatesWithinPortal.js

@@ -1 +1 @@
-import{useCallback}from"react";export const useOutsideClickDeactivatesWithinPortal=({portalContainerElement,outerRef,isDismissible})=>useCallback(evt=>(!portalContainerElement.contains(evt.target)||evt.target===outerRef?.current)&&isDismissible,[portalContainerElement,outerRef,isDismissible]);
+import{useCallback}from"react";export const useOutsideClickDeactivatesWithinPortal=({portalContainerElement,outerRef,isDismissible})=>useCallback(evt=>(!portalContainerElement?.contains(evt.target)||evt.target===outerRef?.current)&&isDismissible,[portalContainerElement,outerRef,isDismissible]);

package/build/esm/web-tokens/_colors.json

@@ -4,9 +4,9 @@
             "name": "1",
             "subState": "",
             "darkValue": "0px 2px 5px 0px rgba(0, 0, 0, 0.07), 0px 0.3px 0.6px 0px rgba(0, 0, 0, 0.00), 0px 0px 0px 1px rgba(64, 69, 79, 0.40) inset",
-            "darkOriginalValue": "07), 0px 0.3px 0.6px 0px rgba(0, 0, 0, 0.00), 0px 0px 0px 1px rgba(64, 69, 79, 0",
+            "darkOriginalValue": "0px 2px 5px 0px rgba(0, 0, 0, 0.07), 0px 0.3px 0.6px 0px rgba(0, 0, 0, 0.00), 0px 0px 0px 1px rgba(64, 69, 79, 0.40) inset",
             "lightValue": "0px 0.3px 0.6px rgba(0, 0, 0, 0.0035), 0px 2px 5px rgba(0, 0, 0, 0.07)",
-            "lightOriginalValue": "3px 0.6px rgba(0, 0, 0, 0.0035), 0px 2px 5px rgba(0, 0, 0, 0"
+            "lightOriginalValue": "0px 0.3px 0.6px rgba(0, 0, 0, 0.0035), 0px 2px 5px rgba(0, 0, 0, 0.07)"
         }
     },
     "2": {
@@ -14,9 +14,9 @@
             "name": "2",
             "subState": "",
             "darkValue": "0px 2px 8px 0px rgba(0, 0, 0, 0.12), 0px 0.3px 1px 0px rgba(0, 0, 0, 0.01), 0px 0px 0px 1px rgba(64, 69, 79, 0.40) inset",
-            "darkOriginalValue": "12), 0px 0.3px 1px 0px rgba(0, 0, 0, 0.01), 0px 0px 0px 1px rgba(64, 69, 79, 0",
+            "darkOriginalValue": "0px 2px 8px 0px rgba(0, 0, 0, 0.12), 0px 0.3px 1px 0px rgba(0, 0, 0, 0.01), 0px 0px 0px 1px rgba(64, 69, 79, 0.40) inset",
             "lightValue": "0px 2px 8px 0px rgba(0, 0, 0, 0.12), 0px 0.3px 1px 0px rgba(0, 0, 0, 0.01)",
-            "lightOriginalValue": "12), 0px 0.3px 1px 0px rgba(0, 0, 0, 0"
+            "lightOriginalValue": "0px 2px 8px 0px rgba(0, 0, 0, 0.12), 0px 0.3px 1px 0px rgba(0, 0, 0, 0.01)"
         }
     },
     "3": {
@@ -24,9 +24,9 @@
             "name": "3",
             "subState": "",
             "darkValue": "0px 4px 20px 0px rgba(0, 0, 0, 0.20), 0px 0.5px 2.5px 0px rgba(0, 0, 0, 0.16), 0px 0px 0px 1px rgba(64, 69, 79, 0.50) inset",
-            "darkOriginalValue": "20), 0px 0.5px 2.5px 0px rgba(0, 0, 0, 0.16), 0px 0px 0px 1px rgba(64, 69, 79, 0",
+            "darkOriginalValue": "0px 4px 20px 0px rgba(0, 0, 0, 0.20), 0px 0.5px 2.5px 0px rgba(0, 0, 0, 0.16), 0px 0px 0px 1px rgba(64, 69, 79, 0.50) inset",
             "lightValue": "0px 0.5px 2.5px rgba(0, 0, 0, 0.16), 0px 4px 20px rgba(0, 0, 0, 0.2)",
-            "lightOriginalValue": "5px 2.5px rgba(0, 0, 0, 0.16), 0px 4px 20px rgba(0, 0, 0, 0"
+            "lightOriginalValue": "0px 0.5px 2.5px rgba(0, 0, 0, 0.16), 0px 4px 20px rgba(0, 0, 0, 0.2)"
         }
     },
     "4": {
@@ -34,9 +34,9 @@
             "name": "4",
             "subState": "",
             "darkValue": "0px 32px 112px 0px rgba(0, 0, 0, 0.24), 0px 4px 14px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(64, 69, 79, 0.50) inset",
-            "darkOriginalValue": "24), 0px 4px 14px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(64, 69, 79, 0",
+            "darkOriginalValue": "0px 32px 112px 0px rgba(0, 0, 0, 0.24), 0px 4px 14px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(64, 69, 79, 0.50) inset",
             "lightValue": "0px 4px 14px rgba(0, 0, 0, 0.12), 0px 32px 112px rgba(0, 0, 0, 0.24)",
-            "lightOriginalValue": "12), 0px 32px 112px rgba(0, 0, 0, 0"
+            "lightOriginalValue": "0px 4px 14px rgba(0, 0, 0, 0.12), 0px 32px 112px rgba(0, 0, 0, 0.24)"
         }
     },
     "badge": {
@@ -2275,9 +2275,9 @@
             "name": "default-ring",
             "subState": "",
             "darkValue": "0px 0px 0px 4px rgba(123, 142, 157, 0.10)",
-            "darkOriginalValue": "",
+            "darkOriginalValue": "0px 0px 0px 4px rgba(123, 142, 157, 0.10)",
             "lightValue": "0px 0px 0px 4px rgba(123, 142, 157, 0.10)",
-            "lightOriginalValue": ""
+            "lightOriginalValue": "0px 0px 0px 4px rgba(123, 142, 157, 0.10)"
         }
     },
     "focus-ring": {
@@ -2285,9 +2285,9 @@
             "name": "focus-ring",
             "subState": "",
             "darkValue": "0px 0px 0px 4px rgba(4, 122, 136, 0.25)",
-            "darkOriginalValue": "",
+            "darkOriginalValue": "0px 0px 0px 4px rgba(4, 122, 136, 0.25)",
             "lightValue": "0px 0px 0px 4px rgba(4, 122, 136, 0.25)",
-            "lightOriginalValue": ""
+            "lightOriginalValue": "0px 0px 0px 4px rgba(4, 122, 136, 0.25)"
         }
     }
 }