@amboss/design-system 4.9.4 → 4.10.0

package/build/cjs/components/NavBar/NavBar.d.ts

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

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

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

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

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

package/build/cjs/components/Patterns/Dialog/DialogContext.d.ts

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

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

@@ -20,8 +20,8 @@ export type EmptyStateProps = {
 };
 export declare function EmptyState({ title, titleAs, description, variant, icon, children, "data-e2e-test-id": dataE2eTestId, ...ariaAttributes }: EmptyStateProps): React.ReactElement;
 export declare namespace EmptyState {
-    var ButtonGroup: typeof EmptyStateButtonGroup;
-    var Link: typeof EmptyStateLink;
+    export { EmptyStateButtonGroup as ButtonGroup };
+    export { EmptyStateLink as Link };
 }
 declare function EmptyStateButtonGroup<C extends React.ElementType = "button">({ ...rest }: Omit<ButtonGroupProps<C>, "buttonSize">): React.ReactElement;
 declare function EmptyStateLink({ children, ...rest }: Omit<LinkProps, "size" | "color" | "weight"> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {

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

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

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

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

package/build/cjs/components/PromptInput/PromptInput.d.ts

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

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

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

package/build/cjs/components/SearchResult/SearchResult.d.ts

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

package/build/cjs/components/Sheet/Sheet.js

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

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

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

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

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

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

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

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

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

package/build/cjs/components/Utilities/ContainerQuery/ContainerQueryContext.d.ts

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

package/build/cjs/components/Utilities/ScreenReaderText/ScreenReaderText.d.ts

@@ -1,4 +1,4 @@
 export declare const ScreenReaderText: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/build/cjs/shared/components/SelectableButton.d.ts

@@ -15,4 +15,4 @@ export declare const SelectableButton: import("@emotion/styled").StyledComponent
     as?: React.ElementType;
 } & {
     isActive?: boolean;
-}, React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;

package/build/cjs/shared/useExitAnimation.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"useExitAnimation",{enumerable:!0,get:function(){return useExitAnimation}});const _react=require("react"),_useWindow=require("./useWindow"),_prefersReducedMotion=require("./prefersReducedMotion");function useExitAnimation(isVisible){let window=(0,_useWindow.useWindow)(),[isClosing,setIsClosing]=(0,_react.useState)(!1),[prevVisible,setPrevVisible]=(0,_react.useState)(isVisible);isVisible!==prevVisible&&(setPrevVisible(isVisible),setIsClosing(!isVisible&&!(0,_prefersReducedMotion.prefersReducedMotion)(window)));let isLeaving=isClosing&&!isVisible,onAnimationEnd=(0,_react.useCallback)(event=>{event.target===event.currentTarget&&isLeaving&&setIsClosing(!1)},[isLeaving]);return{isMounted:isVisible||isClosing,isLeaving,onAnimationEnd}}

package/build/cjs/web-tokens/layout-vars.d.ts

@@ -1,13 +1,20 @@
 export declare const LAYOUT_VARS: {
     readonly contentWidth: "--ds-layout-content-width";
+    readonly contentStart: "--ds-layout-content-start";
     readonly leftPanelWidth: "--ds-layout-leftPanel-width";
+    readonly leftPanelStart: "--ds-layout-leftPanel-start";
     readonly rightPanelWidth: "--ds-layout-rightPanel-width";
     readonly rightPanelBottomBarHeight: "--ds-layout-rightPanel-bottomBar-height";
+    readonly rightPanelStart: "--ds-layout-rightPanel-start";
     readonly splitMaxWidth: "--ds-layout-split-max-width";
     readonly bottomBarHeight: "--ds-layout-bottomBar-height";
+    readonly bottomBarContentHeight: "--ds-layout-bottomBar-content-height";
     readonly subnavOffset: "--ds-layout-subnav-offset";
     readonly floatWidth: "--ds-layout-float-width";
     readonly floatHeight: "--ds-layout-float-height";
+    readonly splitviewWidth: "--ds-layout-splitview-width";
+    readonly splitviewStart: "--ds-layout-splitview-start";
+    readonly regionsReady: "--ds-layout-regions-ready";
 };
 export type LayoutVarKey = keyof typeof LAYOUT_VARS;
 export type LayoutVarName = (typeof LAYOUT_VARS)[LayoutVarKey];

package/build/cjs/web-tokens/layout-vars.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LAYOUT_VARS",{enumerable:!0,get:function(){return LAYOUT_VARS}});const LAYOUT_VARS={contentWidth:"--ds-layout-content-width",leftPanelWidth:"--ds-layout-leftPanel-width",rightPanelWidth:"--ds-layout-rightPanel-width",rightPanelBottomBarHeight:"--ds-layout-rightPanel-bottomBar-height",splitMaxWidth:"--ds-layout-split-max-width",bottomBarHeight:"--ds-layout-bottomBar-height",subnavOffset:"--ds-layout-subnav-offset",floatWidth:"--ds-layout-float-width",floatHeight:"--ds-layout-float-height"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LAYOUT_VARS",{enumerable:!0,get:function(){return LAYOUT_VARS}});const LAYOUT_VARS={contentWidth:"--ds-layout-content-width",contentStart:"--ds-layout-content-start",leftPanelWidth:"--ds-layout-leftPanel-width",leftPanelStart:"--ds-layout-leftPanel-start",rightPanelWidth:"--ds-layout-rightPanel-width",rightPanelBottomBarHeight:"--ds-layout-rightPanel-bottomBar-height",rightPanelStart:"--ds-layout-rightPanel-start",splitMaxWidth:"--ds-layout-split-max-width",bottomBarHeight:"--ds-layout-bottomBar-height",bottomBarContentHeight:"--ds-layout-bottomBar-content-height",subnavOffset:"--ds-layout-subnav-offset",floatWidth:"--ds-layout-float-width",floatHeight:"--ds-layout-float-height",splitviewWidth:"--ds-layout-splitview-width",splitviewStart:"--ds-layout-splitview-start",regionsReady:"--ds-layout-regions-ready"};

package/build/cjs/web-tokens/layout-vars.ts

@@ -3,14 +3,21 @@
 
 export const LAYOUT_VARS = {
   contentWidth: "--ds-layout-content-width",
+  contentStart: "--ds-layout-content-start",
   leftPanelWidth: "--ds-layout-leftPanel-width",
+  leftPanelStart: "--ds-layout-leftPanel-start",
   rightPanelWidth: "--ds-layout-rightPanel-width",
   rightPanelBottomBarHeight: "--ds-layout-rightPanel-bottomBar-height",
+  rightPanelStart: "--ds-layout-rightPanel-start",
   splitMaxWidth: "--ds-layout-split-max-width",
   bottomBarHeight: "--ds-layout-bottomBar-height",
+  bottomBarContentHeight: "--ds-layout-bottomBar-content-height",
   subnavOffset: "--ds-layout-subnav-offset",
   floatWidth: "--ds-layout-float-width",
   floatHeight: "--ds-layout-float-height",
+  splitviewWidth: "--ds-layout-splitview-width",
+  splitviewStart: "--ds-layout-splitview-start",
+  regionsReady: "--ds-layout-regions-ready",
 } as const;
 
 export type LayoutVarKey = keyof typeof LAYOUT_VARS;

package/build/cjs/web-tokens/visualConfig.d.ts

@@ -195,6 +195,20 @@ type Variables = {
                 "timingFunction": string;
             };
         };
+        "sheet": {
+            "enter": {
+                "duration": string;
+                "timingFunction": string;
+            };
+            "exit": {
+                "duration": string;
+                "timingFunction": string;
+            };
+            "resize": {
+                "duration": string;
+                "timingFunction": string;
+            };
+        };
         "promptInput": {
             "focus": {
                 "duration": string;
@@ -230,12 +244,18 @@ type Variables = {
             "width": {
                 "default": string;
             };
+            "start": {
+                "default": string;
+            };
         };
         "leftPanel": {
             "width": {
                 "default": string;
                 "open": string;
             };
+            "start": {
+                "default": string;
+            };
         };
         "rightPanel": {
             "width": {
@@ -252,6 +272,9 @@ type Variables = {
                     "default": string;
                 };
             };
+            "start": {
+                "default": string;
+            };
         };
         "split": {
             "maxWidth": {
@@ -262,6 +285,9 @@ type Variables = {
             "height": {
                 "default": string;
             };
+            "contentHeight": {
+                "default": string;
+            };
         };
         "subnav": {
             "offset": {
@@ -276,6 +302,19 @@ type Variables = {
                 "default": string;
             };
         };
+        "splitview": {
+            "width": {
+                "default": string;
+            };
+            "start": {
+                "default": string;
+            };
+        };
+        "regions": {
+            "ready": {
+                "default": string;
+            };
+        };
     };
     "opacity": {
         "hidden": number;