@amboss/design-system 4.9.4 → 4.11.0

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

@@ -2,13 +2,16 @@ import { type ReactNode } from "react";
 import type { PanelImperativeHandle } from "react-resizable-panels";
 import type { RightPanelVariant, Size, SlotKey } from "./-types";
 export type PortalTargets = Partial<Record<SlotKey, HTMLElement | null>>;
-export declare const LayoutPortalContext: React.Context<Partial<Record<"content" | "leftPanel" | "rightPanel" | "splitview", HTMLElement | null>>>;
+type LayoutPortalTargets = PortalTargets & {
+    root?: HTMLElement | null;
+};
+export declare const LayoutPortalContext: import("react").Context<LayoutPortalTargets>;
 /**
  * Portal `children` into the host DOM node registered for `slot`. Returns the
  * portal (or `null` if the host isn't mounted yet). Call unconditionally -
  * gate content by passing `null` as `children`, not by skipping the call.
  */
-export declare function useLayoutPortal(slot: SlotKey, children: ReactNode): ReactNode;
+export declare function useLayoutPortal(slot: SlotKey | "root", children: ReactNode): ReactNode;
 /**
  * Panel descriptor a marker contributes. The Group renders one resizable Panel
  * per *declared* panel that is currently shown - regardless of nesting depth.
@@ -20,8 +23,8 @@ export type PanelReg = {
     minSize?: Size;
     maxSize?: Size;
     collapsible?: boolean;
-    /** When `false`, the panel is fixed at `defaultSize` and can't be drag-resized
-     *  (directly or via a neighbour). Defaults to resizable. */
+    /** When `false`, user input can't resize the panel (directly or via a
+     *  neighbour). Container resizing still applies. Defaults to resizable. */
     resizable?: boolean;
     /** Lock this column's width when the window resizes, leaving the change to
      *  the columns without it. Declared by the docked side panels, which are
@@ -35,11 +38,11 @@ export type PanelRegistry = {
     register: (slot: SlotKey, reg: PanelReg) => void;
     unregister: (slot: SlotKey) => void;
 };
-export declare const PanelRegistryContext: React.Context<PanelRegistry | null>;
+export declare const PanelRegistryContext: import("react").Context<PanelRegistry | null>;
 /** Register this slot as a panel for the marker's lifetime. */
 export declare function useDeclarePanel(slot: SlotKey, reg: PanelReg): void;
 export type PanelDeclarations = Partial<Record<SlotKey, PanelReg>>;
-export declare const PanelDeclarationsContext: React.Context<Partial<Record<"content" | "leftPanel" | "rightPanel" | "splitview", PanelReg>>>;
+export declare const PanelDeclarationsContext: import("react").Context<Partial<Record<"content" | "leftPanel" | "rightPanel" | "splitview", PanelReg>>>;
 /**
  * The ids of the columns in the resizable row, in order, joined with commas.
  * Changes when a column joins or leaves the row, and only then. A column that
@@ -48,7 +51,7 @@ export declare const PanelDeclarationsContext: React.Context<Partial<Record<"con
  * had the last time the same set of columns was on screen - re-checks its rest
  * against it.
  */
-export declare const PanelRowContext: React.Context<string>;
+export declare const PanelRowContext: import("react").Context<string>;
 /** The row's current column set, as a stable key. Empty outside a Layout. */
 export declare const usePanelRow: () => string;
 /**
@@ -60,7 +63,7 @@ export declare const usePanelRow: () => string;
 export type PanelPresence = {
     setPresent: (slot: SlotKey, isPresent: boolean) => void;
 };
-export declare const PanelPresenceContext: React.Context<PanelPresence | null>;
+export declare const PanelPresenceContext: import("react").Context<PanelPresence | null>;
 /** Report this slot's live presence so the Layout keeps its column mounted
  *  through the exit animation. No-op outside a Layout. */
 export declare function usePanelPresence(slot: SlotKey, isPresent: boolean): void;
@@ -82,10 +85,11 @@ export type PanelAnimationControl = {
     /** Mute the Group's resize/collapse/persist callbacks for a slot mid-slide. */
     setResizeSuppressed: (slot: SlotKey, suppressed: boolean) => void;
 };
-export declare const PanelAnimationContext: React.Context<PanelAnimationControl | null>;
+export declare const PanelAnimationContext: import("react").Context<PanelAnimationControl | null>;
 /** Access the Layout's panel-animation control. Null outside a Layout. */
 export declare function usePanelAnimationControl(): PanelAnimationControl | null;
 /** Run `onChange(value)` when `value` transitions (not on initial mount). */
 export declare function useRunCallbackOnValueChange<T>(value: T, onChange?: (value: T) => void): void;
 /** Fire `onChange(visible)` when `visible` transitions (not on initial mount). */
 export declare function useVisibleChange(visible: boolean, onChange?: (visible: boolean) => void): void;
+export {};

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

@@ -1 +1 @@
-import{useContext}from"react";import{useLayoutSelector,useLayoutStore}from"./context";import{PanelDeclarationsContext}from"./registry";import{DEFAULT_LEFT_PANEL_VARIANT}from"./-constants";let selectAll=state=>state;function panelHandleActions({slot,visible,dispatch}){return{isVisible:visible,show:()=>dispatch({type:"setVisible",slot,visible:!0}),hide:()=>dispatch({type:"setVisible",slot,visible:!1}),reset:()=>dispatch({type:"reset",slot})}}export function useLayout(){let store=useLayoutStore(),state=useLayoutSelector(selectAll),declared=useContext(PanelDeclarationsContext),{dispatch}=store;return{state,leftPanel:{state:{...state.leftPanel,variant:state.leftPanel.variant??DEFAULT_LEFT_PANEL_VARIANT},setVariant:variant=>dispatch({type:"setVariant",panel:"leftPanel",variant}),...panelHandleActions({slot:"leftPanel",visible:state.leftPanel.visible,dispatch})},rightPanel:{state:{...state.rightPanel,variant:state.rightPanel.variant??declared.rightPanel?.variant??"sidebar"},setVariant:variant=>dispatch({type:"setVariant",panel:"rightPanel",variant}),...panelHandleActions({slot:"rightPanel",visible:state.rightPanel.visible,dispatch})},content:{state:state.content,...panelHandleActions({slot:"content",visible:state.content.visible,dispatch})},splitview:{state:state.splitview,...panelHandleActions({slot:"splitview",visible:state.splitview.visible,dispatch})}}}
+import{useContext}from"react";import{useLayoutSelector,useLayoutStore}from"./context";import{usePanelAnimations}from"./usePanelAnimations";import{useBreakpoints}from"../../shared/useBreakpoints";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{PanelDeclarationsContext}from"./registry";import{DEFAULT_LEFT_PANEL_VARIANT}from"./-constants";let selectAll=state=>state;function panelHandleActions({slot,visible,dispatch}){return{isVisible:visible,show:()=>dispatch({type:"setVisible",slot,visible:!0}),hide:()=>dispatch({type:"setVisible",slot,visible:!1}),reset:()=>dispatch({type:"reset",slot})}}export function useLayout(){let store=useLayoutStore(),state=useLayoutSelector(selectAll),declared=useContext(PanelDeclarationsContext),{dispatch}=store,{isMobile}=useBreakpoints(),animations=usePanelAnimations(),mobileStack=useContext(MobileSplitStackContext),presentationFor=slot=>state[slot].visible&&("splitview"===slot&&isMobile?mobileStack?.isSplitPresent:declared[slot])?"content"===slot?isMobile&&mobileStack?.isSplitPresent&&state.splitview.visible?"hidden":"column":"splitview"===slot?"column":"leftPanel"===slot?(state.leftPanel.variant??DEFAULT_LEFT_PANEL_VARIANT)==="sidebar"?"column":"overlay":isMobile||(state.rightPanel.variant??declared.rightPanel?.variant)==="float"?"overlay":"column":"hidden";return{state,leftPanel:{presentation:presentationFor("leftPanel"),animation:animations.leftPanel??null,state:{...state.leftPanel,variant:state.leftPanel.variant??DEFAULT_LEFT_PANEL_VARIANT},setVariant:variant=>dispatch({type:"setVariant",panel:"leftPanel",variant}),...panelHandleActions({slot:"leftPanel",visible:state.leftPanel.visible,dispatch})},rightPanel:{presentation:presentationFor("rightPanel"),animation:animations.rightPanel??null,state:{...state.rightPanel,variant:state.rightPanel.variant??declared.rightPanel?.variant??"sidebar"},setVariant:variant=>dispatch({type:"setVariant",panel:"rightPanel",variant}),...panelHandleActions({slot:"rightPanel",visible:state.rightPanel.visible,dispatch})},content:{presentation:presentationFor("content"),animation:animations.content??null,state:state.content,...panelHandleActions({slot:"content",visible:state.content.visible,dispatch})},splitview:{presentation:presentationFor("splitview"),animation:animations.splitview??null,state:state.splitview,...panelHandleActions({slot:"splitview",visible:state.splitview.visible,dispatch})}}}

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

@@ -2,5 +2,5 @@
  *  control living OUTSIDE the panel - the nav left bar's open button - point
  *  `aria-controls` at it without the two components knowing each other. Empty
  *  outside a `Layout`, where there is no panel to reference. */
-export declare const LeftPanelIdContext: React.Context<string>;
+export declare const LeftPanelIdContext: import("react").Context<string>;
 export declare const useLeftPanelId: () => string;

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

@@ -0,0 +1,12 @@
+import type { SlotKey, PanelAnimation } from "./-types";
+type Animations = Partial<Record<SlotKey, PanelAnimation | null>>;
+type PanelAnimationsStore = {
+    getSnapshot: () => Animations;
+    subscribe: (listener: () => void) => () => void;
+    set: (slot: SlotKey, animation: PanelAnimation | null) => void;
+};
+export declare const PanelAnimationsProvider: import("react").Provider<PanelAnimationsStore | null>;
+export declare const usePanelAnimationsStore: () => PanelAnimationsStore | null;
+export declare const createPanelAnimationsStore: () => PanelAnimationsStore;
+export declare const usePanelAnimations: () => Animations;
+export {};

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

@@ -0,0 +1 @@
+import{createContext,useContext,useSyncExternalStore}from"react";let EMPTY={},NOOP_SUBSCRIBE=()=>()=>{},Context=createContext(null);export const PanelAnimationsProvider=Context.Provider;export const usePanelAnimationsStore=()=>useContext(Context);export const createPanelAnimationsStore=()=>{let snapshot={},listeners=new Set;return{getSnapshot:()=>snapshot,subscribe:listener=>(listeners.add(listener),()=>{listeners.delete(listener)}),set:(slot,animation)=>{(snapshot[slot]??null)!==animation&&(snapshot={...snapshot,[slot]:animation},listeners.forEach(listener=>listener()))}}};export const usePanelAnimations=()=>{let store=usePanelAnimationsStore();return useSyncExternalStore(store?.subscribe??NOOP_SUBSCRIBE,store?.getSnapshot??(()=>EMPTY),()=>EMPTY)};

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

@@ -1 +1 @@
-import{useLayoutEffect,useRef,useState}from"react";import{useTheme}from"@emotion/react";import{useWindow}from"../../shared/useWindow";import{parseDurationMs}from"../../shared/parseDurationMs";import{prefersReducedMotion}from"../../shared/prefersReducedMotion";import{useDeclarePanel,usePanelAnimationControl,usePanelPresence,usePanelRow}from"./registry";import{useLayout}from"./useLayout";let resolveSizePx=(size,groupWidthPx)=>{if("number"==typeof size)return size;if("string"!=typeof size)return null;let parsed=parseFloat(size);return Number.isFinite(parsed)?size.trim().endsWith("px")?parsed:null!=groupWidthPx?parsed/100*groupWidthPx:null:null},groupColumnsOf=element=>{let columns=element.closest("[data-group]")?.querySelectorAll("[data-panel]");return columns?Array.from(columns):[element]},isHandleReady=handle=>{try{return handle.isCollapsed(),!0}catch{return!1}},mountDefaultSizeFor=({collapsedSize,defaultSize,isVisible,isSlidingIn})=>void 0!==collapsedSize?isVisible?defaultSize:collapsedSize:isSlidingIn?0:defaultSize,minSizeFor=({collapsedSize,isVisible,minSize})=>void 0===collapsedSize?minSize:isVisible?minSize??collapsedSize:collapsedSize;export const getMaxSize=({collapsedSize,isVisible,maxSize,openSize,phase})=>void 0===collapsedSize?maxSize:isVisible||"idle"!==phase?maxSize??openSize:collapsedSize;export function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,collapsedSize}){let{isVisible,state}=useLayout()[slot],theme=useTheme(),window=useWindow(),animation=usePanelAnimationControl(),rowKey=usePanelRow(),reducedMotion=prefersReducedMotion(window),hasCollapsedRest=void 0!==collapsedSize,isCollapsible=collapsible&&!hasCollapsedRest,[isMounted,setIsMounted]=useState(isVisible),[phase,setPhase]=useState("idle"),[fixedWidth,setFixedWidth]=useState(null),[prevVisible,setPrevVisible]=useState(isVisible);isVisible!==prevVisible&&(setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0),animation?.setResizeSuppressed(slot,!0));let openSize=hasCollapsedRest?state.size??defaultSize:defaultSize;useDeclarePanel(slot,{defaultSize:mountDefaultSizeFor({collapsedSize,defaultSize:openSize,isVisible,isSlidingIn:"entering"===phase&&collapsible&&!reducedMotion}),minSize:minSizeFor({collapsedSize,isVisible,minSize}),maxSize:getMaxSize({collapsedSize,isVisible,maxSize,openSize,phase}),collapsible:isCollapsible,resizable,lockWidthOnWindowResize}),usePanelPresence(slot,hasCollapsedRest||isMounted);let latestRest=useRef({isVisible,openSize,phase});return latestRest.current={isVisible,openSize,phase},useLayoutEffect(()=>{if(!hasCollapsedRest)return;let frame=0,cancelled=!1,resizeToRest=attempt=>{if(cancelled)return;let handle=animation?.getHandle(slot)??null;if(handle&&isHandleReady(handle)){let rest=latestRest.current;if("idle"!==rest.phase)return;let restSize=rest.isVisible?rest.openSize??minSize:collapsedSize;try{void 0!==restSize&&handle.resize(restSize)}catch{}return}animation&&!(attempt>=30)&&(frame=window.requestAnimationFrame(()=>resizeToRest(attempt+1)))};return Promise.resolve().then(()=>resizeToRest(0)),()=>{cancelled=!0,window.cancelAnimationFrame(frame)}},[rowKey]),useLayoutEffect(()=>{if("idle"===phase)return;let cancelled=!1,frame=0,settleTimer=0,animatedColumns=[];animation?.setResizeSuppressed(slot,!0);let{duration,timingFunction}=hasCollapsedRest?theme.variables.animation.navSlide.collapse:theme.variables.animation.navSlide.open,durationMs=parseDurationMs(duration),setColumnTransitions=enabled=>{animatedColumns.forEach(column=>{enabled?column.style.setProperty("transition",`flex-grow ${duration} ${timingFunction}`):column.style.removeProperty("transition")})},targetSize=state.size??defaultSize??minSize,openColumn=(handle,targetPx)=>{handle.isCollapsed()&&handle.expand(),handle.resize(targetPx??targetSize??minSize??"20%")},settle=handle=>{if(setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1),"entering"===phase&&handle&&!hasCollapsedRest)try{handle.getSize().inPixels<1&&openColumn(handle,null)}catch{}setFixedWidth(null),"exiting"!==phase||hasCollapsedRest||setIsMounted(!1),setPhase("idle")},runSlide=(handle,element)=>{animatedColumns=groupColumnsOf(element);let groupWidthPx=element.closest("[data-group]")?.getBoundingClientRect().width??null,targetPx=resolveSizePx(targetSize,groupWidthPx),collapsedPx=resolveSizePx(collapsedSize,groupWidthPx);setFixedWidth("entering"===phase?targetPx:handle.getSize().inPixels),reducedMotion||setColumnTransitions(!0),element.getBoundingClientRect();try{"entering"===phase?openColumn(handle,targetPx):hasCollapsedRest?handle.resize(collapsedPx??collapsedSize):handle.collapse()}catch{settle(handle);return}settleTimer=window.setTimeout(()=>settle(handle),reducedMotion?0:durationMs+80)},waitForColumn=attempt=>{if(cancelled)return;if(0===attempt&&hasCollapsedRest){frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1));return}let handle=animation?.getHandle(slot)??null,element=animation?.getElement(slot)??null;return handle&&element&&isHandleReady(handle)?void runSlide(handle,element):"exiting"===phase||!animation||attempt>=30?void settle(handle):void(frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1)))};return collapsible||hasCollapsedRest?waitForColumn(0):settle(animation?.getHandle(slot)??null),()=>{cancelled=!0,window.cancelAnimationFrame(frame),window.clearTimeout(settleTimer),setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1)}},[phase,slot,collapsible,hasCollapsedRest,reducedMotion,animation,window,theme]),{isMounted:hasCollapsedRest||isMounted,fixedWidth}}
+import{useLayoutEffect,useMemo,useRef,useState}from"react";import{flushSync}from"react-dom";import{useTheme}from"@emotion/react";import{useWindow}from"../../shared/useWindow";import{parseDurationMs}from"../../shared/parseDurationMs";import{prefersReducedMotion}from"../../shared/prefersReducedMotion";import{useDeclarePanel,usePanelAnimationControl,usePanelPresence,usePanelRow}from"./registry";import{usePanelAnimationsStore}from"./usePanelAnimations";import{useLayout}from"./useLayout";let resolveSizePx=(size,groupWidthPx)=>{if("number"==typeof size)return size;if("string"!=typeof size)return null;let parsed=parseFloat(size);return Number.isFinite(parsed)?size.trim().endsWith("px")?parsed:null!=groupWidthPx?parsed/100*groupWidthPx:null:null},groupColumnsOf=element=>{let columns=element.closest("[data-group]")?.querySelectorAll("[data-panel]");return columns?Array.from(columns):[element]},isHandleReady=handle=>{try{return handle.isCollapsed(),!0}catch{return!1}},mountDefaultSizeFor=({collapsedSize,defaultSize,isVisible,isSlidingIn})=>void 0!==collapsedSize?isVisible?defaultSize:collapsedSize:isSlidingIn?0:defaultSize,minSizeFor=({collapsedSize,isVisible,minSize,phase})=>void 0===collapsedSize?minSize:isVisible&&"idle"===phase?minSize??collapsedSize:collapsedSize;export const getMaxSize=({collapsedSize,isVisible,maxSize,openSize,phase})=>void 0===collapsedSize?maxSize:isVisible||"idle"!==phase?maxSize??openSize:collapsedSize;export function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,collapsedSize}){let{isVisible,state}=useLayout()[slot],theme=useTheme(),window=useWindow(),animation=usePanelAnimationControl(),rowKey=usePanelRow(),reducedMotion=prefersReducedMotion(window),hasCollapsedRest=void 0!==collapsedSize,isCollapsible=collapsible&&!hasCollapsedRest,[isMounted,setIsMounted]=useState(isVisible),[phase,setPhase]=useState("idle"),[fixedWidth,setFixedWidth]=useState(null),animations=usePanelAnimationsStore(),panelSlideAnimation=useMemo(()=>{let timing=hasCollapsedRest?theme.variables.animation.navSlide.collapse:theme.variables.animation.navSlide.open;return{property:"flex-grow",duration:reducedMotion?0:parseDurationMs(timing.duration),easing:timing.timingFunction}},[theme,hasCollapsedRest,reducedMotion]);useLayoutEffect(()=>{animations?.set(slot,"idle"===phase||reducedMotion||!collapsible&&!hasCollapsedRest?null:panelSlideAnimation)},[animations,slot,phase,panelSlideAnimation,reducedMotion,collapsible,hasCollapsedRest]),useLayoutEffect(()=>()=>animations?.set(slot,null),[animations,slot]);let[prevVisible,setPrevVisible]=useState(isVisible),declaredMountSize=useRef(hasCollapsedRest&&!isVisible?collapsedSize:state.size??defaultSize),chosenOpenSize=useRef(state.size??defaultSize),needsRestCorrection=useRef(!1);isVisible!==prevVisible&&(chosenOpenSize.current=state.size??defaultSize,needsRestCorrection.current=!0,hasCollapsedRest&&setFixedWidth(resolveSizePx(state.size??defaultSize,null)),setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0),animation?.setResizeSuppressed(slot,!0));let openSize=hasCollapsedRest?state.size??defaultSize:defaultSize;useDeclarePanel(slot,{defaultSize:hasCollapsedRest?declaredMountSize.current:mountDefaultSizeFor({defaultSize:openSize,isVisible,isSlidingIn:"entering"===phase&&collapsible&&!reducedMotion}),minSize:minSizeFor({collapsedSize,isVisible,minSize,phase}),maxSize:getMaxSize({collapsedSize,isVisible,maxSize,openSize,phase}),collapsible:isCollapsible,resizable:(!hasCollapsedRest||!!isVisible&&"idle"===phase)&&resizable,lockWidthOnWindowResize}),usePanelPresence(slot,hasCollapsedRest||isMounted),useLayoutEffect(()=>{if(!hasCollapsedRest||"idle"!==phase||!needsRestCorrection.current)return;let restSize=isVisible?chosenOpenSize.current:collapsedSize,cancelled=!1;return animation?.setResizeSuppressed(slot,!0),Promise.resolve().then(()=>{if(cancelled)return;let handle=animation?.getHandle(slot);try{handle&&isHandleReady(handle)&&void 0!==restSize&&flushSync(()=>handle.resize(restSize))}finally{needsRestCorrection.current=!1,animation?.setResizeSuppressed(slot,!1)}}),()=>{cancelled=!0,animation?.setResizeSuppressed(slot,!1)}},[phase,hasCollapsedRest,isVisible,collapsedSize,animation,slot]);let latestRest=useRef({isVisible,openSize,phase});return latestRest.current={isVisible,openSize,phase},useLayoutEffect(()=>{if(!hasCollapsedRest)return;let frame=0,cancelled=!1,resizeToRest=attempt=>{if(cancelled)return;let handle=animation?.getHandle(slot)??null;if(handle&&isHandleReady(handle)){let rest=latestRest.current;if("idle"!==rest.phase)return;let restSize=rest.isVisible?rest.openSize??minSize:collapsedSize;try{void 0!==restSize&&handle.resize(restSize)}catch{}return}animation&&!(attempt>=30)&&(frame=window.requestAnimationFrame(()=>resizeToRest(attempt+1)))};return Promise.resolve().then(()=>resizeToRest(0)),()=>{cancelled=!0,window.cancelAnimationFrame(frame)}},[rowKey]),useLayoutEffect(()=>{if("idle"===phase)return;let cancelled=!1,frame=0,settleTimer=0,animatedColumns=[];animation?.setResizeSuppressed(slot,!0);let durationMs=panelSlideAnimation.duration,setColumnTransitions=enabled=>{animatedColumns.forEach(column=>{enabled?column.style.setProperty("transition",`${panelSlideAnimation.property} ${panelSlideAnimation.duration}ms ${panelSlideAnimation.easing}`):column.style.removeProperty("transition")})},targetSize=state.size??defaultSize??minSize,openColumn=(handle,targetPx)=>{handle.isCollapsed()&&handle.expand(),handle.resize(targetPx??targetSize??minSize??"20%")},settle=handle=>{if(setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1),"entering"===phase&&handle&&!hasCollapsedRest)try{handle.getSize().inPixels<1&&openColumn(handle,null)}catch{}setFixedWidth(null),"exiting"!==phase||hasCollapsedRest||setIsMounted(!1),setPhase("idle")},runSlide=(handle,element)=>{animatedColumns=groupColumnsOf(element);let groupWidthPx=element.closest("[data-group]")?.getBoundingClientRect().width??null,targetPx=resolveSizePx(targetSize,groupWidthPx),collapsedPx=resolveSizePx(collapsedSize,groupWidthPx);setFixedWidth("entering"===phase||hasCollapsedRest?targetPx:handle.getSize().inPixels),reducedMotion||setColumnTransitions(!0),element.getBoundingClientRect();try{"entering"===phase?openColumn(handle,targetPx):hasCollapsedRest?handle.resize(collapsedPx??collapsedSize):handle.collapse()}catch{settle(handle);return}settleTimer=window.setTimeout(()=>settle(handle),reducedMotion?0:durationMs+80)},waitForColumn=attempt=>{if(cancelled)return;if(0===attempt&&hasCollapsedRest)return void Promise.resolve().then(()=>waitForColumn(attempt+1));let handle=animation?.getHandle(slot)??null,element=animation?.getElement(slot)??null;if(handle&&element&&isHandleReady(handle)){if(hasCollapsedRest){let startSize="entering"===phase?collapsedSize:chosenOpenSize.current;void 0!==startSize&&flushSync(()=>handle.resize(startSize))}runSlide(handle,element);return}if("exiting"===phase||!animation||attempt>=30)return void settle(handle);frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1))};return collapsible||hasCollapsedRest?waitForColumn(0):settle(animation?.getHandle(slot)??null),()=>{cancelled=!0,window.cancelAnimationFrame(frame),window.clearTimeout(settleTimer),setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1)}},[phase,slot,collapsible,hasCollapsedRest,reducedMotion,animation,window,theme,panelSlideAnimation]),{isMounted:hasCollapsedRest||isMounted,fixedWidth}}

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

@@ -1 +1 @@
-import React,{useContext}from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import{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)});
+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

@@ -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))))});
+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

@@ -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"}))))};
+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/NavBar/NavBar.d.ts

@@ -1,5 +1,11 @@
 import React from "react";
+import { NavBarSubMenuContainer } from "./NavBarSubMenuContainer";
+import { NavBarDropdownTriggerButton } from "./NavBarDropdownTriggerButton";
+import { NavBarSearchInput } from "./NavBarSearchInput";
 import { NavBarOverlayBar } from "./NavBarOverlayBar";
+import { PrimaryNavContainer, PrimaryNav } from "./NavBarPrimaryNav";
+import { PrimaryNavLinkItem } from "./NavBarPrimaryNavLinkItem";
+import { SecondaryNav } from "./NavBarSecondaryNav";
 import { NavBarName } from "./types";
 type NavBarProps = React.PropsWithChildren<{
     subTheme: NavBarName;
@@ -7,23 +13,13 @@ type NavBarProps = React.PropsWithChildren<{
 }>;
 export declare function NavBar({ children, subTheme, isCompact, }: NavBarProps): React.ReactElement;
 export declare namespace NavBar {
-    var PrimaryNavContainer: typeof import("./NavBarPrimaryNav").PrimaryNavContainer;
-    var PrimaryNav: typeof import("./NavBarPrimaryNav").PrimaryNav;
-    var PrimaryNavItem: React.ForwardRefExoticComponent<{
-        label: string;
-        isActive?: boolean;
-        as?: React.ElementType;
-        to?: string;
-    } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "children"> & React.RefAttributes<HTMLAnchorElement>>;
-    var SubMenuContainer: React.ForwardRefExoticComponent<{
-        "data-e2e-test-id"?: string;
-        children: React.ReactNode;
-    } & React.RefAttributes<HTMLDivElement>>;
-    var OverlayBar: typeof NavBarOverlayBar;
-    var SecondaryNav: typeof import("./NavBarSecondaryNav").SecondaryNav;
-    var DropdownTriggerButton: React.ForwardRefExoticComponent<Pick<import("../..").ButtonProps, "onFocus" | "onBlur" | "onClick" | "disabled"> & {
-        children?: React.ReactNode | undefined;
-    } & React.RefAttributes<HTMLButtonElement>>;
-    var SearchInput: React.ForwardRefExoticComponent<import("./NavBarSearchInput").NavBarSearchInputProps & React.RefAttributes<HTMLButtonElement>>;
+    export { PrimaryNavContainer };
+    export { PrimaryNav };
+    export { PrimaryNavLinkItem as PrimaryNavItem };
+    export { NavBarSubMenuContainer as SubMenuContainer };
+    export { NavBarOverlayBar as OverlayBar };
+    export { SecondaryNav };
+    export { NavBarDropdownTriggerButton as DropdownTriggerButton };
+    export { NavBarSearchInput as SearchInput };
 }
 export {};

package/build/esm/components/NavBar/NavBarContext.d.ts

@@ -6,6 +6,6 @@ type NavBarContextValue = {
     primaryNavRef: RefObject<HTMLElement>;
     secondaryNavRef: RefObject<HTMLElement>;
 };
-export declare const NavBarContext: React.Context<NavBarContextValue>;
+export declare const NavBarContext: import("react").Context<NavBarContextValue>;
 export declare function useNavBarContext(): NavBarContextValue;
 export {};

package/build/esm/components/NavBar/NavBarDropdownTriggerButton.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import type { ButtonProps } from "../Button/Button";
-export declare const NavBarDropdownTriggerButton: React.ForwardRefExoticComponent<Pick<ButtonProps, "onFocus" | "onBlur" | "onClick" | "disabled"> & {
+export declare const NavBarDropdownTriggerButton: React.ForwardRefExoticComponent<Pick<ButtonProps, "disabled" | "onBlur" | "onClick" | "onFocus"> & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1 +1 @@
-import React,{useState,useContext}from"react";import styled from"@emotion/styled";import{Card}from"../Card/Card";import{Box}from"../Box/Box";import{Columns,Column}from"../Column/Columns";import{Button}from"../Button/Button";import{Icon}from"../Icon/Icon";import{Text}from"../Typography/Text/Text";import{SubThemeProvider}from"../SubThemeProvider/SubThemeProvider";import{SubThemeContext}from"../SubThemeProvider/SubThemeContext";let StyledExpandingContainer=styled("div",{target:"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)))))}
+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/Dialog/DialogContext.d.ts

@@ -1 +1 @@
-export declare const DialogContext: React.Context<boolean>;
+export declare const DialogContext: import("react").Context<boolean>;

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

@@ -20,8 +20,8 @@ export type EmptyStateProps = {
 };
 export declare function EmptyState({ title, titleAs, description, variant, icon, children, "data-e2e-test-id": dataE2eTestId, ...ariaAttributes }: EmptyStateProps): React.ReactElement;
 export declare namespace EmptyState {
-    var ButtonGroup: typeof EmptyStateButtonGroup;
-    var Link: typeof EmptyStateLink;
+    export { EmptyStateButtonGroup as ButtonGroup };
+    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> & {

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

@@ -102,9 +102,11 @@ type ImageProps = {
     ImageComponent: React.ElementType<any>;
 };
 export type ModalProps = BaseProps & ConditionalRoleProps & LabelProps & ImageProps & Pick<PortalProps, "portalContainer">;
+declare const ModalStack: ({ children, ...rest }: Omit<StackProps, "space">) => React.JSX.Element;
+declare const ModalText: ({ children, ...rest }: Omit<TextProps, "size" | "variant">) => React.JSX.Element;
 export declare function Modal({ header, subHeader, labelHeader, children, imageUrl, ImageComponent, secondaryButton, cancelButtonLabel, isDismissible, isFullScreen, isMaxWidthLimit, actionButton, role, onAction, size, privateProps: { skipPortal, height, zeroPadding, tabbableOptions }, portalContainer, closeButtonAriaLabel, "data-e2e-test-id": dataE2eTestId, imageAlt, initialFocus, ...ariaAttributes }: ModalProps): React.ReactElement;
 export declare namespace Modal {
-    var Stack: ({ children, ...rest }: Omit<StackProps, "space">) => React.JSX.Element;
-    var Text: ({ children, ...rest }: Omit<TextProps, "size" | "variant">) => React.JSX.Element;
+    export { ModalStack as Stack };
+    export { ModalText as Text };
 }
 export {};

package/build/esm/components/Patterns/Popover/PopoverContext.d.ts

@@ -6,4 +6,4 @@ export type PopoverContextValue = {
      */
     portalContainer?: HTMLElement | null;
 };
-export declare const PopoverContext: React.Context<PopoverContextValue>;
+export declare const PopoverContext: import("react").Context<PopoverContextValue>;

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

@@ -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});
+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/PromptInput/PromptInput.d.ts

@@ -70,5 +70,5 @@ export declare const PromptInput: React.ForwardRefExoticComponent<{
     onEnterKey: () => void;
     /** Renders an icon to the left inside the textarea */
     leftIcon?: IconName;
-} & Omit<PromptTextAreaProps, "size" | "selectedListItem" | "isAutocompleteListOpen" | "hasAutocomplete" | "hasLeftIcon"> & Pick<AutocompleteListProps, "portalContainer" | "autocompleteListItems" | "autocompleteListFooter"> & React.RefAttributes<HTMLTextAreaElement>>;
+} & Omit<PromptTextAreaProps, "hasAutocomplete" | "hasLeftIcon" | "isAutocompleteListOpen" | "selectedListItem" | "size"> & Pick<AutocompleteListProps, "autocompleteListFooter" | "autocompleteListItems" | "portalContainer"> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

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

@@ -13,4 +13,4 @@ export declare const RadioCard: React.ForwardRefExoticComponent<{
     renderContent?: (params: {
         isSelected: boolean;
     }) => React.ReactNode;
-} & Omit<RadioProps, "errorMessages" | "hint" | "hideLabel"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<RadioProps, "errorMessages" | "hideLabel" | "hint"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -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})))});
+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.d.ts

@@ -33,7 +33,9 @@ export type SearchResultProps = {
     /** The test id for the result's primary target. */
     "data-e2e-test-id"?: string;
 };
+declare const defaultProps: Partial<SearchResultProps>;
 export declare function SearchResult({ title, subtitle, icon, details, body, secondaryTargets, link, labels, "data-e2e-test-id": dataE2eTestId, ...ariaAttributes }: SearchResultProps): React.ReactElement;
 export declare namespace SearchResult {
-    var defaultProps: Partial<SearchResultProps>;
+    export { defaultProps };
 }
+export {};

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

@@ -1 +1 @@
-import React,{useRef}from"react";import styled from"@emotion/styled";import{Columns,Column}from"../Column/Columns";import{Icon}from"../Icon/Icon";import{Inline}from"../Inline/Inline";import{Stack}from"../Stack/Stack";import{StyledText}from"../Typography/StyledText/StyledText";import{Badge}from"../Badge/Badge";import{TextClamped}from"../Typography/TextClamped/TextClamped";import{Text}from"../Typography/Text/Text";let StyledResultContainer=styled("div",{target:"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};
+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/Sheet/Sheet.js

@@ -1 +1 @@
-import React,{useRef,useLayoutEffect,useState,useEffect,useCallback}from"react";import styled from"@emotion/styled";import{createPortal}from"react-dom";import{keyframes,Global}from"@emotion/react";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";import{Container}from"../Container/Container";import{useDragDown}from"../../shared/useDragDown";import{StyledBackdrop}from"../Lightbox/Lightbox";import{isWithinScrolledElement}from"../../shared/isWithinScrolledElement";export const SHEET_MAX_HEIGHT="80svh";let StyledContainer=styled("div",{target:"e137uunh0",label:"StyledContainer"})(({theme,containerHeight,isClosing,isOpening,dragOffset=0})=>{let animation;if(containerHeight){let slideOut=keyframes({from:{transform:`translateY(${dragOffset}px)`},to:{transform:`translateY(${containerHeight}px)`}}),slideIn=keyframes({from:{transform:`translateY(${containerHeight}px)`},to:{transform:"translateY(0px)"}});animation=isClosing?`200ms ease-out forwards ${slideOut}`:isOpening?`300ms ease-out forwards ${slideIn}`:"none"}return{position:"fixed",left:0,bottom:0,width:"100vw",transformOrigin:"bottom",animation,boxSizing:"border-box",zIndex:theme.variables.zIndex.modal,"> div":{borderBottomLeftRadius:0,borderBottomRightRadius:0}}}),StyledContentContainer=styled("div",{target:"e137uunh1",label:"StyledContentContainer"})(({theme,isClosing,isOpening})=>{let animation,fadeOut=keyframes({from:{opacity:theme.variables.opacity.visible},to:{opacity:theme.variables.opacity.hidden}}),fadeIn=keyframes({from:{opacity:theme.variables.opacity.hidden},to:{opacity:theme.variables.opacity.visible}}),opacity=theme.variables.opacity.hidden;return isClosing?animation=`50ms ease-out forwards ${fadeOut}`:isOpening?animation=`50ms ease-out 250ms forwards ${fadeIn}`:(animation="none",opacity=theme.variables.opacity.visible),{overflow:"auto",maxHeight:"80svh",boxSizing:"border-box",overscrollBehavior:"none",backgroundColor:theme.values.color.background.elevated.default,opacity,animation}}),StyledHandleContainer=styled("div",{target:"e137uunh2",label:"StyledHandleContainer"})(({theme,isContentContainerScrolled})=>({padding:`${theme.variables.size.spacing.xs} 0`,display:"flex",justifyContent:"center",backgroundColor:theme.values.color.background.elevated.default,...isContentContainerScrolled&&{boxShadow:theme.values.elevation[1]}})),StyledHandle=styled("div",{target:"e137uunh3",label:"StyledHandle"})(({theme})=>({width:"80px",height:"4px",borderRadius:theme.variables.size.borderRadius.xs,backgroundColor:theme.values.color.divider.secondary}));export function Sheet({id,children,hasBackdrop,isVisible,onClose,onUnmount,portalContainer,dismissOnOutsideClick=!0,disableInitialFocus,disableReturnFocusToTrigger,onClickOutsideDeactivates,"data-e2e-test-id":dataE2eTestId,role,...ariaAttributes}){let[isClosing,setClosing]=useState(!1),[isOpening,setOpening]=useState(!1),[containerHeight,setContainerHeight]=useState(0),[isContentContainerScrolled,setContentContainerScrolled]=useState(!1),containerRef=useRef(null),contentContainerRef=useRef(null),handleContainerRef=useRef(null),prevVisibleState=useRef(!1),dragOffset=useRef(0),isDragStarted=useRef(!1);useLayoutEffect(()=>{isVisible&&setOpening(!0)},[isVisible]),useLayoutEffect(()=>{isVisible&&containerRef.current&&setContainerHeight(containerRef.current.getBoundingClientRect().height)},[isVisible,children]),useEffect(()=>{!isVisible&&prevVisibleState.current&&setClosing(!0),prevVisibleState.current=isVisible},[isVisible]),useEffect(()=>{isVisible&&isClosing&&onClose()},[isVisible,isClosing,onClose]);let handleDragStart=useCallback(()=>{requestAnimationFrame(()=>{contentContainerRef.current?.scrollTop===0&&containerRef.current&&(containerRef.current.style.animation="none",containerRef.current.style.transition="transform 0.1s ease",containerRef.current.style.transform="translateY(0px)",dragOffset.current=0,isDragStarted.current=!0)})},[containerRef,contentContainerRef]),handleDrag=useCallback((_,offsetFromStart)=>{let containerCurrentHeight=containerRef.current?.getBoundingClientRect()?.height??0;requestAnimationFrame(()=>{isDragStarted.current&&containerRef.current&&contentContainerRef.current?.scrollTop===0&&offsetFromStart<containerCurrentHeight&&(containerRef.current.style.transform=`translateY(${offsetFromStart}px)`,dragOffset.current=offsetFromStart)})},[containerRef,contentContainerRef]),handleDragEnd=useCallback((_,offsetFromStart)=>{let containerCurrentHeight=containerRef.current?.getBoundingClientRect()?.height??0,minDragDistance=containerCurrentHeight<300?containerCurrentHeight/4:150;requestAnimationFrame(()=>{isDragStarted.current&&(offsetFromStart>=minDragDistance&&contentContainerRef.current?.scrollTop===0?onClose():containerRef.current&&(containerRef.current.style.transform="translateY(0px)",dragOffset.current=0)),isDragStarted.current=!1})},[containerRef,onClose]),handleDragCancel=useCallback(()=>{requestAnimationFrame(()=>{isDragStarted.current&&containerRef.current&&(containerRef.current.style.transform="translateY(0px)",dragOffset.current=0),isDragStarted.current=!1})},[containerRef]),shouldInitiateDrag=useCallback(event=>{let target=event.target;return!!handleContainerRef.current?.contains(target)||!(isWithinScrolledElement(target,containerRef.current)||(contentContainerRef.current?.scrollTop??0)>0)},[containerRef,contentContainerRef,handleContainerRef]);useDragDown({ref:containerRef,isVisible,onDragStart:handleDragStart,onDrag:handleDrag,onDragEnd:handleDragEnd,onDragCancel:handleDragCancel,shouldInitiateDrag});let handlePostDeactivate=useCallback(()=>{onClose()},[onClose]);if(!((isVisible||isClosing)&&!(isVisible&&isClosing)))return null;let sheetElm=React.createElement(React.Fragment,null,React.createElement(Global,{styles:[{html:{overflow:"hidden",overscrollBehavior:"none"}}]}),React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{clickOutsideDeactivates:dismissOnOutsideClick&&onClickOutsideDeactivates?onClickOutsideDeactivates:dismissOnOutsideClick,allowOutsideClick:!0,escapeDeactivates:!0,preventScroll:!0,initialFocus:()=>!disableInitialFocus,returnFocusOnDeactivate:!disableReturnFocusToTrigger,fallbackFocus:'[data-ds-id="Sheet"]',onPostDeactivate:handlePostDeactivate}},React.createElement(StyledContainer,{...id?{id}:{},"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Sheet",containerHeight:containerHeight,isClosing:isClosing,isOpening:isOpening,ref:containerRef,dragOffset:dragOffset.current,onAnimationEnd:()=>{isClosing?(setClosing(!1),setContainerHeight(0),dragOffset.current=0,onUnmount&&onUnmount()):isOpening&&setOpening(!1)},role:role,...ariaAttributes},React.createElement(Container,{elevation:4},React.createElement(StyledHandleContainer,{ref:handleContainerRef,isContentContainerScrolled:isContentContainerScrolled},React.createElement(StyledHandle,null)),React.createElement(StyledContentContainer,{isClosing:isClosing,isOpening:isOpening,ref:contentContainerRef,onScroll:()=>{setContentContainerScrolled(contentContainerRef.current?.scrollTop!==0)},onAnimationEnd:evt=>evt.stopPropagation()},children))))),wrappedSheet=hasBackdrop&&!isClosing?React.createElement(StyledBackdrop,null,sheetElm):sheetElm,container=portalContainer||!!document&&document.body;return container&&createPortal(wrappedSheet,container)}
+import React,{useRef,useState,useEffect,useCallback}from"react";import styled from"@emotion/styled";import{createPortal}from"react-dom";import{keyframes,Global,useTheme}from"@emotion/react";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";import{Container}from"../Container/Container";import{useExitAnimation}from"../../shared/useExitAnimation";import{useDocument}from"../../shared/useDocument";import{SHEET_HEIGHT_VAR,useSheetHeightSync}from"./useSheetHeightSync";export const SHEET_MAX_HEIGHT="80svh";let SCROLL_TIMELINE="--sheet-scroll",supportsScrollDrivenAnimations=()=>"undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("animation-timeline: scroll()"),globalStyles={html:{overflow:"hidden",overscrollBehavior:"none"}},slideIn=keyframes({from:{transform:"translateY(100%)"},to:{transform:"translateY(0)"}},"label:slideIn"),slideOut=keyframes({from:{transform:"translateY(0)"},to:{transform:"translateY(100%)"}},"label:slideOut"),canScrollFurther=({element,direction})=>{if(!(direction<0?element.scrollTop>0:element.scrollTop+element.clientHeight<element.scrollHeight-1))return!1;let overflowY=element.ownerDocument.defaultView?.getComputedStyle(element).overflowY;return!!overflowY&&["auto","scroll","overlay"].includes(overflowY)},canContentTakeScroll=({target,boundary,direction})=>{let element=target instanceof Element?target:null;for(;element&&element!==boundary;){if(canScrollFurther({element,direction}))return!0;element=element.parentElement}return!1},SCROLL_KEY_DIRECTIONS={ArrowUp:-1,PageUp:-1,Home:-1,ArrowDown:1,PageDown:1,End:1},getScrollKeyDirection=({event,scroller})=>{let{target,key,shiftKey}=event;if(!(target instanceof HTMLElement&&(target.isContentEditable||["INPUT","TEXTAREA","SELECT"].includes(target.tagName)))){if(" "===key){if(target!==scroller)return;return shiftKey?-1:1}return SCROLL_KEY_DIRECTIONS[key]}},StyledRoot=styled("div",{target:"e1prhk2x0",label:"StyledRoot"})(({theme})=>({position:"fixed",inset:0,zIndex:theme.variables.zIndex.modal,pointerEvents:"none",timelineScope:SCROLL_TIMELINE})),holdStill=keyframes({from:{transform:"translateY(0)"},to:{transform:"translateY(0)"}},"label:holdStill"),getSlideAnimation=({isLeaving,isSwipedAway,theme})=>{let{enter,exit}=theme.variables.animation.sheet;return isLeaving?isSwipedAway?`${holdStill} ${exit.duration} linear forwards`:`${slideOut} ${exit.duration} ${exit.timingFunction} forwards`:`${slideIn} ${enter.duration} ${enter.timingFunction} both`},StyledBackdrop=styled("div",{target:"e1prhk2x1",label:"StyledBackdrop"})(({theme,isLeaving})=>{let{hidden,visible}=theme.variables.opacity,fadeIn=keyframes({from:{opacity:hidden},to:{opacity:visible}}),fadeOut=keyframes({from:{opacity:visible},to:{opacity:hidden}}),{enter,exit}=theme.variables.animation.sheet;return{position:"absolute",inset:0,pointerEvents:isLeaving?"none":"auto",animation:isLeaving?`${fadeOut} ${exit.duration} ${enter.timingFunction} forwards`:`${fadeIn} ${enter.duration} ${enter.timingFunction} both`,"@media (prefers-reduced-motion: reduce)":{animation:"none"}}}),StyledBackdropFill=styled("div",{target:"e1prhk2x2",label:"StyledBackdropFill"})(({theme})=>{let{hidden,visible}=theme.variables.opacity,dimWithSheet=keyframes({from:{opacity:hidden},to:{opacity:visible}});return{position:"absolute",inset:0,background:theme.values.color.background.backdrop.default,"@supports (animation-timeline: scroll())":{animation:`${dimWithSheet} linear both`,animationTimeline:SCROLL_TIMELINE}}}),StyledFrame=styled("div",{target:"e1prhk2x3",label:"StyledFrame"})(({theme})=>({position:"absolute",left:0,right:0,bottom:0,height:`var(${SHEET_HEIGHT_VAR}, auto)`,"::after":{content:'""',position:"absolute",top:"calc(100% - 1px)",left:0,right:0,height:SHEET_MAX_HEIGHT,backgroundColor:theme.values.color.background.elevated.default}})),StyledScroller=styled("div",{target:"e1prhk2x4",label:"StyledScroller"})(({theme,isLeaving,isSwipedAway})=>({position:"absolute",left:0,right:0,bottom:0,height:"calc(100% + 112px)",overflowY:"scroll",scrollSnapType:"y mandatory",overscrollBehavior:"none",scrollbarWidth:"none","::-webkit-scrollbar":{display:"none"},scrollTimeline:`${SCROLL_TIMELINE} y`,pointerEvents:isLeaving?"none":"auto",outline:"none",animation:getSlideAnimation({isLeaving,isSwipedAway,theme}),"@media (prefers-reduced-motion: reduce)":{animation:"none"}})),StyledClosedSnapPoint=styled("div",{target:"e1prhk2x5",label:"StyledClosedSnapPoint"})({height:"calc(100% + 64px + 1px)",scrollSnapAlign:"start"}),StyledSurface=styled("div",{target:"e1prhk2x6",label:"StyledSurface"})({scrollSnapAlign:"end","> div":{borderBottomLeftRadius:0,borderBottomRightRadius:0}}),StyledContentContainer=styled("div",{target:"e1prhk2x7",label:"StyledContentContainer"})(({theme})=>({overflow:"auto",maxHeight:SHEET_MAX_HEIGHT,boxSizing:"border-box",backgroundColor:theme.values.color.background.elevated.default})),StyledHandleContainer=styled("div",{target:"e1prhk2x8",label:"StyledHandleContainer"})(({theme,isContentContainerScrolled})=>({padding:`${theme.variables.size.spacing.xs} 0`,display:"flex",justifyContent:"center",backgroundColor:theme.values.color.background.elevated.default,...isContentContainerScrolled&&{boxShadow:theme.values.elevation[1]}})),StyledHandle=styled("div",{target:"e1prhk2x9",label:"StyledHandle"})(({theme})=>({width:"80px",height:"4px",borderRadius:theme.variables.size.borderRadius.xs,backgroundColor:theme.values.color.divider.secondary}));export function Sheet({id,children,hasBackdrop,isVisible,onClose,onUnmount,portalContainer,dismissOnOutsideClick=!0,disableInitialFocus,disableReturnFocusToTrigger,onClickOutsideDeactivates,"data-e2e-test-id":dataE2eTestId,role,...ariaAttributes}){let theme=useTheme(),document=useDocument(),{isMounted,isLeaving,onAnimationEnd}=useExitAnimation(isVisible),[isContentContainerScrolled,setContentContainerScrolled]=useState(!1),[isSwipedAway,setSwipedAway]=useState(!1),frameRef=useRef(null),scrollerRef=useRef(null),surfaceRef=useRef(null),backdropFillRef=useRef(null),contentContainerRef=useRef(null),wasMounted=useRef(isMounted);useEffect(()=>{wasMounted.current&&!isMounted&&onUnmount?.(),wasMounted.current=isMounted},[isMounted,onUnmount]),useSheetHeightSync({frameRef,scrollerRef,surfaceRef,isOpen:isVisible,resize:theme.variables.animation.sheet.resize}),useEffect(()=>{isVisible&&setSwipedAway(!1)},[isVisible]),useEffect(()=>{let scroller=scrollerRef.current,surface=surfaceRef.current;if(!isVisible||!scroller||!surface||"undefined"==typeof IntersectionObserver)return;let isHidden=!1,isTouching=!1,closeIfHidden=()=>{isHidden&&!isTouching&&(setSwipedAway(!0),onClose())},intersectionObserver=new IntersectionObserver(([entry])=>{isHidden=entry.intersectionRatio<.01,closeIfHidden()},{root:scroller,threshold:[.01]}),handleTouchStart=()=>{isTouching=!0},handleTouchEnd=()=>{isTouching=!1,closeIfHidden()};return intersectionObserver.observe(surface),scroller.addEventListener("touchstart",handleTouchStart,{passive:!0}),scroller.addEventListener("touchend",handleTouchEnd,{passive:!0}),scroller.addEventListener("touchcancel",handleTouchEnd,{passive:!0}),()=>{intersectionObserver.disconnect(),scroller.removeEventListener("touchstart",handleTouchStart),scroller.removeEventListener("touchend",handleTouchEnd),scroller.removeEventListener("touchcancel",handleTouchEnd)}},[isVisible,onClose]),useEffect(()=>{let scroller=scrollerRef.current;if(!isMounted||!scroller)return;let handleScrollerWheel=event=>{if(event.ctrlKey||0===event.deltaY)return;let direction=event.deltaY<0?-1:1;canContentTakeScroll({target:event.target,boundary:scroller,direction})||event.preventDefault()},handleScrollerKeyDown=event=>{let direction=getScrollKeyDirection({event,scroller});direction&&!canContentTakeScroll({target:event.target,boundary:scroller,direction})&&event.preventDefault()};return scroller.addEventListener("wheel",handleScrollerWheel,{passive:!1}),scroller.addEventListener("keydown",handleScrollerKeyDown),()=>{scroller.removeEventListener("wheel",handleScrollerWheel),scroller.removeEventListener("keydown",handleScrollerKeyDown)}},[isMounted]),useEffect(()=>{let scroller=scrollerRef.current,backdropFill=backdropFillRef.current;if(!isMounted||!scroller||!backdropFill||supportsScrollDrivenAnimations())return;let handleScrollerScroll=()=>{let maxScrollTop=scroller.scrollHeight-scroller.clientHeight;backdropFill.style.opacity=String(maxScrollTop>0?scroller.scrollTop/maxScrollTop:1)};return handleScrollerScroll(),scroller.addEventListener("scroll",handleScrollerScroll,{passive:!0}),()=>scroller.removeEventListener("scroll",handleScrollerScroll)},[isMounted,hasBackdrop]);let handlePostDeactivate=useCallback(()=>{onClose()},[onClose]);if(!isMounted)return null;let sheetElm=React.createElement(React.Fragment,null,React.createElement(Global,{styles:[globalStyles]}),React.createElement(StyledRoot,null,hasBackdrop&&React.createElement(StyledBackdrop,{isLeaving:isLeaving},React.createElement(StyledBackdropFill,{ref:backdropFillRef})),React.createElement(StyledFrame,{ref:frameRef},React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{clickOutsideDeactivates:dismissOnOutsideClick&&onClickOutsideDeactivates?onClickOutsideDeactivates:dismissOnOutsideClick,allowOutsideClick:!0,escapeDeactivates:!0,preventScroll:!0,initialFocus:()=>!disableInitialFocus,returnFocusOnDeactivate:!disableReturnFocusToTrigger,fallbackFocus:'[data-ds-id="Sheet"]',onPostDeactivate:handlePostDeactivate}},React.createElement(StyledScroller,{...id?{id}:{},"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Sheet",ref:scrollerRef,isLeaving:isLeaving,isSwipedAway:isSwipedAway,onAnimationEnd:onAnimationEnd,onClick:event=>{!surfaceRef.current?.contains(event.target)&&dismissOnOutsideClick&&onClose()},role:role,...ariaAttributes},React.createElement(StyledClosedSnapPoint,null),React.createElement(StyledSurface,{ref:surfaceRef},React.createElement(Container,{elevation:4},React.createElement(StyledHandleContainer,{isContentContainerScrolled:isContentContainerScrolled},React.createElement(StyledHandle,null)),React.createElement(StyledContentContainer,{ref:contentContainerRef,onScroll:()=>{setContentContainerScrolled(contentContainerRef.current?.scrollTop!==0)}},children)))))))),container=portalContainer||document?.body;return container?createPortal(sheetElm,container):null}

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

@@ -0,0 +1,26 @@
+import type { RefObject } from "react";
+/** CSS variable the scroller reads its height from */
+export declare const SHEET_HEIGHT_VAR = "--sheet-height";
+type Motion = {
+    duration: string;
+    timingFunction: string;
+};
+type UseSheetHeightSyncOptions = {
+    /** Wraps the scroller: sized to the sheet, and moved to glide height changes */
+    frameRef: RefObject<HTMLElement | null>;
+    /** Snap scroller filling the frame */
+    scrollerRef: RefObject<HTMLElement | null>;
+    /** The sheet surface inside it */
+    surfaceRef: RefObject<HTMLElement | null>;
+    isOpen: boolean;
+    resize: Motion;
+};
+/**
+ * Keeps the snap scroller sized to the sheet and parked at the open position,
+ * and glides height changes instead of jumping: the sheet takes its new size
+ * at once and a compositor transform on the frame plays its top edge from the
+ * old position into place (FLIP). The frame sits outside the scroller, where a
+ * transform can't stretch the scrollable area and upset the snap position.
+ */
+export declare function useSheetHeightSync({ frameRef, scrollerRef, surfaceRef, isOpen, resize: { duration, timingFunction }, }: UseSheetHeightSyncOptions): void;
+export {};

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

@@ -0,0 +1 @@
+import{useEffect,useLayoutEffect}from"react";import{useWindow}from"../../shared/useWindow";import{prefersReducedMotion}from"../../shared/prefersReducedMotion";export const SHEET_HEIGHT_VAR="--sheet-height";let sizeFrameToSheet=({frame,sheetHeight})=>frame.style.setProperty("--sheet-height",`${sheetHeight}px`),fitScrollerToSheet=({frame,scroller,sheetHeight})=>{sizeFrameToSheet({frame,sheetHeight}),scroller.scrollTop=scroller.scrollHeight},toMilliseconds=duration=>{let value=parseFloat(duration);return duration.trim().endsWith("ms")?value:duration.trim().endsWith("s")?1e3*value:value},getRenderedTranslateY=(element,window)=>{let{transform}=window.getComputedStyle(element);return"none"===transform?0:new DOMMatrixReadOnly(transform).m42};export function useSheetHeightSync({frameRef,scrollerRef,surfaceRef,isOpen,resize:{duration,timingFunction}}){let window=useWindow();useLayoutEffect(()=>{let frame=frameRef.current,scroller=scrollerRef.current,surface=surfaceRef.current;isOpen&&frame&&scroller&&surface&&fitScrollerToSheet({frame,scroller,sheetHeight:surface.offsetHeight})},[isOpen,frameRef,scrollerRef,surfaceRef]),useEffect(()=>{let heightAnimation,frame=frameRef.current,scroller=scrollerRef.current,surface=surfaceRef.current;if(!isOpen||!frame||!scroller||!surface||"undefined"==typeof ResizeObserver)return;let previousHeight=surface.offsetHeight,isTouching=!1,handleTouchStart=()=>{isTouching=!0,heightAnimation?.playState==="running"&&heightAnimation.pause()},handleTouchEnd=()=>{isTouching=!1,heightAnimation?.playState==="paused"&&heightAnimation.play()},resizeObserver=new ResizeObserver(()=>{let sheetHeight=surface.offsetHeight,heightDelta=sheetHeight-previousHeight;if(previousHeight=sheetHeight,0===heightDelta)return;if(isTouching)return void sizeFrameToSheet({frame,sheetHeight});let inFlightOffset=heightAnimation&&"finished"!==heightAnimation.playState?getRenderedTranslateY(frame,window):0;heightAnimation?.cancel(),fitScrollerToSheet({frame,scroller,sheetHeight}),"function"!=typeof frame.animate||prefersReducedMotion(window)||(heightAnimation=frame.animate([{transform:`translateY(${heightDelta+inFlightOffset}px)`},{transform:"none"}],{duration:toMilliseconds(duration),easing:timingFunction}))});return resizeObserver.observe(surface),scroller.addEventListener("touchstart",handleTouchStart,{passive:!0}),scroller.addEventListener("touchend",handleTouchEnd,{passive:!0}),scroller.addEventListener("touchcancel",handleTouchEnd,{passive:!0}),()=>{resizeObserver.disconnect(),heightAnimation?.cancel(),scroller.removeEventListener("touchstart",handleTouchStart),scroller.removeEventListener("touchend",handleTouchEnd),scroller.removeEventListener("touchcancel",handleTouchEnd)}},[isOpen,frameRef,scrollerRef,surfaceRef,window,duration,timingFunction])}

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

@@ -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))}
+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/SubThemeProvider/SubThemeContext.d.ts

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

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

@@ -5,4 +5,4 @@
  * trap scans for focusable elements only once, on activation, and elements
  * under a `visibility: hidden` ancestor never count as focusable.
  */
-export declare const FloatingPositionedContext: React.Context<boolean>;
+export declare const FloatingPositionedContext: import("react").Context<boolean>;

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

@@ -1 +1 @@
-import React,{createContext,useMemo,forwardRef}from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import{useResponsiveStyles}from"../../../shared/mediaQueries";export const TextContext=createContext(null);export const getTextLineHeight=({theme,size})=>({xxs:theme.variables.size.lineHeight.m,xs:theme.variables.size.lineHeight.m,s:theme.variables.size.lineHeight.l,m:theme.variables.size.lineHeight.xl,l:theme.variables.size.lineHeight.xl})[size];export const getTextFontSize=({theme,size})=>theme.variables.size.font[size];let StyledText=styled("p",{shouldForwardProp:prop=>isPropValid(prop)&&"color"!==prop&&"transform"!==prop,target:"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))});
+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/ContainerQuery/ContainerQueryContext.d.ts

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