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

package/build/esm/components/Form/Select/SelectWithCustomTrigger.js

@@ -1 +1 @@
-import React,{useState,useRef,useEffect,useCallback,useMemo}from"react";import styled from"@emotion/styled";import{getOptionId,getOptionsListId,OptionsList}from"../Combobox/OptionsList";import{useKeyboard}from"../../../shared/useKeyboard";import{useTypeAheadSearch}from"./useTypeAheadSearch";let HiddenSelectInput=styled("select",{target:"ezvwo4c0",label:"HiddenSelectInput"})(()=>({display:"none"}));export function SelectWithCustomTrigger({renderTrigger,optionsListWidth,options,name,value,portalContainer,disabled,maxHeight=230,autoComplete="on",readOnly=!1,excludeFromFormData=!1,onChange}){let[isOpen,setIsOpen]=useState(!1),[selectedIndex,setSelectedIndex]=useState(-1),triggerRef=useRef(null),hiddenSelectRef=useRef(null),currentOptionIndex=useMemo(()=>options.findIndex(option=>option.value===value),[options,value]),closeOptionsList=useCallback(()=>{isOpen&&(setIsOpen(!1),setSelectedIndex(-1))},[isOpen]),openOptionsList=useCallback(()=>{isOpen||readOnly||(setIsOpen(!0),triggerRef.current?.focus())},[isOpen,readOnly]),toggleOptionsList=useCallback(()=>{isOpen?closeOptionsList():openOptionsList()},[isOpen,openOptionsList,closeOptionsList]),handleSelectedIndexChange=useCallback(index=>setSelectedIndex(index),[]),handleChange=useCallback(option=>{hiddenSelectRef.current.value=option.value,hiddenSelectRef.current.dispatchEvent(new Event("change",{bubbles:!0}))},[hiddenSelectRef]),handleSearchMatch=useCallback(matchedIndex=>{-1!==matchedIndex&&(isOpen?setSelectedIndex(matchedIndex):handleChange(options[matchedIndex]))},[isOpen,options,setSelectedIndex,handleChange]);useKeyboard({"Enter Space ArrowUp ArrowDown":()=>{openOptionsList()}},triggerRef,!isOpen&&!disabled),useTypeAheadSearch({options,triggerRef,isActive:!disabled,fromIndex:-1!==selectedIndex?selectedIndex:currentOptionIndex,onMatch:handleSearchMatch}),useEffect(()=>{let triggerElm=triggerRef.current,handlePointerDown=evt=>{evt.preventDefault()};return triggerElm&&!disabled&&(triggerElm.setAttribute("tabIndex","0"),triggerElm.addEventListener("click",toggleOptionsList),triggerElm.addEventListener("blur",closeOptionsList),triggerElm.addEventListener("pointerdown",handlePointerDown)),()=>{triggerElm?.removeEventListener("click",toggleOptionsList),triggerElm?.removeEventListener("blur",closeOptionsList),triggerElm?.removeEventListener("pointerdown",handlePointerDown)}},[triggerRef,disabled,closeOptionsList,toggleOptionsList]),useEffect(()=>{let triggerElm=triggerRef.current,handleEscapeKeyDown=evt=>{"Escape"===evt.code&&(evt.preventDefault(),evt.stopPropagation(),closeOptionsList())};return triggerElm&&isOpen&&triggerElm.addEventListener("keydown",handleEscapeKeyDown),()=>{triggerElm?.removeEventListener("keydown",handleEscapeKeyDown)}},[triggerRef,isOpen,closeOptionsList]);let optionsListId=getOptionsListId(name),ariaActiveDescendant=-1!==selectedIndex?getOptionId(name,options[selectedIndex].value):"",triggerElm=renderTrigger({triggerRef,isOpen,disabled,role:"combobox","aria-activedescendant":isOpen?ariaActiveDescendant:"","aria-controls":isOpen?optionsListId:"","aria-expanded":isOpen}),optionsListElm=React.createElement(OptionsList,{name:name,isOpen:isOpen,isVirtualized:!1,options:options,triggerRef:triggerRef,onCloseDropdown:closeOptionsList,portalContainer:portalContainer,selectedIndex:selectedIndex,onSelectedIndexChange:handleSelectedIndexChange,forceChangeFakeSelect:handleChange,value:value,disabled:disabled,maxHeight:maxHeight,optionsListWidth:optionsListWidth});return React.createElement(React.Fragment,null,triggerElm,optionsListElm,React.createElement(HiddenSelectInput,{name:excludeFromFormData?void 0:name,onChange:onChange,value:value,ref:hiddenSelectRef,autoComplete:autoComplete},React.createElement("option",{value:"","aria-label":"Empty option"}),options.map(option=>React.createElement("option",{value:option.value,key:option.value},option.label))))}
+import React,{useState,useRef,useEffect,useCallback,useMemo}from"react";import styled from"@emotion/styled";import{getOptionId,getOptionsListId,OptionsList}from"../Combobox/OptionsList";import{useKeyboard}from"../../../shared/useKeyboard";import{useTypeAheadSearch}from"./useTypeAheadSearch";let HiddenSelectInput=styled("select",{target:"ejxvztk0",label:"HiddenSelectInput"})(()=>({display:"none"}));export function SelectWithCustomTrigger({renderTrigger,optionsListWidth,options=[],name,value,portalContainer,disabled=!1,maxHeight=230,autoComplete="on",readOnly=!1,excludeFromFormData=!1,onChange}){let[isOpen,setIsOpen]=useState(!1),[selectedIndex,setSelectedIndex]=useState(-1),triggerRef=useRef(null),hiddenSelectRef=useRef(null),currentOptionIndex=useMemo(()=>options.findIndex(option=>option.value===value),[options,value]),closeOptionsList=useCallback(()=>{isOpen&&(setIsOpen(!1),setSelectedIndex(-1))},[isOpen]),openOptionsList=useCallback(()=>{isOpen||readOnly||(setIsOpen(!0),triggerRef.current?.focus())},[isOpen,readOnly]),toggleOptionsList=useCallback(()=>{isOpen?closeOptionsList():openOptionsList()},[isOpen,openOptionsList,closeOptionsList]),handleSelectedIndexChange=useCallback(index=>setSelectedIndex(index),[]),handleChange=useCallback(option=>{let hiddenSelect=hiddenSelectRef.current;hiddenSelect&&(hiddenSelect.value=option.value,hiddenSelect.dispatchEvent(new Event("change",{bubbles:!0})))},[hiddenSelectRef]),handleSearchMatch=useCallback(matchedIndex=>{-1!==matchedIndex&&(isOpen?setSelectedIndex(matchedIndex):handleChange(options[matchedIndex]))},[isOpen,options,setSelectedIndex,handleChange]);useKeyboard({"Enter Space ArrowUp ArrowDown":()=>{openOptionsList()}},triggerRef,!isOpen&&!disabled),useTypeAheadSearch({options,triggerRef,isActive:!disabled,fromIndex:-1!==selectedIndex?selectedIndex:currentOptionIndex,onMatch:handleSearchMatch}),useEffect(()=>{let triggerElm=triggerRef.current,handlePointerDown=evt=>{evt.preventDefault()};return triggerElm&&!disabled&&(triggerElm.setAttribute("tabIndex","0"),triggerElm.addEventListener("click",toggleOptionsList),triggerElm.addEventListener("blur",closeOptionsList),triggerElm.addEventListener("pointerdown",handlePointerDown)),()=>{triggerElm?.removeEventListener("click",toggleOptionsList),triggerElm?.removeEventListener("blur",closeOptionsList),triggerElm?.removeEventListener("pointerdown",handlePointerDown)}},[triggerRef,disabled,closeOptionsList,toggleOptionsList]),useEffect(()=>{let triggerElm=triggerRef.current,handleEscapeKeyDown=evt=>{"Escape"===evt.code&&(evt.preventDefault(),evt.stopPropagation(),closeOptionsList())};return triggerElm&&isOpen&&triggerElm.addEventListener("keydown",handleEscapeKeyDown),()=>{triggerElm?.removeEventListener("keydown",handleEscapeKeyDown)}},[triggerRef,isOpen,closeOptionsList]);let optionsListId=getOptionsListId(name),ariaActiveDescendant=-1!==selectedIndex?getOptionId(name,options[selectedIndex].value):"",triggerElm=renderTrigger({triggerRef,isOpen,disabled,role:"combobox","aria-activedescendant":isOpen?ariaActiveDescendant:"","aria-controls":isOpen?optionsListId:"","aria-expanded":isOpen}),optionsListElm=React.createElement(OptionsList,{name:name,isOpen:isOpen,isVirtualized:!1,options:options,triggerRef:triggerRef,onCloseDropdown:closeOptionsList,portalContainer:portalContainer,selectedIndex:selectedIndex,onSelectedIndexChange:handleSelectedIndexChange,forceChangeFakeSelect:handleChange,value:value,disabled:disabled,maxHeight:maxHeight,optionsListWidth:optionsListWidth});return React.createElement(React.Fragment,null,triggerElm,optionsListElm,React.createElement(HiddenSelectInput,{name:excludeFromFormData?void 0:name,onChange:onChange,value:value,ref:hiddenSelectRef,autoComplete:autoComplete},React.createElement("option",{value:"","aria-label":"Empty option"}),options.map(option=>React.createElement("option",{value:option.value,key:option.value},option.label))))}

package/build/esm/components/Form/Select/useTypeAheadSearch.js

@@ -1 +1 @@
-import{useEffect,useCallback,useRef}from"react";import{useWindow}from"../../../shared/useWindow";export function useTypeAheadSearch({options,triggerRef,isActive,fromIndex,onMatch}){let queryRef=useRef(""),queryTimerRef=useRef(null),window=useWindow(),selectOptionFromQuery=useCallback(()=>{if(queryRef.current){let query=queryRef.current.toLowerCase(),labels=options.map(option=>option.label.slice(0,queryRef.current.length).toLowerCase()),matchedIndex=labels.indexOf(query,fromIndex+1);-1===matchedIndex&&(matchedIndex=labels.indexOf(query)),onMatch(matchedIndex,queryRef.current),queryRef.current=""}},[options,queryRef,fromIndex,onMatch]),handleKeyDown=useCallback(evt=>{window.clearTimeout(queryTimerRef.current),evt.key.match(/^(\w|\s)$/g)&&(queryRef.current+=evt.key),queryTimerRef.current=window.setTimeout(selectOptionFromQuery,200)},[queryRef,queryTimerRef,selectOptionFromQuery,window]);useEffect(()=>()=>{window.clearTimeout(queryTimerRef.current)},[window]),useEffect(()=>{let triggerElm=triggerRef.current;return isActive&&triggerElm?.addEventListener("keydown",handleKeyDown),()=>{triggerElm?.removeEventListener("keydown",handleKeyDown)}},[triggerRef,isActive,handleKeyDown])}
+import{useEffect,useCallback,useRef}from"react";import{useWindow}from"../../../shared/useWindow";export function useTypeAheadSearch({options=[],triggerRef,isActive,fromIndex,onMatch}){let queryRef=useRef(""),queryTimerRef=useRef(void 0),window=useWindow(),selectOptionFromQuery=useCallback(()=>{if(queryRef.current){let query=queryRef.current.toLowerCase(),labels=options.map(option=>option.label.slice(0,queryRef.current.length).toLowerCase()),matchedIndex=labels.indexOf(query,fromIndex+1);-1===matchedIndex&&(matchedIndex=labels.indexOf(query)),onMatch(matchedIndex,queryRef.current),queryRef.current=""}},[options,queryRef,fromIndex,onMatch]),handleKeyDown=useCallback(evt=>{window.clearTimeout(queryTimerRef.current),evt.key.match(/^(\w|\s)$/g)&&(queryRef.current+=evt.key),queryTimerRef.current=window.setTimeout(selectOptionFromQuery,200)},[queryRef,queryTimerRef,selectOptionFromQuery,window]);useEffect(()=>()=>{window.clearTimeout(queryTimerRef.current)},[window]),useEffect(()=>{let triggerElm=triggerRef.current;return isActive&&triggerElm?.addEventListener("keydown",handleKeyDown),()=>{triggerElm?.removeEventListener("keydown",handleKeyDown)}},[triggerRef,isActive,handleKeyDown])}

package/build/esm/components/Form/Textarea/Textarea.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{useFormFieldMessageId}from"../FormField/useFormFieldMessageId";let StyledTextarea=styled("textarea",{target:"e16qp1wc0",label:"StyledTextarea"})(({theme,resize,hasError})=>({fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,lineHeight:theme.variables.size.lineHeight.xl,minHeight:theme.variables.size.dimension.textarea.minHeight.m,borderRadius:theme.variables.size.borderRadius.xs,border:"1px solid",width:"100%",padding:theme.variables.size.spacing.xs,boxSizing:"border-box",color:theme.values.color.text.primary.default,borderColor:hasError?theme.values.color.border.error.default:theme.values.color.border.primary.default,backgroundColor:theme.values.color.background.primary.default,...hasError&&{boxShadow:`0 0 0 1px inset ${theme.values.color.border.error.default}`},resize})),StyledContainer=styled("div",{target:"e16qp1wc1",label:"StyledContainer"})(()=>({width:"100%",display:"flex",alignItems:"center",flexDirection:"row",position:"relative"}));export const TextareaRaw=React.forwardRef(({autoComplete="on",rows=5,maxLength=256,resize="none",disabled,hasError,...rest},ref)=>React.createElement(StyledContainer,null,React.createElement(StyledTextarea,{...rest,ref:ref,hasError:hasError,autoComplete:autoComplete,disabled:disabled,rows:rows,maxLength:maxLength,resize:resize,"aria-invalid":hasError})));export const Textarea=React.forwardRef(({disabled,label,labelHint,hideLabel,hint,errorMessages,"aria-describedby":ariaDescribedBy,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let{id,ariaDescribedByProp}=useFormFieldMessageId({ariaDescribedBy,errorMessages,hint});return React.createElement(FormField,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Textarea",disabled:disabled,label:label,labelHint:labelHint,hideLabel:hideLabel,hint:hint,errorMessages:errorMessages,messageId:id},React.createElement(TextareaRaw,{...rest,ref:ref,disabled:disabled,...ariaDescribedByProp}))});
+import React from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{useFormFieldMessageId}from"../FormField/useFormFieldMessageId";let StyledTextarea=styled("textarea",{target:"e1ibutd00",label:"StyledTextarea"})(({theme,resize,hasError})=>({fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,lineHeight:theme.variables.size.lineHeight.xl,minHeight:theme.variables.size.dimension.textarea.minHeight.m,borderRadius:theme.variables.size.borderRadius.xs,border:"1px solid",width:"100%",padding:theme.variables.size.spacing.xs,boxSizing:"border-box",color:theme.values.color.text.primary.default,borderColor:hasError?theme.values.color.border.error.default:theme.values.color.border.primary.default,backgroundColor:theme.values.color.background.primary.default,...hasError&&{boxShadow:`0 0 0 1px inset ${theme.values.color.border.error.default}`},resize})),StyledContainer=styled("div",{target:"e1ibutd01",label:"StyledContainer"})(()=>({width:"100%",display:"flex",alignItems:"center",flexDirection:"row",position:"relative"}));export const TextareaRaw=React.forwardRef(({autoComplete="on",rows=5,maxLength=256,resize="none",disabled,hasError,...rest},ref)=>React.createElement(StyledContainer,null,React.createElement(StyledTextarea,{...rest,ref:ref,hasError:hasError,autoComplete:autoComplete,disabled:disabled,rows:rows,maxLength:maxLength,resize:resize,"aria-invalid":hasError})));export const Textarea=React.forwardRef(({disabled,label,labelHint,hideLabel,hint,errorMessages,"aria-describedby":ariaDescribedBy,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let{id,ariaDescribedByProp}=useFormFieldMessageId({ariaDescribedBy,errorMessages,hint});return React.createElement(FormField,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Textarea",disabled:disabled,label:label,labelHint:labelHint,hideLabel:hideLabel,hint:hint,errorMessages:errorMessages,messageId:id},React.createElement(TextareaRaw,{...rest,ref:ref,disabled:disabled,...ariaDescribedByProp}))});

package/build/esm/components/Form/Toggle/Toggle.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{Inline}from"../../Inline/Inline";import{Text}from"../../Typography/Text/Text";import{useFormFieldMessageId}from"../FormField/useFormFieldMessageId";let StyledInputContainer=styled("div",{target:"e68xb8t0",label:"StyledInputContainer"})(({theme,size})=>({display:"block",position:"relative",width:theme.variables.size.dimension.toggle.width[size],height:theme.variables.size.dimension.togglePoint[size],boxSizing:"border-box",cursor:"pointer"})),StyledRealInput=styled("input",{target:"e68xb8t1",label:"StyledRealInput"})(({theme})=>({opacity:theme.variables.opacity.hidden,height:0,width:0,position:"absolute"})),StyledFakeInputInner=styled("div",{target:"e68xb8t2",label:"StyledFakeInputInner"})(({theme,size})=>({width:theme.variables.size.dimension.togglePoint[size],height:theme.variables.size.dimension.togglePoint[size],margin:parseInt(theme.variables.size.dimension.togglePoint[size],10)/("m"===size?4:2),borderRadius:parseInt(theme.variables.size.dimension.togglePoint[size],10)/2,transform:"translateX(0)",transition:"transform 0.2s linear",backgroundColor:theme.values.color.toggle.thumb.background.off})),StyledFakeInput=styled("div",{target:"e68xb8t3",label:"StyledFakeInput"})(({theme,size,isHighlighted})=>{let pointMargin=parseInt(theme.variables.size.dimension.togglePoint[size],10)/("m"===size?5:2.5),pointTranslateX=parseInt(theme.variables.size.dimension.toggle.width[size],10)-parseInt(theme.variables.size.dimension.togglePoint[size],10)-2*pointMargin-2;return{boxSizing:"border-box",width:theme.variables.size.dimension.toggle.width[size],height:theme.variables.size.dimension.toggle.height[size],borderRadius:({s:theme.variables.size.borderRadius.s,m:theme.variables.size.borderRadius.l})[size],display:"flex",alignItems:"center",transition:"background-color 0.2s linear, border-color 0.2s linear",background:isHighlighted?theme.values.color.toggle.background.highlight:theme.values.color.toggle.background.default,..."s"===size&&{marginTop:2},"input:checked + &":{background:theme.values.color.background.accent.default,[`${StyledFakeInputInner}`]:{transform:`translateX(${pointTranslateX}px)`,backgroundColor:theme.values.color.toggle.thumb.background.on}},"input:focus-visible + &":{outlineWidth:2,outlineStyle:"solid",outlineColor:"Highlight"},"@media (-webkit-min-device-pixel-ratio: 0)":{"input:focus-visible + &":{outlineColor:"-webkit-focus-ring-color",outlineStyle:"auto"}}}}),StyledContainer=styled("div",{target:"e68xb8t4",label:"StyledContainer"})(()=>({"&:hover":{cursor:"pointer"}}));export const ToggleRaw=React.forwardRef(({size="m",isHighlighted=!1,disabled,...rest},ref)=>React.createElement(StyledInputContainer,{size:size},React.createElement(StyledRealInput,{...rest,ref:ref,type:"checkbox",disabled:disabled}),React.createElement(StyledFakeInput,{size:size,isHighlighted:isHighlighted},React.createElement(StyledFakeInputInner,{size:size}))));export const Toggle=React.forwardRef(({label="",alignLabel="before",labelHint="",disabled=!1,alignItems="left",size="m",hint,errorMessages,"aria-describedby":ariaDescribedBy,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let{id,ariaDescribedByProp}=useFormFieldMessageId({ariaDescribedBy,errorMessages,hint}),labelColor="s"===size?"tertiary":"primary",labelWeight="s"===size?"bold":"normal",labelGroup=React.createElement("div",null,React.createElement(Text,{size:size,color:labelColor,weight:labelWeight},label),React.createElement(Text,{size:"s",color:"tertiary"},labelHint));return React.createElement(FormField,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Toggle",disabled:disabled,hint:hint,errorMessages:errorMessages,messageId:id},React.createElement(StyledContainer,null,React.createElement(Inline,{alignItems:alignItems,space:"xs",vAlignItems:"top",noWrap:!0},label&&"before"===alignLabel&&labelGroup,React.createElement(ToggleRaw,{...rest,ref:ref,size:size,disabled:disabled,...ariaDescribedByProp}),label&&"after"===alignLabel&&labelGroup)))});
+import React from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{Inline}from"../../Inline/Inline";import{Text}from"../../Typography/Text/Text";import{useFormFieldMessageId}from"../FormField/useFormFieldMessageId";let StyledInputContainer=styled("div",{target:"e1cpa63k0",label:"StyledInputContainer"})(({theme,size="m"})=>({display:"block",position:"relative",width:theme.variables.size.dimension.toggle.width[size],height:theme.variables.size.dimension.togglePoint[size],boxSizing:"border-box",cursor:"pointer"})),StyledRealInput=styled("input",{target:"e1cpa63k1",label:"StyledRealInput"})(({theme})=>({opacity:theme.variables.opacity.hidden,height:0,width:0,position:"absolute"})),StyledFakeInputInner=styled("div",{target:"e1cpa63k2",label:"StyledFakeInputInner"})(({theme,size="m"})=>({width:theme.variables.size.dimension.togglePoint[size],height:theme.variables.size.dimension.togglePoint[size],margin:parseInt(theme.variables.size.dimension.togglePoint[size],10)/("m"===size?4:2),borderRadius:parseInt(theme.variables.size.dimension.togglePoint[size],10)/2,transform:"translateX(0)",transition:"transform 0.2s linear",backgroundColor:theme.values.color.toggle.thumb.background.off})),StyledFakeInput=styled("div",{target:"e1cpa63k3",label:"StyledFakeInput"})(({theme,size="m",isHighlighted})=>{let pointMargin=parseInt(theme.variables.size.dimension.togglePoint[size],10)/("m"===size?5:2.5),pointTranslateX=parseInt(theme.variables.size.dimension.toggle.width[size],10)-parseInt(theme.variables.size.dimension.togglePoint[size],10)-2*pointMargin-2;return{boxSizing:"border-box",width:theme.variables.size.dimension.toggle.width[size],height:theme.variables.size.dimension.toggle.height[size],borderRadius:({s:theme.variables.size.borderRadius.s,m:theme.variables.size.borderRadius.l})[size],display:"flex",alignItems:"center",transition:"background-color 0.2s linear, border-color 0.2s linear",background:isHighlighted?theme.values.color.toggle.background.highlight:theme.values.color.toggle.background.default,..."s"===size&&{marginTop:2},"input:checked + &":{background:theme.values.color.background.accent.default,[`${StyledFakeInputInner}`]:{transform:`translateX(${pointTranslateX}px)`,backgroundColor:theme.values.color.toggle.thumb.background.on}},"input:focus-visible + &":{outlineWidth:2,outlineStyle:"solid",outlineColor:"Highlight"},"@media (-webkit-min-device-pixel-ratio: 0)":{"input:focus-visible + &":{outlineColor:"-webkit-focus-ring-color",outlineStyle:"auto"}}}}),StyledContainer=styled("div",{target:"e1cpa63k4",label:"StyledContainer"})(()=>({"&:hover":{cursor:"pointer"}}));export const ToggleRaw=React.forwardRef(({size="m",isHighlighted=!1,disabled,...rest},ref)=>React.createElement(StyledInputContainer,{size:size},React.createElement(StyledRealInput,{...rest,ref:ref,type:"checkbox",disabled:disabled}),React.createElement(StyledFakeInput,{size:size,isHighlighted:isHighlighted},React.createElement(StyledFakeInputInner,{size:size}))));export const Toggle=React.forwardRef(({label="",alignLabel="before",labelHint="",disabled=!1,alignItems="left",size="m",hint,errorMessages,"aria-describedby":ariaDescribedBy,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let{id,ariaDescribedByProp}=useFormFieldMessageId({ariaDescribedBy,errorMessages,hint}),labelColor="s"===size?"tertiary":"primary",labelWeight="s"===size?"bold":"normal",labelGroup=React.createElement("div",null,React.createElement(Text,{size:size,color:labelColor,weight:labelWeight},label),React.createElement(Text,{size:"s",color:"tertiary"},labelHint));return React.createElement(FormField,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Toggle",disabled:disabled,hint:hint,errorMessages:errorMessages,messageId:id},React.createElement(StyledContainer,null,React.createElement(Inline,{alignItems:alignItems,space:"xs",vAlignItems:"top",noWrap:!0},label&&"before"===alignLabel&&labelGroup,React.createElement(ToggleRaw,{...rest,ref:ref,size:size,disabled:disabled,...ariaDescribedByProp}),label&&"after"===alignLabel&&labelGroup)))});

package/build/esm/components/Form/ToggleButton/ToggleButton.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{Inline}from"../../Inline/Inline";let StyledContainer=styled("div",{target:"e1ts6g770",label:"StyledContainer"})(()=>({display:"inline-block"})),StyledRealInput=styled("input",{target:"e1ts6g771",label:"StyledRealInput"})(({theme})=>({opacity:theme.variables.opacity.hidden,cursor:"pointer",height:0,width:0,position:"absolute"})),StyledFakeInput=styled("div",{target:"e1ts6g772",label:"StyledFakeInput"})(({theme})=>({boxSizing:"border-box",borderRadius:theme.variables.size.borderRadius.l,border:"2px solid",height:theme.variables.size.dimension.toggleButton.height.m,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",padding:`${theme.variables.size.spacing.zero} ${theme.variables.size.spacing.m}`,fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.s,fontWeight:theme.variables.weight.bold,lineHeight:theme.variables.size.lineHeight.xs,backgroundColor:theme.values.color.background.transparent.default,borderColor:theme.values.color.border.secondary.default,color:theme.values.color.text.secondary.default,"&:hover":{borderColor:theme.values.color.border.secondary.hover},"&:active":{borderColor:theme.values.color.border.secondary.active},"input: focus-visible + &":{outlineWidth:"2px",outlineStyle:"solid",outlineColor:"Highlight"},"@media (-webkit-min-device-pixel-ratio:0)":{"input: focus-visible + &":{outlineColor:"-webkit-focus-ring-color",outlineStyle:"auto"}},"input:checked + &":{borderColor:theme.values.color.background.transparent.selected,background:theme.values.color.background.transparent.selected,color:theme.values.color.text.onAccent.default,"&:hover":{borderColor:theme.values.color.background.transparent.selectedHover,background:theme.values.color.background.transparent.selectedHover}}})),StyledSubLabel=styled("div",{target:"e1ts6g773",label:"StyledSubLabel"})(({theme})=>({color:theme.values.color.text.tertiary.default,"input:checked + div &":{color:theme.values.color.text.onAccent.default}}));export const ToggleButton=React.forwardRef(({label,subLabel,disabled=!1,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>React.createElement(FormField,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"ToggleButton",disabled:disabled},React.createElement(StyledContainer,{"data-e2e-test-id":dataE2eTestId},React.createElement(StyledRealInput,{...rest,ref:ref,type:"checkbox",disabled:disabled}),React.createElement(StyledFakeInput,null,React.createElement(Inline,{space:"xxs",noWrap:!0},label,subLabel&&React.createElement(StyledSubLabel,null,subLabel))))));
+import React from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{Inline}from"../../Inline/Inline";let StyledContainer=styled("div",{target:"e1yj37sd0",label:"StyledContainer"})(()=>({display:"inline-block"})),StyledRealInput=styled("input",{target:"e1yj37sd1",label:"StyledRealInput"})(({theme})=>({opacity:theme.variables.opacity.hidden,cursor:"pointer",height:0,width:0,position:"absolute"})),StyledFakeInput=styled("div",{target:"e1yj37sd2",label:"StyledFakeInput"})(({theme})=>({boxSizing:"border-box",borderRadius:theme.variables.size.borderRadius.l,border:"2px solid",height:theme.variables.size.dimension.toggleButton.height.m,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",padding:`${theme.variables.size.spacing.zero} ${theme.variables.size.spacing.m}`,fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.s,fontWeight:theme.variables.weight.bold,lineHeight:theme.variables.size.lineHeight.xs,backgroundColor:theme.values.color.background.transparent.default,borderColor:theme.values.color.border.secondary.default,color:theme.values.color.text.secondary.default,"&:hover":{borderColor:theme.values.color.border.secondary.hover},"&:active":{borderColor:theme.values.color.border.secondary.active},"input: focus-visible + &":{outlineWidth:"2px",outlineStyle:"solid",outlineColor:"Highlight"},"@media (-webkit-min-device-pixel-ratio:0)":{"input: focus-visible + &":{outlineColor:"-webkit-focus-ring-color",outlineStyle:"auto"}},"input:checked + &":{borderColor:theme.values.color.background.transparent.selected,background:theme.values.color.background.transparent.selected,color:theme.values.color.text.onAccent.default,"&:hover":{borderColor:theme.values.color.background.transparent.selectedHover,background:theme.values.color.background.transparent.selectedHover}}})),StyledSubLabel=styled("div",{target:"e1yj37sd3",label:"StyledSubLabel"})(({theme})=>({color:theme.values.color.text.tertiary.default,"input:checked + div &":{color:theme.values.color.text.onAccent.default}}));export const ToggleButton=React.forwardRef(({label,subLabel,disabled=!1,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>React.createElement(FormField,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"ToggleButton",disabled:disabled},React.createElement(StyledContainer,{"data-e2e-test-id":dataE2eTestId},React.createElement(StyledRealInput,{...rest,ref:ref,type:"checkbox",disabled:disabled}),React.createElement(StyledFakeInput,null,React.createElement(Inline,{space:"xxs",noWrap:!0},label,subLabel&&React.createElement(StyledSubLabel,null,subLabel))))));

package/build/esm/components/Grid/Grid.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{useResponsiveValue,useResponsiveStyles}from"../../shared/mediaQueries";import{GridItem}from"./GridItem";let StyledContainer=styled("div",{target:"epsmnci0",label:"StyledContainer"})(({theme,templateColumns,templateRows,autoRows,templateAreas,inline,columnGap,alignItems,justifyItems,isSubgrid})=>{function getTrackSize(size){return`calc((100% - 11 * ${theme.variables.size.spacing[size]}) / 12)`}return{width:"100%",display:inline?"inline-grid":"grid",gridAutoFlow:"row",...useResponsiveValue({gridTemplateColumns:templateColumns||(isSubgrid?"subgrid":Array.isArray(columnGap)?columnGap.map(value=>`repeat(12, ${getTrackSize(value)})`):`repeat(12, ${getTrackSize(columnGap)})`),gridTemplateRows:templateRows,gridAutoRows:autoRows,gridTemplateAreas:templateAreas,alignItems,justifyItems})}},({theme,columnGap,rowGap})=>useResponsiveStyles({gridColumnGap:[columnGap,theme.variables.size.spacing],gridRowGap:[rowGap,theme.variables.size.spacing]}));export function Grid({columnGap="m",rowGap="m","data-e2e-test-id":dataE2eTestId,children,...rest}){return React.createElement(StyledContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Grid",columnGap:columnGap,rowGap:rowGap,...rest},children)}Grid.Item=GridItem;
+import React from"react";import styled from"@emotion/styled";import{useResponsiveValue,useResponsiveStyles}from"../../shared/mediaQueries";import{GridItem}from"./GridItem";let StyledContainer=styled("div",{target:"e1l758so0",label:"StyledContainer"})(({theme,templateColumns,templateRows,autoRows,templateAreas,inline,columnGap,alignItems,justifyItems,isSubgrid})=>{function getTrackSize(size){return`calc((100% - 11 * ${theme.variables.size.spacing[size??"zero"]}) / 12)`}return{width:"100%",display:inline?"inline-grid":"grid",gridAutoFlow:"row",...useResponsiveValue({gridTemplateColumns:templateColumns||(isSubgrid?"subgrid":Array.isArray(columnGap)?columnGap.map(value=>`repeat(12, ${getTrackSize(value)})`):`repeat(12, ${getTrackSize(columnGap)})`),gridTemplateRows:templateRows,gridAutoRows:autoRows,gridTemplateAreas:templateAreas,alignItems,justifyItems})}},({theme,columnGap,rowGap})=>useResponsiveStyles({gridColumnGap:[columnGap,theme.variables.size.spacing],gridRowGap:[rowGap,theme.variables.size.spacing]}));export function Grid({columnGap="m",rowGap="m","data-e2e-test-id":dataE2eTestId,children,...rest}){return React.createElement(StyledContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Grid",columnGap:columnGap,rowGap:rowGap,...rest},children)}Grid.Item=GridItem;

package/build/esm/components/Icon/Icon.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import icons from"../../web-tokens/assets/icons.json";import icons16 from"../../web-tokens/assets/icons16.json";import{useHover}from"../../shared/useHover";import{useResponsiveStyles}from"../../shared/mediaQueries";let hasIcon16=name=>name in icons16,handleColor=(theme,color)=>"inherit"===color?"inherit":theme.values.color.icon[color].default,handleVariant=(theme,variant)=>{switch(variant){case"inherit":return"inherit";case"primary":return theme.values.color.icon.accent.default;case"secondary":return theme.values.color.icon.primary.default;default:return theme.values.color.icon[variant].default}},StyledIcon=styled("div",{shouldForwardProp:prop=>isPropValid(prop)&&"color"!==prop,target:"e3zhdes0",label:"StyledIcon"})(({theme,variant,isHoverable,parentRef,parentIsHovered,size,as,color})=>({...useResponsiveStyles({width:[size,theme.variables.size.dimension.icon],height:[size,theme.variables.size.dimension.icon]}),"& > svg":{...useResponsiveStyles({width:[size,theme.variables.size.dimension.icon],height:[size,theme.variables.size.dimension.icon]})},color:variant?handleVariant(theme,variant):handleColor(theme,color),..."span"===as&&{verticalAlign:"middle"},...(parentIsHovered||isHoverable)&&{cursor:"pointer"},...parentRef&&{opacity:parentIsHovered?1:.6},...isHoverable&&{opacity:theme.variables.opacity.hover,":hover":{opacity:theme.variables.opacity.visible}}}));export const Icon=props=>{let{name,hoverable=!1,inline=!1,size="m",color="inherit",variant,"data-e2e-test-id":dataE2eTestId,"data-testid":dataTestId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,role,...rest}=props,isHoverable="boolean"==typeof hoverable&&hoverable,parentRef="boolean"!=typeof hoverable&&hoverable,parentIsHovered=useHover(parentRef),hasAccessibleName=!!(ariaLabel||ariaLabelledBy);return React.createElement(StyledIcon,{as:inline?"span":"div","data-e2e-test-id":dataE2eTestId,"data-testid":dataTestId,"data-ds-id":"Icon","data-variant":color,variant:variant,color:color,isHoverable:isHoverable,parentRef:parentRef,parentIsHovered:parentIsHovered,size:size,dangerouslySetInnerHTML:{__html:"s"===size&&hasIcon16(name)?icons16[name]:icons[name]},...rest,"aria-hidden":hasAccessibleName?void 0:"true",role:role,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy})};
+import React from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import icons from"../../web-tokens/assets/icons.json";import icons16 from"../../web-tokens/assets/icons16.json";import{useHover}from"../../shared/useHover";import{useResponsiveStyles}from"../../shared/mediaQueries";let hasIcon16=name=>name in icons16,handleColor=(theme,color)=>"inherit"===color?"inherit":theme.values.color.icon[color].default,handleVariant=(theme,variant)=>{switch(variant){case"inherit":return"inherit";case"primary":return theme.values.color.icon.accent.default;case"secondary":return theme.values.color.icon.primary.default;default:return theme.values.color.icon[variant].default}},StyledIcon=styled("div",{shouldForwardProp:prop=>isPropValid(prop)&&"color"!==prop,target:"eeidl2r0",label:"StyledIcon"})(({theme,variant,isHoverable,parentRef,parentIsHovered,size,as,color="inherit"})=>({...useResponsiveStyles({width:[size,theme.variables.size.dimension.icon],height:[size,theme.variables.size.dimension.icon]}),"& > svg":{...useResponsiveStyles({width:[size,theme.variables.size.dimension.icon],height:[size,theme.variables.size.dimension.icon]})},color:variant?handleVariant(theme,variant):handleColor(theme,color),..."span"===as&&{verticalAlign:"middle"},...(parentIsHovered||isHoverable)&&{cursor:"pointer"},...parentRef&&{opacity:parentIsHovered?1:.6},...isHoverable&&{opacity:theme.variables.opacity.hover,":hover":{opacity:theme.variables.opacity.visible}}}));export const Icon=props=>{let{name,hoverable=!1,inline=!1,size="m",color="inherit",variant,"data-e2e-test-id":dataE2eTestId,"data-testid":dataTestId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,role,...rest}=props,isHoverable="boolean"==typeof hoverable&&hoverable,parentRef="boolean"!=typeof hoverable&&hoverable,parentIsHovered=useHover(parentRef),hasAccessibleName=!!(ariaLabel||ariaLabelledBy);return React.createElement(StyledIcon,{as:inline?"span":"div","data-e2e-test-id":dataE2eTestId,"data-testid":dataTestId,"data-ds-id":"Icon","data-variant":color,variant:variant,color:color,isHoverable:isHoverable,parentRef:parentRef,parentIsHovered:parentIsHovered,size:size,dangerouslySetInnerHTML:{__html:"s"===size&&hasIcon16(name)?icons16[name]:icons[name]},...rest,"aria-hidden":hasAccessibleName?void 0:"true",role:role,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy})};

package/build/esm/components/Image/Image.js

@@ -1 +1 @@
-import React,{useEffect,useState,forwardRef}from"react";import styled from"@emotion/styled";import{useResponsiveValue,useResponsiveStyles}from"../../shared/mediaQueries";import{asValidProps}from"../../types";let StyledImg=styled("img",{target:"e19rs9970",label:"StyledImg"})(({theme,borderRadius})=>useResponsiveStyles({borderRadius:[borderRadius,theme.variables.size.borderRadius]}),({fit,position})=>useResponsiveValue({objectFit:fit,objectPosition:position}));export const Image=forwardRef((props,ref)=>{let{placeholderSrc,fallbackSrc,sources=[],lazy=!1,"data-e2e-test-id":dataE2eTestId,src,fit,position,borderRadius,onError,isDecorative,alt,...rest}=asValidProps(props),[imgSrc,setImgSrc]=useState(placeholderSrc||src),sourceElms=sources.map(sourceProps=>React.createElement("source",sourceProps));useEffect(()=>{if(placeholderSrc){let img=new window.Image;img.src=src,img.onload=()=>{setImgSrc(src)}}else setImgSrc(src)},[placeholderSrc,src]);let imgProps={...rest,...lazy&&{loading:"lazy"},alt:isDecorative?"":alt,fit,position,borderRadius};return React.createElement("picture",{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Image"},sourceElms,React.createElement(StyledImg,{...imgProps,src:imgSrc,onError:args=>{fallbackSrc&&setImgSrc(fallbackSrc),onError&&onError(args)},ref:ref}))});
+import React,{useEffect,useState,forwardRef}from"react";import styled from"@emotion/styled";import{useResponsiveValue,useResponsiveStyles}from"../../shared/mediaQueries";import{asValidProps}from"../../types";let StyledImg=styled("img",{target:"e7j7om30",label:"StyledImg"})(({theme,borderRadius})=>useResponsiveStyles({borderRadius:[borderRadius,theme.variables.size.borderRadius]}),({fit,position})=>useResponsiveValue({objectFit:fit,objectPosition:position}));export const Image=forwardRef((props,ref)=>{let{placeholderSrc,fallbackSrc,sources=[],lazy=!1,"data-e2e-test-id":dataE2eTestId,src,fit,position,borderRadius,onError,isDecorative,alt,...rest}=asValidProps(props),[imgSrc,setImgSrc]=useState(placeholderSrc||src),sourceElms=sources.map(sourceProps=>React.createElement("source",sourceProps));useEffect(()=>{if(placeholderSrc){if(void 0===src)return;let img=new window.Image;img.src=src,img.onload=()=>{setImgSrc(src)}}else setImgSrc(src)},[placeholderSrc,src]);let imgProps={...rest,...lazy&&{loading:"lazy"},alt:isDecorative?"":alt,fit,position,borderRadius};return React.createElement("picture",{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Image"},sourceElms,React.createElement(StyledImg,{...imgProps,src:imgSrc,onError:args=>{fallbackSrc&&setImgSrc(fallbackSrc),onError&&onError(args)},ref:ref}))});

package/build/esm/components/Inline/Inline.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{flattenChildren}from"../../shared/flattenChildren";import{useResponsiveStyles}from"../../shared/mediaQueries";let InlineContainer=styled("div",{target:"e1qcpg6h0",label:"InlineContainer"})(({alignItems,vAlignItems,space,vSpace,theme,noWrap,fullWidth,as})=>({...useResponsiveStyles({alignItems:[vAlignItems,{top:"flex-start",bottom:"flex-end",center:"center",stretch:"stretch"}],justifyContent:[alignItems,{left:"flex-start",right:"flex-end",center:"center",spaceBetween:"space-between"}],gap:[space,theme.variables.size.spacing],rowGap:[vSpace,theme.variables.size.spacing]}),display:"flex",flexDirection:"row",flexWrap:noWrap?"nowrap":"wrap",...fullWidth&&{width:"100%"},..."div"!==as&&{padding:0,margin:0,listStyle:"none"}})),StyledInlineItem=styled("div",{target:"e1qcpg6h1",label:"StyledInlineItem"})(({as})=>({..."div"!==as&&{padding:0,margin:0,"> *":{listStyle:"initial"}}}));export function Inline({id,children,alignItems="left",vAlignItems="top",space="xs",vSpace=space,noWrap=!1,fullWidth=!1,as="div",role,"data-e2e-test-id":dataE2eTestId,"data-ds-id":dataDsId="Inline",...ariaAttributes}){let isList="div"!==as,inlineItemAs=isList?"li":"div";return React.createElement(InlineContainer,{id:id,"data-e2e-test-id":dataE2eTestId,"data-ds-id":dataDsId,alignItems:alignItems,vAlignItems:vAlignItems,space:space,vSpace:vSpace,noWrap:noWrap,fullWidth:fullWidth,as:as,role:role??(isList?"list":void 0),...ariaAttributes},React.Children.map(flattenChildren(children),child=>child&&React.createElement(StyledInlineItem,{as:inlineItemAs},child)))}
+import React from"react";import styled from"@emotion/styled";import{flattenChildren}from"../../shared/flattenChildren";import{useResponsiveStyles}from"../../shared/mediaQueries";let InlineContainer=styled("div",{target:"e1p3jkof0",label:"InlineContainer"})(({alignItems,vAlignItems,space,vSpace,theme,noWrap,fullWidth,as})=>({...useResponsiveStyles({alignItems:[vAlignItems,{top:"flex-start",bottom:"flex-end",center:"center",stretch:"stretch"}],justifyContent:[alignItems,{left:"flex-start",right:"flex-end",center:"center",spaceBetween:"space-between"}],gap:[space,theme.variables.size.spacing],rowGap:[vSpace,theme.variables.size.spacing]}),display:"flex",flexDirection:"row",flexWrap:noWrap?"nowrap":"wrap",...fullWidth&&{width:"100%"},..."div"!==as&&{padding:0,margin:0,listStyle:"none"}})),StyledInlineItem=styled("div",{target:"e1p3jkof1",label:"StyledInlineItem"})(({as})=>({..."div"!==as&&{padding:0,margin:0,"> *":{listStyle:"initial"}}}));export function Inline({id,children,alignItems="left",vAlignItems="top",space="xs",vSpace=space,noWrap=!1,fullWidth=!1,as="div",role,"data-e2e-test-id":dataE2eTestId,"data-ds-id":dataDsId="Inline",...ariaAttributes}){let isList="div"!==as,inlineItemAs=isList?"li":"div";return React.createElement(InlineContainer,{id:id,"data-e2e-test-id":dataE2eTestId,"data-ds-id":dataDsId,alignItems:alignItems,vAlignItems:vAlignItems,space:space,vSpace:vSpace,noWrap:noWrap,fullWidth:fullWidth,as:as,role:role??(isList?"list":void 0),...ariaAttributes},React.Children.map(flattenChildren(children),child=>child&&React.createElement(StyledInlineItem,{as:inlineItemAs},child)))}

package/build/esm/components/Internal/BaseTag/BaseTag.d.ts

@@ -13,11 +13,15 @@ type ConditionalTagProps = {
 } | {
     isRemovable: true;
     onClear: (e: React.MouseEvent) => void;
+    /**
+     * Accessible name for the clear button.
+     * TODO(DS): make required — the button has no other name. See follow-up.
+     */
     clearBtnAriaLabel?: string;
 };
 export type TagProps = OriginalTagProps & ConditionalTagProps;
 type BaseTagProps = TagProps & {
     size?: BaseTagSize;
 };
-export declare function BaseTag({ label, colorVariant, isRemovable, onClear, clearBtnAriaLabel, size, "data-e2e-test-id": dataE2eTestId, ...ariaAttributes }: BaseTagProps): React.ReactElement;
+export declare function BaseTag(props: BaseTagProps): React.ReactElement;
 export {};

package/build/esm/components/Internal/BaseTag/BaseTag.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{PictogramButton}from"../../PictogramButton/PictogramButton";export const MAX_TAG_WIDTH=200;let TagContainer=styled("span",{target:"e1x33ib00",label:"TagContainer"})(({theme,colorVariant,isRemovable,size})=>({display:"inline-flex",alignItems:"center",maxWidth:"200px",paddingLeft:theme.variables.size.spacing.xs,paddingRight:isRemovable?theme.variables.size.spacing.zero:theme.variables.size.spacing.xs,borderRadius:theme.variables.size.borderRadius.xs,backgroundColor:theme.values.color.tag.background[colorVariant],color:theme.values.color.tag.text[colorVariant],fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.s,lineHeight:theme.variables.size.lineHeight.xs,..."s"===size&&{paddingLeft:theme.variables.size.spacing.xxs,paddingRight:theme.variables.size.spacing.xxs,fontSize:theme.variables.size.font.xs,lineHeight:theme.variables.size.lineHeight.m}})),TagLabel=styled("span",{target:"e1x33ib01",label:"TagLabel"})(({size})=>({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",paddingTop:"3px",paddingBottom:"5px",..."s"===size&&{paddingTop:0,paddingBottom:0}})),ClearButton=styled(PictogramButton,{target:"e1x33ib02",label:"ClearButton"})(({theme,colorVariant})=>({backgroundColor:theme.values.color.background.transparent.default,color:theme.values.color.tag.text[colorVariant],"&:hover":{color:theme.values.color.tag.text[colorVariant]}}));export function BaseTag({label,colorVariant="gray",isRemovable=!1,onClear,clearBtnAriaLabel,size="m","data-e2e-test-id":dataE2eTestId,...ariaAttributes}){return React.createElement(TagContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Tag",colorVariant:colorVariant,isRemovable:isRemovable,size:size,...ariaAttributes},React.createElement(TagLabel,{size:size},label),isRemovable&&React.createElement(ClearButton,{icon:"x",size:"xs","aria-label":clearBtnAriaLabel,onClick:onClear,colorVariant:colorVariant}))}
+import React from"react";import styled from"@emotion/styled";import{useIntl}from"../../../shared/intl/useIntl";import{PictogramButton}from"../../PictogramButton/PictogramButton";export const MAX_TAG_WIDTH=200;let TagContainer=styled("span",{target:"e1axbonh0",label:"TagContainer"})(({theme,colorVariant,isRemovable,size})=>({display:"inline-flex",alignItems:"center",maxWidth:"200px",paddingLeft:theme.variables.size.spacing.xs,paddingRight:isRemovable?theme.variables.size.spacing.zero:theme.variables.size.spacing.xs,borderRadius:theme.variables.size.borderRadius.xs,backgroundColor:theme.values.color.tag.background[colorVariant],color:theme.values.color.tag.text[colorVariant],fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.s,lineHeight:theme.variables.size.lineHeight.xs,..."s"===size&&{paddingLeft:theme.variables.size.spacing.xxs,paddingRight:theme.variables.size.spacing.xxs,fontSize:theme.variables.size.font.xs,lineHeight:theme.variables.size.lineHeight.m}})),TagLabel=styled("span",{target:"e1axbonh1",label:"TagLabel"})(({size})=>({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",paddingTop:"3px",paddingBottom:"5px",..."s"===size&&{paddingTop:0,paddingBottom:0}})),ClearButton=styled(PictogramButton,{target:"e1axbonh2",label:"ClearButton"})(({theme,colorVariant})=>({backgroundColor:theme.values.color.background.transparent.default,color:theme.values.color.tag.text[colorVariant],"&:hover":{color:theme.values.color.tag.text[colorVariant]}}));export function BaseTag(props){let{label,colorVariant="gray",isRemovable=!1,size="m","data-e2e-test-id":dataE2eTestId,...ariaAttributes}=props,{formatMessage}=useIntl();return React.createElement(TagContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Tag",colorVariant:colorVariant,isRemovable:isRemovable,size:size,...ariaAttributes},React.createElement(TagLabel,{size:size},label),props.isRemovable&&React.createElement(ClearButton,{icon:"x",size:"xs","aria-label":props.clearBtnAriaLabel??formatMessage("Tag.RemoveButton.AriaLabel"),onClick:props.onClear,colorVariant:colorVariant}))}

package/build/esm/components/Internal/Float/Float.d.ts

@@ -4,4 +4,4 @@ export type FloatProps = {
     /** The children to render inside the float. */
     children: React.ReactNode;
 } & ViewportPosition;
-export declare function Float({ positionX, positionY, children, }: FloatProps): React.ReactElement;
+export declare function Float(props: FloatProps): React.ReactElement;

package/build/esm/components/Internal/Float/Float.js

@@ -1 +1 @@
-import React from"react";import{useTheme}from"@emotion/react";import styled from"@emotion/styled";import{AMBOSS_DS_FLOAT_PORTAL,Portal}from"../../Portal/Portal";import{useFloatingPosition}from"../../Utilities/FloatingPosition/useFloatingPosition";import{useDocument}from"../../../shared/useDocument";let StyledContainer=styled("div",{target:"e101b6xk0",label:"StyledContainer"})(({floatingStyles,isPositioned,bottomBarHeight})=>({...floatingStyles,visibility:isPositioned?"visible":"hidden",...bottomBarHeight&&{translate:`0 calc(-1 * ${bottomBarHeight})`}}));export function Float({positionX,positionY,children}){let theme=useTheme(),document=useDocument(),{setFloating,floatingStyles,isPositioned}=useFloatingPosition({mode:"viewport",positionX,positionY,offset:parseInt(theme.variables.size.spacing.m,10)}),bottomBarHeight="bottom"===positionY?theme.variables.layout.bottomBar.height.default:void 0,portalContainer=document?document.querySelector(`.${AMBOSS_DS_FLOAT_PORTAL}`):null;return React.createElement(Portal,{portalContainer:portalContainer},React.createElement(StyledContainer,{"data-ds-id":"Float",ref:setFloating,floatingStyles:floatingStyles,isPositioned:isPositioned,bottomBarHeight:bottomBarHeight},children))}
+import React from"react";import{useTheme}from"@emotion/react";import styled from"@emotion/styled";import{AMBOSS_DS_FLOAT_PORTAL,Portal}from"../../Portal/Portal";import{useFloatingPosition}from"../../Utilities/FloatingPosition/useFloatingPosition";import{useDocument}from"../../../shared/useDocument";let StyledContainer=styled("div",{target:"e1gevmfu0",label:"StyledContainer"})(({floatingStyles,isPositioned,bottomBarHeight})=>({...floatingStyles,visibility:isPositioned?"visible":"hidden",...bottomBarHeight&&{translate:`0 calc(-1 * ${bottomBarHeight})`}}));export function Float(props){let{children,...viewportPosition}=props,theme=useTheme(),document=useDocument(),{setFloating,floatingStyles,isPositioned}=useFloatingPosition({mode:"viewport",...viewportPosition,offset:parseInt(theme.variables.size.spacing.m,10)}),bottomBarHeight="bottom"===props.positionY?theme.variables.layout.bottomBar.height.default:void 0,portalContainer=document?document.querySelector(`.${AMBOSS_DS_FLOAT_PORTAL}`):null;return React.createElement(Portal,{portalContainer:portalContainer},React.createElement(StyledContainer,{"data-ds-id":"Float",ref:setFloating,floatingStyles:floatingStyles,isPositioned:isPositioned,bottomBarHeight:bottomBarHeight},children))}

package/build/esm/components/Internal/Sandwich/useSandwichContext.d.ts

@@ -16,6 +16,6 @@ export type SandwichContextValue = SandwichEdges & {
     /** Static host below the scroll body - `Sandwich.Footer` portals into it. */
     footerSlotNode: HTMLElement | null;
 };
-export declare const SandwichProvider: React.Provider<SandwichContextValue>;
+export declare const SandwichProvider: React.Provider<SandwichContextValue | null>;
 /** Read the Sandwich context, or throw if used outside `<Sandwich>`. */
 export declare function useSandwichContext(): SandwichContextValue;

package/build/esm/components/Layout/Layout.js

@@ -1 +1 @@
-import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import styled from"@emotion/styled";import{Panel}from"../Internal/Panel/Panel";import{LayoutFloat}from"../Internal/LayoutFloat/LayoutFloat";import{useBreakpoints}from"../../shared/useBreakpoints";import{PAGE_BOTTOM_BAR_INSET,PANEL_ORDER,PANEL_WIDTH_VAR,Slot}from"./-constants";import{useLayoutPanelsEnabled,useLayoutPersistence,useLayoutStore}from"./context";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"./Split/MobileSplitView/useMobileSplitView";import{LayoutProvider}from"./LayoutProvider";import{Content}from"./Content/Content";import{RightPanel}from"./RightPanel/RightPanel";import{RightPanelHeader}from"./RightPanel/RightPanelHeader";import{RightPanelFooter}from"./RightPanel/RightPanelFooter";import{LeftPanel}from"./LeftPanel/LeftPanel";import{LeftPanelHeader}from"./LeftPanel/LeftPanelHeader";import{LeftPanelFooter}from"./LeftPanel/LeftPanelFooter";import{LeftNavBar}from"./LeftNavBar/LeftNavBar";import{LeftNavBarFooter}from"./LeftNavBar/LeftNavBarFooter";import{Split}from"./Split/Split";import{SplitHeader}from"./Split/SplitHeader";import{SplitFooter}from"./Split/SplitFooter";import{LayoutPortalContext,PanelRegistryContext,PanelDeclarationsContext,PanelPresenceContext,PanelAnimationContext,PanelRowContext}from"./registry";import{usePortalTargets}from"./usePortalTargets";import{LayoutFloatDragProvider}from"../Internal/LayoutFloat/LayoutFloatDragProvider";import{useLayoutVar}from"./LayoutCssVars";import{useLayout}from"./useLayout";import{useLayoutRules}from"./useLayoutRules";import{DEFAULT_LAYOUT_RULES}from"./rules";let resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=slotHosts=>{let leftPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.content),rightPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.rightPanel);useEffect(()=>{let targets=[[Slot.leftPanel,leftPanelWidthCssVar],[Slot.content,contentWidthCssVar],[Slot.rightPanel,rightPanelWidthCssVar]],observers=[];return targets.forEach(([slot,handle])=>{let node=slotHosts[slot]??null;if(!node)return void handle.set("0px");let publishNodeWidth=()=>handle.set(`${node.getBoundingClientRect().width}px`);if(publishNodeWidth(),"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishNodeWidth);observer.observe(node),observers.push(observer)}),()=>observers.forEach(observer=>observer.disconnect())},[leftPanelWidthCssVar,contentWidthCssVar,rightPanelWidthCssVar,slotHosts])},StyledLayout=styled("div",{target:"e1no219g0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=styled("div",{target:"e1no219g1",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=styled("div",{target:"e1no219g2",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"});export const PANEL_HOST_DS_ID="PanelHost";let StyledContentColumn=styled("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e1no219g3",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=styled("div",{target:"e1no219g4",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=styled("div",{target:"e1no219g5",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!declared[slot]&&(isShown(slot)||present[slot]),defaultSizeFor=({slot,panel,panelState})=>slot===Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===Slot.content?contentColumn:React.createElement(StyledPanelHost,{"data-ds-id":"PanelHost",ref:slotHostRefs[slot]});export const Layout=function({children,persistenceKey,storage,rules=DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=useState({}),layout=useLayout(),{state:layoutState,...panelCallbacks}=layout;useLayoutRules({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=useLayoutStore(),persistence=useLayoutPersistence(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=useBreakpoints(),showMobileSplitStack=useMobileSplitViewEnabled(),[mobileSplitStackHost,setMobileSplitStackHost]=useState(null),[splitCount,setSplitCount]=useState(0),registerSplit=useCallback(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=useMemo(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),panelsEnabled=useLayoutPanelsEnabled(),rightPanelVariant=layoutState[Slot.rightPanel].variant??declared[Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!0===panelsEnabled&&!isMobile&&"float"===rightPanelVariant,hasOffcanvasLeftBar=!!declared[Slot.leftPanel]&&"offcanvas"===layoutState[Slot.leftPanel].variant,isShown=slot=>layoutState[slot].visible&&!(slot===Slot.rightPanel&&(isRightPanelFloating||isMobile))&&!(slot===Slot.leftPanel&&hasOffcanvasLeftBar),[present,setPresent]=useState({}),presence=useMemo(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=useRef({}),panelElements=useRef({}),resizeSuppressed=useRef({}),animationControl=useMemo(()=>({setHandle:(slot,handle)=>{panelHandles.current[slot]=handle},getHandle:slot=>panelHandles.current[slot]??null,setElement:(slot,element)=>{panelElements.current[slot]=element},getElement:slot=>panelElements.current[slot]??null,setResizeSuppressed:(slot,suppressed)=>{resizeSuppressed.current[slot]=suppressed}}),[]),panelRefCallbacks=useMemo(()=>{let handleCallbacks=new Map,elementCallbacks=new Map;return{handleFor:id=>{let callback=handleCallbacks.get(id);return callback||(callback=handle=>animationControl.setHandle(id,handle),handleCallbacks.set(id,callback)),callback},elementFor:id=>{let callback=elementCallbacks.get(id);return callback||(callback=element=>animationControl.setElement(id,element),elementCallbacks.set(id,callback)),callback}}},[animationControl]),shouldSuppressLayoutCallback=useCallback(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=useMemo(()=>({register:(slot,reg)=>setDeclared(prev=>({...prev,[slot]:reg})),unregister:slot=>setDeclared(prev=>{if(!(slot in prev))return prev;let next={...prev};return delete next[slot],next})}),[]),{portalTargets,slotHosts,slotHostRefs,floatHostRef}=usePortalTargets({slots:PANEL_ORDER,floatableSlot:Slot.rightPanel,isFloating:isRightPanelFloating});useGlobalCssVariables(slotHosts);let rowSlots=PANEL_ORDER.filter(slot=>slot!==Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),isSolo=declaredSlots.length<=1,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:Slot.content,declared,present,isShown}),contentColumn=React.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.content]}),isSplitOpen&&React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.splitview]})),panelItems=rowSlots.filter(slot=>isPanelPresent({slot,declared,present,isShown})).map(slot=>{let panel=declared[slot],panelState=layoutState[slot];return{id:slot,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize??panelState.minSize,maxSize:panel?.maxSize??panelState.maxSize,collapsible:slot!==Slot.content&&(panel?.collapsible??!0),lockWidthOnWindowResize:panel?.lockWidthOnWindowResize,resizable:panel?.resizable??resizableFromState(panelState)}}),rowKey=panelItems.map(item=>item.id).join(","),soloHost=soloSlot&&isShown(soloSlot)?childFor(soloSlot,contentColumn,slotHostRefs):null,panelGroup=panelItems.length>0?React.createElement(Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>{isShown(id)&&dispatch({type:"resize",slot:id,size:declared[id]?.lockWidthOnWindowResize?Math.round(size.inPixels):`${size.asPercentage}%`})},onCollapse:id=>panelCallbacks[id].hide(),panelHandleFor:panelRefCallbacks.handleFor,panelElementFor:panelRefCallbacks.elementFor,shouldSuppressLayoutCallback:shouldSuppressLayoutCallback}):null;return React.createElement(PanelRegistryContext.Provider,{value:registry},React.createElement(PanelDeclarationsContext.Provider,{value:declared},React.createElement(PanelPresenceContext.Provider,{value:presence},React.createElement(PanelAnimationContext.Provider,{value:animationControl},React.createElement(PanelRowContext.Provider,{value:rowKey},React.createElement(LayoutPortalContext.Provider,{value:portalTargets},React.createElement(LayoutFloatDragProvider,null,React.createElement(MobileSplitStackContext.Provider,{value:mobileSplitStack},React.createElement(StyledLayout,{"data-ds-id":"Layout"},React.createElement(StyledPanelRow,{hasOffcanvasLeftBar:hasOffcanvasLeftBar},isSolo?soloHost:panelGroup),isRightPanelFloating&&layoutState[Slot.rightPanel].visible&&React.createElement(LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&React.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost}))))))))))};Layout.Provider=LayoutProvider,Layout.LeftPanel=LeftPanel,Layout.LeftNavBar=LeftNavBar,Layout.LeftNavBarFooter=LeftNavBarFooter,Layout.LeftPanelHeader=LeftPanelHeader,Layout.LeftPanelFooter=LeftPanelFooter,Layout.RightPanel=RightPanel,Layout.RightPanelHeader=RightPanelHeader,Layout.RightPanelFooter=RightPanelFooter,Layout.Content=Content,Layout.Split=Split,Layout.SplitHeader=SplitHeader,Layout.SplitFooter=SplitFooter;
+import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import styled from"@emotion/styled";import{Panel}from"../Internal/Panel/Panel";import{LayoutFloat}from"../Internal/LayoutFloat/LayoutFloat";import{useBreakpoints}from"../../shared/useBreakpoints";import{PAGE_BOTTOM_BAR_INSET,PANEL_ORDER,PANEL_WIDTH_VAR,Slot}from"./-constants";import{useLayoutPanelsEnabled,useLayoutPersistence,useLayoutStore}from"./context";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"./Split/MobileSplitView/useMobileSplitView";import{LayoutProvider}from"./LayoutProvider";import{Content}from"./Content/Content";import{RightPanel}from"./RightPanel/RightPanel";import{RightPanelHeader}from"./RightPanel/RightPanelHeader";import{RightPanelFooter}from"./RightPanel/RightPanelFooter";import{LeftPanel}from"./LeftPanel/LeftPanel";import{LeftPanelHeader}from"./LeftPanel/LeftPanelHeader";import{LeftPanelFooter}from"./LeftPanel/LeftPanelFooter";import{LeftNavBar}from"./LeftNavBar/LeftNavBar";import{LeftNavBarFooter}from"./LeftNavBar/LeftNavBarFooter";import{Split}from"./Split/Split";import{SplitHeader}from"./Split/SplitHeader";import{SplitFooter}from"./Split/SplitFooter";import{LayoutPortalContext,PanelRegistryContext,PanelDeclarationsContext,PanelPresenceContext,PanelAnimationContext,PanelRowContext}from"./registry";import{usePortalTargets}from"./usePortalTargets";import{LayoutFloatDragProvider}from"../Internal/LayoutFloat/LayoutFloatDragProvider";import{useLayoutVar}from"./LayoutCssVars";import{useLayout}from"./useLayout";import{useLayoutRules}from"./useLayoutRules";import{DEFAULT_LAYOUT_RULES}from"./rules";let resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=slotHosts=>{let leftPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.content),rightPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.rightPanel);useEffect(()=>{let targets=[[Slot.leftPanel,leftPanelWidthCssVar],[Slot.content,contentWidthCssVar],[Slot.rightPanel,rightPanelWidthCssVar]],observers=[];return targets.forEach(([slot,handle])=>{let node=slotHosts[slot]??null;if(!node)return void handle.set("0px");let publishNodeWidth=()=>handle.set(`${node.getBoundingClientRect().width}px`);if(publishNodeWidth(),"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishNodeWidth);observer.observe(node),observers.push(observer)}),()=>observers.forEach(observer=>observer.disconnect())},[leftPanelWidthCssVar,contentWidthCssVar,rightPanelWidthCssVar,slotHosts])},StyledLayout=styled("div",{target:"exoyye20",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=styled("div",{target:"exoyye21",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=styled("div",{target:"exoyye22",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"});export const PANEL_HOST_DS_ID="PanelHost";let StyledContentColumn=styled("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"exoyye23",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=styled("div",{target:"exoyye24",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=styled("div",{target:"exoyye25",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!(declared[slot]&&(isShown(slot)||present[slot])),defaultSizeFor=({slot,panel,panelState})=>slot===Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===Slot.content?contentColumn:React.createElement(StyledPanelHost,{"data-ds-id":"PanelHost",ref:slotHostRefs[slot]});export const Layout=function({children,persistenceKey,storage,rules=DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=useState({}),layout=useLayout(),{state:layoutState,...panelCallbacks}=layout;useLayoutRules({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=useLayoutStore(),persistence=useLayoutPersistence(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=useBreakpoints(),showMobileSplitStack=useMobileSplitViewEnabled(),[mobileSplitStackHost,setMobileSplitStackHost]=useState(null),[splitCount,setSplitCount]=useState(0),registerSplit=useCallback(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=useMemo(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),panelsEnabled=useLayoutPanelsEnabled(),rightPanelVariant=layoutState[Slot.rightPanel].variant??declared[Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!0===panelsEnabled&&!isMobile&&"float"===rightPanelVariant,hasOffcanvasLeftBar=!!declared[Slot.leftPanel]&&"offcanvas"===layoutState[Slot.leftPanel].variant,isShown=slot=>layoutState[slot].visible&&!(slot===Slot.rightPanel&&(isRightPanelFloating||isMobile))&&!(slot===Slot.leftPanel&&hasOffcanvasLeftBar),[present,setPresent]=useState({}),presence=useMemo(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=useRef({}),panelElements=useRef({}),resizeSuppressed=useRef({}),animationControl=useMemo(()=>({setHandle:(slot,handle)=>{panelHandles.current[slot]=handle},getHandle:slot=>panelHandles.current[slot]??null,setElement:(slot,element)=>{panelElements.current[slot]=element},getElement:slot=>panelElements.current[slot]??null,setResizeSuppressed:(slot,suppressed)=>{resizeSuppressed.current[slot]=suppressed}}),[]),panelRefCallbacks=useMemo(()=>{let handleCallbacks=new Map,elementCallbacks=new Map;return{handleFor:id=>{let callback=handleCallbacks.get(id);return callback||(callback=handle=>animationControl.setHandle(id,handle),handleCallbacks.set(id,callback)),callback},elementFor:id=>{let callback=elementCallbacks.get(id);return callback||(callback=element=>animationControl.setElement(id,element),elementCallbacks.set(id,callback)),callback}}},[animationControl]),shouldSuppressLayoutCallback=useCallback(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=useMemo(()=>({register:(slot,reg)=>setDeclared(prev=>({...prev,[slot]:reg})),unregister:slot=>setDeclared(prev=>{if(!(slot in prev))return prev;let next={...prev};return delete next[slot],next})}),[]),{portalTargets,slotHosts,slotHostRefs,floatHostRef}=usePortalTargets({slots:PANEL_ORDER,floatableSlot:Slot.rightPanel,isFloating:isRightPanelFloating});useGlobalCssVariables(slotHosts);let rowSlots=PANEL_ORDER.filter(slot=>slot!==Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),isSolo=declaredSlots.length<=1,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:Slot.content,declared,present,isShown}),contentColumn=React.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.content]}),isSplitOpen&&React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.splitview]})),panelItems=rowSlots.filter(slot=>isPanelPresent({slot,declared,present,isShown})).map(slot=>{let panel=declared[slot],panelState=layoutState[slot];return{id:slot,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize??panelState.minSize,maxSize:panel?.maxSize??panelState.maxSize,collapsible:slot!==Slot.content&&(panel?.collapsible??!0),lockWidthOnWindowResize:panel?.lockWidthOnWindowResize,resizable:panel?.resizable??resizableFromState(panelState)}}),rowKey=panelItems.map(item=>item.id).join(","),soloHost=soloSlot&&isShown(soloSlot)?childFor(soloSlot,contentColumn,slotHostRefs):null,panelGroup=panelItems.length>0?React.createElement(Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>{isShown(id)&&dispatch({type:"resize",slot:id,size:declared[id]?.lockWidthOnWindowResize?Math.round(size.inPixels):`${size.asPercentage}%`})},onCollapse:id=>panelCallbacks[id].hide(),panelHandleFor:panelRefCallbacks.handleFor,panelElementFor:panelRefCallbacks.elementFor,shouldSuppressLayoutCallback:shouldSuppressLayoutCallback}):null;return React.createElement(PanelRegistryContext.Provider,{value:registry},React.createElement(PanelDeclarationsContext.Provider,{value:declared},React.createElement(PanelPresenceContext.Provider,{value:presence},React.createElement(PanelAnimationContext.Provider,{value:animationControl},React.createElement(PanelRowContext.Provider,{value:rowKey},React.createElement(LayoutPortalContext.Provider,{value:portalTargets},React.createElement(LayoutFloatDragProvider,null,React.createElement(MobileSplitStackContext.Provider,{value:mobileSplitStack},React.createElement(StyledLayout,{"data-ds-id":"Layout"},React.createElement(StyledPanelRow,{hasOffcanvasLeftBar:hasOffcanvasLeftBar},isSolo?soloHost:panelGroup),isRightPanelFloating&&layoutState[Slot.rightPanel].visible&&React.createElement(LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&React.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost}))))))))))};Layout.Provider=LayoutProvider,Layout.LeftPanel=LeftPanel,Layout.LeftNavBar=LeftNavBar,Layout.LeftNavBarFooter=LeftNavBarFooter,Layout.LeftPanelHeader=LeftPanelHeader,Layout.LeftPanelFooter=LeftPanelFooter,Layout.RightPanel=RightPanel,Layout.RightPanelHeader=RightPanelHeader,Layout.RightPanelFooter=RightPanelFooter,Layout.Content=Content,Layout.Split=Split,Layout.SplitHeader=SplitHeader,Layout.SplitFooter=SplitFooter;

package/build/esm/components/Layout/LayoutCssVars.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { LayoutCssVarStore } from "./cssVarStore";
-export declare const LayoutCssVarStoreProvider: React.Provider<LayoutCssVarStore>;
+export declare const LayoutCssVarStoreProvider: React.Provider<LayoutCssVarStore | null>;
 /** Imperative handle to one registered layout var. */
 export type LayoutVarHandle = {
     set: (value: string) => void;

package/build/esm/components/Layout/Split/MobileSplitView/useMobileSplitStack.d.ts

@@ -16,5 +16,5 @@ export type MobileSplitStackValue = {
  * front isn't stored here - it derives from the `splitview` slot's visibility
  * (see {@link useMobileSplitView}).
  */
-export declare const MobileSplitStackContext: React.Context<MobileSplitStackValue>;
+export declare const MobileSplitStackContext: React.Context<MobileSplitStackValue | null>;
 export declare const useMobileSplitStack: () => MobileSplitStackValue;

package/build/esm/components/Layout/context.d.ts

@@ -1,5 +1,5 @@
 import type { LayoutPanelsMode, LayoutState, LayoutStorage, LayoutStore } from "./-types";
-export declare const LayoutStoreProvider: React.Provider<LayoutStore>;
+export declare const LayoutStoreProvider: React.Provider<LayoutStore | null>;
 /** Get the store from context, or throw if used outside the provider. */
 export declare function useLayoutStore(): LayoutStore;
 export declare const LayoutPanelsEnabledProvider: React.Provider<LayoutPanelsMode>;

package/build/esm/components/Layout/registry.d.ts

@@ -2,7 +2,7 @@ import { type ReactNode } from "react";
 import type { PanelImperativeHandle } from "react-resizable-panels";
 import type { RightPanelVariant, Size, SlotKey } from "./-types";
 export type PortalTargets = Partial<Record<SlotKey, HTMLElement | null>>;
-export declare const LayoutPortalContext: React.Context<Partial<Record<"content" | "leftPanel" | "splitview" | "rightPanel", HTMLElement>>>;
+export declare const LayoutPortalContext: React.Context<Partial<Record<"content" | "leftPanel" | "splitview" | "rightPanel", HTMLElement | null>>>;
 /**
  * Portal `children` into the host DOM node registered for `slot`. Returns the
  * portal (or `null` if the host isn't mounted yet). Call unconditionally -
@@ -35,7 +35,7 @@ export type PanelRegistry = {
     register: (slot: SlotKey, reg: PanelReg) => void;
     unregister: (slot: SlotKey) => void;
 };
-export declare const PanelRegistryContext: React.Context<PanelRegistry>;
+export declare const PanelRegistryContext: React.Context<PanelRegistry | null>;
 /** Register this slot as a panel for the marker's lifetime. */
 export declare function useDeclarePanel(slot: SlotKey, reg: PanelReg): void;
 export type PanelDeclarations = Partial<Record<SlotKey, PanelReg>>;
@@ -60,7 +60,7 @@ export declare const usePanelRow: () => string;
 export type PanelPresence = {
     setPresent: (slot: SlotKey, isPresent: boolean) => void;
 };
-export declare const PanelPresenceContext: React.Context<PanelPresence>;
+export declare const PanelPresenceContext: React.Context<PanelPresence | null>;
 /** Report this slot's live presence so the Layout keeps its column mounted
  *  through the exit animation. No-op outside a Layout. */
 export declare function usePanelPresence(slot: SlotKey, isPresent: boolean): void;
@@ -82,7 +82,7 @@ export type PanelAnimationControl = {
     /** Mute the Group's resize/collapse/persist callbacks for a slot mid-slide. */
     setResizeSuppressed: (slot: SlotKey, suppressed: boolean) => void;
 };
-export declare const PanelAnimationContext: React.Context<PanelAnimationControl>;
+export declare const PanelAnimationContext: React.Context<PanelAnimationControl | null>;
 /** Access the Layout's panel-animation control. Null outside a Layout. */
 export declare function usePanelAnimationControl(): PanelAnimationControl | null;
 /** Run `onChange(value)` when `value` transitions (not on initial mount). */

package/build/esm/components/Lightbox/Lightbox.js

@@ -1,8 +1,8 @@
-import React,{useRef}from"react";import styled from"@emotion/styled";import{keyframes}from"@emotion/react";import{useOutsideClickDeactivatesWithinPortal}from"../../shared/useOutsideClickDeactivatesWithinPortal";import{FOCUSABLE_SELECTOR}from"../../shared/focusableSelector";import{Portal,usePortalContainerElement}from"../Portal/Portal";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";import{useResponsiveStyles}from"../../shared/mediaQueries";import{DialogContext}from"../Patterns/Dialog/DialogContext";export const StyledBackdrop=styled("div",{target:"e1vcr7130",label:"StyledBackdrop"})(({theme,justifyContent})=>{let fadeInBackdrop=keyframes`
+import React,{useRef}from"react";import styled from"@emotion/styled";import{keyframes}from"@emotion/react";import{useOutsideClickDeactivatesWithinPortal}from"../../shared/useOutsideClickDeactivatesWithinPortal";import{FOCUSABLE_SELECTOR}from"../../shared/focusableSelector";import{Portal,usePortalContainerElement}from"../Portal/Portal";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";import{useResponsiveStyles}from"../../shared/mediaQueries";import{DialogContext}from"../Patterns/Dialog/DialogContext";export const StyledBackdrop=styled("div",{target:"ehzm4j60",label:"StyledBackdrop"})(({theme,justifyContent})=>{let fadeInBackdrop=keyframes`
     from {
       opacity: ${theme.variables.opacity.hidden};
     }
     to {
       opacity: ${theme.variables.opacity.visible};
     }
-  `;return{position:"fixed",top:0,left:0,zIndex:theme.variables.zIndex.modal,width:"100%",height:"100dvh",background:theme.values.color.background.backdrop.default,display:"flex",flexDirection:"column",...useResponsiveStyles({justifyContent:[justifyContent,{top:"flex-start",center:"center"}]}),alignItems:"center",flex:"1 0 auto",animation:`${fadeInBackdrop} ${theme.variables.animation.modalBackdrop.open.duration} ${theme.variables.animation.modalBackdrop.open.timingFunction} both`}});export const StyledChildrenWrapper=styled("div",{target:"e1vcr7131",label:"StyledChildrenWrapper"})({display:"contents"});export function Lightbox({backdropRef,portalContainer,initialFocus,isDismissible=!0,children,handleClose,justifyContent="center",privateProps:{skipPortal,tabbableOptions}={skipPortal:!1}}){let portalContainerElement=usePortalContainerElement(portalContainer),modalRef=useRef(null),handleClickOutsideDeactivates=useOutsideClickDeactivatesWithinPortal({portalContainerElement,outerRef:backdropRef,isDismissible}),getFocusTarget=()=>{let container=modalRef?.current?.firstElementChild,firstFocusable=container?.querySelector(FOCUSABLE_SELECTOR);return firstFocusable||container||document.body},getInitialFocus=()=>"string"==typeof initialFocus?initialFocus:initialFocus?.current??getFocusTarget(),content=React.createElement(StyledBackdrop,{ref:backdropRef,justifyContent:justifyContent,"data-ds-id":"Lightbox"},React.createElement(FocusTrapWrapper,{active:!0,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:handleClickOutsideDeactivates,escapeDeactivates:isDismissible,preventScroll:!0,initialFocus:()=>getInitialFocus(),fallbackFocus:()=>getFocusTarget(),...tabbableOptions&&{tabbableOptions},...handleClose&&{onPostDeactivate:handleClose}}},React.createElement(StyledChildrenWrapper,{ref:modalRef},children)));return skipPortal?content:React.createElement(DialogContext.Provider,{value:!0},React.createElement(Portal,{portalContainer:portalContainer},content))}
+  `;return{position:"fixed",top:0,left:0,zIndex:theme.variables.zIndex.modal,width:"100%",height:"100dvh",background:theme.values.color.background.backdrop.default,display:"flex",flexDirection:"column",...useResponsiveStyles({justifyContent:[justifyContent,{top:"flex-start",center:"center"}]}),alignItems:"center",flex:"1 0 auto",animation:`${fadeInBackdrop} ${theme.variables.animation.modalBackdrop.open.duration} ${theme.variables.animation.modalBackdrop.open.timingFunction} both`}});export const StyledChildrenWrapper=styled("div",{target:"ehzm4j61",label:"StyledChildrenWrapper"})({display:"contents"});export function Lightbox({backdropRef,portalContainer,initialFocus,isDismissible=!0,children,handleClose,justifyContent="center",privateProps:{skipPortal,tabbableOptions}={skipPortal:!1}}){let portalContainerElement=usePortalContainerElement(portalContainer),modalRef=useRef(null),handleClickOutsideDeactivates=useOutsideClickDeactivatesWithinPortal({portalContainerElement,outerRef:backdropRef,isDismissible}),getFocusTarget=()=>{let container=modalRef?.current?.firstElementChild,firstFocusable=container?.querySelector(FOCUSABLE_SELECTOR);return firstFocusable||container||document.body},getInitialFocus=()=>"string"==typeof initialFocus?initialFocus:initialFocus?.current??getFocusTarget(),content=React.createElement(StyledBackdrop,{ref:backdropRef,justifyContent:justifyContent,"data-ds-id":"Lightbox"},React.createElement(FocusTrapWrapper,{active:!0,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:handleClickOutsideDeactivates,escapeDeactivates:isDismissible,preventScroll:!0,initialFocus:()=>getInitialFocus(),fallbackFocus:()=>getFocusTarget(),...tabbableOptions&&{tabbableOptions},...handleClose&&{onPostDeactivate:handleClose}}},React.createElement(StyledChildrenWrapper,{ref:modalRef},children)));return skipPortal?content:React.createElement(DialogContext.Provider,{value:!0},React.createElement(Portal,{portalContainer:portalContainer},content))}

package/build/esm/components/Link/Link.js

@@ -1 +1 @@
-import React,{useContext}from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import{TextContext}from"../Typography/Text/Text";import{Icon}from"../Icon/Icon";let StyledLink=styled("a",{shouldForwardProp:prop=>isPropValid(prop)&&"inline"!==prop,target:"e1viewf50",label:"StyledLink"})(({theme,weight,size,color,inline})=>({cursor:"pointer",background:"none",border:"none",padding:0,fontSize:theme.variables.size.font[size]??"inherit",fontWeight:theme.variables.weight[weight]??"inherit",lineHeight:({xxs:theme.variables.size.lineHeight.m,xs:theme.variables.size.lineHeight.xl,s:theme.variables.size.lineHeight.l,m:theme.variables.size.lineHeight.xl,l:theme.variables.size.lineHeight.xl})[size],fontFamily:theme.variables.fontFamily.lato,textDecorationLine:inline?"underline":"none",color:color?theme.values.color.text[color].default:"inherit",...("primary"===color||"secondary"===color||"tertiary"===color)&&{textDecorationColor:theme.values.color.text.underline.default},"&:hover":{textDecorationLine:"underline",textDecorationThickness:"0.125em",...("primary"===color||"secondary"===color||"tertiary"===color)&&{textDecorationColor:theme.values.color.text.underline.hover,color:theme.values.color.text[color].hover}}})),StyledIcon=styled(Icon,{target:"e1viewf51",label:"StyledIcon"})(({position,theme})=>({..."left"===position&&{marginRight:theme.variables.size.spacing.xxs},..."right"===position&&{marginLeft:theme.variables.size.spacing.xxs}}));export const Link=React.forwardRef(({weight,color:colorProp,size,variant,inline,iconLeft,iconRight,children,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let inheritPropsFromText=useContext(TextContext),linkColor=variant?"primary"===variant?"accent":"secondary"===variant?"primary":variant:colorProp||(inheritPropsFromText?.color?inheritPropsFromText?.color:inline?void 0:"accent"),isInlineLink=inline||!!inheritPropsFromText,linkContent=!isInlineLink&&(iconLeft||iconRight)?React.createElement(React.Fragment,null,iconLeft&&React.createElement(StyledIcon,{"aria-hidden":!0,size:"s",name:iconLeft.name,color:iconLeft.color??linkColor,inline:!0,position:"left"}),children,iconRight&&React.createElement(StyledIcon,{"aria-hidden":!0,size:"s",name:iconRight.name,color:iconRight.color??linkColor,inline:!0,position:"right"})):children;return React.createElement(StyledLink,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Link",ref:ref,inline:isInlineLink,color:linkColor,size:size||inheritPropsFromText?.size,weight:weight||inheritPropsFromText?.weight,...rest},linkContent)});
+import React,{useContext}from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import{forwardRefPolymorphic}from"../../shared/forwardRefPolymorphic";import{TextContext}from"../Typography/Text/Text";import{Icon}from"../Icon/Icon";let StyledLink=styled("a",{shouldForwardProp:prop=>isPropValid(prop)&&"inline"!==prop,target:"ert2rd50",label:"StyledLink"})(({theme,weight,size,color,inline})=>({cursor:"pointer",background:"none",border:"none",padding:0,fontSize:(size&&theme.variables.size.font[size])??"inherit",fontWeight:(weight&&theme.variables.weight[weight])??"inherit",lineHeight:size?({xxs:theme.variables.size.lineHeight.m,xs:theme.variables.size.lineHeight.xl,s:theme.variables.size.lineHeight.l,m:theme.variables.size.lineHeight.xl,l:theme.variables.size.lineHeight.xl})[size]:void 0,fontFamily:theme.variables.fontFamily.lato,textDecorationLine:inline?"underline":"none",color:color?theme.values.color.text[color].default:"inherit",...("primary"===color||"secondary"===color||"tertiary"===color)&&{textDecorationColor:theme.values.color.text.underline.default},"&:hover":{textDecorationLine:"underline",textDecorationThickness:"0.125em",...("primary"===color||"secondary"===color||"tertiary"===color)&&{textDecorationColor:theme.values.color.text.underline.hover,color:theme.values.color.text[color].hover}}})),StyledIcon=styled(Icon,{target:"ert2rd51",label:"StyledIcon"})(({position,theme})=>({..."left"===position&&{marginRight:theme.variables.size.spacing.xxs},..."right"===position&&{marginLeft:theme.variables.size.spacing.xxs}}));export const Link=forwardRefPolymorphic(({weight,color:colorProp,size,variant,inline,iconLeft,iconRight,children,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let inheritPropsFromText=useContext(TextContext),linkColor=variant?"primary"===variant?"accent":"secondary"===variant?"primary":variant:colorProp||(inheritPropsFromText?.color?inheritPropsFromText?.color:inline?void 0:"accent"),isInlineLink=inline||!!inheritPropsFromText,linkContent=!isInlineLink&&(iconLeft||iconRight)?React.createElement(React.Fragment,null,iconLeft&&React.createElement(StyledIcon,{"aria-hidden":!0,size:"s",name:iconLeft.name,color:iconLeft.color??linkColor,inline:!0,position:"left"}),children,iconRight&&React.createElement(StyledIcon,{"aria-hidden":!0,size:"s",name:iconRight.name,color:iconRight.color??linkColor,inline:!0,position:"right"})):children;return React.createElement(StyledLink,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Link",ref:ref,inline:isInlineLink,color:linkColor,size:size||inheritPropsFromText?.size,weight:weight||inheritPropsFromText?.weight,...rest},linkContent)});

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

@@ -3,6 +3,7 @@ import type { Property } from "csstype";
 import type { Hyphens, MediaItemSize, PolymorphicComponentPropsWithRef } from "../../types";
 import { type IconName } from "../Icon/Icon";
 export declare const mediaSize: Record<MediaItemSize, number>;
+export declare const getMediaSize: (size: MediaItemSize | undefined) => number | undefined;
 export type MediaItemProps = {
     src: string;
     title: string;

package/build/esm/components/MediaItem/MediaItem.js

@@ -1 +1 @@
-import React,{useState}from"react";import styled from"@emotion/styled";import{Icon}from"../Icon/Icon";import{Stack}from"../Stack/Stack";import{TextClamped}from"../Typography/TextClamped/TextClamped";import{Inline}from"../Inline/Inline";import{Image}from"../Image/Image";import{ContentText}from"../Content/ContentText/ContentText";export const mediaSize={xs:80,s:88,m:110,l:128,xl:204};let StyledTextClamped=styled(TextClamped,{target:"eclnczy0",label:"StyledTextClamped"})(),StyledMedia=styled("div",{target:"eclnczy1",label:"StyledMedia"})(({squareByWidth,srcError})=>({height:"100%",...squareByWidth&&{position:"absolute",left:0,bottom:0,top:0,right:0},...srcError&&{display:"flex",alignItems:"center",justifyContent:"center"}})),StyledOverlay=styled("div",{target:"eclnczy2",label:"StyledOverlay"})(()=>({position:"absolute",left:0,bottom:0,top:0,right:0})),StyledButton=styled("button",{target:"eclnczy3",label:"StyledButton"})(({theme,size,width,isActive})=>({padding:0,backgroundColor:theme.values.color.background.transparent.default,border:"none",cursor:"pointer",borderRadius:theme.variables.size.borderRadius.s,width:mediaSize[size]||width||"100%",outlineOffset:"1px",outline:`solid 2px ${theme.values.color.background.transparent.default}`,transition:"all 0.3s ease",[`&:hover ${StyledTextClamped}, &:active ${StyledTextClamped}`]:{color:theme.values.color.text.primary.default},[`&:hover ${StyledOverlay}`]:{backgroundColor:theme.values.color.mediaItem.overlay.hover},[`&:active ${StyledOverlay}`]:{backgroundColor:theme.values.color.mediaItem.overlay.active},...!isActive&&{"&:focus-visible":{outlineWidth:"2px",outlineStyle:"solid",outlineColor:"Highlight"},"@media (-webkit-min-device-pixel-ratio:0)":{"&:focus-visible":{outlineColor:"-webkit-focus-ring-color",outlineStyle:"auto"}}},...isActive&&{outlineColor:theme.values.color.border.secondary.active}})),StyledMediaContainer=styled("div",{target:"eclnczy4",label:"StyledMediaContainer"})(({theme,size,height,backgroundColor,squareByWidth,srcError})=>({overflow:"hidden",border:"1px solid",borderColor:theme.values.color.border.secondary.default,borderRadius:theme.variables.size.borderRadius.s,position:"relative",backgroundClip:"padding-box",backgroundColor:theme.values.color.mediaItem.background[backgroundColor],height:mediaSize[size]||height||"auto",...squareByWidth&&{paddingTop:"calc(100% - 2px)",height:"auto"},...srcError&&{backgroundColor:theme.values.color.background.transparent.active}})),StyledIconContainer=styled("div",{target:"eclnczy5",label:"StyledIconContainer"})(({theme})=>({position:"absolute",left:theme.variables.size.spacing.xxs,bottom:theme.variables.size.spacing.xxs,overflow:"hidden",borderRadius:theme.variables.size.borderRadius.xs,backgroundColor:theme.values.color.mediaItem.categoryIcon.background.default,padding:theme.variables.size.spacing.xxs,color:theme.values.color.text.onAccent.default}));export const MediaItem=React.forwardRef(({"data-e2e-test-id":dataE2eTestId,as,src,title,showTitle=!0,fit="cover",categoryIcon,categoryLabel,categoryPlacement="outside",size,width,height,backgroundColor="transparent",hyphens="none",squareByWidth=!1,isActive,...rest},ref)=>{let[srcError,setSrcError]=useState(!1),showCategoryOver=categoryIcon&&(!size&&"inside"===categoryPlacement||"xs"===size||"s"===size||"m"===size),showCategoryUnder=categoryIcon&&categoryLabel&&(!size&&"outside"===categoryPlacement||"l"===size||"xl"===size),textSize=["xs","s","m"].includes(size)?"xs":"s",noVisibleText=!showTitle&&!showCategoryUnder;return React.createElement(StyledButton,{"data-ds-id":"MediaItem","data-e2e-test-id":dataE2eTestId,as:as,ref:ref,size:size,width:width,isActive:isActive,...rest,"aria-label":noVisibleText?title:void 0},React.createElement(Stack,{space:"xs"},React.createElement(StyledMediaContainer,{size:size,height:height,backgroundColor:backgroundColor,squareByWidth:squareByWidth,srcError:srcError},React.createElement(StyledMedia,{squareByWidth:squareByWidth,srcError:srcError},srcError?React.createElement(Icon,{name:"image-broken",color:"tertiary"}):React.createElement(Image,{src:src,fit:fit,title:title,alt:title,width:"100%",height:"100%","aria-hidden":"true",onError:()=>{setSrcError(!0)}})),React.createElement(StyledOverlay,null),showCategoryOver&&React.createElement(StyledIconContainer,null,React.createElement(Icon,{name:categoryIcon,size:"s",color:"inherit"}))),(showCategoryUnder||showTitle)&&React.createElement(Stack,{space:"xxs"},showCategoryUnder&&React.createElement(Inline,{space:"xxs",vAlignItems:"center"},React.createElement(Icon,{name:categoryIcon,color:"quaternary",size:"s"}),React.createElement(ContentText,{color:"tertiary",size:"xs",transform:"uppercase",weight:"bold"},categoryLabel)),showTitle&&React.createElement(StyledTextClamped,{size:textSize,color:"secondary",lines:3,hyphens:hyphens,overflowWrap:"break-word"},title))))});
+import React,{useState}from"react";import styled from"@emotion/styled";import{forwardRefPolymorphic}from"../../shared/forwardRefPolymorphic";import{Icon}from"../Icon/Icon";import{Stack}from"../Stack/Stack";import{TextClamped}from"../Typography/TextClamped/TextClamped";import{Inline}from"../Inline/Inline";import{Image}from"../Image/Image";import{ContentText}from"../Content/ContentText/ContentText";export const mediaSize={xs:80,s:88,m:110,l:128,xl:204};export const getMediaSize=size=>size?mediaSize[size]:void 0;let StyledTextClamped=styled(TextClamped,{target:"e1oxgvtl0",label:"StyledTextClamped"})(),StyledMedia=styled("div",{target:"e1oxgvtl1",label:"StyledMedia"})(({squareByWidth,srcError})=>({height:"100%",...squareByWidth&&{position:"absolute",left:0,bottom:0,top:0,right:0},...srcError&&{display:"flex",alignItems:"center",justifyContent:"center"}})),StyledOverlay=styled("div",{target:"e1oxgvtl2",label:"StyledOverlay"})(()=>({position:"absolute",left:0,bottom:0,top:0,right:0})),StyledButton=styled("button",{target:"e1oxgvtl3",label:"StyledButton"})(({theme,size,width,isActive})=>({padding:0,backgroundColor:theme.values.color.background.transparent.default,border:"none",cursor:"pointer",borderRadius:theme.variables.size.borderRadius.s,width:getMediaSize(size)||width||"100%",outlineOffset:"1px",outline:`solid 2px ${theme.values.color.background.transparent.default}`,transition:"all 0.3s ease",[`&:hover ${StyledTextClamped}, &:active ${StyledTextClamped}`]:{color:theme.values.color.text.primary.default},[`&:hover ${StyledOverlay}`]:{backgroundColor:theme.values.color.mediaItem.overlay.hover},[`&:active ${StyledOverlay}`]:{backgroundColor:theme.values.color.mediaItem.overlay.active},...!isActive&&{"&:focus-visible":{outlineWidth:"2px",outlineStyle:"solid",outlineColor:"Highlight"},"@media (-webkit-min-device-pixel-ratio:0)":{"&:focus-visible":{outlineColor:"-webkit-focus-ring-color",outlineStyle:"auto"}}},...isActive&&{outlineColor:theme.values.color.border.secondary.active}})),StyledMediaContainer=styled("div",{target:"e1oxgvtl4",label:"StyledMediaContainer"})(({theme,size,height,backgroundColor,squareByWidth,srcError})=>({overflow:"hidden",border:"1px solid",borderColor:theme.values.color.border.secondary.default,borderRadius:theme.variables.size.borderRadius.s,position:"relative",backgroundClip:"padding-box",backgroundColor:theme.values.color.mediaItem.background[backgroundColor],height:getMediaSize(size)||height||"auto",...squareByWidth&&{paddingTop:"calc(100% - 2px)",height:"auto"},...srcError&&{backgroundColor:theme.values.color.background.transparent.active}})),StyledIconContainer=styled("div",{target:"e1oxgvtl5",label:"StyledIconContainer"})(({theme})=>({position:"absolute",left:theme.variables.size.spacing.xxs,bottom:theme.variables.size.spacing.xxs,overflow:"hidden",borderRadius:theme.variables.size.borderRadius.xs,backgroundColor:theme.values.color.mediaItem.categoryIcon.background.default,padding:theme.variables.size.spacing.xxs,color:theme.values.color.text.onAccent.default}));export const MediaItem=forwardRefPolymorphic(({"data-e2e-test-id":dataE2eTestId,as,src,title,showTitle=!0,fit="cover",categoryIcon,categoryLabel,categoryPlacement="outside",size,width,height,backgroundColor="transparent",hyphens="none",squareByWidth=!1,isActive,...rest},ref)=>{let[srcError,setSrcError]=useState(!1),showCategoryOver=categoryIcon&&(!size&&"inside"===categoryPlacement||"xs"===size||"s"===size||"m"===size),showCategoryUnder=categoryIcon&&categoryLabel&&(!size&&"outside"===categoryPlacement||"l"===size||"xl"===size),textSize=size&&["xs","s","m"].includes(size)?"xs":"s",noVisibleText=!showTitle&&!showCategoryUnder;return React.createElement(StyledButton,{"data-ds-id":"MediaItem","data-e2e-test-id":dataE2eTestId,as:as,ref:ref,size:size,width:width,isActive:isActive,...rest,"aria-label":noVisibleText?title:void 0},React.createElement(Stack,{space:"xs"},React.createElement(StyledMediaContainer,{size:size,height:height,backgroundColor:backgroundColor,squareByWidth:squareByWidth,srcError:srcError},React.createElement(StyledMedia,{squareByWidth:squareByWidth,srcError:srcError},srcError?React.createElement(Icon,{name:"image-broken",color:"tertiary"}):React.createElement(Image,{src:src,fit:fit,title:title,alt:title,width:"100%",height:"100%","aria-hidden":"true",onError:()=>{setSrcError(!0)}})),React.createElement(StyledOverlay,null),showCategoryOver&&React.createElement(StyledIconContainer,null,React.createElement(Icon,{name:categoryIcon,size:"s",color:"inherit"}))),(showCategoryUnder||showTitle)&&React.createElement(Stack,{space:"xxs"},showCategoryUnder&&React.createElement(Inline,{space:"xxs",vAlignItems:"center"},React.createElement(Icon,{name:categoryIcon,color:"quaternary",size:"s"}),React.createElement(ContentText,{color:"tertiary",size:"xs",transform:"uppercase",weight:"bold"},categoryLabel)),showTitle&&React.createElement(StyledTextClamped,{size:textSize,color:"secondary",lines:3,hyphens:hyphens,overflowWrap:"break-word"},title))))});

package/build/esm/components/MediaItem/MediaItemSkeleton.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{Skeleton}from"../Skeleton/Skeleton";import{Stack}from"../Stack/Stack";import{TextSkeleton}from"../Typography/Text";import{mediaSize}from"./MediaItem";let StyledMediaContainer=styled("div",{target:"eyz5nci0",label:"StyledMediaContainer"})(({squareByWidth})=>({...squareByWidth&&{position:"relative",paddingTop:"100%"}})),StyledMedia=styled("div",{target:"eyz5nci1",label:"StyledMedia"})(({squareByWidth,width,height})=>({width,height,...squareByWidth&&{position:"absolute",inset:0}}));export function MediaItemSkeleton({size,showTitle=!0,width,height,squareByWidth,"data-e2e-test-id":dataE2eTestId}){let mediaSizePx=mediaSize[size]&&`${mediaSize[size]}px`,mediaItemWidth=mediaSizePx||width||"100%",mediaItemHeight=mediaSizePx||height||"auto";return React.createElement(Stack,{space:"xs","data-e2e-test-id":dataE2eTestId,"data-ds-id":"MediaItemSkeleton"},React.createElement(StyledMediaContainer,{squareByWidth:squareByWidth},React.createElement(StyledMedia,{width:mediaItemWidth,height:mediaItemHeight,squareByWidth:squareByWidth},React.createElement(Skeleton,{borderRadius:"s"}))),showTitle&&React.createElement(TextSkeleton,{size:"xs"===size||"s"===size?"xs":"s",lines:2,width:mediaItemWidth}))}
+import React from"react";import styled from"@emotion/styled";import{Skeleton}from"../Skeleton/Skeleton";import{Stack}from"../Stack/Stack";import{TextSkeleton}from"../Typography/Text";import{getMediaSize}from"./MediaItem";let StyledMediaContainer=styled("div",{target:"e1f6kpba0",label:"StyledMediaContainer"})(({squareByWidth})=>({...squareByWidth&&{position:"relative",paddingTop:"100%"}})),StyledMedia=styled("div",{target:"e1f6kpba1",label:"StyledMedia"})(({squareByWidth,width,height})=>({width,height,...squareByWidth&&{position:"absolute",inset:0}}));export function MediaItemSkeleton({size,showTitle=!0,width,height,squareByWidth,"data-e2e-test-id":dataE2eTestId}){let mediaSizeValue=getMediaSize(size),mediaSizePx=mediaSizeValue&&`${mediaSizeValue}px`,mediaItemWidth=mediaSizePx||width||"100%",mediaItemHeight=mediaSizePx||height||"auto";return React.createElement(Stack,{space:"xs","data-e2e-test-id":dataE2eTestId,"data-ds-id":"MediaItemSkeleton"},React.createElement(StyledMediaContainer,{squareByWidth:squareByWidth},React.createElement(StyledMedia,{width:mediaItemWidth,height:mediaItemHeight,squareByWidth:squareByWidth},React.createElement(Skeleton,{borderRadius:"s"}))),showTitle&&React.createElement(TextSkeleton,{size:"xs"===size||"s"===size?"xs":"s",lines:2,width:mediaItemWidth}))}

package/build/esm/components/MediaViewerBar/MediaViewerBar.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{Inline}from"../Inline/Inline";import{flattenChildren}from"../../shared/flattenChildren";import{SubThemeProvider}from"../SubThemeProvider/SubThemeProvider";let StyledMediaViewerBar=styled("div",{target:"e1rci0kk0",label:"StyledMediaViewerBar"})(({theme})=>({display:"inline-flex",borderRadius:theme.variables.size.spacing.xxs,height:theme.variables.size.spacing.l,backgroundColor:theme.values.color.background.primary.default,color:theme.values.color.text.secondary.default,overflow:"hidden","> div":{width:"100%","> div":{lineHeight:"normal"}}})),StyledSeparator=styled("div",{target:"e1rci0kk1",label:"StyledSeparator"})(({theme})=>({width:theme.variables.size.dimension.mediaViewerBar.separator.width,height:theme.variables.size.spacing.l,backgroundColor:theme.values.color.background.primary.default}));export function MediaViewerBar({children,hasSeparator,"data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let flattenedChildren=flattenChildren(children);return React.createElement(SubThemeProvider,{name:"dimmed"},React.createElement(StyledMediaViewerBar,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"MediaViewerBar",...ariaAttributes},React.createElement(Inline,{space:"zero",vAlignItems:"center",alignItems:"center",noWrap:!0},React.Children.map(flattenedChildren,(child,index)=>React.createElement(React.Fragment,null,hasSeparator&&index>0&&React.createElement(StyledSeparator,null),child)))))}
+import React,{isValidElement}from"react";import styled from"@emotion/styled";import{Inline}from"../Inline/Inline";import{flattenChildren}from"../../shared/flattenChildren";import{SubThemeProvider}from"../SubThemeProvider/SubThemeProvider";let StyledMediaViewerBar=styled("div",{target:"e1w5iaq30",label:"StyledMediaViewerBar"})(({theme})=>({display:"inline-flex",borderRadius:theme.variables.size.spacing.xxs,height:theme.variables.size.spacing.l,backgroundColor:theme.values.color.background.primary.default,color:theme.values.color.text.secondary.default,overflow:"hidden","> div":{width:"100%","> div":{lineHeight:"normal"}}})),StyledSeparator=styled("div",{target:"e1w5iaq31",label:"StyledSeparator"})(({theme})=>({width:theme.variables.size.dimension.mediaViewerBar.separator.width,height:theme.variables.size.spacing.l,backgroundColor:theme.values.color.background.primary.default}));export function MediaViewerBar({children,hasSeparator,"data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let flattenedChildren=flattenChildren(children);return React.createElement(SubThemeProvider,{name:"dimmed"},React.createElement(StyledMediaViewerBar,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"MediaViewerBar",...ariaAttributes},React.createElement(Inline,{space:"zero",vAlignItems:"center",alignItems:"center",noWrap:!0},flattenedChildren.map((child,index)=>React.createElement(React.Fragment,{key:isValidElement(child)?child.key:index},hasSeparator&&index>0&&React.createElement(StyledSeparator,null),child)))))}

package/build/esm/components/MediaViewerCarousel/CarouselThumbnail/CarouselThumbnail.js

@@ -1 +1 @@
-import React,{forwardRef}from"react";import styled from"@emotion/styled";import{Icon}from"../../Icon/Icon";import{MediaItem}from"../../MediaItem/MediaItem";let StyledThumbnail=styled("div",{target:"e1m1uu1j0",label:"StyledThumbnail"})(({theme})=>({margin:theme.variables.size.spacing.xxs,height:"80px",position:"relative"})),StyledIconContainer=styled("div",{target:"e1m1uu1j1",label:"StyledIconContainer"})(({theme})=>({position:"absolute",top:theme.variables.size.spacing.xxs,left:theme.variables.size.spacing.xxs,overflow:"hidden",alignItems:"center",justifyContent:"center",backgroundColor:theme.values.color.mediaItem.categoryIcon.background.default,borderRadius:theme.variables.size.borderRadius.xs,padding:theme.variables.size.spacing.xxs,color:theme.values.color.text.onAccent.default,boxShadow:theme.values.elevation[1],display:"flex",zIndex:6}));export const CarouselThumbnail=forwardRef(({assetIndex,bottomLeftIconName,isActive,onClickThumbnail,src,title,topLeftIconName},ref)=>React.createElement(StyledThumbnail,{role:"presentation"},topLeftIconName&&React.createElement(StyledIconContainer,{"data-testid":"top-left-icon"},React.createElement(Icon,{name:topLeftIconName,size:"s",color:"inherit"})),React.createElement(MediaItem,{src:src,title:title??"asset",size:"xs",squareByWidth:!0,categoryIcon:bottomLeftIconName??void 0,categoryPlacement:"inside",showTitle:!1,onClick:()=>{onClickThumbnail(assetIndex)},onKeyDown:ev=>{ev.key.startsWith("Arrow")||"Tab"===ev.key||"Shift"===ev.key||onClickThumbnail(assetIndex,ev)},ref:ref,isActive:isActive})));
+import React,{forwardRef}from"react";import styled from"@emotion/styled";import{Icon}from"../../Icon/Icon";import{MediaItem}from"../../MediaItem/MediaItem";let StyledThumbnail=styled("div",{target:"eqnilxd0",label:"StyledThumbnail"})(({theme})=>({margin:theme.variables.size.spacing.xxs,height:"80px",position:"relative"})),StyledIconContainer=styled("div",{target:"eqnilxd1",label:"StyledIconContainer"})(({theme})=>({position:"absolute",top:theme.variables.size.spacing.xxs,left:theme.variables.size.spacing.xxs,overflow:"hidden",alignItems:"center",justifyContent:"center",backgroundColor:theme.values.color.mediaItem.categoryIcon.background.default,borderRadius:theme.variables.size.borderRadius.xs,padding:theme.variables.size.spacing.xxs,color:theme.values.color.text.onAccent.default,boxShadow:theme.values.elevation[1],display:"flex",zIndex:6}));export const CarouselThumbnail=forwardRef(({assetIndex,bottomLeftIconName,isActive,onClickThumbnail,src,title,topLeftIconName},ref)=>React.createElement(StyledThumbnail,{role:"presentation"},topLeftIconName&&React.createElement(StyledIconContainer,{"data-testid":"top-left-icon"},React.createElement(Icon,{name:topLeftIconName,size:"s",color:"inherit"})),React.createElement(MediaItem,{src:src,title:title??"asset",size:"xs",squareByWidth:!0,categoryIcon:bottomLeftIconName??void 0,categoryPlacement:"inside",showTitle:!1,onClick:()=>{onClickThumbnail(assetIndex)},onKeyDown:ev=>{ev.key.startsWith("Arrow")||"Tab"===ev.key||"Shift"===ev.key||onClickThumbnail(assetIndex,ev)},ref:ref,isActive:isActive})));

package/build/esm/components/MediaViewerCarousel/MediaCarousel/MediaCarousel.js

@@ -1 +1 @@
-import React,{useRef,useEffect}from"react";import styled from"@emotion/styled";import{Button}from"../../Button/Button";import{Icon}from"../../Icon/Icon";import{Inline}from"../../Inline/Inline";import{useIsScrollable}from"../useIsScrollable";import{CarouselThumbnail}from"../CarouselThumbnail/CarouselThumbnail";let StyledWrapper=styled("div",{target:"e6wa5tu0",label:"StyledWrapper"})(({showNavButtons})=>({width:"100%",...showNavButtons?{padding:"0 40px"}:{padding:"0 8px"}})),StyledButtonWrapper=styled("div",{target:"e6wa5tu1",label:"StyledButtonWrapper"})(({alignRight=!1,isScrollable,theme})=>({position:"absolute",top:"0",bottom:"0",left:alignRight?"auto":"0",right:alignRight?"0":"auto",height:"100%",width:40,display:"flex",boxShadow:isScrollable?theme.values.elevation[1]:"none",zIndex:1,button:{width:40}})),StyledOuterContainer=styled("div",{target:"e6wa5tu2",label:"StyledOuterContainer"})(({theme})=>({position:"relative",display:"flex",flexWrap:"nowrap",justifyContent:"center",overflowX:"auto",overflowY:"hidden",paddingTop:theme.variables.size.spacing.xxs,scrollBehavior:"smooth",width:"100%",scrollbarWidth:"auto",scrollbarColor:`${theme.values.color.tag.background.gray} ${theme.values.color.background.transparent.active}`,"::-webkit-scrollbar":{height:"8px"},"::-webkit-scrollbar-thumb":{background:theme.values.color.tag.background.gray},"::-webkit-scrollbar-track":{background:theme.values.color.background.transparent.active}})),StyledInnerContainer=styled("div",{target:"e6wa5tu3",label:"StyledInnerContainer"})({display:"flex",flexWrap:"nowrap",maxWidth:"100%"});export const MediaCarousel=({activeItemRef,currentIndex,mediaAssets,nextBtnAriaLabel,onClickNext,onClickPrevious,onClickThumbnail,prevBtnAriaLabel,setIsReady,showNavButtons,skipArrowKeysListener,...ariaAttributes})=>{let thumbnailCount=mediaAssets.length,scrollContainerRef=useRef(null),innerContainerRef=useRef(null),isScrollable=useIsScrollable(scrollContainerRef,innerContainerRef),currentIndexRef=useRef(currentIndex);useEffect(()=>{currentIndexRef.current=currentIndex},[currentIndex]),useEffect(()=>{activeItemRef.current&&scrollContainerRef.current&&innerContainerRef.current&&setIsReady(()=>!0)},[activeItemRef,scrollContainerRef,innerContainerRef,setIsReady]);let handleClickNext=()=>{if(currentIndexRef.current!==thumbnailCount-1&&(onClickNext(),isScrollable&&scrollContainerRef.current&&activeItemRef.current)){let itemWidth=activeItemRef.current.offsetWidth+8;scrollContainerRef.current?.scrollBy?.({left:itemWidth,behavior:"smooth"})}},handleClickPrevious=()=>{if(!(currentIndexRef.current<=0)&&(onClickPrevious(),isScrollable&&scrollContainerRef.current&&activeItemRef.current)){let itemWidth=activeItemRef.current.offsetWidth+8;scrollContainerRef.current?.scrollBy?.({left:-itemWidth,behavior:"smooth"})}};return useEffect(()=>{if(skipArrowKeysListener)return;let currentRef=scrollContainerRef.current;if(currentRef)return currentRef.addEventListener("keydown",listener),()=>{currentRef.removeEventListener("keydown",listener)};function listener(event){"ArrowRight"===event.key&&handleClickNext(),"ArrowLeft"===event.key&&handleClickPrevious()}},[scrollContainerRef]),React.createElement(StyledWrapper,{showNavButtons:showNavButtons},showNavButtons&&React.createElement(StyledButtonWrapper,{isScrollable:isScrollable},React.createElement(Button,{variant:"tertiary",onClick:handleClickPrevious,disabled:0===currentIndex,size:"s","aria-label":prevBtnAriaLabel},React.createElement(Icon,{name:"chevron-left",color:"secondary"}))),React.createElement(StyledOuterContainer,{ref:scrollContainerRef,"aria-label":"thumbnails scrollable container",...ariaAttributes},React.createElement(StyledInnerContainer,{ref:innerContainerRef},React.createElement(Inline,{noWrap:!0,space:"xxxs"},mediaAssets.map(({src,title,bottomLeftIconName,topLeftIconName,xid},index)=>React.createElement(CarouselThumbnail,{key:`carousel-item-${xid}`,assetIndex:index,isActive:index===currentIndex,ref:index===currentIndex?activeItemRef:null,src:src,title:title,topLeftIconName:topLeftIconName,bottomLeftIconName:bottomLeftIconName,onClickThumbnail:onClickThumbnail}))))),showNavButtons&&React.createElement(StyledButtonWrapper,{alignRight:!0,isScrollable:isScrollable},React.createElement(Button,{variant:"tertiary",onClick:handleClickNext,disabled:currentIndex===thumbnailCount-1,size:"s","aria-label":nextBtnAriaLabel},React.createElement(Icon,{name:"chevron-right",color:"secondary"}))))};
+import React,{useRef,useEffect}from"react";import styled from"@emotion/styled";import{Button}from"../../Button/Button";import{Icon}from"../../Icon/Icon";import{Inline}from"../../Inline/Inline";import{useIsScrollable}from"../useIsScrollable";import{CarouselThumbnail}from"../CarouselThumbnail/CarouselThumbnail";let StyledWrapper=styled("div",{target:"e1fy04om0",label:"StyledWrapper"})(({showNavButtons})=>({width:"100%",...showNavButtons?{padding:"0 40px"}:{padding:"0 8px"}})),StyledButtonWrapper=styled("div",{target:"e1fy04om1",label:"StyledButtonWrapper"})(({alignRight=!1,isScrollable,theme})=>({position:"absolute",top:"0",bottom:"0",left:alignRight?"auto":"0",right:alignRight?"0":"auto",height:"100%",width:40,display:"flex",boxShadow:isScrollable?theme.values.elevation[1]:"none",zIndex:1,button:{width:40}})),StyledOuterContainer=styled("div",{target:"e1fy04om2",label:"StyledOuterContainer"})(({theme})=>({position:"relative",display:"flex",flexWrap:"nowrap",justifyContent:"center",overflowX:"auto",overflowY:"hidden",paddingTop:theme.variables.size.spacing.xxs,scrollBehavior:"smooth",width:"100%",scrollbarWidth:"auto",scrollbarColor:`${theme.values.color.tag.background.gray} ${theme.values.color.background.transparent.active}`,"::-webkit-scrollbar":{height:"8px"},"::-webkit-scrollbar-thumb":{background:theme.values.color.tag.background.gray},"::-webkit-scrollbar-track":{background:theme.values.color.background.transparent.active}})),StyledInnerContainer=styled("div",{target:"e1fy04om3",label:"StyledInnerContainer"})({display:"flex",flexWrap:"nowrap",maxWidth:"100%"});export const MediaCarousel=({activeItemRef,currentIndex,mediaAssets,nextBtnAriaLabel,onClickNext,onClickPrevious,onClickThumbnail,prevBtnAriaLabel,setIsReady,showNavButtons,skipArrowKeysListener,...ariaAttributes})=>{let thumbnailCount=mediaAssets.length,scrollContainerRef=useRef(null),innerContainerRef=useRef(null),isScrollable=useIsScrollable(scrollContainerRef,innerContainerRef),currentIndexRef=useRef(currentIndex);useEffect(()=>{currentIndexRef.current=currentIndex},[currentIndex]),useEffect(()=>{activeItemRef?.current&&scrollContainerRef.current&&innerContainerRef.current&&setIsReady(()=>!0)},[activeItemRef,scrollContainerRef,innerContainerRef,setIsReady]);let handleClickNext=()=>{if(currentIndexRef.current!==thumbnailCount-1&&(onClickNext(),isScrollable&&scrollContainerRef.current&&activeItemRef?.current)){let itemWidth=activeItemRef.current.offsetWidth+8;scrollContainerRef.current?.scrollBy?.({left:itemWidth,behavior:"smooth"})}},handleClickPrevious=()=>{if(!(currentIndexRef.current<=0)&&(onClickPrevious(),isScrollable&&scrollContainerRef.current&&activeItemRef?.current)){let itemWidth=activeItemRef.current.offsetWidth+8;scrollContainerRef.current?.scrollBy?.({left:-itemWidth,behavior:"smooth"})}};return useEffect(()=>{if(skipArrowKeysListener)return;let currentRef=scrollContainerRef.current;if(currentRef)return currentRef.addEventListener("keydown",listener),()=>{currentRef.removeEventListener("keydown",listener)};function listener(event){"ArrowRight"===event.key&&handleClickNext(),"ArrowLeft"===event.key&&handleClickPrevious()}},[scrollContainerRef]),React.createElement(StyledWrapper,{showNavButtons:showNavButtons},showNavButtons&&React.createElement(StyledButtonWrapper,{isScrollable:isScrollable},React.createElement(Button,{variant:"tertiary",onClick:handleClickPrevious,disabled:0===currentIndex,size:"s","aria-label":prevBtnAriaLabel},React.createElement(Icon,{name:"chevron-left",color:"secondary"}))),React.createElement(StyledOuterContainer,{ref:scrollContainerRef,"aria-label":"thumbnails scrollable container",...ariaAttributes},React.createElement(StyledInnerContainer,{ref:innerContainerRef},React.createElement(Inline,{noWrap:!0,space:"xxxs"},mediaAssets.map(({src,title,bottomLeftIconName,topLeftIconName,xid},index)=>React.createElement(CarouselThumbnail,{key:`carousel-item-${xid}`,assetIndex:index,isActive:index===currentIndex,ref:index===currentIndex?activeItemRef:null,src:src,title:title,topLeftIconName:topLeftIconName,bottomLeftIconName:bottomLeftIconName,onClickThumbnail:onClickThumbnail}))))),showNavButtons&&React.createElement(StyledButtonWrapper,{alignRight:!0,isScrollable:isScrollable},React.createElement(Button,{variant:"tertiary",onClick:handleClickNext,disabled:currentIndex===thumbnailCount-1,size:"s","aria-label":nextBtnAriaLabel},React.createElement(Icon,{name:"chevron-right",color:"secondary"}))))};

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

@@ -19,4 +19,4 @@ export type NotificationProps = {
     onClickDismiss?: () => void;
     children?: React.ReactNode;
 };
-export declare function Notification({ type, text, icon, isDismissable, callToActionLabel, onClickDismiss, onClickCallToAction, expandable, expandButtonLabel, shrinkButtonLabel, children, adjustForSideNavToggle, closeButtonAriaLabel, "data-e2e-test-id": dataE2eTestId, ...ariaAttributes }: NotificationProps): React.ReactElement;
+export declare function Notification({ type, text, icon, isDismissable, callToActionLabel, onClickDismiss, onClickCallToAction, expandable, expandButtonLabel, shrinkButtonLabel, children, adjustForSideNavToggle, closeButtonAriaLabel, "data-e2e-test-id": dataE2eTestId, ...ariaAttributes }: NotificationProps): React.ReactElement | null;

package/build/esm/components/Notification/Notification.js

@@ -1 +1 @@
-import React,{useState,useContext}from"react";import styled from"@emotion/styled";import{Card}from"../Card/Card";import{Box}from"../Box/Box";import{Columns,Column}from"../Column/Columns";import{Button}from"../Button/Button";import{Icon}from"../Icon/Icon";import{Text}from"../Typography/Text/Text";import{SubThemeProvider}from"../SubThemeProvider/SubThemeProvider";import{SubThemeContext}from"../SubThemeProvider/SubThemeContext";let StyledExpandingContainer=styled("div",{target:"e1qub0kk0",label:"StyledExpandingContainer"})(({isDismissed})=>({transform:`translateY(${isDismissed?"calc(-100% - 8px)":"0%"})`,transition:`transform ${200*!!isDismissed}ms cubic-bezier(0.0, 0.0, 0.25, 1.0)`})),StyledContainer=styled("div",{target:"e1qub0kk1",label:"StyledContainer"})(()=>({overflow:"hidden"})),DEFAULT_ICONS_BY_TYPE={info:"info",success:"check-circle",error:"alert-triangle"};export function Notification({type,text,icon,isDismissable,callToActionLabel,onClickDismiss,onClickCallToAction,expandable,expandButtonLabel,shrinkButtonLabel,children,adjustForSideNavToggle,closeButtonAriaLabel="Dismiss notification","data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let[isExpanded,setIsExpanded]=useState(!1),[isDismissed,setIsDismissed]=useState(!1),subTheme=useContext(SubThemeContext),subThemeName=Object.keys(DEFAULT_ICONS_BY_TYPE).includes(subTheme)?type??subTheme??"info":type??"info",iconName=void 0===icon?DEFAULT_ICONS_BY_TYPE[subThemeName]:icon;return isDismissed?null:React.createElement(StyledContainer,{"data-ds-id":"Notification",...ariaAttributes,role:"alert"},React.createElement(SubThemeProvider,{name:subThemeName},React.createElement(StyledExpandingContainer,{isDismissed:isDismissed},React.createElement(Card,{squareCorners:!0,"data-e2e-test-id":dataE2eTestId},React.createElement(Box,{space:"s",...adjustForSideNavToggle&&{lSpace:["s","l"]}},React.createElement(Columns,{gap:"s",vAlignItems:"top"},iconName&&React.createElement(Column,{size:"narrow"},React.createElement(Box,{vSpace:"xxs",space:"zero"},React.createElement(Icon,{"aria-label":subThemeName,role:"img",name:iconName,color:"primary","data-testid":"icon"}))),React.createElement(Column,{size:"fill"},React.createElement(Box,{vSpace:"xxs",space:"zero"},React.createElement(Text,null,text)))," ",(callToActionLabel||expandable)&&React.createElement(Column,{size:[12,"narrow","narrow"],order:["last","unset","unset"]},callToActionLabel&&React.createElement(Button,{size:"s",fullWidth:!0,onClick:onClickCallToAction},callToActionLabel),expandable&&React.createElement(Button,{size:"s",fullWidth:!0,onClick:()=>setIsExpanded(!isExpanded),rightIcon:isExpanded?"chevron-up":"chevron-down"},isExpanded?shrinkButtonLabel:expandButtonLabel)),isDismissable&&React.createElement(Column,{size:"narrow"},React.createElement(Button,{"aria-label":closeButtonAriaLabel,leftIcon:"x",variant:"tertiary",size:"s",onClick:()=>{setIsDismissed(!0),setTimeout(onClickDismiss,200)}}))),isExpanded&&children)))))}
+import React,{useState,useContext}from"react";import styled from"@emotion/styled";import{Card}from"../Card/Card";import{Box}from"../Box/Box";import{Columns,Column}from"../Column/Columns";import{Button}from"../Button/Button";import{Icon}from"../Icon/Icon";import{Text}from"../Typography/Text/Text";import{SubThemeProvider}from"../SubThemeProvider/SubThemeProvider";import{SubThemeContext}from"../SubThemeProvider/SubThemeContext";let StyledExpandingContainer=styled("div",{target:"elxowvq0",label:"StyledExpandingContainer"})(({isDismissed})=>({transform:`translateY(${isDismissed?"calc(-100% - 8px)":"0%"})`,transition:`transform ${200*!!isDismissed}ms cubic-bezier(0.0, 0.0, 0.25, 1.0)`})),StyledContainer=styled("div",{target:"elxowvq1",label:"StyledContainer"})(()=>({overflow:"hidden"})),DEFAULT_ICONS_BY_TYPE={info:"info",success:"check-circle",error:"alert-triangle"};export function Notification({type,text,icon,isDismissable,callToActionLabel,onClickDismiss,onClickCallToAction,expandable,expandButtonLabel,shrinkButtonLabel,children,adjustForSideNavToggle,closeButtonAriaLabel="Dismiss notification","data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let[isExpanded,setIsExpanded]=useState(!1),[isDismissed,setIsDismissed]=useState(!1),subTheme=useContext(SubThemeContext),subThemeName=subTheme&&Object.keys(DEFAULT_ICONS_BY_TYPE).includes(subTheme)?type??subTheme:type??"info",iconName=void 0===icon?DEFAULT_ICONS_BY_TYPE[subThemeName]:icon;return isDismissed?null:React.createElement(StyledContainer,{"data-ds-id":"Notification",...ariaAttributes,role:"alert"},React.createElement(SubThemeProvider,{name:subThemeName},React.createElement(StyledExpandingContainer,{isDismissed:isDismissed},React.createElement(Card,{squareCorners:!0,"data-e2e-test-id":dataE2eTestId},React.createElement(Box,{space:"s",...adjustForSideNavToggle?{lSpace:["s","l"]}:{}},React.createElement(Columns,{gap:"s",vAlignItems:"top"},iconName&&React.createElement(Column,{size:"narrow"},React.createElement(Box,{vSpace:"xxs",space:"zero"},React.createElement(Icon,{"aria-label":subThemeName,role:"img",name:iconName,color:"primary","data-testid":"icon"}))),React.createElement(Column,{size:"fill"},React.createElement(Box,{vSpace:"xxs",space:"zero"},React.createElement(Text,null,text)))," ",(callToActionLabel||expandable)&&React.createElement(Column,{size:[12,"narrow","narrow"],order:["last","unset","unset"]},callToActionLabel&&React.createElement(Button,{size:"s",fullWidth:!0,onClick:onClickCallToAction},callToActionLabel),expandable&&React.createElement(Button,{size:"s",fullWidth:!0,onClick:()=>setIsExpanded(!isExpanded),rightIcon:isExpanded?"chevron-up":"chevron-down"},isExpanded?shrinkButtonLabel:expandButtonLabel)),isDismissable&&React.createElement(Column,{size:"narrow"},React.createElement(Button,{"aria-label":closeButtonAriaLabel,leftIcon:"x",variant:"tertiary",size:"s",onClick:()=>{setIsDismissed(!0),onClickDismiss&&setTimeout(onClickDismiss,200)}}))),isExpanded&&children)))))}

package/build/esm/components/Patterns/ButtonGroup/ButtonGroup.d.ts

@@ -26,4 +26,4 @@ export type ButtonGroupProps<C extends React.ElementType = "button"> = {
     buttonSize?: ButtonSize;
     "data-e2e-test-id"?: string;
 } & AriaAttributes;
-export declare function ButtonGroup<C extends React.ElementType = "button">({ cancelButtonText, actionButton, secondaryButton, buttonSize, onButtonClick, "data-e2e-test-id": dataE2eTestId, "aria-describedby": ariaDescribedBy, ...ariaAttributes }: ButtonGroupProps<C>): React.ReactElement;
+export declare function ButtonGroup<C extends React.ElementType = "button">({ cancelButtonText, actionButton, secondaryButton, buttonSize, onButtonClick, "data-e2e-test-id": dataE2eTestId, "aria-describedby": ariaDescribedBy, ...ariaAttributes }: ButtonGroupProps<C>): React.ReactElement | null;

package/build/esm/components/Patterns/EmptyState/EmptyState.js

@@ -1 +1 @@
-import React from"react";import{mergeAriaDescribedBy}from"../../../shared/ariaAttributes";import{IconTile}from"../../IconTile/IconTile";import{Link}from"../../Link/Link";import{Stack}from"../../Stack/Stack";import{H3}from"../../Typography/Header";import{Text}from"../../Typography/Text";import{ButtonGroup}from"../ButtonGroup/ButtonGroup";let DEFAULT_ICONS_BY_VARIANT={brand:"face-happy",warning:"alert-circle",error:"alert-triangle",neutral:"info",ai:"ai-sparkle"},ICON_COLORS={brand:"brand",warning:"yellow",error:"red",neutral:"gray",ai:"purple"};export function EmptyState({title,titleAs="p",description,variant,icon,children,"data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let reactId=React.useId(),descriptionId=description&&React.isValidElement(children)?`${reactId}-description`:void 0,action=descriptionId&&React.isValidElement(children)?React.cloneElement(children,{"aria-describedby":mergeAriaDescribedBy(children.props["aria-describedby"],descriptionId)}):children;return React.createElement(Stack,{alignItems:"center",space:"s","data-e2e-test-id":dataE2eTestId,"data-ds-id":"EmptyState",...ariaAttributes},variant&&React.createElement(IconTile,{icon:icon??DEFAULT_ICONS_BY_VARIANT[variant],color:ICON_COLORS[variant],"aria-hidden":!0}),React.createElement(Stack,{space:"zero",alignItems:"center"},React.createElement(H3,{as:titleAs},title),description&&React.createElement(Text,{id:descriptionId,align:"center",size:"s",color:"tertiary"},description)),action)}EmptyState.ButtonGroup=function({...rest}){return React.createElement(ButtonGroup,{...rest,buttonSize:"s"})},EmptyState.Link=function({children,...rest}){return React.createElement(Link,{...rest,size:"s",color:"accent",weight:"bold",inline:!1},children)};
+import React from"react";import{mergeAriaDescribedBy}from"../../../shared/ariaAttributes";import{IconTile}from"../../IconTile/IconTile";import{Link}from"../../Link/Link";import{Stack}from"../../Stack/Stack";import{H3}from"../../Typography/Header";import{Text}from"../../Typography/Text";import{ButtonGroup}from"../ButtonGroup/ButtonGroup";let DEFAULT_ICONS_BY_VARIANT={brand:"face-happy",warning:"alert-circle",error:"alert-triangle",neutral:"info",ai:"ai-sparkle"},ICON_COLORS={brand:"brand",warning:"yellow",error:"red",neutral:"gray",ai:"purple"},describeChild=({children,descriptionId})=>descriptionId&&React.isValidElement(children)?React.cloneElement(children,{"aria-describedby":mergeAriaDescribedBy(children.props["aria-describedby"],descriptionId)}):children;export function EmptyState({title,titleAs="p",description,variant,icon,children,"data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let reactId=React.useId(),descriptionId=description&&React.isValidElement(children)?`${reactId}-description`:void 0,action=describeChild({children,descriptionId});return React.createElement(Stack,{alignItems:"center",space:"s","data-e2e-test-id":dataE2eTestId,"data-ds-id":"EmptyState",...ariaAttributes},variant&&React.createElement(IconTile,{icon:icon??DEFAULT_ICONS_BY_VARIANT[variant],color:ICON_COLORS[variant],"aria-hidden":!0}),React.createElement(Stack,{space:"zero",alignItems:"center"},React.createElement(H3,{as:titleAs},title),description&&React.createElement(Text,{id:descriptionId,align:"center",size:"s",color:"tertiary"},description)),action)}EmptyState.ButtonGroup=function({...rest}){return React.createElement(ButtonGroup,{...rest,buttonSize:"s"})},EmptyState.Link=function({children,...rest}){return React.createElement(Link,{...rest,size:"s",color:"accent",weight:"bold",inline:!1},children)};

package/build/esm/components/Patterns/Modal/Modal.js

@@ -1,4 +1,4 @@
-import React,{useMemo,useRef,useId,useEffect,useState}from"react";import styled from"@emotion/styled";import{keyframes}from"@emotion/react";import{H2,H4,H6,H3}from"../../Typography/Header/Header";import{Stack}from"../../Stack/Stack";import{Container}from"../../Container/Container";import{Box}from"../../Box/Box";import{ButtonGroup}from"../ButtonGroup/ButtonGroup";import{PictogramButton}from"../../PictogramButton/PictogramButton";import{Text}from"../../Typography/Text/Text";import{useResponsiveValue}from"../../../shared/mediaQueries";import{useScrollDetection}from"../../../shared/useScrollDetection";import{appendId}from"../../../shared/appendId";import{useWindow}from"../../../shared/useWindow";import{Lightbox}from"../../Lightbox/Lightbox";let getDesktopSpace=theme=>theme.variables.size.spacing.l,getDesktopInnerSpace=theme=>theme.variables.size.spacing.xl,getMobileSpace=theme=>theme.variables.size.spacing.m,getMobileInnerSpace=theme=>theme.variables.size.spacing.m,StyledModalWrapper=styled("div",{target:"ezci64j0",label:"StyledModalWrapper"})(({theme,isFullScreen,size})=>{let fadeInModal=useMemo(()=>keyframes`
+import React,{useMemo,useRef,useId,useEffect,useState}from"react";import styled from"@emotion/styled";import{keyframes}from"@emotion/react";import{H2,H4,H6,H3}from"../../Typography/Header/Header";import{Stack}from"../../Stack/Stack";import{Container}from"../../Container/Container";import{Box}from"../../Box/Box";import{ButtonGroup}from"../ButtonGroup/ButtonGroup";import{PictogramButton}from"../../PictogramButton/PictogramButton";import{Text}from"../../Typography/Text/Text";import{useResponsiveValue}from"../../../shared/mediaQueries";import{useScrollDetection}from"../../../shared/useScrollDetection";import{appendId}from"../../../shared/appendId";import{useWindow}from"../../../shared/useWindow";import{Lightbox}from"../../Lightbox/Lightbox";let getDesktopSpace=theme=>theme.variables.size.spacing.l,getDesktopInnerSpace=theme=>theme.variables.size.spacing.xl,getMobileSpace=theme=>theme.variables.size.spacing.m,getMobileInnerSpace=theme=>theme.variables.size.spacing.m,StyledModalWrapper=styled("div",{target:"eybea2o0",label:"StyledModalWrapper"})(({theme,isFullScreen,size})=>{let fadeInModal=useMemo(()=>keyframes`
       from {
         opacity: ${theme.variables.opacity.hidden};
         transform: translateY(20px);
@@ -7,4 +7,4 @@ import React,{useMemo,useRef,useId,useEffect,useState}from"react";import styled
           opacity: ${theme.variables.opacity.visible};
         transform: translateY(0);
       }
-    `,[theme.variables.opacity.hidden,theme.variables.opacity.visible]);return{animation:`${fadeInModal} ${theme.variables.animation.modal.open.duration} ${theme.variables.animation.modal.open.delay} ${theme.variables.animation.modal.open.timingFunction} both`,"&:focus":{outline:"none"},...useResponsiveValue({width:[`calc(100% - ${getMobileSpace(theme)} * 2)`,isFullScreen?`calc(100% - ${getDesktopSpace(theme)} * 2)`:theme.variables.size.dimension.modal.width[size]]})}}),StyledInner=styled("div",{target:"ezci64j1",label:"StyledInner"})(({theme,isFullScreen,size})=>{let mobileVerticalSpace=getMobileSpace(theme),mobileInnerVerticalSpace=getMobileInnerSpace(theme),desktopVerticalSpace=getDesktopSpace(theme),desktopInnerVerticalSpace=getDesktopInnerSpace(theme),fullScreenMobile=`calc(100dvh - ${mobileVerticalSpace} * 2 - ${mobileInnerVerticalSpace} * 2)`;return{display:"flex",...useResponsiveValue({height:["l"===size||isFullScreen?fullScreenMobile:"auto",isFullScreen?`calc(100dvh - ${desktopVerticalSpace} * 2 - ${desktopInnerVerticalSpace} * 2)`:"l"===size?`calc(100dvh - ${desktopVerticalSpace} * 2 - ${desktopInnerVerticalSpace} * 2 - ${theme.variables.size.dimension.modal.margin.l} * 2)`:"auto"],maxHeight:[fullScreenMobile,isFullScreen?"auto":"l"===size?`calc(${theme.variables.size.dimension.modal.maxHeight.l} - ${desktopInnerVerticalSpace} * 2)`:`calc(100dvh - ${desktopVerticalSpace} * 2 - ${desktopInnerVerticalSpace} * 2)`]}),flexDirection:"column",overflow:"hidden"}}),StyledBody=styled("div",{target:"ezci64j2",label:"StyledBody"})(({theme,borderBottom,borderTop,size,isFullScreen,privateProps})=>({overflowY:"auto",maxHeight:"100%",...(isFullScreen||"l"===size)&&{flex:1},...privateProps?.height&&{height:privateProps?.height},...borderBottom&&{borderBottom:`1px solid ${theme.values.color.divider.primary}`},...borderTop&&{borderTop:`1px solid ${theme.values.color.divider.primary}`}})),StyledImg=styled("img",{target:"ezci64j3",label:"StyledImg"})(()=>({width:"100%",aspectRatio:"16/9"})),StyledMaxWidth=styled("div",{target:"ezci64j4",label:"StyledMaxWidth"})(({theme})=>({maxWidth:theme.variables.size.dimension.modal.fullScreenContentWidth,margin:"0 auto",height:"100%"})),StyledXContainer=styled("div",{target:"ezci64j5",label:"StyledXContainer"})(({theme})=>({position:"absolute",...useResponsiveValue({top:[theme.variables.size.spacing.s,theme.variables.size.spacing.l],right:[theme.variables.size.spacing.s,theme.variables.size.spacing.l]})})),Footer=({children,alignItems=["stretch","right"],isShortViewport})=>React.createElement(Box,{space:"zero",tSpace:isShortViewport?"m":"l"},React.createElement(Stack,{alignItems:alignItems},children)),HorizontalOffset=({children,isFullScreen,isMaxWidthLimit,height})=>React.createElement(Box,{space:["m","xl"],vSpace:"zero",height:height},isFullScreen&&isMaxWidthLimit?React.createElement(StyledMaxWidth,null,children):children);function getIsShortViewport(window){return void 0!==window&&window.innerHeight<420}export function Modal({header,subHeader,labelHeader,children,imageUrl,ImageComponent,secondaryButton,cancelButtonLabel,isDismissible=!0,isFullScreen,isMaxWidthLimit=!0,actionButton,role="dialog",onAction,size="m",privateProps:{skipPortal,height,zeroPadding,tabbableOptions}={skipPortal:!1,height:void 0,zeroPadding:!1},portalContainer,closeButtonAriaLabel="Dismiss Dialog","data-e2e-test-id":dataE2eTestId,imageAlt,initialFocus,...ariaAttributes}){let{"aria-label":ariaLabel,"aria-describedby":ariaDescribedBy,...restAriaAttributes}=ariaAttributes,backdropRef=useRef(null),subHeaderId=useId(),window=useWindow(),{scrollableRef,isScrollBottom,isScrollTop,hasScroll}=useScrollDetection(),[isShortViewport,setIsShortViewport]=useState(getIsShortViewport(window));useEffect(()=>{let resizeObserver;return"undefined"!=typeof ResizeObserver&&backdropRef.current&&(resizeObserver=new ResizeObserver(()=>{setIsShortViewport(getIsShortViewport(window))})).observe(backdropRef.current),()=>{resizeObserver&&resizeObserver.disconnect()}},[window]);let handleClose=()=>{onAction("cancel")},hasImage=imageUrl||ImageComponent,isImageVisible=!isShortViewport&&!!hasImage,horizontalOffsetProps={isFullScreen,isMaxWidthLimit},closeButton=isDismissible&&React.createElement(StyledXContainer,null,React.createElement(PictogramButton,{variant:"tertiary",icon:"x",size:"s",onClick:handleClose,"aria-label":closeButtonAriaLabel,"data-modal-close-btn":!0}));return React.createElement(Lightbox,{backdropRef:backdropRef,portalContainer:portalContainer,handleClose:handleClose,isDismissible:isDismissible,privateProps:{skipPortal,tabbableOptions},initialFocus:initialFocus},React.createElement(StyledModalWrapper,{role:role,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Modal",isFullScreen:isFullScreen,size:size,"aria-label":ariaLabel||header,"aria-describedby":subHeader?appendId(ariaDescribedBy,subHeaderId):ariaDescribedBy,...restAriaAttributes,"aria-modal":"true",tabIndex:-1},React.createElement(Container,{elevation:4},React.createElement(Box,{space:"zero",vSpace:["m","xl"]},React.createElement(StyledInner,{isFullScreen:isFullScreen,size:size},React.createElement(HorizontalOffset,horizontalOffsetProps,React.createElement(Box,{space:"zero",bSpace:"s"},React.createElement(Stack,{space:isImageVisible?["s","l"]:"zero"},isImageVisible&&(imageUrl?React.createElement(Box,{space:"zero",tSpace:["xl","l"]},React.createElement(StyledImg,{src:imageUrl,alt:imageAlt})):React.createElement(ImageComponent,null)),React.createElement(Stack,{space:"xxs"},labelHeader&&React.createElement(H6,{as:"div"},labelHeader),React.createElement(Stack,{space:"zero"},header&&React.createElement(isShortViewport?H3:H2,{as:"h1"},header),subHeader&&React.createElement(H4,{as:"h2",color:"tertiary",id:subHeaderId},subHeader)))))),React.createElement(StyledBody,{ref:scrollableRef,size:size,isFullScreen:isFullScreen,borderBottom:hasScroll&&!isScrollBottom,borderTop:hasScroll&&!isScrollTop,privateProps:{height}},zeroPadding?children:React.createElement(Box,{space:"zero",vSpace:"xxxs",height:"100%"},React.createElement(HorizontalOffset,{...horizontalOffsetProps,height:"100%"},children))),(actionButton||cancelButtonLabel||secondaryButton)&&React.createElement(HorizontalOffset,horizontalOffsetProps,React.createElement(Footer,{isShortViewport:isShortViewport},React.createElement(ButtonGroup,{actionButton:actionButton,secondaryButton:secondaryButton,cancelButtonText:cancelButtonLabel,onButtonClick:onAction}))),closeButton)))))}Modal.Stack=({children,...rest})=>React.createElement(Stack,{...rest,space:"m"},children),Modal.Text=({children,...rest})=>React.createElement(Text,{...rest,size:"m",color:"tertiary"},children);
+    `,[theme.variables.opacity.hidden,theme.variables.opacity.visible]);return{animation:`${fadeInModal} ${theme.variables.animation.modal.open.duration} ${theme.variables.animation.modal.open.delay} ${theme.variables.animation.modal.open.timingFunction} both`,"&:focus":{outline:"none"},...useResponsiveValue({width:[`calc(100% - ${getMobileSpace(theme)} * 2)`,isFullScreen?`calc(100% - ${getDesktopSpace(theme)} * 2)`:theme.variables.size.dimension.modal.width[size]]})}}),StyledInner=styled("div",{target:"eybea2o1",label:"StyledInner"})(({theme,isFullScreen,size})=>{let mobileVerticalSpace=getMobileSpace(theme),mobileInnerVerticalSpace=getMobileInnerSpace(theme),desktopVerticalSpace=getDesktopSpace(theme),desktopInnerVerticalSpace=getDesktopInnerSpace(theme),fullScreenMobile=`calc(100dvh - ${mobileVerticalSpace} * 2 - ${mobileInnerVerticalSpace} * 2)`;return{display:"flex",...useResponsiveValue({height:["l"===size||isFullScreen?fullScreenMobile:"auto",isFullScreen?`calc(100dvh - ${desktopVerticalSpace} * 2 - ${desktopInnerVerticalSpace} * 2)`:"l"===size?`calc(100dvh - ${desktopVerticalSpace} * 2 - ${desktopInnerVerticalSpace} * 2 - ${theme.variables.size.dimension.modal.margin.l} * 2)`:"auto"],maxHeight:[fullScreenMobile,isFullScreen?"auto":"l"===size?`calc(${theme.variables.size.dimension.modal.maxHeight.l} - ${desktopInnerVerticalSpace} * 2)`:`calc(100dvh - ${desktopVerticalSpace} * 2 - ${desktopInnerVerticalSpace} * 2)`]}),flexDirection:"column",overflow:"hidden"}}),StyledBody=styled("div",{target:"eybea2o2",label:"StyledBody"})(({theme,borderBottom,borderTop,size,isFullScreen,privateProps})=>({overflowY:"auto",maxHeight:"100%",...(isFullScreen||"l"===size)&&{flex:1},...privateProps?.height&&{height:privateProps?.height},...borderBottom&&{borderBottom:`1px solid ${theme.values.color.divider.primary}`},...borderTop&&{borderTop:`1px solid ${theme.values.color.divider.primary}`}})),StyledImg=styled("img",{target:"eybea2o3",label:"StyledImg"})(()=>({width:"100%",aspectRatio:"16/9"})),StyledMaxWidth=styled("div",{target:"eybea2o4",label:"StyledMaxWidth"})(({theme})=>({maxWidth:theme.variables.size.dimension.modal.fullScreenContentWidth,margin:"0 auto",height:"100%"})),StyledXContainer=styled("div",{target:"eybea2o5",label:"StyledXContainer"})(({theme})=>({position:"absolute",...useResponsiveValue({top:[theme.variables.size.spacing.s,theme.variables.size.spacing.l],right:[theme.variables.size.spacing.s,theme.variables.size.spacing.l]})})),Footer=({children,alignItems=["stretch","right"],isShortViewport})=>React.createElement(Box,{space:"zero",tSpace:isShortViewport?"m":"l"},React.createElement(Stack,{alignItems:alignItems},children)),HorizontalOffset=({children,isFullScreen,isMaxWidthLimit,height})=>React.createElement(Box,{space:["m","xl"],vSpace:"zero",height:height},isFullScreen&&isMaxWidthLimit?React.createElement(StyledMaxWidth,null,children):children);function getIsShortViewport(window){return void 0!==window&&window.innerHeight<420}export function Modal({header,subHeader,labelHeader,children,imageUrl,ImageComponent,secondaryButton,cancelButtonLabel,isDismissible=!0,isFullScreen,isMaxWidthLimit=!0,actionButton,role="dialog",onAction,size="m",privateProps:{skipPortal,height,zeroPadding,tabbableOptions}={skipPortal:!1,height:void 0,zeroPadding:!1},portalContainer,closeButtonAriaLabel="Dismiss Dialog","data-e2e-test-id":dataE2eTestId,imageAlt,initialFocus,...ariaAttributes}){let{"aria-label":ariaLabel,"aria-describedby":ariaDescribedBy,...restAriaAttributes}=ariaAttributes,backdropRef=useRef(null),subHeaderId=useId(),window=useWindow(),{scrollableRef,isScrollBottom,isScrollTop,hasScroll}=useScrollDetection(),[isShortViewport,setIsShortViewport]=useState(getIsShortViewport(window));useEffect(()=>{let resizeObserver;return"undefined"!=typeof ResizeObserver&&backdropRef.current&&(resizeObserver=new ResizeObserver(()=>{setIsShortViewport(getIsShortViewport(window))})).observe(backdropRef.current),()=>{resizeObserver&&resizeObserver.disconnect()}},[window]);let handleClose=()=>{onAction?.("cancel")},hasImage=imageUrl||ImageComponent,isImageVisible=!isShortViewport&&!!hasImage,horizontalOffsetProps={isFullScreen,isMaxWidthLimit},closeButton=isDismissible&&React.createElement(StyledXContainer,null,React.createElement(PictogramButton,{variant:"tertiary",icon:"x",size:"s",onClick:handleClose,"aria-label":closeButtonAriaLabel,"data-modal-close-btn":!0}));return React.createElement(Lightbox,{backdropRef:backdropRef,portalContainer:portalContainer,handleClose:handleClose,isDismissible:isDismissible,privateProps:{skipPortal,tabbableOptions},initialFocus:initialFocus},React.createElement(StyledModalWrapper,{role:role,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Modal",isFullScreen:isFullScreen,size:size,"aria-label":ariaLabel||header,"aria-describedby":subHeader?appendId(ariaDescribedBy,subHeaderId):ariaDescribedBy,...restAriaAttributes,"aria-modal":"true",tabIndex:-1},React.createElement(Container,{elevation:4},React.createElement(Box,{space:"zero",vSpace:["m","xl"]},React.createElement(StyledInner,{isFullScreen:isFullScreen,size:size},React.createElement(HorizontalOffset,horizontalOffsetProps,React.createElement(Box,{space:"zero",bSpace:"s"},React.createElement(Stack,{space:isImageVisible?["s","l"]:"zero"},isImageVisible&&(imageUrl?React.createElement(Box,{space:"zero",tSpace:["xl","l"]},React.createElement(StyledImg,{src:imageUrl,alt:imageAlt})):ImageComponent&&React.createElement(ImageComponent,null)),React.createElement(Stack,{space:"xxs"},labelHeader&&React.createElement(H6,{as:"div"},labelHeader),React.createElement(Stack,{space:"zero"},header&&React.createElement(isShortViewport?H3:H2,{as:"h1"},header),subHeader&&React.createElement(H4,{as:"h2",color:"tertiary",id:subHeaderId},subHeader)))))),React.createElement(StyledBody,{ref:scrollableRef,size:size,isFullScreen:isFullScreen,borderBottom:hasScroll&&!isScrollBottom,borderTop:hasScroll&&!isScrollTop,privateProps:{height}},zeroPadding?children:React.createElement(Box,{space:"zero",vSpace:"xxxs",height:"100%"},React.createElement(HorizontalOffset,{...horizontalOffsetProps,height:"100%"},children))),(actionButton||cancelButtonLabel||secondaryButton)&&React.createElement(HorizontalOffset,horizontalOffsetProps,React.createElement(Footer,{isShortViewport:isShortViewport},React.createElement(ButtonGroup,{actionButton:actionButton,secondaryButton:secondaryButton,cancelButtonText:cancelButtonLabel,onButtonClick:onAction}))),closeButton)))))}Modal.Stack=({children,...rest})=>React.createElement(Stack,{...rest,space:"m"},children),Modal.Text=({children,...rest})=>React.createElement(Text,{...rest,size:"m",color:"tertiary"},children);