npm - @amboss/design-system - Versions diffs - 4.9.0 → 4.9.2 - Mend

@amboss/design-system 4.9.0 → 4.9.2

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

Files changed (84) hide show

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

@@ -1,20 +1,7 @@
-import type { LayoutPanelsMode, LayoutState, LayoutStorage, LayoutStore } from "./-types";
+import type { LayoutState, LayoutStorage, LayoutStore } from "./-types";
 export declare const LayoutStoreProvider: React.Provider<LayoutStore | null>;
 /** Get the store from context, or throw if used outside the provider. */
 export declare function useLayoutStore(): LayoutStore;
-export declare const LayoutPanelsEnabledProvider: React.Provider<LayoutPanelsMode>;
-/** The panels mode from the nearest `Layout.Provider`'s
- *  `config.enablePanels`; `false` when unset. */
-export declare function useLayoutPanelsEnabled(): LayoutPanelsMode;
-/** TEMPORARY - part of the `enablePanels` kill switch for the staged panels
- *  rollout; remove (together with `LayoutPanelsMode`) once panels are enabled
- *  everywhere.
- *
- *  Whether the calling panel marker may render for the current viewport:
- *  mode `true` always allows; `"mobile"` allows only below the mobile
- *  breakpoint (the overlay presentations - drawer/sheet - which never mount
- *  the resizable row); `false` never allows. */
-export declare function useCanRenderPanel(): boolean;
 /**
  * Persistence config for the layout namespace. Set on `Layout.Provider` (single
  * external surface) and read by the nested `<Layout>`. The Provider only

package/build/esm/components/Layout/context.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{createContext,useContext,useSyncExternalStore}from"react";~~import{useBreakpoints}from"../../shared/useBreakpoints";~~let LayoutStoreContext=createContext(null);export const LayoutStoreProvider=LayoutStoreContext.Provider;export function useLayoutStore(){let store=useContext(LayoutStoreContext);if(!store)throw Error("useLayout must be used within a <LayoutProvider>.");return store}let LayoutPanelsEnabledContext=createContext(!1);export const LayoutPanelsEnabledProvider=LayoutPanelsEnabledContext.Provider;export function useLayoutPanelsEnabled(){return useContext(LayoutPanelsEnabledContext)}export function useCanRenderPanel(){let mode=useLayoutPanelsEnabled(),{isMobile}=useBreakpoints();return!0===mode\|\|"mobile"===mode&&isMobile}let LayoutPersistenceContext=createContext({});export const LayoutPersistenceProvider=LayoutPersistenceContext.Provider;export function useLayoutPersistence(){return useContext(LayoutPersistenceContext)}export function useLayoutSelector(selector){let store=useLayoutStore(),getSnapshot=()=>selector(store.getState());return useSyncExternalStore(store.subscribe,getSnapshot,getSnapshot)}
1	+ import{createContext,useContext,useSyncExternalStore}from"react";let LayoutStoreContext=createContext(null);export const LayoutStoreProvider=LayoutStoreContext.Provider;export function useLayoutStore(){let store=useContext(LayoutStoreContext);if(!store)throw Error("useLayout must be used within a <LayoutProvider>.");return store}let LayoutPersistenceContext=createContext({});export const LayoutPersistenceProvider=LayoutPersistenceContext.Provider;export function useLayoutPersistence(){return useContext(LayoutPersistenceContext)}export function useLayoutSelector(selector){let store=useLayoutStore(),getSnapshot=()=>selector(store.getState());return useSyncExternalStore(store.subscribe,getSnapshot,getSnapshot)}

package/build/esm/components/Layout/reducer.js CHANGED Viewed

	@@ -1 +1 @@
1	- function sidePanelFields(config={}){return{kind:"sidePanel",visible:config.defaultVisible??!0,collapsible:config.collapsible??!0,resizable:config.resizable??!0,size:config.defaultSize~~,minSize:config.minSize,maxSize:config.maxSize~~}}function panelState(config={}){return{kind:"panel",visible:config.defaultVisible??!0,size:config.defaultSize~~,minSize:config.minSize,maxSize:config.maxSize~~}}export function createInitialState(config={}){return{leftPanel:{...sidePanelFields({...config.leftPanel,resizable:!1}),variant:config.leftPanel?.variant},rightPanel:{...sidePanelFields({defaultVisible:!1,...config.rightPanel}),variant:config.rightPanel?.variant},content:panelState(config.content),splitview:panelState({defaultVisible:!1,...config.splitview})}}export const layoutReducer=(state,action,initial)=>{switch(action.type){case"setVisible":{let slot=state[action.slot];if(slot.visible===action.visible)return state;return{...state,[action.slot]:{...slot,visible:action.visible}}}case"setVariant":{let panel=state[action.panel];if(panel.variant===action.variant)return state;return{...state,[action.panel]:{...panel,variant:action.variant}}}case"resize":{let slot=state[action.slot];if(slot.size===action.size)return state;return{...state,[action.slot]:{...slot,size:action.size}}}case"reset":if(!initial)return state;if(!action.slot)return initial;if(state[action.slot]===initial[action.slot])return state;return{...state,[action.slot]:initial[action.slot]};default:return state}};
1	+ function sidePanelFields(config={}){return{kind:"sidePanel",visible:config.defaultVisible??!0,collapsible:config.collapsible??!0,resizable:config.resizable??!0,size:config.defaultSize}}function panelState(config={}){return{kind:"panel",visible:config.defaultVisible??!0,size:config.defaultSize}}export function createInitialState(config={}){return{leftPanel:{...sidePanelFields({...config.leftPanel,resizable:!1}),variant:config.leftPanel?.variant},rightPanel:{...sidePanelFields({defaultVisible:!1,...config.rightPanel}),variant:config.rightPanel?.variant},content:panelState(config.content),splitview:panelState({defaultVisible:!1,...config.splitview})}}export const layoutReducer=(state,action,initial)=>{switch(action.type){case"setVisible":{let slot=state[action.slot];if(slot.visible===action.visible)return state;return{...state,[action.slot]:{...slot,visible:action.visible}}}case"setVariant":{let panel=state[action.panel];if(panel.variant===action.variant)return state;return{...state,[action.panel]:{...panel,variant:action.variant}}}case"resize":{let slot=state[action.slot];if(slot.size===action.size)return state;return{...state,[action.slot]:{...slot,size:action.size}}}case"reset":if(!initial)return state;if(!action.slot)return initial;if(state[action.slot]===initial[action.slot])return state;return{...state,[action.slot]:initial[action.slot]};default:return state}};

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

@@ -2,7 +2,7 @@ import { type ReactNode } from "react";
 import type { PanelImperativeHandle } from "react-resizable-panels";
 import type { RightPanelVariant, Size, SlotKey } from "./-types";
 export type PortalTargets = Partial<Record<SlotKey, HTMLElement | null>>;
-export declare const LayoutPortalContext: React.Context<Partial<Record<"content" | "leftPanel" | "splitview" | "rightPanel", HTMLElement | null>>>;
+export declare const LayoutPortalContext: React.Context<Partial<Record<"content" | "leftPanel" | "rightPanel" | "splitview", HTMLElement | null>>>;
 /**
  * Portal `children` into the host DOM node registered for `slot`. Returns the
  * portal (or `null` if the host isn't mounted yet). Call unconditionally -
@@ -39,7 +39,7 @@ export declare const PanelRegistryContext: React.Context<PanelRegistry | null>;
 /** Register this slot as a panel for the marker's lifetime. */
 export declare function useDeclarePanel(slot: SlotKey, reg: PanelReg): void;
 export type PanelDeclarations = Partial<Record<SlotKey, PanelReg>>;
-export declare const PanelDeclarationsContext: React.Context<Partial<Record<"content" | "leftPanel" | "splitview" | "rightPanel", PanelReg>>>;
+export declare const PanelDeclarationsContext: 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

package/build/esm/components/Layout/registry.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{createContext,useContext,useEffect,useLayoutEffect,useRef}from"react";import{createPortal}from"react-dom";~~import{Slot}from"./-constants";import{useLayoutPanelsEnabled}from"./context";~~export const LayoutPortalContext=createContext({});export function useLayoutPortal(slot,children){let slotNode=useContext(LayoutPortalContext)[slot]??null;return slotNode?createPortal(children,slotNode):null}export const PanelRegistryContext=createContext(null);export function useDeclarePanel(slot,reg){let registry=useContext(PanelRegistryContext),~~declarationEnabled=!0===useLayoutPanelsEnabled()\|\|slot===Slot.content,~~{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}=reg;useLayoutEffect(()=>{if(registry~~&&declarationEnabled~~)return registry.register(slot,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}),()=>registry.unregister(slot)},[registry,~~declarationEnabled,~~slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant])}export const PanelDeclarationsContext=createContext({});export const PanelRowContext=createContext("");export const usePanelRow=()=>useContext(PanelRowContext);export const PanelPresenceContext=createContext(null);export function usePanelPresence(slot,isPresent){let presence=useContext(PanelPresenceContext);useLayoutEffect(()=>{if(presence)return presence.setPresent(slot,isPresent),()=>presence.setPresent(slot,!1)},[presence,slot,isPresent])}export const PanelAnimationContext=createContext(null);export function usePanelAnimationControl(){return useContext(PanelAnimationContext)}export function useRunCallbackOnValueChange(value,onChange){let prev=useRef(value);useEffect(()=>{prev.current!==value&&(prev.current=value,onChange?.(value))},[value,onChange])}export function useVisibleChange(visible,onChange){useRunCallbackOnValueChange(visible,onChange)}
1	+ import{createContext,useContext,useEffect,useLayoutEffect,useRef}from"react";import{createPortal}from"react-dom";export const LayoutPortalContext=createContext({});export function useLayoutPortal(slot,children){let slotNode=useContext(LayoutPortalContext)[slot]??null;return slotNode?createPortal(children,slotNode):null}export const PanelRegistryContext=createContext(null);export function useDeclarePanel(slot,reg){let registry=useContext(PanelRegistryContext),{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}=reg;useLayoutEffect(()=>{if(registry)return registry.register(slot,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}),()=>registry.unregister(slot)},[registry,slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant])}export const PanelDeclarationsContext=createContext({});export const PanelRowContext=createContext("");export const usePanelRow=()=>useContext(PanelRowContext);export const PanelPresenceContext=createContext(null);export function usePanelPresence(slot,isPresent){let presence=useContext(PanelPresenceContext);useLayoutEffect(()=>{if(presence)return presence.setPresent(slot,isPresent),()=>presence.setPresent(slot,!1)},[presence,slot,isPresent])}export const PanelAnimationContext=createContext(null);export function usePanelAnimationControl(){return useContext(PanelAnimationContext)}export function useRunCallbackOnValueChange(value,onChange){let prev=useRef(value);useEffect(()=>{prev.current!==value&&(prev.current=value,onChange?.(value))},[value,onChange])}export function useVisibleChange(visible,onChange){useRunCallbackOnValueChange(visible,onChange)}

package/build/esm/components/Layout/usePanelDockedSlide.d.ts CHANGED Viewed

@@ -1,5 +1,14 @@
 import type { SidePanelKey } from "./-constants";
 import type { Size } from "./-types";
+type SlidePhase = "idle" | "entering" | "exiting";
+type GetMaxSizeOptions = {
+    collapsedSize?: Size;
+    isVisible: boolean;
+    maxSize?: Size;
+    openSize?: Size;
+    phase: SlidePhase;
+};
+export declare const getMaxSize: ({ collapsedSize, isVisible, maxSize, openSize, phase, }: GetMaxSizeOptions) => Size | undefined;
 export type PanelDockedSlideOptions = {
     /** Which side-panel slot this animates. */
     slot: SidePanelKey;
@@ -38,3 +47,4 @@ export type PanelDockedSlide = {
  * {@link useExitAnimation} and the Drawer's styled components.
  */
 export declare function usePanelDockedSlide({ slot, defaultSize, minSize, maxSize, collapsible, resizable, lockWidthOnWindowResize, collapsedSize, }: PanelDockedSlideOptions): PanelDockedSlide;
+export {};

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

	@@ -1 +1 @@
1	- import{useLayoutEffect,useRef,useState}from"react";import{useTheme}from"@emotion/react";import{useWindow}from"../../shared/useWindow";import{prefersReducedMotion}from"../../shared/prefersReducedMotion";import{useDeclarePanel,usePanelAnimationControl,usePanelPresence,usePanelRow}from"./registry";import{useLayout}from"./useLayout";let ~~parseDurationMs=duration=>{let trimmed=duration.trim();return trimmed.endsWith("ms")?parseFloat(trimmed):trimmed.endsWith("s")?1e3parseFloat(trimmed):parseFloat(trimmed)\|\|0},~~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/100groupWidthPx: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 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,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)},~~waitsForRelaxedMinimum="exiting"===phase&&hasCollapsedRest,~~waitForColumn=attempt=>{if(cancelled)return;if(0===attempt&&~~waitsForRelaxedMinimum~~){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}}
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}}

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

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

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

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

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

@@ -1,13 +1,21 @@
 import React from "react";
 import type { SubThemeTypes } from "../../web-tokens/_subThemeType";
+import type { VisualConfig } from "../../web-tokens/visualConfig";
 export type SubThemeName = SubThemeTypes | "unset";
+type DeepPartial<T> = {
+    [P in keyof T]?: DeepPartial<T[P]>;
+};
+/** Partial semantic theme values, using resolved values rather than token references. */
+export type SubThemeOverrides = DeepPartial<Omit<VisualConfig["values"], "subThemes">>;
 type BaseProps = {
-    /** Sub-theme to apply. Omitted (or `undefined`) leaves the parent theme untouched. */
+    /** Sub-theme to apply before overrides. Omitted (or `undefined`) inherits the parent theme. */
     name?: SubThemeName;
+    /** Local semantic values, deeply merged over the inherited or named sub-theme. */
+    overrides?: SubThemeOverrides;
     as?: "div";
     "data-e2e-test-id"?: string;
     children: React.ReactNode[] | React.ReactNode;
 };
 export type SubThemeProviderProps = BaseProps;
-export declare function SubThemeProvider({ name, children, as, "data-e2e-test-id": dataE2eTestId, }: SubThemeProviderProps): React.ReactElement;
+export declare function SubThemeProvider({ name, overrides, children, as, "data-e2e-test-id": dataE2eTestId, }: SubThemeProviderProps): React.ReactElement;
 export {};

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

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

package/build/esm/components/Tooltip/BaseTooltip.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{useFocusVisible}from"@react-aria/interactions";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{TooltipContent}from"./TooltipContent";export function BaseTooltip({placement="auto",content,children,externalTriggerRef,portalContainer,contentPadding,maxWidth,subTheme,"data-e2e-test-id":dataE2eTestId,onVisibilityChange,privateProps,...ariaAttributes}){let tooltipId=useMemo(()=>`DSTooltip_${Math.floor(Date.now()*Math.random())}`,[]),{isFocusVisible}=useFocusVisible(),[isVisible,setVisible]=useState(!1),triggeredByEvent=useRef(null),isTooltipHovered=useRef(!1),isTriggerHovered=useRef(!1),hideTooltipTimeoutId=useRef(null),showTooltipTimeoutId=useRef(null),internalTriggerRef=useRef(null),triggerRef=externalTriggerRef\|\|internalTriggerRef,toggleVisibility=useCallback(status=>{setVisible(status),onVisibilityChange&&onVisibilityChange(status)},[onVisibilityChange]),handleTriggerPointerEnter=useCallback(()=>{isTriggerHovered.current=!0,isTooltipHovered.current\|\|(clearTimeout(showTooltipTimeoutId.current)~~,showTooltipTimeoutId.current~~=~~setTimeout~~(()=>{~~isTriggerHovered.current&&(~~triggeredByEvent.current="hover",toggleVisibility(!0))},~~200~~))},[toggleVisibility]),~~handleTriggerPointerLeave~~=useCallback(()=>{~~isTriggerHovered.current=!1,~~clearTimeout(hideTooltipTimeoutId.current),hideTooltipTimeoutId.current=setTimeout(()=>{isTooltipHovered.current\|\|"hover"!==triggeredByEvent.current\|\|isTriggerHovered.current\|\|toggleVisibility(!1)},~~200~~)},[toggleVisibility]),handleTriggerFocus=useCallback(()=>{isFocusVisible&&(triggeredByEvent.current="focus",toggleVisibility(!0))},[isFocusVisible,toggleVisibility]),handleTriggerBlur=useCallback(()=>{"focus"===triggeredByEvent.current&&toggleVisibility(!1)},[toggleVisibility]),handleTriggerClick=useCallback(()=>{toggleVisibility(!1)},[toggleVisibility]),handleTriggerKeyDown=useCallback(evt=>{"Escape"===evt.key&&toggleVisibility(!1)},[toggleVisibility]);useEffect(()=>()=>{clearTimeout(showTooltipTimeoutId.current),clearTimeout(hideTooltipTimeoutId.current)},[]),useEffect(()=>{let trigger;if(externalTriggerRef?.current&&!children){let triggerTabIndex=(trigger=externalTriggerRef.current).getAttribute("tabindex");trigger.setAttribute("tabindex",triggerTabIndex??"0"),trigger.addEventListener("pointerenter",handleTriggerPointerEnter),trigger.addEventListener("pointerleave",handleTriggerPointerLeave),trigger.addEventListener("focus",handleTriggerFocus),trigger.addEventListener("blur",handleTriggerBlur),trigger.addEventListener("click",handleTriggerClick),trigger.addEventListener("keydown",handleTriggerKeyDown)}return()=>{trigger&&(trigger.removeEventListener("pointerenter",handleTriggerPointerEnter),trigger.removeEventListener("pointerleave",handleTriggerPointerLeave),trigger.removeEventListener("focus",handleTriggerFocus),trigger.removeEventListener("blur",handleTriggerBlur),trigger.removeEventListener("click",handleTriggerClick),trigger.removeEventListener("keydown",handleTriggerKeyDown))}},[externalTriggerRef,children,handleTriggerPointerEnter,handleTriggerPointerLeave,handleTriggerFocus,handleTriggerBlur,handleTriggerClick,handleTriggerKeyDown]),useEffect(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current;isVisible?trigger.setAttribute("aria-describedby",tooltipId):trigger.removeAttribute("aria-describedby")}},[externalTriggerRef,children,tooltipId,isVisible]);let triggerElm=children?React.cloneElement(children,{ref:triggerRef,...ariaAttributes,...isVisible&&{"aria-describedby":tooltipId},tabIndex:children.props.tabIndex??0,onPointerEnter:handleTriggerPointerEnter,onPointerLeave:handleTriggerPointerLeave,onFocus:evt=>{handleTriggerFocus(),children.props.onFocus&&children.props.onFocus(evt)},onBlur:evt=>{handleTriggerBlur(),children.props.onBlur&&children.props.onBlur(evt)},onClick:evt=>{handleTriggerClick(),children.props.onClick&&children.props.onClick(evt)},onKeyDown:handleTriggerKeyDown}):null,tooltipElm=React.createElement(TooltipContent,{dataDSId:"Tooltip",content:content,placement:placement,portalContainer:portalContainer,dataE2eTestId:dataE2eTestId,isVisible:isVisible,tooltipId:tooltipId,triggerRef:triggerRef,role:"tooltip",contentPadding:contentPadding,maxWidth:maxWidth,subTheme:subTheme,onTooltipPointerEnter:()=>{isTooltipHovered.current=!0},onTooltipPointerLeave:()=>{isTooltipHovered.current=!1,~~"hover"===triggeredByEvent.current&&toggleVisibility~~(!1)},privateProps:privateProps});return React.createElement(React.Fragment,null,triggerElm,tooltipElm)}
1	+ import{useFocusVisible}from"@react-aria/interactions";import{useTheme}from"@emotion/react";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{parseDurationMs}from"../../shared/parseDurationMs";import{TooltipContent}from"./TooltipContent";let openTooltip=null,lastHiddenInstance=null,lastTooltipHideTimestamp=0,isOpenTooltip=instance=>openTooltip?.instance===instance,canReplacePreviousTooltip=(instance,replaceWindow)=>openTooltip?openTooltip.isReplaceable():lastHiddenInstance!==instance&&Date.now()-lastTooltipHideTimestamp<replaceWindow;export function BaseTooltip({placement="auto",content,children,externalTriggerRef,portalContainer,contentPadding,maxWidth,subTheme,"data-e2e-test-id":dataE2eTestId,onVisibilityChange,privateProps,...ariaAttributes}){let tooltipId=useMemo(()=>`DSTooltip_${Math.floor(Date.now()*Math.random())}`,[]),{isFocusVisible}=useFocusVisible(),{open:openMotion,close:closeMotion,replace:replaceMotion}=useTheme().variables.animation.tooltip,showDelay=parseDurationMs(openMotion.delay),hideDelay=parseDurationMs(closeMotion.delay),replaceWindow=parseDurationMs(replaceMotion.window),instanceRef=useRef({}),[isVisible,setVisible]=useState(!1),[openedAsReplacement,setOpenedAsReplacement]=useState(!1),triggeredByEvent=useRef(null),isTooltipHovered=useRef(!1),isTriggerHovered=useRef(!1),hideTooltipTimeoutId=useRef(null),showTooltipTimeoutId=useRef(null),internalTriggerRef=useRef(null),triggerRef=externalTriggerRef\|\|internalTriggerRef,toggleVisibility=useCallback(status=>{setVisible(status),status\|\|setOpenedAsReplacement(!1),onVisibilityChange&&onVisibilityChange(status)},[onVisibilityChange]),handleTriggerPointerEnter=useCallback(()=>{if(isTriggerHovered.current=!0,!isTooltipHovered.current&&!isOpenTooltip(instanceRef.current)){clearTimeout(showTooltipTimeoutId.current);let showOnHover=()=>{triggeredByEvent.current="hover",toggleVisibility(!0)};if(canReplacePreviousTooltip(instanceRef.current,replaceWindow)){openTooltip?.hide(),setOpenedAsReplacement(!0),showOnHover();return}showTooltipTimeoutId.current=setTimeout(()=>{isTriggerHovered.current&&showOnHover()},showDelay)}},[toggleVisibility,showDelay,replaceWindow]),scheduleHoverHide=useCallback(()=>{clearTimeout(hideTooltipTimeoutId.current),hideTooltipTimeoutId.current=setTimeout(()=>{isTooltipHovered.current\|\|"hover"!==triggeredByEvent.current\|\|isTriggerHovered.current\|\|toggleVisibility(!1)},hideDelay)},[toggleVisibility,hideDelay]),handleTriggerPointerLeave=useCallback(()=>{isTriggerHovered.current=!1,scheduleHoverHide()},[scheduleHoverHide]),handleTriggerFocus=useCallback(()=>{isFocusVisible&&(triggeredByEvent.current="focus",toggleVisibility(!0))},[isFocusVisible,toggleVisibility]),handleTriggerBlur=useCallback(()=>{"focus"===triggeredByEvent.current&&toggleVisibility(!1)},[toggleVisibility]),handleTriggerClick=useCallback(()=>{toggleVisibility(!1)},[toggleVisibility]),handleTriggerKeyDown=useCallback(evt=>{"Escape"===evt.key&&toggleVisibility(!1)},[toggleVisibility]),toggleVisibilityRef=useRef(toggleVisibility);useEffect(()=>{toggleVisibilityRef.current=toggleVisibility},[toggleVisibility]),useEffect(()=>{if(!isVisible)return;let openedTooltip={instance:instanceRef.current,hide:()=>{clearTimeout(hideTooltipTimeoutId.current),toggleVisibilityRef.current(!1)},isReplaceable:()=>"hover"===triggeredByEvent.current};return openTooltip=openedTooltip,()=>{openTooltip===openedTooltip&&(openTooltip=null),lastHiddenInstance=openedTooltip.instance,lastTooltipHideTimestamp=Date.now()}},[isVisible]),useEffect(()=>()=>{clearTimeout(showTooltipTimeoutId.current),clearTimeout(hideTooltipTimeoutId.current)},[]),useEffect(()=>{let trigger;if(externalTriggerRef?.current&&!children){let triggerTabIndex=(trigger=externalTriggerRef.current).getAttribute("tabindex");trigger.setAttribute("tabindex",triggerTabIndex??"0"),trigger.addEventListener("pointerenter",handleTriggerPointerEnter),trigger.addEventListener("pointerleave",handleTriggerPointerLeave),trigger.addEventListener("focus",handleTriggerFocus),trigger.addEventListener("blur",handleTriggerBlur),trigger.addEventListener("click",handleTriggerClick),trigger.addEventListener("keydown",handleTriggerKeyDown)}return()=>{trigger&&(trigger.removeEventListener("pointerenter",handleTriggerPointerEnter),trigger.removeEventListener("pointerleave",handleTriggerPointerLeave),trigger.removeEventListener("focus",handleTriggerFocus),trigger.removeEventListener("blur",handleTriggerBlur),trigger.removeEventListener("click",handleTriggerClick),trigger.removeEventListener("keydown",handleTriggerKeyDown))}},[externalTriggerRef,children,handleTriggerPointerEnter,handleTriggerPointerLeave,handleTriggerFocus,handleTriggerBlur,handleTriggerClick,handleTriggerKeyDown]),useEffect(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current;isVisible?trigger.setAttribute("aria-describedby",tooltipId):trigger.removeAttribute("aria-describedby")}},[externalTriggerRef,children,tooltipId,isVisible]);let triggerElm=children?React.cloneElement(children,{ref:triggerRef,...ariaAttributes,...isVisible&&{"aria-describedby":tooltipId},tabIndex:children.props.tabIndex??0,onPointerEnter:handleTriggerPointerEnter,onPointerLeave:handleTriggerPointerLeave,onFocus:evt=>{handleTriggerFocus(),children.props.onFocus&&children.props.onFocus(evt)},onBlur:evt=>{handleTriggerBlur(),children.props.onBlur&&children.props.onBlur(evt)},onClick:evt=>{handleTriggerClick(),children.props.onClick&&children.props.onClick(evt)},onKeyDown:handleTriggerKeyDown}):null,tooltipElm=React.createElement(TooltipContent,{dataDSId:"Tooltip",content:content,placement:placement,portalContainer:portalContainer,dataE2eTestId:dataE2eTestId,isVisible:isVisible,skipOpenAnimation:openedAsReplacement,hasHoverBridge:!0,tooltipId:tooltipId,triggerRef:triggerRef,role:"tooltip",contentPadding:contentPadding,maxWidth:maxWidth,subTheme:subTheme,onTooltipPointerEnter:()=>{isTooltipHovered.current=!0},onTooltipPointerLeave:()=>{isTooltipHovered.current=!1,scheduleHoverHide()},privateProps:privateProps});return React.createElement(React.Fragment,null,triggerElm,tooltipElm)}

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

@@ -45,6 +45,18 @@ export type TooltipContentProps = {
     hideArrow?: boolean;
     /** Sets css visibility hidden when trigger is scrolled out of view */
     isHiddenOnInvisibleTrigger?: boolean;
+    /**
+     * @internal
+     * Appears without its open animation, when this tooltip replaces one already
+     * on screen. Defaults to `false`.
+     */
+    skipOpenAnimation?: boolean;
+    /**
+     * @internal
+     * Covers the gap to the trigger with an invisible hover area, so a hover
+     * tooltip survives the pointer moving onto it. Defaults to `false`.
+     */
+    hasHoverBridge?: boolean;
     onTooltipPointerEnter?: React.PointerEventHandler<HTMLDivElement>;
     onTooltipPointerLeave?: React.PointerEventHandler<HTMLDivElement>;
     /** This callback is triggered when content overflows the viewport both above and below trigger. Use this for tracking purposes or re-rendering Popover with a larger maxWidth */
@@ -52,4 +64,4 @@ export type TooltipContentProps = {
     privateProps?: TooltipPrivateProps;
 } & Pick<PortalProps, "portalContainer"> & AriaAttributes;
 /** This component is used to display the overlay for both Toggletip and Tooltip components */
-export declare function TooltipContent({ placement, content, tooltipId, triggerRef, portalContainer, dataE2eTestId, dataDSId, isVisible, "aria-hidden": ariaHidden, role, tabIndex, contentPadding, maxWidth, subTheme, defaultVerticalPlacement, hideArrow, isHiddenOnInvisibleTrigger, onTooltipPointerEnter, onTooltipPointerLeave, onOverflowViewport, privateProps, ...ariaAttributes }: TooltipContentProps): React.ReactElement | null;
+export declare function TooltipContent({ placement, content, tooltipId, triggerRef, portalContainer, dataE2eTestId, dataDSId, isVisible, "aria-hidden": ariaHidden, role, tabIndex, contentPadding, maxWidth, subTheme, defaultVerticalPlacement, hideArrow, isHiddenOnInvisibleTrigger, skipOpenAnimation, hasHoverBridge, onTooltipPointerEnter, onTooltipPointerLeave, onOverflowViewport, privateProps, ...ariaAttributes }: TooltipContentProps): React.ReactElement | null;

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

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

package/build/esm/components/Tooltip/utils.d.ts CHANGED Viewed

@@ -2,7 +2,6 @@ import type { OffsetOptions } from "@floating-ui/react-dom";
 import type { Middleware, Placement, VirtualElement } from "../Utilities/FloatingPosition/useFloatingPosition";
 import type { TooltipContentProps, TooltipPlacement, TooltipPrivateProps, TooltipVerticalPlacement } from "./TooltipContent";
 export declare const DISTANCE_FROM_TRIGGER = 4;
-export declare const ANIMATION_DISTANCE = 8;
 export declare const ARROW_SIZE = 6;
 export declare const ARROW_SIZE_BIG = 8;
 /** TODO: remove temporary side placement. Matches the gap top/bottom tooltips settle at. */

package/build/esm/components/Tooltip/utils.js CHANGED Viewed

	@@ -1 +1 @@
1	- export const DISTANCE_FROM_TRIGGER=4;export const ~~ANIMATION_DISTANCE=8;export const~~ ARROW_SIZE=6;export const ARROW_SIZE_BIG=8;export const sidePlacementOffset=10;export const getArrowOffset=size=>2*size;let START_SUFFIX="-start",END_SUFFIX="-end",SIDE_PLACEMENT="right-start",DS_TO_FLOATING_PLACEMENT={top:"top",bottom:"bottom","top-left":`top${END_SUFFIX}`,"top-right":`top${START_SUFFIX}`,"bottom-left":`bottom${END_SUFFIX}`,"bottom-right":`bottom${START_SUFFIX}`},OPPOSITE_SIDE={top:"bottom",bottom:"top"},sideWithAlignments=side=>[side,`${side}${START_SUFFIX}`,`${side}${END_SUFFIX}`];export const toFloatingPlacement=({placement,defaultVerticalPlacement,sidePlacement})=>{let isAutomatic=!placement\|\|"auto"===placement,preferred=isAutomatic?defaultVerticalPlacement??"top":DS_TO_FLOATING_PLACEMENT[placement],[side,alignment]=preferred.split("-"),oppositeSide=OPPOSITE_SIDE[side],resolved=isAutomatic?{placement:preferred,fallbackPlacements:[...sideWithAlignments(side).slice(1),...sideWithAlignments(oppositeSide)]}:{placement:preferred,fallbackPlacements:[alignment?`${oppositeSide}-${alignment}`:oppositeSide]};return"right-top"===sidePlacement?{placement:SIDE_PLACEMENT,fallbackPlacements:[resolved.placement,...resolved.fallbackPlacements]}:resolved};export const SIDE_PLACEMENT_SIDE="right";export const getPlacementSide=placement=>placement.split("-")[0];export const getTooltipOffsetOptions=({arrowSize,sideOffset})=>({rects,placement})=>{if(placement===SIDE_PLACEMENT)return{mainAxis:sideOffset};let mainAxis=arrowSize+4;return(placement.endsWith(START_SUFFIX)\|\|placement.endsWith(END_SUFFIX))&&0!==arrowSize?{mainAxis,alignmentAxis:rects.reference.width/2-getArrowOffset(arrowSize)-arrowSize}:{mainAxis}};export const createOverflowViewportReporter=onOverflowViewport=>({name:"reportOverflowViewport",fn({elements}){let triggerRect=elements.reference.getBoundingClientRect(),tooltipRect=elements.floating.getBoundingClientRect(),viewportHeight=elements.floating.ownerDocument.documentElement.clientHeight,canPlaceAboveTrigger=triggerRect.top>=tooltipRect.height,canPlaceBelowTrigger=triggerRect.bottom+tooltipRect.height<viewportHeight;return canPlaceAboveTrigger\|\|canPlaceBelowTrigger\|\|onOverflowViewport(triggerRect,tooltipRect,viewportHeight),{}}});export const toFloatingAnchor=trigger=>{if(!trigger)return null;if("undefined"!=typeof Range&&trigger instanceof Range){let container=trigger.commonAncestorContainer;return{getBoundingClientRect:()=>trigger.getBoundingClientRect(),getClientRects:()=>trigger.getClientRects(),contextElement:container instanceof Element?container:container.parentElement??void 0}}return trigger};
1	+ export const DISTANCE_FROM_TRIGGER=4;export const ARROW_SIZE=6;export const ARROW_SIZE_BIG=8;export const sidePlacementOffset=10;export const getArrowOffset=size=>2*size;let START_SUFFIX="-start",END_SUFFIX="-end",SIDE_PLACEMENT="right-start",DS_TO_FLOATING_PLACEMENT={top:"top",bottom:"bottom","top-left":`top${END_SUFFIX}`,"top-right":`top${START_SUFFIX}`,"bottom-left":`bottom${END_SUFFIX}`,"bottom-right":`bottom${START_SUFFIX}`},OPPOSITE_SIDE={top:"bottom",bottom:"top"},sideWithAlignments=side=>[side,`${side}${START_SUFFIX}`,`${side}${END_SUFFIX}`];export const toFloatingPlacement=({placement,defaultVerticalPlacement,sidePlacement})=>{let isAutomatic=!placement\|\|"auto"===placement,preferred=isAutomatic?defaultVerticalPlacement??"top":DS_TO_FLOATING_PLACEMENT[placement],[side,alignment]=preferred.split("-"),oppositeSide=OPPOSITE_SIDE[side],resolved=isAutomatic?{placement:preferred,fallbackPlacements:[...sideWithAlignments(side).slice(1),...sideWithAlignments(oppositeSide)]}:{placement:preferred,fallbackPlacements:[alignment?`${oppositeSide}-${alignment}`:oppositeSide]};return"right-top"===sidePlacement?{placement:SIDE_PLACEMENT,fallbackPlacements:[resolved.placement,...resolved.fallbackPlacements]}:resolved};export const SIDE_PLACEMENT_SIDE="right";export const getPlacementSide=placement=>placement.split("-")[0];export const getTooltipOffsetOptions=({arrowSize,sideOffset})=>({rects,placement})=>{if(placement===SIDE_PLACEMENT)return{mainAxis:sideOffset};let mainAxis=arrowSize+4;return(placement.endsWith(START_SUFFIX)\|\|placement.endsWith(END_SUFFIX))&&0!==arrowSize?{mainAxis,alignmentAxis:rects.reference.width/2-getArrowOffset(arrowSize)-arrowSize}:{mainAxis}};export const createOverflowViewportReporter=onOverflowViewport=>({name:"reportOverflowViewport",fn({elements}){let triggerRect=elements.reference.getBoundingClientRect(),tooltipRect=elements.floating.getBoundingClientRect(),viewportHeight=elements.floating.ownerDocument.documentElement.clientHeight,canPlaceAboveTrigger=triggerRect.top>=tooltipRect.height,canPlaceBelowTrigger=triggerRect.bottom+tooltipRect.height<viewportHeight;return canPlaceAboveTrigger\|\|canPlaceBelowTrigger\|\|onOverflowViewport(triggerRect,tooltipRect,viewportHeight),{}}});export const toFloatingAnchor=trigger=>{if(!trigger)return null;if("undefined"!=typeof Range&&trigger instanceof Range){let container=trigger.commonAncestorContainer;return{getBoundingClientRect:()=>trigger.getBoundingClientRect(),getClientRects:()=>trigger.getClientRects(),contextElement:container instanceof Element?container:container.parentElement??void 0}}return trigger};

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

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

package/build/esm/shared/parseDurationMs.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ /** Turns a CSS duration token (`"150ms"`, `"0.3s"`) into the number a timer needs. */
2	+ export declare const parseDurationMs: (duration: string) => number;

package/build/esm/shared/parseDurationMs.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export const parseDurationMs=duration=>{let trimmed=duration.trim();return trimmed.endsWith("ms")?parseFloat(trimmed):trimmed.endsWith("s")?1e3*parseFloat(trimmed):parseFloat(trimmed)\|\|0};

package/build/esm/web-tokens/assets/icons.json CHANGED Viewed

@@ -70,7 +70,6 @@
   "credit-card": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\" focusable=\"false\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M3 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h18a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zm19 6V6a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v3zM2 11h20v7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z\" clip-rule=\"evenodd\"/></svg>",
   "cursor-default": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\" focusable=\"false\"><path fill-rule=\"evenodd\" d=\"M1.293 2.293a1 1 0 0 0-.197 1.135l9 19a1 1 0 0 0 1.874-.186l1.855-7.417 7.418-1.855a1 1 0 0 0 .185-1.874l-19-9a1 1 0 0 0-1.135.197m16.754 9.415-5.29 1.322a1 1 0 0 0-.727.728l-1.322 5.289L4.102 5.102z\" clip-rule=\"evenodd\"/></svg>",
   "cursor-text": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"M16 1a1 1 0 1 1 0 2 3 3 0 0 0-3 3v5h2a1 1 0 1 1 0 2h-2v5.494A2.506 2.506 0 0 0 15.506 21a1 1 0 0 1 0 2A4.5 4.5 0 0 1 12 21.322 4.5 4.5 0 0 1 8.494 23a1 1 0 1 1 0-2A2.506 2.506 0 0 0 11 18.494V13H9a1 1 0 1 1 0-2h2V6a3 3 0 0 0-3-3 1 1 0 0 1 0-2c1.636 0 3.088.786 4 2a5 5 0 0 1 4-2\"/></svg>",
-  "dgim": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\" focusable=\"false\"><path fill=\"currentColor\" d=\"M14.255 14.863c.683.371 1.338.934 1.795 1.416.833.881 1.08 1.884 1.057 2.877l-.002.088a3.93 3.93 0 0 1-1.217 2.732c-.87.83-1.991 1.041-3.09 1.023h-2.13c-.957 0-1.414-.216-1.928-.455-.54-.25-.94-.615-.94-.937v-.38c0-.253.4-.67.951-.915.751-.334 1.044-.449 1.917-.449h3.156c.227 0 .43-.052.431-.083z\"/><path fill=\"currentColor\" d=\"M14.255 5.987c.784.104 3.498.615 3.725 2.744.201 1.89-1.156 2.586-1.95 3.002l-5.36 2.627v4.368c-.927-.437-1.982-.762-2.686-1.636-.646-.801-1.004-1.815-.983-2.78l.01-.15c0-.011-.007-1.908 1.846-2.769l5.398-2.646z\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M14.005 1c.893 0 1.44.212 2.145.633.15.092 1.002.593 1.002.94l-.003.355c0 .331-.594.755-.812.865-.655.338-1.294.717-2.08.717h-3.159c-.227 0-.43.054-.43.114v5.069c-.747-.442-1.55-.967-2.043-1.462a3.74 3.74 0 0 1-1.107-2.748l.012-.449C7.579 2.85 9.437 1 11.578 1zm-.445 1.063a.426.426 0 0 0-.433.417c0 .23.194.417.433.417a.426.426 0 0 0 .433-.417.426.426 0 0 0-.433-.417\" clip-rule=\"evenodd\"/></svg>",
   "dosage": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\" focusable=\"false\"><path fill=\"currentColor\" d=\"M12 6a1 1 0 1 0-2 0v5a1 1 0 0 0 .46.841l1.5.964a1 1 0 0 0 1.08-1.683L12 10.454z\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M11 1c5.362 0 9.738 4.22 9.989 9.52A3.97 3.97 0 0 1 23 13.972a3.98 3.98 0 0 1-1.159 2.81h-.001l-2.483 2.483-.034.036-2.538 2.539-.002.002a3.978 3.978 0 0 1-6.264-.853C5.22 20.738 1 16.362 1 11 1 5.477 5.477 1 11 1M3 11a8 8 0 0 1 15.938-1 3.98 3.98 0 0 0-2.721 1.158l-5.058 5.06A3.98 3.98 0 0 0 10 18.939 8 8 0 0 1 3 11m14.612 7.183-2.24 2.241v.001A1.978 1.978 0 0 1 12 19.026c0-.523.206-1.024.575-1.395l2.242-2.244z\" clip-rule=\"evenodd\"/></svg>",
   "dot": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\" focusable=\"false\"><circle cx=\"12\" cy=\"12\" r=\"4\"/></svg>",
   "download": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4m4-5 5 5 5-5m-5 5V3\"/></svg>",
@@ -87,10 +86,10 @@
   "face-neutral": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\" focusable=\"false\"><path fill=\"currentColor\" d=\"M8.19 10.11c.05.04.1.09.15.12q.09.06.18.09.09.045.18.06c.07.01.14.02.2.02.26 0 .52-.11.71-.29.18-.19.29-.45.29-.71s-.11-.52-.29-.71c-.24-.23-.58-.33-.91-.27q-.09.015-.18.06-.09.03-.18.09l-.15.12q-.135.15-.21.33c-.05.12-.08.25-.08.38s.03.26.08.38c.05.13.12.23.21.33m6.91.29c.26 0 .52-.11.71-.29.18-.19.29-.44.29-.71 0-.13-.03-.26-.08-.38-.05-.13-.12-.23-.21-.33-.37-.37-1.05-.37-1.42 0-.09.1-.16.2-.21.33-.05.12-.08.25-.08.38 0 .27.11.52.29.71.19.18.45.29.71.29M12 21c-4.962 0-9-4.038-9-9 0-4.963 4.038-9 9-9 4.963 0 9 4.037 9 9 0 4.962-4.037 9-9 9m0-20C5.935 1 1 5.934 1 12s4.935 11 11 11 11-4.935 11-11S18.065 1 12 1m4 13.5H8a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2\"/></svg>",
   "face-sad": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\" focusable=\"false\"><path fill=\"currentColor\" d=\"M8.9 10.4c-.06 0-.13-.01-.2-.02a.6.6 0 0 1-.18-.06.8.8 0 0 1-.18-.09c-.05-.03-.1-.08-.15-.12-.09-.1-.16-.2-.21-.33a1 1 0 0 1-.08-.38c0-.13.03-.26.08-.38q.075-.18.21-.33l.15-.12q.09-.06.18-.09.09-.045.18-.06c.33-.06.67.04.91.27.18.19.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29m6.2 0c-.26 0-.52-.11-.71-.29-.18-.19-.29-.44-.29-.71 0-.13.03-.26.08-.38.05-.13.12-.23.21-.33.37-.37 1.05-.37 1.42 0 .09.1.16.2.21.33.05.12.08.25.08.38 0 .27-.11.52-.29.71-.19.18-.45.29-.71.29M12 3c-4.962 0-9 4.038-9 9s4.038 9 9 9c4.963 0 9-4.038 9-9s-4.037-9-9-9m0 20C5.935 23 1 18.066 1 12S5.935 1 12 1s11 4.935 11 11-4.935 11-11 11m4-5.7a1 1 0 0 1-.707-.293 4.66 4.66 0 0 0-6.586 0 .999.999 0 1 1-1.414-1.414 6.663 6.663 0 0 1 9.414 0A.999.999 0 0 1 16 17.3\"/></svg>",
   "facebook": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\" focusable=\"false\"><path fill=\"#1877F2\" d=\"M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.668 4.533-4.668 1.312 0 2.686.234 2.686.234v2.953H15.83c-1.491 0-1.956.925-1.956 1.875V12h3.328l-.532 3.469h-2.796v8.385C19.612 22.954 24 17.99 24 12\"/><path fill=\"#fff\" d=\"M16.671 15.469 17.203 12h-3.328V9.75c0-.949.465-1.875 1.956-1.875h1.513V4.922s-1.374-.234-2.686-.234c-2.741 0-4.533 1.66-4.533 4.668V12H7.078v3.469h3.047v8.385a12.1 12.1 0 0 0 3.75 0V15.47h2.796z\"/></svg>",
-  "fc-circle": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" focusable=\"false\"><path d=\"M23 12C23 18.075 18.075 23 12 23C5.925 23 1 18.075 1 12C1 5.925 5.925 1 12 1C18.075 1 23 5.925 23 12Z\"/></svg>",
-  "fc-diamond": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" focusable=\"false\"><path d=\"M1.354 12.354C1.158 12.158 1.158 11.842 1.354 11.646L11.646 1.354C11.842 1.158 12.158 1.158 12.354 1.354L22.646 11.646C22.842 11.842 22.842 12.158 22.646 12.354L12.354 22.646C12.158 22.842 11.842 22.842 11.646 22.646L1.354 12.354Z\"/></svg>",
-  "fc-hexagon": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" focusable=\"false\"><path d=\"M22.841 11.739C22.939 11.899 22.939 12.101 22.841 12.261L17.646 20.761C17.555 20.909 17.394 21 17.22 21H6.78C6.606 21 6.445 20.909 6.354 20.761L1.159 12.261C1.062 12.101 1.062 11.899 1.159 11.739L6.354 3.239C6.445 3.091 6.606 3 6.78 3H17.22C17.394 3 17.555 3.091 17.646 3.239L22.841 11.739Z\"/></svg>",
-  "fc-triangle": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" focusable=\"false\"><path d=\"M11.567 2.747C11.76 2.415 12.24 2.415 12.433 2.747L22.566 20.25C22.759 20.583 22.518 21 22.133 21H1.867C1.482 21 1.242 20.583 1.435 20.25L11.567 2.747Z\"/></svg>",
+  "fc-circle": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"M23 12c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11\"/></svg>",
+  "fc-diamond": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"M1.354 12.354a.5.5 0 0 1 0-.708L11.646 1.354a.5.5 0 0 1 .708 0l10.292 10.292a.5.5 0 0 1 0 .708L12.354 22.646a.5.5 0 0 1-.708 0z\"/></svg>",
+  "fc-hexagon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"M22.841 11.739a.5.5 0 0 1 0 .522l-5.195 8.5a.5.5 0 0 1-.426.239H6.78a.5.5 0 0 1-.426-.239l-5.195-8.5a.5.5 0 0 1 0-.522l5.195-8.5A.5.5 0 0 1 6.78 3h10.44a.5.5 0 0 1 .426.239z\"/></svg>",
+  "fc-triangle": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"M11.567 2.747a.5.5 0 0 1 .866 0L22.566 20.25a.5.5 0 0 1-.433.75H1.867a.5.5 0 0 1-.432-.75z\"/></svg>",
   "figma": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\" focusable=\"false\"><path fill=\"#1ABCFE\" d=\"M12 12a4 4 0 1 1 8 0 4 4 0 0 1-8 0\"/><path fill=\"#0ACF83\" d=\"M4 20a4 4 0 0 1 4-4h4v4a4 4 0 1 1-8 0\"/><path fill=\"#FF7262\" d=\"M12 0v8h4a4 4 0 1 0 0-8z\"/><path fill=\"#F24E1E\" d=\"M4 4a4 4 0 0 0 4 4h4V0H8a4 4 0 0 0-4 4\"/><path fill=\"#A259FF\" d=\"M4 12a4 4 0 0 0 4 4h4V8H8a4 4 0 0 0-4 4\"/></svg>",
   "file-pdf": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"M5.457 14.129q.208 0 .36.047a.7.7 0 0 1 .25.134.5.5 0 0 1 .148.21q.05.12.05.27 0 .326-.196.513-.193.187-.612.187h-.565v-1.36zm3.931.019q.303 0 .54.093.242.094.408.268t.256.425.089.565q0 .316-.09.567-.088.252-.255.428-.167.173-.407.267-.239.09-.541.091h-.762v-2.704z\"/><path fill-rule=\"evenodd\" d=\"m14.172 1.016.026.004.048.011q.024.005.047.012.144.045.267.128l.074.056q.038.03.073.066l7 7A1 1 0 0 1 22 9v11a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-1H3a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1h1V4a3 3 0 0 1 3-3h7q.088 0 .172.016M4.2 13.5a.2.2 0 0 0-.2.2v3.6c0 .11.09.2.2.2h.492a.2.2 0 0 0 .2-.2v-1.176h.565q.43 0 .752-.096.32-.099.532-.276a1.1 1.1 0 0 0 .316-.422 1.4 1.4 0 0 0 .104-.54q0-.278-.101-.516a1.04 1.04 0 0 0-.306-.408 1.5 1.5 0 0 0-.533-.27 2.7 2.7 0 0 0-.764-.096zm3.729 0a.2.2 0 0 0-.2.2v3.6c0 .11.09.2.2.2h1.459q.495 0 .904-.148.407-.15.695-.415.292-.264.45-.63.16-.37.16-.808 0-.435-.16-.803a1.8 1.8 0 0 0-.45-.63 2 2 0 0 0-.695-.418 2.6 2.6 0 0 0-.904-.148zm4.523 0a.2.2 0 0 0-.2.2v3.6c0 .11.09.2.2.2h.498a.2.2 0 0 0 .2-.2v-1.396h1.353a.2.2 0 0 0 .2-.2v-.25a.2.2 0 0 0-.2-.201H13.15v-1.105h1.65a.2.2 0 0 0 .2-.2V13.7a.2.2 0 0 0-.2-.2zM15 8h3.586L15 4.414zm1 4a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H6v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V10h-6a1 1 0 0 1-1-1V3H7a1 1 0 0 0-1 1v8z\" clip-rule=\"evenodd\"/></svg>",
   "file-text": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"/><path d=\"M14 2v6h6m-4 5H8m8 4H8m2-8H8\"/></svg>",

package/build/esm/web-tokens/assets/icons16.json CHANGED Viewed

@@ -70,7 +70,6 @@
   "credit-card": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 16 16\" focusable=\"false\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M3 2a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3zm11 4V5a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1zM2 8h12v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z\" clip-rule=\"evenodd\"/></svg>",
   "cursor-default": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" focusable=\"false\"><path d=\"M14.417 6.59a1 1 0 0 1-.184 1.883L9.863 9.52l-.88 4.665a1 1 0 0 1-1.877.262l-6-12a1 1 0 0 1 1.31-1.356zM4.163 4.092l3.403 6.806.45-2.383a1 1 0 0 1 .75-.786l2.185-.525z\"/></svg>",
   "cursor-text": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" focusable=\"false\"><path d=\"M11 1a1 1 0 1 1 0 2 2 2 0 0 0-2 2v2h1a1 1 0 0 1 0 2H9v2.37c0 .9.73 1.63 1.63 1.63a1 1 0 0 1 0 2A3.62 3.62 0 0 1 8 13.87 3.62 3.62 0 0 1 5.37 15a1 1 0 0 1 0-2c.9 0 1.63-.73 1.63-1.63V9H6a1 1 0 0 1 0-2h1V5a2 2 0 0 0-2-2 1 1 0 0 1 0-2 4 4 0 0 1 3 1.355A4 4 0 0 1 11 1\"/></svg>",
-  "dgim": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 16 16\" focusable=\"false\"><path fill=\"currentColor\" d=\"M9 10.102c.497.27 1.25.66 1.581 1.01.606.64.787 1.37.77 2.092l-.002.065a2.86 2.86 0 0 1-.885 1.987c-.633.603-1.448.756-2.248.743H6.667c-.696 0-1.028-.156-1.402-.33-.393-.182-.684-.447-.684-.682v-.277c0-.183.29-.486.692-.665.547-.242.76-.444 1.394-.444h.766l1.067.02c.497 0 .5-.415.5-.42zM9 3.56c.57.075 2.82.514 2.985 2.062.147 1.375-.84 1.882-1.418 2.185L7 9.765v3.175c-.674-.317-1.773-.6-2.285-1.236-.47-.583-.73-1.321-.715-2.022l.007-.11c0-.013-.002-1.389 1.343-2.013L9 5.567zM9.093 0c.65 0 1.05.154 1.561.46.11.067.728.431.728.684l-.001.258c0 .241-.433.549-.591.63a3.16 3.16 0 0 1-1.513.369h-.315l-1.612.01c-.165 0-.35.061-.35.23v3.686c-.543-.32-1.46-.708-1.82-1.068a2.72 2.72 0 0 1-.804-2l.008-.324C4.42 1.345 5.77 0 7.328 0zm-.299.8c-.23 0-.415.18-.415.4s.186.4.415.4c.23 0 .416-.179.416-.4a.41.41 0 0 0-.416-.4\"/></svg>",
   "dosage": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 16 16\" focusable=\"false\"><path fill=\"currentColor\" d=\"M6 4v3a1 1 0 0 0 .284.698l1.198 1.229L8.914 7.53 8 6.593V4z\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M6.235 13.959a7.001 7.001 0 1 1 7.724-7.724 3.253 3.253 0 0 1 1.093 5.316l-.002.002-1.154 1.154q-.048.047-.1.088a1 1 0 0 1-.089.1l-2.156 2.157a3.254 3.254 0 0 1-5.316-1.093M2 7a5 5 0 0 1 9.92-.894 3.25 3.25 0 0 0-1.47.842l-.002.002-1.155 1.154a1 1 0 0 0-.088.101 1 1 0 0 0-.1.088L6.95 10.448l-.002.001c-.409.411-.697.92-.842 1.471A5 5 0 0 1 2 7m6 5.747c0-.332.13-.65.365-.886l1.446-1.447 1.775 1.775-1.447 1.446A1.255 1.255 0 0 1 8 12.747\" clip-rule=\"evenodd\"/></svg>",
   "dot": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" focusable=\"false\"><circle cx=\"8\" cy=\"8\" r=\"4\"/></svg>",
   "download": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 16 16\" focusable=\"false\"><g stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linejoin=\"round\" d=\"M2 8v3.6c0 .773.56 1.4 1.25 1.4h9.5c.69 0 1.25-.627 1.25-1.4V8\"/><path stroke-linejoin=\"bevel\" d=\"M8 8V1\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11 6 8 9 5 6\"/></g></svg>",
@@ -87,10 +86,10 @@
   "face-neutral": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 16 16\" focusable=\"false\"><circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"2\"/><g fill=\"currentColor\"><circle cx=\"6\" cy=\"6\" r=\"1\"/><circle cx=\"10\" cy=\"6\" r=\"1\"/><path d=\"M5 9a1 1 0 0 0 0 2zm6 2a1 1 0 1 0 0-2zm-6 0h6V9H5z\"/></g></svg>",
   "face-sad": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 16 16\" focusable=\"false\"><circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"2\"/><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"2\" d=\"M5 10.5c.85-.788 1.885-1.25 3-1.25s2.15.462 3 1.25\"/><g fill=\"currentColor\"><circle cx=\"6\" cy=\"6\" r=\"1\"/><circle cx=\"10\" cy=\"6\" r=\"1\"/></g></svg>",
   "facebook": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 16 16\" focusable=\"false\"><path fill=\"#1877f2\" d=\"M16 8a8 8 0 1 0-9.25 7.903v-5.59H4.719V8H6.75V6.238c0-2.006 1.194-3.113 3.022-3.113.875 0 1.79.156 1.79.156V5.25h-1.008c-.994 0-1.304.617-1.304 1.25V8h2.219l-.355 2.313H9.25v5.59A8 8 0 0 0 16 8\"/><path fill=\"#fff\" d=\"M11.114 10.313 11.47 8H9.25V6.5c0-.633.31-1.25 1.304-1.25h1.009V3.281s-.916-.156-1.791-.156c-1.828 0-3.022 1.107-3.022 3.112V8H4.719v2.313H6.75v5.59c.828.13 1.672.13 2.5 0v-5.59z\"/></svg>",
-  "fc-circle": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" focusable=\"false\"><path d=\"M15 8C15 11.866 11.866 15 8 15C4.134 15 1 11.866 1 8C1 4.134 4.134 1 8 1C11.866 1 15 4.134 15 8Z\"/></svg>",
-  "fc-diamond": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" focusable=\"false\"><path d=\"M1.354 8.354C1.158 8.158 1.158 7.842 1.354 7.646L7.646 1.354C7.842 1.158 8.158 1.158 8.354 1.354L14.646 7.646C14.842 7.842 14.842 8.158 14.646 8.354L8.354 14.646C8.158 14.842 7.842 14.842 7.646 14.646L1.354 8.354Z\"/></svg>",
-  "fc-hexagon": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" focusable=\"false\"><path d=\"M14.854 7.749C14.944 7.904 14.945 8.096 14.855 8.251L11.644 13.812C11.555 13.967 11.39 14.062 11.211 14.062H4.789C4.61 14.062 4.445 13.967 4.356 13.812L1.145 8.251C1.055 8.096 1.056 7.904 1.146 7.749L4.355 2.248C4.445 2.094 4.609 2 4.787 2H11.213C11.391 2 11.555 2.094 11.645 2.248L14.854 7.749Z\"/></svg>",
-  "fc-triangle": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" focusable=\"false\"><path d=\"M7.568 2.74C7.761 2.41 8.239 2.41 8.432 2.74L14.561 13.248C14.756 13.581 14.515 14 14.13 14H1.871C1.485 14 1.244 13.581 1.439 13.248L7.568 2.74Z\"/></svg>",
+  "fc-circle": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" focusable=\"false\"><path d=\"M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0\"/></svg>",
+  "fc-diamond": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" focusable=\"false\"><path d=\"M1.354 8.354a.5.5 0 0 1 0-.708l6.292-6.292a.5.5 0 0 1 .708 0l6.292 6.292a.5.5 0 0 1 0 .708l-6.292 6.292a.5.5 0 0 1-.708 0z\"/></svg>",
+  "fc-hexagon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" focusable=\"false\"><path d=\"M14.854 7.749a.5.5 0 0 1 .001.502l-3.211 5.561a.5.5 0 0 1-.433.25H4.789a.5.5 0 0 1-.433-.25L1.145 8.251a.5.5 0 0 1 .001-.502l3.209-5.501A.5.5 0 0 1 4.787 2h6.426a.5.5 0 0 1 .432.248z\"/></svg>",
+  "fc-triangle": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" focusable=\"false\"><path d=\"M7.568 2.74a.5.5 0 0 1 .864 0l6.129 10.508a.5.5 0 0 1-.431.752H1.871a.5.5 0 0 1-.432-.752z\"/></svg>",
   "figma": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 16 16\" focusable=\"false\"><path fill=\"#1ABCFE\" d=\"M8.003 8a2.667 2.667 0 1 1 5.334 0 2.667 2.667 0 0 1-5.334 0\"/><path fill=\"#0ACF83\" d=\"M2.67 13.333a2.667 2.667 0 0 1 2.667-2.666h2.666v2.666a2.667 2.667 0 1 1-5.333 0\"/><path fill=\"#FF7262\" d=\"M8.003 0v5.333h2.667a2.667 2.667 0 0 0 0-5.333z\"/><path fill=\"#F24E1E\" d=\"M2.67 2.667a2.667 2.667 0 0 0 2.667 2.666h2.666V0H5.337A2.667 2.667 0 0 0 2.67 2.667\"/><path fill=\"#A259FF\" d=\"M2.67 8a2.667 2.667 0 0 0 2.667 2.667h2.666V5.333H5.337A2.667 2.667 0 0 0 2.67 8\"/></svg>",
   "file-pdf": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" focusable=\"false\"><path d=\"M2.528 9.472q.152 0 .262.035a.5.5 0 0 1 .182.1.4.4 0 0 1 .108.158.5.5 0 0 1 .036.203.52.52 0 0 1-.142.384q-.141.141-.446.141h-.41V9.472zm2.859.014q.22 0 .393.07a.81.81 0 0 1 .483.52q.065.187.065.423 0 .238-.065.426a.82.82 0 0 1-.482.522 1.1 1.1 0 0 1-.394.067h-.554V9.486z\"/><path fill-rule=\"evenodd\" d=\"M9.438.006a1 1 0 0 1 .632.318l3.667 4A1 1 0 0 1 14 5v8.667a2.334 2.334 0 0 1-2.095 2.321l-.238.012H4.333A2.334 2.334 0 0 1 2 13.667V13H1a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h1V2.333A2.333 2.333 0 0 1 4.333 0h5zM4.333 2A.333.333 0 0 0 4 2.333V8h6.015a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H4v.667c0 .184.15.333.333.333h7.334c.184 0 .333-.15.333-.333V6H9a1 1 0 0 1-1-1V2zM1.669 9a.2.2 0 0 0-.2.2v2.6c0 .11.09.2.2.2h.249a.2.2 0 0 0 .2-.2v-.831h.41q.315 0 .547-.073.234-.074.388-.207a.8.8 0 0 0 .228-.316q.076-.184.077-.405 0-.21-.074-.387a.8.8 0 0 0-.222-.306q-.151-.13-.388-.203A1.9 1.9 0 0 0 2.528 9zm2.71 0a.2.2 0 0 0-.198.2v2.6c0 .11.089.2.199.2h1.007q.36 0 .658-.111.296-.113.506-.31.212-.2.326-.475.117-.276.117-.605 0-.326-.117-.602a1.4 1.4 0 0 0-.326-.473 1.5 1.5 0 0 0-.506-.313A1.9 1.9 0 0 0 5.387 9zm3.292 0a.2.2 0 0 0-.2.2v2.6c0 .11.09.2.2.2h.253a.2.2 0 0 0 .2-.2v-.997h.929a.2.2 0 0 0 .2-.2v-.088a.2.2 0 0 0-.2-.2h-.929v-.829h1.145a.2.2 0 0 0 .2-.2V9.2a.2.2 0 0 0-.2-.2zM10 4h.727L10 3.206z\" clip-rule=\"evenodd\"/></svg>",
   "file-text": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 16 16\" focusable=\"false\"><path fill=\"currentColor\" d=\"M11 10v2H5v-2zM5 7v2h6V7zm2-3H5v2h2z\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M12 16H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.172a2 2 0 0 1 1.414.586l2.828 2.828A2 2 0 0 1 14 4.828V14a2 2 0 0 1-2 2M9 6h3v8H4V2h4v3a1 1 0 0 0 1 1m1-3.172L11.172 4H10z\" clip-rule=\"evenodd\"/></svg>",

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

@@ -159,6 +159,20 @@ type Variables = {
                 "distanceY": string;
             };
         };
+        "tooltip": {
+            "open": {
+                "duration": string;
+                "delay": string;
+                "timingFunction": string;
+                "distanceY": string;
+            };
+            "close": {
+                "delay": string;
+            };
+            "replace": {
+                "window": string;
+            };
+        };
         "navBarTabButton": {
             "open": {
                 "duration": string;
@@ -227,6 +241,12 @@ type Variables = {
             "width": {
                 "default": string;
             };
+            "minWidth": {
+                "default": string;
+            };
+            "maxWidth": {
+                "default": string;
+            };
             "bottomBar": {
                 "height": {
                     "default": string;