npm - @amboss/design-system - Versions diffs - 4.10.0 → 4.12.0 - Mend

@amboss/design-system 4.10.0 → 4.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (84) hide show

package/build/esm/components/Form/RadioButton/RadioButton.js CHANGED Viewed

	@@ -1 +1 @@
1	- import React from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{Icon}from"../../Icon/Icon";import{Inline}from"../../Inline/Inline";let StyledContainer=styled("div",{target:"~~e1ddt1cz0~~",label:"StyledContainer"})(()=>({userSelect:"none",display:"block",position:"relative",width:"100%",boxSizing:"border-box"})),StyledRealInput=styled("input",{target:"~~e1ddt1cz1~~",label:"StyledRealInput"})(({theme})=>({opacity:theme.variables.opacity.hidden,cursor:"pointer",height:0,width:0,position:"absolute"})),StyledFakeInput=styled("div",{target:"~~e1ddt1cz2~~",label:"StyledFakeInput"})(({theme})=>({cursor:"pointer",textTransform:"none",textDecoration:"none",borderRadius:theme.variables.size.borderRadius.xs,fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.s,fontWeight:theme.variables.weight.bold,lineHeight:theme.variables.size.lineHeight.xs,padding:`${theme.variables.size.spacing.s} ${theme.variables.size.spacing.l}`,"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:not(:checked) + &":{border:`1px solid ${theme.values.color.border.secondary.default}`,backgroundColor:theme.values.color.background.primary.default,color:theme.values.color.text.secondary.default,"&:hover":{backgroundColor:theme.values.color.background.secondary.default}},"input:checked + & ":{border:`1px solid ${theme.values.color.border.accent.default}`,backgroundColor:theme.values.color.background.accentSubtle.default,color:theme.values.color.text.accent.default}}));export function RadioButton({name,value="",checked,label="",icon,disabled=!1,onChange,onClick,onBlur,onFocus,...rest}){return React.createElement(FormField,{"data-ds-id":"RadioButton",...rest,disabled:disabled},React.createElement(StyledContainer,null,React.createElement(StyledRealInput,{type:"radio",name:name,value:value,checked:checked,disabled:disabled,onChange:onChange,onClick:onClick,onBlur:onBlur,onFocus:onFocus}),React.createElement(StyledFakeInput,null,React.createElement(Inline,{vAlignItems:"center",alignItems:"spaceBetween",noWrap:!0},label,icon&&React.createElement(Icon,{name:icon})))))}
1	+ import React from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{Icon}from"../../Icon/Icon";import{Inline}from"../../Inline/Inline";let StyledContainer=styled("div",{target:"erfbmk0",label:"StyledContainer"})(()=>({userSelect:"none",display:"block",position:"relative",width:"100%",boxSizing:"border-box"})),StyledRealInput=styled("input",{target:"erfbmk1",label:"StyledRealInput"})(({theme})=>({opacity:theme.variables.opacity.hidden,cursor:"pointer",height:0,width:0,position:"absolute"})),StyledFakeInput=styled("div",{target:"erfbmk2",label:"StyledFakeInput"})(({theme})=>({cursor:"pointer",textTransform:"none",textDecoration:"none",borderRadius:theme.variables.size.borderRadius.xs,fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.s,fontWeight:theme.variables.weight.bold,lineHeight:theme.variables.size.lineHeight.xs,padding:`${theme.variables.size.spacing.s} ${theme.variables.size.spacing.l}`,"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:not(:checked) + &":{border:`1px solid ${theme.values.color.border.secondary.default}`,backgroundColor:theme.values.color.background.primary.default,color:theme.values.color.text.secondary.default,"&:hover":{backgroundColor:theme.values.color.background.secondary.default}},"input:checked + & ":{border:`1px solid ${theme.values.color.border.accent.default}`,backgroundColor:theme.values.color.background.accentSubtle.default,color:theme.values.color.text.accent.default}}));export function RadioButton({name,value="",checked,label="",icon,disabled=!1,onChange,onClick,onBlur,onFocus,...rest}){return React.createElement(FormField,{"data-ds-id":"RadioButton",...rest,disabled:disabled},React.createElement(StyledContainer,null,React.createElement(StyledRealInput,{type:"radio",name:name,value:value,checked:checked,disabled:disabled,onChange:onChange,onClick:onClick,onBlur:onBlur,onFocus:onFocus}),React.createElement(StyledFakeInput,null,React.createElement(Inline,{vAlignItems:"center",alignItems:"spaceBetween",noWrap:!0},label,icon&&React.createElement(Icon,{name:icon})))))}

package/build/esm/components/Form/SegmentedControl/SegmentedControlOption.js CHANGED Viewed

	@@ -1 +1 @@
1	- import React,{useRef}from"react";import styled from"@emotion/styled";import breakpoints from"../../../web-tokens/_breakpoints.json";import{Text}from"../../Typography/Text/Text";import{Icon}from"../../Icon/Icon";import{ScreenReaderText}from"../../Utilities/ScreenReaderText/ScreenReaderText";import{Tooltip}from"../../Tooltip/Tooltip";import{Inline}from"../../Inline/Inline";import{getPressedStyles}from"../../../shared/mixins";let StyledInput=styled("input",{target:"~~e13oprls0~~",label:"StyledInput"})(({theme})=>({position:"absolute",height:1,width:1,margin:-1,overflow:"hidden",padding:0,opacity:theme.variables.opacity.hidden})),StyledLabel=styled(Text,{target:"~~e13oprls1~~",label:"StyledLabel"})(({theme,size})=>({..."s"===size&&{lineHeight:theme.variables.size.lineHeight.xs}})),StyledSublabel=styled(Text,{target:"~~e13oprls2~~",label:"StyledSublabel"})(({theme,isResponsive})=>{let baseStyle={textAlign:"center"};return isResponsive?{...baseStyle,[`@media (max-width: ${breakpoints.m.value}px)`]:{lineHeight:theme.variables.size.lineHeight.xs,textAlign:"right",marginLeft:theme.variables.size.spacing.m}}:baseStyle}),StyledIconContainer=styled("div",{target:"~~e13oprls3~~",label:"StyledIconContainer"})(),StyledContainer=styled("label",{target:"~~e13oprls4~~",label:"StyledContainer"})(({theme,size,checked,isResponsive,sublabel,iconOnly,displayAsOptionWithSublabel,disabled})=>{let borderStyle={"&:first-of-type":{borderTopLeftRadius:theme.variables.size.borderRadius.xs,borderBottomLeftRadius:theme.variables.size.borderRadius.xs,borderLeftStyle:"solid"},"&:last-of-type":{borderTopRightRadius:theme.variables.size.borderRadius.xs,borderBottomRightRadius:theme.variables.size.borderRadius.xs,borderRightStyle:"solid"}},basePaddingSize="s"===size?theme.variables.size.spacing.xs:theme.variables.size.spacing.s,basePadding=`calc(${basePaddingSize} - 1px)`,baseStyle={position:"relative",cursor:"pointer",backgroundColor:theme.values.color.background.primary.default,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",border:`1px solid ${theme.values.color.border.secondary.default}`,borderLeftStyle:"none",borderRightStyle:"none",padding:(()=>{if(iconOnly)return"l"===size?`calc(${theme.variables.size.spacing.m} - 1px)`:basePadding;let horizontalPadding="s"===size?theme.variables.size.spacing.m:theme.variables.size.spacing.l;return`${basePadding} ${horizontalPadding}`})(),...!checked&&!disabled&&{"&:hover":{backgroundColor:theme.values.color.background.secondary.default}},...disabled&&{cursor:"not-allowed",opacity:theme.variables.opacity.disabled},...checked&&getPressedStyles({theme}),[`${StyledSublabel}, ${StyledLabel}, ${StyledIconContainer}`]:{color:theme.values.color.text.secondary.default,...checked&&{color:theme.values.color.text.accent.default}},[`&:has(${StyledInput}:focus-visible)`]:{outlineWidth:2,outlineStyle:"solid",outlineColor:"Highlight",outlineOffset:-1,"@media (-webkit-min-device-pixel-ratio:0)":{outlineColor:"-webkit-focus-ring-color",outlineStyle:"solid"}}};return isResponsive?{...baseStyle,[`@media (min-width: ${breakpoints.m.value}px)`]:{...borderStyle},[`@media (max-width: ${breakpoints.m.value}px)`]:{flexDirection:"row",justifyContent:sublabel\|\|displayAsOptionWithSublabel?"space-between":"center",padding:theme.variables.size.spacing.m,borderTopStyle:"none",borderBottomStyle:"none",borderLeftStyle:"solid",borderRightStyle:"solid","&:first-of-type":{borderTopLeftRadius:theme.variables.size.borderRadius.xs,borderTopRightRadius:theme.variables.size.borderRadius.xs,borderTopStyle:"solid"},"&:last-of-type":{borderBottomLeftRadius:theme.variables.size.borderRadius.xs,borderBottomRightRadius:theme.variables.size.borderRadius.xs,borderBottomStyle:"solid"}}}:{...baseStyle,...borderStyle}});export function SegmentedControlOption({name,value="",checked,label="",sublabel,iconName,iconOnly,slotProps,tooltipContent,tooltipPlacement,tooltipPortalContainer,tooltipShortcut,size,disabled=!1,isResponsive=!1,inputType="radio",displayAsOptionWithSublabel=!1,onChange,onClick,onBlur,onFocus,onTooltipVisibilityChange}){let containerRef=useRef(null),iconAriaLabel=iconOnly?label:void 0,iconAccessibleName=slotProps?.icon?.ariaLabel??iconAriaLabel,iconElm=iconName?React.createElement(StyledIconContainer,null,iconAccessibleName?React.createElement(Icon,{name:iconName,size:"s","aria-label":iconAccessibleName,role:"img"}):React.createElement(Icon,{name:iconName,size:"s"})):null,showIcon=!sublabel&&iconElm,labelElm=React.createElement(StyledLabel,{size:"l"===size?"m":"s",weight:"bold"},label),labelContainerElm=labelElm;showIcon&&(labelContainerElm=iconOnly?React.createElement(React.Fragment,null,iconElm,React.createElement(ScreenReaderText,null,label)):React.createElement(Inline,{space:"xs",noWrap:!0,vAlignItems:"center"},iconElm,labelElm));let sublabelElm=sublabel?React.createElement(StyledSublabel,{size:"s",isResponsive:isResponsive},sublabel):null;return React.createElement(React.Fragment,null,React.createElement(StyledContainer,{size:size,checked:checked,sublabel:sublabel,iconOnly:iconOnly,isResponsive:isResponsive,displayAsOptionWithSublabel:displayAsOptionWithSublabel,ref:containerRef,disabled:disabled,tabIndex:-1},React.createElement(StyledInput,{type:inputType,name:name,value:value,checked:checked,disabled:disabled,onChange:onChange,onClick:onClick,onBlur:onBlur,onFocus:onFocus,"aria-expanded":slotProps?.input?.ariaExpanded,"aria-controls":slotProps?.input?.ariaControls}),labelContainerElm,sublabelElm),tooltipContent&&React.createElement(Tooltip,{content:tooltipContent,shortcut:tooltipShortcut,externalTriggerRef:containerRef,onVisibilityChange:onTooltipVisibilityChange,placement:tooltipPlacement??"auto",portalContainer:tooltipPortalContainer}))}
1	+ import React,{useRef}from"react";import styled from"@emotion/styled";import breakpoints from"../../../web-tokens/_breakpoints.json";import{Text}from"../../Typography/Text/Text";import{Icon}from"../../Icon/Icon";import{ScreenReaderText}from"../../Utilities/ScreenReaderText/ScreenReaderText";import{Tooltip}from"../../Tooltip/Tooltip";import{Inline}from"../../Inline/Inline";import{getPressedStyles}from"../../../shared/mixins";let StyledInput=styled("input",{target:"enpc8r20",label:"StyledInput"})(({theme})=>({position:"absolute",height:1,width:1,margin:-1,overflow:"hidden",padding:0,opacity:theme.variables.opacity.hidden})),StyledLabel=styled(Text,{target:"enpc8r21",label:"StyledLabel"})(({theme,size})=>({..."s"===size&&{lineHeight:theme.variables.size.lineHeight.xs}})),StyledSublabel=styled(Text,{target:"enpc8r22",label:"StyledSublabel"})(({theme,isResponsive})=>{let baseStyle={textAlign:"center"};return isResponsive?{...baseStyle,[`@media (max-width: ${breakpoints.m.value}px)`]:{lineHeight:theme.variables.size.lineHeight.xs,textAlign:"right",marginLeft:theme.variables.size.spacing.m}}:baseStyle}),StyledIconContainer=styled("div",{target:"enpc8r23",label:"StyledIconContainer"})(),StyledContainer=styled("label",{target:"enpc8r24",label:"StyledContainer"})(({theme,size,checked,isResponsive,sublabel,iconOnly,displayAsOptionWithSublabel,disabled})=>{let borderStyle={"&:first-of-type":{borderTopLeftRadius:theme.variables.size.borderRadius.xs,borderBottomLeftRadius:theme.variables.size.borderRadius.xs,borderLeftStyle:"solid"},"&:last-of-type":{borderTopRightRadius:theme.variables.size.borderRadius.xs,borderBottomRightRadius:theme.variables.size.borderRadius.xs,borderRightStyle:"solid"}},basePaddingSize="s"===size?theme.variables.size.spacing.xs:theme.variables.size.spacing.s,basePadding=`calc(${basePaddingSize} - 1px)`,baseStyle={position:"relative",cursor:"pointer",backgroundColor:theme.values.color.background.primary.default,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",border:`1px solid ${theme.values.color.border.secondary.default}`,borderLeftStyle:"none",borderRightStyle:"none",padding:(()=>{if(iconOnly)return"l"===size?`calc(${theme.variables.size.spacing.m} - 1px)`:basePadding;let horizontalPadding="s"===size?theme.variables.size.spacing.m:theme.variables.size.spacing.l;return`${basePadding} ${horizontalPadding}`})(),...!checked&&!disabled&&{"&:hover":{backgroundColor:theme.values.color.background.secondary.default}},...disabled&&{cursor:"not-allowed",opacity:theme.variables.opacity.disabled},...checked&&getPressedStyles({theme}),[`${StyledSublabel}, ${StyledLabel}, ${StyledIconContainer}`]:{color:theme.values.color.text.secondary.default,...checked&&{color:theme.values.color.text.accent.default}},[`&:has(${StyledInput}:focus-visible)`]:{outlineWidth:2,outlineStyle:"solid",outlineColor:"Highlight",outlineOffset:-1,"@media (-webkit-min-device-pixel-ratio:0)":{outlineColor:"-webkit-focus-ring-color",outlineStyle:"solid"}}};return isResponsive?{...baseStyle,[`@media (min-width: ${breakpoints.m.value}px)`]:{...borderStyle},[`@media (max-width: ${breakpoints.m.value}px)`]:{flexDirection:"row",justifyContent:sublabel\|\|displayAsOptionWithSublabel?"space-between":"center",padding:theme.variables.size.spacing.m,borderTopStyle:"none",borderBottomStyle:"none",borderLeftStyle:"solid",borderRightStyle:"solid","&:first-of-type":{borderTopLeftRadius:theme.variables.size.borderRadius.xs,borderTopRightRadius:theme.variables.size.borderRadius.xs,borderTopStyle:"solid"},"&:last-of-type":{borderBottomLeftRadius:theme.variables.size.borderRadius.xs,borderBottomRightRadius:theme.variables.size.borderRadius.xs,borderBottomStyle:"solid"}}}:{...baseStyle,...borderStyle}});export function SegmentedControlOption({name,value="",checked,label="",sublabel,iconName,iconOnly,slotProps,tooltipContent,tooltipPlacement,tooltipPortalContainer,tooltipShortcut,size,disabled=!1,isResponsive=!1,inputType="radio",displayAsOptionWithSublabel=!1,onChange,onClick,onBlur,onFocus,onTooltipVisibilityChange}){let containerRef=useRef(null),iconAriaLabel=iconOnly?label:void 0,iconAccessibleName=slotProps?.icon?.ariaLabel??iconAriaLabel,iconElm=iconName?React.createElement(StyledIconContainer,null,iconAccessibleName?React.createElement(Icon,{name:iconName,size:"s","aria-label":iconAccessibleName,role:"img"}):React.createElement(Icon,{name:iconName,size:"s"})):null,showIcon=!sublabel&&iconElm,labelElm=React.createElement(StyledLabel,{size:"l"===size?"m":"s",weight:"bold"},label),labelContainerElm=labelElm;showIcon&&(labelContainerElm=iconOnly?React.createElement(React.Fragment,null,iconElm,React.createElement(ScreenReaderText,null,label)):React.createElement(Inline,{space:"xs",noWrap:!0,vAlignItems:"center"},iconElm,labelElm));let sublabelElm=sublabel?React.createElement(StyledSublabel,{size:"s",isResponsive:isResponsive},sublabel):null;return React.createElement(React.Fragment,null,React.createElement(StyledContainer,{size:size,checked:checked,sublabel:sublabel,iconOnly:iconOnly,isResponsive:isResponsive,displayAsOptionWithSublabel:displayAsOptionWithSublabel,ref:containerRef,disabled:disabled,tabIndex:-1},React.createElement(StyledInput,{type:inputType,name:name,value:value,checked:checked,disabled:disabled,onChange:onChange,onClick:onClick,onBlur:onBlur,onFocus:onFocus,"aria-expanded":slotProps?.input?.ariaExpanded,"aria-controls":slotProps?.input?.ariaControls}),labelContainerElm,sublabelElm),tooltipContent&&React.createElement(Tooltip,{content:tooltipContent,shortcut:tooltipShortcut,externalTriggerRef:containerRef,onVisibilityChange:onTooltipVisibilityChange,placement:tooltipPlacement??"auto",portalContainer:tooltipPortalContainer}))}

package/build/esm/components/Form/Select/Select.js CHANGED Viewed

	@@ -1 +1 @@
1	- import React from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{SelectWithCustomTrigger}from"./SelectWithCustomTrigger";import{Icon}from"../../Icon/Icon";import{Inline}from"../../Inline/Inline";import{TextClamped}from"../../Typography/TextClamped/TextClamped";import{useFormFieldMessageId}from"../FormField/useFormFieldMessageId";let StyledButton=styled("button",{target:"~~emffu2u0~~",label:"StyledButton"})(({theme,hasError,isPlaceholderVisible,readOnly,size})=>({'&[type="button"]':{appearance:"none",MozAppearance:"none",WebkitAppearance:"none"},display:"inline-block",margin:0,borderRadius:theme.variables.size.borderRadius.xs,backgroundColor:theme.values.color.background.primary.default,borderWidth:"1px",borderStyle:"solid",width:"100%",padding:`${"s"===size?`calc(${theme.variables.size.spacing.xxs} + 1px)`:`calc(${theme.variables.size.spacing.xs} - 1px)`} ${theme.variables.size.spacing.s}`,paddingRight:theme.variables.size.spacing.xs,boxSizing:"border-box",borderColor:theme.values.color.border.primary.default,...readOnly&&{borderColor:theme.values.color.border.primary.disabled},...isPlaceholderVisible&&{fontStyle:"italic"},...hasError&&{boxShadow:`0 0 0 1px inset ${theme.values.color.border.error.default}`,borderColor:theme.values.color.border.error.default}})),StyledTriggerIcon=styled(Icon,{target:"~~emffu2u1~~",label:"StyledTriggerIcon"})(()=>({pointerEvents:"none"}));function TriggerButton({triggerRef,disabled,isOpen,hasError,isPlaceholderVisible,role,"aria-expanded":ariaExpanded,"aria-controls":ariaControls,"aria-activedescendant":ariaActiveDescendant,"aria-describedby":ariaDescribedBy,"aria-label":ariaLabel,readOnly,size,onFocus,onBlur,children,...ariaAttributes}){return React.createElement(StyledButton,{type:"button",ref:triggerRef,disabled:disabled,hasError:hasError,isPlaceholderVisible:isPlaceholderVisible,...ariaAttributes,role:role,"aria-expanded":ariaExpanded,"aria-controls":ariaControls,"aria-activedescendant":ariaActiveDescendant,"aria-label":ariaLabel,"aria-invalid":hasError,"aria-describedby":ariaDescribedBy,readOnly:readOnly,size:size,onFocus:onFocus,onBlur:onBlur},React.createElement(Inline,{vAlignItems:"center",alignItems:"spaceBetween",space:"xxs",noWrap:!0},React.createElement(TextClamped,{color:isPlaceholderVisible?"tertiary":"primary",size:size},readOnly&&isPlaceholderVisible?null:children),React.createElement(StyledTriggerIcon,{size:size,name:isOpen?"chevron-up":"chevron-down",color:readOnly?"quaternary":"tertiary"})))}export function Select({options,name,value,placeholder,hasError,optionsListWidth,maxHeight,disabled=!1,portalContainer,readOnly=!1,excludeFromFormData,label,labelHint,hideLabel,hint,errorMessages,size="m","data-e2e-test-id":dataE2eTestId,"aria-describedby":ariaDescribedBy,onChange,onFocus,onBlur,...ariaAttributes}){let selectedOption=options?.find(option=>option.value===value),isPlaceholderVisible=!!placeholder&&!value,{id,ariaDescribedByProp}=useFormFieldMessageId({ariaDescribedBy,errorMessages,hint});return React.createElement(SelectWithCustomTrigger,{options:options,value:value,name:name,optionsListWidth:optionsListWidth,maxHeight:maxHeight,portalContainer:portalContainer,disabled:disabled,readOnly:readOnly,excludeFromFormData:excludeFromFormData,onChange:onChange,renderTrigger:({triggerRef,isOpen,role,"aria-expanded":ariaExpanded,"aria-controls":ariaControls,"aria-activedescendant":ariaActiveDescendant})=>React.createElement(FormField,{disabled:disabled,hideLabel:hideLabel,label:label,labelHint:labelHint,hint:hint,errorMessages:errorMessages,messageId:id,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Select"},React.createElement(TriggerButton,{hasError:hasError,isPlaceholderVisible:isPlaceholderVisible,size:size,triggerRef:triggerRef,isOpen:isOpen,disabled:disabled,role:role,"aria-expanded":ariaExpanded,"aria-controls":ariaControls,"aria-activedescendant":ariaActiveDescendant,"aria-label":label,...ariaAttributes,...ariaDescribedByProp,readOnly:readOnly,onFocus:onFocus,onBlur:onBlur},selectedOption?selectedOption.label:placeholder??""))})}
1	+ import React from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{SelectWithCustomTrigger}from"./SelectWithCustomTrigger";import{Icon}from"../../Icon/Icon";import{Inline}from"../../Inline/Inline";import{TextClamped}from"../../Typography/TextClamped/TextClamped";import{useFormFieldMessageId}from"../FormField/useFormFieldMessageId";let StyledButton=styled("button",{target:"eaelaza0",label:"StyledButton"})(({theme,hasError,isPlaceholderVisible,readOnly,size})=>({'&[type="button"]':{appearance:"none",MozAppearance:"none",WebkitAppearance:"none"},display:"inline-block",margin:0,borderRadius:theme.variables.size.borderRadius.xs,backgroundColor:theme.values.color.background.primary.default,borderWidth:"1px",borderStyle:"solid",width:"100%",padding:`${"s"===size?`calc(${theme.variables.size.spacing.xxs} + 1px)`:`calc(${theme.variables.size.spacing.xs} - 1px)`} ${theme.variables.size.spacing.s}`,paddingRight:theme.variables.size.spacing.xs,boxSizing:"border-box",borderColor:theme.values.color.border.primary.default,...readOnly&&{borderColor:theme.values.color.border.primary.disabled},...isPlaceholderVisible&&{fontStyle:"italic"},...hasError&&{boxShadow:`0 0 0 1px inset ${theme.values.color.border.error.default}`,borderColor:theme.values.color.border.error.default}})),StyledTriggerIcon=styled(Icon,{target:"eaelaza1",label:"StyledTriggerIcon"})(()=>({pointerEvents:"none"}));function TriggerButton({triggerRef,disabled,isOpen,hasError,isPlaceholderVisible,role,"aria-expanded":ariaExpanded,"aria-controls":ariaControls,"aria-activedescendant":ariaActiveDescendant,"aria-describedby":ariaDescribedBy,"aria-label":ariaLabel,readOnly,size,onFocus,onBlur,children,...ariaAttributes}){return React.createElement(StyledButton,{type:"button",ref:triggerRef,disabled:disabled,hasError:hasError,isPlaceholderVisible:isPlaceholderVisible,...ariaAttributes,role:role,"aria-expanded":ariaExpanded,"aria-controls":ariaControls,"aria-activedescendant":ariaActiveDescendant,"aria-label":ariaLabel,"aria-invalid":hasError,"aria-describedby":ariaDescribedBy,readOnly:readOnly,size:size,onFocus:onFocus,onBlur:onBlur},React.createElement(Inline,{vAlignItems:"center",alignItems:"spaceBetween",space:"xxs",noWrap:!0},React.createElement(TextClamped,{color:isPlaceholderVisible?"tertiary":"primary",size:size},readOnly&&isPlaceholderVisible?null:children),React.createElement(StyledTriggerIcon,{size:size,name:isOpen?"chevron-up":"chevron-down",color:readOnly?"quaternary":"tertiary"})))}export function Select({options,name,value,placeholder,hasError,optionsListWidth,maxHeight,disabled=!1,portalContainer,readOnly=!1,excludeFromFormData,label,labelHint,hideLabel,hint,errorMessages,size="m","data-e2e-test-id":dataE2eTestId,"aria-describedby":ariaDescribedBy,onChange,onFocus,onBlur,...ariaAttributes}){let selectedOption=options?.find(option=>option.value===value),isPlaceholderVisible=!!placeholder&&!value,{id,ariaDescribedByProp}=useFormFieldMessageId({ariaDescribedBy,errorMessages,hint});return React.createElement(SelectWithCustomTrigger,{options:options,value:value,name:name,optionsListWidth:optionsListWidth,maxHeight:maxHeight,portalContainer:portalContainer,disabled:disabled,readOnly:readOnly,excludeFromFormData:excludeFromFormData,onChange:onChange,renderTrigger:({triggerRef,isOpen,role,"aria-expanded":ariaExpanded,"aria-controls":ariaControls,"aria-activedescendant":ariaActiveDescendant})=>React.createElement(FormField,{disabled:disabled,hideLabel:hideLabel,label:label,labelHint:labelHint,hint:hint,errorMessages:errorMessages,messageId:id,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Select"},React.createElement(TriggerButton,{hasError:hasError,isPlaceholderVisible:isPlaceholderVisible,size:size,triggerRef:triggerRef,isOpen:isOpen,disabled:disabled,role:role,"aria-expanded":ariaExpanded,"aria-controls":ariaControls,"aria-activedescendant":ariaActiveDescendant,"aria-label":label,...ariaAttributes,...ariaDescribedByProp,readOnly:readOnly,onFocus:onFocus,onBlur:onBlur},selectedOption?selectedOption.label:placeholder??""))})}

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

	@@ -1 +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:"~~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}))});
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:"e15fuuq00",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:"e15fuuq01",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/Grid/Grid.js CHANGED Viewed

	@@ -1 +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:"~~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;
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:"efhrkze0",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/IconTile/IconTile.js CHANGED Viewed

	@@ -1 +1 @@
1	- import React from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import{Icon}from"../Icon/Icon";import{Box}from"../Box/Box";let IconTileWrapper=styled("div",{shouldForwardProp:prop=>isPropValid(prop)&&"color"!==prop,target:"~~en9pfw00~~",label:"IconTileWrapper"})(({theme,color})=>({display:"inline-block",borderRadius:theme.variables.size.borderRadius.full,border:"1px solid",borderColor:color?theme.values.color.badge.borderSubtle[color]:theme.values.color.badge.borderSubtle.default,backgroundColor:color?theme.values.color.badge.background[color]:theme.values.color.badge.background.default,color:color?theme.values.color.badge.foreground[color]:theme.values.color.badge.foreground.gray}));export const IconTile=({icon,color,"data-color":dataColor,"data-e2e-test-id":dataE2eTestId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,role,...ariaAttributes})=>{let hasAccessibleName=!!(ariaLabel\|\|ariaLabelledBy);return React.createElement(IconTileWrapper,{color:color,"data-e2e-test-id":dataE2eTestId,"data-color":dataColor,"data-ds-id":"IconTile","aria-hidden":!hasAccessibleName\|\|void 0,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,role:role,...ariaAttributes},React.createElement(Box,{space:"s"},React.createElement(Icon,{name:icon,size:"m"})))};
1	+ import React from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import{Icon}from"../Icon/Icon";import{Box}from"../Box/Box";let IconTileWrapper=styled("div",{shouldForwardProp:prop=>isPropValid(prop)&&"color"!==prop,target:"e1af4gik0",label:"IconTileWrapper"})(({theme,color})=>({display:"inline-block",borderRadius:theme.variables.size.borderRadius.full,border:"1px solid",borderColor:color?theme.values.color.badge.borderSubtle[color]:theme.values.color.badge.borderSubtle.default,backgroundColor:color?theme.values.color.badge.background[color]:theme.values.color.badge.background.default,color:color?theme.values.color.badge.foreground[color]:theme.values.color.badge.foreground.gray}));export const IconTile=({icon,color,"data-color":dataColor,"data-e2e-test-id":dataE2eTestId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,role,...ariaAttributes})=>{let hasAccessibleName=!!(ariaLabel\|\|ariaLabelledBy);return React.createElement(IconTileWrapper,{color:color,"data-e2e-test-id":dataE2eTestId,"data-color":dataColor,"data-ds-id":"IconTile","aria-hidden":!hasAccessibleName\|\|void 0,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,role:role,...ariaAttributes},React.createElement(Box,{space:"s"},React.createElement(Icon,{name:icon,size:"m"})))};

package/build/esm/components/Internal/Drawer/Drawer.js CHANGED Viewed

@@ -1,13 +1,13 @@
-import React,{useCallback,useEffect,useRef}from"react";import styled from"@emotion/styled";import{keyframes}from"@emotion/react";import{useOutsideClickDeactivatesWithinPortal}from"../../../shared/useOutsideClickDeactivatesWithinPortal";import{useDocument}from"../../../shared/useDocument";import{FOCUSABLE_SELECTOR}from"../../../shared/focusableSelector";import{Portal,usePortalContainerElement}from"../../Portal/Portal";import{FocusTrapWrapper}from"../../../shared/FocusTrapWrapper";import{DialogContext}from"../../Patterns/Dialog/DialogContext";import{Backdrop}from"../../Utilities/Backdrop/Backdrop";import{useExitAnimation}from"../../../shared/useExitAnimation";let StyledViewportLayer=styled("div",{target:"e1h3k5750",label:"StyledViewportLayer"})(({theme,isLeaving})=>{let{hidden,visible}=theme.variables.opacity,fadeIn=keyframes`
+import React,{useCallback,useEffect,useRef}from"react";import styled from"@emotion/styled";import{keyframes}from"@emotion/react";import{useOutsideClickDeactivatesWithinPortal}from"../../../shared/useOutsideClickDeactivatesWithinPortal";import{useDocument}from"../../../shared/useDocument";import{FOCUSABLE_SELECTOR}from"../../../shared/focusableSelector";import{Portal,usePortalContainerElement}from"../../Portal/Portal";import{FocusTrapWrapper}from"../../../shared/FocusTrapWrapper";import{DialogContext}from"../../Patterns/Dialog/DialogContext";import{Backdrop}from"../../Utilities/Backdrop/Backdrop";import{useExitAnimation}from"../../../shared/useExitAnimation";let StyledViewportLayer=styled("div",{target:"e1elpaa00",label:"StyledViewportLayer"})(({theme,isLeaving})=>{let{hidden,visible}=theme.variables.opacity,fadeIn=keyframes`
       from { opacity: ${hidden}; }
       to { opacity: ${visible}; }
     `,fadeOut=keyframes`
       from { opacity: ${visible}; }
       to { opacity: ${hidden}; }
-    `,{duration,timingFunction}=theme.variables.animation.modalBackdrop.open;return{position:"fixed",top:0,left:0,zIndex:theme.variables.zIndex.modal,width:"100%",height:"100dvh",animation:`${isLeaving?fadeOut:fadeIn} ${duration} ${timingFunction} both`,"@media (prefers-reduced-motion: reduce)":{animation:"none"}}}),StyledContent=styled("div",{target:"e1h3k5751",label:"StyledContent"})(({theme,positionX,positionY,isLeaving})=>{let restX=positionX?"0%":"-50%",restY=positionY?"0%":"-50%",{x:fromX,y:fromY}="left"===positionX?{x:"-100%",y:restY}:"right"===positionX?{x:"100%",y:restY}:"top"===positionY?{x:restX,y:"-100%"}:"bottom"===positionY?{x:restX,y:"100%"}:{x:restX,y:restY},resting=`translate(${restX}, ${restY})`,offscreen=`translate(${fromX}, ${fromY})`,slideIn=keyframes`
+    `,{duration,timingFunction}=theme.variables.animation.modalBackdrop.open;return{position:"fixed",top:0,left:0,zIndex:theme.variables.zIndex.modal,width:"100%",height:"100dvh",animation:`${isLeaving?fadeOut:fadeIn} ${duration} ${timingFunction} both`,"@media (prefers-reduced-motion: reduce)":{animation:"none"}}}),StyledContent=styled("div",{target:"e1elpaa01",label:"StyledContent"})(({theme,positionX,positionY,isLeaving})=>{let restX=positionX?"0%":"-50%",restY=positionY?"0%":"-50%",{x:fromX,y:fromY}="left"===positionX?{x:"-100%",y:restY}:"right"===positionX?{x:"100%",y:restY}:"top"===positionY?{x:restX,y:"-100%"}:"bottom"===positionY?{x:restX,y:"100%"}:{x:restX,y:restY},resting=`translate(${restX}, ${restY})`,offscreen=`translate(${fromX}, ${fromY})`,slideIn=keyframes`
       from { transform: ${offscreen}; }
       to { transform: ${resting}; }
     `,slideOut=keyframes`
       from { transform: ${resting}; }
       to { transform: ${offscreen}; }
-    `,{duration,timingFunction}=theme.variables.animation.navSlide.open;return{position:"fixed",...{..."left"===positionX&&{left:0},..."right"===positionX&&{right:0},...!positionX&&{left:"50%"},..."top"===positionY&&{top:0},..."bottom"===positionY&&{bottom:0},...!positionY&&{top:"50%"}},transform:resting,willChange:"transform",animation:`${isLeaving?slideOut:slideIn} ${duration} ${timingFunction} both`,"@media (prefers-reduced-motion: reduce)":{animation:"none"}}}),StyledBackdrop=styled(Backdrop,{target:"e1h3k5752",label:"StyledBackdrop"})({pointerEvents:"none"});function getFocusTarget(container,document){return container?.querySelector(FOCUSABLE_SELECTOR)??container??document.body}export function Drawer({backdropRef,portalContainer,initialFocus,isDismissible=!0,isVisible=!0,onUnmount,hasBackdrop=!0,positionX,positionY,children,handleClose,privateProps:{skipPortal}={skipPortal:!1},...rest}){let portalContainerElement=usePortalContainerElement(portalContainer),contentRef=useRef(null),document=useDocument(),{isMounted,isLeaving,onAnimationEnd}=useExitAnimation(isVisible),wasMounted=useRef(isMounted);useEffect(()=>{wasMounted.current&&!isMounted&&onUnmount?.(),wasMounted.current=isMounted},[isMounted,onUnmount]);let layerRef=useRef(null),setLayerNode=useCallback(node=>{layerRef.current=node,backdropRef&&(backdropRef.current=node)},[backdropRef]),handleClickOutsideDeactivates=useOutsideClickDeactivatesWithinPortal({portalContainerElement,outerRef:layerRef,isDismissible});if(!isMounted)return null;let content=React.createElement(StyledViewportLayer,{ref:setLayerNode,"data-ds-id":"Drawer",isLeaving:isLeaving},hasBackdrop&&React.createElement(StyledBackdrop,{"data-ds-id":"DrawerBackdrop"}),React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:handleClickOutsideDeactivates,escapeDeactivates:isDismissible,preventScroll:!0,initialFocus:()=>{var container;return container=contentRef.current,"string"==typeof initialFocus?initialFocus:initialFocus?.current??getFocusTarget(container,document)},fallbackFocus:()=>getFocusTarget(contentRef.current,document),onPostDeactivate:()=>handleClose?.()}},React.createElement(StyledContent,{...rest,ref:contentRef,positionX:positionX,positionY:positionY,isLeaving:isLeaving,onAnimationEnd:onAnimationEnd,role:"dialog","aria-modal":"true"},children)));return skipPortal?content:React.createElement(DialogContext.Provider,{value:!0},React.createElement(Portal,{portalContainer:portalContainer},content))}
+    `,{duration,timingFunction}=theme.variables.animation.navSlide.open;return{position:"fixed",...{..."left"===positionX&&{left:0},..."right"===positionX&&{right:0},...!positionX&&{left:"50%"},..."top"===positionY&&{top:0},..."bottom"===positionY&&{bottom:0},...!positionY&&{top:"50%"}},transform:resting,willChange:"transform",animation:`${isLeaving?slideOut:slideIn} ${duration} ${timingFunction} both`,"@media (prefers-reduced-motion: reduce)":{animation:"none"}}}),StyledBackdrop=styled(Backdrop,{target:"e1elpaa02",label:"StyledBackdrop"})({pointerEvents:"none"});function getFocusTarget(container,document){return container?.querySelector(FOCUSABLE_SELECTOR)??container??document.body}export function Drawer({backdropRef,portalContainer,initialFocus,isDismissible=!0,isVisible=!0,onUnmount,hasBackdrop=!0,positionX,positionY,children,handleClose,privateProps:{skipPortal}={skipPortal:!1},...rest}){let portalContainerElement=usePortalContainerElement(portalContainer),contentRef=useRef(null),document=useDocument(),{isMounted,isLeaving,onAnimationEnd}=useExitAnimation(isVisible),wasMounted=useRef(isMounted);useEffect(()=>{wasMounted.current&&!isMounted&&onUnmount?.(),wasMounted.current=isMounted},[isMounted,onUnmount]);let layerRef=useRef(null),setLayerNode=useCallback(node=>{layerRef.current=node,backdropRef&&(backdropRef.current=node)},[backdropRef]),handleClickOutsideDeactivates=useOutsideClickDeactivatesWithinPortal({portalContainerElement,outerRef:layerRef,isDismissible});if(!isMounted)return null;let content=React.createElement(StyledViewportLayer,{ref:setLayerNode,"data-ds-id":"Drawer",isLeaving:isLeaving},hasBackdrop&&React.createElement(StyledBackdrop,{"data-ds-id":"DrawerBackdrop"}),React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:handleClickOutsideDeactivates,escapeDeactivates:isDismissible,preventScroll:!0,initialFocus:()=>{var container;return container=contentRef.current,"string"==typeof initialFocus?initialFocus:initialFocus?.current??getFocusTarget(container,document)},fallbackFocus:()=>getFocusTarget(contentRef.current,document),onPostDeactivate:()=>handleClose?.()}},React.createElement(StyledContent,{...rest,ref:contentRef,positionX:positionX,positionY:positionY,isLeaving:isLeaving,onAnimationEnd:onAnimationEnd,role:"dialog","aria-modal":"true"},children)));return skipPortal?content:React.createElement(DialogContext.Provider,{value:!0},React.createElement(Portal,{portalContainer:portalContainer},content))}

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

	@@ -1 +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:"~~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))}
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:"ewzfx030",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/Layout/Layout.js CHANGED Viewed

	@@ -1 +1 @@
1	- import React,{useCallback,useLayoutEffect,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,PANEL_START_VAR,LAYOUT_REGIONS_READY_VAR,Slot}from"./-constants";import{useLayoutPersistence,useLayoutStore}from"./context";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"./Split/MobileSplitView/useMobileSplitView";import{LayoutProvider}from"./LayoutProvider";import{LayoutBottomBar}from"./BottomBar/LayoutBottomBar";import{LayoutBottomBarItem}from"./BottomBar/BottomBarItem/LayoutBottomBarItem";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,root,mobileHost})=>{let leftPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.content),splitviewWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.splitview),rightPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.rightPanel),leftPanelStartCssVar=useLayoutVar(PANEL_START_VAR.leftPanel),contentStartCssVar=useLayoutVar(PANEL_START_VAR.content),splitviewStartCssVar=useLayoutVar(PANEL_START_VAR.splitview),rightPanelStartCssVar=useLayoutVar(PANEL_START_VAR.rightPanel),regionsReadyCssVar=useLayoutVar(LAYOUT_REGIONS_READY_VAR),publishRegions=useCallback(()=>{if(!root)return;let targets=[[Slot.leftPanel,leftPanelWidthCssVar,leftPanelStartCssVar],[Slot.content,contentWidthCssVar,contentStartCssVar],[Slot.splitview,splitviewWidthCssVar,splitviewStartCssVar],[Slot.rightPanel,rightPanelWidthCssVar,rightPanelStartCssVar]],rootRect=root.getBoundingClientRect();targets.forEach(([slot,widthCssVar,startCssVar])=>{let rect=slotHosts[slot]?.getBoundingClientRect(),isMobileRegion=!!mobileHost&&(slot===Slot.content\|\|slot===Slot.splitview),width=isMobileRegion?rootRect.width:rect?.width??0,start=isMobileRegion\|\|!rect?0:rect.left-rootRect.left;widthCssVar.set(`${width}px`),startCssVar.set(`${start}px`)}),regionsReadyCssVar.set("1")},[slotHosts,root,mobileHost,leftPanelWidthCssVar,contentWidthCssVar,splitviewWidthCssVar,rightPanelWidthCssVar,leftPanelStartCssVar,contentStartCssVar,splitviewStartCssVar,rightPanelStartCssVar,regionsReadyCssVar]);useLayoutEffect(()=>{publishRegions()},[publishRegions]),useLayoutEffect(()=>{if(!root\|\|"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishRegions);return observer.observe(root),Object.values(slotHosts).forEach(host=>{host&&observer.observe(host)}),()=>observer.disconnect()},[root,slotHosts,publishRegions])},StyledLayout=styled("div",{target:"e1tobjas0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=styled("div",{target:"e1tobjas1",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=styled("div",{target:"e1tobjas2",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"});export const PANEL_HOST_DS_ID="PanelHost";let StyledContentColumn=styled("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e1tobjas3",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:"e1tobjas4",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=styled("div",{target:"e1tobjas5",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]),rightPanelVariant=layoutState[Slot.rightPanel].variant??declared[Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!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\|\|"sidebar"===layoutState.leftPanel.variant),[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}),[layoutRoot,setLayoutRoot]=useState(null),rootPortalTargets=useMemo(()=>({...portalTargets,root:layoutRoot}),[portalTargets,layoutRoot]);useGlobalCssVariables({slotHosts,root:layoutRoot,mobileHost:mobileSplitStackHost});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,gapBefore:slot===Slot.rightPanel,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize,maxSize:panel?.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)&&declared[id]?.resizable!==!1&&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:rootPortalTargets},React.createElement(LayoutFloatDragProvider,null,React.createElement(MobileSplitStackContext.Provider,{value:mobileSplitStack},React.createElement(StyledLayout,{ref:setLayoutRoot,"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.BottomBar=LayoutBottomBar,Layout.BottomBarItem=LayoutBottomBarItem,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;
1	+ import React,{useCallback,useLayoutEffect,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,PANEL_START_VAR,LAYOUT_REGIONS_READY_VAR,Slot}from"./-constants";import{useLayoutPersistence,useLayoutStore}from"./context";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"./Split/MobileSplitView/useMobileSplitView";import{LayoutProvider}from"./LayoutProvider";import{LayoutBottomBar}from"./BottomBar/LayoutBottomBar";import{LayoutBottomBarItem}from"./BottomBar/BottomBarItem/LayoutBottomBarItem";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,root,mobileHost})=>{let leftPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.content),splitviewWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.splitview),rightPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.rightPanel),leftPanelStartCssVar=useLayoutVar(PANEL_START_VAR.leftPanel),contentStartCssVar=useLayoutVar(PANEL_START_VAR.content),splitviewStartCssVar=useLayoutVar(PANEL_START_VAR.splitview),rightPanelStartCssVar=useLayoutVar(PANEL_START_VAR.rightPanel),regionsReadyCssVar=useLayoutVar(LAYOUT_REGIONS_READY_VAR),publishRegions=useCallback(()=>{if(!root)return;let targets=[[Slot.leftPanel,leftPanelWidthCssVar,leftPanelStartCssVar],[Slot.content,contentWidthCssVar,contentStartCssVar],[Slot.splitview,splitviewWidthCssVar,splitviewStartCssVar],[Slot.rightPanel,rightPanelWidthCssVar,rightPanelStartCssVar]],rootRect=root.getBoundingClientRect();targets.forEach(([slot,widthCssVar,startCssVar])=>{let rect=slotHosts[slot]?.getBoundingClientRect(),isMobileRegion=!!mobileHost&&(slot===Slot.content\|\|slot===Slot.splitview),width=isMobileRegion?rootRect.width:rect?.width??0,start=isMobileRegion\|\|!rect?0:rect.left-rootRect.left;widthCssVar.set(`${width}px`),startCssVar.set(`${start}px`)}),regionsReadyCssVar.set("1")},[slotHosts,root,mobileHost,leftPanelWidthCssVar,contentWidthCssVar,splitviewWidthCssVar,rightPanelWidthCssVar,leftPanelStartCssVar,contentStartCssVar,splitviewStartCssVar,rightPanelStartCssVar,regionsReadyCssVar]);useLayoutEffect(()=>{publishRegions()},[publishRegions]),useLayoutEffect(()=>{if(!root\|\|"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishRegions);return observer.observe(root),Object.values(slotHosts).forEach(host=>{host&&observer.observe(host)}),()=>observer.disconnect()},[root,slotHosts,publishRegions])},StyledLayout=styled("div",{target:"e101g12t0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=styled("div",{target:"e101g12t1",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=styled("div",{target:"e101g12t2",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"});export const PANEL_HOST_DS_ID="PanelHost";let StyledContentColumn=styled("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e101g12t3",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:"e101g12t4",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=styled("div",{target:"e101g12t5",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]),rightPanelVariant=layoutState[Slot.rightPanel].variant??declared[Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!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\|\|"sidebar"===layoutState.leftPanel.variant),[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}),[layoutRoot,setLayoutRoot]=useState(null),rootPortalTargets=useMemo(()=>({...portalTargets,root:layoutRoot}),[portalTargets,layoutRoot]);useGlobalCssVariables({slotHosts,root:layoutRoot,mobileHost:mobileSplitStackHost});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,gapBefore:slot===Slot.rightPanel,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize,maxSize:panel?.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)&&declared[id]?.resizable!==!1&&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:rootPortalTargets},React.createElement(LayoutFloatDragProvider,null,React.createElement(MobileSplitStackContext.Provider,{value:mobileSplitStack},React.createElement(StyledLayout,{ref:setLayoutRoot,"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.BottomBar=LayoutBottomBar,Layout.BottomBarItem=LayoutBottomBarItem,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/RightPanel/RightPanel.js CHANGED Viewed

	@@ -1 +1 @@
1	- import React from"react";import{useTheme}from"@emotion/react";import{Slot}from"../-constants";import{useDeclarePanel,useRunCallbackOnValueChange}from"../registry";import{useLayout}from"../useLayout";import{useBreakpoints}from"../../../shared/useBreakpoints";import{RightPanelDocked}from"./RightPanelDocked";import{RightPanelSheet}from"./RightPanelSheet";export const RightPanel=({children,defaultSize~~=378~~,collapsible=!1,resizable,variant="sidebar",onVisibleChange,onVariantChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{state:layoutState,[Slot.rightPanel]:panel}=useLayout(),{isVisible,hide}=panel,{isMobile}=useBreakpoints(),{minWidth,maxWidth}=useTheme().variables.layout.rightPanel;useDeclarePanel(Slot.rightPanel,{defaultSize,minSize:minWidth.default,maxSize:maxWidth.default,collapsible,resizable,lockWidthOnWindowResize:"number"==typeof ~~defaultSize~~\|\|~~defaultSize~~.trim().endsWith("px"),variant});let resolvedVariant=layoutState[Slot.rightPanel].variant??variant;return useRunCallbackOnValueChange(isVisible,onVisibleChange),useRunCallbackOnValueChange(resolvedVariant,onVariantChange),isMobile?React.createElement(RightPanelSheet,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):React.createElement(RightPanelDocked,{isVisible:isVisible,variant:resolvedVariant,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)};
1	+ import React from"react";import{useTheme}from"@emotion/react";import{Slot}from"../-constants";import{useDeclarePanel,useRunCallbackOnValueChange}from"../registry";import{useLayout}from"../useLayout";import{useBreakpoints}from"../../../shared/useBreakpoints";import{RightPanelDocked}from"./RightPanelDocked";import{RightPanelSheet}from"./RightPanelSheet";export const RightPanel=({children,defaultSize,collapsible=!1,resizable,variant="sidebar",onVisibleChange,onVariantChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{state:layoutState,[Slot.rightPanel]:panel}=useLayout(),{isVisible,hide}=panel,{isMobile}=useBreakpoints(),{width,minWidth,maxWidth}=useTheme().variables.layout.rightPanel,resolvedDefaultSize=defaultSize??width.open;useDeclarePanel(Slot.rightPanel,{defaultSize:resolvedDefaultSize,minSize:minWidth.default,maxSize:maxWidth.default,collapsible,resizable,lockWidthOnWindowResize:"number"==typeof resolvedDefaultSize\|\|resolvedDefaultSize.trim().endsWith("px"),variant});let resolvedVariant=layoutState[Slot.rightPanel].variant??variant;return useRunCallbackOnValueChange(isVisible,onVisibleChange),useRunCallbackOnValueChange(resolvedVariant,onVariantChange),isMobile?React.createElement(RightPanelSheet,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):React.createElement(RightPanelDocked,{isVisible:isVisible,variant:resolvedVariant,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)};

package/build/esm/components/Layout/RightPanel/RightPanelDocked.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import type { ForwardedScrollProps, RightPanelVariant } from "../-types";
 export type RightPanelDockedProps = ForwardedScrollProps & {
     children: React.ReactNode;
     isVisible: boolean;
-    /** Docked column vs. minimized floating window - only the border differs here. */
+    /** Docked column vs. floating window, without page insets or the left border. */
     variant: RightPanelVariant;
     "aria-label": string;
 };

package/build/esm/components/Layout/RightPanel/RightPanelDocked.js CHANGED Viewed

	@@ -1 +1 @@
1	- import React from"react";import styled from"@emotion/styled";import{RIGHT_PANEL_BOTTOM_BAR_INSET,Slot,SUBNAV_OFFSET_VAR}from"../-constants";import{useLayoutPortal}from"../registry";import{PanelContainer}from"../PanelContainer";let StyledRightPanelSlot=styled("div",{target:"~~e1usejnr0~~",label:"StyledRightPanelSlot"})(({theme})=>({position:"absolute",left:0,right:0,bottom:RIGHT_PANEL_BOTTOM_BAR_INSET,top:`var(${SUBNAV_OFFSET_VAR}, 0px)`,overflow:"hidden",transition:`top ${theme.variables.animation.navSlide.open.duration} ${theme.variables.animation.navSlide.open.timingFunction}`}));export const RightPanelDocked=({children,isVisible,variant,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>useLayoutPortal(Slot.rightPanel,isVisible?React.createElement(StyledRightPanelSlot,~~null~~,React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,showBorderLeft:"float"!==variant},children)):null);
1	+ import React from"react";import styled from"@emotion/styled";import{RIGHT_PANEL_BOTTOM_BAR_INSET,Slot,SUBNAV_OFFSET_VAR}from"../-constants";import{useLayoutPortal}from"../registry";import{PanelContainer}from"../PanelContainer";let StyledRightPanelSlot=styled("div",{target:"e1qlsvva0",label:"StyledRightPanelSlot"})(({theme,isFloating})=>({position:"absolute",left:0,right:0,bottom:isFloating?0:RIGHT_PANEL_BOTTOM_BAR_INSET,top:isFloating?0:`var(${SUBNAV_OFFSET_VAR}, 0px)`,overflow:"hidden",transition:isFloating?"none":`top ${theme.variables.animation.navSlide.open.duration} ${theme.variables.animation.navSlide.open.timingFunction}`}));export const RightPanelDocked=({children,isVisible,variant,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>useLayoutPortal(Slot.rightPanel,isVisible?React.createElement(StyledRightPanelSlot,{isFloating:"float"===variant},React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,showBorderLeft:"float"!==variant},children)):null);

package/build/esm/components/Layout/Split/MobileSplitView/StyledMobileSplitSlideLayer.js CHANGED Viewed

	@@ -1 +1 @@
1	- import styled from"@emotion/styled";let OFFSET_TRANSFORM={[-1]:"translateX(-100%)",0:"translateX(0)",1:"translateX(100%)"},LAYER_Z_INDEX={base:1,overlay:2};export const StyledMobileSplitSlideLayer=styled("div",{shouldForwardProp:prop=>"offset"!==prop&&"layer"!==prop,target:"~~et3u54n0~~",label:"StyledMobileSplitSlideLayer"})(({theme,offset,layer})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.open;return{position:"absolute",inset:0,zIndex:LAYER_Z_INDEX[layer],transform:OFFSET_TRANSFORM[offset],transition:`transform ${duration} ${timingFunction}`,pointerEvents:0===offset?"auto":"none","@media (prefers-reduced-motion: reduce)":{transition:"none"}}});
1	+ import styled from"@emotion/styled";let OFFSET_TRANSFORM={[-1]:"translateX(-100%)",0:"translateX(0)",1:"translateX(100%)"},LAYER_Z_INDEX={base:1,overlay:2};export const StyledMobileSplitSlideLayer=styled("div",{shouldForwardProp:prop=>"offset"!==prop&&"layer"!==prop,target:"e99d5g40",label:"StyledMobileSplitSlideLayer"})(({theme,offset,layer})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.open;return{position:"absolute",inset:0,zIndex:LAYER_Z_INDEX[layer],transform:OFFSET_TRANSFORM[offset],transition:`transform ${duration} ${timingFunction}`,pointerEvents:0===offset?"auto":"none","@media (prefers-reduced-motion: reduce)":{transition:"none"}}});

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

	@@ -1 +1 @@
1	- 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)});
1	+ 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:"e183gcm70",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:"e183gcm71",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.js CHANGED Viewed

	@@ -1 +1 @@
1	- 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))))});
1	+ 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:"e1qdsh6b0",label:"StyledTextClamped"})(),StyledMedia=styled("div",{target:"e1qdsh6b1",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:"e1qdsh6b2",label:"StyledOverlay"})(()=>({position:"absolute",left:0,bottom:0,top:0,right:0})),StyledButton=styled("button",{target:"e1qdsh6b3",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:"e1qdsh6b4",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:"e1qdsh6b5",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/MediaViewerCarousel/MediaCarousel/MediaCarousel.js CHANGED Viewed

	@@ -1 +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:"~~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"}))))};
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:"e1b6s88e0",label:"StyledWrapper"})(({showNavButtons})=>({width:"100%",...showNavButtons?{padding:"0 40px"}:{padding:"0 8px"}})),StyledButtonWrapper=styled("div",{target:"e1b6s88e1",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:"e1b6s88e2",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:"e1b6s88e3",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.js CHANGED Viewed

	@@ -1 +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:"~~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)))))}
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:"e1xq3yqd0",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:"e1xq3yqd1",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/EmptyState/EmptyState.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import React, { type ReactElement } from "react";
 import type { IconName } from "../../../components/Icon/Icon";
+import type { PolymorphicComponentPropsWithRef } from "../../../types";
 import { type LinkProps } from "../../Link/Link";
 import { type HeaderProps } from "../../Typography/Header";
 import { type ButtonGroupProps } from "../ButtonGroup/ButtonGroup";
@@ -24,7 +25,8 @@ export declare namespace EmptyState {
     export { EmptyStateLink as Link };
 }
 declare function EmptyStateButtonGroup<C extends React.ElementType = "button">({ ...rest }: Omit<ButtonGroupProps<C>, "buttonSize">): React.ReactElement;
-declare function EmptyStateLink({ children, ...rest }: Omit<LinkProps, "size" | "color" | "weight"> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+type EmptyStateLinkProps<C extends React.ElementType> = Omit<PolymorphicComponentPropsWithRef<C, LinkProps>, "size" | "color" | "weight" | "ref"> & {
     children: React.ReactNode;
-}): React.ReactElement;
+};
+declare function EmptyStateLink<C extends React.ElementType = "a">({ children, ...rest }: EmptyStateLinkProps<C>): React.ReactElement;
 export {};

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

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

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

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

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

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

package/build/esm/components/StatusIndicator/StatusIndicator.js CHANGED Viewed

	@@ -1 +1 @@
1	- import React from"react";import styled from"@emotion/styled";import{Icon}from"../Icon/Icon";import{Text}from"../Typography/Text/Text";let toSemanticColor=variant=>"neutral"===variant?"secondary":variant,StyledStatusIndicator=styled("span",{target:"~~ew8bzqs0~~",label:"StyledStatusIndicator"})(({theme})=>({display:"inline-flex",alignItems:"center",gap:theme.variables.size.spacing.xxs})),CustomText=styled(Text,{target:"~~ew8bzqs1~~",label:"CustomText"})(({theme})=>({letterSpacing:theme.variables.size.letterSpacing.s}));export function StatusIndicator({variant="neutral",label,id,"data-e2e-test-id":dataE2eTestId}){let color=toSemanticColor(variant);return React.createElement(StyledStatusIndicator,{id:id,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"StatusIndicator"},React.createElement(Icon,{name:"dot",size:"s",color:color,inline:!0,"aria-hidden":!0}),React.createElement(CustomText,{as:"span",size:"xs",weight:"black",transform:"uppercase",color:color},label))}
1	+ import React from"react";import styled from"@emotion/styled";import{Icon}from"../Icon/Icon";import{Text}from"../Typography/Text/Text";let toSemanticColor=variant=>"neutral"===variant?"secondary":variant,StyledStatusIndicator=styled("span",{target:"e14gvfyl0",label:"StyledStatusIndicator"})(({theme})=>({display:"inline-flex",alignItems:"center",gap:theme.variables.size.spacing.xxs})),CustomText=styled(Text,{target:"e14gvfyl1",label:"CustomText"})(({theme})=>({letterSpacing:theme.variables.size.letterSpacing.s}));export function StatusIndicator({variant="neutral",label,id,"data-e2e-test-id":dataE2eTestId}){let color=toSemanticColor(variant);return React.createElement(StyledStatusIndicator,{id:id,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"StatusIndicator"},React.createElement(Icon,{name:"dot",size:"s",color:color,inline:!0,"aria-hidden":!0}),React.createElement(CustomText,{as:"span",size:"xs",weight:"black",transform:"uppercase",color:color},label))}

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

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

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

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

package/build/esm/web-tokens/visualConfig.d.ts CHANGED Viewed

@@ -260,6 +260,7 @@ type Variables = {
         "rightPanel": {
             "width": {
                 "default": string;
+                "open": string;
             };
             "minWidth": {
                 "default": string;