@amboss/design-system 4.6.1 → 4.6.3

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 (19) hide show
  1. package/build/cjs/components/Internal/PanelHeader/PanelHeader.js +1 -1
  2. package/build/cjs/components/Layout/RightPanel/RightPanelHeader.js +1 -1
  3. package/build/cjs/components/RangePopover/RangePopover.d.ts +11 -1
  4. package/build/cjs/components/RangePopover/RangePopover.js +1 -1
  5. package/build/cjs/components/Toggletip/BasePopover.js +1 -1
  6. package/build/cjs/shared/useBreakpoints.d.ts +4 -0
  7. package/build/cjs/shared/useBreakpoints.js +1 -1
  8. package/build/cjs/web-tokens/assets/icons.json +2 -0
  9. package/build/cjs/web-tokens/assets/icons16.json +2 -0
  10. package/build/esm/components/Internal/PanelHeader/PanelHeader.js +1 -1
  11. package/build/esm/components/Layout/RightPanel/RightPanelHeader.js +1 -1
  12. package/build/esm/components/RangePopover/RangePopover.d.ts +11 -1
  13. package/build/esm/components/RangePopover/RangePopover.js +1 -1
  14. package/build/esm/components/Toggletip/BasePopover.js +1 -1
  15. package/build/esm/shared/useBreakpoints.d.ts +4 -0
  16. package/build/esm/shared/useBreakpoints.js +1 -1
  17. package/build/esm/web-tokens/assets/icons.json +2 -0
  18. package/build/esm/web-tokens/assets/icons16.json +2 -0
  19. package/package.json +1 -1
package/build/cjs/components/Internal/PanelHeader/PanelHeader.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PanelHeader",{enumerable:!0,get:function(){return PanelHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Box=require("../../Box/Box"),_Inline=require("../../Inline/Inline"),_Icon=require("../../Icon/Icon"),_Header=require("../../Typography/Header/Header");function PanelHeader({leftSlot,title,rightSlot,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary";return _react.default.createElement(_Box.Box,{space:"s",vSpace:"xs","data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Inline.Inline,{alignItems:"spaceBetween",vAlignItems:"center",noWrap:!0,fullWidth:!0},_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,leftSlot,title&&!1!==title.isVisible&&_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},title.icon&&_react.default.createElement(_Icon.Icon,{...title.icon,color:colorTitleItems,size:"s"}),_react.default.createElement(_Header.H5,{color:colorTitleItems},title.label)))),_react.default.createElement(_Inline.Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,rightSlot))))}
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PanelHeader",{enumerable:!0,get:function(){return PanelHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_TextClamped=require("../../../components/Typography/TextClamped/TextClamped"),_Box=require("../../Box/Box"),_Inline=require("../../Inline/Inline"),_Icon=require("../../Icon/Icon"),_Header=require("../../Typography/Header/Header");function PanelHeader({leftSlot,title,rightSlot,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary";return _react.default.createElement(_Box.Box,{space:"s",vSpace:"xs","data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Inline.Inline,{alignItems:"spaceBetween",vAlignItems:"center",noWrap:!0,fullWidth:!0},_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,leftSlot,title&&!1!==title.isVisible&&_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},title.icon&&_react.default.createElement(_Icon.Icon,{...title.icon,color:colorTitleItems,size:"s"}),_react.default.createElement(_TextClamped.TextClamped,{as:"span"},_react.default.createElement(_Header.H5,{color:colorTitleItems},title.label))))),_react.default.createElement(_Inline.Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,rightSlot))))}
package/build/cjs/components/Layout/RightPanel/RightPanelHeader.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"RightPanelHeader",{enumerable:!0,get:function(){return RightPanelHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_useLayout=require("../useLayout"),_useBreakpoints=require("../../../shared/useBreakpoints"),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_PanelHeader=require("../../Internal/PanelHeader/PanelHeader"),_PictogramButton=require("../../PictogramButton/PictogramButton"),_Inline=require("../../Inline/Inline"),_LayoutFloatDragHandle=require("../../Internal/LayoutFloat/LayoutFloatDragHandle");function RightPanelHeader({leftSlot,rightSlot,title,slotProps,"data-e2e-test-id":dataE2eTestId}){let{hide,setVariant,state}=(0,_useLayout.useLayout)()[_constants.Slot.rightPanel],{isMobile}=(0,_useBreakpoints.useBreakpoints)(),isFloating="float"===state.variant,variantButtonSlotProps=slotProps.variantButton;return _react.default.createElement(_Sandwich.Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle,{isDraggable:isFloating,"aria-label":slotProps.dragHandle?.["aria-label"]},_react.default.createElement(_PanelHeader.PanelHeader,{leftSlot:_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle.Guard,null,leftSlot),title:title,rightSlot:_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle.Guard,null,rightSlot),!isMobile&&_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle.Guard,null,_react.default.createElement(_Inline.Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},variantButtonSlotProps&&_react.default.createElement(_PictogramButton.PictogramButton,{icon:isFloating?"open-sidebar-right":"minimize",size:"s",variant:"tertiary","aria-label":isFloating?variantButtonSlotProps.dockLabel:variantButtonSlotProps.minimizeLabel,onClick:()=>setVariant(isFloating?"sidebar":"float")}),_react.default.createElement(_PictogramButton.PictogramButton,{icon:"x",size:"s",variant:"tertiary","aria-label":slotProps.closeButton["aria-label"],onClick:hide}))))})))}
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"RightPanelHeader",{enumerable:!0,get:function(){return RightPanelHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_useLayout=require("../useLayout"),_useBreakpoints=require("../../../shared/useBreakpoints"),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_PanelHeader=require("../../Internal/PanelHeader/PanelHeader"),_PictogramButton=require("../../PictogramButton/PictogramButton"),_Inline=require("../../Inline/Inline"),_LayoutFloatDragHandle=require("../../Internal/LayoutFloat/LayoutFloatDragHandle");function RightPanelHeader({leftSlot,rightSlot,title,slotProps,"data-e2e-test-id":dataE2eTestId}){let{hide,setVariant,state}=(0,_useLayout.useLayout)()[_constants.Slot.rightPanel],{isMobile}=(0,_useBreakpoints.useBreakpoints)(),isFloating="float"===state.variant,variantButtonSlotProps=slotProps.variantButton;return _react.default.createElement(_Sandwich.Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle,{isDraggable:isFloating,"aria-label":slotProps.dragHandle?.["aria-label"]},_react.default.createElement(_PanelHeader.PanelHeader,{leftSlot:_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle.Guard,null,leftSlot),title:title,rightSlot:_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle.Guard,null,rightSlot),!isMobile&&_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle.Guard,null,_react.default.createElement(_Inline.Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},variantButtonSlotProps&&_react.default.createElement(_PictogramButton.PictogramButton,{icon:isFloating?"open-sidebar-right":"open-bottom-right",size:"s",variant:"tertiary","aria-label":isFloating?variantButtonSlotProps.dockLabel:variantButtonSlotProps.minimizeLabel,onClick:()=>setVariant(isFloating?"sidebar":"float")}),_react.default.createElement(_PictogramButton.PictogramButton,{icon:"x",size:"s",variant:"tertiary","aria-label":slotProps.closeButton["aria-label"],onClick:hide}))))})))}
package/build/cjs/components/RangePopover/RangePopover.d.ts CHANGED
@@ -1,6 +1,10 @@
1
1
  import React from "react";
2
2
  /** Placement options accepted by the underlying tooltip positioner. */
3
3
  type RangePopoverPlacement = "auto" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
4
+ export type RangePopoverSheetProps = {
5
+ /** Show the dark scrim backdrop behind the Sheet. */
6
+ hasBackdrop?: boolean;
7
+ };
4
8
  export type RangePopoverProps = {
5
9
  /** The popover body. */
6
10
  content: React.ReactElement;
@@ -39,6 +43,10 @@ export type RangePopoverProps = {
39
43
  * selection) and stealing focus would disturb the user's context.
40
44
  */
41
45
  disableInitialFocus?: boolean;
46
+ /** When true, renders as a Sheet on mobile viewports. */
47
+ renderAsSheetOnMobile?: boolean;
48
+ /** Props for configuring the Sheet rendered on mobile viewports. */
49
+ sheetProps?: RangePopoverSheetProps;
42
50
  "data-e2e-test-id"?: string;
43
51
  };
44
52
  /**
@@ -65,6 +73,8 @@ export type RangePopoverProps = {
65
73
  * @param role - ARIA role for the popover surface.
66
74
  * @param aria-label - Accessible name for the popover surface.
67
75
  * @param disableInitialFocus - When true, does not move focus into the popover.
76
+ * @param renderAsSheetOnMobile - When true, renders as a Sheet on mobile viewports.
77
+ * @param sheetProps - Props for configuring the Sheet rendered on mobile viewports.
68
78
  */
69
- export declare function RangePopover({ content, range, isVisible, onClose, dismissOnOutsideClick, placement, portalContainer, contentPadding, maxWidth, hideArrow, role, "aria-label": ariaLabel, disableInitialFocus, "data-e2e-test-id": dataE2eTestId, }: RangePopoverProps): React.ReactElement;
79
+ export declare function RangePopover({ content, range, isVisible, onClose, dismissOnOutsideClick, placement, portalContainer, contentPadding, maxWidth, hideArrow, role, "aria-label": ariaLabel, disableInitialFocus, renderAsSheetOnMobile, sheetProps, "data-e2e-test-id": dataE2eTestId, }: RangePopoverProps): React.ReactElement;
70
80
  export {};
package/build/cjs/components/RangePopover/RangePopover.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"RangePopover",{enumerable:!0,get:function(){return RangePopover}});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")),_TooltipContent=require("../Tooltip/TooltipContent"),_FocusTrapWrapper=require("../../shared/FocusTrapWrapper"),StyledContent=(0,_styled.default)("div",{target:"e1cdfvza0",label:"StyledContent"})(({theme,contentPadding})=>({padding:"m"===contentPadding?theme.variables.size.spacing.s:theme.variables.size.spacing.xxs}));function RangePopover({content,range,isVisible,onClose,dismissOnOutsideClick=!0,placement="top",portalContainer,contentPadding="s",maxWidth,hideArrow=!1,role="dialog","aria-label":ariaLabel,disableInitialFocus=!1,"data-e2e-test-id":dataE2eTestId}){let tooltipId=(0,_react.useId)(),rangeRef=(0,_react.useRef)(null);rangeRef.current=range;let contentRef=(0,_react.useRef)(null),trappedContent=_react.default.createElement(_FocusTrapWrapper.FocusTrapWrapper,{active:isVisible,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:dismissOnOutsideClick,escapeDeactivates:!0,fallbackFocus:()=>contentRef.current,initialFocus:!disableInitialFocus&&void 0,onPostDeactivate:onClose,preventScroll:!0,returnFocusOnDeactivate:!disableInitialFocus}},_react.default.createElement(StyledContent,{ref:contentRef,tabIndex:-1,contentPadding:contentPadding},content));return _react.default.createElement(_TooltipContent.TooltipContent,{"aria-label":ariaLabel,content:trappedContent,dataDSId:"RangePopover",dataE2eTestId:dataE2eTestId,hideArrow:hideArrow,isVisible:isVisible,maxWidth:maxWidth,placement:placement,portalContainer:portalContainer,role:role,tooltipId:tooltipId,triggerRef:rangeRef})}
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"RangePopover",{enumerable:!0,get:function(){return RangePopover}});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")),_Sheet=require("../Sheet/Sheet"),_TooltipContent=require("../Tooltip/TooltipContent"),_FocusTrapWrapper=require("../../shared/FocusTrapWrapper"),_useBreakpoints=require("../../shared/useBreakpoints"),StyledContent=(0,_styled.default)("div",{target:"e1w5dmk80",label:"StyledContent"})(({theme,contentPadding})=>({padding:"m"===contentPadding?theme.variables.size.spacing.s:theme.variables.size.spacing.xxs}));function RangePopover({content,range,isVisible,onClose,dismissOnOutsideClick=!0,placement="top",portalContainer,contentPadding="s",maxWidth,hideArrow=!1,role="dialog","aria-label":ariaLabel,disableInitialFocus=!1,renderAsSheetOnMobile=!1,sheetProps,"data-e2e-test-id":dataE2eTestId}){let tooltipId=(0,_react.useId)(),{isMobileInPortrait,isMobileInLandscape}=(0,_useBreakpoints.useBreakpoints)(),rangeRef=(0,_react.useRef)(null);rangeRef.current=range;let contentRef=(0,_react.useRef)(null);if(renderAsSheetOnMobile&&(isMobileInPortrait||isMobileInLandscape))return _react.default.createElement(_Sheet.Sheet,{"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId,disableInitialFocus:disableInitialFocus,disableReturnFocusToTrigger:disableInitialFocus,dismissOnOutsideClick:dismissOnOutsideClick,hasBackdrop:sheetProps?.hasBackdrop,id:tooltipId,isVisible:isVisible,onClose:onClose,portalContainer:portalContainer??void 0,role:role},content);let trappedContent=_react.default.createElement(_FocusTrapWrapper.FocusTrapWrapper,{active:isVisible,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:dismissOnOutsideClick,escapeDeactivates:!0,fallbackFocus:()=>contentRef.current,initialFocus:!disableInitialFocus&&void 0,onPostDeactivate:onClose,preventScroll:!0,returnFocusOnDeactivate:!disableInitialFocus}},_react.default.createElement(StyledContent,{ref:contentRef,tabIndex:-1,contentPadding:contentPadding},content));return _react.default.createElement(_TooltipContent.TooltipContent,{"aria-label":ariaLabel,content:trappedContent,dataDSId:"RangePopover",dataE2eTestId:dataE2eTestId,hideArrow:hideArrow,isVisible:isVisible,maxWidth:maxWidth,placement:placement,portalContainer:portalContainer,role:role,tooltipId:tooltipId,triggerRef:rangeRef})}
package/build/cjs/components/Toggletip/BasePopover.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"BasePopover",{enumerable:!0,get:function(){return BasePopover}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_interop_require_wildcard=require("@swc/helpers/_/_interop_require_wildcard"),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_react=/*#__PURE__*/_interop_require_wildcard._(require("react")),_ariaAttributes=require("../../shared/ariaAttributes"),_FocusTrapWrapper=require("../../shared/FocusTrapWrapper"),_useWindow=require("../../shared/useWindow"),_breakpointsjson=/*#__PURE__*/_interop_require_default._(require("../../web-tokens/_breakpoints.json")),_PopoverContext=require("../Patterns/Popover/PopoverContext"),_Sheet=require("../Sheet/Sheet"),_TooltipContent=require("../Tooltip/TooltipContent"),StyledContainer=(0,_styled.default)("div",{target:"e2uwtlo0",label:"StyledContainer"})(()=>({borderRadius:"inherit"})),FocusTrapContent=_react.default.forwardRef(({children},ref)=>_react.default.createElement(StyledContainer,{ref:ref},children)),VisibilityChangeReason={triggerClick:"triggerClick",outsideClick:"outsideClick"};function getAriaPopupType(role){let popupType=String(role);return(role||(popupType="true"),"alertdialog"===role)?"dialog":popupType}function getMobileBreakpoint(renderAsSheetOnMobile,win){if(!win)return!1;let isMobileInPortrait=win.innerWidth<=_breakpointsjson.default.m.value,isSmallHeight=win.innerHeight<=450,isLandscape=win.matchMedia?.("(orientation: landscape)").matches;return renderAsSheetOnMobile&&(isMobileInPortrait||isLandscape&&isSmallHeight)}function BasePopover({placement="auto",content,children,contentPadding="m",maxWidth,externalTriggerRef,portalContainer,name="Popover",isVisible:isPopoverVisible,dismissOnOutsideClick=!0,retainOnOutsideClick,"data-e2e-test-id":dataE2eTestId,subTheme,defaultVerticalPlacement,onVisibilityChange,disableInitialFocus=!1,disableReturnFocusToTrigger=!1,renderAsSheetOnMobile=!1,forceSheetLayout=!1,role,sheetProps,...restContentProps}){let win=(0,_useWindow.useWindow)(),tooltipId=(0,_react.useMemo)(()=>`DS${name}_${Math.floor(Date.now()*Math.random())}`,[name]),[isVisible,setVisible]=(0,_react.useState)(isPopoverVisible),[isMobileBreakPoint,setIsMobileBreakpoint]=(0,_react.useState)(()=>forceSheetLayout||getMobileBreakpoint(renderAsSheetOnMobile,win)),internalTriggerRef=(0,_react.useRef)(null),triggerRef=externalTriggerRef||internalTriggerRef,isOutsideClickOnTrigger=(0,_react.useRef)(!1),ariaAttributes=(0,_ariaAttributes.getAriaAttributes)(restContentProps),popoverContextValue=(0,_react.useMemo)(()=>({isWithinPopover:!0,portalContainer}),[portalContainer]),contentWithProvider=_react.default.createElement(_PopoverContext.PopoverContext.Provider,{value:popoverContextValue},content),toggleVisibility=(0,_react.useCallback)((status,reason)=>{setVisible(status),onVisibilityChange&&onVisibilityChange(status,reason)},[onVisibilityChange]),handleTriggerClick=(0,_react.useCallback)(()=>{isOutsideClickOnTrigger.current?isOutsideClickOnTrigger.current=!1:toggleVisibility(!isVisible,VisibilityChangeReason.triggerClick)},[toggleVisibility,isVisible]),handleClickOutsideDeactivates=(0,_react.useCallback)(evt=>!retainOnOutsideClick?.(evt)&&(triggerRef.current&&triggerRef.current.contains(evt.target)&&(isOutsideClickOnTrigger.current=!0),!0),[triggerRef,isOutsideClickOnTrigger,retainOnOutsideClick]),handlePostDeactivate=(0,_react.useCallback)(()=>{toggleVisibility(!1,isOutsideClickOnTrigger.current?VisibilityChangeReason.triggerClick:VisibilityChangeReason.outsideClick)},[toggleVisibility]);(0,_react.useEffect)(()=>{setVisible(isPopoverVisible)},[isPopoverVisible]),(0,_react.useLayoutEffect)(()=>{setIsMobileBreakpoint(forceSheetLayout||getMobileBreakpoint(renderAsSheetOnMobile,win))},[win,isVisible,renderAsSheetOnMobile,forceSheetLayout]),(0,_react.useEffect)(()=>{let trigger=triggerRef.current;if(trigger)return trigger.addEventListener("click",handleTriggerClick),()=>{trigger.removeEventListener("click",handleTriggerClick)}},[handleTriggerClick,triggerRef]),(0,_react.useEffect)(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current,triggerTabIndex=trigger.getAttribute("tabindex");trigger.setAttribute("tabindex",triggerTabIndex??"0")}},[externalTriggerRef,children]),(0,_react.useEffect)(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current;trigger.setAttribute("aria-haspopup",getAriaPopupType(role)),trigger.setAttribute("aria-expanded",String(!!isVisible)),isVisible?trigger.setAttribute("aria-controls",tooltipId):trigger.removeAttribute("aria-controls")}},[externalTriggerRef,children,role,tooltipId,isVisible]);let triggerElm=children?_react.default.cloneElement(children,{ref:triggerRef,"aria-expanded":!!isVisible,...isVisible&&{"aria-controls":tooltipId},tabIndex:children.props.tabIndex??0,"aria-haspopup":getAriaPopupType(role)}):null;if(isMobileBreakPoint){let sheetElm=_react.default.createElement(_Sheet.Sheet,{id:tooltipId,isVisible:isVisible,portalContainer:portalContainer,dismissOnOutsideClick:dismissOnOutsideClick,disableInitialFocus:disableInitialFocus,disableReturnFocusToTrigger:disableReturnFocusToTrigger,onClose:handlePostDeactivate,onClickOutsideDeactivates:handleClickOutsideDeactivates,role:role,...sheetProps??{},...ariaAttributes},contentWithProvider);return _react.default.createElement(_react.default.Fragment,null,triggerElm,sheetElm)}let contentElm=_react.default.createElement(_FocusTrapWrapper.FocusTrapWrapper,{active:isVisible,focusTrapOptions:{clickOutsideDeactivates:dismissOnOutsideClick&&handleClickOutsideDeactivates,allowOutsideClick:!0,escapeDeactivates:!0,fallbackFocus:`#${tooltipId}`,onPostDeactivate:handlePostDeactivate,preventScroll:!0,initialFocus:()=>!disableInitialFocus,returnFocusOnDeactivate:!disableReturnFocusToTrigger}},_react.default.createElement(FocusTrapContent,null,contentWithProvider)),tooltipElm=_react.default.createElement(_TooltipContent.TooltipContent,{...restContentProps,role:role,defaultVerticalPlacement:defaultVerticalPlacement,dataDSId:name,content:contentElm,contentPadding:contentPadding,maxWidth:maxWidth,placement:placement,portalContainer:portalContainer,dataE2eTestId:dataE2eTestId,subTheme:subTheme,isVisible:isVisible,tooltipId:tooltipId,triggerRef:triggerRef,isHiddenOnInvisibleTrigger:!0});return _react.default.createElement(_react.default.Fragment,null,triggerElm,tooltipElm)}
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"BasePopover",{enumerable:!0,get:function(){return BasePopover}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_interop_require_wildcard=require("@swc/helpers/_/_interop_require_wildcard"),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_react=/*#__PURE__*/_interop_require_wildcard._(require("react")),_ariaAttributes=require("../../shared/ariaAttributes"),_FocusTrapWrapper=require("../../shared/FocusTrapWrapper"),_useBreakpoints=require("../../shared/useBreakpoints"),_PopoverContext=require("../Patterns/Popover/PopoverContext"),_Sheet=require("../Sheet/Sheet"),_TooltipContent=require("../Tooltip/TooltipContent"),StyledContainer=(0,_styled.default)("div",{target:"e39b55t0",label:"StyledContainer"})(()=>({borderRadius:"inherit"})),FocusTrapContent=_react.default.forwardRef(({children},ref)=>_react.default.createElement(StyledContainer,{ref:ref},children)),VisibilityChangeReason={triggerClick:"triggerClick",outsideClick:"outsideClick"};function getAriaPopupType(role){let popupType=String(role);return(role||(popupType="true"),"alertdialog"===role)?"dialog":popupType}function BasePopover({placement="auto",content,children,contentPadding="m",maxWidth,externalTriggerRef,portalContainer,name="Popover",isVisible:isPopoverVisible,dismissOnOutsideClick=!0,retainOnOutsideClick,"data-e2e-test-id":dataE2eTestId,subTheme,defaultVerticalPlacement,onVisibilityChange,disableInitialFocus=!1,disableReturnFocusToTrigger=!1,renderAsSheetOnMobile=!1,forceSheetLayout=!1,role,sheetProps,...restContentProps}){let tooltipId=(0,_react.useMemo)(()=>`DS${name}_${Math.floor(Date.now()*Math.random())}`,[name]),[isVisible,setVisible]=(0,_react.useState)(isPopoverVisible),{isMobileInPortrait,isMobileInLandscape}=(0,_useBreakpoints.useBreakpoints)(),internalTriggerRef=(0,_react.useRef)(null),triggerRef=externalTriggerRef||internalTriggerRef,isOutsideClickOnTrigger=(0,_react.useRef)(!1),ariaAttributes=(0,_ariaAttributes.getAriaAttributes)(restContentProps),popoverContextValue=(0,_react.useMemo)(()=>({isWithinPopover:!0,portalContainer}),[portalContainer]),contentWithProvider=_react.default.createElement(_PopoverContext.PopoverContext.Provider,{value:popoverContextValue},content),toggleVisibility=(0,_react.useCallback)((status,reason)=>{setVisible(status),onVisibilityChange&&onVisibilityChange(status,reason)},[onVisibilityChange]),handleTriggerClick=(0,_react.useCallback)(()=>{isOutsideClickOnTrigger.current?isOutsideClickOnTrigger.current=!1:toggleVisibility(!isVisible,VisibilityChangeReason.triggerClick)},[toggleVisibility,isVisible]),handleClickOutsideDeactivates=(0,_react.useCallback)(evt=>!retainOnOutsideClick?.(evt)&&(triggerRef.current&&triggerRef.current.contains(evt.target)&&(isOutsideClickOnTrigger.current=!0),!0),[triggerRef,isOutsideClickOnTrigger,retainOnOutsideClick]),handlePostDeactivate=(0,_react.useCallback)(()=>{toggleVisibility(!1,isOutsideClickOnTrigger.current?VisibilityChangeReason.triggerClick:VisibilityChangeReason.outsideClick)},[toggleVisibility]);(0,_react.useEffect)(()=>{setVisible(isPopoverVisible)},[isPopoverVisible]),(0,_react.useEffect)(()=>{let trigger=triggerRef.current;if(trigger)return trigger.addEventListener("click",handleTriggerClick),()=>{trigger.removeEventListener("click",handleTriggerClick)}},[handleTriggerClick,triggerRef]),(0,_react.useEffect)(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current,triggerTabIndex=trigger.getAttribute("tabindex");trigger.setAttribute("tabindex",triggerTabIndex??"0")}},[externalTriggerRef,children]),(0,_react.useEffect)(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current;trigger.setAttribute("aria-haspopup",getAriaPopupType(role)),trigger.setAttribute("aria-expanded",String(!!isVisible)),isVisible?trigger.setAttribute("aria-controls",tooltipId):trigger.removeAttribute("aria-controls")}},[externalTriggerRef,children,role,tooltipId,isVisible]);let triggerElm=children?_react.default.cloneElement(children,{ref:triggerRef,"aria-expanded":!!isVisible,...isVisible&&{"aria-controls":tooltipId},tabIndex:children.props.tabIndex??0,"aria-haspopup":getAriaPopupType(role)}):null;if(forceSheetLayout||renderAsSheetOnMobile&&(isMobileInPortrait||isMobileInLandscape)){let sheetElm=_react.default.createElement(_Sheet.Sheet,{id:tooltipId,isVisible:isVisible,portalContainer:portalContainer,dismissOnOutsideClick:dismissOnOutsideClick,disableInitialFocus:disableInitialFocus,disableReturnFocusToTrigger:disableReturnFocusToTrigger,onClose:handlePostDeactivate,onClickOutsideDeactivates:handleClickOutsideDeactivates,role:role,...sheetProps??{},...ariaAttributes},contentWithProvider);return _react.default.createElement(_react.default.Fragment,null,triggerElm,sheetElm)}let contentElm=_react.default.createElement(_FocusTrapWrapper.FocusTrapWrapper,{active:isVisible,focusTrapOptions:{clickOutsideDeactivates:dismissOnOutsideClick&&handleClickOutsideDeactivates,allowOutsideClick:!0,escapeDeactivates:!0,fallbackFocus:`#${tooltipId}`,onPostDeactivate:handlePostDeactivate,preventScroll:!0,initialFocus:()=>!disableInitialFocus,returnFocusOnDeactivate:!disableReturnFocusToTrigger}},_react.default.createElement(FocusTrapContent,null,contentWithProvider)),tooltipElm=_react.default.createElement(_TooltipContent.TooltipContent,{...restContentProps,role:role,defaultVerticalPlacement:defaultVerticalPlacement,dataDSId:name,content:contentElm,contentPadding:contentPadding,maxWidth:maxWidth,placement:placement,portalContainer:portalContainer,dataE2eTestId:dataE2eTestId,subTheme:subTheme,isVisible:isVisible,tooltipId:tooltipId,triggerRef:triggerRef,isHiddenOnInvisibleTrigger:!0});return _react.default.createElement(_react.default.Fragment,null,triggerElm,tooltipElm)}
package/build/cjs/shared/useBreakpoints.d.ts CHANGED
@@ -9,6 +9,10 @@ interface BreakpointsReturn {
9
9
  isDesktop: boolean;
10
10
  /** >= 1280px */
11
11
  isLargeDesktop: boolean;
12
+ /** <= 768px, the popover-to-Sheet threshold */
13
+ isMobileInPortrait: boolean;
14
+ /** Landscape viewport no taller than 450px, e.g. a phone held sideways */
15
+ isMobileInLandscape: boolean;
12
16
  }
13
17
  export declare function useBreakpoints(): BreakpointsReturn;
14
18
  export {};
package/build/cjs/shared/useBreakpoints.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"useBreakpoints",{enumerable:!0,get:function(){return useBreakpoints}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=require("react"),_breakpointsjson=/*#__PURE__*/_interop_require_default._(require("../web-tokens/_breakpoints.json")),_useWindow=require("./useWindow");function useBreakpoints(){let window=(0,_useWindow.useWindow)(),[width,setWidth]=(0,_react.useState)(()=>window?window.innerWidth:_breakpointsjson.default.xl.value);return(0,_react.useEffect)(()=>{if(!window)return;let handleResize=()=>{setWidth(window.innerWidth)};return handleResize(),window.addEventListener("resize",handleResize),()=>window.removeEventListener("resize",handleResize)},[window]),(0,_react.useMemo)(()=>({isSmallMobile:width<_breakpointsjson.default.s.value,isMobile:width<_breakpointsjson.default.m.value,isTablet:width>=_breakpointsjson.default.m.value&&width<_breakpointsjson.default.l.value,isDesktop:width>=_breakpointsjson.default.l.value,isLargeDesktop:width>=_breakpointsjson.default.xl.value}),[width])}
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"useBreakpoints",{enumerable:!0,get:function(){return useBreakpoints}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=require("react"),_breakpointsjson=/*#__PURE__*/_interop_require_default._(require("../web-tokens/_breakpoints.json")),_useWindow=require("./useWindow");function useBreakpoints(){let window=(0,_useWindow.useWindow)(),[width,setWidth]=(0,_react.useState)(()=>window?window.innerWidth:_breakpointsjson.default.xl.value),[height,setHeight]=(0,_react.useState)(()=>window?window.innerHeight:_breakpointsjson.default.m.value);return(0,_react.useEffect)(()=>{if(!window)return;let handleResize=()=>{setWidth(window.innerWidth),setHeight(window.innerHeight)};return handleResize(),window.addEventListener("resize",handleResize),()=>window.removeEventListener("resize",handleResize)},[window]),(0,_react.useMemo)(()=>({isSmallMobile:width<_breakpointsjson.default.s.value,isMobile:width<_breakpointsjson.default.m.value,isTablet:width>=_breakpointsjson.default.m.value&&width<_breakpointsjson.default.l.value,isDesktop:width>=_breakpointsjson.default.l.value,isLargeDesktop:width>=_breakpointsjson.default.xl.value,isMobileInPortrait:width<=_breakpointsjson.default.m.value,isMobileInLandscape:width>height&&height<=450}),[width,height])}
package/build/cjs/web-tokens/assets/icons.json CHANGED
@@ -36,6 +36,7 @@
36
36
  "bulb": "<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 10h-4m2 0v7.9m4 0v-4.1c1.6-1.2 2.6-3.1 2.6-5.2 0-3.7-3-6.6-6.6-6.6S5.4 4.9 5.4 8.6c0 2.1 1 4 2.6 5.2v4.1zm-8 0 2 4.1h4l2-4.1\"/></svg>",
37
37
  "calculator": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\" focusable=\"false\"><g fill=\"currentColor\"><path d=\"M8 11c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1m3.983 6H8.017C7.457 17 7 17.45 7 18s.458 1 1.017 1h3.966c.56 0 1.017-.45 1.017-1s-.458-1-1.017-1M11 10c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1m5-1c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1m-7 5c0 .55-.45 1-1 1s-1-.45-1-1 .45-1 1-1 1 .45 1 1m3-1c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1m3 1c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1m1 3c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1\"/><path fill-rule=\"evenodd\" d=\"M6 1h12c1.65 0 3 1.35 3 3v16c0 1.65-1.35 3-3 3H6c-1.65 0-3-1.35-3-3V4c0-1.65 1.35-3 3-3m12 2H6c-.55 0-1 .45-1 1v1h14V4c0-.55-.45-1-1-1M6 21h12c.55 0 1-.45 1-1V7H5v13c0 .55.45 1 1 1\" clip-rule=\"evenodd\"/></g></svg>",
38
38
  "calendar": "<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=\"M16 1a1 1 0 0 1 1 1v1h2a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h2V2a1 1 0 0 1 2 0v1h6V2a1 1 0 0 1 1-1M4 11v9a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-9zm1-6a1 1 0 0 0-1 1v3h16V6a1 1 0 0 0-1-1h-2v1a1 1 0 1 1-2 0V5H9v1a1 1 0 0 1-2 0V5z\" clip-rule=\"evenodd\"/></svg>",
39
+ "camera": "<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=\"M12 8a5 5 0 1 1 0 10 5 5 0 0 1 0-10m0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6\" clip-rule=\"evenodd\"/><path fill-rule=\"evenodd\" d=\"M15 2a1 1 0 0 1 .832.445L17.535 5H20a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3h2.465l1.703-2.555.075-.098A1 1 0 0 1 9 2zM7.832 6.555A1 1 0 0 1 7 7H4a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-3a1 1 0 0 1-.832-.445L14.465 4h-4.93z\" clip-rule=\"evenodd\"/></svg>",
39
40
  "caption": "<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=\"M2 5a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3zm3-1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M6 13a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1m0 4a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1\" clip-rule=\"evenodd\"/></svg>",
40
41
  "cards": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"M20 5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1zm2 4a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3zm-2 8a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1zm2 2a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3z\"/></svg>",
41
42
  "certified": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"M16.28 8.306a1.001 1.001 0 0 1 1.44 1.387l-5.767 6a1 1 0 0 1-1.44.001L7.28 12.346a1 1 0 0 1 1.44-1.39l2.51 2.601z\"/><path fill-rule=\"evenodd\" d=\"M11.66.06c.22-.08.47-.08.69 0l9 3.3c.39.14.66.52.66.94V12c0 7.139-9.168 11.709-9.56 11.9-.14.07-.29.1-.44.1H12c-.15 0-.3-.03-.44-.1C11.165 23.708 2 19.138 2 12V4.3c0-.42.26-.79.66-.94zM4 5v7c0 5.1 6.27 8.91 8 9.87 1.73-.96 8-4.77 8-9.87V5l-8-2.93z\" clip-rule=\"evenodd\"/></svg>",
@@ -100,6 +101,7 @@
100
101
  "folder": "<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=\"M3.6 8a.58.58 0 0 0-.6.6v11.2c0 .348.252.6.6.6h12.8a.58.58 0 0 0 .6-.6V11a.58.58 0 0 0-.6-.6H9.2c-.334 0-.646-.168-.832-.446L7.065 8zm12.8 14.4H3.6A2.57 2.57 0 0 1 1 19.8V8.6C1 7.142 2.142 6 3.6 6h4c.334 0 .646.167.832.444L9.735 8.4H16.4c1.458 0 2.6 1.143 2.6 2.6v8.8c0 1.459-1.142 2.6-2.6 2.6M22 21a1 1 0 0 1-1-1V3H9v1a1 1 0 0 1-2 0V2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1M18 7h-6a1 1 0 0 1 0-2h6a1 1 0 1 1 0 2\"/></svg>",
101
102
  "folder-check-filled": "<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 5a3 3 0 0 1 3-3h5a1 1 0 0 1 .832.445L11.535 5H20a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3zm15.707 5.707a1 1 0 0 0-1.414-1.414L10 14.586l-1.793-1.793a1 1 0 0 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0z\" clip-rule=\"evenodd\"/></svg>",
102
103
  "folder-plus": "<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=\"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2zm-10-8v6m-3-3h6\"/></svg>",
104
+ "folder-simple": "<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=\"M4 4a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-9a1 1 0 0 1-.832-.445L8.465 4zM1 5a3 3 0 0 1 3-3h5a1 1 0 0 1 .832.445L11.535 5H20a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3z\" clip-rule=\"evenodd\"/></svg>",
103
105
  "gift": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" focusable=\"false\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.8 12v11H3.2V12M23 6.5H1V12h22zM12 23V6.5m0 0H7.05a2.75 2.75 0 1 1 0-5.5C10.9 1 12 6.5 12 6.5m0 0h4.95a2.75 2.75 0 0 0 0-5.5C13.1 1 12 6.5 12 6.5\"/></svg>",
104
106
  "globe": "<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=\"M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1M3.057 13a9.005 9.005 0 0 0 6.669 7.709A16.3 16.3 0 0 1 7.05 13zm13.892 0a16.3 16.3 0 0 1-2.676 7.709A9.005 9.005 0 0 0 20.943 13zm-7.89 0A14.3 14.3 0 0 0 12 20.45 14.3 14.3 0 0 0 14.94 13zm5.214-9.71A16.3 16.3 0 0 1 16.949 11h3.994a9.01 9.01 0 0 0-6.67-7.71M12 3.55A14.3 14.3 0 0 0 9.06 11h5.88A14.3 14.3 0 0 0 12 3.55m-2.274-.26A9.01 9.01 0 0 0 3.056 11h3.995a16.3 16.3 0 0 1 2.675-7.71\" clip-rule=\"evenodd\"/></svg>",
105
107
  "google": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\" focusable=\"false\"><path fill=\"#EA4335\" d=\"M12 4.64c2.253 0 3.773.973 4.64 1.787l3.387-3.307C17.947 1.187 15.24 0 12 0 7.307 0 3.253 2.693 1.28 6.613l3.88 3.014C6.133 6.733 8.827 4.64 12 4.64\"/><path fill=\"#4285F4\" d=\"M23.52 12.267c0-.987-.08-1.707-.253-2.454H12v4.454h6.613c-.133 1.106-.853 2.773-2.453 3.893l3.787 2.933C22.213 19 23.52 15.92 23.52 12.267\"/><path fill=\"#FBBC05\" d=\"M5.173 14.373a7.4 7.4 0 0 1-.4-2.373c0-.827.147-1.627.387-2.373L1.28 6.613A12 12 0 0 0 0 12c0 1.933.467 3.76 1.28 5.387z\"/><path fill=\"#34A853\" d=\"M12 24c3.24 0 5.96-1.067 7.947-2.907L16.16 18.16c-1.013.707-2.373 1.2-4.16 1.2-3.173 0-5.867-2.093-6.827-4.987l-3.88 3.014C3.267 21.307 7.307 24 12 24\"/></svg>",
package/build/cjs/web-tokens/assets/icons16.json CHANGED
@@ -36,6 +36,7 @@
36
36
  "bulb": "<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 d=\"M8 1a5 5 0 0 0-3.384 8.681c.232.213.384.504.384.819v2.086a1 1 0 0 0 .293.707l1.414 1.414a1 1 0 0 0 .707.293h1.172a1 1 0 0 0 .707-.293l1.414-1.414a1 1 0 0 0 .293-.707V10.5c0-.315.152-.606.384-.819A5 5 0 0 0 8 1z\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.5 6h3M8 7v4.5M5 12h6\"/></g></svg>",
37
37
  "calculator": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 16 16\" focusable=\"false\"><path stroke=\"currentColor\" stroke-width=\"2\" d=\"M2 2a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z\"/><g fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M4 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0m6 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0M8 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2m3 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2M8 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2M5 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2m5 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-5-1a1 1 0 1 0 0 2h3a1 1 0 1 0 0-2z\" clip-rule=\"evenodd\"/><path d=\"M2 1h12v3H2z\"/></g></svg>",
38
38
  "calendar": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" focusable=\"false\"><path fill-rule=\"evenodd\" d=\"M11 1a1 1 0 1 0-2 0H7a1 1 0 0 0-2 0H4a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3zm2 5V4a1 1 0 0 0-1-1h-1a1 1 0 1 1-2 0H7a1 1 0 0 1-2 0H4a1 1 0 0 0-1 1v2zM3 8h10v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z\" clip-rule=\"evenodd\"/></svg>",
39
+ "camera": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" focusable=\"false\"><path fill-rule=\"evenodd\" d=\"M8 6a3 3 0 1 1 0 6 3 3 0 0 1 0-6m0 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2\" clip-rule=\"evenodd\"/><path fill-rule=\"evenodd\" d=\"M10.036 1.008a1 1 0 0 1 .717.455L11.73 3h1.997C15.026 3 16 4.089 16 5.333v7.334C16 13.911 15.026 15 13.727 15H2.272C.974 15 0 13.911 0 12.667V5.333C0 4.089.974 3 2.272 3H4.27l.977-1.537.075-.103A1 1 0 0 1 6.091 1h3.818zm-4.374 3.53A1 1 0 0 1 4.818 5H2.272C2.165 5 2 5.105 2 5.333v7.334c0 .228.165.333.272.333h11.455c.108 0 .273-.105.273-.333V5.333c0-.228-.165-.333-.273-.333h-2.545a1 1 0 0 1-.844-.463L9.36 3H6.64z\" clip-rule=\"evenodd\"/></svg>",
39
40
  "caption": "<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=\"M1 4a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3zm3-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1z\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4 8a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 3a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1\" clip-rule=\"evenodd\"/></svg>",
40
41
  "cards": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" focusable=\"false\"><path fill-rule=\"evenodd\" d=\"M13 10a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2H3l-.204-.01A2 2 0 0 1 1 13v-1a2 2 0 0 1 2-2zM3 13h10v-1H3zM13 1a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zM3 7h10V3H3z\" clip-rule=\"evenodd\"/></svg>",
41
42
  "certified": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" focusable=\"false\"><path d=\"M10.196 5.268a1.002 1.002 0 0 1 1.366 1.463l-3.355 3.13a1 1 0 0 1-1.364 0L5.317 8.438a1 1 0 0 1 1.366-1.462l.841.785z\"/><path fill-rule=\"evenodd\" d=\"M7.67.06c.21-.08.45-.08.66 0l6 2.1c.4.14.67.52.67.94V8c0 4.78-6.31 7.78-6.58 7.91a1.02 1.02 0 0 1-.84 0C7.31 15.79 1 12.79 1 8V3.1c0-.42.27-.8.67-.94zM3 3.81V8c0 2.92 3.72 5.19 5 5.88 1.28-.69 5-2.95 5-5.88V3.81L8 2.06z\" clip-rule=\"evenodd\"/></svg>",
@@ -100,6 +101,7 @@
100
101
  "folder": "<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=\"M7 2h7v11a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2z\" clip-rule=\"evenodd\"/><g stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 13.788c0 .321-.129.63-.358.857s-.54.355-.864.355H2.222c-.324 0-.635-.128-.864-.355S1 14.109 1 13.788V6.212c0-.321.129-.63.358-.857.23-.227.54-.355.864-.355h2.903l1.222 2h4.43c.325 0 .636.128.865.355.23.227.358.536.358.857z\"/><path stroke-linecap=\"square\" d=\"M9 4h3\"/></g></svg>",
101
102
  "folder-check-filled": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 16 16\" focusable=\"false\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 12.667A1.334 1.334 0 0 1 12.667 14H3.333A1.334 1.334 0 0 1 2 12.667V3.333A1.333 1.333 0 0 1 3.333 2H6.5l1.333 2h4.834A1.333 1.333 0 0 1 14 5.333z\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M13.61 13.61c.25-.25.39-.59.39-.943V5.333A1.334 1.334 0 0 0 12.667 4H7.833L6.5 2H3.333A1.333 1.333 0 0 0 2 3.333v9.334A1.333 1.333 0 0 0 3.333 14h9.334c.353 0 .692-.14.943-.39m-1.914-5.892a1 1 0 1 0-1.392-1.436L6.875 9.607 5.696 8.464A1 1 0 0 0 4.304 9.9l1.875 1.818a1 1 0 0 0 1.392 0z\" clip-rule=\"evenodd\"/></svg>",
102
103
  "folder-plus": "<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-linejoin=\"round\" stroke-width=\"2\"><path stroke-linecap=\"round\" d=\"M14 12.667A1.334 1.334 0 0 1 12.667 14H3.333A1.334 1.334 0 0 1 2 12.667V3.333A1.333 1.333 0 0 1 3.333 2H6.5l1.333 2h4.834A1.333 1.333 0 0 1 14 5.333z\"/><path stroke-linecap=\"square\" d=\"M8 7v4M6 9h4\"/></g></svg>",
104
+ "folder-simple": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" focusable=\"false\"><path fill-rule=\"evenodd\" d=\"M1.683 1.683A2.33 2.33 0 0 1 3.333 1H6.5a1 1 0 0 1 .832.445L8.37 3h4.298A2.333 2.333 0 0 1 15 5.333v7.334A2.333 2.333 0 0 1 12.667 15H3.333A2.333 2.333 0 0 1 1 12.667V3.333c0-.618.246-1.212.683-1.65M3.333 3A.333.333 0 0 0 3 3.333v9.334a.333.333 0 0 0 .333.333h9.334a.333.333 0 0 0 .333-.333V5.333A.333.333 0 0 0 12.667 5H7.833a1 1 0 0 1-.832-.445L5.965 3z\" clip-rule=\"evenodd\"/></svg>",
103
105
  "gift": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 16 16\" focusable=\"false\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 8v7H2V8m13-3H1v3h14zM8 15V5m0-1H4.786c-.474 0-.928-.158-1.263-.44C3.188 3.28 3 2.899 3 2.5s.188-.78.523-1.06A1.97 1.97 0 0 1 4.786 1C7.286 1 8 4 8 4m0 0h3.214c.474 0 .928-.158 1.263-.44S13 2.899 13 2.5s-.188-.78-.523-1.06-.79-.44-1.263-.44C8.714 1 8 4 8 4\"/></svg>",
104
106
  "globe": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" focusable=\"false\"><path fill-rule=\"evenodd\" d=\"M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M2.085 9a6 6 0 0 0 3.5 4.492A11.2 11.2 0 0 1 4.068 9zm9.848 0a11.2 11.2 0 0 1-1.52 4.492A6 6 0 0 0 13.915 9zM6.084 9A9.3 9.3 0 0 0 8 13.481 9.3 9.3 0 0 0 9.915 9zm4.328-6.494A11.2 11.2 0 0 1 11.932 7h1.983a6 6 0 0 0-3.503-4.494M8 2.518A9.3 9.3 0 0 0 6.084 7h3.831A9.3 9.3 0 0 0 8 2.518m-2.414-.011A6 6 0 0 0 2.085 7h1.982a11.2 11.2 0 0 1 1.519-4.493\" clip-rule=\"evenodd\"/></svg>",
105
107
  "google": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 16 16\" focusable=\"false\"><path fill=\"#ea4335\" d=\"M8 3.093c1.502 0 2.516.65 3.093 1.191l2.258-2.204C11.964.791 10.161 0 8.001 0A7.99 7.99 0 0 0 .852 4.409L3.44 6.418C4.09 4.488 5.885 3.093 8 3.093\"/><path fill=\"#4285f4\" d=\"M15.68 8.178c0-.658-.053-1.138-.169-1.636H8v2.97h4.409c-.089.737-.569 1.848-1.636 2.595l2.525 1.955c1.51-1.395 2.382-3.449 2.382-5.884\"/><path fill=\"#fbbc05\" d=\"M3.449 9.582A5 5 0 0 1 3.182 8c0-.551.098-1.084.258-1.582L.853 4.408C.311 5.494 0 6.712 0 8s.311 2.507.853 3.591z\"/><path fill=\"#34a853\" d=\"M8 16c2.16 0 3.973-.711 5.298-1.938l-2.525-1.955c-.675.47-1.582.8-2.773.8-2.116 0-3.911-1.396-4.551-3.325l-2.587 2.01C2.178 14.204 4.872 16 8 16\"/></svg>",
package/build/esm/components/Internal/PanelHeader/PanelHeader.js CHANGED
@@ -1 +1 @@
1
- import React from"react";import{Box}from"../../Box/Box";import{Inline}from"../../Inline/Inline";import{Icon}from"../../Icon/Icon";import{H5}from"../../Typography/Header/Header";export function PanelHeader({leftSlot,title,rightSlot,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary";return React.createElement(Box,{space:"s",vSpace:"xs","data-e2e-test-id":dataE2eTestId},React.createElement(Inline,{alignItems:"spaceBetween",vAlignItems:"center",noWrap:!0,fullWidth:!0},React.createElement(Inline,{space:"xs",vAlignItems:"center",noWrap:!0},React.createElement(React.Fragment,null,leftSlot,title&&!1!==title.isVisible&&React.createElement(Inline,{space:"xs",vAlignItems:"center",noWrap:!0},title.icon&&React.createElement(Icon,{...title.icon,color:colorTitleItems,size:"s"}),React.createElement(H5,{color:colorTitleItems},title.label)))),React.createElement(Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},React.createElement(React.Fragment,null,rightSlot))))}
1
+ import React from"react";import{TextClamped}from"../../../components/Typography/TextClamped/TextClamped";import{Box}from"../../Box/Box";import{Inline}from"../../Inline/Inline";import{Icon}from"../../Icon/Icon";import{H5}from"../../Typography/Header/Header";export function PanelHeader({leftSlot,title,rightSlot,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary";return React.createElement(Box,{space:"s",vSpace:"xs","data-e2e-test-id":dataE2eTestId},React.createElement(Inline,{alignItems:"spaceBetween",vAlignItems:"center",noWrap:!0,fullWidth:!0},React.createElement(Inline,{space:"xs",vAlignItems:"center",noWrap:!0},React.createElement(React.Fragment,null,leftSlot,title&&!1!==title.isVisible&&React.createElement(Inline,{space:"xs",vAlignItems:"center",noWrap:!0},title.icon&&React.createElement(Icon,{...title.icon,color:colorTitleItems,size:"s"}),React.createElement(TextClamped,{as:"span"},React.createElement(H5,{color:colorTitleItems},title.label))))),React.createElement(Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},React.createElement(React.Fragment,null,rightSlot))))}
package/build/esm/components/Layout/RightPanel/RightPanelHeader.js CHANGED
@@ -1 +1 @@
1
- import React from"react";import{Slot}from"../-constants";import{useLayout}from"../useLayout";import{useBreakpoints}from"../../../shared/useBreakpoints";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{PanelHeader}from"../../Internal/PanelHeader/PanelHeader";import{PictogramButton}from"../../PictogramButton/PictogramButton";import{Inline}from"../../Inline/Inline";import{LayoutFloatDragHandle}from"../../Internal/LayoutFloat/LayoutFloatDragHandle";export function RightPanelHeader({leftSlot,rightSlot,title,slotProps,"data-e2e-test-id":dataE2eTestId}){let{hide,setVariant,state}=useLayout()[Slot.rightPanel],{isMobile}=useBreakpoints(),isFloating="float"===state.variant,variantButtonSlotProps=slotProps.variantButton;return React.createElement(Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},React.createElement(LayoutFloatDragHandle,{isDraggable:isFloating,"aria-label":slotProps.dragHandle?.["aria-label"]},React.createElement(PanelHeader,{leftSlot:React.createElement(LayoutFloatDragHandle.Guard,null,leftSlot),title:title,rightSlot:React.createElement(React.Fragment,null,React.createElement(LayoutFloatDragHandle.Guard,null,rightSlot),!isMobile&&React.createElement(LayoutFloatDragHandle.Guard,null,React.createElement(Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},variantButtonSlotProps&&React.createElement(PictogramButton,{icon:isFloating?"open-sidebar-right":"minimize",size:"s",variant:"tertiary","aria-label":isFloating?variantButtonSlotProps.dockLabel:variantButtonSlotProps.minimizeLabel,onClick:()=>setVariant(isFloating?"sidebar":"float")}),React.createElement(PictogramButton,{icon:"x",size:"s",variant:"tertiary","aria-label":slotProps.closeButton["aria-label"],onClick:hide}))))})))}
1
+ import React from"react";import{Slot}from"../-constants";import{useLayout}from"../useLayout";import{useBreakpoints}from"../../../shared/useBreakpoints";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{PanelHeader}from"../../Internal/PanelHeader/PanelHeader";import{PictogramButton}from"../../PictogramButton/PictogramButton";import{Inline}from"../../Inline/Inline";import{LayoutFloatDragHandle}from"../../Internal/LayoutFloat/LayoutFloatDragHandle";export function RightPanelHeader({leftSlot,rightSlot,title,slotProps,"data-e2e-test-id":dataE2eTestId}){let{hide,setVariant,state}=useLayout()[Slot.rightPanel],{isMobile}=useBreakpoints(),isFloating="float"===state.variant,variantButtonSlotProps=slotProps.variantButton;return React.createElement(Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},React.createElement(LayoutFloatDragHandle,{isDraggable:isFloating,"aria-label":slotProps.dragHandle?.["aria-label"]},React.createElement(PanelHeader,{leftSlot:React.createElement(LayoutFloatDragHandle.Guard,null,leftSlot),title:title,rightSlot:React.createElement(React.Fragment,null,React.createElement(LayoutFloatDragHandle.Guard,null,rightSlot),!isMobile&&React.createElement(LayoutFloatDragHandle.Guard,null,React.createElement(Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},variantButtonSlotProps&&React.createElement(PictogramButton,{icon:isFloating?"open-sidebar-right":"open-bottom-right",size:"s",variant:"tertiary","aria-label":isFloating?variantButtonSlotProps.dockLabel:variantButtonSlotProps.minimizeLabel,onClick:()=>setVariant(isFloating?"sidebar":"float")}),React.createElement(PictogramButton,{icon:"x",size:"s",variant:"tertiary","aria-label":slotProps.closeButton["aria-label"],onClick:hide}))))})))}
package/build/esm/components/RangePopover/RangePopover.d.ts CHANGED
@@ -1,6 +1,10 @@
1
1
  import React from "react";
2
2
  /** Placement options accepted by the underlying tooltip positioner. */
3
3
  type RangePopoverPlacement = "auto" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
4
+ export type RangePopoverSheetProps = {
5
+ /** Show the dark scrim backdrop behind the Sheet. */
6
+ hasBackdrop?: boolean;
7
+ };
4
8
  export type RangePopoverProps = {
5
9
  /** The popover body. */
6
10
  content: React.ReactElement;
@@ -39,6 +43,10 @@ export type RangePopoverProps = {
39
43
  * selection) and stealing focus would disturb the user's context.
40
44
  */
41
45
  disableInitialFocus?: boolean;
46
+ /** When true, renders as a Sheet on mobile viewports. */
47
+ renderAsSheetOnMobile?: boolean;
48
+ /** Props for configuring the Sheet rendered on mobile viewports. */
49
+ sheetProps?: RangePopoverSheetProps;
42
50
  "data-e2e-test-id"?: string;
43
51
  };
44
52
  /**
@@ -65,6 +73,8 @@ export type RangePopoverProps = {
65
73
  * @param role - ARIA role for the popover surface.
66
74
  * @param aria-label - Accessible name for the popover surface.
67
75
  * @param disableInitialFocus - When true, does not move focus into the popover.
76
+ * @param renderAsSheetOnMobile - When true, renders as a Sheet on mobile viewports.
77
+ * @param sheetProps - Props for configuring the Sheet rendered on mobile viewports.
68
78
  */
69
- export declare function RangePopover({ content, range, isVisible, onClose, dismissOnOutsideClick, placement, portalContainer, contentPadding, maxWidth, hideArrow, role, "aria-label": ariaLabel, disableInitialFocus, "data-e2e-test-id": dataE2eTestId, }: RangePopoverProps): React.ReactElement;
79
+ export declare function RangePopover({ content, range, isVisible, onClose, dismissOnOutsideClick, placement, portalContainer, contentPadding, maxWidth, hideArrow, role, "aria-label": ariaLabel, disableInitialFocus, renderAsSheetOnMobile, sheetProps, "data-e2e-test-id": dataE2eTestId, }: RangePopoverProps): React.ReactElement;
70
80
  export {};
package/build/esm/components/RangePopover/RangePopover.js CHANGED
@@ -1 +1 @@
1
- import React,{useId,useRef}from"react";import styled from"@emotion/styled";import{TooltipContent}from"../Tooltip/TooltipContent";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";let StyledContent=styled("div",{target:"e1cdfvza0",label:"StyledContent"})(({theme,contentPadding})=>({padding:"m"===contentPadding?theme.variables.size.spacing.s:theme.variables.size.spacing.xxs}));export function RangePopover({content,range,isVisible,onClose,dismissOnOutsideClick=!0,placement="top",portalContainer,contentPadding="s",maxWidth,hideArrow=!1,role="dialog","aria-label":ariaLabel,disableInitialFocus=!1,"data-e2e-test-id":dataE2eTestId}){let tooltipId=useId(),rangeRef=useRef(null);rangeRef.current=range;let contentRef=useRef(null),trappedContent=React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:dismissOnOutsideClick,escapeDeactivates:!0,fallbackFocus:()=>contentRef.current,initialFocus:!disableInitialFocus&&void 0,onPostDeactivate:onClose,preventScroll:!0,returnFocusOnDeactivate:!disableInitialFocus}},React.createElement(StyledContent,{ref:contentRef,tabIndex:-1,contentPadding:contentPadding},content));return React.createElement(TooltipContent,{"aria-label":ariaLabel,content:trappedContent,dataDSId:"RangePopover",dataE2eTestId:dataE2eTestId,hideArrow:hideArrow,isVisible:isVisible,maxWidth:maxWidth,placement:placement,portalContainer:portalContainer,role:role,tooltipId:tooltipId,triggerRef:rangeRef})}
1
+ import React,{useId,useRef}from"react";import styled from"@emotion/styled";import{Sheet}from"../Sheet/Sheet";import{TooltipContent}from"../Tooltip/TooltipContent";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";import{useBreakpoints}from"../../shared/useBreakpoints";let StyledContent=styled("div",{target:"e1w5dmk80",label:"StyledContent"})(({theme,contentPadding})=>({padding:"m"===contentPadding?theme.variables.size.spacing.s:theme.variables.size.spacing.xxs}));export function RangePopover({content,range,isVisible,onClose,dismissOnOutsideClick=!0,placement="top",portalContainer,contentPadding="s",maxWidth,hideArrow=!1,role="dialog","aria-label":ariaLabel,disableInitialFocus=!1,renderAsSheetOnMobile=!1,sheetProps,"data-e2e-test-id":dataE2eTestId}){let tooltipId=useId(),{isMobileInPortrait,isMobileInLandscape}=useBreakpoints(),rangeRef=useRef(null);rangeRef.current=range;let contentRef=useRef(null);if(renderAsSheetOnMobile&&(isMobileInPortrait||isMobileInLandscape))return React.createElement(Sheet,{"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId,disableInitialFocus:disableInitialFocus,disableReturnFocusToTrigger:disableInitialFocus,dismissOnOutsideClick:dismissOnOutsideClick,hasBackdrop:sheetProps?.hasBackdrop,id:tooltipId,isVisible:isVisible,onClose:onClose,portalContainer:portalContainer??void 0,role:role},content);let trappedContent=React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:dismissOnOutsideClick,escapeDeactivates:!0,fallbackFocus:()=>contentRef.current,initialFocus:!disableInitialFocus&&void 0,onPostDeactivate:onClose,preventScroll:!0,returnFocusOnDeactivate:!disableInitialFocus}},React.createElement(StyledContent,{ref:contentRef,tabIndex:-1,contentPadding:contentPadding},content));return React.createElement(TooltipContent,{"aria-label":ariaLabel,content:trappedContent,dataDSId:"RangePopover",dataE2eTestId:dataE2eTestId,hideArrow:hideArrow,isVisible:isVisible,maxWidth:maxWidth,placement:placement,portalContainer:portalContainer,role:role,tooltipId:tooltipId,triggerRef:rangeRef})}
package/build/esm/components/Toggletip/BasePopover.js CHANGED
@@ -1 +1 @@
1
- import styled from"@emotion/styled";import React,{useCallback,useEffect,useLayoutEffect,useMemo,useRef,useState}from"react";import{getAriaAttributes}from"../../shared/ariaAttributes";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";import{useWindow}from"../../shared/useWindow";import breakpoints from"../../web-tokens/_breakpoints.json";import{PopoverContext}from"../Patterns/Popover/PopoverContext";import{Sheet}from"../Sheet/Sheet";import{TooltipContent}from"../Tooltip/TooltipContent";let StyledContainer=styled("div",{target:"e2uwtlo0",label:"StyledContainer"})(()=>({borderRadius:"inherit"})),FocusTrapContent=React.forwardRef(({children},ref)=>React.createElement(StyledContainer,{ref:ref},children)),VisibilityChangeReason={triggerClick:"triggerClick",outsideClick:"outsideClick"};function getAriaPopupType(role){let popupType=String(role);return(role||(popupType="true"),"alertdialog"===role)?"dialog":popupType}function getMobileBreakpoint(renderAsSheetOnMobile,win){if(!win)return!1;let isMobileInPortrait=win.innerWidth<=breakpoints.m.value,isSmallHeight=win.innerHeight<=450,isLandscape=win.matchMedia?.("(orientation: landscape)").matches;return renderAsSheetOnMobile&&(isMobileInPortrait||isLandscape&&isSmallHeight)}export function BasePopover({placement="auto",content,children,contentPadding="m",maxWidth,externalTriggerRef,portalContainer,name="Popover",isVisible:isPopoverVisible,dismissOnOutsideClick=!0,retainOnOutsideClick,"data-e2e-test-id":dataE2eTestId,subTheme,defaultVerticalPlacement,onVisibilityChange,disableInitialFocus=!1,disableReturnFocusToTrigger=!1,renderAsSheetOnMobile=!1,forceSheetLayout=!1,role,sheetProps,...restContentProps}){let win=useWindow(),tooltipId=useMemo(()=>`DS${name}_${Math.floor(Date.now()*Math.random())}`,[name]),[isVisible,setVisible]=useState(isPopoverVisible),[isMobileBreakPoint,setIsMobileBreakpoint]=useState(()=>forceSheetLayout||getMobileBreakpoint(renderAsSheetOnMobile,win)),internalTriggerRef=useRef(null),triggerRef=externalTriggerRef||internalTriggerRef,isOutsideClickOnTrigger=useRef(!1),ariaAttributes=getAriaAttributes(restContentProps),popoverContextValue=useMemo(()=>({isWithinPopover:!0,portalContainer}),[portalContainer]),contentWithProvider=React.createElement(PopoverContext.Provider,{value:popoverContextValue},content),toggleVisibility=useCallback((status,reason)=>{setVisible(status),onVisibilityChange&&onVisibilityChange(status,reason)},[onVisibilityChange]),handleTriggerClick=useCallback(()=>{isOutsideClickOnTrigger.current?isOutsideClickOnTrigger.current=!1:toggleVisibility(!isVisible,VisibilityChangeReason.triggerClick)},[toggleVisibility,isVisible]),handleClickOutsideDeactivates=useCallback(evt=>!retainOnOutsideClick?.(evt)&&(triggerRef.current&&triggerRef.current.contains(evt.target)&&(isOutsideClickOnTrigger.current=!0),!0),[triggerRef,isOutsideClickOnTrigger,retainOnOutsideClick]),handlePostDeactivate=useCallback(()=>{toggleVisibility(!1,isOutsideClickOnTrigger.current?VisibilityChangeReason.triggerClick:VisibilityChangeReason.outsideClick)},[toggleVisibility]);useEffect(()=>{setVisible(isPopoverVisible)},[isPopoverVisible]),useLayoutEffect(()=>{setIsMobileBreakpoint(forceSheetLayout||getMobileBreakpoint(renderAsSheetOnMobile,win))},[win,isVisible,renderAsSheetOnMobile,forceSheetLayout]),useEffect(()=>{let trigger=triggerRef.current;if(trigger)return trigger.addEventListener("click",handleTriggerClick),()=>{trigger.removeEventListener("click",handleTriggerClick)}},[handleTriggerClick,triggerRef]),useEffect(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current,triggerTabIndex=trigger.getAttribute("tabindex");trigger.setAttribute("tabindex",triggerTabIndex??"0")}},[externalTriggerRef,children]),useEffect(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current;trigger.setAttribute("aria-haspopup",getAriaPopupType(role)),trigger.setAttribute("aria-expanded",String(!!isVisible)),isVisible?trigger.setAttribute("aria-controls",tooltipId):trigger.removeAttribute("aria-controls")}},[externalTriggerRef,children,role,tooltipId,isVisible]);let triggerElm=children?React.cloneElement(children,{ref:triggerRef,"aria-expanded":!!isVisible,...isVisible&&{"aria-controls":tooltipId},tabIndex:children.props.tabIndex??0,"aria-haspopup":getAriaPopupType(role)}):null;if(isMobileBreakPoint){let sheetElm=React.createElement(Sheet,{id:tooltipId,isVisible:isVisible,portalContainer:portalContainer,dismissOnOutsideClick:dismissOnOutsideClick,disableInitialFocus:disableInitialFocus,disableReturnFocusToTrigger:disableReturnFocusToTrigger,onClose:handlePostDeactivate,onClickOutsideDeactivates:handleClickOutsideDeactivates,role:role,...sheetProps??{},...ariaAttributes},contentWithProvider);return React.createElement(React.Fragment,null,triggerElm,sheetElm)}let contentElm=React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{clickOutsideDeactivates:dismissOnOutsideClick&&handleClickOutsideDeactivates,allowOutsideClick:!0,escapeDeactivates:!0,fallbackFocus:`#${tooltipId}`,onPostDeactivate:handlePostDeactivate,preventScroll:!0,initialFocus:()=>!disableInitialFocus,returnFocusOnDeactivate:!disableReturnFocusToTrigger}},React.createElement(FocusTrapContent,null,contentWithProvider)),tooltipElm=React.createElement(TooltipContent,{...restContentProps,role:role,defaultVerticalPlacement:defaultVerticalPlacement,dataDSId:name,content:contentElm,contentPadding:contentPadding,maxWidth:maxWidth,placement:placement,portalContainer:portalContainer,dataE2eTestId:dataE2eTestId,subTheme:subTheme,isVisible:isVisible,tooltipId:tooltipId,triggerRef:triggerRef,isHiddenOnInvisibleTrigger:!0});return React.createElement(React.Fragment,null,triggerElm,tooltipElm)}
1
+ import styled from"@emotion/styled";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{getAriaAttributes}from"../../shared/ariaAttributes";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";import{useBreakpoints}from"../../shared/useBreakpoints";import{PopoverContext}from"../Patterns/Popover/PopoverContext";import{Sheet}from"../Sheet/Sheet";import{TooltipContent}from"../Tooltip/TooltipContent";let StyledContainer=styled("div",{target:"e39b55t0",label:"StyledContainer"})(()=>({borderRadius:"inherit"})),FocusTrapContent=React.forwardRef(({children},ref)=>React.createElement(StyledContainer,{ref:ref},children)),VisibilityChangeReason={triggerClick:"triggerClick",outsideClick:"outsideClick"};function getAriaPopupType(role){let popupType=String(role);return(role||(popupType="true"),"alertdialog"===role)?"dialog":popupType}export function BasePopover({placement="auto",content,children,contentPadding="m",maxWidth,externalTriggerRef,portalContainer,name="Popover",isVisible:isPopoverVisible,dismissOnOutsideClick=!0,retainOnOutsideClick,"data-e2e-test-id":dataE2eTestId,subTheme,defaultVerticalPlacement,onVisibilityChange,disableInitialFocus=!1,disableReturnFocusToTrigger=!1,renderAsSheetOnMobile=!1,forceSheetLayout=!1,role,sheetProps,...restContentProps}){let tooltipId=useMemo(()=>`DS${name}_${Math.floor(Date.now()*Math.random())}`,[name]),[isVisible,setVisible]=useState(isPopoverVisible),{isMobileInPortrait,isMobileInLandscape}=useBreakpoints(),internalTriggerRef=useRef(null),triggerRef=externalTriggerRef||internalTriggerRef,isOutsideClickOnTrigger=useRef(!1),ariaAttributes=getAriaAttributes(restContentProps),popoverContextValue=useMemo(()=>({isWithinPopover:!0,portalContainer}),[portalContainer]),contentWithProvider=React.createElement(PopoverContext.Provider,{value:popoverContextValue},content),toggleVisibility=useCallback((status,reason)=>{setVisible(status),onVisibilityChange&&onVisibilityChange(status,reason)},[onVisibilityChange]),handleTriggerClick=useCallback(()=>{isOutsideClickOnTrigger.current?isOutsideClickOnTrigger.current=!1:toggleVisibility(!isVisible,VisibilityChangeReason.triggerClick)},[toggleVisibility,isVisible]),handleClickOutsideDeactivates=useCallback(evt=>!retainOnOutsideClick?.(evt)&&(triggerRef.current&&triggerRef.current.contains(evt.target)&&(isOutsideClickOnTrigger.current=!0),!0),[triggerRef,isOutsideClickOnTrigger,retainOnOutsideClick]),handlePostDeactivate=useCallback(()=>{toggleVisibility(!1,isOutsideClickOnTrigger.current?VisibilityChangeReason.triggerClick:VisibilityChangeReason.outsideClick)},[toggleVisibility]);useEffect(()=>{setVisible(isPopoverVisible)},[isPopoverVisible]),useEffect(()=>{let trigger=triggerRef.current;if(trigger)return trigger.addEventListener("click",handleTriggerClick),()=>{trigger.removeEventListener("click",handleTriggerClick)}},[handleTriggerClick,triggerRef]),useEffect(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current,triggerTabIndex=trigger.getAttribute("tabindex");trigger.setAttribute("tabindex",triggerTabIndex??"0")}},[externalTriggerRef,children]),useEffect(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current;trigger.setAttribute("aria-haspopup",getAriaPopupType(role)),trigger.setAttribute("aria-expanded",String(!!isVisible)),isVisible?trigger.setAttribute("aria-controls",tooltipId):trigger.removeAttribute("aria-controls")}},[externalTriggerRef,children,role,tooltipId,isVisible]);let triggerElm=children?React.cloneElement(children,{ref:triggerRef,"aria-expanded":!!isVisible,...isVisible&&{"aria-controls":tooltipId},tabIndex:children.props.tabIndex??0,"aria-haspopup":getAriaPopupType(role)}):null;if(forceSheetLayout||renderAsSheetOnMobile&&(isMobileInPortrait||isMobileInLandscape)){let sheetElm=React.createElement(Sheet,{id:tooltipId,isVisible:isVisible,portalContainer:portalContainer,dismissOnOutsideClick:dismissOnOutsideClick,disableInitialFocus:disableInitialFocus,disableReturnFocusToTrigger:disableReturnFocusToTrigger,onClose:handlePostDeactivate,onClickOutsideDeactivates:handleClickOutsideDeactivates,role:role,...sheetProps??{},...ariaAttributes},contentWithProvider);return React.createElement(React.Fragment,null,triggerElm,sheetElm)}let contentElm=React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{clickOutsideDeactivates:dismissOnOutsideClick&&handleClickOutsideDeactivates,allowOutsideClick:!0,escapeDeactivates:!0,fallbackFocus:`#${tooltipId}`,onPostDeactivate:handlePostDeactivate,preventScroll:!0,initialFocus:()=>!disableInitialFocus,returnFocusOnDeactivate:!disableReturnFocusToTrigger}},React.createElement(FocusTrapContent,null,contentWithProvider)),tooltipElm=React.createElement(TooltipContent,{...restContentProps,role:role,defaultVerticalPlacement:defaultVerticalPlacement,dataDSId:name,content:contentElm,contentPadding:contentPadding,maxWidth:maxWidth,placement:placement,portalContainer:portalContainer,dataE2eTestId:dataE2eTestId,subTheme:subTheme,isVisible:isVisible,tooltipId:tooltipId,triggerRef:triggerRef,isHiddenOnInvisibleTrigger:!0});return React.createElement(React.Fragment,null,triggerElm,tooltipElm)}
package/build/esm/shared/useBreakpoints.d.ts CHANGED
@@ -9,6 +9,10 @@ interface BreakpointsReturn {
9
9
  isDesktop: boolean;
10
10
  /** >= 1280px */
11
11
  isLargeDesktop: boolean;
12
+ /** <= 768px, the popover-to-Sheet threshold */
13
+ isMobileInPortrait: boolean;
14
+ /** Landscape viewport no taller than 450px, e.g. a phone held sideways */
15
+ isMobileInLandscape: boolean;
12
16
  }
13
17
  export declare function useBreakpoints(): BreakpointsReturn;
14
18
  export {};
package/build/esm/shared/useBreakpoints.js CHANGED
@@ -1 +1 @@
1
- import{useState,useEffect,useMemo}from"react";import breakpoints from"../web-tokens/_breakpoints.json";import{useWindow}from"./useWindow";export function useBreakpoints(){let window=useWindow(),[width,setWidth]=useState(()=>window?window.innerWidth:breakpoints.xl.value);return useEffect(()=>{if(!window)return;let handleResize=()=>{setWidth(window.innerWidth)};return handleResize(),window.addEventListener("resize",handleResize),()=>window.removeEventListener("resize",handleResize)},[window]),useMemo(()=>({isSmallMobile:width<breakpoints.s.value,isMobile:width<breakpoints.m.value,isTablet:width>=breakpoints.m.value&&width<breakpoints.l.value,isDesktop:width>=breakpoints.l.value,isLargeDesktop:width>=breakpoints.xl.value}),[width])}
1
+ import{useState,useEffect,useMemo}from"react";import breakpoints from"../web-tokens/_breakpoints.json";import{useWindow}from"./useWindow";export function useBreakpoints(){let window=useWindow(),[width,setWidth]=useState(()=>window?window.innerWidth:breakpoints.xl.value),[height,setHeight]=useState(()=>window?window.innerHeight:breakpoints.m.value);return useEffect(()=>{if(!window)return;let handleResize=()=>{setWidth(window.innerWidth),setHeight(window.innerHeight)};return handleResize(),window.addEventListener("resize",handleResize),()=>window.removeEventListener("resize",handleResize)},[window]),useMemo(()=>({isSmallMobile:width<breakpoints.s.value,isMobile:width<breakpoints.m.value,isTablet:width>=breakpoints.m.value&&width<breakpoints.l.value,isDesktop:width>=breakpoints.l.value,isLargeDesktop:width>=breakpoints.xl.value,isMobileInPortrait:width<=breakpoints.m.value,isMobileInLandscape:width>height&&height<=450}),[width,height])}
package/build/esm/web-tokens/assets/icons.json CHANGED
@@ -36,6 +36,7 @@
36
36
  "bulb": "<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 10h-4m2 0v7.9m4 0v-4.1c1.6-1.2 2.6-3.1 2.6-5.2 0-3.7-3-6.6-6.6-6.6S5.4 4.9 5.4 8.6c0 2.1 1 4 2.6 5.2v4.1zm-8 0 2 4.1h4l2-4.1\"/></svg>",
37
37
  "calculator": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\" focusable=\"false\"><g fill=\"currentColor\"><path d=\"M8 11c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1m3.983 6H8.017C7.457 17 7 17.45 7 18s.458 1 1.017 1h3.966c.56 0 1.017-.45 1.017-1s-.458-1-1.017-1M11 10c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1m5-1c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1m-7 5c0 .55-.45 1-1 1s-1-.45-1-1 .45-1 1-1 1 .45 1 1m3-1c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1m3 1c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1m1 3c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1\"/><path fill-rule=\"evenodd\" d=\"M6 1h12c1.65 0 3 1.35 3 3v16c0 1.65-1.35 3-3 3H6c-1.65 0-3-1.35-3-3V4c0-1.65 1.35-3 3-3m12 2H6c-.55 0-1 .45-1 1v1h14V4c0-.55-.45-1-1-1M6 21h12c.55 0 1-.45 1-1V7H5v13c0 .55.45 1 1 1\" clip-rule=\"evenodd\"/></g></svg>",
38
38
  "calendar": "<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=\"M16 1a1 1 0 0 1 1 1v1h2a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h2V2a1 1 0 0 1 2 0v1h6V2a1 1 0 0 1 1-1M4 11v9a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-9zm1-6a1 1 0 0 0-1 1v3h16V6a1 1 0 0 0-1-1h-2v1a1 1 0 1 1-2 0V5H9v1a1 1 0 0 1-2 0V5z\" clip-rule=\"evenodd\"/></svg>",
39
+ "camera": "<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=\"M12 8a5 5 0 1 1 0 10 5 5 0 0 1 0-10m0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6\" clip-rule=\"evenodd\"/><path fill-rule=\"evenodd\" d=\"M15 2a1 1 0 0 1 .832.445L17.535 5H20a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3h2.465l1.703-2.555.075-.098A1 1 0 0 1 9 2zM7.832 6.555A1 1 0 0 1 7 7H4a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-3a1 1 0 0 1-.832-.445L14.465 4h-4.93z\" clip-rule=\"evenodd\"/></svg>",
39
40
  "caption": "<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=\"M2 5a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3zm3-1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M6 13a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1m0 4a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1\" clip-rule=\"evenodd\"/></svg>",
40
41
  "cards": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"M20 5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1zm2 4a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3zm-2 8a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1zm2 2a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3z\"/></svg>",
41
42
  "certified": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"M16.28 8.306a1.001 1.001 0 0 1 1.44 1.387l-5.767 6a1 1 0 0 1-1.44.001L7.28 12.346a1 1 0 0 1 1.44-1.39l2.51 2.601z\"/><path fill-rule=\"evenodd\" d=\"M11.66.06c.22-.08.47-.08.69 0l9 3.3c.39.14.66.52.66.94V12c0 7.139-9.168 11.709-9.56 11.9-.14.07-.29.1-.44.1H12c-.15 0-.3-.03-.44-.1C11.165 23.708 2 19.138 2 12V4.3c0-.42.26-.79.66-.94zM4 5v7c0 5.1 6.27 8.91 8 9.87 1.73-.96 8-4.77 8-9.87V5l-8-2.93z\" clip-rule=\"evenodd\"/></svg>",
@@ -100,6 +101,7 @@
100
101
  "folder": "<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=\"M3.6 8a.58.58 0 0 0-.6.6v11.2c0 .348.252.6.6.6h12.8a.58.58 0 0 0 .6-.6V11a.58.58 0 0 0-.6-.6H9.2c-.334 0-.646-.168-.832-.446L7.065 8zm12.8 14.4H3.6A2.57 2.57 0 0 1 1 19.8V8.6C1 7.142 2.142 6 3.6 6h4c.334 0 .646.167.832.444L9.735 8.4H16.4c1.458 0 2.6 1.143 2.6 2.6v8.8c0 1.459-1.142 2.6-2.6 2.6M22 21a1 1 0 0 1-1-1V3H9v1a1 1 0 0 1-2 0V2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1M18 7h-6a1 1 0 0 1 0-2h6a1 1 0 1 1 0 2\"/></svg>",
101
102
  "folder-check-filled": "<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 5a3 3 0 0 1 3-3h5a1 1 0 0 1 .832.445L11.535 5H20a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3zm15.707 5.707a1 1 0 0 0-1.414-1.414L10 14.586l-1.793-1.793a1 1 0 0 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0z\" clip-rule=\"evenodd\"/></svg>",
102
103
  "folder-plus": "<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=\"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2zm-10-8v6m-3-3h6\"/></svg>",
104
+ "folder-simple": "<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=\"M4 4a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-9a1 1 0 0 1-.832-.445L8.465 4zM1 5a3 3 0 0 1 3-3h5a1 1 0 0 1 .832.445L11.535 5H20a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3z\" clip-rule=\"evenodd\"/></svg>",
103
105
  "gift": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" focusable=\"false\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.8 12v11H3.2V12M23 6.5H1V12h22zM12 23V6.5m0 0H7.05a2.75 2.75 0 1 1 0-5.5C10.9 1 12 6.5 12 6.5m0 0h4.95a2.75 2.75 0 0 0 0-5.5C13.1 1 12 6.5 12 6.5\"/></svg>",
104
106
  "globe": "<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=\"M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1M3.057 13a9.005 9.005 0 0 0 6.669 7.709A16.3 16.3 0 0 1 7.05 13zm13.892 0a16.3 16.3 0 0 1-2.676 7.709A9.005 9.005 0 0 0 20.943 13zm-7.89 0A14.3 14.3 0 0 0 12 20.45 14.3 14.3 0 0 0 14.94 13zm5.214-9.71A16.3 16.3 0 0 1 16.949 11h3.994a9.01 9.01 0 0 0-6.67-7.71M12 3.55A14.3 14.3 0 0 0 9.06 11h5.88A14.3 14.3 0 0 0 12 3.55m-2.274-.26A9.01 9.01 0 0 0 3.056 11h3.995a16.3 16.3 0 0 1 2.675-7.71\" clip-rule=\"evenodd\"/></svg>",
105
107
  "google": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\" focusable=\"false\"><path fill=\"#EA4335\" d=\"M12 4.64c2.253 0 3.773.973 4.64 1.787l3.387-3.307C17.947 1.187 15.24 0 12 0 7.307 0 3.253 2.693 1.28 6.613l3.88 3.014C6.133 6.733 8.827 4.64 12 4.64\"/><path fill=\"#4285F4\" d=\"M23.52 12.267c0-.987-.08-1.707-.253-2.454H12v4.454h6.613c-.133 1.106-.853 2.773-2.453 3.893l3.787 2.933C22.213 19 23.52 15.92 23.52 12.267\"/><path fill=\"#FBBC05\" d=\"M5.173 14.373a7.4 7.4 0 0 1-.4-2.373c0-.827.147-1.627.387-2.373L1.28 6.613A12 12 0 0 0 0 12c0 1.933.467 3.76 1.28 5.387z\"/><path fill=\"#34A853\" d=\"M12 24c3.24 0 5.96-1.067 7.947-2.907L16.16 18.16c-1.013.707-2.373 1.2-4.16 1.2-3.173 0-5.867-2.093-6.827-4.987l-3.88 3.014C3.267 21.307 7.307 24 12 24\"/></svg>",
package/build/esm/web-tokens/assets/icons16.json CHANGED
@@ -36,6 +36,7 @@
36
36
  "bulb": "<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 d=\"M8 1a5 5 0 0 0-3.384 8.681c.232.213.384.504.384.819v2.086a1 1 0 0 0 .293.707l1.414 1.414a1 1 0 0 0 .707.293h1.172a1 1 0 0 0 .707-.293l1.414-1.414a1 1 0 0 0 .293-.707V10.5c0-.315.152-.606.384-.819A5 5 0 0 0 8 1z\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.5 6h3M8 7v4.5M5 12h6\"/></g></svg>",
37
37
  "calculator": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 16 16\" focusable=\"false\"><path stroke=\"currentColor\" stroke-width=\"2\" d=\"M2 2a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z\"/><g fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M4 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0m6 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0M8 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2m3 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2M8 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2M5 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2m5 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-5-1a1 1 0 1 0 0 2h3a1 1 0 1 0 0-2z\" clip-rule=\"evenodd\"/><path d=\"M2 1h12v3H2z\"/></g></svg>",
38
38
  "calendar": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" focusable=\"false\"><path fill-rule=\"evenodd\" d=\"M11 1a1 1 0 1 0-2 0H7a1 1 0 0 0-2 0H4a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3zm2 5V4a1 1 0 0 0-1-1h-1a1 1 0 1 1-2 0H7a1 1 0 0 1-2 0H4a1 1 0 0 0-1 1v2zM3 8h10v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z\" clip-rule=\"evenodd\"/></svg>",
39
+ "camera": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" focusable=\"false\"><path fill-rule=\"evenodd\" d=\"M8 6a3 3 0 1 1 0 6 3 3 0 0 1 0-6m0 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2\" clip-rule=\"evenodd\"/><path fill-rule=\"evenodd\" d=\"M10.036 1.008a1 1 0 0 1 .717.455L11.73 3h1.997C15.026 3 16 4.089 16 5.333v7.334C16 13.911 15.026 15 13.727 15H2.272C.974 15 0 13.911 0 12.667V5.333C0 4.089.974 3 2.272 3H4.27l.977-1.537.075-.103A1 1 0 0 1 6.091 1h3.818zm-4.374 3.53A1 1 0 0 1 4.818 5H2.272C2.165 5 2 5.105 2 5.333v7.334c0 .228.165.333.272.333h11.455c.108 0 .273-.105.273-.333V5.333c0-.228-.165-.333-.273-.333h-2.545a1 1 0 0 1-.844-.463L9.36 3H6.64z\" clip-rule=\"evenodd\"/></svg>",
39
40
  "caption": "<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=\"M1 4a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3zm3-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1z\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4 8a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 3a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1\" clip-rule=\"evenodd\"/></svg>",
40
41
  "cards": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" focusable=\"false\"><path fill-rule=\"evenodd\" d=\"M13 10a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2H3l-.204-.01A2 2 0 0 1 1 13v-1a2 2 0 0 1 2-2zM3 13h10v-1H3zM13 1a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zM3 7h10V3H3z\" clip-rule=\"evenodd\"/></svg>",
41
42
  "certified": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" focusable=\"false\"><path d=\"M10.196 5.268a1.002 1.002 0 0 1 1.366 1.463l-3.355 3.13a1 1 0 0 1-1.364 0L5.317 8.438a1 1 0 0 1 1.366-1.462l.841.785z\"/><path fill-rule=\"evenodd\" d=\"M7.67.06c.21-.08.45-.08.66 0l6 2.1c.4.14.67.52.67.94V8c0 4.78-6.31 7.78-6.58 7.91a1.02 1.02 0 0 1-.84 0C7.31 15.79 1 12.79 1 8V3.1c0-.42.27-.8.67-.94zM3 3.81V8c0 2.92 3.72 5.19 5 5.88 1.28-.69 5-2.95 5-5.88V3.81L8 2.06z\" clip-rule=\"evenodd\"/></svg>",
@@ -100,6 +101,7 @@
100
101
  "folder": "<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=\"M7 2h7v11a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2z\" clip-rule=\"evenodd\"/><g stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 13.788c0 .321-.129.63-.358.857s-.54.355-.864.355H2.222c-.324 0-.635-.128-.864-.355S1 14.109 1 13.788V6.212c0-.321.129-.63.358-.857.23-.227.54-.355.864-.355h2.903l1.222 2h4.43c.325 0 .636.128.865.355.23.227.358.536.358.857z\"/><path stroke-linecap=\"square\" d=\"M9 4h3\"/></g></svg>",
101
102
  "folder-check-filled": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 16 16\" focusable=\"false\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 12.667A1.334 1.334 0 0 1 12.667 14H3.333A1.334 1.334 0 0 1 2 12.667V3.333A1.333 1.333 0 0 1 3.333 2H6.5l1.333 2h4.834A1.333 1.333 0 0 1 14 5.333z\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M13.61 13.61c.25-.25.39-.59.39-.943V5.333A1.334 1.334 0 0 0 12.667 4H7.833L6.5 2H3.333A1.333 1.333 0 0 0 2 3.333v9.334A1.333 1.333 0 0 0 3.333 14h9.334c.353 0 .692-.14.943-.39m-1.914-5.892a1 1 0 1 0-1.392-1.436L6.875 9.607 5.696 8.464A1 1 0 0 0 4.304 9.9l1.875 1.818a1 1 0 0 0 1.392 0z\" clip-rule=\"evenodd\"/></svg>",
102
103
  "folder-plus": "<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-linejoin=\"round\" stroke-width=\"2\"><path stroke-linecap=\"round\" d=\"M14 12.667A1.334 1.334 0 0 1 12.667 14H3.333A1.334 1.334 0 0 1 2 12.667V3.333A1.333 1.333 0 0 1 3.333 2H6.5l1.333 2h4.834A1.333 1.333 0 0 1 14 5.333z\"/><path stroke-linecap=\"square\" d=\"M8 7v4M6 9h4\"/></g></svg>",
104
+ "folder-simple": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" focusable=\"false\"><path fill-rule=\"evenodd\" d=\"M1.683 1.683A2.33 2.33 0 0 1 3.333 1H6.5a1 1 0 0 1 .832.445L8.37 3h4.298A2.333 2.333 0 0 1 15 5.333v7.334A2.333 2.333 0 0 1 12.667 15H3.333A2.333 2.333 0 0 1 1 12.667V3.333c0-.618.246-1.212.683-1.65M3.333 3A.333.333 0 0 0 3 3.333v9.334a.333.333 0 0 0 .333.333h9.334a.333.333 0 0 0 .333-.333V5.333A.333.333 0 0 0 12.667 5H7.833a1 1 0 0 1-.832-.445L5.965 3z\" clip-rule=\"evenodd\"/></svg>",
103
105
  "gift": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 16 16\" focusable=\"false\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 8v7H2V8m13-3H1v3h14zM8 15V5m0-1H4.786c-.474 0-.928-.158-1.263-.44C3.188 3.28 3 2.899 3 2.5s.188-.78.523-1.06A1.97 1.97 0 0 1 4.786 1C7.286 1 8 4 8 4m0 0h3.214c.474 0 .928-.158 1.263-.44S13 2.899 13 2.5s-.188-.78-.523-1.06-.79-.44-1.263-.44C8.714 1 8 4 8 4\"/></svg>",
104
106
  "globe": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\" focusable=\"false\"><path fill-rule=\"evenodd\" d=\"M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M2.085 9a6 6 0 0 0 3.5 4.492A11.2 11.2 0 0 1 4.068 9zm9.848 0a11.2 11.2 0 0 1-1.52 4.492A6 6 0 0 0 13.915 9zM6.084 9A9.3 9.3 0 0 0 8 13.481 9.3 9.3 0 0 0 9.915 9zm4.328-6.494A11.2 11.2 0 0 1 11.932 7h1.983a6 6 0 0 0-3.503-4.494M8 2.518A9.3 9.3 0 0 0 6.084 7h3.831A9.3 9.3 0 0 0 8 2.518m-2.414-.011A6 6 0 0 0 2.085 7h1.982a11.2 11.2 0 0 1 1.519-4.493\" clip-rule=\"evenodd\"/></svg>",
105
107
  "google": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 16 16\" focusable=\"false\"><path fill=\"#ea4335\" d=\"M8 3.093c1.502 0 2.516.65 3.093 1.191l2.258-2.204C11.964.791 10.161 0 8.001 0A7.99 7.99 0 0 0 .852 4.409L3.44 6.418C4.09 4.488 5.885 3.093 8 3.093\"/><path fill=\"#4285f4\" d=\"M15.68 8.178c0-.658-.053-1.138-.169-1.636H8v2.97h4.409c-.089.737-.569 1.848-1.636 2.595l2.525 1.955c1.51-1.395 2.382-3.449 2.382-5.884\"/><path fill=\"#fbbc05\" d=\"M3.449 9.582A5 5 0 0 1 3.182 8c0-.551.098-1.084.258-1.582L.853 4.408C.311 5.494 0 6.712 0 8s.311 2.507.853 3.591z\"/><path fill=\"#34a853\" d=\"M8 16c2.16 0 3.973-.711 5.298-1.938l-2.525-1.955c-.675.47-1.582.8-2.773.8-2.116 0-3.911-1.396-4.551-3.325l-2.587 2.01C2.178 14.204 4.872 16 8 16\"/></svg>",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@amboss/design-system",
3
- "version": "4.6.1",
3
+ "version": "4.6.3",
4
4
  "description": "the design system for AMBOSS products",
5
5
  "author": "AMBOSS",
6
6
  "license": "ISC",