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

package/build/esm/components/PictogramButton/PictogramButton.js

@@ -1 +1 @@
-import React,{useCallback}from"react";import styled from"@emotion/styled";import{getAriaAttributes}from"../../shared/ariaAttributes";import{Icon}from"../Icon/Icon";import{Inline}from"../Inline/Inline";import{Tooltip}from"../Tooltip/Tooltip";let StyledPictogramButton=styled("button",{target:"e1ng8v9j0",label:"StyledPictogramButton"})(({theme,variant,size,squareCorners,disabled})=>{let basePadding="xs"===size?theme.variables.size.spacing.xxs:theme.variables.size.spacing.xs;return{"&[type='button']":{appearance:"none",MozAppearance:"none",WebkitAppearance:"none"},border:0,display:"inline-block",textTransform:"none",textDecoration:"none",borderRadius:theme.variables.size.borderRadius.xs,fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.s,lineHeight:theme.variables.size.lineHeight.xs,fontWeight:theme.variables.weight.bold,padding:basePadding,cursor:"pointer",...disabled&&{opacity:theme.variables.opacity.disabled,cursor:"not-allowed"},..."secondary"===variant&&{border:"1px solid",borderColor:theme.values.color.border.primary.default,backgroundColor:theme.values.color.background.transparent.default,padding:parseInt(basePadding,10)-1,color:theme.values.color.icon.secondary.default,...!disabled&&{"&:hover":{color:theme.values.color.icon.primary.default,borderColor:theme.values.color.border.primary.default,backgroundColor:theme.values.color.background.transparent.hover},"&:active":{borderColor:theme.values.color.border.primary.active,backgroundColor:theme.values.color.background.transparent.active}}},..."tertiary"===variant&&{backgroundColor:theme.values.color.background.transparent.default,color:theme.values.color.icon.secondary.default,...!disabled&&{"&:hover":{backgroundColor:theme.values.color.background.transparent.hover},"&:active":{color:theme.values.color.icon.primary.default,backgroundColor:theme.values.color.background.transparent.active}}},..."quaternary"===variant&&{backgroundColor:theme.values.color.background.transparent.default,color:theme.values.color.icon.tertiary.default,...!disabled&&{"&:hover":{backgroundColor:theme.values.color.background.transparent.hover},"&:active":{color:theme.values.color.icon.secondary.default,backgroundColor:theme.values.color.background.transparent.active}}},...squareCorners&&{borderRadius:"0"}}});export const PictogramButton=React.forwardRef(({ariaAttributes,type="button",size="xs",variant="tertiary",disabled=!1,onClick,onFocus,onBlur,"data-e2e-test-id":dataE2eTestId,as,icon,label,squareCorners=!1,...rest},ref)=>{let mergedAriaAttributes=getAriaAttributes(rest,ariaAttributes),handleClick=useCallback(e=>{disabled&&e.preventDefault(),onClick&&onClick(e)},[disabled,onClick]),ariaLabelProp=label||ariaAttributes?.["aria-label"]?{"aria-label":ariaAttributes?.["aria-label"]||label}:{},pictogramContent=React.createElement(StyledPictogramButton,{ref:ref,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"PictogramButton",as:as,disabled:disabled,type:as&&"button"!==as?void 0:type,variant:variant,size:size,squareCorners:squareCorners,onClick:handleClick,onFocus:onFocus,onBlur:onBlur,...mergedAriaAttributes,...ariaLabelProp,...rest},React.createElement(Inline,{vAlignItems:"center",alignItems:"center",space:"xxs",noWrap:!0},React.createElement(Icon,{"aria-hidden":!0,size:"m"===size?"m":"s",name:icon,"data-testid":icon,"data-e2e-test-id":icon})));return label?React.createElement(Tooltip,{content:label},pictogramContent):pictogramContent});
+import React,{useCallback}from"react";import styled from"@emotion/styled";import{forwardRefPolymorphic}from"../../shared/forwardRefPolymorphic";import{getAriaAttributes}from"../../shared/ariaAttributes";import{Icon}from"../Icon/Icon";import{Inline}from"../Inline/Inline";import{Tooltip}from"../Tooltip/Tooltip";let StyledPictogramButton=styled("button",{target:"e1n1i57a0",label:"StyledPictogramButton"})(({theme,variant,size,squareCorners,disabled})=>{let basePadding="xs"===size?theme.variables.size.spacing.xxs:theme.variables.size.spacing.xs;return{"&[type='button']":{appearance:"none",MozAppearance:"none",WebkitAppearance:"none"},border:0,display:"inline-block",textTransform:"none",textDecoration:"none",borderRadius:theme.variables.size.borderRadius.xs,fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.s,lineHeight:theme.variables.size.lineHeight.xs,fontWeight:theme.variables.weight.bold,padding:basePadding,cursor:"pointer",...disabled&&{opacity:theme.variables.opacity.disabled,cursor:"not-allowed"},..."secondary"===variant&&{border:"1px solid",borderColor:theme.values.color.border.primary.default,backgroundColor:theme.values.color.background.transparent.default,padding:parseInt(basePadding,10)-1,color:theme.values.color.icon.secondary.default,...!disabled&&{"&:hover":{color:theme.values.color.icon.primary.default,borderColor:theme.values.color.border.primary.default,backgroundColor:theme.values.color.background.transparent.hover},"&:active":{borderColor:theme.values.color.border.primary.active,backgroundColor:theme.values.color.background.transparent.active}}},..."tertiary"===variant&&{backgroundColor:theme.values.color.background.transparent.default,color:theme.values.color.icon.secondary.default,...!disabled&&{"&:hover":{backgroundColor:theme.values.color.background.transparent.hover},"&:active":{color:theme.values.color.icon.primary.default,backgroundColor:theme.values.color.background.transparent.active}}},..."quaternary"===variant&&{backgroundColor:theme.values.color.background.transparent.default,color:theme.values.color.icon.tertiary.default,...!disabled&&{"&:hover":{backgroundColor:theme.values.color.background.transparent.hover},"&:active":{color:theme.values.color.icon.secondary.default,backgroundColor:theme.values.color.background.transparent.active}}},...squareCorners&&{borderRadius:"0"}}});export const PictogramButton=forwardRefPolymorphic(({ariaAttributes,type="button",size="xs",variant="tertiary",disabled=!1,onClick,onFocus,onBlur,"data-e2e-test-id":dataE2eTestId,as,icon,label,squareCorners=!1,...rest},ref)=>{let mergedAriaAttributes=getAriaAttributes(rest,ariaAttributes),handleClick=useCallback(e=>{disabled&&e.preventDefault(),onClick&&onClick(e)},[disabled,onClick]),ariaLabelProp=label||ariaAttributes?.["aria-label"]?{"aria-label":ariaAttributes?.["aria-label"]||label}:{},pictogramContent=React.createElement(StyledPictogramButton,{ref:ref,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"PictogramButton",as:as,disabled:disabled,type:as&&"button"!==as?void 0:type??void 0,variant:variant,size:size,squareCorners:squareCorners,onClick:handleClick,onFocus:onFocus,onBlur:onBlur,...mergedAriaAttributes,...ariaLabelProp,...rest},React.createElement(Inline,{vAlignItems:"center",alignItems:"center",space:"xxs",noWrap:!0},React.createElement(Icon,{"aria-hidden":!0,size:"m"===size?"m":"s",name:icon,"data-testid":icon,"data-e2e-test-id":icon})));return label?React.createElement(Tooltip,{content:label},pictogramContent):pictogramContent});

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

@@ -13,10 +13,10 @@ export declare function usePortalChildZIndex(zIndex: number): number;
  * @param portalContainer
  * @returns
  */
-export declare function usePortalContainerElement(portalContainer?: HTMLElement | null): Element;
+export declare function usePortalContainerElement(portalContainer?: HTMLElement | null): Element | null;
 export type PortalProps = {
     children: React.ReactNode;
     /** Custom portal container to render popup into */
     portalContainer?: HTMLElement | null;
 };
-export declare function Portal({ children, portalContainer, }: PortalProps): React.ReactElement;
+export declare function Portal({ children, portalContainer, }: PortalProps): React.ReactElement | null;

package/build/esm/components/PromptButton/PromptButton.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import{Icon}from"../Icon/Icon";import{getPillStyles}from"../../shared/mixins";import{Inline}from"../Inline/Inline";import{TextClamped}from"../Typography/TextClamped/TextClamped";let StyledPromptButton=styled("button",{shouldForwardProp:prop=>isPropValid(prop),target:"e80vbpr0",label:"StyledPromptButton"})(({theme,disabled,leftIcon,variant})=>getPillStyles({theme,disabled,leftIcon,variant})),CustomTextClamped=styled(TextClamped,{target:"e80vbpr1",label:"CustomTextClamped"})({fontSize:"inherit",lineHeight:"inherit",fontWeight:"inherit",color:"inherit"});export const PromptButton=React.forwardRef(({as,children,disabled=!1,leftIcon,type="button","data-e2e-test-id":dataE2eTestId,...rest},ref)=>React.createElement(StyledPromptButton,{ref:ref,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"PromptButton",as:as,disabled:disabled,type:as&&"button"!==as?void 0:type,leftIcon:leftIcon,tabIndex:0,...rest},React.createElement(Inline,{alignItems:"center",vAlignItems:"center",space:"xxs",noWrap:!0},leftIcon&&React.createElement(Icon,{"aria-hidden":!0,size:"s",name:leftIcon,"data-testid":leftIcon,"data-e2e-test-id":leftIcon}),React.createElement(CustomTextClamped,{as:"span"},children))));
+import React from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import{forwardRefPolymorphic}from"../../shared/forwardRefPolymorphic";import{Icon}from"../Icon/Icon";import{getPillStyles}from"../../shared/mixins";import{Inline}from"../Inline/Inline";import{TextClamped}from"../Typography/TextClamped/TextClamped";let StyledPromptButton=styled("button",{shouldForwardProp:prop=>isPropValid(prop),target:"e94xbpi0",label:"StyledPromptButton"})(({theme,disabled,leftIcon,variant})=>getPillStyles({theme,disabled,leftIcon,variant})),CustomTextClamped=styled(TextClamped,{target:"e94xbpi1",label:"CustomTextClamped"})({fontSize:"inherit",lineHeight:"inherit",fontWeight:"inherit",color:"inherit"});export const PromptButton=forwardRefPolymorphic(({as,children,disabled=!1,leftIcon,type="button","data-e2e-test-id":dataE2eTestId,...rest},ref)=>React.createElement(StyledPromptButton,{ref:ref,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"PromptButton",as:as,disabled:disabled,type:as&&"button"!==as?void 0:type,leftIcon:leftIcon,tabIndex:0,...rest},React.createElement(Inline,{alignItems:"center",vAlignItems:"center",space:"xxs",noWrap:!0},leftIcon&&React.createElement(Icon,{"aria-hidden":!0,size:"s",name:leftIcon,"data-testid":leftIcon,"data-e2e-test-id":leftIcon}),React.createElement(CustomTextClamped,{as:"span"},children))));

package/build/esm/components/PromptInput/AutocompleteList.d.ts

@@ -10,4 +10,4 @@ export type AutocompleteListProps = {
     autocompleteListFooter?: ReactElement;
 } & Pick<CategoryListProps, "onListItemClick"> & Pick<PromptTextAreaProps, "name" | "value"> & Pick<PortalProps, "portalContainer">;
 export declare function getAutocompleteListId(name: string): string;
-export declare function AutocompleteList({ name, value, autocompleteListItems, triggerRef, portalContainer, selectedListItem, isOpen, autocompleteListFooter, onListItemClick, }: AutocompleteListProps): ReactElement;
+export declare function AutocompleteList({ name, value, autocompleteListItems, triggerRef, portalContainer, selectedListItem, isOpen, autocompleteListFooter, onListItemClick, }: AutocompleteListProps): ReactElement | null;

package/build/esm/components/PromptInput/AutocompleteList.js

@@ -1 +1 @@
-import React,{useEffect,useRef}from"react";import{usePress}from"@react-aria/interactions";import styled from"@emotion/styled";import{Box}from"../Box/Box";import{Stack}from"../Stack/Stack";import{CategoryList}from"./CategoryList";import{Container}from"../Container";import{Portal,usePortalChildZIndex}from"../Portal/Portal";import{Inline}from"../Inline/Inline";import{useAutocompleteListPosition}from"./useAutocompleteListPosition";export function getAutocompleteListId(name){return`${name}_AutocompleteList`}let StyledContainer=styled("div",{target:"ecimzru0",label:"StyledContainer"})(({theme})=>({position:"absolute",zIndex:usePortalChildZIndex(theme.variables.zIndex.dropdown)})),StyledListContainer=styled("div",{target:"ecimzru1",label:"StyledListContainer"})(({theme})=>({backgroundColor:theme.values.color.canvas,borderRadius:theme.variables.size.borderRadius.s}));export function AutocompleteList({name,value,autocompleteListItems,triggerRef,portalContainer,selectedListItem,isOpen,autocompleteListFooter,onListItemClick}){let menuRef=useRef(null),{pressProps}=usePress({preventFocusOnPress:!0}),{listStyle,calculateStyle}=useAutocompleteListPosition({triggerRef,menuRef,isOpen});useEffect(()=>{isOpen&&calculateStyle()},[value,calculateStyle,isOpen]);let lists=autocompleteListItems.map(listItem=>React.createElement(CategoryList,{name:name,key:listItem.category,...listItem,selectedListItem:selectedListItem,onListItemClick:onListItemClick})),listElm=React.createElement(StyledContainer,{...pressProps,ref:menuRef,style:listStyle,id:getAutocompleteListId(name),role:"listbox",translate:"no"},React.createElement(Container,null,React.createElement(Box,{space:"xxs"},React.createElement(StyledListContainer,null,React.createElement(Box,{space:"s",vSpace:"s",bSpace:"xs"},React.createElement(Stack,{space:"xs"},React.createElement(Stack,{space:"s"},lists),React.createElement(Inline,{alignItems:"center"},autocompleteListFooter)))))));return isOpen?React.createElement(Portal,{portalContainer:portalContainer},listElm):null}
+import React,{useEffect,useRef}from"react";import{usePress}from"@react-aria/interactions";import styled from"@emotion/styled";import{Box}from"../Box/Box";import{Stack}from"../Stack/Stack";import{CategoryList}from"./CategoryList";import{Container}from"../Container";import{Portal,usePortalChildZIndex}from"../Portal/Portal";import{Inline}from"../Inline/Inline";import{useAutocompleteListPosition}from"./useAutocompleteListPosition";export function getAutocompleteListId(name){return`${name}_AutocompleteList`}let StyledContainer=styled("div",{target:"etdk1ck0",label:"StyledContainer"})(({theme})=>({position:"absolute",zIndex:usePortalChildZIndex(theme.variables.zIndex.dropdown)})),StyledListContainer=styled("div",{target:"etdk1ck1",label:"StyledListContainer"})(({theme})=>({backgroundColor:theme.values.color.canvas,borderRadius:theme.variables.size.borderRadius.s}));export function AutocompleteList({name,value,autocompleteListItems=[],triggerRef,portalContainer,selectedListItem,isOpen,autocompleteListFooter,onListItemClick}){let menuRef=useRef(null),{pressProps}=usePress({preventFocusOnPress:!0}),{listStyle,calculateStyle}=useAutocompleteListPosition({triggerRef,menuRef,isOpen});useEffect(()=>{isOpen&&calculateStyle()},[value,calculateStyle,isOpen]);let lists=autocompleteListItems.map(listItem=>React.createElement(CategoryList,{name:name,key:listItem.category,...listItem,selectedListItem:selectedListItem,onListItemClick:onListItemClick})),listElm=React.createElement(StyledContainer,{...pressProps,ref:menuRef,style:listStyle,id:getAutocompleteListId(name),role:"listbox",translate:"no"},React.createElement(Container,null,React.createElement(Box,{space:"xxs"},React.createElement(StyledListContainer,null,React.createElement(Box,{space:"s",vSpace:"s",bSpace:"xs"},React.createElement(Stack,{space:"xs"},React.createElement(Stack,{space:"s"},lists),React.createElement(Inline,{alignItems:"center"},autocompleteListFooter??[])))))));return isOpen?React.createElement(Portal,{portalContainer:portalContainer},listElm):null}

package/build/esm/components/PromptInput/PromptInput.js

@@ -1 +1 @@
-import React,{useRef,useMemo,useState,useEffect,useCallback,forwardRef}from"react";import styled from"@emotion/styled";import{PromptTextArea,getPaddingHorizontal,getPaddingVertical}from"./PromptTextArea";import{Container}from"../Container";import{AutocompleteList}from"./AutocompleteList";import{getListItemId}from"./CategoryList";import{Text}from"../Typography/Text";import{Inline}from"../Inline/Inline";import{RoundButton}from"../RoundButton/RoundButton";import{PictogramButton}from"../PictogramButton/PictogramButton";import{Stack}from"../Stack/Stack";import{Icon}from"../Icon/Icon";import{SubThemeProvider}from"../SubThemeProvider/SubThemeProvider";import{useAnimatedBorder}from"../Utilities/AnimatedBorder/useAnimatedBorder";import{PromptInputHeader}from"./PromptInputHeader";let CustomContainer=styled(Container,{target:"e1lp7eti0",label:"CustomContainer"})(({theme,hideBorder,hasShadow})=>({border:`1px solid ${theme.values.color.border.primary.default}`,background:theme.values.color.background.elevated.default,...hasShadow&&{boxShadow:theme.values.shadow.defaultRing,transitionProperty:"box-shadow, border-color, outline-color",transitionDuration:theme.variables.animation.promptInput.focus.duration,transitionTimingFunction:theme.variables.animation.promptInput.focus.timingFunction},...hideBorder&&{borderColor:"transparent"},cursor:"text",outlineColor:"transparent","&:has(textarea:focus-visible)":{outlineWidth:1,outlineStyle:"solid",outlineOffset:-1,boxShadow:theme.values.shadow.focusRing,outlineColor:theme.values.color.border.accent.default}})),StyledTextAreaContainer=styled("div",{target:"e1lp7eti1",label:"StyledTextAreaContainer"})({borderRadius:"inherit",position:"relative",width:"100%"}),StyledLeftIconContainer=styled("div",{target:"e1lp7eti2",label:"StyledLeftIconContainer"})(({theme,size})=>({display:"flex",position:"absolute",top:getPaddingVertical(theme,size),left:getPaddingHorizontal(theme,size),height:theme.variables.size.dimension.icon.m,alignItems:"center"})),StyledEmptyStateTopRightContentContainer=styled("div",{target:"e1lp7eti3",label:"StyledEmptyStateTopRightContentContainer"})(({theme,size})=>({position:"absolute",top:getPaddingVertical(theme,size),right:getPaddingHorizontal(theme,size),userSelect:"none",pointerEvents:"none"})),StyledClearButton=styled(PictogramButton,{target:"e1lp7eti4",label:"StyledClearButton"})(({theme,buttonSize})=>({position:"absolute",right:theme.variables.size.spacing.s,top:"m"===buttonSize?theme.variables.size.spacing.s:theme.variables.size.spacing.xs})),StyledSlotsContainer=styled("div",{target:"e1lp7eti5",label:"StyledSlotsContainer"})({display:"flex",flexWrap:"wrap",alignItems:"center"}),StyledSlot=styled("div",{target:"e1lp7eti6",label:"StyledSlot"})(({theme,side})=>({margin:`0 ${theme.variables.size.spacing.s} ${theme.variables.size.spacing.s}`,..."right"===side&&{marginLeft:"auto"}})),defaultSendButtonProps={type:"submit",icon:"arrow-up"};export const PromptInput=forwardRef(({"data-e2e-test-id":dataE2eTestId,name,autocompleteListItems=[],value,bottomToolbar,isProcessing,sendButtonProps,autocompleteListFooter,clearButtonAriaLabel="Clear input",hint,emptyStateTopRightContent,portalContainer,leftIcon,header,onChange,onComplete,onClear,onEnterKey,onFocus,onBlur,onKeyDown,variant,size="m",skipAIAnimation=!1,rows=1,...rest},ref)=>{let containerRef=useRef(null),animatedBorderRef=useRef(null),textAreaContainerRef=useRef(null),internalRef=useRef(null),[selectedIndex,setSelectedIndex]=useState(-1),userTypedQuery=useRef(""),[isAutocompleteListOpen,setIsAutocompleteListOpen]=useState(!1),textAreaRef=ref||internalRef;useAnimatedBorder(animatedBorderRef,{skipAnimation:skipAIAnimation||"ai"!==variant,radius:"m"===size?12:8,iterations:1});let mergedSendButtonProps={...defaultSendButtonProps,...sendButtonProps??{}},closeAutocompleteList=useCallback(()=>{setIsAutocompleteListOpen(!1),setSelectedIndex(-1)},[]),openAutocompleteList=useCallback(()=>{autocompleteListItems.length&&(setIsAutocompleteListOpen(!0),setSelectedIndex(-1))},[autocompleteListItems]),acceptTextSelection=()=>{userTypedQuery.current=value,textAreaRef.current.selectionStart!==textAreaRef.current.selectionEnd&&textAreaRef.current.setSelectionRange(value.length,value.length)};useEffect(()=>{autocompleteListItems.length?openAutocompleteList():closeAutocompleteList()},[autocompleteListItems,openAutocompleteList,closeAutocompleteList]),useEffect(()=>{value&&value!==userTypedQuery.current&&isAutocompleteListOpen&&textAreaRef.current.setSelectionRange(userTypedQuery.current.length,value.length)},[value,textAreaRef,isAutocompleteListOpen]);let flattenedListItems=useMemo(()=>{let list=[];return autocompleteListItems.forEach(listItem=>{listItem.items.forEach((item,index)=>{list.push({category:listItem.category,indexInCategory:index,value:item.value,id:getListItemId(name,listItem.category,index)})})}),list},[autocompleteListItems,name]),handleSelectedIndexChange=(index,evt)=>{if(setSelectedIndex(index),-1!==index){let{category,value:itemValue}=flattenedListItems[index];onComplete({value:itemValue,category,evt,index})}},handlePreventFocus=evt=>{evt.preventDefault()},selectedListItem=-1!==selectedIndex?flattenedListItems[selectedIndex]:null,emptyStateTopRightContentElm=emptyStateTopRightContent?React.createElement(StyledEmptyStateTopRightContentContainer,{size:size},React.createElement(Text,{color:"tertiary"},emptyStateTopRightContent)):null,clearButtonElm=value?React.createElement(StyledClearButton,{size:"m"===size?"s":"xs","aria-hidden":"true",tabIndex:-1,icon:"x-circle-filled","aria-label":clearButtonAriaLabel,onPointerDown:handlePreventFocus,onClick:onClear,buttonSize:size}):emptyStateTopRightContentElm,hintElm=!!hint&&React.createElement(Inline,{alignItems:"center"},React.createElement(Text,{size:"s",color:"tertiary"},hint)),bottomToolbarElm=(bottomToolbar?.rightContent||bottomToolbar?.leftContent||!!sendButtonProps)&&React.createElement(React.Fragment,null,bottomToolbar?.leftContent&&React.createElement(StyledSlot,null,bottomToolbar.leftContent),React.createElement(StyledSlot,{"data-e2e-test-id":"bottomToolbar",side:"right"},React.createElement(Inline,{space:"xs",vAlignItems:"center"},bottomToolbar?.rightContent,sendButtonProps&&React.createElement(SubThemeProvider,{name:variant},React.createElement(RoundButton,{ariaAttributes:{"aria-label":isProcessing?"Processing query":"Submit query"},...mergedSendButtonProps,size:"m"===size?"s":"xs",disabled:mergedSendButtonProps.disabled??!value,onClick:evt=>{mergedSendButtonProps.onClick?.(evt),closeAutocompleteList()},onPointerDown:handlePreventFocus,variant:"primary",icon:isProcessing?"stop-filled":mergedSendButtonProps.icon})))));return React.createElement(React.Fragment,null,React.createElement("div",{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"PromptInput",ref:containerRef,translate:"no"},React.createElement(Stack,{space:"s"},React.createElement("div",{ref:animatedBorderRef},React.createElement(SubThemeProvider,{name:variant},React.createElement(CustomContainer,{elevation:0,borderRadius:size,hideBorder:!1,hasShadow:!0},React.createElement(SubThemeProvider,{name:"unset"},React.createElement(StyledSlotsContainer,{ref:textAreaContainerRef,onPointerDown:evt=>{evt.target===evt.currentTarget&&(textAreaRef.current?.focus(),evt.preventDefault())}},header&&React.createElement(PromptInputHeader,{...header,borderRadiusSize:size,size:size}),React.createElement(StyledTextAreaContainer,null,leftIcon&&React.createElement(StyledLeftIconContainer,{size:size},React.createElement(Icon,{name:leftIcon,size:size,color:"tertiary","aria-hidden":"true"})),React.createElement(PromptTextArea,{...rest,dataE2eTestId:dataE2eTestId?`${dataE2eTestId}-input`:void 0,name:name,value:value,ref:textAreaRef,selectedListItem:selectedListItem,isAutocompleteListOpen:isAutocompleteListOpen,hasAutocomplete:!!autocompleteListItems.length,hasLeftIcon:!!leftIcon,onFocus:evt=>{onFocus?.(evt)},onBlur:evt=>{value!==userTypedQuery.current&&onComplete?.({value:userTypedQuery.current,evt}),onBlur?.(evt)},onChange:evt=>{userTypedQuery.current=evt.target.value,onChange(evt)},onKeyDown:evt=>{if(isAutocompleteListOpen)switch(evt.key){case"Escape":closeAutocompleteList(),onComplete({value:userTypedQuery.current,evt});break;case"Enter":!evt.shiftKey&&(evt.preventDefault(),closeAutocompleteList(),acceptTextSelection(),value&&onEnterKey?.());break;case" ":acceptTextSelection();break;case"ArrowUp":evt.preventDefault(),selectedIndex>-1&&handleSelectedIndexChange(selectedIndex-1,evt);break;case"ArrowDown":evt.preventDefault(),selectedIndex<flattenedListItems.length-1&&handleSelectedIndexChange(selectedIndex+1,evt)}else switch(evt.key){case"Escape":onClear?.();break;case"Enter":!evt.shiftKey&&(evt.preventDefault(),value&&onEnterKey?.())}onKeyDown?.(evt)},rows:rows,size:size}),clearButtonElm),bottomToolbarElm))))),hintElm)),React.createElement(AutocompleteList,{name:name,value:value,autocompleteListItems:autocompleteListItems,triggerRef:textAreaContainerRef,selectedListItem:selectedListItem,isOpen:isAutocompleteListOpen,autocompleteListFooter:autocompleteListFooter,portalContainer:portalContainer,onListItemClick:(category,indexInCategory,evt)=>{handleSelectedIndexChange(flattenedListItems.findIndex(listItem=>listItem.category===category&&listItem.indexInCategory===indexInCategory),evt),closeAutocompleteList()}}))});
+import React,{useRef,useMemo,useState,useEffect,useCallback,forwardRef}from"react";import styled from"@emotion/styled";import{PromptTextArea,getPaddingHorizontal,getPaddingVertical}from"./PromptTextArea";import{Container}from"../Container";import{AutocompleteList}from"./AutocompleteList";import{getListItemId}from"./CategoryList";import{Text}from"../Typography/Text";import{Inline}from"../Inline/Inline";import{RoundButton}from"../RoundButton/RoundButton";import{PictogramButton}from"../PictogramButton/PictogramButton";import{Stack}from"../Stack/Stack";import{Icon}from"../Icon/Icon";import{SubThemeProvider}from"../SubThemeProvider/SubThemeProvider";import{useAnimatedBorder}from"../Utilities/AnimatedBorder/useAnimatedBorder";import{PromptInputHeader}from"./PromptInputHeader";let CustomContainer=styled(Container,{target:"e15wgkyv0",label:"CustomContainer"})(({theme,hideBorder,hasShadow})=>({border:`1px solid ${theme.values.color.border.primary.default}`,background:theme.values.color.background.elevated.default,...hasShadow&&{boxShadow:theme.values.shadow.defaultRing,transitionProperty:"box-shadow, border-color, outline-color",transitionDuration:theme.variables.animation.promptInput.focus.duration,transitionTimingFunction:theme.variables.animation.promptInput.focus.timingFunction},...hideBorder&&{borderColor:"transparent"},cursor:"text",outlineColor:"transparent","&:has(textarea:focus-visible)":{outlineWidth:1,outlineStyle:"solid",outlineOffset:-1,boxShadow:theme.values.shadow.focusRing,outlineColor:theme.values.color.border.accent.default}})),StyledTextAreaContainer=styled("div",{target:"e15wgkyv1",label:"StyledTextAreaContainer"})({borderRadius:"inherit",position:"relative",width:"100%"}),StyledLeftIconContainer=styled("div",{target:"e15wgkyv2",label:"StyledLeftIconContainer"})(({theme,size})=>({display:"flex",position:"absolute",top:getPaddingVertical(theme,size),left:getPaddingHorizontal(theme,size),height:theme.variables.size.dimension.icon.m,alignItems:"center"})),StyledEmptyStateTopRightContentContainer=styled("div",{target:"e15wgkyv3",label:"StyledEmptyStateTopRightContentContainer"})(({theme,size})=>({position:"absolute",top:getPaddingVertical(theme,size),right:getPaddingHorizontal(theme,size),userSelect:"none",pointerEvents:"none"})),StyledClearButton=styled(PictogramButton,{target:"e15wgkyv4",label:"StyledClearButton"})(({theme,buttonSize})=>({position:"absolute",right:theme.variables.size.spacing.s,top:"m"===buttonSize?theme.variables.size.spacing.s:theme.variables.size.spacing.xs})),StyledSlotsContainer=styled("div",{target:"e15wgkyv5",label:"StyledSlotsContainer"})({display:"flex",flexWrap:"wrap",alignItems:"center"}),StyledSlot=styled("div",{target:"e15wgkyv6",label:"StyledSlot"})(({theme,side})=>({margin:`0 ${theme.variables.size.spacing.s} ${theme.variables.size.spacing.s}`,..."right"===side&&{marginLeft:"auto"}})),defaultSendButtonProps={type:"submit",icon:"arrow-up"},resolveObjectRef=(forwardedRef,fallbackRef)=>forwardedRef&&"function"!=typeof forwardedRef?forwardedRef:fallbackRef;export const PromptInput=forwardRef(({"data-e2e-test-id":dataE2eTestId,name,autocompleteListItems=[],value,bottomToolbar,isProcessing,sendButtonProps,autocompleteListFooter,clearButtonAriaLabel="Clear input",hint,emptyStateTopRightContent,portalContainer,leftIcon,header,onChange,onComplete,onClear,onEnterKey,onFocus,onBlur,onKeyDown,variant,size="m",skipAIAnimation=!1,rows=1,...rest},ref)=>{let containerRef=useRef(null),animatedBorderRef=useRef(null),textAreaContainerRef=useRef(null),internalRef=useRef(null),[selectedIndex,setSelectedIndex]=useState(-1),userTypedQuery=useRef(""),[isAutocompleteListOpen,setIsAutocompleteListOpen]=useState(!1),textAreaRef=ref||internalRef,textAreaObjectRef=resolveObjectRef(ref,internalRef);useAnimatedBorder(animatedBorderRef,{skipAnimation:skipAIAnimation||"ai"!==variant,radius:"m"===size?12:8,iterations:1});let mergedSendButtonProps={...defaultSendButtonProps,...sendButtonProps??{}},closeAutocompleteList=useCallback(()=>{setIsAutocompleteListOpen(!1),setSelectedIndex(-1)},[]),openAutocompleteList=useCallback(()=>{autocompleteListItems.length&&(setIsAutocompleteListOpen(!0),setSelectedIndex(-1))},[autocompleteListItems]),acceptTextSelection=()=>{userTypedQuery.current=value;let textArea=textAreaObjectRef.current;textArea&&textArea.selectionStart!==textArea.selectionEnd&&textArea.setSelectionRange(value.length,value.length)};useEffect(()=>{autocompleteListItems.length?openAutocompleteList():closeAutocompleteList()},[autocompleteListItems,openAutocompleteList,closeAutocompleteList]),useEffect(()=>{value&&value!==userTypedQuery.current&&isAutocompleteListOpen&&textAreaObjectRef.current?.setSelectionRange(userTypedQuery.current.length,value.length)},[value,textAreaObjectRef,isAutocompleteListOpen]);let flattenedListItems=useMemo(()=>{let list=[];return autocompleteListItems.forEach(listItem=>{listItem.items.forEach((item,index)=>{list.push({category:listItem.category,indexInCategory:index,value:item.value,id:getListItemId(name,listItem.category,index)})})}),list},[autocompleteListItems,name]),handleSelectedIndexChange=(index,evt)=>{if(setSelectedIndex(index),-1!==index){let{category,value:itemValue}=flattenedListItems[index];onComplete?.({value:itemValue,category,evt,index})}},handlePreventFocus=evt=>{evt.preventDefault()},selectedListItem=-1!==selectedIndex?flattenedListItems[selectedIndex]:void 0,emptyStateTopRightContentElm=emptyStateTopRightContent?React.createElement(StyledEmptyStateTopRightContentContainer,{size:size},React.createElement(Text,{color:"tertiary"},emptyStateTopRightContent)):null,clearButtonElm=value?React.createElement(StyledClearButton,{size:"m"===size?"s":"xs","aria-hidden":"true",tabIndex:-1,icon:"x-circle-filled","aria-label":clearButtonAriaLabel,onPointerDown:handlePreventFocus,onClick:onClear,buttonSize:size}):emptyStateTopRightContentElm,hintElm=!!hint&&React.createElement(Inline,{alignItems:"center"},React.createElement(Text,{size:"s",color:"tertiary"},hint)),bottomToolbarElm=(bottomToolbar?.rightContent||bottomToolbar?.leftContent||!!sendButtonProps)&&React.createElement(React.Fragment,null,bottomToolbar?.leftContent&&React.createElement(StyledSlot,null,bottomToolbar.leftContent),React.createElement(StyledSlot,{"data-e2e-test-id":"bottomToolbar",side:"right"},React.createElement(Inline,{space:"xs",vAlignItems:"center"},bottomToolbar?.rightContent,sendButtonProps&&React.createElement(SubThemeProvider,{name:variant},React.createElement(RoundButton,{ariaAttributes:{"aria-label":isProcessing?"Processing query":"Submit query"},...mergedSendButtonProps,size:"m"===size?"s":"xs",disabled:mergedSendButtonProps.disabled??!value,onClick:evt=>{mergedSendButtonProps.onClick?.(evt),closeAutocompleteList()},onPointerDown:handlePreventFocus,variant:"primary",icon:isProcessing?"stop-filled":mergedSendButtonProps.icon})))));return React.createElement(React.Fragment,null,React.createElement("div",{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"PromptInput",ref:containerRef,translate:"no"},React.createElement(Stack,{space:"s"},React.createElement("div",{ref:animatedBorderRef},React.createElement(SubThemeProvider,{name:variant},React.createElement(CustomContainer,{elevation:0,borderRadius:size,hideBorder:!1,hasShadow:!0},React.createElement(SubThemeProvider,{name:"unset"},React.createElement(StyledSlotsContainer,{ref:textAreaContainerRef,onPointerDown:evt=>{evt.target===evt.currentTarget&&(textAreaObjectRef.current?.focus(),evt.preventDefault())}},header&&React.createElement(PromptInputHeader,{...header,borderRadiusSize:size,size:size}),React.createElement(StyledTextAreaContainer,null,leftIcon&&React.createElement(StyledLeftIconContainer,{size:size},React.createElement(Icon,{name:leftIcon,size:size,color:"tertiary","aria-hidden":"true"})),React.createElement(PromptTextArea,{...rest,dataE2eTestId:dataE2eTestId?`${dataE2eTestId}-input`:void 0,name:name,value:value,ref:textAreaRef,selectedListItem:selectedListItem,isAutocompleteListOpen:isAutocompleteListOpen,hasAutocomplete:!!autocompleteListItems.length,hasLeftIcon:!!leftIcon,onFocus:evt=>{onFocus?.(evt)},onBlur:evt=>{value!==userTypedQuery.current&&onComplete?.({value:userTypedQuery.current,evt}),onBlur?.(evt)},onChange:evt=>{userTypedQuery.current=evt.target.value,onChange?.(evt)},onKeyDown:evt=>{if(isAutocompleteListOpen)switch(evt.key){case"Escape":closeAutocompleteList(),onComplete?.({value:userTypedQuery.current,evt});break;case"Enter":!evt.shiftKey&&(evt.preventDefault(),closeAutocompleteList(),acceptTextSelection(),value&&onEnterKey?.());break;case" ":acceptTextSelection();break;case"ArrowUp":evt.preventDefault(),selectedIndex>-1&&handleSelectedIndexChange(selectedIndex-1,evt);break;case"ArrowDown":evt.preventDefault(),selectedIndex<flattenedListItems.length-1&&handleSelectedIndexChange(selectedIndex+1,evt)}else switch(evt.key){case"Escape":onClear?.();break;case"Enter":!evt.shiftKey&&(evt.preventDefault(),value&&onEnterKey?.())}onKeyDown?.(evt)},rows:rows,size:size}),clearButtonElm),bottomToolbarElm))))),hintElm)),React.createElement(AutocompleteList,{name:name,value:value,autocompleteListItems:autocompleteListItems,triggerRef:textAreaContainerRef,selectedListItem:selectedListItem,isOpen:isAutocompleteListOpen,autocompleteListFooter:autocompleteListFooter,portalContainer:portalContainer,onListItemClick:(category,indexInCategory,evt)=>{handleSelectedIndexChange(flattenedListItems.findIndex(listItem=>listItem.category===category&&listItem.indexInCategory===indexInCategory),evt),closeAutocompleteList()}}))});

package/build/esm/components/PromptInput/PromptTextArea.js

@@ -1 +1 @@
-import React,{forwardRef,useEffect}from"react";import styled from"@emotion/styled";import{getInputTextPlaceholder}from"../../shared/mixins/TextInput/getInputTextPlaceholder";import{ScreenReaderText}from"../Utilities/ScreenReaderText/ScreenReaderText";import{getAutocompleteListId}from"./AutocompleteList";export const getPaddingHorizontal=(theme,size)=>"s"===size?theme.variables.size.spacing.s:theme.variables.size.spacing.m;export const getPaddingVertical=(theme,size)=>"s"===size?theme.variables.size.spacing.xs:theme.variables.size.spacing.m;let StyledTextAreaContainer=styled("label",{target:"esul89v0",label:"StyledTextAreaContainer"})(({theme,maxTextAreaHeight,hasLeftIcon,size})=>{let paddingTop=getPaddingVertical(theme,size),paddingBottom=getPaddingVertical(theme,size),iconTextGap="s"===size?`calc(${theme.variables.size.spacing.xs} - ${theme.variables.size.spacing.xxxs})`:theme.variables.size.spacing.xs,basePaddingHorizontal=getPaddingHorizontal(theme,size),paddingRight=`calc(${basePaddingHorizontal} + ${theme.variables.size.dimension.icon.m} + ${iconTextGap})`,paddingLeft=hasLeftIcon?`calc(${basePaddingHorizontal} + ${theme.variables.size.dimension.icon[size]} + ${iconTextGap})`:basePaddingHorizontal;return{display:"grid",verticalAlign:"top",alignItems:"stretch",width:"100%",borderRadius:"inherit",position:"relative",fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,lineHeight:theme.variables.size.lineHeight.xl,"&::after":{content:"attr(data-value) ' '",boxSizing:"border-box",fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,gridArea:"1 / 1",whiteSpace:"pre-wrap",visibility:"hidden",maxHeight:maxTextAreaHeight},textarea:{all:"unset",resize:"none",gridArea:"1 / 1",cursor:"text",color:theme.values.color.text.primary.default,...getInputTextPlaceholder({theme})},"textarea::placeholder":{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"},"&::after, textarea":{minWidth:"0",overflowWrap:"break-word",padding:`${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`}}}),StyledTextAreaWrapper=styled("div",{target:"esul89v1",label:"StyledTextAreaWrapper"})({borderRadius:"inherit",width:"100%"}),getPromptTextAreaLabelId=name=>`${name}_PromptTextAreaLabel`,getAutocompleteAriaProps=({name,isAutocompleteListOpen,selectedListItem})=>({"aria-autocomplete":"list","aria-controls":isAutocompleteListOpen?getAutocompleteListId(name):void 0,"aria-activedescendant":selectedListItem?.id}),getComboboxProps=({name,labelId,isAutocompleteListOpen})=>({role:"combobox","aria-expanded":!!isAutocompleteListOpen,"aria-controls":isAutocompleteListOpen?getAutocompleteListId(name):void 0,"aria-labelledby":labelId});export const PromptTextArea=forwardRef(({dataE2eTestId,label,name,value,placeholder,maxTextAreaHeight="200px",selectedListItem,isAutocompleteListOpen,hasAutocomplete,hasLeftIcon,rows=1,size,onChange,...rest},ref)=>{useEffect(()=>{ref.current.parentNode.dataset.value=value},[value,ref]);let autocompleteAriaProps=hasAutocomplete?getAutocompleteAriaProps({name,isAutocompleteListOpen,selectedListItem}):{},labelId=getPromptTextAreaLabelId(name),textAreaElm=React.createElement(StyledTextAreaContainer,{maxTextAreaHeight:maxTextAreaHeight,hasLeftIcon:hasLeftIcon,size:size},React.createElement(ScreenReaderText,{id:labelId},label),React.createElement("textarea",{...rest,"data-e2e-test-id":dataE2eTestId,ref:ref,name:name,value:value,placeholder:placeholder,onChange:onChange,rows:rows,...autocompleteAriaProps})),comboboxProps=hasAutocomplete?getComboboxProps({name,labelId,isAutocompleteListOpen}):{};return React.createElement(StyledTextAreaWrapper,comboboxProps,textAreaElm)});
+import React,{forwardRef,useEffect}from"react";import styled from"@emotion/styled";import{getInputTextPlaceholder}from"../../shared/mixins/TextInput/getInputTextPlaceholder";import{ScreenReaderText}from"../Utilities/ScreenReaderText/ScreenReaderText";import{getAutocompleteListId}from"./AutocompleteList";export const getPaddingHorizontal=(theme,size)=>"s"===size?theme.variables.size.spacing.s:theme.variables.size.spacing.m;export const getPaddingVertical=(theme,size)=>"s"===size?theme.variables.size.spacing.xs:theme.variables.size.spacing.m;let StyledTextAreaContainer=styled("label",{target:"eez85mj0",label:"StyledTextAreaContainer"})(({theme,maxTextAreaHeight,hasLeftIcon,size})=>{let paddingTop=getPaddingVertical(theme,size),paddingBottom=getPaddingVertical(theme,size),iconTextGap="s"===size?`calc(${theme.variables.size.spacing.xs} - ${theme.variables.size.spacing.xxxs})`:theme.variables.size.spacing.xs,basePaddingHorizontal=getPaddingHorizontal(theme,size),paddingRight=`calc(${basePaddingHorizontal} + ${theme.variables.size.dimension.icon.m} + ${iconTextGap})`,paddingLeft=hasLeftIcon?`calc(${basePaddingHorizontal} + ${theme.variables.size.dimension.icon[size]} + ${iconTextGap})`:basePaddingHorizontal;return{display:"grid",verticalAlign:"top",alignItems:"stretch",width:"100%",borderRadius:"inherit",position:"relative",fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,lineHeight:theme.variables.size.lineHeight.xl,"&::after":{content:"attr(data-value) ' '",boxSizing:"border-box",fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,gridArea:"1 / 1",whiteSpace:"pre-wrap",visibility:"hidden",maxHeight:maxTextAreaHeight},textarea:{all:"unset",resize:"none",gridArea:"1 / 1",cursor:"text",color:theme.values.color.text.primary.default,...getInputTextPlaceholder({theme})},"textarea::placeholder":{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"},"&::after, textarea":{minWidth:"0",overflowWrap:"break-word",padding:`${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`}}}),StyledTextAreaWrapper=styled("div",{target:"eez85mj1",label:"StyledTextAreaWrapper"})({borderRadius:"inherit",width:"100%"}),getPromptTextAreaLabelId=name=>`${name}_PromptTextAreaLabel`,getAutocompleteAriaProps=({name,isAutocompleteListOpen,selectedListItem})=>({"aria-autocomplete":"list","aria-controls":isAutocompleteListOpen?getAutocompleteListId(name):void 0,"aria-activedescendant":selectedListItem?.id}),getComboboxProps=({name,labelId,isAutocompleteListOpen})=>({role:"combobox","aria-expanded":!!isAutocompleteListOpen,"aria-controls":isAutocompleteListOpen?getAutocompleteListId(name):void 0,"aria-labelledby":labelId});export const PromptTextArea=forwardRef(({dataE2eTestId,label,name,value,placeholder,maxTextAreaHeight="200px",selectedListItem,isAutocompleteListOpen,hasAutocomplete,hasLeftIcon,rows=1,size,onChange,...rest},ref)=>{useEffect(()=>{let textArea=ref&&"function"!=typeof ref?ref.current:null;textArea&&(textArea.parentNode.dataset.value=value)},[value,ref]);let autocompleteAriaProps=hasAutocomplete?getAutocompleteAriaProps({name,isAutocompleteListOpen,selectedListItem}):{},labelId=getPromptTextAreaLabelId(name),textAreaElm=React.createElement(StyledTextAreaContainer,{maxTextAreaHeight:maxTextAreaHeight,hasLeftIcon:hasLeftIcon,size:size},React.createElement(ScreenReaderText,{id:labelId},label),React.createElement("textarea",{...rest,"data-e2e-test-id":dataE2eTestId,ref:ref,name:name,value:value,placeholder:placeholder,onChange:onChange,rows:rows,...autocompleteAriaProps})),comboboxProps=hasAutocomplete?getComboboxProps({name,labelId,isAutocompleteListOpen}):{};return React.createElement(StyledTextAreaWrapper,comboboxProps,textAreaElm)});

package/build/esm/components/RadioCard/RadioCard.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{Inline}from"../Inline/Inline";import{Stack}from"../Stack/Stack";import{Text,getTextLineHeight}from"../Typography/Text/Text";import{RadioRaw,StyledRadioContainer}from"../Form/Radio/Radio";import{getPressedStyles}from"../../shared/mixins";let CustomStyledRadioContainer=styled(StyledRadioContainer,{target:"e1gnzs790",label:"CustomStyledRadioContainer"})(({theme,checked,disabled,isInteractable})=>({display:"block",backgroundColor:theme.values.color.background.primary.default,borderRadius:theme.variables.size.borderRadius.xs,border:`solid 1px ${theme.values.color.border.secondary.default}`,color:theme.values.color.text.primary.default,padding:theme.variables.size.spacing.m,...isInteractable&&!checked&&{"&:hover":{backgroundColor:theme.values.color.background.secondary.default,borderColor:theme.values.color.border.secondary.default}},...checked&&getPressedStyles({theme}),...disabled&&{opacity:theme.variables.opacity.disabled}})),MinHeight=styled("div",{target:"e1gnzs791",label:"MinHeight"})(({theme,size})=>({minHeight:`calc(${theme.variables.size.font[size]} * ${getTextLineHeight({theme,size})})`,display:"flex",alignItems:"center"})),ReadOnlyOpacity=styled("div",{target:"e1gnzs792",label:"ReadOnlyOpacity"})(({theme,readOnly})=>({...readOnly&&{opacity:theme.variables.opacity.disabled}}));export const RadioCard=React.forwardRef(({label,labelHint,checked,disabled,readOnly,renderContent,size="m","data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let textColor=checked?"accent":"primary";return React.createElement(CustomStyledRadioContainer,{as:"label",disabled:disabled,checked:checked,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"RadioCard",isInteractable:!disabled&&!readOnly},React.createElement(Inline,{space:"m",alignItems:"spaceBetween",fullWidth:!0,noWrap:!0},React.createElement(Inline,{space:"s",fullWidth:!0,noWrap:!0},React.createElement(ReadOnlyOpacity,{readOnly:readOnly&&!disabled},React.createElement(RadioRaw,{...rest,ref:ref,disabled:disabled||readOnly,checked:checked,size:size,labelSize:size})),React.createElement(Stack,{space:"zero"},React.createElement(Text,{weight:"bold",color:textColor,size:size},label),React.createElement(Text,{color:checked?"accent":"tertiary",size:"s"},labelHint))),renderContent&&React.createElement(MinHeight,{size:size},renderContent({isSelected:checked}))))});
+import React from"react";import styled from"@emotion/styled";import{Inline}from"../Inline/Inline";import{Stack}from"../Stack/Stack";import{Text,getTextLineHeight}from"../Typography/Text/Text";import{RadioRaw,StyledRadioContainer}from"../Form/Radio/Radio";import{getPressedStyles}from"../../shared/mixins";let CustomStyledRadioContainer=styled(StyledRadioContainer,{target:"e1clkch20",label:"CustomStyledRadioContainer"})(({theme,checked,disabled,isInteractable})=>({display:"block",backgroundColor:theme.values.color.background.primary.default,borderRadius:theme.variables.size.borderRadius.xs,border:`solid 1px ${theme.values.color.border.secondary.default}`,color:theme.values.color.text.primary.default,padding:theme.variables.size.spacing.m,...isInteractable&&!checked&&{"&:hover":{backgroundColor:theme.values.color.background.secondary.default,borderColor:theme.values.color.border.secondary.default}},...checked&&getPressedStyles({theme}),...disabled&&{opacity:theme.variables.opacity.disabled}})),MinHeight=styled("div",{target:"e1clkch21",label:"MinHeight"})(({theme,size="m"})=>({minHeight:`calc(${theme.variables.size.font[size]} * ${getTextLineHeight({theme,size})})`,display:"flex",alignItems:"center"})),ReadOnlyOpacity=styled("div",{target:"e1clkch22",label:"ReadOnlyOpacity"})(({theme,readOnly})=>({...readOnly&&{opacity:theme.variables.opacity.disabled}}));export const RadioCard=React.forwardRef(({label,labelHint,checked,disabled,readOnly,renderContent,size="m","data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let textColor=checked?"accent":"primary";return React.createElement(CustomStyledRadioContainer,{as:"label",disabled:disabled,checked:checked,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"RadioCard",isInteractable:!disabled&&!readOnly},React.createElement(Inline,{space:"m",alignItems:"spaceBetween",fullWidth:!0,noWrap:!0},React.createElement(Inline,{space:"s",fullWidth:!0,noWrap:!0},React.createElement(ReadOnlyOpacity,{readOnly:readOnly&&!disabled},React.createElement(RadioRaw,{...rest,ref:ref,disabled:disabled||readOnly,checked:checked,size:size,labelSize:size})),React.createElement(Stack,{space:"zero"},React.createElement(Text,{weight:"bold",color:textColor,size:size},label),React.createElement(Text,{color:checked?"accent":"tertiary",size:"s"},labelHint))),renderContent&&React.createElement(MinHeight,{size:size},renderContent({isSelected:checked??!1}))))});

package/build/esm/components/RoundButton/RoundButton.js

@@ -1 +1 @@
-import React,{useCallback}from"react";import styled from"@emotion/styled";import{getAriaAttributes}from"../../shared/ariaAttributes";import{Icon}from"../Icon/Icon";import{Inline}from"../Inline/Inline";let StyledRoundButton=styled("button",{target:"e1k0oyrd0",label:"StyledRoundButton"})(({theme,variant,size,disabled})=>({"&[type='button']":{appearance:"none",MozAppearance:"none",WebkitAppearance:"none"},border:0,display:"inline-block",textTransform:"none",textDecoration:"none",borderRadius:"100%",fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.s,lineHeight:theme.variables.size.lineHeight.xs,fontWeight:theme.variables.weight.bold,padding:theme.variables.size.spacing.xxs,cursor:"pointer",...disabled&&{opacity:theme.variables.opacity.disabled,cursor:"not-allowed"},..."s"===size&&{padding:theme.variables.size.spacing.xs},..."m"===size&&{padding:theme.variables.size.spacing.s},..."primary"===variant&&{backgroundColor:theme.values.color.background.accent.default,color:theme.values.color.text.onAccent.default,...!disabled&&{"&:hover":{backgroundColor:theme.values.color.background.accent.hover},"&:active":{backgroundColor:theme.values.color.background.accent.active}}},..."secondary"===variant&&{border:"2px solid",color:theme.values.color.text.secondary.default,backgroundColor:theme.values.color.background.transparent.default,borderColor:theme.values.color.border.secondary.default,padding:`${parseInt(theme.variables.size.spacing.xxs,10)-2}px`,..."s"===size&&{padding:`${parseInt(theme.variables.size.spacing.xs,10)-2}px`},..."m"===size&&{padding:`${parseInt(theme.variables.size.spacing.s,10)-2}px`},...!disabled&&{"&:hover":{borderColor:theme.values.color.border.secondary.hover,backgroundColor:theme.values.color.background.transparent.hover},"&:active":{borderColor:theme.values.color.border.secondary.active}}},..."tertiary"===variant&&{color:theme.values.color.text.secondary.default,backgroundColor:theme.values.color.background.transparent.default,...!disabled&&{"&:hover":{color:theme.values.color.text.secondary.default,backgroundColor:theme.values.color.background.transparent.hover},"&:active":{color:theme.values.color.text.primary.default,backgroundColor:theme.values.color.background.transparent.active}}}}));export const RoundButton=React.forwardRef(({ariaAttributes,onClick,onFocus,onBlur,type="button",disabled,variant="tertiary",size="s",as,icon,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let mergedAriaAttributes=getAriaAttributes(rest,ariaAttributes),handleClick=useCallback(e=>{disabled&&e.preventDefault(),onClick&&onClick(e)},[disabled,onClick]);return React.createElement(StyledRoundButton,{ref:ref,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"RoundButton",as:as,variant:variant,size:size,disabled:disabled,type:"a"===as?void 0:type,onClick:handleClick,onFocus:onFocus,onBlur:onBlur,...rest,...mergedAriaAttributes},React.createElement(Inline,{vAlignItems:"center",alignItems:"center",space:"xxs",noWrap:!0},icon&&React.createElement(Icon,{size:"s",name:icon,"data-testid":icon,"data-e2e-test-id":icon})))});
+import React,{useCallback}from"react";import styled from"@emotion/styled";import{forwardRefPolymorphic}from"../../shared/forwardRefPolymorphic";import{getAriaAttributes}from"../../shared/ariaAttributes";import{Icon}from"../Icon/Icon";import{Inline}from"../Inline/Inline";let StyledRoundButton=styled("button",{target:"e5igjiq0",label:"StyledRoundButton"})(({theme,variant,size,disabled})=>({"&[type='button']":{appearance:"none",MozAppearance:"none",WebkitAppearance:"none"},border:0,display:"inline-block",textTransform:"none",textDecoration:"none",borderRadius:"100%",fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.s,lineHeight:theme.variables.size.lineHeight.xs,fontWeight:theme.variables.weight.bold,padding:theme.variables.size.spacing.xxs,cursor:"pointer",...disabled&&{opacity:theme.variables.opacity.disabled,cursor:"not-allowed"},..."s"===size&&{padding:theme.variables.size.spacing.xs},..."m"===size&&{padding:theme.variables.size.spacing.s},..."primary"===variant&&{backgroundColor:theme.values.color.background.accent.default,color:theme.values.color.text.onAccent.default,...!disabled&&{"&:hover":{backgroundColor:theme.values.color.background.accent.hover},"&:active":{backgroundColor:theme.values.color.background.accent.active}}},..."secondary"===variant&&{border:"2px solid",color:theme.values.color.text.secondary.default,backgroundColor:theme.values.color.background.transparent.default,borderColor:theme.values.color.border.secondary.default,padding:`${parseInt(theme.variables.size.spacing.xxs,10)-2}px`,..."s"===size&&{padding:`${parseInt(theme.variables.size.spacing.xs,10)-2}px`},..."m"===size&&{padding:`${parseInt(theme.variables.size.spacing.s,10)-2}px`},...!disabled&&{"&:hover":{borderColor:theme.values.color.border.secondary.hover,backgroundColor:theme.values.color.background.transparent.hover},"&:active":{borderColor:theme.values.color.border.secondary.active}}},..."tertiary"===variant&&{color:theme.values.color.text.secondary.default,backgroundColor:theme.values.color.background.transparent.default,...!disabled&&{"&:hover":{color:theme.values.color.text.secondary.default,backgroundColor:theme.values.color.background.transparent.hover},"&:active":{color:theme.values.color.text.primary.default,backgroundColor:theme.values.color.background.transparent.active}}}}));export const RoundButton=forwardRefPolymorphic(({ariaAttributes,onClick,onFocus,onBlur,type="button",disabled,variant="tertiary",size="s",as,icon,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let mergedAriaAttributes=getAriaAttributes(rest,ariaAttributes),handleClick=useCallback(e=>{disabled&&e.preventDefault(),onClick&&onClick(e)},[disabled,onClick]);return React.createElement(StyledRoundButton,{ref:ref,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"RoundButton",as:as,variant:variant,size:size,disabled:disabled,type:"a"===as?void 0:type??void 0,onClick:handleClick,onFocus:onFocus,onBlur:onBlur,...rest,...mergedAriaAttributes},React.createElement(Inline,{vAlignItems:"center",alignItems:"center",space:"xxs",noWrap:!0},icon&&React.createElement(Icon,{size:"s",name:icon,"data-testid":icon,"data-e2e-test-id":icon})))});

package/build/esm/components/SearchResult/SearchResult.js

@@ -1 +1 @@
-import React,{useRef}from"react";import styled from"@emotion/styled";import{Columns,Column}from"../Column/Columns";import{Icon}from"../Icon/Icon";import{Inline}from"../Inline/Inline";import{Stack}from"../Stack/Stack";import{StyledText}from"../Typography/StyledText/StyledText";import{Badge}from"../Badge/Badge";import{TextClamped}from"../Typography/TextClamped/TextClamped";import{Text}from"../Typography/Text/Text";let StyledResultContainer=styled("div",{target:"ejj4x3a0",label:"StyledResultContainer"})(()=>({position:"relative",textDecoration:"none"})),StyledLinkTitle=styled("div",{target:"ejj4x3a1",label:"StyledLinkTitle"})(({theme})=>({color:theme.values.color.text.accent.default})),StyledLinkContainerOnHover=styled("div",{target:"ejj4x3a2",label:"StyledLinkContainerOnHover"})(({theme})=>({"> a":{textDecoration:"none",color:theme.values.color.text.accent.default},"&:hover":{[`${StyledLinkTitle}`]:{textDecoration:"underline"}}})),StyledSecLinkTitle=styled("span",{target:"ejj4x3a3",label:"StyledSecLinkTitle"})(({theme})=>({display:"list-item",marginLeft:theme.variables.size.spacing.m,paddingTop:theme.variables.size.spacing.xxxs,paddingBottom:theme.variables.size.spacing.xxxs,"&:hover":{"> span":{textDecoration:"underline",color:theme.values.color.text.primary.default}}})),StyledSecLinkContainerOnHover=styled("div",{target:"ejj4x3a4",label:"StyledSecLinkContainerOnHover"})(({theme})=>({"> a":{textDecoration:"none",color:theme.values.color.text.tertiary.default},"&:hover":{[`${StyledSecLinkTitle}`]:{color:theme.values.color.text.tertiary.default}}})),SecondaryTargets=({data})=>React.createElement(React.Fragment,null,data.map(({title,link:SecLink,body,"data-e2e-test-id":dataE2eTestId},i)=>{let key=`${title}-${i}`;return React.createElement(StyledSecLinkContainerOnHover,{key:key,"data-e2e-test-id":dataE2eTestId},React.createElement(SecLink,null,React.createElement(StyledSecLinkTitle,null,React.createElement(Text,{size:"m",color:"primary",as:"span"},React.createElement(StyledText,null,title))),body&&React.createElement(TextClamped,{size:"s",color:"tertiary",lines:2},React.createElement(StyledText,null,body))))})),BadgeWithBottomPadding=styled("div",{target:"ejj4x3a5",label:"BadgeWithBottomPadding"})(({theme})=>({paddingBottom:theme.variables.size.spacing.xxxs}));export function SearchResult({title,subtitle,icon,details,body,secondaryTargets,link,labels,"data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let containerRef=useRef(null),spacing=subtitle||labels?.length?"xxs":"zero";return React.createElement(StyledResultContainer,{ref:containerRef,"data-ds-id":"SearchResult",...ariaAttributes},React.createElement(Columns,{gap:"m"},icon&&React.createElement(Column,{size:"narrow"},React.createElement(Icon,{name:icon,color:"tertiary"})),React.createElement(Column,{size:"fill"},React.createElement(Stack,{space:"xxs"},React.createElement(StyledLinkContainerOnHover,{"data-e2e-test-id":dataE2eTestId},React.createElement(link,null,React.createElement(Stack,{space:spacing},React.createElement(Columns,{gap:"xxs"},React.createElement(Column,{size:[12,12,"fill"]},React.createElement(StyledLinkTitle,null,React.createElement(Stack,{space:"zero"},React.createElement(TextClamped,{color:"accent",weight:"bold",lines:3,hyphens:"auto"},React.createElement(StyledText,null,title)),subtitle&&React.createElement(TextClamped,{color:"accent",lines:3,size:"s"},React.createElement(StyledText,null,subtitle))))),labels&&!!labels.length&&React.createElement(Column,{size:"narrow"},React.createElement(Inline,{space:"xs"},labels.map((label,i)=>{let key=`${i}${label}`;return React.createElement(BadgeWithBottomPadding,{key:key},React.createElement(Badge,{text:label}))})))),React.createElement(Stack,{space:"xxs"},details&&!!details.length&&React.createElement(Stack,{space:"zero"},details.slice(0,3).map(detail=>React.createElement(TextClamped,{color:"primary",size:"s",key:detail,lines:3},React.createElement(StyledText,null,detail)))),body&&React.createElement(TextClamped,{size:"s",lines:2},React.createElement(StyledText,null,body)))))),secondaryTargets&&!!secondaryTargets.length&&React.createElement(SecondaryTargets,{data:secondaryTargets})))))}SearchResult.defaultProps={icon:null,details:[],body:null,secondaryTargets:[],labels:[],"data-e2e-test-id":void 0};
+import React,{useRef}from"react";import styled from"@emotion/styled";import{Columns,Column}from"../Column/Columns";import{Icon}from"../Icon/Icon";import{Inline}from"../Inline/Inline";import{Stack}from"../Stack/Stack";import{StyledText}from"../Typography/StyledText/StyledText";import{Badge}from"../Badge/Badge";import{TextClamped}from"../Typography/TextClamped/TextClamped";import{Text}from"../Typography/Text/Text";let StyledResultContainer=styled("div",{target:"enm6m950",label:"StyledResultContainer"})(()=>({position:"relative",textDecoration:"none"})),StyledLinkTitle=styled("div",{target:"enm6m951",label:"StyledLinkTitle"})(({theme})=>({color:theme.values.color.text.accent.default})),StyledLinkContainerOnHover=styled("div",{target:"enm6m952",label:"StyledLinkContainerOnHover"})(({theme})=>({"> a":{textDecoration:"none",color:theme.values.color.text.accent.default},"&:hover":{[`${StyledLinkTitle}`]:{textDecoration:"underline"}}})),StyledSecLinkTitle=styled("span",{target:"enm6m953",label:"StyledSecLinkTitle"})(({theme})=>({display:"list-item",marginLeft:theme.variables.size.spacing.m,paddingTop:theme.variables.size.spacing.xxxs,paddingBottom:theme.variables.size.spacing.xxxs,"&:hover":{"> span":{textDecoration:"underline",color:theme.values.color.text.primary.default}}})),StyledSecLinkContainerOnHover=styled("div",{target:"enm6m954",label:"StyledSecLinkContainerOnHover"})(({theme})=>({"> a":{textDecoration:"none",color:theme.values.color.text.tertiary.default},"&:hover":{[`${StyledSecLinkTitle}`]:{color:theme.values.color.text.tertiary.default}}})),SecondaryTargets=({data})=>React.createElement(React.Fragment,null,data.map(({title,link:SecLink,body,"data-e2e-test-id":dataE2eTestId},i)=>{let key=`${title}-${i}`;return React.createElement(StyledSecLinkContainerOnHover,{key:key,"data-e2e-test-id":dataE2eTestId},React.createElement(SecLink,null,React.createElement(StyledSecLinkTitle,null,React.createElement(Text,{size:"m",color:"primary",as:"span"},React.createElement(StyledText,null,title))),body&&React.createElement(TextClamped,{size:"s",color:"tertiary",lines:2},React.createElement(StyledText,null,body))))})),BadgeWithBottomPadding=styled("div",{target:"enm6m955",label:"BadgeWithBottomPadding"})(({theme})=>({paddingBottom:theme.variables.size.spacing.xxxs}));export function SearchResult({title,subtitle,icon,details,body,secondaryTargets,link,labels,"data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let containerRef=useRef(null),spacing=subtitle||labels?.length?"xxs":"zero";return React.createElement(StyledResultContainer,{ref:containerRef,"data-ds-id":"SearchResult",...ariaAttributes},React.createElement(Columns,{gap:"m"},icon&&React.createElement(Column,{size:"narrow"},React.createElement(Icon,{name:icon,color:"tertiary"})),React.createElement(Column,{size:"fill"},React.createElement(Stack,{space:"xxs"},React.createElement(StyledLinkContainerOnHover,{"data-e2e-test-id":dataE2eTestId},React.createElement(link,null,React.createElement(Stack,{space:spacing},React.createElement(Columns,{gap:"xxs"},React.createElement(Column,{size:[12,12,"fill"]},React.createElement(StyledLinkTitle,null,React.createElement(Stack,{space:"zero"},React.createElement(TextClamped,{color:"accent",weight:"bold",lines:3,hyphens:"auto"},React.createElement(StyledText,null,title)),subtitle&&React.createElement(TextClamped,{color:"accent",lines:3,size:"s"},React.createElement(StyledText,null,subtitle))))),labels&&!!labels.length&&React.createElement(Column,{size:"narrow"},React.createElement(Inline,{space:"xs"},labels.map((label,i)=>{let key=`${i}${label}`;return React.createElement(BadgeWithBottomPadding,{key:key},React.createElement(Badge,{text:label}))})))),React.createElement(Stack,{space:"xxs"},details&&!!details.length&&React.createElement(Stack,{space:"zero"},details.slice(0,3).map(detail=>React.createElement(TextClamped,{color:"primary",size:"s",key:detail,lines:3},React.createElement(StyledText,null,detail)))),body&&React.createElement(TextClamped,{size:"s",lines:2},React.createElement(StyledText,null,body)))))),secondaryTargets&&!!secondaryTargets.length&&React.createElement(SecondaryTargets,{data:secondaryTargets})))))}SearchResult.defaultProps={icon:void 0,details:[],body:void 0,secondaryTargets:[],labels:[],"data-e2e-test-id":void 0};

package/build/esm/components/SegmentedProgressBar/-utils/getPercentagesForVariants.d.ts

@@ -1,5 +1,7 @@
 import type { ValuesVariant, Value, StyleVariant } from "../-types";
-export declare const getPercentagesForVariants: (maxValue: number, values: Partial<Record<ValuesVariant, Value>>) => {
+type VariantPercentage = {
     percentage: number;
     variant: StyleVariant;
-}[];
+};
+export declare const getPercentagesForVariants: (maxValue: number, values: Partial<Record<ValuesVariant, Value>>) => VariantPercentage[];
+export {};

package/build/esm/components/SegmentedProgressBar/-utils/getPercentagesForVariants.js

@@ -1 +1 @@
-import{variants}from"../-constants";export const getPercentagesForVariants=(maxValue,values)=>{let result=variants.map(variant=>{let percentage=100*values[variant]/maxValue;return percentage>0?{percentage,variant:variant}:null}),usedPercentage=result.reduce((currentValue,item)=>currentValue+(item?item.percentage:0),0);return usedPercentage<100&&result.push({percentage:100-usedPercentage,variant:"empty"}),result.filter(Boolean)};
+import{variants}from"../-constants";export const getPercentagesForVariants=(maxValue,values)=>{let result=variants.map(variant=>{let percentage=100*(values[variant]??0)/maxValue;return percentage>0?{percentage,variant:variant}:null}),usedPercentage=result.reduce((currentValue,item)=>currentValue+(item?item.percentage:0),0);return usedPercentage<100&&result.push({percentage:100-usedPercentage,variant:"empty"}),result.filter(item=>null!==item)};

package/build/esm/components/SegmentedProgressBar/LegendPopover.d.ts

@@ -6,6 +6,7 @@ type LegendPopoverProps = {
         variant: StyleVariant;
     }[];
     monochrome: boolean;
-} & Pick<SegmentedProgressBarProps, "getTooltipText" | "tooltipProps">;
+    getTooltipText: NonNullable<SegmentedProgressBarProps["getTooltipText"]>;
+} & Pick<SegmentedProgressBarProps, "tooltipProps">;
 export declare function LegendPopover({ percentages, getTooltipText, monochrome, tooltipProps: { triggerAriaLabel, portalContainer }, }: LegendPopoverProps): React.ReactElement;
 export {};

package/build/esm/components/SegmentedProgressBar/LegendPopover.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{PictogramButton}from"../PictogramButton/PictogramButton";import{Popover}from"../Popover/Popover";import{Text}from"../Typography/Text/Text";import{Box}from"../Box/Box";import{Inline}from"../Inline/Inline";import{Stack}from"../Stack/Stack";import{getBackgroundColor}from"./-utils/getBackgroundColor";let StyledKey=styled("div",{target:"e1liqb4f0",label:"StyledKey"})(({theme,variant,monochrome})=>({width:theme.variables.size.dimension.legendKey.width,height:theme.variables.size.dimension.legendKey.width,borderRadius:theme.variables.size.borderRadius.full,backgroundColor:getBackgroundColor(theme,variant,monochrome)}));export function LegendPopover({percentages,getTooltipText,monochrome,tooltipProps:{triggerAriaLabel,portalContainer}}){let content=React.createElement(Box,{space:"m","data-e2e-test-id":"tooltipContent"},React.createElement(Stack,{space:"xs"},percentages.map(({percentage,variant})=>React.createElement(Inline,{space:"xs",vAlignItems:"center",key:variant},React.createElement(StyledKey,{variant:variant,monochrome:monochrome,"aria-hidden":!0}),React.createElement(Text,{size:"s",color:"secondary"},getTooltipText({percentage,variant}))))));return React.createElement(Popover,{content:content,portalContainer:portalContainer,defaultVerticalPlacement:"top"},React.createElement(PictogramButton,{icon:"help-circle",size:"xs","aria-label":triggerAriaLabel}))}
+import React from"react";import styled from"@emotion/styled";import{PictogramButton}from"../PictogramButton/PictogramButton";import{Popover}from"../Popover/Popover";import{Text}from"../Typography/Text/Text";import{Box}from"../Box/Box";import{Inline}from"../Inline/Inline";import{Stack}from"../Stack/Stack";import{getBackgroundColor}from"./-utils/getBackgroundColor";let StyledKey=styled("div",{target:"e1ah9t590",label:"StyledKey"})(({theme,variant,monochrome})=>({width:theme.variables.size.dimension.legendKey.width,height:theme.variables.size.dimension.legendKey.width,borderRadius:theme.variables.size.borderRadius.full,backgroundColor:getBackgroundColor(theme,variant,monochrome)}));export function LegendPopover({percentages,getTooltipText,monochrome,tooltipProps:{triggerAriaLabel="More information",portalContainer}={}}){let content=React.createElement(Box,{space:"m","data-e2e-test-id":"tooltipContent"},React.createElement(Stack,{space:"xs"},percentages.map(({percentage,variant})=>React.createElement(Inline,{space:"xs",vAlignItems:"center",key:variant},React.createElement(StyledKey,{variant:variant,monochrome:monochrome,"aria-hidden":!0}),React.createElement(Text,{size:"s",color:"secondary"},getTooltipText({percentage,variant}))))));return React.createElement(Popover,{content:content,portalContainer:portalContainer,defaultVerticalPlacement:"top"},React.createElement(PictogramButton,{icon:"help-circle",size:"xs","aria-label":triggerAriaLabel}))}

package/build/esm/components/SegmentedProgressBar/SegmentedProgressBar.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{getBackgroundColor}from"./-utils/getBackgroundColor";import{sanitizeInputValues}from"./-utils/sanitizeInputValues";import{getPercentagesForVariants}from"./-utils/getPercentagesForVariants";import{getTotalFilledValue}from"./-utils/getTotalFilledValue";import{LegendPopover}from"./LegendPopover";let StyledProgressBarContainer=styled("div",{target:"e1ou528a0",label:"StyledProgressBarContainer"})(({theme,squareCorners,weight})=>({width:"100%",lineHeight:0,backgroundColor:theme.values.color.background.placeholder.default,...!squareCorners&&{borderRadius:theme.variables.size.borderRadius.xs},height:"thin"===weight?theme.variables.size.spacing.xxs:theme.variables.size.spacing.xs,position:"relative"})),StyledSegment=styled("div",{target:"e1ou528a1",label:"StyledSegment"})(({theme,styleVariant,percentage,monochrome,filledPercentage})=>({height:"100%",backgroundColor:getBackgroundColor(theme,styleVariant,monochrome),width:`${percentage/filledPercentage*100}%`,minWidth:4,"&:first-of-type":{borderTopLeftRadius:"inherit",borderBottomLeftRadius:"inherit"},"&:last-of-type":{borderTopRightRadius:"inherit",borderBottomRightRadius:"inherit"}})),StyledSegmentContainer=styled("div",{target:"e1ou528a2",label:"StyledSegmentContainer"})(({theme,filledPercentage})=>({width:`${filledPercentage}%`,minWidth:"fit-content",display:"flex",flexDirection:"row",gap:theme.variables.size.spacing.xxxs,backgroundColor:theme.values.color.background.primary.default,borderRadius:"inherit",height:"100%"})),StyledProgressElement=styled("progress",{target:"e1ou528a3",label:"StyledProgressElement"})(({theme})=>({appearance:"none",height:1,width:1,margin:-1,overflow:"hidden",padding:0,opacity:theme.variables.opacity.hidden,position:"absolute"})),StyledContainer=styled("div",{target:"e1ou528a4",label:"StyledContainer"})(({theme})=>({width:"100%",display:"flex",gap:theme.variables.size.spacing.xs,alignItems:"center"}));export function SegmentedProgressBar({maxValue,values,weight="fat",squareCorners=!1,getTooltipText,tooltipProps={triggerAriaLabel:"More information"},privateProps:{monochrome}={monochrome:!1},"data-e2e-test-id":dataE2eTestId,id,...ariaAttributes}){let{sanitizedMaxValue,sanitizedValues}=sanitizeInputValues(maxValue,values),percentages=getPercentagesForVariants(sanitizedMaxValue,sanitizedValues),totalFilledValue=getTotalFilledValue(sanitizedValues),filledSegmentPercentages=percentages.filter(({variant})=>"empty"!==variant),filledPercentage=filledSegmentPercentages.reduce((currentValue,item)=>currentValue+item.percentage,0),segments=filledPercentage?React.createElement(StyledSegmentContainer,{filledPercentage:filledPercentage,"data-e2e-test-id":"segmentContainer"},filledSegmentPercentages.map(({percentage,variant})=>React.createElement(StyledSegment,{key:variant,"data-e2e-test-id":variant,styleVariant:variant,monochrome:monochrome,percentage:percentage,filledPercentage:filledPercentage}))):null;return React.createElement(StyledContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"SegmentedProgressBar"},React.createElement(StyledProgressBarContainer,{squareCorners:squareCorners,weight:weight,"data-e2e-test-id":"progressBarContainer"},React.createElement(StyledProgressElement,{max:sanitizedMaxValue,value:totalFilledValue,id:id,...ariaAttributes}),segments),!!getTooltipText&&React.createElement(LegendPopover,{percentages:percentages,getTooltipText:getTooltipText,tooltipProps:tooltipProps,monochrome:monochrome}))}
+import React from"react";import styled from"@emotion/styled";import{getBackgroundColor}from"./-utils/getBackgroundColor";import{sanitizeInputValues}from"./-utils/sanitizeInputValues";import{getPercentagesForVariants}from"./-utils/getPercentagesForVariants";import{getTotalFilledValue}from"./-utils/getTotalFilledValue";import{LegendPopover}from"./LegendPopover";let StyledProgressBarContainer=styled("div",{target:"eprpznh0",label:"StyledProgressBarContainer"})(({theme,squareCorners,weight})=>({width:"100%",lineHeight:0,backgroundColor:theme.values.color.background.placeholder.default,...!squareCorners&&{borderRadius:theme.variables.size.borderRadius.xs},height:"thin"===weight?theme.variables.size.spacing.xxs:theme.variables.size.spacing.xs,position:"relative"})),StyledSegment=styled("div",{target:"eprpznh1",label:"StyledSegment"})(({theme,styleVariant,percentage,monochrome,filledPercentage})=>({height:"100%",backgroundColor:getBackgroundColor(theme,styleVariant,monochrome),width:`${percentage/filledPercentage*100}%`,minWidth:4,"&:first-of-type":{borderTopLeftRadius:"inherit",borderBottomLeftRadius:"inherit"},"&:last-of-type":{borderTopRightRadius:"inherit",borderBottomRightRadius:"inherit"}})),StyledSegmentContainer=styled("div",{target:"eprpznh2",label:"StyledSegmentContainer"})(({theme,filledPercentage})=>({width:`${filledPercentage}%`,minWidth:"fit-content",display:"flex",flexDirection:"row",gap:theme.variables.size.spacing.xxxs,backgroundColor:theme.values.color.background.primary.default,borderRadius:"inherit",height:"100%"})),StyledProgressElement=styled("progress",{target:"eprpznh3",label:"StyledProgressElement"})(({theme})=>({appearance:"none",height:1,width:1,margin:-1,overflow:"hidden",padding:0,opacity:theme.variables.opacity.hidden,position:"absolute"})),StyledContainer=styled("div",{target:"eprpznh4",label:"StyledContainer"})(({theme})=>({width:"100%",display:"flex",gap:theme.variables.size.spacing.xs,alignItems:"center"}));export function SegmentedProgressBar({maxValue,values,weight="fat",squareCorners=!1,getTooltipText,tooltipProps={triggerAriaLabel:"More information"},privateProps:{monochrome=!1}={},"data-e2e-test-id":dataE2eTestId,id,...ariaAttributes}){let{sanitizedMaxValue,sanitizedValues}=sanitizeInputValues(maxValue,values),percentages=getPercentagesForVariants(sanitizedMaxValue,sanitizedValues),totalFilledValue=getTotalFilledValue(sanitizedValues),filledSegmentPercentages=percentages.filter(({variant})=>"empty"!==variant),filledPercentage=filledSegmentPercentages.reduce((currentValue,item)=>currentValue+item.percentage,0),segments=filledPercentage?React.createElement(StyledSegmentContainer,{filledPercentage:filledPercentage,"data-e2e-test-id":"segmentContainer"},filledSegmentPercentages.map(({percentage,variant})=>React.createElement(StyledSegment,{key:variant,"data-e2e-test-id":variant,styleVariant:variant,monochrome:monochrome,percentage:percentage,filledPercentage:filledPercentage}))):null;return React.createElement(StyledContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"SegmentedProgressBar"},React.createElement(StyledProgressBarContainer,{squareCorners:squareCorners,weight:weight,"data-e2e-test-id":"progressBarContainer"},React.createElement(StyledProgressElement,{max:sanitizedMaxValue,value:totalFilledValue,id:id,...ariaAttributes}),segments),getTooltipText&&React.createElement(LegendPopover,{percentages:percentages,getTooltipText:getTooltipText,tooltipProps:tooltipProps,monochrome:monochrome}))}

package/build/esm/components/ShadowWebComponent/ShadowWebComponent.js

@@ -1 +1 @@
-import React from"react";import{createRoot}from"react-dom/client";import{ThemeProvider,light,dark,Card,CardBox,H1,H2,H3,H4,CacheProvider,createCache}from"../../index";class SuchShadow extends HTMLElement{get theme(){return this.themeValue}set theme(value){this.themeValue=value,this.setAttribute("theme",value)}connectedCallback(){this.attachShadow({mode:"open"});let emotionCache=createCache({key:"shadow-css",container:this.shadowRoot});createRoot(this.shadowRoot).render(React.createElement(ThemeProvider,{theme:"light-theme"===this.theme?light:dark},React.createElement(CacheProvider,{value:emotionCache},React.createElement(Card,null,React.createElement(CardBox,null,React.createElement(H1,null,"I love you shadow unicorn!!!"),React.createElement(H2,null,"I love you shadow unicorn!!!"),React.createElement(H3,null,"I love you shadow unicorn!!!"),React.createElement(H4,null,"I love you shadow unicorn!!!"))))))}constructor(...args){super(...args),this.themeValue="light-theme"}}"undefined"==typeof customElements||customElements.get("shadow-element")||customElements.define("shadow-element",SuchShadow);export function ShadowWebComponent({theme}){return React.createElement("shadow-element",{theme},null)}
+import React from"react";import{createRoot}from"react-dom/client";import{ThemeProvider,light,dark,Card,CardBox,H1,H2,H3,H4,CacheProvider,createCache}from"../../index";class SuchShadow extends HTMLElement{get theme(){return this.themeValue}set theme(value){this.themeValue=value,this.setAttribute("theme",value)}connectedCallback(){let shadowRoot=this.attachShadow({mode:"open"}),emotionCache=createCache({key:"shadow-css",container:shadowRoot});createRoot(shadowRoot).render(React.createElement(ThemeProvider,{theme:"light-theme"===this.theme?light:dark},React.createElement(CacheProvider,{value:emotionCache},React.createElement(Card,null,React.createElement(CardBox,null,React.createElement(H1,null,"I love you shadow unicorn!!!"),React.createElement(H2,null,"I love you shadow unicorn!!!"),React.createElement(H3,null,"I love you shadow unicorn!!!"),React.createElement(H4,null,"I love you shadow unicorn!!!"))))))}constructor(...args){super(...args),this.themeValue="light-theme"}}"undefined"==typeof customElements||customElements.get("shadow-element")||customElements.define("shadow-element",SuchShadow);export function ShadowWebComponent({theme}){return React.createElement("shadow-element",{theme},null)}

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

@@ -17,4 +17,4 @@ export type SheetProps = {
     role?: PopupRole;
 };
 export declare const SHEET_MAX_HEIGHT = "80svh";
-export declare function Sheet({ id, children, hasBackdrop, isVisible, onClose, onUnmount, portalContainer, dismissOnOutsideClick, disableInitialFocus, disableReturnFocusToTrigger, onClickOutsideDeactivates, "data-e2e-test-id": dataE2eTestId, role, ...ariaAttributes }: SheetProps): React.ReactElement;
+export declare function Sheet({ id, children, hasBackdrop, isVisible, onClose, onUnmount, portalContainer, dismissOnOutsideClick, disableInitialFocus, disableReturnFocusToTrigger, onClickOutsideDeactivates, "data-e2e-test-id": dataE2eTestId, role, ...ariaAttributes }: SheetProps): React.ReactElement | null;

package/build/esm/components/Sheet/Sheet.js

@@ -1 +1 @@
-import React,{useRef,useLayoutEffect,useState,useEffect,useCallback}from"react";import styled from"@emotion/styled";import{createPortal}from"react-dom";import{keyframes,Global}from"@emotion/react";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";import{Container}from"../Container/Container";import{useDragDown}from"../../shared/useDragDown";import{StyledBackdrop}from"../Lightbox/Lightbox";import{isWithinScrolledElement}from"../../shared/isWithinScrolledElement";export const SHEET_MAX_HEIGHT="80svh";let StyledContainer=styled("div",{target:"e12q8tu60",label:"StyledContainer"})(({theme,containerHeight,isClosing,isOpening,dragOffset=0})=>{let animation;if(containerHeight){let slideOut=keyframes({from:{transform:`translateY(${dragOffset}px)`},to:{transform:`translateY(${containerHeight}px)`}}),slideIn=keyframes({from:{transform:`translateY(${containerHeight}px)`},to:{transform:"translateY(0px)"}});animation=isClosing?`200ms ease-out forwards ${slideOut}`:isOpening?`300ms ease-out forwards ${slideIn}`:"none"}return{position:"fixed",left:0,bottom:0,width:"100vw",transformOrigin:"bottom",animation,boxSizing:"border-box",zIndex:theme.variables.zIndex.modal,"> div":{borderBottomLeftRadius:0,borderBottomRightRadius:0}}}),StyledContentContainer=styled("div",{target:"e12q8tu61",label:"StyledContentContainer"})(({theme,isClosing,isOpening})=>{let animation,fadeOut=keyframes({from:{opacity:theme.variables.opacity.visible},to:{opacity:theme.variables.opacity.hidden}}),fadeIn=keyframes({from:{opacity:theme.variables.opacity.hidden},to:{opacity:theme.variables.opacity.visible}}),opacity=theme.variables.opacity.hidden;return isClosing?animation=`50ms ease-out forwards ${fadeOut}`:isOpening?animation=`50ms ease-out 250ms forwards ${fadeIn}`:(animation="none",opacity=theme.variables.opacity.visible),{overflow:"auto",maxHeight:"80svh",boxSizing:"border-box",overscrollBehavior:"none",backgroundColor:theme.values.color.background.elevated.default,opacity,animation}}),StyledHandleContainer=styled("div",{target:"e12q8tu62",label:"StyledHandleContainer"})(({theme,isContentContainerScrolled})=>({padding:`${theme.variables.size.spacing.xs} 0`,display:"flex",justifyContent:"center",backgroundColor:theme.values.color.background.elevated.default,...isContentContainerScrolled&&{boxShadow:theme.values.elevation[1]}})),StyledHandle=styled("div",{target:"e12q8tu63",label:"StyledHandle"})(({theme})=>({width:"80px",height:"4px",borderRadius:theme.variables.size.borderRadius.xs,backgroundColor:theme.values.color.divider.secondary}));export function Sheet({id,children,hasBackdrop,isVisible,onClose,onUnmount,portalContainer,dismissOnOutsideClick=!0,disableInitialFocus,disableReturnFocusToTrigger,onClickOutsideDeactivates,"data-e2e-test-id":dataE2eTestId,role,...ariaAttributes}){let[isClosing,setClosing]=useState(!1),[isOpening,setOpening]=useState(!1),[containerHeight,setContainerHeight]=useState(0),[isContentContainerScrolled,setContentContainerScrolled]=useState(!1),containerRef=useRef(null),contentContainerRef=useRef(null),handleContainerRef=useRef(null),prevVisibleState=useRef(!1),dragOffset=useRef(0),isDragStarted=useRef(!1);useLayoutEffect(()=>{isVisible&&setOpening(!0)},[isVisible]),useLayoutEffect(()=>{isVisible&&containerRef.current&&setContainerHeight(containerRef.current.getBoundingClientRect().height)},[isVisible,children]),useEffect(()=>{!isVisible&&prevVisibleState.current&&setClosing(!0),prevVisibleState.current=isVisible},[isVisible]),useEffect(()=>{isVisible&&isClosing&&onClose()},[isVisible,isClosing,onClose]);let handleDragStart=useCallback(()=>{requestAnimationFrame(()=>{contentContainerRef.current?.scrollTop===0&&containerRef.current&&(containerRef.current.style.animation="none",containerRef.current.style.transition="transform 0.1s ease",containerRef.current.style.transform="translateY(0px)",dragOffset.current=0,isDragStarted.current=!0)})},[containerRef,contentContainerRef]),handleDrag=useCallback((_,offsetFromStart)=>{let containerCurrentHeight=containerRef.current?.getBoundingClientRect()?.height??0;requestAnimationFrame(()=>{isDragStarted.current&&containerRef.current&&contentContainerRef.current?.scrollTop===0&&offsetFromStart<containerCurrentHeight&&(containerRef.current.style.transform=`translateY(${offsetFromStart}px)`,dragOffset.current=offsetFromStart)})},[containerRef,contentContainerRef]),handleDragEnd=useCallback((_,offsetFromStart)=>{let containerCurrentHeight=containerRef.current?.getBoundingClientRect()?.height??0,minDragDistance=containerCurrentHeight<300?containerCurrentHeight/4:150;requestAnimationFrame(()=>{isDragStarted.current&&(offsetFromStart>=minDragDistance&&contentContainerRef.current?.scrollTop===0?onClose():containerRef.current&&(containerRef.current.style.transform="translateY(0px)",dragOffset.current=0)),isDragStarted.current=!1})},[containerRef,onClose]),handleDragCancel=useCallback(()=>{requestAnimationFrame(()=>{isDragStarted.current&&containerRef.current&&(containerRef.current.style.transform="translateY(0px)",dragOffset.current=0),isDragStarted.current=!1})},[containerRef]),shouldInitiateDrag=useCallback(event=>{let target=event.target;return!!handleContainerRef.current?.contains(target)||!(isWithinScrolledElement(target,containerRef.current)||contentContainerRef.current?.scrollTop>0)},[containerRef,contentContainerRef,handleContainerRef]);useDragDown({ref:containerRef,isVisible,onDragStart:handleDragStart,onDrag:handleDrag,onDragEnd:handleDragEnd,onDragCancel:handleDragCancel,shouldInitiateDrag});let handlePostDeactivate=useCallback(()=>{onClose()},[onClose]);if(!((isVisible||isClosing)&&!(isVisible&&isClosing)))return null;let sheetElm=React.createElement(React.Fragment,null,React.createElement(Global,{styles:[{html:{overflow:"hidden",overscrollBehavior:"none"}}]}),React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{clickOutsideDeactivates:dismissOnOutsideClick&&onClickOutsideDeactivates?onClickOutsideDeactivates:dismissOnOutsideClick,allowOutsideClick:!0,escapeDeactivates:!0,preventScroll:!0,initialFocus:()=>!disableInitialFocus,returnFocusOnDeactivate:!disableReturnFocusToTrigger,fallbackFocus:'[data-ds-id="Sheet"]',onPostDeactivate:handlePostDeactivate}},React.createElement(StyledContainer,{...id?{id}:{},"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Sheet",containerHeight:containerHeight,isClosing:isClosing,isOpening:isOpening,ref:containerRef,dragOffset:dragOffset.current,onAnimationEnd:()=>{isClosing?(setClosing(!1),setContainerHeight(0),dragOffset.current=0,onUnmount&&onUnmount()):isOpening&&setOpening(!1)},role:role,...ariaAttributes},React.createElement(Container,{elevation:4},React.createElement(StyledHandleContainer,{ref:handleContainerRef,isContentContainerScrolled:isContentContainerScrolled},React.createElement(StyledHandle,null)),React.createElement(StyledContentContainer,{isClosing:isClosing,isOpening:isOpening,ref:contentContainerRef,onScroll:()=>{setContentContainerScrolled(contentContainerRef.current?.scrollTop!==0)},onAnimationEnd:evt=>evt.stopPropagation()},children))))),wrappedSheet=hasBackdrop&&!isClosing?React.createElement(StyledBackdrop,null,sheetElm):sheetElm,container=portalContainer||!!document&&document.body;return container&&createPortal(wrappedSheet,container)}
+import React,{useRef,useLayoutEffect,useState,useEffect,useCallback}from"react";import styled from"@emotion/styled";import{createPortal}from"react-dom";import{keyframes,Global}from"@emotion/react";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";import{Container}from"../Container/Container";import{useDragDown}from"../../shared/useDragDown";import{StyledBackdrop}from"../Lightbox/Lightbox";import{isWithinScrolledElement}from"../../shared/isWithinScrolledElement";export const SHEET_MAX_HEIGHT="80svh";let StyledContainer=styled("div",{target:"e137uunh0",label:"StyledContainer"})(({theme,containerHeight,isClosing,isOpening,dragOffset=0})=>{let animation;if(containerHeight){let slideOut=keyframes({from:{transform:`translateY(${dragOffset}px)`},to:{transform:`translateY(${containerHeight}px)`}}),slideIn=keyframes({from:{transform:`translateY(${containerHeight}px)`},to:{transform:"translateY(0px)"}});animation=isClosing?`200ms ease-out forwards ${slideOut}`:isOpening?`300ms ease-out forwards ${slideIn}`:"none"}return{position:"fixed",left:0,bottom:0,width:"100vw",transformOrigin:"bottom",animation,boxSizing:"border-box",zIndex:theme.variables.zIndex.modal,"> div":{borderBottomLeftRadius:0,borderBottomRightRadius:0}}}),StyledContentContainer=styled("div",{target:"e137uunh1",label:"StyledContentContainer"})(({theme,isClosing,isOpening})=>{let animation,fadeOut=keyframes({from:{opacity:theme.variables.opacity.visible},to:{opacity:theme.variables.opacity.hidden}}),fadeIn=keyframes({from:{opacity:theme.variables.opacity.hidden},to:{opacity:theme.variables.opacity.visible}}),opacity=theme.variables.opacity.hidden;return isClosing?animation=`50ms ease-out forwards ${fadeOut}`:isOpening?animation=`50ms ease-out 250ms forwards ${fadeIn}`:(animation="none",opacity=theme.variables.opacity.visible),{overflow:"auto",maxHeight:"80svh",boxSizing:"border-box",overscrollBehavior:"none",backgroundColor:theme.values.color.background.elevated.default,opacity,animation}}),StyledHandleContainer=styled("div",{target:"e137uunh2",label:"StyledHandleContainer"})(({theme,isContentContainerScrolled})=>({padding:`${theme.variables.size.spacing.xs} 0`,display:"flex",justifyContent:"center",backgroundColor:theme.values.color.background.elevated.default,...isContentContainerScrolled&&{boxShadow:theme.values.elevation[1]}})),StyledHandle=styled("div",{target:"e137uunh3",label:"StyledHandle"})(({theme})=>({width:"80px",height:"4px",borderRadius:theme.variables.size.borderRadius.xs,backgroundColor:theme.values.color.divider.secondary}));export function Sheet({id,children,hasBackdrop,isVisible,onClose,onUnmount,portalContainer,dismissOnOutsideClick=!0,disableInitialFocus,disableReturnFocusToTrigger,onClickOutsideDeactivates,"data-e2e-test-id":dataE2eTestId,role,...ariaAttributes}){let[isClosing,setClosing]=useState(!1),[isOpening,setOpening]=useState(!1),[containerHeight,setContainerHeight]=useState(0),[isContentContainerScrolled,setContentContainerScrolled]=useState(!1),containerRef=useRef(null),contentContainerRef=useRef(null),handleContainerRef=useRef(null),prevVisibleState=useRef(!1),dragOffset=useRef(0),isDragStarted=useRef(!1);useLayoutEffect(()=>{isVisible&&setOpening(!0)},[isVisible]),useLayoutEffect(()=>{isVisible&&containerRef.current&&setContainerHeight(containerRef.current.getBoundingClientRect().height)},[isVisible,children]),useEffect(()=>{!isVisible&&prevVisibleState.current&&setClosing(!0),prevVisibleState.current=isVisible},[isVisible]),useEffect(()=>{isVisible&&isClosing&&onClose()},[isVisible,isClosing,onClose]);let handleDragStart=useCallback(()=>{requestAnimationFrame(()=>{contentContainerRef.current?.scrollTop===0&&containerRef.current&&(containerRef.current.style.animation="none",containerRef.current.style.transition="transform 0.1s ease",containerRef.current.style.transform="translateY(0px)",dragOffset.current=0,isDragStarted.current=!0)})},[containerRef,contentContainerRef]),handleDrag=useCallback((_,offsetFromStart)=>{let containerCurrentHeight=containerRef.current?.getBoundingClientRect()?.height??0;requestAnimationFrame(()=>{isDragStarted.current&&containerRef.current&&contentContainerRef.current?.scrollTop===0&&offsetFromStart<containerCurrentHeight&&(containerRef.current.style.transform=`translateY(${offsetFromStart}px)`,dragOffset.current=offsetFromStart)})},[containerRef,contentContainerRef]),handleDragEnd=useCallback((_,offsetFromStart)=>{let containerCurrentHeight=containerRef.current?.getBoundingClientRect()?.height??0,minDragDistance=containerCurrentHeight<300?containerCurrentHeight/4:150;requestAnimationFrame(()=>{isDragStarted.current&&(offsetFromStart>=minDragDistance&&contentContainerRef.current?.scrollTop===0?onClose():containerRef.current&&(containerRef.current.style.transform="translateY(0px)",dragOffset.current=0)),isDragStarted.current=!1})},[containerRef,onClose]),handleDragCancel=useCallback(()=>{requestAnimationFrame(()=>{isDragStarted.current&&containerRef.current&&(containerRef.current.style.transform="translateY(0px)",dragOffset.current=0),isDragStarted.current=!1})},[containerRef]),shouldInitiateDrag=useCallback(event=>{let target=event.target;return!!handleContainerRef.current?.contains(target)||!(isWithinScrolledElement(target,containerRef.current)||(contentContainerRef.current?.scrollTop??0)>0)},[containerRef,contentContainerRef,handleContainerRef]);useDragDown({ref:containerRef,isVisible,onDragStart:handleDragStart,onDrag:handleDrag,onDragEnd:handleDragEnd,onDragCancel:handleDragCancel,shouldInitiateDrag});let handlePostDeactivate=useCallback(()=>{onClose()},[onClose]);if(!((isVisible||isClosing)&&!(isVisible&&isClosing)))return null;let sheetElm=React.createElement(React.Fragment,null,React.createElement(Global,{styles:[{html:{overflow:"hidden",overscrollBehavior:"none"}}]}),React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{clickOutsideDeactivates:dismissOnOutsideClick&&onClickOutsideDeactivates?onClickOutsideDeactivates:dismissOnOutsideClick,allowOutsideClick:!0,escapeDeactivates:!0,preventScroll:!0,initialFocus:()=>!disableInitialFocus,returnFocusOnDeactivate:!disableReturnFocusToTrigger,fallbackFocus:'[data-ds-id="Sheet"]',onPostDeactivate:handlePostDeactivate}},React.createElement(StyledContainer,{...id?{id}:{},"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Sheet",containerHeight:containerHeight,isClosing:isClosing,isOpening:isOpening,ref:containerRef,dragOffset:dragOffset.current,onAnimationEnd:()=>{isClosing?(setClosing(!1),setContainerHeight(0),dragOffset.current=0,onUnmount&&onUnmount()):isOpening&&setOpening(!1)},role:role,...ariaAttributes},React.createElement(Container,{elevation:4},React.createElement(StyledHandleContainer,{ref:handleContainerRef,isContentContainerScrolled:isContentContainerScrolled},React.createElement(StyledHandle,null)),React.createElement(StyledContentContainer,{isClosing:isClosing,isOpening:isOpening,ref:contentContainerRef,onScroll:()=>{setContentContainerScrolled(contentContainerRef.current?.scrollTop!==0)},onAnimationEnd:evt=>evt.stopPropagation()},children))))),wrappedSheet=hasBackdrop&&!isClosing?React.createElement(StyledBackdrop,null,sheetElm):sheetElm,container=portalContainer||!!document&&document.body;return container&&createPortal(wrappedSheet,container)}

package/build/esm/components/SplashCard/SplashCard.js

@@ -1 +1 @@
-import React,{useRef}from"react";import styled from"@emotion/styled";import{useHover}from"../../shared/useHover";import{H4}from"../Typography/Header/Header";import{Text}from"../Typography/Text/Text";import{Stack}from"../Stack/Stack";import{Container}from"../Container/Container";import{useFocusWithin}from"../../shared/useFocusWithin";import{Icon}from"../Icon/Icon";import{InteractiveCard}from"../Internal/InteractiveCard/InteractiveCard";let StyledIcon=styled("div",{target:"ehiczq60",label:"StyledIcon"})(({isVisible,theme})=>({opacity:+!!isVisible,transform:`translateX(${isVisible?0:-25}%)`,transitionProperty:"opacity, transform",transitionDuration:theme.variables.animation.duration.medium,transitionTimingFunction:theme.variables.animation.timingFunction,position:"absolute",top:theme.variables.size.spacing.l,right:theme.variables.size.spacing.l})),CustomContainer=styled(Container,{target:"ehiczq61",label:"CustomContainer"})(({theme,isActive,hasShadow})=>({...hasShadow&&{borderBottom:"4px solid rgba(138, 97, 241, 0.20);"},backgroundColor:isActive?theme.values.color.splashCard.background.hover:theme.values.color.background.accentSubtle.default,transitionProperty:"background-color",transitionDuration:theme.variables.animation.duration.medium,transitionTimingFunction:theme.variables.animation.timingFunction,height:"100%"})),CustomH4=styled(H4,{target:"ehiczq62",label:"CustomH4"})(({color,theme})=>({..."accent"===color&&{color:theme.values.color.splashCard.text.accent.default}}));export function SplashCard({isPressed,disabled,title,description,iconProps,hasShadow,...rest}){let ref=useRef(null),isHovered=useHover(ref),isFocused=useFocusWithin(ref),isActive=!disabled&&(isHovered||isFocused||isPressed),activeColor="onAccent",mainTextColor=isActive?activeColor:"accent",descriptionColor=isActive?activeColor:"secondary",rightElement=React.createElement(StyledIcon,{isVisible:isActive},React.createElement(Icon,{size:"m",name:"arrow-right",color:activeColor}));return React.createElement(CustomContainer,{hasShadow:hasShadow,isActive:isActive,elevation:0},React.createElement(InteractiveCard,{...rest,ref:ref,disabled:disabled,iconProps:{color:mainTextColor,...iconProps},rightElement:rightElement,"aria-pressed":isPressed??void 0,height:"100%"},React.createElement(Stack,{space:"xxs"},React.createElement(CustomH4,{color:mainTextColor},title),description&&React.createElement(Text,{size:"m",color:descriptionColor},description))))}
+import React,{useRef}from"react";import styled from"@emotion/styled";import{useHover}from"../../shared/useHover";import{H4}from"../Typography/Header/Header";import{Text}from"../Typography/Text/Text";import{Stack}from"../Stack/Stack";import{Container}from"../Container/Container";import{useFocusWithin}from"../../shared/useFocusWithin";import{Icon}from"../Icon/Icon";import{InteractiveCard}from"../Internal/InteractiveCard/InteractiveCard";let StyledIcon=styled("div",{target:"eevu1zx0",label:"StyledIcon"})(({isVisible,theme})=>({opacity:+!!isVisible,transform:`translateX(${isVisible?0:-25}%)`,transitionProperty:"opacity, transform",transitionDuration:theme.variables.animation.duration.medium,transitionTimingFunction:theme.variables.animation.timingFunction,position:"absolute",top:theme.variables.size.spacing.l,right:theme.variables.size.spacing.l})),CustomContainer=styled(Container,{target:"eevu1zx1",label:"CustomContainer"})(({theme,isActive,hasShadow})=>({...hasShadow&&{borderBottom:"4px solid rgba(138, 97, 241, 0.20);"},backgroundColor:isActive?theme.values.color.splashCard.background.hover:theme.values.color.background.accentSubtle.default,transitionProperty:"background-color",transitionDuration:theme.variables.animation.duration.medium,transitionTimingFunction:theme.variables.animation.timingFunction,height:"100%"})),CustomH4=styled(H4,{target:"eevu1zx2",label:"CustomH4"})(({color,theme})=>({..."accent"===color&&{color:theme.values.color.splashCard.text.accent.default}}));export function SplashCard({isPressed,disabled,title,description,iconProps,hasShadow,...rest}){let ref=useRef(null),isHovered=useHover(ref),isFocused=useFocusWithin(ref),isActive=!disabled&&!!(isHovered||isFocused||isPressed),activeColor="onAccent",mainTextColor=isActive?activeColor:"accent",descriptionColor=isActive?activeColor:"secondary",rightElement=React.createElement(StyledIcon,{isVisible:isActive},React.createElement(Icon,{size:"m",name:"arrow-right",color:activeColor}));return React.createElement(CustomContainer,{hasShadow:hasShadow,isActive:isActive,elevation:0},React.createElement(InteractiveCard,{...rest,ref:ref,disabled:disabled,iconProps:iconProps&&{color:mainTextColor,...iconProps},rightElement:rightElement,"aria-pressed":isPressed??void 0,height:"100%"},React.createElement(Stack,{space:"xxs"},React.createElement(CustomH4,{color:mainTextColor},title),description&&React.createElement(Text,{size:"m",color:descriptionColor},description))))}

package/build/esm/components/SplashCardMedia/SplashCardMedia.js

@@ -1 +1 @@
-import React,{useRef}from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import breakpoints from"../../web-tokens/_breakpoints.json";import{useHover}from"../../shared/useHover";import{H4,H5,H6}from"../Typography/Header/Header";import{Text}from"../Typography/Text/Text";import{Stack}from"../Stack/Stack";import{Container}from"../Container/Container";import{useFocusWithin}from"../../shared/useFocusWithin";import{Icon}from"../Icon/Icon";import{Image}from"../Image/Image";import{StyledBox}from"../Box/Box";import{getButtonAppearanceReset,getBaseButtonStyles,getFocusStyles,getDisabledStyles}from"../../shared/mixins";import{useBreakpoints}from"../../shared/useBreakpoints";let CustomContainer=styled(Container,{shouldForwardProp:prop=>isPropValid(prop)&&"isActive"!==prop&&"hasShadow"!==prop,target:"eddois80",label:"CustomContainer"})(({theme,isActive,hasShadow})=>({...hasShadow&&{borderBottom:"4px solid rgba(138, 97, 241, 0.20)"},backgroundColor:isActive?theme.values.color.splashCard.background.hover:theme.values.color.background.accentSubtle.default,transitionProperty:"background-color",transitionDuration:theme.variables.animation.duration.medium,transitionTimingFunction:theme.variables.animation.timingFunction,width:"100%",height:"100%"})),StyledButton=styled("button",{target:"eddois81",label:"StyledButton"})(({theme,disabled})=>({...getButtonAppearanceReset(),...getBaseButtonStyles({theme}),...getFocusStyles(),...disabled&&{...getDisabledStyles({theme}),cursor:"not-allowed"},position:"relative",width:"100%",height:"100%",display:"flex",flexDirection:"row",textAlign:"left",alignItems:"center",padding:0,[`@media (min-width: ${breakpoints.m.value}px)`]:{flexDirection:"column",alignItems:"start"}})),ImageWrapper=styled("div",{target:"eddois82",label:"ImageWrapper"})(({theme,borderRadius})=>({width:179,flexShrink:0,overflow:"hidden",borderBottomLeftRadius:theme.variables.size.borderRadius[borderRadius],[`@media (min-width: ${breakpoints.m.value}px)`]:{width:"calc(100% - 40px)"}})),StyledImage=styled(Image,{target:"eddois83",label:"StyledImage"})({width:"100%",height:"100%",display:"block"}),FadingIconLayer=styled("div",{target:"eddois84",label:"FadingIconLayer"})(({theme,isVisible})=>({position:"absolute",top:theme.variables.size.spacing.l,right:theme.variables.size.spacing.l,opacity:+!!isVisible,transitionProperty:"opacity",transitionDuration:theme.variables.animation.duration.medium,transitionTimingFunction:theme.variables.animation.timingFunction})),LabelWrapper=styled("div",{target:"eddois85",label:"LabelWrapper"})(({theme,isActive})=>({opacity:isActive?.6:1,transitionProperty:"opacity",transitionDuration:theme.variables.animation.duration.medium,transitionTimingFunction:theme.variables.animation.timingFunction})),getTextColor=(color,theme)=>"accent"===color?{color:theme.values.color.splashCard.text.accent.default}:{},CustomH4=styled(H4,{target:"eddois86",label:"CustomH4"})(({color,theme})=>({...getTextColor(color,theme)})),CustomH6=styled(H6,{target:"eddois87",label:"CustomH6"})(({color,theme})=>({...getTextColor(color,theme)})),CustomH5=styled(H5,{target:"eddois88",label:"CustomH5"})(({color,theme})=>({...getTextColor(color,theme)}));export function SplashCardMedia({isPressed,disabled,title,description,variant="standard",iconProps,imageProps,hasShadow,...rest}){let ref=useRef(null),isHovered=useHover(ref),isFocused=useFocusWithin(ref),isActive=!disabled&&(isHovered||isFocused||isPressed),activeColor="onAccent",mainTextColor=isActive?activeColor:"accent",descriptionColor=isActive?activeColor:"secondary",labelColor=isActive?activeColor:"tertiary",{isMobile,isSmallMobile}=useBreakpoints(),showIcons=!isMobile,DescriptionHeading=isMobile?CustomH5:CustomH4;return React.createElement(CustomContainer,{hasShadow:hasShadow,isActive:isActive,elevation:0,overflow:"hidden",borderRadius:"m"},React.createElement(StyledButton,{ref:ref,disabled:disabled,"aria-pressed":isPressed??void 0,...rest},!isSmallMobile&&React.createElement(ImageWrapper,{borderRadius:"m"},React.createElement(StyledImage,{...imageProps,fit:"contain"})),iconProps&&showIcons&&React.createElement(FadingIconLayer,{isVisible:!isActive},React.createElement(Icon,{size:"m",...iconProps,color:mainTextColor})),showIcons&&React.createElement(FadingIconLayer,{isVisible:isActive},React.createElement(Icon,{size:"m",name:"arrow-right",color:activeColor})),React.createElement(StyledBox,{space:["m","l"],lSpace:isSmallMobile?"m":"l"},React.createElement(Stack,{space:"xxs"},"bold"===variant?React.createElement(React.Fragment,null,React.createElement(LabelWrapper,{isActive:isActive},React.createElement(CustomH6,{as:"div",color:labelColor},title)),description&&React.createElement(DescriptionHeading,{as:"div",color:mainTextColor},description)):React.createElement(React.Fragment,null,React.createElement(CustomH4,{as:"div",color:mainTextColor},title),description&&React.createElement(Text,{size:isMobile?"s":"m",color:descriptionColor},description))))))}
+import React,{useRef}from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import breakpoints from"../../web-tokens/_breakpoints.json";import{useHover}from"../../shared/useHover";import{H4,H5,H6}from"../Typography/Header/Header";import{Text}from"../Typography/Text/Text";import{Stack}from"../Stack/Stack";import{Container}from"../Container/Container";import{useFocusWithin}from"../../shared/useFocusWithin";import{Icon}from"../Icon/Icon";import{Image}from"../Image/Image";import{StyledBox}from"../Box/Box";import{getButtonAppearanceReset,getBaseButtonStyles,getFocusStyles,getDisabledStyles}from"../../shared/mixins";import{useBreakpoints}from"../../shared/useBreakpoints";let CustomContainer=styled(Container,{shouldForwardProp:prop=>isPropValid(prop)&&"isActive"!==prop&&"hasShadow"!==prop,target:"e1jmcmnv0",label:"CustomContainer"})(({theme,isActive,hasShadow})=>({...hasShadow&&{borderBottom:"4px solid rgba(138, 97, 241, 0.20)"},backgroundColor:isActive?theme.values.color.splashCard.background.hover:theme.values.color.background.accentSubtle.default,transitionProperty:"background-color",transitionDuration:theme.variables.animation.duration.medium,transitionTimingFunction:theme.variables.animation.timingFunction,width:"100%",height:"100%"})),StyledButton=styled("button",{target:"e1jmcmnv1",label:"StyledButton"})(({theme,disabled})=>({...getButtonAppearanceReset(),...getBaseButtonStyles({theme}),...getFocusStyles(),...disabled&&{...getDisabledStyles({theme}),cursor:"not-allowed"},position:"relative",width:"100%",height:"100%",display:"flex",flexDirection:"row",textAlign:"left",alignItems:"center",padding:0,[`@media (min-width: ${breakpoints.m.value}px)`]:{flexDirection:"column",alignItems:"start"}})),ImageWrapper=styled("div",{target:"e1jmcmnv2",label:"ImageWrapper"})(({theme,borderRadius})=>({width:179,flexShrink:0,overflow:"hidden",borderBottomLeftRadius:theme.variables.size.borderRadius[borderRadius],[`@media (min-width: ${breakpoints.m.value}px)`]:{width:"calc(100% - 40px)"}})),StyledImage=styled(Image,{target:"e1jmcmnv3",label:"StyledImage"})({width:"100%",height:"100%",display:"block"}),FadingIconLayer=styled("div",{target:"e1jmcmnv4",label:"FadingIconLayer"})(({theme,isVisible})=>({position:"absolute",top:theme.variables.size.spacing.l,right:theme.variables.size.spacing.l,opacity:+!!isVisible,transitionProperty:"opacity",transitionDuration:theme.variables.animation.duration.medium,transitionTimingFunction:theme.variables.animation.timingFunction})),LabelWrapper=styled("div",{target:"e1jmcmnv5",label:"LabelWrapper"})(({theme,isActive})=>({opacity:isActive?.6:1,transitionProperty:"opacity",transitionDuration:theme.variables.animation.duration.medium,transitionTimingFunction:theme.variables.animation.timingFunction})),getTextColor=(color,theme)=>"accent"===color?{color:theme.values.color.splashCard.text.accent.default}:{},CustomH4=styled(H4,{target:"e1jmcmnv6",label:"CustomH4"})(({color,theme})=>({...getTextColor(color,theme)})),CustomH6=styled(H6,{target:"e1jmcmnv7",label:"CustomH6"})(({color,theme})=>({...getTextColor(color,theme)})),CustomH5=styled(H5,{target:"e1jmcmnv8",label:"CustomH5"})(({color,theme})=>({...getTextColor(color,theme)}));export function SplashCardMedia({isPressed,disabled,title,description,variant="standard",iconProps,imageProps,hasShadow,...rest}){let ref=useRef(null),isHovered=useHover(ref),isFocused=useFocusWithin(ref),isActive=!disabled&&!!(isHovered||isFocused||isPressed),activeColor="onAccent",mainTextColor=isActive?activeColor:"accent",descriptionColor=isActive?activeColor:"secondary",labelColor=isActive?activeColor:"tertiary",{isMobile,isSmallMobile}=useBreakpoints(),showIcons=!isMobile,DescriptionHeading=isMobile?CustomH5:CustomH4;return React.createElement(CustomContainer,{hasShadow:hasShadow,isActive:isActive,elevation:0,overflow:"hidden",borderRadius:"m"},React.createElement(StyledButton,{ref:ref,disabled:disabled,"aria-pressed":isPressed??void 0,...rest},!isSmallMobile&&React.createElement(ImageWrapper,{borderRadius:"m"},React.createElement(StyledImage,{...imageProps,fit:"contain"})),iconProps&&showIcons&&React.createElement(FadingIconLayer,{isVisible:!isActive},React.createElement(Icon,{size:"m",...iconProps,color:mainTextColor})),showIcons&&React.createElement(FadingIconLayer,{isVisible:isActive},React.createElement(Icon,{size:"m",name:"arrow-right",color:activeColor})),React.createElement(StyledBox,{space:["m","l"],lSpace:isSmallMobile?"m":"l"},React.createElement(Stack,{space:"xxs"},"bold"===variant?React.createElement(React.Fragment,null,React.createElement(LabelWrapper,{isActive:isActive},React.createElement(CustomH6,{as:"div",color:labelColor},title)),description&&React.createElement(DescriptionHeading,{as:"div",color:mainTextColor},description)):React.createElement(React.Fragment,null,React.createElement(CustomH4,{as:"div",color:mainTextColor},title),description&&React.createElement(Text,{size:isMobile?"s":"m",color:descriptionColor},description))))))}

package/build/esm/components/Stack/Stack.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{flattenChildren}from"../../shared/flattenChildren";import{useResponsiveStyles}from"../../shared/mediaQueries";let StackContainer=styled("div",{target:"e1dhj6190",label:"StackContainer"})(({alignItems,vAlignItems,height,as,fullWidth})=>({...useResponsiveStyles({justifyContent:[vAlignItems,{top:"flex-start",bottom:"flex-end",center:"center",spaceBetween:"space-between"}],alignItems:[alignItems,{left:"flex-start",right:"flex-end",center:"center",stretch:"stretch"}]}),display:"flex",flexDirection:"column",height,..."div"!==as&&{padding:0,margin:0,listStyle:"none"},...fullWidth&&{width:"100%"}})),StackItem=styled("div",{target:"e1dhj6191",label:"StackItem"})(({theme,space,as})=>({..."div"!==as&&{padding:0,margin:0,"> *":{listStyle:"initial"}},...useResponsiveStyles({marginTop:[space,theme.variables.size.spacing]}),"&:first-of-type":{marginTop:0},"&:empty":{marginTop:0}}));export function Stack({id,children,space="xs",alignItems,vAlignItems,height,as="div",fullWidth,role,"data-e2e-test-id":dataE2eTestId,"data-ds-id":dataDsId="Stack",...ariaAttributes}){let isList="div"!==as,stackItemAs=isList?"li":"div";return React.createElement(StackContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":dataDsId,alignItems:alignItems,vAlignItems:vAlignItems,height:height,id:id,as:as,fullWidth:fullWidth,role:role??(isList?"list":void 0),...ariaAttributes},React.Children.map(flattenChildren(children),child=>child&&React.createElement(StackItem,{as:stackItemAs,space:space},child)))}
+import React from"react";import styled from"@emotion/styled";import{flattenChildren}from"../../shared/flattenChildren";import{useResponsiveStyles}from"../../shared/mediaQueries";let StackContainer=styled("div",{target:"exraq9d0",label:"StackContainer"})(({alignItems,vAlignItems,height,as,fullWidth})=>({...useResponsiveStyles({justifyContent:[vAlignItems,{top:"flex-start",bottom:"flex-end",center:"center",spaceBetween:"space-between"}],alignItems:[alignItems,{left:"flex-start",right:"flex-end",center:"center",stretch:"stretch"}]}),display:"flex",flexDirection:"column",height,..."div"!==as&&{padding:0,margin:0,listStyle:"none"},...fullWidth&&{width:"100%"}})),StackItem=styled("div",{target:"exraq9d1",label:"StackItem"})(({theme,space,as})=>({..."div"!==as&&{padding:0,margin:0,"> *":{listStyle:"initial"}},...useResponsiveStyles({marginTop:[space,theme.variables.size.spacing]}),"&:first-of-type":{marginTop:0},"&:empty":{marginTop:0}}));export function Stack({id,children,space="xs",alignItems,vAlignItems,height,as="div",fullWidth,role,"data-e2e-test-id":dataE2eTestId,"data-ds-id":dataDsId="Stack",...ariaAttributes}){let isList="div"!==as,stackItemAs=isList?"li":"div";return React.createElement(StackContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":dataDsId,alignItems:alignItems,vAlignItems:vAlignItems,height:height,id:id,as:as,fullWidth:fullWidth,role:role??(isList?"list":void 0),...ariaAttributes},React.Children.map(flattenChildren(children),child=>child&&React.createElement(StackItem,{as:stackItemAs,space:space},child)))}

package/build/esm/components/SubThemeProvider/SubThemeContext.d.ts

@@ -1 +1 @@
-export declare const SubThemeContext: React.Context<import("./SubThemeProvider").SubThemeName>;
+export declare const SubThemeContext: React.Context<import("./SubThemeProvider").SubThemeName | null | undefined>;

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

@@ -2,7 +2,8 @@ import React from "react";
 import type { SubThemeTypes } from "../../web-tokens/_subThemeType";
 export type SubThemeName = SubThemeTypes | "unset";
 type BaseProps = {
-    name: SubThemeName;
+    /** Sub-theme to apply. Omitted (or `undefined`) leaves the parent theme untouched. */
+    name?: SubThemeName;
     as?: "div";
     "data-e2e-test-id"?: string;
     children: React.ReactNode[] | React.ReactNode;

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;