npm - @vibe/core - Versions diffs - 3.0.0-alpha.4 → 3.0.0-alpha.6 - Mend

@vibe/core 3.0.0-alpha.4 → 3.0.0-alpha.6

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 (2011) hide show

package/dist/src/components/Menu/MenuTitle/MenuTitle.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var t={title:"title_7033c4d4b4",titleCaption:"titleCaption_9350edea8b",titleCaptionCenter:"titleCaptionCenter_dc069d9948",titleCaptionBottom:"titleCaptionBottom_f30f8700d6",titleCaptionTop:"titleCaptionTop_0257eb4fab"};!function(t){if("undefined"==typeof document)return;const n=document.head||document.getElementsByTagName("head")[0],e="s_id-48e3e93eaf49_3_0_0-alpha_3";if(n.querySelector("#"+e))return;const o=document.createElement("style");o.id=e,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(t))}('.title_7033c4d4b4 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  padding-block: 1px;\n}\n\n.titleCaption_9350edea8b {\n  color: var(--icon-color);\n  margin: var(--spacing-small) 0;\n}\n\n.titleCaptionCenter_dc069d9948 {\n  display: flex;\n  flex-basis: 100%;\n  align-items: center;\n}\n\n.titleCaptionBottom_f30f8700d6,\n.titleCaptionTop_0257eb4fab {\n  padding-left: var(--spacing-small);\n}\n\n.titleCaptionBottom_f30f8700d6 {\n  padding-bottom: var(--spacing-small);\n}\n\n.titleCaptionCenter_dc069d9948::before,\n.titleCaptionCenter_dc069d9948::after {\n  content: "";\n  flex-grow: 1;\n  background-color: var(--ui-border-color);\n  height: 1px;\n  font-size: 0;\n  line-height: 0;\n  margin: 0 var(--spacing-small);\n}');export{t as default};
+var t={title:"title_7c753e3b09",titleCaption:"titleCaption_3557d8eac9",titleCaptionCenter:"titleCaptionCenter_d9db58f9ea",titleCaptionBottom:"titleCaptionBottom_76b81f9e7c",titleCaptionTop:"titleCaptionTop_3466040818"};!function(t){if("undefined"==typeof document)return;const n=document.head||document.getElementsByTagName("head")[0],e="s_id-48e3e93eaf49_3_0_0-alpha_5";if(n.querySelector("#"+e))return;const o=document.createElement("style");o.id=e,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(t))}('.title_7c753e3b09 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  padding-block: 1px;\n}\n\n.titleCaption_3557d8eac9 {\n  color: var(--icon-color);\n  margin: var(--spacing-small) 0;\n}\n\n.titleCaptionCenter_d9db58f9ea {\n  display: flex;\n  flex-basis: 100%;\n  align-items: center;\n}\n\n.titleCaptionBottom_76b81f9e7c,\n.titleCaptionTop_3466040818 {\n  padding-left: var(--spacing-small);\n}\n\n.titleCaptionBottom_76b81f9e7c {\n  padding-bottom: var(--spacing-small);\n}\n\n.titleCaptionCenter_d9db58f9ea::before,\n.titleCaptionCenter_d9db58f9ea::after {\n  content: "";\n  flex-grow: 1;\n  background-color: var(--ui-border-color);\n  height: 1px;\n  font-size: 0;\n  line-height: 0;\n  margin: 0 var(--spacing-small);\n}');export{t as default};
 //# sourceMappingURL=MenuTitle.module.scss.js.map

package/dist/src/components/MenuButton/MenuButton.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import i,{forwardRef as t,useRef as r,useState as n,useCallback as s,useMemo as a,useLayoutEffect as l}from"react";import d from"classnames";import{camelCase as m}from"lodash-es";import{isForwardRef as g}from"react-is";import p from"../Dialog/Dialog.js";import c from"../DialogContentContainer/DialogContentContainer.js";import u from"../Tooltip/Tooltip.js";import f from"../../hooks/useMergeRef.js";import{BUTTON_ICON_SIZE as h}from"../Button/ButtonConstants.js";import{withStaticProps as v}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{MenuButtonSize as T,MenuButtonComponentPosition as C}from"./MenuButtonConstants.js";import{DialogSize as E,DialogPosition as S,HideShowEvent as w}from"../Dialog/DialogConstants.js";import{NOOP as j}from"../../utils/function-utils.js";import{getStyle as y}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as O,ComponentDefaultTestId as b}from"../../tests/testIds.js";import M from"./MenuButton.module.scss.js";import P from"../Icon/Icons/components/Menu.js";var D={main:8,secondary:0},A=t((function(t,v){var T=t.id,C=t.className,E=t.openDialogComponentClassName,S=t.children,w=t.component,I=void 0===w?P:w,x=t.componentPosition,_=void 0===x?"start":x,z=t.size,B=void 0===z?"small":z,N=t.open,H=void 0!==N&&N,R=t.onClick,K=void 0===R?j:R,k=t.zIndex,L=void 0===k?null:k,U=t.ariaLabel,Y=void 0===U?"Menu":U,W=t.closeMenuOnItemClick,F=t.dialogOffset,V=void 0===F?D:F,q=t.dialogPosition,G=void 0===q?p.positions.BOTTOM_START:q,J=t.dialogClassName,Q=t.dialogPaddingSize,X=void 0===Q?c.sizes.SMALL:Q,Z=t.dialogShowTriggerIgnoreClass,$=t.dialogHideTriggerIgnoreClass,ee=t.onMenuHide,oe=void 0===ee?j:ee,ie=t.onMenuShow,te=void 0===ie?j:ie,re=t.disabled,ne=void 0!==re&&re,se=t.text,ae=t.tooltipContent,le=t.tooltipProps,de=t.tooltipTriggers,me=void 0===de?[A.hideTriggers.MOUSE_LEAVE]:de,ge=t.tooltipPosition,pe=void 0===ge?"right":ge,ce=t.startingEdge,ue=void 0===ce?"bottom":ce,fe=t.removeTabCloseTrigger,he=void 0!==fe&&fe,ve=t.tooltipReferenceClassName,Te=t.hideWhenReferenceHidden,Ce=void 0!==Te&&Te,Ee=t.dialogContainerSelector,Se=t.active,we=t.triggerElement,je=void 0===we?"button":we,ye=t.showTooltipOnlyOnTriggerElement,Oe=t["data-testid"],be=r(null),Me=f(v,be),Pe=n(H),De=e(Pe,2),Ae=De[0],Ie=De[1],xe=null!=Se?Se:Ae,_e=s((function(e){oe(),Ie(!1);var o=be.current;o&&e&&window.requestAnimationFrame((function(){o.focus()}))}),[oe]),ze=s((function(e){var o="Escape"===(null==e?void 0:e.key);(o||W)&&e.propagate&&_e(o)}),[W,_e]),Be=s((function(e,o){_e(o===p.hideShowTriggers.ESCAPE_KEY)}),[_e]),Ne=s((function(){Ie(!0),te()}),[Ie,te]),He=a((function(){var e=new Set([p.hideShowTriggers.CLICK_OUTSIDE,p.hideShowTriggers.TAB_KEY,p.hideShowTriggers.ESCAPE_KEY]);return he&&e.delete(p.hideShowTriggers.TAB_KEY),[i.Children.toArray(S).map((function(o){if(!i.isValidElement(o))return null;var t={};return o.type&&o.type.supportFocusOnMount&&(t.focusOnMount=!0,e.delete(p.hideShowTriggers.ESCAPE_KEY)),o.type&&o.type.isMenu&&(t.onClose=ze),i.cloneElement(o,t)})),Array.from(e)]}),[S,ze,he]),Re=e(He,2),Ke=Re[0],ke=Re[1],Le=a((function(){return 0===Ke.length?null:i.createElement(c,{size:X,type:c.types.POPOVER},Ke)}),[Ke,X]),Ue=a((function(){return Object.assign(Object.assign({},D),V)}),[V]),Ye=I,We=a((function(){switch(B){case"xxs":case"xs":return 16;case"small":case"medium":case"large":return h;default:return 24}}),[B]),Fe=Ye?i.createElement(Ye,{size:""+We,role:"img","aria-hidden":"true"}):null;l((function(){Ie(H)}),[H,Ie]);var Ve="button"===je?{ref:Me}:{active:xe,disabled:ne,ref:g(je)?Me:void 0},qe=i.createElement(je,Object.assign({id:T,"data-testid":Oe||O(b.MENU_BUTTON,T),type:"button",className:d(M.wrapper,C,y(M,m("size-".concat(B))),o(o(o(o({},M.active,xe),y(M,E),Ae&&E),M.disabled,ne),M.text,se)),"aria-haspopup":"true","aria-expanded":Ae,"aria-label":!se&&Y,onMouseUp:function(e){ne?e.currentTarget.blur():K(e)},"aria-disabled":ne},Ve),"start"===_&&Fe,se&&i.createElement("span",{className:M.innerText},se),"end"===_&&Fe),Ge=function(e){return i.createElement(p,{wrapperClassName:J,position:G,containerSelector:Ee,startingEdge:ue,animationType:"expand",content:Le,moveBy:Ue,showTrigger:ne?[]:["click","enter"],hideTrigger:ke,showTriggerIgnoreClass:Z,hideTriggerIgnoreClass:$,useDerivedStateFromProps:!0,onDialogDidShow:Ne,onDialogDidHide:Be,zIndex:L,isOpen:Ae,hideWhenReferenceHidden:Ce},e)},Je=function(e){return i.createElement(u,Object.assign({content:ae,position:pe,showTrigger:"mouseenter",hideTrigger:me,referenceWrapperClassName:ve,hideWhenReferenceHidden:Ce},le),e)};return ye?Ge(Je(qe)):Je(Ge(qe))})),I=v(A,{sizes:T,paddingSizes:E,dialogPositions:S,hideTriggers:w,componentPositions:C});export{I as default};
+import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import i,{forwardRef as t,useRef as r,useState as s,useCallback as n,useMemo as a,useLayoutEffect as d}from"react";import c from"classnames";import{camelCase as l}from"lodash-es";import{isForwardRef as m}from"react-is";import p from"../Dialog/Dialog.js";import g from"../DialogContentContainer/DialogContentContainer.js";import u from"../Tooltip/Tooltip.js";import f from"../../hooks/useMergeRef.js";import{BUTTON_ICON_SIZE as h}from"../Button/ButtonConstants.js";import{withStaticProps as v}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{MenuButtonSize as j,MenuButtonComponentPosition as C}from"./MenuButtonConstants.js";import{DialogSize as T,DialogPosition as E,HideShowEvent as S}from"../Dialog/DialogConstants.js";import{NOOP as w}from"../../utils/function-utils.js";import"../../../icons/dist/_virtual/_tslib.js";import"../../../icons/dist/react/AddSmall.js";import"../../../icons/dist/react/Alert.js";import"../../../icons/dist/react/Check.js";import"../../../icons/dist/react/CloseSmall.js";import"../../../icons/dist/react/DropdownChevronDown.js";import"../../../icons/dist/react/DropdownChevronRight.js";import"../../../icons/dist/react/DropdownChevronUp.js";import"../../../icons/dist/react/Info.js";import M from"../../../icons/dist/react/Menu.js";import"../../../icons/dist/react/MoveArrowLeft.js";import"../../../icons/dist/react/MoveArrowRight.js";import"../../../icons/dist/react/NavigationChevronLeft.js";import"../../../icons/dist/react/NavigationChevronRight.js";import"../../../icons/dist/react/NoColor.js";import"../../../icons/dist/react/Remove.js";import"../../../icons/dist/react/Search.js";import"../../../icons/dist/react/Sort.js";import"../../../icons/dist/react/SortAscending.js";import"../../../icons/dist/react/SortDescending.js";import"../../../icons/dist/react/Warning.js";import{getStyle as b}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as y,ComponentDefaultTestId as D}from"../../tests/testIds.js";import O from"./MenuButton.module.scss.js";var A={main:8,secondary:0},P=t((function(t,v){var j=t.id,C=t.className,T=t.openDialogComponentClassName,E=t.children,S=t.component,N=void 0===S?M:S,_=t.componentPosition,x=void 0===_?"start":_,I=t.size,R=void 0===I?"small":I,z=t.open,B=void 0!==z&&z,H=t.onClick,L=void 0===H?w:H,k=t.zIndex,K=void 0===k?null:k,U=t.ariaLabel,W=void 0===U?"Menu":U,Y=t.closeMenuOnItemClick,F=t.dialogOffset,V=void 0===F?A:F,q=t.dialogPosition,G=void 0===q?p.positions.BOTTOM_START:q,J=t.dialogClassName,Q=t.dialogPaddingSize,X=void 0===Q?g.sizes.SMALL:Q,Z=t.dialogShowTriggerIgnoreClass,$=t.dialogHideTriggerIgnoreClass,ee=t.onMenuHide,oe=void 0===ee?w:ee,ie=t.onMenuShow,te=void 0===ie?w:ie,re=t.disabled,se=void 0!==re&&re,ne=t.text,ae=t.tooltipContent,de=t.tooltipProps,ce=t.tooltipTriggers,le=void 0===ce?[P.hideTriggers.MOUSE_LEAVE]:ce,me=t.tooltipPosition,pe=void 0===me?"right":me,ge=t.startingEdge,ue=void 0===ge?"bottom":ge,fe=t.removeTabCloseTrigger,he=void 0!==fe&&fe,ve=t.tooltipReferenceClassName,je=t.hideWhenReferenceHidden,Ce=void 0===je||je,Te=t.dialogContainerSelector,Ee=t.active,Se=t.triggerElement,we=void 0===Se?"button":Se,Me=t.showTooltipOnlyOnTriggerElement,be=t["data-testid"],ye=r(null),De=f(v,ye),Oe=s(B),Ae=e(Oe,2),Pe=Ae[0],Ne=Ae[1],_e=null!=Ee?Ee:Pe,xe=n((function(e){oe(),Ne(!1);var o=ye.current;o&&e&&window.requestAnimationFrame((function(){o.focus()}))}),[oe]),Ie=n((function(e){var o="Escape"===(null==e?void 0:e.key);(o||Y)&&e.propagate&&xe(o)}),[Y,xe]),Re=n((function(e,o){xe(o===p.hideShowTriggers.ESCAPE_KEY)}),[xe]),ze=n((function(){Ne(!0),te()}),[Ne,te]),Be=a((function(){var e=new Set([p.hideShowTriggers.CLICK_OUTSIDE,p.hideShowTriggers.TAB_KEY,p.hideShowTriggers.ESCAPE_KEY]);return he&&e.delete(p.hideShowTriggers.TAB_KEY),[i.Children.toArray(E).map((function(o){if(!i.isValidElement(o))return null;var t={};return o.type&&o.type.supportFocusOnMount&&(t.focusOnMount=!0,e.delete(p.hideShowTriggers.ESCAPE_KEY)),o.type&&o.type.isMenu&&(t.onClose=Ie),i.cloneElement(o,t)})),Array.from(e)]}),[E,Ie,he]),He=e(Be,2),Le=He[0],ke=He[1],Ke=a((function(){return 0===Le.length?null:i.createElement(g,{size:X,type:g.types.POPOVER},Le)}),[Le,X]),Ue=a((function(){return Object.assign(Object.assign({},A),V)}),[V]),We=N,Ye=a((function(){switch(R){case"xxs":case"xs":return 16;case"small":case"medium":case"large":return h;default:return 24}}),[R]),Fe=We?i.createElement(We,{size:""+Ye,role:"img","aria-hidden":"true"}):null;d((function(){Ne(B)}),[B,Ne]);var Ve="button"===we?{ref:De}:{active:_e,disabled:se,ref:m(we)?De:void 0},qe=i.createElement(we,Object.assign({id:j,"data-testid":be||y(D.MENU_BUTTON,j),type:"button",className:c(O.wrapper,C,b(O,l("size-".concat(R))),o(o(o(o({},O.active,_e),b(O,T),Pe&&T),O.disabled,se),O.text,ne)),"aria-haspopup":"true","aria-expanded":Pe,"aria-label":!ne&&W,onMouseUp:function(e){se?e.currentTarget.blur():L(e)},"aria-disabled":se},Ve),"start"===x&&Fe,ne&&i.createElement("span",{className:O.innerText},ne),"end"===x&&Fe),Ge=function(e){return i.createElement(p,{wrapperClassName:J,position:G,containerSelector:Te,startingEdge:ue,animationType:"expand",content:Ke,moveBy:Ue,showTrigger:se?[]:["click","enter"],hideTrigger:ke,showTriggerIgnoreClass:Z,hideTriggerIgnoreClass:$,useDerivedStateFromProps:!0,onDialogDidShow:ze,onDialogDidHide:Re,zIndex:K,isOpen:Pe,hideWhenReferenceHidden:Ce},e)},Je=function(e){return i.createElement(u,Object.assign({content:ae,position:pe,showTrigger:"mouseenter",hideTrigger:le,referenceWrapperClassName:ve,hideWhenReferenceHidden:Ce},de),e)};return Me?Ge(Je(qe)):Je(Ge(qe))})),N=v(P,{sizes:j,paddingSizes:T,dialogPositions:E,hideTriggers:S,componentPositions:C});export{N as default};
 //# sourceMappingURL=MenuButton.js.map

package/dist/src/components/MenuButton/MenuButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuButton.js","sources":["../../../../src/components/MenuButton/MenuButton.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"lodash-es\";\nimport { isForwardRef } from \"react-is\";\nimport Dialog, { DialogEvent } from \"../Dialog/Dialog\";\nimport DialogContentContainer from \"../DialogContentContainer/DialogContentContainer\";\nimport Tooltip, { TooltipProps } from \"../Tooltip/Tooltip\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { BUTTON_ICON_SIZE } from \"../Button/ButtonConstants\";\nimport { ElementContent, VibeComponent, VibeComponentProps, withStaticProps } from \"../../types\";\nimport {\n MenuButtonComponentPosition as MenuButtonComponentPositionEnum,\n MenuButtonSize as MenuButtonSizeEnum\n} from \"./MenuButtonConstants\";\nimport {\n DialogPosition as DialogPositionEnum,\n HideShowEvent as DialogTriggerEventEnum,\n DialogSize as DialogSizeEnum\n} from \"../Dialog/DialogConstants\";\nimport { MenuButtonComponentPosition, MenuButtonSize } from \"./MenuButton.types\";\nimport { DialogOffset, DialogPosition, DialogSize, DialogTriggerEvent } from \"../Dialog/Dialog.types\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { Menu } from \"../Icon/Icons\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { MenuChild } from \"../Menu/Menu/MenuConstants\";\nimport styles from \"./MenuButton.module.scss\";\nimport { TooltipPositions } from \"../Tooltip/Tooltip.types\";\n\nconst MOVE_BY = { main: 8, secondary: 0 };\n\nexport interface MenuButtonProps extends VibeComponentProps {\n /*\n Control the button's selected state\n /\n active?: boolean;\n /\n Class name to add to the button when the dialog is open\n /\n openDialogComponentClassName?: string;\n /\n Receives React Component\n /\n component?: (() => JSX.Element) \| React.ElementType;\n size?: MenuButtonSize;\n open?: boolean;\n onClick?: (event: React.MouseEvent) => void;\n zIndex?: number;\n ariaLabel?: string;\n /\n Class name to provide the element which wraps the popover/modal/dialog\n /\n dialogClassName?: string;\n /\n main - `dialogOffset.main` - main axis offset; `dialogOffset.secondary` secondary axis offset\n /\n dialogOffset?: DialogOffset;\n dialogPaddingSize?: DialogSize;\n dialogPosition?: DialogPosition;\n dialogShowTriggerIgnoreClass?: string;\n dialogHideTriggerIgnoreClass?: string;\n /\n the container selector in which to append the dialog\n * for examples: \"body\" , \".my-class\", \"#my-id\"\n /\n dialogContainerSelector?: string;\n /\n Dialog Alignment\n /\n startingEdge?: string;\n /\n Callback function to be called when the menu is shown\n /\n onMenuShow?: () => void;\n /\n Callback function to be called when the menu is hidden\n /\n onMenuHide?: () => void;\n /\n Text to be displayed after the icon\n /\n text?: string;\n disabled?: boolean;\n tooltipContent?: string;\n /\n Remove \"Tab\" key from the hide trigger\n /\n removeTabCloseTrigger?: boolean;\n /*\n is an array with the content of types:\n CLICK, CLICK_OUTSIDE, ESCAPE_KEY, TAB_KEY, MOUSE_ENTER, MOUSE_LEAVE,\n ENTER, MOUSE_DOWN, FOCUS, BLUR, CONTENT_CLICK\n /\n tooltipTriggers?: DialogTriggerEvent \| DialogTriggerEvent[];\n /*\n the disabled/tooltip position of the menu button - one of the MenuButton.dialogPositions\n /\n tooltipPosition?: TooltipPositions;\n /\n Tooltip Element Wrapper ClassName\n /\n tooltipReferenceClassName?: string;\n tooltipProps?: Partial<TooltipProps>;\n /\n When the MenuButton is hidden hide the dialog and tooltip as well\n /\n hideWhenReferenceHidden?: boolean;\n children?: ElementContent;\n /\n Specifies whether to render the component before or after the text\n /\n componentPosition?: MenuButtonComponentPosition;\n /\n Element to be used as the trigger element for the Menu - default is button\n /\n triggerElement?: React.ElementType;\n /\n Close the menu when an item is clicked\n /\n closeMenuOnItemClick?: boolean;\n /\n Whether tooltip should appear only when the trigger element is hovered and not the menu dialog\n */\n showTooltipOnlyOnTriggerElement?: boolean;\n}\n\nconst MenuButton: VibeComponent<MenuButtonProps> & {\n sizes?: typeof MenuButtonSizeEnum;\n paddingSizes?: typeof DialogContentContainer.sizes;\n dialogPositions?: typeof DialogPositionEnum;\n hideTriggers?: typeof Dialog.hideShowTriggers;\n componentPositions?: typeof MenuButtonComponentPositionEnum;\n} = forwardRef(\n (\n {\n id,\n className,\n openDialogComponentClassName,\n children,\n component = Menu,\n componentPosition = \"start\",\n size = \"small\",\n open = false,\n onClick = NOOP,\n zIndex = null,\n ariaLabel = \"Menu\",\n closeMenuOnItemClick,\n dialogOffset = MOVE_BY,\n dialogPosition = Dialog.positions.BOTTOM_START,\n dialogClassName,\n dialogPaddingSize = DialogContentContainer.sizes.SMALL,\n dialogShowTriggerIgnoreClass,\n dialogHideTriggerIgnoreClass,\n onMenuHide = NOOP,\n onMenuShow = NOOP,\n disabled = false,\n text,\n tooltipContent,\n tooltipProps,\n tooltipTriggers = [MenuButton.hideTriggers.MOUSE_LEAVE],\n tooltipPosition = \"right\",\n startingEdge = \"bottom\",\n removeTabCloseTrigger = false,\n tooltipReferenceClassName,\n hideWhenReferenceHidden = false,\n dialogContainerSelector,\n active,\n triggerElement: TriggerElement = \"button\",\n showTooltipOnlyOnTriggerElement,\n \"data-testid\": dataTestId\n }: MenuButtonProps,\n ref\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n const [isOpen, setIsOpen] = useState(open);\n const isActive = active ?? isOpen;\n\n const handleMenuClose = useCallback(\n (focusOnMenuButtonAfterClose: boolean) => {\n onMenuHide();\n setIsOpen(false);\n const button = componentRef.current;\n if (!button \|\| !focusOnMenuButtonAfterClose) {\n return;\n }\n window.requestAnimationFrame(() => {\n button.focus();\n });\n },\n [onMenuHide]\n );\n\n const onMenuDidClose = useCallback(\n (event: React.KeyboardEvent) => {\n // TODO: check the functionality of the isEscapeKey since the event is not an actual KeyboardEVent but an object with propagate property only\n const isEscapeKey = event?.key === \"Escape\";\n if (isEscapeKey \|\| closeMenuOnItemClick) {\n // @ts-ignore\n if (event.propagate) {\n handleMenuClose(isEscapeKey);\n }\n }\n },\n [closeMenuOnItemClick, handleMenuClose]\n );\n\n const onDialogDidHide = useCallback(\n (event: DialogEvent, hideEvent: string) => {\n handleMenuClose(hideEvent === Dialog.hideShowTriggers.ESCAPE_KEY);\n },\n [handleMenuClose]\n );\n\n const onDialogDidShow = useCallback(() => {\n setIsOpen(true);\n onMenuShow();\n }, [setIsOpen, onMenuShow]);\n\n const [clonedChildren, hideTrigger] = useMemo(() => {\n const triggers = new Set([\n Dialog.hideShowTriggers.CLICK_OUTSIDE,\n Dialog.hideShowTriggers.TAB_KEY,\n Dialog.hideShowTriggers.ESCAPE_KEY\n ]);\n\n if (removeTabCloseTrigger) {\n triggers.delete(Dialog.hideShowTriggers.TAB_KEY);\n }\n const childrenArr = React.Children.toArray(children) as MenuChild[];\n const cloned = childrenArr.map(child => {\n if (!React.isValidElement(child)) return null;\n\n const newProps: { focusOnMount?: boolean; onClose?: (event: React.KeyboardEvent) => void } = {};\n if (child.type && child.type.supportFocusOnMount) {\n newProps.focusOnMount = true;\n triggers.delete(Dialog.hideShowTriggers.ESCAPE_KEY);\n }\n\n if (child.type && child.type.isMenu) {\n newProps.onClose = onMenuDidClose;\n }\n\n return React.cloneElement(child, newProps);\n });\n return [cloned, Array.from(triggers)];\n }, [children, onMenuDidClose, removeTabCloseTrigger]);\n\n const content = useMemo(() => {\n if (clonedChildren.length === 0) return null;\n return (\n <DialogContentContainer size={dialogPaddingSize} type={DialogContentContainer.types.POPOVER}>\n {clonedChildren}\n </DialogContentContainer>\n );\n }, [clonedChildren, dialogPaddingSize]);\n\n const computedDialogOffset = useMemo(\n () => ({\n ...MOVE_BY,\n ...dialogOffset\n }),\n [dialogOffset]\n );\n\n const onMouseUp = (event: React.MouseEvent<HTMLElement>) => {\n if (disabled) {\n event.currentTarget.blur();\n return;\n }\n onClick(event);\n };\n\n const Icon = component;\n const iconSize = useMemo(() => {\n switch (size) {\n case \"xxs\":\n case \"xs\":\n return 16;\n case \"small\":\n case \"medium\":\n case \"large\":\n return BUTTON_ICON_SIZE;\n default:\n return 24;\n }\n }, [size]);\n const icon = Icon ? <Icon size={iconSize.toString()} role=\"img\" aria-hidden=\"true\" /> : null;\n\n useLayoutEffect(() => {\n setIsOpen(open);\n }, [open, setIsOpen]);\n\n // Trigger element props, which are only relevant for \"button\" element, but might be needed for other elements e.g. Button\n const triggerElementProps =\n TriggerElement === \"button\"\n ? {\n ref: mergedRef\n }\n : {\n active: isActive,\n disabled: disabled,\n ref: isForwardRef(TriggerElement) ? mergedRef : undefined\n };\n\n const triggerElementNode = (\n <TriggerElement\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.MENU_BUTTON, id)}\n type=\"button\"\n className={cx(styles.wrapper, className, getStyle(styles, camelCase(`size-${size}`)), {\n [styles.active]: isActive,\n [getStyle(styles, openDialogComponentClassName)]: isOpen && openDialogComponentClassName,\n [styles.disabled]: disabled,\n [styles.text]: text\n })}\n aria-haspopup=\"true\"\n aria-expanded={isOpen}\n aria-label={!text && ariaLabel}\n onMouseUp={onMouseUp}\n aria-disabled={disabled}\n {...triggerElementProps}\n >\n {componentPosition === \"start\" && icon}\n {text && <span className={styles.innerText}>{text}</span>}\n {componentPosition === \"end\" && icon}\n </TriggerElement>\n );\n\n const dialogNode = (dialogChildren: React.ReactElement) => (\n <Dialog\n wrapperClassName={dialogClassName}\n position={dialogPosition}\n containerSelector={dialogContainerSelector}\n startingEdge={startingEdge}\n animationType=\"expand\"\n content={content}\n moveBy={computedDialogOffset}\n showTrigger={disabled ? [] : [\"click\", \"enter\"]}\n hideTrigger={hideTrigger}\n showTriggerIgnoreClass={dialogShowTriggerIgnoreClass}\n hideTriggerIgnoreClass={dialogHideTriggerIgnoreClass}\n useDerivedStateFromProps={true}\n onDialogDidShow={onDialogDidShow}\n onDialogDidHide={onDialogDidHide}\n zIndex={zIndex}\n isOpen={isOpen}\n hideWhenReferenceHidden={hideWhenReferenceHidden}\n >\n {dialogChildren}\n </Dialog>\n );\n\n const tooltipNode = (tooltipChildren: React.ReactElement) => (\n <Tooltip\n content={tooltipContent}\n position={tooltipPosition}\n showTrigger=\"mouseenter\"\n hideTrigger={tooltipTriggers}\n referenceWrapperClassName={tooltipReferenceClassName}\n hideWhenReferenceHidden={hideWhenReferenceHidden}\n {...tooltipProps}\n >\n {tooltipChildren}\n </Tooltip>\n );\n\n if (showTooltipOnlyOnTriggerElement) {\n return dialogNode(tooltipNode(triggerElementNode));\n }\n return tooltipNode(dialogNode(triggerElementNode));\n }\n);\n\nexport default withStaticProps(MenuButton, {\n sizes: MenuButtonSizeEnum,\n paddingSizes: DialogSizeEnum,\n dialogPositions: DialogPositionEnum,\n hideTriggers: DialogTriggerEventEnum,\n componentPositions: MenuButtonComponentPositionEnum\n});\n"],"names":["MOVE_BY","main","secondary","MenuButton","forwardRef","_ref","ref","id","className","openDialogComponentClassName","children","_ref$component","component","Menu","_ref$componentPositio","componentPosition","_ref$size","size","_ref$open","open","_ref$onClick","onClick","NOOP","_ref$zIndex","zIndex","_ref$ariaLabel","ariaLabel","closeMenuOnItemClick","_ref$dialogOffset","dialogOffset","_ref$dialogPosition","dialogPosition","Dialog","positions","BOTTOM_START","dialogClassName","_ref$dialogPaddingSiz","dialogPaddingSize","DialogContentContainer","sizes","SMALL","dialogShowTriggerIgnoreClass","dialogHideTriggerIgnoreClass","_ref$onMenuHide","onMenuHide","_ref$onMenuShow","onMenuShow","_ref$disabled","disabled","text","tooltipContent","tooltipProps","_ref$tooltipTriggers","tooltipTriggers","hideTriggers","MOUSE_LEAVE","_ref$tooltipPosition","tooltipPosition","_ref$startingEdge","startingEdge","_ref$removeTabCloseTr","removeTabCloseTrigger","tooltipReferenceClassName","_ref$hideWhenReferenc","hideWhenReferenceHidden","dialogContainerSelector","active","_ref$triggerElement","triggerElement","TriggerElement","showTooltipOnlyOnTriggerElement","dataTestId","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isOpen","setIsOpen","isActive","handleMenuClose","useCallback","focusOnMenuButtonAfterClose","button","current","window","requestAnimationFrame","focus","onMenuDidClose","event","isEscapeKey","key","propagate","onDialogDidHide","hideEvent","hideShowTriggers","ESCAPE_KEY","onDialogDidShow","_useMemo","useMemo","triggers","Set","CLICK_OUTSIDE","TAB_KEY","delete","React","Children","toArray","map","child","isValidElement","newProps","type","supportFocusOnMount","focusOnMount","isMenu","onClose","cloneElement","Array","from","_useMemo2","clonedChildren","hideTrigger","content","length","createElement","types","POPOVER","computedDialogOffset","Object","assign","Icon","iconSize","BUTTON_ICON_SIZE","icon","role","useLayoutEffect","triggerElementProps","isForwardRef","undefined","triggerElementNode","getTestId","ComponentDefaultTestId","MENU_BUTTON","cx","styles","wrapper","getStyle","camelCase","concat","_defineProperty","onMouseUp","currentTarget","blur","innerText","dialogNode","dialogChildren","wrapperClassName","position","containerSelector","animationType","moveBy","showTrigger","showTriggerIgnoreClass","hideTriggerIgnoreClass","useDerivedStateFromProps","tooltipNode","tooltipChildren","Tooltip","referenceWrapperClassName","withStaticProps","MenuButtonSizeEnum","paddingSizes","DialogSizeEnum","dialogPositions","DialogPositionEnum","DialogTriggerEventEnum","componentPositions","MenuButtonComponentPositionEnum"],"mappings":"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"}
1	+ {"version":3,"file":"MenuButton.js","sources":["../../../../src/components/MenuButton/MenuButton.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"lodash-es\";\nimport { isForwardRef } from \"react-is\";\nimport Dialog, { DialogEvent } from \"../Dialog/Dialog\";\nimport DialogContentContainer from \"../DialogContentContainer/DialogContentContainer\";\nimport Tooltip, { TooltipProps } from \"../Tooltip/Tooltip\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { BUTTON_ICON_SIZE } from \"../Button/ButtonConstants\";\nimport { ElementContent, VibeComponent, VibeComponentProps, withStaticProps } from \"../../types\";\nimport {\n MenuButtonComponentPosition as MenuButtonComponentPositionEnum,\n MenuButtonSize as MenuButtonSizeEnum\n} from \"./MenuButtonConstants\";\nimport {\n DialogPosition as DialogPositionEnum,\n HideShowEvent as DialogTriggerEventEnum,\n DialogSize as DialogSizeEnum\n} from \"../Dialog/DialogConstants\";\nimport { MenuButtonComponentPosition, MenuButtonSize } from \"./MenuButton.types\";\nimport { DialogOffset, DialogPosition, DialogSize, DialogTriggerEvent } from \"../Dialog/Dialog.types\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { Menu } from \"@vibe/icons\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { MenuChild } from \"../Menu/Menu/MenuConstants\";\nimport styles from \"./MenuButton.module.scss\";\nimport { TooltipPositions } from \"../Tooltip/Tooltip.types\";\n\nconst MOVE_BY = { main: 8, secondary: 0 };\n\nexport interface MenuButtonProps extends VibeComponentProps {\n /*\n Control the button's selected state\n /\n active?: boolean;\n /\n Class name to add to the button when the dialog is open\n /\n openDialogComponentClassName?: string;\n /\n Receives React Component\n /\n component?: (() => JSX.Element) \| React.ElementType;\n size?: MenuButtonSize;\n open?: boolean;\n onClick?: (event: React.MouseEvent) => void;\n zIndex?: number;\n ariaLabel?: string;\n /\n Class name to provide the element which wraps the popover/modal/dialog\n /\n dialogClassName?: string;\n /\n main - `dialogOffset.main` - main axis offset; `dialogOffset.secondary` secondary axis offset\n /\n dialogOffset?: DialogOffset;\n dialogPaddingSize?: DialogSize;\n dialogPosition?: DialogPosition;\n dialogShowTriggerIgnoreClass?: string;\n dialogHideTriggerIgnoreClass?: string;\n /\n the container selector in which to append the dialog\n * for examples: \"body\" , \".my-class\", \"#my-id\"\n /\n dialogContainerSelector?: string;\n /\n Dialog Alignment\n /\n startingEdge?: string;\n /\n Callback function to be called when the menu is shown\n /\n onMenuShow?: () => void;\n /\n Callback function to be called when the menu is hidden\n /\n onMenuHide?: () => void;\n /\n Text to be displayed after the icon\n /\n text?: string;\n disabled?: boolean;\n tooltipContent?: string;\n /\n Remove \"Tab\" key from the hide trigger\n /\n removeTabCloseTrigger?: boolean;\n /*\n is an array with the content of types:\n CLICK, CLICK_OUTSIDE, ESCAPE_KEY, TAB_KEY, MOUSE_ENTER, MOUSE_LEAVE,\n ENTER, MOUSE_DOWN, FOCUS, BLUR, CONTENT_CLICK\n /\n tooltipTriggers?: DialogTriggerEvent \| DialogTriggerEvent[];\n /*\n the disabled/tooltip position of the menu button - one of the MenuButton.dialogPositions\n /\n tooltipPosition?: TooltipPositions;\n /\n Tooltip Element Wrapper ClassName\n /\n tooltipReferenceClassName?: string;\n tooltipProps?: Partial<TooltipProps>;\n /\n When the MenuButton is hidden hide the dialog and tooltip as well\n /\n hideWhenReferenceHidden?: boolean;\n children?: ElementContent;\n /\n Specifies whether to render the component before or after the text\n /\n componentPosition?: MenuButtonComponentPosition;\n /\n Element to be used as the trigger element for the Menu - default is button\n /\n triggerElement?: React.ElementType;\n /\n Close the menu when an item is clicked\n /\n closeMenuOnItemClick?: boolean;\n /\n Whether tooltip should appear only when the trigger element is hovered and not the menu dialog\n */\n showTooltipOnlyOnTriggerElement?: boolean;\n}\n\nconst MenuButton: VibeComponent<MenuButtonProps> & {\n sizes?: typeof MenuButtonSizeEnum;\n paddingSizes?: typeof DialogContentContainer.sizes;\n dialogPositions?: typeof DialogPositionEnum;\n hideTriggers?: typeof Dialog.hideShowTriggers;\n componentPositions?: typeof MenuButtonComponentPositionEnum;\n} = forwardRef(\n (\n {\n id,\n className,\n openDialogComponentClassName,\n children,\n component = Menu,\n componentPosition = \"start\",\n size = \"small\",\n open = false,\n onClick = NOOP,\n zIndex = null,\n ariaLabel = \"Menu\",\n closeMenuOnItemClick,\n dialogOffset = MOVE_BY,\n dialogPosition = Dialog.positions.BOTTOM_START,\n dialogClassName,\n dialogPaddingSize = DialogContentContainer.sizes.SMALL,\n dialogShowTriggerIgnoreClass,\n dialogHideTriggerIgnoreClass,\n onMenuHide = NOOP,\n onMenuShow = NOOP,\n disabled = false,\n text,\n tooltipContent,\n tooltipProps,\n tooltipTriggers = [MenuButton.hideTriggers.MOUSE_LEAVE],\n tooltipPosition = \"right\",\n startingEdge = \"bottom\",\n removeTabCloseTrigger = false,\n tooltipReferenceClassName,\n hideWhenReferenceHidden = true,\n dialogContainerSelector,\n active,\n triggerElement: TriggerElement = \"button\",\n showTooltipOnlyOnTriggerElement,\n \"data-testid\": dataTestId\n }: MenuButtonProps,\n ref\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n const [isOpen, setIsOpen] = useState(open);\n const isActive = active ?? isOpen;\n\n const handleMenuClose = useCallback(\n (focusOnMenuButtonAfterClose: boolean) => {\n onMenuHide();\n setIsOpen(false);\n const button = componentRef.current;\n if (!button \|\| !focusOnMenuButtonAfterClose) {\n return;\n }\n window.requestAnimationFrame(() => {\n button.focus();\n });\n },\n [onMenuHide]\n );\n\n const onMenuDidClose = useCallback(\n (event: React.KeyboardEvent) => {\n // TODO: check the functionality of the isEscapeKey since the event is not an actual KeyboardEVent but an object with propagate property only\n const isEscapeKey = event?.key === \"Escape\";\n if (isEscapeKey \|\| closeMenuOnItemClick) {\n // @ts-ignore\n if (event.propagate) {\n handleMenuClose(isEscapeKey);\n }\n }\n },\n [closeMenuOnItemClick, handleMenuClose]\n );\n\n const onDialogDidHide = useCallback(\n (event: DialogEvent, hideEvent: string) => {\n handleMenuClose(hideEvent === Dialog.hideShowTriggers.ESCAPE_KEY);\n },\n [handleMenuClose]\n );\n\n const onDialogDidShow = useCallback(() => {\n setIsOpen(true);\n onMenuShow();\n }, [setIsOpen, onMenuShow]);\n\n const [clonedChildren, hideTrigger] = useMemo(() => {\n const triggers = new Set([\n Dialog.hideShowTriggers.CLICK_OUTSIDE,\n Dialog.hideShowTriggers.TAB_KEY,\n Dialog.hideShowTriggers.ESCAPE_KEY\n ]);\n\n if (removeTabCloseTrigger) {\n triggers.delete(Dialog.hideShowTriggers.TAB_KEY);\n }\n const childrenArr = React.Children.toArray(children) as MenuChild[];\n const cloned = childrenArr.map(child => {\n if (!React.isValidElement(child)) return null;\n\n const newProps: { focusOnMount?: boolean; onClose?: (event: React.KeyboardEvent) => void } = {};\n if (child.type && child.type.supportFocusOnMount) {\n newProps.focusOnMount = true;\n triggers.delete(Dialog.hideShowTriggers.ESCAPE_KEY);\n }\n\n if (child.type && child.type.isMenu) {\n newProps.onClose = onMenuDidClose;\n }\n\n return React.cloneElement(child, newProps);\n });\n return [cloned, Array.from(triggers)];\n }, [children, onMenuDidClose, removeTabCloseTrigger]);\n\n const content = useMemo(() => {\n if (clonedChildren.length === 0) return null;\n return (\n <DialogContentContainer size={dialogPaddingSize} type={DialogContentContainer.types.POPOVER}>\n {clonedChildren}\n </DialogContentContainer>\n );\n }, [clonedChildren, dialogPaddingSize]);\n\n const computedDialogOffset = useMemo(\n () => ({\n ...MOVE_BY,\n ...dialogOffset\n }),\n [dialogOffset]\n );\n\n const onMouseUp = (event: React.MouseEvent<HTMLElement>) => {\n if (disabled) {\n event.currentTarget.blur();\n return;\n }\n onClick(event);\n };\n\n const Icon = component;\n const iconSize = useMemo(() => {\n switch (size) {\n case \"xxs\":\n case \"xs\":\n return 16;\n case \"small\":\n case \"medium\":\n case \"large\":\n return BUTTON_ICON_SIZE;\n default:\n return 24;\n }\n }, [size]);\n const icon = Icon ? <Icon size={iconSize.toString()} role=\"img\" aria-hidden=\"true\" /> : null;\n\n useLayoutEffect(() => {\n setIsOpen(open);\n }, [open, setIsOpen]);\n\n // Trigger element props, which are only relevant for \"button\" element, but might be needed for other elements e.g. Button\n const triggerElementProps =\n TriggerElement === \"button\"\n ? {\n ref: mergedRef\n }\n : {\n active: isActive,\n disabled: disabled,\n ref: isForwardRef(TriggerElement) ? mergedRef : undefined\n };\n\n const triggerElementNode = (\n <TriggerElement\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.MENU_BUTTON, id)}\n type=\"button\"\n className={cx(styles.wrapper, className, getStyle(styles, camelCase(`size-${size}`)), {\n [styles.active]: isActive,\n [getStyle(styles, openDialogComponentClassName)]: isOpen && openDialogComponentClassName,\n [styles.disabled]: disabled,\n [styles.text]: text\n })}\n aria-haspopup=\"true\"\n aria-expanded={isOpen}\n aria-label={!text && ariaLabel}\n onMouseUp={onMouseUp}\n aria-disabled={disabled}\n {...triggerElementProps}\n >\n {componentPosition === \"start\" && icon}\n {text && <span className={styles.innerText}>{text}</span>}\n {componentPosition === \"end\" && icon}\n </TriggerElement>\n );\n\n const dialogNode = (dialogChildren: React.ReactElement) => (\n <Dialog\n wrapperClassName={dialogClassName}\n position={dialogPosition}\n containerSelector={dialogContainerSelector}\n startingEdge={startingEdge}\n animationType=\"expand\"\n content={content}\n moveBy={computedDialogOffset}\n showTrigger={disabled ? [] : [\"click\", \"enter\"]}\n hideTrigger={hideTrigger}\n showTriggerIgnoreClass={dialogShowTriggerIgnoreClass}\n hideTriggerIgnoreClass={dialogHideTriggerIgnoreClass}\n useDerivedStateFromProps={true}\n onDialogDidShow={onDialogDidShow}\n onDialogDidHide={onDialogDidHide}\n zIndex={zIndex}\n isOpen={isOpen}\n hideWhenReferenceHidden={hideWhenReferenceHidden}\n >\n {dialogChildren}\n </Dialog>\n );\n\n const tooltipNode = (tooltipChildren: React.ReactElement) => (\n <Tooltip\n content={tooltipContent}\n position={tooltipPosition}\n showTrigger=\"mouseenter\"\n hideTrigger={tooltipTriggers}\n referenceWrapperClassName={tooltipReferenceClassName}\n hideWhenReferenceHidden={hideWhenReferenceHidden}\n {...tooltipProps}\n >\n {tooltipChildren}\n </Tooltip>\n );\n\n if (showTooltipOnlyOnTriggerElement) {\n return dialogNode(tooltipNode(triggerElementNode));\n }\n return tooltipNode(dialogNode(triggerElementNode));\n }\n);\n\nexport default withStaticProps(MenuButton, {\n sizes: MenuButtonSizeEnum,\n paddingSizes: DialogSizeEnum,\n dialogPositions: DialogPositionEnum,\n hideTriggers: DialogTriggerEventEnum,\n componentPositions: MenuButtonComponentPositionEnum\n});\n"],"names":["MOVE_BY","main","secondary","MenuButton","forwardRef","_ref","ref","id","className","openDialogComponentClassName","children","_ref$component","component","Menu","_ref$componentPositio","componentPosition","_ref$size","size","_ref$open","open","_ref$onClick","onClick","NOOP","_ref$zIndex","zIndex","_ref$ariaLabel","ariaLabel","closeMenuOnItemClick","_ref$dialogOffset","dialogOffset","_ref$dialogPosition","dialogPosition","Dialog","positions","BOTTOM_START","dialogClassName","_ref$dialogPaddingSiz","dialogPaddingSize","DialogContentContainer","sizes","SMALL","dialogShowTriggerIgnoreClass","dialogHideTriggerIgnoreClass","_ref$onMenuHide","onMenuHide","_ref$onMenuShow","onMenuShow","_ref$disabled","disabled","text","tooltipContent","tooltipProps","_ref$tooltipTriggers","tooltipTriggers","hideTriggers","MOUSE_LEAVE","_ref$tooltipPosition","tooltipPosition","_ref$startingEdge","startingEdge","_ref$removeTabCloseTr","removeTabCloseTrigger","tooltipReferenceClassName","_ref$hideWhenReferenc","hideWhenReferenceHidden","dialogContainerSelector","active","_ref$triggerElement","triggerElement","TriggerElement","showTooltipOnlyOnTriggerElement","dataTestId","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isOpen","setIsOpen","isActive","handleMenuClose","useCallback","focusOnMenuButtonAfterClose","button","current","window","requestAnimationFrame","focus","onMenuDidClose","event","isEscapeKey","key","propagate","onDialogDidHide","hideEvent","hideShowTriggers","ESCAPE_KEY","onDialogDidShow","_useMemo","useMemo","triggers","Set","CLICK_OUTSIDE","TAB_KEY","delete","React","Children","toArray","map","child","isValidElement","newProps","type","supportFocusOnMount","focusOnMount","isMenu","onClose","cloneElement","Array","from","_useMemo2","clonedChildren","hideTrigger","content","length","createElement","types","POPOVER","computedDialogOffset","Object","assign","Icon","iconSize","BUTTON_ICON_SIZE","icon","role","useLayoutEffect","triggerElementProps","isForwardRef","undefined","triggerElementNode","getTestId","ComponentDefaultTestId","MENU_BUTTON","cx","styles","wrapper","getStyle","camelCase","concat","_defineProperty","onMouseUp","currentTarget","blur","innerText","dialogNode","dialogChildren","wrapperClassName","position","containerSelector","animationType","moveBy","showTrigger","showTriggerIgnoreClass","hideTriggerIgnoreClass","useDerivedStateFromProps","tooltipNode","tooltipChildren","Tooltip","referenceWrapperClassName","withStaticProps","MenuButtonSizeEnum","paddingSizes","DialogSizeEnum","dialogPositions","DialogPositionEnum","DialogTriggerEventEnum","componentPositions","MenuButtonComponentPositionEnum"],"mappings":"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"}

package/dist/src/components/MenuButton/MenuButton.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n={wrapper:"wrapper_dcd2604fd1","focus-visible":"focus-visible_c49ba4e3a8",active:"active_4496867d0b",sizeXxs:"sizeXxs_e4da86beae",sizeXs:"sizeXs_8b313e8e04",sizeSmall:"sizeSmall_c4d5e5f568",sizeMedium:"sizeMedium_e3ae622298",sizeLarge:"sizeLarge_096b2ea26d",disabled:"disabled_2449b81c25",text:"text_edb1077374",innerText:"innerText_0e01c97955"};!function(n){if("undefined"==typeof document)return;const o=document.head||document.getElementsByTagName("head")[0],e="s_id-749f9b8f229f_3_0_0-alpha_3";if(o.querySelector("#"+e))return;const t=document.createElement("style");t.id=e,o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.appendChild(document.createTextNode(n))}(".wrapper_dcd2604fd1 {\n  border: none;\n  margin: 0;\n  padding: 0;\n  width: auto;\n  overflow: visible;\n  background: transparent;\n  /* inherit font & color from ancestor */\n  color: inherit;\n  font: inherit;\n  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */\n  line-height: normal;\n  /* Corrects font smoothing for webkit */\n  -webkit-font-smoothing: inherit;\n  -moz-osx-font-smoothing: inherit;\n  /* Corrects inability to style clickable `input` types in iOS */\n  appearance: none;\n  border-radius: var(--border-radius-small);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: transform var(--motion-productive-short) var(--motion-timing-transition);\n  color: var(--primary-text-color);\n}\n.wrapper_dcd2604fd1:focus-visible, .wrapper_dcd2604fd1.focus-visible_c49ba4e3a8 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.wrapper_dcd2604fd1:focus:not(.focus-visible_c49ba4e3a8) {\n  outline: none;\n}\n.wrapper_dcd2604fd1:focus-visible, .wrapper_dcd2604fd1.focus-visible_c49ba4e3a8 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.wrapper_dcd2604fd1:focus:not(.focus-visible_c49ba4e3a8) {\n  outline: none;\n}\n.wrapper_dcd2604fd1:focus,\n.wrapper_dcd2604fd1:hover {\n  background-color: var(--primary-background-hover-color);\n}\n.wrapper_dcd2604fd1:active {\n  transform: scale(0.95);\n}\n.active_4496867d0b {\n  background-color: var(--primary-selected-color);\n}\n.active_4496867d0b:focus {\n  background-color: var(--primary-selected-color);\n}\n.active_4496867d0b:hover {\n  background-color: var(--primary-selected-color);\n}\n.sizeXxs_e4da86beae {\n  width: 16px;\n  height: 16px;\n  font: var(--font-text2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.sizeXs_8b313e8e04 {\n  width: 24px;\n  height: 24px;\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.sizeSmall_c4d5e5f568 {\n  width: 32px;\n  height: 32px;\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.sizeMedium_e3ae622298 {\n  width: 40px;\n  height: 40px;\n  font: var(--font-h3-normal);\n  letter-spacing: var(--letter-spacing-h3-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.sizeLarge_096b2ea26d {\n  width: 48px;\n  height: 48px;\n  font: var(--font-h2-normal);\n  letter-spacing: var(--letter-spacing-h2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.disabled_2449b81c25 {\n  border-color: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.disabled_2449b81c25:hover {\n  background-color: transparent;\n}\n.text_edb1077374 {\n  width: 100%;\n}\n.innerText_0e01c97955 {\n  margin: 0 var(--spacing-small);\n}");export{n as default};
+var n={wrapper:"wrapper_9f79d26c49","focus-visible":"focus-visible_16c0de53d9",active:"active_0414b27d3a",sizeXxs:"sizeXxs_7f18b97bfa",sizeXs:"sizeXs_ff683735a0",sizeSmall:"sizeSmall_eb05c9d35a",sizeMedium:"sizeMedium_0a623d3056",sizeLarge:"sizeLarge_8ed066daa0",disabled:"disabled_959dd80658",text:"text_c450989100",innerText:"innerText_1010a0a76b"};!function(n){if("undefined"==typeof document)return;const o=document.head||document.getElementsByTagName("head")[0],e="s_id-749f9b8f229f_3_0_0-alpha_5";if(o.querySelector("#"+e))return;const t=document.createElement("style");t.id=e,o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.appendChild(document.createTextNode(n))}(".wrapper_9f79d26c49 {\n  border: none;\n  margin: 0;\n  padding: 0;\n  width: auto;\n  overflow: visible;\n  background: transparent;\n  /* inherit font & color from ancestor */\n  color: inherit;\n  font: inherit;\n  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */\n  line-height: normal;\n  /* Corrects font smoothing for webkit */\n  -webkit-font-smoothing: inherit;\n  -moz-osx-font-smoothing: inherit;\n  /* Corrects inability to style clickable `input` types in iOS */\n  appearance: none;\n  border-radius: var(--border-radius-small);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: transform var(--motion-productive-short) var(--motion-timing-transition);\n  color: var(--primary-text-color);\n}\n.wrapper_9f79d26c49:focus-visible, .wrapper_9f79d26c49.focus-visible_16c0de53d9 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.wrapper_9f79d26c49:focus:not(.focus-visible_16c0de53d9) {\n  outline: none;\n}\n.wrapper_9f79d26c49:focus-visible, .wrapper_9f79d26c49.focus-visible_16c0de53d9 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.wrapper_9f79d26c49:focus:not(.focus-visible_16c0de53d9) {\n  outline: none;\n}\n.wrapper_9f79d26c49:focus,\n.wrapper_9f79d26c49:hover {\n  background-color: var(--primary-background-hover-color);\n}\n.wrapper_9f79d26c49:active {\n  transform: scale(0.95);\n}\n.active_0414b27d3a {\n  background-color: var(--primary-selected-color);\n}\n.active_0414b27d3a:focus {\n  background-color: var(--primary-selected-color);\n}\n.active_0414b27d3a:hover {\n  background-color: var(--primary-selected-color);\n}\n.sizeXxs_7f18b97bfa {\n  width: 16px;\n  height: 16px;\n  font: var(--font-text2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.sizeXs_ff683735a0 {\n  width: 24px;\n  height: 24px;\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.sizeSmall_eb05c9d35a {\n  width: 32px;\n  height: 32px;\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.sizeMedium_0a623d3056 {\n  width: 40px;\n  height: 40px;\n  font: var(--font-h3-normal);\n  letter-spacing: var(--letter-spacing-h3-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.sizeLarge_8ed066daa0 {\n  width: 48px;\n  height: 48px;\n  font: var(--font-h2-normal);\n  letter-spacing: var(--letter-spacing-h2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.disabled_959dd80658 {\n  border-color: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.disabled_959dd80658:hover {\n  background-color: transparent;\n}\n.text_c450989100 {\n  width: 100%;\n}\n.innerText_1010a0a76b {\n  margin: 0 var(--spacing-small);\n}");export{n as default};
 //# sourceMappingURL=MenuButton.module.scss.js.map

package/dist/src/components/Modal/Modal.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n={container:"container_e3db0e4442",overlay:"overlay_b5fd17d593","overlay-fade-out":"overlay-fade-out_685cac813c","overlay-fade-in":"overlay-fade-in_f6b7bc3077",dialog:"dialog_fd1c9869f1",default:"default_6f1c436239",full:"full_735e5e0a87",spacing:"spacing_8df66bb8b8"};!function(n){if("undefined"==typeof document)return;const e=document.head||document.getElementsByTagName("head")[0],a="s_id-fe267e23c74c_3_0_0-alpha_3";if(e.querySelector("#"+a))return;const d=document.createElement("style");d.id=a,e.firstChild?e.insertBefore(d,e.firstChild):e.appendChild(d),d.appendChild(document.createTextNode(n))}(".container_e3db0e4442,\n.overlay_b5fd17d593 {\n  position: fixed;\n  inset: 0;\n}\n\n.container_e3db0e4442 {\n  --monday-modal-z-index: 10000;\n  z-index: var(--monday-modal-z-index);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.container_e3db0e4442[aria-hidden=true] {\n  display: none;\n}\n\n.container_e3db0e4442[aria-hidden=true] .overlay_b5fd17d593 {\n  background-color: transparent;\n  animation: overlay-fade-out_685cac813c 70ms var(--motion-timing-enter);\n}\n\n.overlay_b5fd17d593 {\n  background-color: rgba(41, 47, 76, 0.7);\n  animation: overlay-fade-in_f6b7bc3077 70ms var(--motion-timing-enter);\n}\n\n.dialog_fd1c9869f1 {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  padding-block: var(--spacing-large);\n  padding-inline: var(--spacing-xl);\n  border-radius: var(--border-radius-big);\n  box-shadow: var(--box-shadow-large);\n  background-color: var(--secondary-background-color);\n  max-height: 90vh;\n  max-width: 90vw;\n}\n\n.dialog_fd1c9869f1.default_6f1c436239 {\n  width: 520px;\n}\n\n.dialog_fd1c9869f1.full_735e5e0a87 {\n  width: 100vw;\n}\n\n.dialog_fd1c9869f1.spacing_8df66bb8b8 {\n  gap: var(--spacing-medium);\n}\n\n@keyframes overlay-fade-in_f6b7bc3077 {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes overlay-fade-out_685cac813c {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}");export{n as default};
+var n={container:"container_44b176230a",overlay:"overlay_79c3cf59d8","overlay-fade-out":"overlay-fade-out_b7d2411f33","overlay-fade-in":"overlay-fade-in_dee3d77b35",dialog:"dialog_9e4e2f83fe",default:"default_30318a9b60",full:"full_5e9d6cea8d",spacing:"spacing_685f67ad9c"};!function(n){if("undefined"==typeof document)return;const e=document.head||document.getElementsByTagName("head")[0],a="s_id-fe267e23c74c_3_0_0-alpha_5";if(e.querySelector("#"+a))return;const d=document.createElement("style");d.id=a,e.firstChild?e.insertBefore(d,e.firstChild):e.appendChild(d),d.appendChild(document.createTextNode(n))}(".container_44b176230a,\n.overlay_79c3cf59d8 {\n  position: fixed;\n  inset: 0;\n}\n\n.container_44b176230a {\n  --monday-modal-z-index: 10000;\n  z-index: var(--monday-modal-z-index);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.container_44b176230a[aria-hidden=true] {\n  display: none;\n}\n\n.container_44b176230a[aria-hidden=true] .overlay_79c3cf59d8 {\n  background-color: transparent;\n  animation: overlay-fade-out_b7d2411f33 70ms var(--motion-timing-enter);\n}\n\n.overlay_79c3cf59d8 {\n  background-color: rgba(41, 47, 76, 0.7);\n  animation: overlay-fade-in_dee3d77b35 70ms var(--motion-timing-enter);\n}\n\n.dialog_9e4e2f83fe {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  padding-block: var(--spacing-large);\n  padding-inline: var(--spacing-xl);\n  border-radius: var(--border-radius-big);\n  box-shadow: var(--box-shadow-large);\n  background-color: var(--secondary-background-color);\n  max-height: 90vh;\n  max-width: 90vw;\n}\n\n.dialog_9e4e2f83fe.default_30318a9b60 {\n  width: 520px;\n}\n\n.dialog_9e4e2f83fe.full_5e9d6cea8d {\n  width: 100vw;\n}\n\n.dialog_9e4e2f83fe.spacing_685f67ad9c {\n  gap: var(--spacing-medium);\n}\n\n@keyframes overlay-fade-in_dee3d77b35 {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes overlay-fade-out_b7d2411f33 {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}");export{n as default};
 //# sourceMappingURL=Modal.module.scss.js.map

package/dist/src/components/Modal/ModalContent/ModalContent.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={container:"container_52264570e2"};!function(e){if("undefined"==typeof document)return;const n=document.head||document.getElementsByTagName("head")[0],t="s_id-40a1f8a37338_3_0_0-alpha_3";if(n.querySelector("#"+t))return;const r=document.createElement("style");r.id=t,n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.appendChild(document.createTextNode(e))}(".container_52264570e2 {\n  flex-grow: 1;\n  overflow: auto;\n}\n.container_52264570e2::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.container_52264570e2::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}");export{e as default};
+var e={container:"container_529bf326e2"};!function(e){if("undefined"==typeof document)return;const n=document.head||document.getElementsByTagName("head")[0],t="s_id-40a1f8a37338_3_0_0-alpha_5";if(n.querySelector("#"+t))return;const r=document.createElement("style");r.id=t,n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.appendChild(document.createTextNode(e))}(".container_529bf326e2 {\n  flex-grow: 1;\n  overflow: auto;\n}\n.container_529bf326e2::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.container_529bf326e2::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}");export{e as default};
 //# sourceMappingURL=ModalContent.module.scss.js.map

package/dist/src/components/Modal/ModalFooter/ModalFooter.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={container:"container_718e1df1af"};!function(e){if("undefined"==typeof document)return;const t=document.head||document.getElementsByTagName("head")[0],n="s_id-9ff7e713f88b_3_0_0-alpha_3";if(t.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.appendChild(document.createTextNode(e))}(".container_718e1df1af {\n  margin-block-start: var(--spacing-large);\n}");export{e as default};
+var e={container:"container_21df1735f2"};!function(e){if("undefined"==typeof document)return;const t=document.head||document.getElementsByTagName("head")[0],n="s_id-9ff7e713f88b_3_0_0-alpha_5";if(t.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.appendChild(document.createTextNode(e))}(".container_21df1735f2 {\n  margin-block-start: var(--spacing-large);\n}");export{e as default};
 //# sourceMappingURL=ModalFooter.module.scss.js.map

package/dist/src/components/Modal/ModalHeader/ModalHeader.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import e from"react";import t from"classnames";import s from"../../IconButton/IconButton.js";import o from"../../Icon/Icons/components/CloseSmall.js";import a from"../../Icon/Icon.js";import{NOOP as i}from"../../../utils/function-utils.js";import{getTestId as n}from"../../../tests/testIds.js";import{ComponentDefaultTestId as r}from"../../../tests/constants.js";import m from"../../Text/Text.js";import c from"../../Heading/Heading.js";import l from"../../Flex/Flex.js";import d from"./ModalHeader.module.scss.js";var p=function(p){var f=p.title,u=p.children,j=p.titleClassName,x=p.description,N=void 0===x?"":x,v=p.descriptionClassName,E=p.icon,g=p.closeModal,I=void 0===g?i:g,y=p.iconSize,C=void 0===y?24:y,H=p.iconClassName,L=p.closeButtonAriaLabel,B=void 0===L?"close":L,M=p.id,S=p["data-testid"];return e.createElement("div",{className:t(d.container,p.className),"data-testid":S||n(r.MODAL_HEADER,M)},u||e.createElement(l,{align:"start",gap:"small",className:j},E&&e.createElement(a,{className:t(d.icon,H),icon:E,iconType:"svg",iconSize:C,ignoreFocusStyle:!0}),e.createElement(c,{id:M,maxLines:2},f)),N&&e.createElement(m,{type:"text2",maxLines:2,className:t(d.description,v)},N),e.createElement("div",{className:t(d.closeButton)},e.createElement(s,{key:"xxs",onClick:I,ariaLabel:B,icon:o,kind:"tertiary",size:"small"})))};Object.assign(p,{displayName:"ModalHeader"});export{p as default};
+import t from"react";import i from"classnames";import s from"../../IconButton/IconButton.js";import"../../../../icons/dist/_virtual/_tslib.js";import"../../../../icons/dist/react/AddSmall.js";import"../../../../icons/dist/react/Alert.js";import"../../../../icons/dist/react/Check.js";import o from"../../../../icons/dist/react/CloseSmall.js";import"../../../../icons/dist/react/DropdownChevronDown.js";import"../../../../icons/dist/react/DropdownChevronRight.js";import"../../../../icons/dist/react/DropdownChevronUp.js";import"../../../../icons/dist/react/Info.js";import"../../../../icons/dist/react/Menu.js";import"../../../../icons/dist/react/MoveArrowLeft.js";import"../../../../icons/dist/react/MoveArrowRight.js";import"../../../../icons/dist/react/NavigationChevronLeft.js";import"../../../../icons/dist/react/NavigationChevronRight.js";import"../../../../icons/dist/react/NoColor.js";import"../../../../icons/dist/react/Remove.js";import"../../../../icons/dist/react/Search.js";import"../../../../icons/dist/react/Sort.js";import"../../../../icons/dist/react/SortAscending.js";import"../../../../icons/dist/react/SortDescending.js";import"../../../../icons/dist/react/Warning.js";import e from"../../Icon/Icon.js";import{NOOP as r}from"../../../utils/function-utils.js";import{getTestId as a}from"../../../tests/testIds.js";import{ComponentDefaultTestId as c}from"../../../tests/constants.js";import n from"../../Text/Text.js";import m from"../../Heading/Heading.js";import d from"../../Flex/Flex.js";import l from"./ModalHeader.module.scss.js";var p=function(p){var j=p.title,v=p.children,f=p.titleClassName,g=p.description,u=void 0===g?"":g,N=p.descriptionClassName,C=p.icon,h=p.closeModal,x=void 0===h?r:h,E=p.iconSize,S=void 0===E?24:E,A=p.iconClassName,D=p.closeButtonAriaLabel,L=void 0===D?"close":D,M=p.id,w=p["data-testid"];return t.createElement("div",{className:i(l.container,p.className),"data-testid":w||a(c.MODAL_HEADER,M)},v||t.createElement(d,{align:"start",gap:"small",className:f},C&&t.createElement(e,{className:i(l.icon,A),icon:C,iconType:"svg",iconSize:S,ignoreFocusStyle:!0}),t.createElement(m,{id:M,maxLines:2},j)),u&&t.createElement(n,{type:"text2",maxLines:2,className:i(l.description,N)},u),t.createElement("div",{className:i(l.closeButton)},t.createElement(s,{key:"xxs",onClick:x,ariaLabel:L,icon:o,kind:"tertiary",size:"small"})))};Object.assign(p,{displayName:"ModalHeader"});export{p as default};
 //# sourceMappingURL=ModalHeader.js.map

package/dist/src/components/Modal/ModalHeader/ModalHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ModalHeader.js","sources":["../../../../../src/components/Modal/ModalHeader/ModalHeader.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport cx from \"classnames\";\nimport IconButton from \"../../IconButton/IconButton\";\nimport CloseSmall from \"~~../../Icon~~/~~Icons/components/CloseSmall~~\";\nimport Icon from \"../../Icon/Icon\";\nimport VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { NOOP } from \"../../../utils/function-utils\";\nimport { ElementContent } from \"src/types/ElementContent\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport Text from \"../../Text/Text\";\nimport Heading from \"../../Heading/Heading\";\nimport Flex from \"../../Flex/Flex\";\nimport styles from \"./ModalHeader.module.scss\";\nimport { SubIcon } from \"../../../types/SubIcon\";\n\ninterface BaseModalHeaderProps extends VibeComponentProps {\n /*\n Description of the modal - pure string description is a recommended standard, use JSX ability only if there is a need to add links\n /\n description?: ElementContent;\n /\n Icon to be rendered before the title\n /\n // icon?: string \| React.FunctionComponent<IconSubComponentProps> \| null;\n icon?: SubIcon;\n /\n Class name for the wrapper\n /\n className?: string;\n /\n Class name for the title\n /\n titleClassName?: string;\n /\n closes the Modal. No need to provide it, it is being provided by the modal\n /\n closeModal?: () => void;\n /* /*\n ID for the title, needed for accessibility. No need to provide it, it is being provided by the modal\n /\n id?: string;\n /\n Class name for the description\n /\n descriptionClassName?: string;\n /\n Size of the icon\n /\n iconSize?: number;\n /\n class name for the icon\n /\n iconClassName?: string;\n /\n Aria label for the close button\n */\n closeButtonAriaLabel?: string;\n}\n\ninterface ModalHeaderWithOnlyTitle extends BaseModalHeaderProps {\n title: ElementContent;\n children?: never;\n}\n\ninterface ModalHeaderWithOnlyChildren extends BaseModalHeaderProps {\n title?: never;\n children: ElementContent;\n}\n\nexport type ModalHeaderProps = ModalHeaderWithOnlyTitle \| ModalHeaderWithOnlyChildren;\n\nconst ModalHeader: FC<ModalHeaderProps> = ({\n className,\n title,\n children,\n titleClassName,\n description = \"\",\n descriptionClassName,\n icon,\n closeModal = NOOP,\n iconSize = 24,\n iconClassName,\n closeButtonAriaLabel = \"close\",\n id,\n \"data-testid\": dataTestId\n}) => {\n return (\n <div\n className={cx(styles.container, className)}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.MODAL_HEADER, id)}\n >\n {children ? (\n children\n ) : (\n <Flex align=\"start\" gap=\"small\" className={titleClassName}>\n {icon && (\n <Icon\n className={cx(styles.icon, iconClassName)}\n icon={icon}\n iconType=\"svg\"\n iconSize={iconSize}\n ignoreFocusStyle\n />\n )}\n <Heading id={id} maxLines={2}>\n {title}\n </Heading>\n </Flex>\n )}\n {description && (\n <Text type=\"text2\" maxLines={2} className={cx(styles.description, descriptionClassName)}>\n {description}\n </Text>\n )}\n\n <div className={cx(styles.closeButton)}>\n <IconButton\n key=\"xxs\"\n onClick={closeModal}\n ariaLabel={closeButtonAriaLabel}\n icon={CloseSmall}\n kind=\"tertiary\"\n size=\"small\"\n />\n </div>\n </div>\n );\n};\n\nObject.assign(ModalHeader, {\n displayName: \"ModalHeader\"\n});\n\nexport default ModalHeader;\n"],"names":["ModalHeader","_ref","title","children","titleClassName","_ref$description","description","descriptionClassName","icon","_ref$closeModal","closeModal","NOOP","_ref$iconSize","iconSize","iconClassName","_ref$closeButtonAriaL","closeButtonAriaLabel","id","dataTestId","React","className","cx","styles","container","getTestId","ComponentDefaultTestId","MODAL_HEADER","createElement","Flex","align","gap","Icon","iconType","ignoreFocusStyle","Heading","maxLines","Text","type","closeButton","IconButton","key","onClick","ariaLabel","CloseSmall","kind","size","Object","assign","displayName"],"mappings":"~~mgBAwEA~~,IAAMA,EAAoC,SAAzBC,GAcZ,IAZHC,EAAKD,EAALC,MACAC,EAAQF,EAARE,SACAC,EAAcH,EAAdG,eAAcC,EAAAJ,EACdK,YAAAA,OAAc,IAAHD,EAAG,GAAEA,EAChBE,EAAoBN,EAApBM,qBACAC,EAAIP,EAAJO,KAAIC,EAAAR,EACJS,WAAAA,OAAaC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAX,EACjBY,SAAAA,OAAW,IAAHD,EAAG,GAAEA,EACbE,EAAab,EAAba,cAAaC,EAAAd,EACbe,qBAAAA,OAAuB,IAAHD,EAAG,QAAOA,EAC9BE,EAAEhB,EAAFgB,GACeC,EAAUjB,EAAzB,eAEA,OACEkB,uBACEC,UAAWC,EAAGC,EAAOC,UAhBhBtB,EAATmB,WAiBiB,cAAAF,GAAcM,EAAUC,EAAuBC,aAAcT,IAEzEd,GAGCgB,EAAAQ,cAACC,EAAK,CAAAC,MAAM,QAAQC,IAAI,QAAQV,UAAWhB,GACxCI,GACCW,EAACQ,cAAAI,EACC,CAAAX,UAAWC,EAAGC,EAAOd,KAAMM,GAC3BN,KAAMA,EACNwB,SAAS,MACTnB,SAAUA,EACVoB,sBAGJd,EAAAQ,cAACO,EAAO,CAACjB,GAAIA,EAAIkB,SAAU,GACxBjC,IAINI,GACCa,EAAAQ,cAACS,EAAI,CAACC,KAAK,QAAQF,SAAU,EAAGf,UAAWC,EAAGC,EAAOhB,YAAaC,IAC/DD,GAILa,EAAAQ,cAAA,MAAA,CAAKP,UAAWC,EAAGC,EAAOgB,cACxBnB,EAAAQ,cAACY,EAAU,CACTC,IAAI,MACJC,QAAS/B,EACTgC,UAAW1B,EACXR,KAAMmC,EACNC,KAAK,WACLC,KAAK,WAKf,EAEAC,OAAOC,OAAO/C,EAAa,CACzBgD,YAAa"}
1	+ {"version":3,"file":"ModalHeader.js","sources":["../../../../../src/components/Modal/ModalHeader/ModalHeader.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport cx from \"classnames\";\nimport IconButton from \"../../IconButton/IconButton\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport Icon from \"../../Icon/Icon\";\nimport VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { NOOP } from \"../../../utils/function-utils\";\nimport { ElementContent } from \"src/types/ElementContent\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport Text from \"../../Text/Text\";\nimport Heading from \"../../Heading/Heading\";\nimport Flex from \"../../Flex/Flex\";\nimport styles from \"./ModalHeader.module.scss\";\nimport { SubIcon } from \"../../../types/SubIcon\";\n\ninterface BaseModalHeaderProps extends VibeComponentProps {\n /*\n Description of the modal - pure string description is a recommended standard, use JSX ability only if there is a need to add links\n /\n description?: ElementContent;\n /\n Icon to be rendered before the title\n /\n // icon?: string \| React.FunctionComponent<IconSubComponentProps> \| null;\n icon?: SubIcon;\n /\n Class name for the wrapper\n /\n className?: string;\n /\n Class name for the title\n /\n titleClassName?: string;\n /\n closes the Modal. No need to provide it, it is being provided by the modal\n /\n closeModal?: () => void;\n /* /*\n ID for the title, needed for accessibility. No need to provide it, it is being provided by the modal\n /\n id?: string;\n /\n Class name for the description\n /\n descriptionClassName?: string;\n /\n Size of the icon\n /\n iconSize?: number;\n /\n class name for the icon\n /\n iconClassName?: string;\n /\n Aria label for the close button\n */\n closeButtonAriaLabel?: string;\n}\n\ninterface ModalHeaderWithOnlyTitle extends BaseModalHeaderProps {\n title: ElementContent;\n children?: never;\n}\n\ninterface ModalHeaderWithOnlyChildren extends BaseModalHeaderProps {\n title?: never;\n children: ElementContent;\n}\n\nexport type ModalHeaderProps = ModalHeaderWithOnlyTitle \| ModalHeaderWithOnlyChildren;\n\nconst ModalHeader: FC<ModalHeaderProps> = ({\n className,\n title,\n children,\n titleClassName,\n description = \"\",\n descriptionClassName,\n icon,\n closeModal = NOOP,\n iconSize = 24,\n iconClassName,\n closeButtonAriaLabel = \"close\",\n id,\n \"data-testid\": dataTestId\n}) => {\n return (\n <div\n className={cx(styles.container, className)}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.MODAL_HEADER, id)}\n >\n {children ? (\n children\n ) : (\n <Flex align=\"start\" gap=\"small\" className={titleClassName}>\n {icon && (\n <Icon\n className={cx(styles.icon, iconClassName)}\n icon={icon}\n iconType=\"svg\"\n iconSize={iconSize}\n ignoreFocusStyle\n />\n )}\n <Heading id={id} maxLines={2}>\n {title}\n </Heading>\n </Flex>\n )}\n {description && (\n <Text type=\"text2\" maxLines={2} className={cx(styles.description, descriptionClassName)}>\n {description}\n </Text>\n )}\n\n <div className={cx(styles.closeButton)}>\n <IconButton\n key=\"xxs\"\n onClick={closeModal}\n ariaLabel={closeButtonAriaLabel}\n icon={CloseSmall}\n kind=\"tertiary\"\n size=\"small\"\n />\n </div>\n </div>\n );\n};\n\nObject.assign(ModalHeader, {\n displayName: \"ModalHeader\"\n});\n\nexport default ModalHeader;\n"],"names":["ModalHeader","_ref","title","children","titleClassName","_ref$description","description","descriptionClassName","icon","_ref$closeModal","closeModal","NOOP","_ref$iconSize","iconSize","iconClassName","_ref$closeButtonAriaL","closeButtonAriaLabel","id","dataTestId","React","className","cx","styles","container","getTestId","ComponentDefaultTestId","MODAL_HEADER","createElement","Flex","align","gap","Icon","iconType","ignoreFocusStyle","Heading","maxLines","Text","type","closeButton","IconButton","key","onClick","ariaLabel","CloseSmall","kind","size","Object","assign","displayName"],"mappings":"khDAwEA,IAAMA,EAAoC,SAAzBC,GAcZ,IAZHC,EAAKD,EAALC,MACAC,EAAQF,EAARE,SACAC,EAAcH,EAAdG,eAAcC,EAAAJ,EACdK,YAAAA,OAAc,IAAHD,EAAG,GAAEA,EAChBE,EAAoBN,EAApBM,qBACAC,EAAIP,EAAJO,KAAIC,EAAAR,EACJS,WAAAA,OAAaC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAX,EACjBY,SAAAA,OAAW,IAAHD,EAAG,GAAEA,EACbE,EAAab,EAAba,cAAaC,EAAAd,EACbe,qBAAAA,OAAuB,IAAHD,EAAG,QAAOA,EAC9BE,EAAEhB,EAAFgB,GACeC,EAAUjB,EAAzB,eAEA,OACEkB,uBACEC,UAAWC,EAAGC,EAAOC,UAhBhBtB,EAATmB,WAiBiB,cAAAF,GAAcM,EAAUC,EAAuBC,aAAcT,IAEzEd,GAGCgB,EAAAQ,cAACC,EAAK,CAAAC,MAAM,QAAQC,IAAI,QAAQV,UAAWhB,GACxCI,GACCW,EAACQ,cAAAI,EACC,CAAAX,UAAWC,EAAGC,EAAOd,KAAMM,GAC3BN,KAAMA,EACNwB,SAAS,MACTnB,SAAUA,EACVoB,sBAGJd,EAAAQ,cAACO,EAAO,CAACjB,GAAIA,EAAIkB,SAAU,GACxBjC,IAINI,GACCa,EAAAQ,cAACS,EAAI,CAACC,KAAK,QAAQF,SAAU,EAAGf,UAAWC,EAAGC,EAAOhB,YAAaC,IAC/DD,GAILa,EAAAQ,cAAA,MAAA,CAAKP,UAAWC,EAAGC,EAAOgB,cACxBnB,EAAAQ,cAACY,EAAU,CACTC,IAAI,MACJC,QAAS/B,EACTgC,UAAW1B,EACXR,KAAMmC,EACNC,KAAK,WACLC,KAAK,WAKf,EAEAC,OAAOC,OAAO/C,EAAa,CACzBgD,YAAa"}

package/dist/src/components/Modal/ModalHeader/ModalHeader.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={container:"container_8ed6f6b3ae",icon:"icon_ec67870791",description:"description_708f7594f9",closeButton:"closeButton_7aa48edf51"};!function(e){if("undefined"==typeof document)return;const n=document.head||document.getElementsByTagName("head")[0],t="s_id-f34f7b91e8f3_3_0_0-alpha_3";if(n.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}(".container_8ed6f6b3ae {\n  margin-block-start: var(--spacing-medium);\n}\n.container_8ed6f6b3ae .icon_ec67870791 {\n  margin-top: var(--spacing-xs);\n  flex-shrink: 0;\n  color: var(--primary-text-color);\n}\n.container_8ed6f6b3ae .description_708f7594f9 {\n  margin-block-start: var(--spacing-small);\n  color: var(--secondary-text-color);\n}\n.container_8ed6f6b3ae .closeButton_7aa48edf51 {\n  position: absolute;\n  right: 20px;\n  top: 20px;\n}");export{e as default};
+var n={container:"container_28b614cec6",icon:"icon_b3d1f66f1e",description:"description_0a5f473099",closeButton:"closeButton_cca686c8d3"};!function(n){if("undefined"==typeof document)return;const e=document.head||document.getElementsByTagName("head")[0],c="s_id-f34f7b91e8f3_3_0_0-alpha_5";if(e.querySelector("#"+c))return;const t=document.createElement("style");t.id=c,e.firstChild?e.insertBefore(t,e.firstChild):e.appendChild(t),t.appendChild(document.createTextNode(n))}(".container_28b614cec6 {\n  margin-block-start: var(--spacing-medium);\n}\n.container_28b614cec6 .icon_b3d1f66f1e {\n  margin-top: var(--spacing-xs);\n  flex-shrink: 0;\n  color: var(--primary-text-color);\n}\n.container_28b614cec6 .description_0a5f473099 {\n  margin-block-start: var(--spacing-small);\n  color: var(--secondary-text-color);\n}\n.container_28b614cec6 .closeButton_cca686c8d3 {\n  position: absolute;\n  right: 20px;\n  top: 20px;\n}");export{n as default};
 //# sourceMappingURL=ModalHeader.module.scss.js.map

package/dist/src/components/MultiStepIndicator/MultiStepIndicator.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t from"classnames";import i,{forwardRef as s,useCallback as o,useMemo as l}from"react";import r from"../Icon/Icons/components/Check.js";import a from"../Divider/Divider.js";import{NOOP as n}from"../../utils/function-utils.js";import p from"./components/StepIndicator/StepIndicator.js";import{MultiStepType as m,StepStatus as c,TextPlacement as d,Size as f}from"./MultiStepConstants.js";import{getTestId as u}from"../../tests/testIds.js";import{ComponentDefaultTestId as v}from"../../tests/constants.js";import{withStaticProps as y}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import S from"./MultiStepIndicator.module.scss.js";var C=y(s((function(s,m){var c=s.className,d=s.steps,f=void 0===d?[]:d,y=s.type,C=void 0===y?"primary":y,I=s.stepComponentClassName,N=s.dividerComponentClassName,j=s.fulfilledStepIcon,g=void 0===j?r:j,b=s.fulfilledStepIconType,D=void 0===b?"svg":b,T=s.isFulfilledStepDisplayNumber,h=void 0!==T&&T,k=s.onClick,E=void 0===k?n:k,P=s.textPlacement,_=void 0===P?"horizontal":P,x=s.id,F=s["data-testid"],z="vertical"===_?"regular":s.size,w=o((function(s,o){return i.createElement(i.Fragment,{key:"".concat(s.titleText,"_").concat(o)},i.createElement(p,Object.assign({},s,{stepNumber:o+1,type:C,stepComponentClassName:I,fulfilledStepIcon:g,fulfilledStepIconType:D,onClick:E,isFulfilledStepDisplayNumber:h,size:z})),o!==f.length-1&&i.createElement(a,{className:t(S.divider,N,e({},S.compact,"compact"===z))}))}),[E,h,C,I,g,D,N,f.length,z]),M=o((function(e,s){return i.createElement(p,Object.assign({},e,{key:"".concat(e.titleText,"_").concat(s),stepNumber:s+1,type:C,stepComponentClassName:I,fulfilledStepIcon:g,fulfilledStepIconType:D,onClick:E,isFollowedByDivider:s!==f.length-1,stepDividerClassName:t(S.divider,N),isVertical:!0,isFulfilledStepDisplayNumber:h}))}),[E,h,C,I,g,D,N,f.length]),O=l((function(){return"vertical"===_?M:w}),[_,M,w]);return i.createElement("ol",{ref:m,id:x,"data-testid":F||u(v.MULTI_STEP_INDICATOR,x),className:t(S.wrapper,c)},f.map(O))})),{types:m,stepStatuses:c,textPlacements:d,sizes:f});export{C as default};
+import{defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import e from"classnames";import i,{forwardRef as s,useCallback as o,useMemo as r}from"react";import"../../../icons/dist/_virtual/_tslib.js";import"../../../icons/dist/react/AddSmall.js";import"../../../icons/dist/react/Alert.js";import n from"../../../icons/dist/react/Check.js";import"../../../icons/dist/react/CloseSmall.js";import"../../../icons/dist/react/DropdownChevronDown.js";import"../../../icons/dist/react/DropdownChevronRight.js";import"../../../icons/dist/react/DropdownChevronUp.js";import"../../../icons/dist/react/Info.js";import"../../../icons/dist/react/Menu.js";import"../../../icons/dist/react/MoveArrowLeft.js";import"../../../icons/dist/react/MoveArrowRight.js";import"../../../icons/dist/react/NavigationChevronLeft.js";import"../../../icons/dist/react/NavigationChevronRight.js";import"../../../icons/dist/react/NoColor.js";import"../../../icons/dist/react/Remove.js";import"../../../icons/dist/react/Search.js";import"../../../icons/dist/react/Sort.js";import"../../../icons/dist/react/SortAscending.js";import"../../../icons/dist/react/SortDescending.js";import"../../../icons/dist/react/Warning.js";import c from"../Divider/Divider.js";import{NOOP as a}from"../../utils/function-utils.js";import l from"./components/StepIndicator/StepIndicator.js";import{MultiStepType as p,StepStatus as m,TextPlacement as d,Size as f}from"./MultiStepConstants.js";import{getTestId as u}from"../../tests/testIds.js";import{ComponentDefaultTestId as j}from"../../tests/constants.js";import{withStaticProps as v}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import C from"./MultiStepIndicator.module.scss.js";var S=v(s((function(s,p){var m=s.className,d=s.steps,f=void 0===d?[]:d,v=s.type,S=void 0===v?"primary":v,g=s.stepComponentClassName,N=s.dividerComponentClassName,h=s.fulfilledStepIcon,y=void 0===h?n:h,I=s.fulfilledStepIconType,D=void 0===I?"svg":I,b=s.isFulfilledStepDisplayNumber,w=void 0!==b&&b,T=s.onClick,_=void 0===T?a:T,k=s.textPlacement,A=void 0===k?"horizontal":k,E=s.id,M=s["data-testid"],P="vertical"===A?"regular":s.size,x=o((function(s,o){return i.createElement(i.Fragment,{key:"".concat(s.titleText,"_").concat(o)},i.createElement(l,Object.assign({},s,{stepNumber:o+1,type:S,stepComponentClassName:g,fulfilledStepIcon:y,fulfilledStepIconType:D,onClick:_,isFulfilledStepDisplayNumber:w,size:P})),o!==f.length-1&&i.createElement(c,{className:e(C.divider,N,t({},C.compact,"compact"===P))}))}),[_,w,S,g,y,D,N,f.length,P]),F=o((function(t,s){return i.createElement(l,Object.assign({},t,{key:"".concat(t.titleText,"_").concat(s),stepNumber:s+1,type:S,stepComponentClassName:g,fulfilledStepIcon:y,fulfilledStepIconType:D,onClick:_,isFollowedByDivider:s!==f.length-1,stepDividerClassName:e(C.divider,N),isVertical:!0,isFulfilledStepDisplayNumber:w}))}),[_,w,S,g,y,D,N,f.length]),R=r((function(){return"vertical"===A?F:x}),[A,F,x]);return i.createElement("ol",{ref:p,id:E,"data-testid":M||u(j.MULTI_STEP_INDICATOR,E),className:e(C.wrapper,m)},f.map(R))})),{types:p,stepStatuses:m,textPlacements:d,sizes:f});export{S as default};
 //# sourceMappingURL=MultiStepIndicator.js.map

package/dist/src/components/MultiStepIndicator/MultiStepIndicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiStepIndicator.js","sources":["../../../../src/components/MultiStepIndicator/MultiStepIndicator.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useMemo } from \"react\";\nimport Check from \"~~../../components~~/~~Icon/Icons/components/Check~~\";\nimport Divider from \"../../components/Divider/Divider\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport StepIndicator from \"./components/StepIndicator/StepIndicator\";\nimport {\n MultiStepType as MultiStepTypeEnum,\n Size as SizeEnum,\n StepStatus as StepStatusEnum,\n TextPlacement as TextPlacementEnum\n} from \"./MultiStepConstants\";\nimport { MultiStepType, MultiStepSize, TextPlacement, Step } from \"./MultiStep.types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { SubIcon, VibeComponent, VibeComponentProps, withStaticProps } from \"../../types\";\nimport styles from \"./MultiStepIndicator.module.scss\";\n\nexport interface MultiStepIndicatorProps extends VibeComponentProps {\n steps?: Step[];\n type?: MultiStepType;\n stepComponentClassName?: string;\n dividerComponentClassName?: string;\n fulfilledStepIcon?: SubIcon;\n fulfilledStepIconType?: \"svg\" \| \"font\";\n isFulfilledStepDisplayNumber?: boolean;\n onClick?: (stepNumber: number) => void;\n textPlacement?: TextPlacement;\n size?: MultiStepSize;\n}\n\nconst MultiStepIndicator: VibeComponent<MultiStepIndicatorProps, HTMLOListElement> & {\n types?: typeof MultiStepTypeEnum;\n stepStatuses?: typeof StepStatusEnum;\n textPlacements?: typeof TextPlacementEnum;\n sizes?: typeof SizeEnum;\n} = forwardRef(\n (\n {\n className,\n steps = [],\n type = \"primary\",\n stepComponentClassName,\n dividerComponentClassName,\n fulfilledStepIcon = Check,\n fulfilledStepIconType = \"svg\",\n isFulfilledStepDisplayNumber = false,\n onClick = NOOP,\n textPlacement = \"horizontal\",\n id,\n size,\n \"data-testid\": dataTestId\n }: MultiStepIndicatorProps,\n ref\n ) => {\n const finalSize = textPlacement === \"vertical\" ? \"regular\" : size;\n\n const renderHorizontalStepIndicator = useCallback(\n (step: Step, index: number) => {\n return (\n <React.Fragment key={`${step.titleText}_${index}`}>\n <StepIndicator\n {...step}\n stepNumber={index + 1}\n type={type}\n stepComponentClassName={stepComponentClassName}\n fulfilledStepIcon={fulfilledStepIcon}\n fulfilledStepIconType={fulfilledStepIconType}\n onClick={onClick}\n isFulfilledStepDisplayNumber={isFulfilledStepDisplayNumber}\n size={finalSize}\n />\n {index !== steps.length - 1 && (\n <Divider\n className={cx(styles.divider, dividerComponentClassName, {\n [styles.compact]: finalSize === \"compact\"\n })}\n />\n )}\n </React.Fragment>\n );\n },\n [\n onClick,\n isFulfilledStepDisplayNumber,\n type,\n stepComponentClassName,\n fulfilledStepIcon,\n fulfilledStepIconType,\n dividerComponentClassName,\n steps.length,\n finalSize\n ]\n );\n\n const renderVerticalStepIndicator = useCallback(\n (step: Step, index: number) => {\n return (\n <StepIndicator\n {...step}\n key={`${step.titleText}_${index}`}\n stepNumber={index + 1}\n type={type}\n stepComponentClassName={stepComponentClassName}\n fulfilledStepIcon={fulfilledStepIcon}\n fulfilledStepIconType={fulfilledStepIconType}\n onClick={onClick}\n isFollowedByDivider={index !== steps.length - 1}\n stepDividerClassName={cx(styles.divider, dividerComponentClassName)}\n isVertical\n isFulfilledStepDisplayNumber={isFulfilledStepDisplayNumber}\n />\n );\n },\n [\n onClick,\n isFulfilledStepDisplayNumber,\n type,\n stepComponentClassName,\n fulfilledStepIcon,\n fulfilledStepIconType,\n dividerComponentClassName,\n steps.length\n ]\n );\n\n const stepRenderer = useMemo(\n () => (textPlacement === \"vertical\" ? renderVerticalStepIndicator : renderHorizontalStepIndicator),\n [textPlacement, renderVerticalStepIndicator, renderHorizontalStepIndicator]\n );\n\n return (\n <ol\n ref={ref}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.MULTI_STEP_INDICATOR, id)}\n className={cx(styles.wrapper, className)}\n >\n {steps.map(stepRenderer)}\n </ol>\n );\n }\n);\n\nexport default withStaticProps(MultiStepIndicator, {\n types: MultiStepTypeEnum,\n stepStatuses: StepStatusEnum,\n textPlacements: TextPlacementEnum,\n sizes: SizeEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","_ref$steps","steps","_ref$type","type","stepComponentClassName","dividerComponentClassName","_ref$fulfilledStepIco","fulfilledStepIcon","Check","_ref$fulfilledStepIco2","fulfilledStepIconType","_ref$isFulfilledStepD","isFulfilledStepDisplayNumber","_ref$onClick","onClick","NOOP","_ref$textPlacement","textPlacement","id","dataTestId","finalSize","size","renderHorizontalStepIndicator","useCallback","step","index","React","createElement","Fragment","key","concat","titleText","StepIndicator","Object","assign","stepNumber","length","Divider","cx","styles","divider","_defineProperty","compact","renderVerticalStepIndicator","isFollowedByDivider","stepDividerClassName","isVertical","stepRenderer","useMemo","getTestId","ComponentDefaultTestId","MULTI_STEP_INDICATOR","wrapper","map","types","MultiStepTypeEnum","stepStatuses","StepStatusEnum","textPlacements","TextPlacementEnum","sizes","SizeEnum"],"mappings":"~~yuBA~~+BA,IAiHeA,EAAAA,EA5GXC,GACF,SAAAC,EAgBEC,GACE,IAfAC,EAASF,EAATE,UAASC,EAAAH,EACTI,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAAAL,EACVM,KAAAA,OAAO,IAAHD,EAAG,UAASA,EAChBE,EAAsBP,EAAtBO,uBACAC,EAAyBR,EAAzBQ,0BAAyBC,EAAAT,EACzBU,kBAAAA,OAAoBC,IAAHF,EAAGE,EAAKF,EAAAG,EAAAZ,EACzBa,sBAAAA,OAAwB,IAAHD,EAAG,MAAKA,EAAAE,EAAAd,EAC7Be,6BAAAA,OAA+B,IAAHD,GAAQA,EAAAE,EAAAhB,EACpCiB,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAnB,EACdoB,cAAAA,OAAgB,IAAHD,EAAG,aAAYA,EAC5BE,EAAErB,EAAFqB,GAEeC,EAAUtB,EAAzB,eAIIuB,EAA8B,aAAlBH,EAA+B,UAL3CpB,EAAJwB,KAOIC,EAAgCC,GACpC,SAACC,EAAYC,GACX,OACEC,EAAAC,cAACD,EAAME,SAAS,CAAAC,IAAG,GAAAC,OAAKN,EAAKO,UAAS,KAAAD,OAAIL,IACxCC,EAAAC,cAACK,EACKC,OAAAC,OAAA,CAAA,EAAAV,EACJ,CAAAW,WAAYV,EAAQ,EACpBtB,KAAMA,EACNC,uBAAwBA,EACxBG,kBAAmBA,EACnBG,sBAAuBA,EACvBI,QAASA,EACTF,6BAA8BA,EAC9BS,KAAMD,KAEPK,IAAUxB,EAAMmC,OAAS,GACxBV,EAACC,cAAAU,GACCtC,UAAWuC,EAAGC,EAAOC,QAASnC,EAAyBoC,EAAA,CAAA,EACpDF,EAAOG,QAAwB,YAAdtB,MAM7B,GACD,CACEN,EACAF,EACAT,EACAC,EACAG,EACAG,EACAL,EACAJ,EAAMmC,OACNhB,IAIEuB,EAA8BpB,GAClC,SAACC,EAAYC,GACX,OACEC,EAAAC,cAACK,EAAaC,OAAAC,OAAA,CAAA,EACRV,EACJ,CAAAK,IAAG,GAAAC,OAAKN,EAAKO,UAASD,KAAAA,OAAIL,GAC1BU,WAAYV,EAAQ,EACpBtB,KAAMA,EACNC,uBAAwBA,EACxBG,kBAAmBA,EACnBG,sBAAuBA,EACvBI,QAASA,EACT8B,oBAAqBnB,IAAUxB,EAAMmC,OAAS,EAC9CS,qBAAsBP,EAAGC,EAAOC,QAASnC,GACzCyC,cACAlC,6BAA8BA,IAGnC,GACD,CACEE,EACAF,EACAT,EACAC,EACAG,EACAG,EACAL,EACAJ,EAAMmC,SAIJW,EAAeC,GACnB,WAAA,MAAyB,aAAlB/B,EAA+B0B,EAA8BrB,CAA8B,GAClG,CAACL,EAAe0B,EAA6BrB,IAG/C,OACEI,EACEC,cAAA,KAAA,CAAA7B,IAAKA,EACLoB,GAAIA,EACS,cAAAC,GAAc8B,EAAUC,EAAuBC,qBAAsBjC,GAClFnB,UAAWuC,EAAGC,EAAOa,QAASrD,IAE7BE,EAAMoD,IAAIN,GAGjB,IAGiD,CACjDO,MAAOC,EACPC,aAAcC,EACdC,eAAgBC,EAChBC,MAAOC"}
1	+ {"version":3,"file":"MultiStepIndicator.js","sources":["../../../../src/components/MultiStepIndicator/MultiStepIndicator.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useMemo } from \"react\";\nimport { Check } from \"@vibe/icons\";\nimport Divider from \"../../components/Divider/Divider\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport StepIndicator from \"./components/StepIndicator/StepIndicator\";\nimport {\n MultiStepType as MultiStepTypeEnum,\n Size as SizeEnum,\n StepStatus as StepStatusEnum,\n TextPlacement as TextPlacementEnum\n} from \"./MultiStepConstants\";\nimport { MultiStepType, MultiStepSize, TextPlacement, Step } from \"./MultiStep.types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { SubIcon, VibeComponent, VibeComponentProps, withStaticProps } from \"../../types\";\nimport styles from \"./MultiStepIndicator.module.scss\";\n\nexport interface MultiStepIndicatorProps extends VibeComponentProps {\n steps?: Step[];\n type?: MultiStepType;\n stepComponentClassName?: string;\n dividerComponentClassName?: string;\n fulfilledStepIcon?: SubIcon;\n fulfilledStepIconType?: \"svg\" \| \"font\";\n isFulfilledStepDisplayNumber?: boolean;\n onClick?: (stepNumber: number) => void;\n textPlacement?: TextPlacement;\n size?: MultiStepSize;\n}\n\nconst MultiStepIndicator: VibeComponent<MultiStepIndicatorProps, HTMLOListElement> & {\n types?: typeof MultiStepTypeEnum;\n stepStatuses?: typeof StepStatusEnum;\n textPlacements?: typeof TextPlacementEnum;\n sizes?: typeof SizeEnum;\n} = forwardRef(\n (\n {\n className,\n steps = [],\n type = \"primary\",\n stepComponentClassName,\n dividerComponentClassName,\n fulfilledStepIcon = Check,\n fulfilledStepIconType = \"svg\",\n isFulfilledStepDisplayNumber = false,\n onClick = NOOP,\n textPlacement = \"horizontal\",\n id,\n size,\n \"data-testid\": dataTestId\n }: MultiStepIndicatorProps,\n ref\n ) => {\n const finalSize = textPlacement === \"vertical\" ? \"regular\" : size;\n\n const renderHorizontalStepIndicator = useCallback(\n (step: Step, index: number) => {\n return (\n <React.Fragment key={`${step.titleText}_${index}`}>\n <StepIndicator\n {...step}\n stepNumber={index + 1}\n type={type}\n stepComponentClassName={stepComponentClassName}\n fulfilledStepIcon={fulfilledStepIcon}\n fulfilledStepIconType={fulfilledStepIconType}\n onClick={onClick}\n isFulfilledStepDisplayNumber={isFulfilledStepDisplayNumber}\n size={finalSize}\n />\n {index !== steps.length - 1 && (\n <Divider\n className={cx(styles.divider, dividerComponentClassName, {\n [styles.compact]: finalSize === \"compact\"\n })}\n />\n )}\n </React.Fragment>\n );\n },\n [\n onClick,\n isFulfilledStepDisplayNumber,\n type,\n stepComponentClassName,\n fulfilledStepIcon,\n fulfilledStepIconType,\n dividerComponentClassName,\n steps.length,\n finalSize\n ]\n );\n\n const renderVerticalStepIndicator = useCallback(\n (step: Step, index: number) => {\n return (\n <StepIndicator\n {...step}\n key={`${step.titleText}_${index}`}\n stepNumber={index + 1}\n type={type}\n stepComponentClassName={stepComponentClassName}\n fulfilledStepIcon={fulfilledStepIcon}\n fulfilledStepIconType={fulfilledStepIconType}\n onClick={onClick}\n isFollowedByDivider={index !== steps.length - 1}\n stepDividerClassName={cx(styles.divider, dividerComponentClassName)}\n isVertical\n isFulfilledStepDisplayNumber={isFulfilledStepDisplayNumber}\n />\n );\n },\n [\n onClick,\n isFulfilledStepDisplayNumber,\n type,\n stepComponentClassName,\n fulfilledStepIcon,\n fulfilledStepIconType,\n dividerComponentClassName,\n steps.length\n ]\n );\n\n const stepRenderer = useMemo(\n () => (textPlacement === \"vertical\" ? renderVerticalStepIndicator : renderHorizontalStepIndicator),\n [textPlacement, renderVerticalStepIndicator, renderHorizontalStepIndicator]\n );\n\n return (\n <ol\n ref={ref}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.MULTI_STEP_INDICATOR, id)}\n className={cx(styles.wrapper, className)}\n >\n {steps.map(stepRenderer)}\n </ol>\n );\n }\n);\n\nexport default withStaticProps(MultiStepIndicator, {\n types: MultiStepTypeEnum,\n stepStatuses: StepStatusEnum,\n textPlacements: TextPlacementEnum,\n sizes: SizeEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","_ref$steps","steps","_ref$type","type","stepComponentClassName","dividerComponentClassName","_ref$fulfilledStepIco","fulfilledStepIcon","Check","_ref$fulfilledStepIco2","fulfilledStepIconType","_ref$isFulfilledStepD","isFulfilledStepDisplayNumber","_ref$onClick","onClick","NOOP","_ref$textPlacement","textPlacement","id","dataTestId","finalSize","size","renderHorizontalStepIndicator","useCallback","step","index","React","createElement","Fragment","key","concat","titleText","StepIndicator","Object","assign","stepNumber","length","Divider","cx","styles","divider","_defineProperty","compact","renderVerticalStepIndicator","isFollowedByDivider","stepDividerClassName","isVertical","stepRenderer","useMemo","getTestId","ComponentDefaultTestId","MULTI_STEP_INDICATOR","wrapper","map","types","MultiStepTypeEnum","stepStatuses","StepStatusEnum","textPlacements","TextPlacementEnum","sizes","SizeEnum"],"mappings":"isDA+BA,IAiHeA,EAAAA,EA5GXC,GACF,SAAAC,EAgBEC,GACE,IAfAC,EAASF,EAATE,UAASC,EAAAH,EACTI,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAAAL,EACVM,KAAAA,OAAO,IAAHD,EAAG,UAASA,EAChBE,EAAsBP,EAAtBO,uBACAC,EAAyBR,EAAzBQ,0BAAyBC,EAAAT,EACzBU,kBAAAA,OAAoBC,IAAHF,EAAGE,EAAKF,EAAAG,EAAAZ,EACzBa,sBAAAA,OAAwB,IAAHD,EAAG,MAAKA,EAAAE,EAAAd,EAC7Be,6BAAAA,OAA+B,IAAHD,GAAQA,EAAAE,EAAAhB,EACpCiB,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAnB,EACdoB,cAAAA,OAAgB,IAAHD,EAAG,aAAYA,EAC5BE,EAAErB,EAAFqB,GAEeC,EAAUtB,EAAzB,eAIIuB,EAA8B,aAAlBH,EAA+B,UAL3CpB,EAAJwB,KAOIC,EAAgCC,GACpC,SAACC,EAAYC,GACX,OACEC,EAAAC,cAACD,EAAME,SAAS,CAAAC,IAAG,GAAAC,OAAKN,EAAKO,UAAS,KAAAD,OAAIL,IACxCC,EAAAC,cAACK,EACKC,OAAAC,OAAA,CAAA,EAAAV,EACJ,CAAAW,WAAYV,EAAQ,EACpBtB,KAAMA,EACNC,uBAAwBA,EACxBG,kBAAmBA,EACnBG,sBAAuBA,EACvBI,QAASA,EACTF,6BAA8BA,EAC9BS,KAAMD,KAEPK,IAAUxB,EAAMmC,OAAS,GACxBV,EAACC,cAAAU,GACCtC,UAAWuC,EAAGC,EAAOC,QAASnC,EAAyBoC,EAAA,CAAA,EACpDF,EAAOG,QAAwB,YAAdtB,MAM7B,GACD,CACEN,EACAF,EACAT,EACAC,EACAG,EACAG,EACAL,EACAJ,EAAMmC,OACNhB,IAIEuB,EAA8BpB,GAClC,SAACC,EAAYC,GACX,OACEC,EAAAC,cAACK,EAAaC,OAAAC,OAAA,CAAA,EACRV,EACJ,CAAAK,IAAG,GAAAC,OAAKN,EAAKO,UAASD,KAAAA,OAAIL,GAC1BU,WAAYV,EAAQ,EACpBtB,KAAMA,EACNC,uBAAwBA,EACxBG,kBAAmBA,EACnBG,sBAAuBA,EACvBI,QAASA,EACT8B,oBAAqBnB,IAAUxB,EAAMmC,OAAS,EAC9CS,qBAAsBP,EAAGC,EAAOC,QAASnC,GACzCyC,cACAlC,6BAA8BA,IAGnC,GACD,CACEE,EACAF,EACAT,EACAC,EACAG,EACAG,EACAL,EACAJ,EAAMmC,SAIJW,EAAeC,GACnB,WAAA,MAAyB,aAAlB/B,EAA+B0B,EAA8BrB,CAA8B,GAClG,CAACL,EAAe0B,EAA6BrB,IAG/C,OACEI,EACEC,cAAA,KAAA,CAAA7B,IAAKA,EACLoB,GAAIA,EACS,cAAAC,GAAc8B,EAAUC,EAAuBC,qBAAsBjC,GAClFnB,UAAWuC,EAAGC,EAAOa,QAASrD,IAE7BE,EAAMoD,IAAIN,GAGjB,IAGiD,CACjDO,MAAOC,EACPC,aAAcC,EACdC,eAAgBC,EAChBC,MAAOC"}

package/dist/src/components/MultiStepIndicator/MultiStepIndicator.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={wrapper:"wrapper_0ca7c2dc6d",divider:"divider_93cbcc7510",compact:"compact_560205bde6"};!function(e){if("undefined"==typeof document)return;const d=document.head||document.getElementsByTagName("head")[0],n="s_id-0040463364ed_3_0_0-alpha_3";if(d.querySelector("#"+n))return;const c=document.createElement("style");c.id=n,d.firstChild?d.insertBefore(c,d.firstChild):d.appendChild(c),c.appendChild(document.createTextNode(e))}(".wrapper_0ca7c2dc6d {\n  display: flex;\n}\n.wrapper_0ca7c2dc6d .divider_93cbcc7510 {\n  background-color: var(--ui-border-color);\n  margin: 16px;\n  height: 1px;\n  width: 48px;\n}\n.wrapper_0ca7c2dc6d .divider_93cbcc7510.compact_560205bde6 {\n  max-width: 40px;\n  min-width: 16px;\n  margin-inline-start: var(--spacing-small);\n  margin-inline-end: var(--spacing-small);\n}");export{e as default};
+var e={wrapper:"wrapper_567dcaae50",divider:"divider_fe4ad224fb",compact:"compact_c652b543f9"};!function(e){if("undefined"==typeof document)return;const a=document.head||document.getElementsByTagName("head")[0],n="s_id-0040463364ed_3_0_0-alpha_5";if(a.querySelector("#"+n))return;const d=document.createElement("style");d.id=n,a.firstChild?a.insertBefore(d,a.firstChild):a.appendChild(d),d.appendChild(document.createTextNode(e))}(".wrapper_567dcaae50 {\n  display: flex;\n}\n.wrapper_567dcaae50 .divider_fe4ad224fb {\n  background-color: var(--ui-border-color);\n  margin: 16px;\n  height: 1px;\n  width: 48px;\n}\n.wrapper_567dcaae50 .divider_fe4ad224fb.compact_c652b543f9 {\n  max-width: 40px;\n  min-width: 16px;\n  margin-inline-start: var(--spacing-small);\n  margin-inline-end: var(--spacing-small);\n}");export{e as default};
 //# sourceMappingURL=MultiStepIndicator.module.scss.js.map

package/dist/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{slicedToArray as e,toConsumableArray as t,defineProperty as i}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as n}from"lodash-es";import{getStyle as a}from"../../../../helpers/typesciptCssModulesHelper.js";import{getTestId as o,ComponentDefaultTestId as r}from"../../../../tests/testIds.js";import l from"classnames";import{keyCodes as s}from"../../../../constants/keyCodes.js";import c,{useState as m,useRef as p,useCallback as d,useEffect as u,useMemo as f}from"react";import{SwitchTransition as v,CSSTransition as y}from"react-transition-group";import _ from"../../../../hooks/useEventListener/index.js";import E from"../../../../hooks/useKeyEvent/index.js";import x from"../../../Icon/Icon.js";import b from"../../../Icon/Icons/components/Check.js";import N from"../../../Divider/Divider.js";import{NOOP as I}from"../../../../utils/function-utils.js";import C from"../../../HiddenText/HiddenText.js";import S from"../../../Clickable/Clickable.js";import k from"./StepIndicator.module.scss.js";var T=[s.ENTER,s.SPACE],j=function(e){var t=e.fulfilledStepIcon,i=e.fulfilledStepIconType;return"fulfilled"!==e.status||e.isFulfilledStepDisplayNumber?c.createElement(c.Fragment,null,e.stepNumber):c.createElement(x,{icon:t,className:l(k.numberContainerTextCheckIcon),iconType:i,ignoreFocusStyle:!0,ariaHidden:!0})},A=function(s){var x=s.stepComponentClassName,A=s.stepNumber,g=void 0===A?1:A,D=s.status,h=void 0===D?"pending":D,w=s.titleText,F=void 0===w?"Heading text":w,H=s.subtitleText,P=void 0===H?"Subtitle text":H,L=s.type,z=void 0===L?"primary":L,B=s.fulfilledStepIcon,R=void 0===B?b:B,V=s.fulfilledStepIconType,K=void 0===V?"svg":V,M=s.isFulfilledStepDisplayNumber,O=void 0!==M&&M,q=s.onClick,G=void 0===q?I:q,J=s.isFollowedByDivider,Q=void 0!==J&&J,U=s.stepDividerClassName,W=s.isVertical,X=void 0!==W&&W,Y=s.id,Z=s.size,$=void 0===Z?"regular":Z,ee=s["data-testid"],te=m(!1),ie=e(te,2),ne=ie[0],ae=ie[1],oe=p(null),re=p(h),le=d((function(){ae(!0)}),[ae]),se=d((function(){ae(!1)}),[ae]),ce=d((function(){return re.current!==h}),[re,h]),me=d((function(){G&&G(g)}),[G,g]);_({eventName:"animationend",callback:se,ref:oe}),E({keys:T,callback:me,ref:oe}),u((function(){ce()&&le()}),[h,ce,le]),u((function(){re.current=h}),[h]);var pe=f((function(){return"Step ".concat(g,": ").concat(F," - ").concat(P,", status: ").concat(h)}),[h,F,g,P]),de=function(e){return[a(k,n(e||"indicator")),a(k,n("type-".concat(z).concat(e))),a(k,n("status-".concat(h).concat(e))),a(k,n("size-".concat($).concat(e)))]};return c.createElement(S,{tabIndex:"-1",elementType:"li",className:l.apply(void 0,t(de("")).concat([x,i(i(i({},k.withAnimation,ne),k.clickable,G),k.textPlacementVertical,X)])),"aria-label":pe,onClick:me,"data-testid":ee||o(r.STEP_INDICATOR,Y)},c.createElement("div",{className:l.apply(void 0,t(de("__number-divider-container")))},c.createElement("div",{className:l.apply(void 0,t(de("__number-container"))),ref:oe,tabIndex:0,role:"button"},c.createElement(v,{mode:"out-in"},c.createElement(y,{classNames:{enter:k.swapEnter,enterActive:k.swapEnterActive,exit:k.swapExit,exitActive:k.swapExitActive},addEndListener:function(e,t){e.addEventListener("transitionend",t,!1)},key:h},c.createElement("span",{className:l.apply(void 0,t(de("__number-container__text")))},c.createElement(j,{fulfilledStepIcon:R,fulfilledStepIconType:K,isFulfilledStepDisplayNumber:O,stepNumber:g,status:h}))))),Q&&X&&c.createElement(N,{className:l(k.divider,U)})),c.createElement("div",{className:l.apply(void 0,t(de("__text-container")))},c.createElement("div",{className:l.apply(void 0,t(de("__text-container__title")))},c.createElement(C,{text:h})," ",c.createElement("span",{className:l.apply(void 0,t(de("__text-container__title__text")))},F)),"compact"!==$?c.createElement("span",{className:l.apply(void 0,t(de("__text-container__subtitle__text")))},P):null))};export{A as default};
+import{slicedToArray as e,toConsumableArray as t,defineProperty as i}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as o}from"lodash-es";import{getStyle as r}from"../../../../helpers/typesciptCssModulesHelper.js";import{getTestId as n,ComponentDefaultTestId as s}from"../../../../tests/testIds.js";import a from"classnames";import{keyCodes as c}from"../../../../constants/keyCodes.js";import l,{useState as m,useRef as d,useCallback as p,useEffect as u,useMemo as v}from"react";import{SwitchTransition as f,CSSTransition as j}from"react-transition-group";import _ from"../../../../hooks/useEventListener/index.js";import y from"../../../../hooks/useKeyEvent/index.js";import E from"../../../Icon/Icon.js";import"../../../../../icons/dist/_virtual/_tslib.js";import"../../../../../icons/dist/react/AddSmall.js";import"../../../../../icons/dist/react/Alert.js";import b from"../../../../../icons/dist/react/Check.js";import"../../../../../icons/dist/react/CloseSmall.js";import"../../../../../icons/dist/react/DropdownChevronDown.js";import"../../../../../icons/dist/react/DropdownChevronRight.js";import"../../../../../icons/dist/react/DropdownChevronUp.js";import"../../../../../icons/dist/react/Info.js";import"../../../../../icons/dist/react/Menu.js";import"../../../../../icons/dist/react/MoveArrowLeft.js";import"../../../../../icons/dist/react/MoveArrowRight.js";import"../../../../../icons/dist/react/NavigationChevronLeft.js";import"../../../../../icons/dist/react/NavigationChevronRight.js";import"../../../../../icons/dist/react/NoColor.js";import"../../../../../icons/dist/react/Remove.js";import"../../../../../icons/dist/react/Search.js";import"../../../../../icons/dist/react/Sort.js";import"../../../../../icons/dist/react/SortAscending.js";import"../../../../../icons/dist/react/SortDescending.js";import"../../../../../icons/dist/react/Warning.js";import x from"../../../Divider/Divider.js";import{NOOP as N}from"../../../../utils/function-utils.js";import C from"../../../HiddenText/HiddenText.js";import S from"../../../Clickable/Clickable.js";import g from"./StepIndicator.module.scss.js";var h=[c.ENTER,c.SPACE],I=function(e){var t=e.fulfilledStepIcon,i=e.fulfilledStepIconType;return"fulfilled"!==e.status||e.isFulfilledStepDisplayNumber?l.createElement(l.Fragment,null,e.stepNumber):l.createElement(E,{icon:t,className:a(g.numberContainerTextCheckIcon),iconType:i,ignoreFocusStyle:!0,ariaHidden:!0})},k=function(c){var E=c.stepComponentClassName,k=c.stepNumber,A=void 0===k?1:k,T=c.status,D=void 0===T?"pending":T,w=c.titleText,F=void 0===w?"Heading text":w,H=c.subtitleText,R=void 0===H?"Subtitle text":H,L=c.type,P=void 0===L?"primary":L,M=c.fulfilledStepIcon,z=void 0===M?b:M,B=c.fulfilledStepIconType,V=void 0===B?"svg":B,K=c.isFulfilledStepDisplayNumber,O=void 0!==K&&K,U=c.onClick,W=void 0===U?N:U,q=c.isFollowedByDivider,G=void 0!==q&&q,J=c.stepDividerClassName,Q=c.isVertical,X=void 0!==Q&&Q,Y=c.id,Z=c.size,$=void 0===Z?"regular":Z,ee=c["data-testid"],te=m(!1),ie=e(te,2),oe=ie[0],re=ie[1],ne=d(null),se=d(D),ae=p((function(){re(!0)}),[re]),ce=p((function(){re(!1)}),[re]),le=p((function(){return se.current!==D}),[se,D]),me=p((function(){W&&W(A)}),[W,A]);_({eventName:"animationend",callback:ce,ref:ne}),y({keys:h,callback:me,ref:ne}),u((function(){le()&&ae()}),[D,le,ae]),u((function(){se.current=D}),[D]);var de=v((function(){return"Step ".concat(A,": ").concat(F," - ").concat(R,", status: ").concat(D)}),[D,F,A,R]),pe=function(e){return[r(g,o(e||"indicator")),r(g,o("type-".concat(P).concat(e))),r(g,o("status-".concat(D).concat(e))),r(g,o("size-".concat($).concat(e)))]};return l.createElement(S,{tabIndex:"-1",elementType:"li",className:a.apply(void 0,t(pe("")).concat([E,i(i(i({},g.withAnimation,oe),g.clickable,W),g.textPlacementVertical,X)])),"aria-label":de,onClick:me,"data-testid":ee||n(s.STEP_INDICATOR,Y)},l.createElement("div",{className:a.apply(void 0,t(pe("__number-divider-container")))},l.createElement("div",{className:a.apply(void 0,t(pe("__number-container"))),ref:ne,tabIndex:0,role:"button"},l.createElement(f,{mode:"out-in"},l.createElement(j,{classNames:{enter:g.swapEnter,enterActive:g.swapEnterActive,exit:g.swapExit,exitActive:g.swapExitActive},addEndListener:function(e,t){e.addEventListener("transitionend",t,!1)},key:D},l.createElement("span",{className:a.apply(void 0,t(pe("__number-container__text")))},l.createElement(I,{fulfilledStepIcon:z,fulfilledStepIconType:V,isFulfilledStepDisplayNumber:O,stepNumber:A,status:D}))))),G&&X&&l.createElement(x,{className:a(g.divider,J)})),l.createElement("div",{className:a.apply(void 0,t(pe("__text-container")))},l.createElement("div",{className:a.apply(void 0,t(pe("__text-container__title")))},l.createElement(C,{text:D})," ",l.createElement("span",{className:a.apply(void 0,t(pe("__text-container__title__text")))},F)),"compact"!==$?l.createElement("span",{className:a.apply(void 0,t(pe("__text-container__subtitle__text")))},R):null))};export{k as default};
 //# sourceMappingURL=StepIndicator.js.map

package/dist/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepIndicator.js","sources":["../../../../../../src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { keyCodes } from \"../../../../constants/keyCodes\";\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CSSTransition, SwitchTransition } from \"react-transition-group\";\nimport useEventListener from \"../../../../hooks/useEventListener\";\nimport useKeyEvent from \"../../../../hooks/useKeyEvent\";\nimport Icon from \"../../../../components/Icon/Icon\";\nimport Check from \"../../../../components/Icon/Icons/components/Check\";\nimport Divider from \"../../../../components/Divider/Divider\";\nimport { NOOP } from \"../../../../utils/function-utils\";\nimport HiddenText from \"../../../../components/HiddenText/HiddenText\";\nimport Clickable from \"../../../../components/Clickable/Clickable\";\nimport { MultiStepSize, MultiStepType, StepStatus } from \"../../MultiStep.types\";\nimport styles from \"./StepIndicator.module.scss\";\nimport classNames from \"classnames\";\nimport { SubIcon, VibeComponentProps } from \"../../../../types\";\n\nconst KEYS = [keyCodes.ENTER, keyCodes.SPACE];\n\nexport interface StepCircleDisplayProps {\n status: StepStatus;\n isFulfilledStepDisplayNumber: boolean;\n fulfilledStepIcon: SubIcon;\n fulfilledStepIconType: \"svg\" \| \"font\";\n stepNumber: number;\n}\n\nconst StepCircleDisplay: React.FC<StepCircleDisplayProps> = ({\n status,\n isFulfilledStepDisplayNumber,\n fulfilledStepIcon,\n fulfilledStepIconType,\n stepNumber\n}) => {\n return status === \"fulfilled\" && !isFulfilledStepDisplayNumber ? (\n <Icon\n icon={fulfilledStepIcon}\n className={classNames(styles.numberContainerTextCheckIcon)}\n iconType={fulfilledStepIconType}\n ignoreFocusStyle\n ariaHidden={true}\n />\n ) : (\n <>{stepNumber}</>\n );\n};\n\nexport interface StepIndicatorProps extends VibeComponentProps {\n status: StepStatus;\n titleText: string;\n subtitleText?: string;\n stepNumber?: number;\n stepComponentClassName?: string;\n type?: MultiStepType;\n fulfilledStepIcon?: SubIcon;\n fulfilledStepIconType?: \"svg\" \| \"font\";\n isFulfilledStepDisplayNumber?: boolean;\n onClick?: (stepNumber: number) => void;\n isFollowedByDivider?: boolean;\n stepDividerClassName?: string;\n isVertical?: boolean;\n size?: MultiStepSize;\n}\n\nconst StepIndicator: React.FC<StepIndicatorProps> = ({\n stepComponentClassName,\n stepNumber = 1,\n status = \"pending\",\n titleText = \"Heading text\",\n subtitleText = \"Subtitle text\",\n type = \"primary\",\n fulfilledStepIcon = Check,\n fulfilledStepIconType = \"svg\",\n isFulfilledStepDisplayNumber = false,\n onClick = NOOP,\n isFollowedByDivider = false,\n stepDividerClassName,\n isVertical = false,\n id,\n size = \"regular\",\n \"data-testid\": dataTestId\n}: StepIndicatorProps) => {\n // Animations state\n const [statusChangeAnimationState, setStatusChangeAnimationState] = useState(false);\n\n // Refs\n const componentRef = useRef(null);\n const prevStatusRef = useRef(status);\n\n // Callbacks for modifying animation state\n const enableStatusChangeAnimation = useCallback(() => {\n setStatusChangeAnimationState(true);\n }, [setStatusChangeAnimationState]);\n\n const disableStatusChangeAnimation = useCallback(() => {\n setStatusChangeAnimationState(false);\n }, [setStatusChangeAnimationState]);\n\n const isStatusTransition = useCallback(() => prevStatusRef.current !== status, [prevStatusRef, status]);\n\n const handleClick = useCallback(() => {\n if (onClick) onClick(stepNumber);\n }, [onClick, stepNumber]);\n\n // Event listeners for removing animation.\n useEventListener({\n eventName: \"animationend\",\n callback: disableStatusChangeAnimation,\n ref: componentRef\n });\n\n useKeyEvent({\n keys: KEYS,\n callback: handleClick,\n ref: componentRef\n });\n\n // Effect - triggering animation when necessary.\n useEffect(() => {\n if (isStatusTransition()) {\n enableStatusChangeAnimation();\n }\n }, [status, isStatusTransition, enableStatusChangeAnimation]);\n\n // Effect - updating previous status ref value (for animation) after component update.\n useEffect(() => {\n prevStatusRef.current = status;\n }, [status]);\n\n const ariaLabel = useMemo(() => {\n return `Step ${stepNumber}: ${titleText} - ${subtitleText}, status: ${status}`;\n }, [status, titleText, stepNumber, subtitleText]);\n\n const getClassNamesWithSuffix = (suffix: string) => {\n return [\n getStyle(styles, camelCase(suffix \|\| \"indicator\")),\n getStyle(styles, camelCase(`type-${type}${suffix}`)),\n getStyle(styles, camelCase(`status-${status}${suffix}`)),\n getStyle(styles, camelCase(`size-${size}${suffix}`))\n ];\n };\n\n return (\n <Clickable\n tabIndex=\"-1\"\n elementType=\"li\"\n className={cx(...getClassNamesWithSuffix(\"\"), stepComponentClassName, {\n [styles.withAnimation]: statusChangeAnimationState,\n [styles.clickable]: onClick,\n [styles.textPlacementVertical]: isVertical\n })}\n aria-label={ariaLabel}\n onClick={handleClick}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.STEP_INDICATOR, id)}\n >\n <div className={cx(...getClassNamesWithSuffix(\"__number-divider-container\"))}>\n <div\n className={cx(...getClassNamesWithSuffix(\"__number-container\"))}\n ref={componentRef}\n tabIndex={0}\n role=\"button\"\n >\n <SwitchTransition mode=\"out-in\">\n <CSSTransition<undefined>\n // CSSTransition needs to be specified with the generic parameter to decide type for addEndListener's callback\n // otherwise, addEndListener cb has only `done` param (ts error)\n classNames={{\n enter: styles.swapEnter,\n enterActive: styles.swapEnterActive,\n exit: styles.swapExit,\n exitActive: styles.swapExitActive\n }}\n addEndListener={(node: HTMLElement, done: () => void) => {\n node.addEventListener(\"transitionend\", done, false);\n }}\n key={status}\n >\n <span className={cx(...getClassNamesWithSuffix(\"__number-container__text\"))}>\n <StepCircleDisplay\n fulfilledStepIcon={fulfilledStepIcon}\n fulfilledStepIconType={fulfilledStepIconType}\n isFulfilledStepDisplayNumber={isFulfilledStepDisplayNumber}\n stepNumber={stepNumber}\n status={status}\n />\n </span>\n </CSSTransition>\n </SwitchTransition>\n </div>\n {isFollowedByDivider && isVertical && <Divider className={cx(styles.divider, stepDividerClassName)} />}\n </div>\n <div className={cx(...getClassNamesWithSuffix(\"__text-container\"))}>\n <div className={cx(...getClassNamesWithSuffix(\"__text-container__title\"))}>\n <HiddenText text={status} /> {/* for accessibility */}\n <span className={cx(...getClassNamesWithSuffix(\"__text-container__title__text\"))}>{titleText}</span>\n </div>\n {size !== \"compact\" ? (\n <span className={cx(...getClassNamesWithSuffix(\"__text-container__subtitle__text\"))}>{subtitleText}</span>\n ) : null}\n </div>\n </Clickable>\n );\n};\n\nexport default StepIndicator;\n"],"names":["KEYS","keyCodes","ENTER","SPACE","StepCircleDisplay","_ref","fulfilledStepIcon","fulfilledStepIconType","status","isFulfilledStepDisplayNumber","React","createElement","Fragment","stepNumber","Icon","icon","className","classNames","styles","numberContainerTextCheckIcon","iconType","ignoreFocusStyle","ariaHidden","StepIndicator","_ref2","stepComponentClassName","_ref2$stepNumber","_ref2$status","_ref2$titleText","titleText","_ref2$subtitleText","subtitleText","_ref2$type","type","_ref2$fulfilledStepIc","Check","_ref2$fulfilledStepIc2","_ref2$isFulfilledStep","_ref2$onClick","onClick","NOOP","_ref2$isFollowedByDiv","isFollowedByDivider","stepDividerClassName","_ref2$isVertical","isVertical","id","_ref2$size","size","dataTestId","_useState","useState","_useState2","_slicedToArray","statusChangeAnimationState","setStatusChangeAnimationState","componentRef","useRef","prevStatusRef","enableStatusChangeAnimation","useCallback","disableStatusChangeAnimation","isStatusTransition","current","handleClick","useEventListener","eventName","callback","ref","useKeyEvent","keys","useEffect","ariaLabel","useMemo","concat","getClassNamesWithSuffix","suffix","getStyle","camelCase","Clickable","tabIndex","elementType","cx","apply","_toConsumableArray","_defineProperty","withAnimation","clickable","textPlacementVertical","getTestId","ComponentDefaultTestId","STEP_INDICATOR","role","SwitchTransition","mode","CSSTransition","enter","swapEnter","enterActive","swapEnterActive","exit","swapExit","exitActive","swapExitActive","addEndListener","node","done","addEventListener","key","Divider","divider","HiddenText","text"],"mappings":"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"}
1	+ {"version":3,"file":"StepIndicator.js","sources":["../../../../../../src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { keyCodes } from \"../../../../constants/keyCodes\";\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CSSTransition, SwitchTransition } from \"react-transition-group\";\nimport useEventListener from \"../../../../hooks/useEventListener\";\nimport useKeyEvent from \"../../../../hooks/useKeyEvent\";\nimport Icon from \"../../../../components/Icon/Icon\";\nimport { Check } from \"@vibe/icons\";\nimport Divider from \"../../../../components/Divider/Divider\";\nimport { NOOP } from \"../../../../utils/function-utils\";\nimport HiddenText from \"../../../../components/HiddenText/HiddenText\";\nimport Clickable from \"../../../../components/Clickable/Clickable\";\nimport { MultiStepSize, MultiStepType, StepStatus } from \"../../MultiStep.types\";\nimport styles from \"./StepIndicator.module.scss\";\nimport classNames from \"classnames\";\nimport { SubIcon, VibeComponentProps } from \"../../../../types\";\n\nconst KEYS = [keyCodes.ENTER, keyCodes.SPACE];\n\nexport interface StepCircleDisplayProps {\n status: StepStatus;\n isFulfilledStepDisplayNumber: boolean;\n fulfilledStepIcon: SubIcon;\n fulfilledStepIconType: \"svg\" \| \"font\";\n stepNumber: number;\n}\n\nconst StepCircleDisplay: React.FC<StepCircleDisplayProps> = ({\n status,\n isFulfilledStepDisplayNumber,\n fulfilledStepIcon,\n fulfilledStepIconType,\n stepNumber\n}) => {\n return status === \"fulfilled\" && !isFulfilledStepDisplayNumber ? (\n <Icon\n icon={fulfilledStepIcon}\n className={classNames(styles.numberContainerTextCheckIcon)}\n iconType={fulfilledStepIconType}\n ignoreFocusStyle\n ariaHidden={true}\n />\n ) : (\n <>{stepNumber}</>\n );\n};\n\nexport interface StepIndicatorProps extends VibeComponentProps {\n status: StepStatus;\n titleText: string;\n subtitleText?: string;\n stepNumber?: number;\n stepComponentClassName?: string;\n type?: MultiStepType;\n fulfilledStepIcon?: SubIcon;\n fulfilledStepIconType?: \"svg\" \| \"font\";\n isFulfilledStepDisplayNumber?: boolean;\n onClick?: (stepNumber: number) => void;\n isFollowedByDivider?: boolean;\n stepDividerClassName?: string;\n isVertical?: boolean;\n size?: MultiStepSize;\n}\n\nconst StepIndicator: React.FC<StepIndicatorProps> = ({\n stepComponentClassName,\n stepNumber = 1,\n status = \"pending\",\n titleText = \"Heading text\",\n subtitleText = \"Subtitle text\",\n type = \"primary\",\n fulfilledStepIcon = Check,\n fulfilledStepIconType = \"svg\",\n isFulfilledStepDisplayNumber = false,\n onClick = NOOP,\n isFollowedByDivider = false,\n stepDividerClassName,\n isVertical = false,\n id,\n size = \"regular\",\n \"data-testid\": dataTestId\n}: StepIndicatorProps) => {\n // Animations state\n const [statusChangeAnimationState, setStatusChangeAnimationState] = useState(false);\n\n // Refs\n const componentRef = useRef(null);\n const prevStatusRef = useRef(status);\n\n // Callbacks for modifying animation state\n const enableStatusChangeAnimation = useCallback(() => {\n setStatusChangeAnimationState(true);\n }, [setStatusChangeAnimationState]);\n\n const disableStatusChangeAnimation = useCallback(() => {\n setStatusChangeAnimationState(false);\n }, [setStatusChangeAnimationState]);\n\n const isStatusTransition = useCallback(() => prevStatusRef.current !== status, [prevStatusRef, status]);\n\n const handleClick = useCallback(() => {\n if (onClick) onClick(stepNumber);\n }, [onClick, stepNumber]);\n\n // Event listeners for removing animation.\n useEventListener({\n eventName: \"animationend\",\n callback: disableStatusChangeAnimation,\n ref: componentRef\n });\n\n useKeyEvent({\n keys: KEYS,\n callback: handleClick,\n ref: componentRef\n });\n\n // Effect - triggering animation when necessary.\n useEffect(() => {\n if (isStatusTransition()) {\n enableStatusChangeAnimation();\n }\n }, [status, isStatusTransition, enableStatusChangeAnimation]);\n\n // Effect - updating previous status ref value (for animation) after component update.\n useEffect(() => {\n prevStatusRef.current = status;\n }, [status]);\n\n const ariaLabel = useMemo(() => {\n return `Step ${stepNumber}: ${titleText} - ${subtitleText}, status: ${status}`;\n }, [status, titleText, stepNumber, subtitleText]);\n\n const getClassNamesWithSuffix = (suffix: string) => {\n return [\n getStyle(styles, camelCase(suffix \|\| \"indicator\")),\n getStyle(styles, camelCase(`type-${type}${suffix}`)),\n getStyle(styles, camelCase(`status-${status}${suffix}`)),\n getStyle(styles, camelCase(`size-${size}${suffix}`))\n ];\n };\n\n return (\n <Clickable\n tabIndex=\"-1\"\n elementType=\"li\"\n className={cx(...getClassNamesWithSuffix(\"\"), stepComponentClassName, {\n [styles.withAnimation]: statusChangeAnimationState,\n [styles.clickable]: onClick,\n [styles.textPlacementVertical]: isVertical\n })}\n aria-label={ariaLabel}\n onClick={handleClick}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.STEP_INDICATOR, id)}\n >\n <div className={cx(...getClassNamesWithSuffix(\"__number-divider-container\"))}>\n <div\n className={cx(...getClassNamesWithSuffix(\"__number-container\"))}\n ref={componentRef}\n tabIndex={0}\n role=\"button\"\n >\n <SwitchTransition mode=\"out-in\">\n <CSSTransition<undefined>\n // CSSTransition needs to be specified with the generic parameter to decide type for addEndListener's callback\n // otherwise, addEndListener cb has only `done` param (ts error)\n classNames={{\n enter: styles.swapEnter,\n enterActive: styles.swapEnterActive,\n exit: styles.swapExit,\n exitActive: styles.swapExitActive\n }}\n addEndListener={(node: HTMLElement, done: () => void) => {\n node.addEventListener(\"transitionend\", done, false);\n }}\n key={status}\n >\n <span className={cx(...getClassNamesWithSuffix(\"__number-container__text\"))}>\n <StepCircleDisplay\n fulfilledStepIcon={fulfilledStepIcon}\n fulfilledStepIconType={fulfilledStepIconType}\n isFulfilledStepDisplayNumber={isFulfilledStepDisplayNumber}\n stepNumber={stepNumber}\n status={status}\n />\n </span>\n </CSSTransition>\n </SwitchTransition>\n </div>\n {isFollowedByDivider && isVertical && <Divider className={cx(styles.divider, stepDividerClassName)} />}\n </div>\n <div className={cx(...getClassNamesWithSuffix(\"__text-container\"))}>\n <div className={cx(...getClassNamesWithSuffix(\"__text-container__title\"))}>\n <HiddenText text={status} /> {/* for accessibility */}\n <span className={cx(...getClassNamesWithSuffix(\"__text-container__title__text\"))}>{titleText}</span>\n </div>\n {size !== \"compact\" ? (\n <span className={cx(...getClassNamesWithSuffix(\"__text-container__subtitle__text\"))}>{subtitleText}</span>\n ) : null}\n </div>\n </Clickable>\n );\n};\n\nexport default StepIndicator;\n"],"names":["KEYS","keyCodes","ENTER","SPACE","StepCircleDisplay","_ref","fulfilledStepIcon","fulfilledStepIconType","status","isFulfilledStepDisplayNumber","React","createElement","Fragment","stepNumber","Icon","icon","className","classNames","styles","numberContainerTextCheckIcon","iconType","ignoreFocusStyle","ariaHidden","StepIndicator","_ref2","stepComponentClassName","_ref2$stepNumber","_ref2$status","_ref2$titleText","titleText","_ref2$subtitleText","subtitleText","_ref2$type","type","_ref2$fulfilledStepIc","Check","_ref2$fulfilledStepIc2","_ref2$isFulfilledStep","_ref2$onClick","onClick","NOOP","_ref2$isFollowedByDiv","isFollowedByDivider","stepDividerClassName","_ref2$isVertical","isVertical","id","_ref2$size","size","dataTestId","_useState","useState","_useState2","_slicedToArray","statusChangeAnimationState","setStatusChangeAnimationState","componentRef","useRef","prevStatusRef","enableStatusChangeAnimation","useCallback","disableStatusChangeAnimation","isStatusTransition","current","handleClick","useEventListener","eventName","callback","ref","useKeyEvent","keys","useEffect","ariaLabel","useMemo","concat","getClassNamesWithSuffix","suffix","getStyle","camelCase","Clickable","tabIndex","elementType","cx","apply","_toConsumableArray","_defineProperty","withAnimation","clickable","textPlacementVertical","getTestId","ComponentDefaultTestId","STEP_INDICATOR","role","SwitchTransition","mode","CSSTransition","enter","swapEnter","enterActive","swapEnterActive","exit","swapExit","exitActive","swapExitActive","addEndListener","node","done","addEventListener","key","Divider","divider","HiddenText","text"],"mappings":"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"}

package/dist/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n={indicator:"indicator_aecf046b3f",textContainer:"textContainer_56461919e6",sizeCompactTextContainer:"sizeCompactTextContainer_bc45e91ac9",textContainerTitle:"textContainerTitle_addeef0dbc",visuallyHidden:"visuallyHidden_2537ed65e6",textContainerTitleText:"textContainerTitleText_b634398b97",textContainerSubtitleText:"textContainerSubtitleText_8c0590fbc3",sizeCompactTextContainerTitle:"sizeCompactTextContainerTitle_82718a10a3",textPlacementVertical:"textPlacementVertical_209eba2e8f",numberDividerContainer:"numberDividerContainer_415d316139",sizeCompactTextContainerTitleText:"sizeCompactTextContainerTitleText_1f39bff89e",divider:"divider_d7e00e9e63",sizeCompactNumberDividerContainer:"sizeCompactNumberDividerContainer_5dca52ad0a",statusActiveNumberDividerContainer:"statusActiveNumberDividerContainer_7797a951f9",clickable:"clickable_51ae9ba113",withAnimation:"withAnimation_8472458ecb",stepIndicatiorCirclePopElastic:"stepIndicatiorCirclePopElastic_d4cffbd709",swapEnter:"swapEnter_0833f6936e",swapEnterActive:"swapEnterActive_70c1d8e52d",swapExit:"swapExit_986571addf",swapExitActive:"swapExitActive_40817c6594",numberContainer:"numberContainer_1fb5bc4f83",numberContainerText:"numberContainerText_0936b88b48",numberContainerTextCheckIcon:"numberContainerTextCheckIcon_9e219fde5c",typePrimaryNumberContainer:"typePrimaryNumberContainer_53f6f62761",typeDangerNumberContainer:"typeDangerNumberContainer_4147f12566",typeSuccessNumberContainer:"typeSuccessNumberContainer_aa4202b90f",typeDarkNumberContainer:"typeDarkNumberContainer_58bab550e4",statusActiveNumberContainer:"statusActiveNumberContainer_fab8b60042",sizeCompactNumberContainer:"sizeCompactNumberContainer_f35ff9b094",statusPendingNumberContainer:"statusPendingNumberContainer_355a258933","step-indicatior-circle-pop-elastic":"step-indicatior-circle-pop-elastic_d6baab1085"};!function(n){if("undefined"==typeof document)return;const e=document.head||document.getElementsByTagName("head")[0],t="s_id-f9249b867669_3_0_0-alpha_3";if(e.querySelector("#"+t))return;const r=document.createElement("style");r.id=t,e.firstChild?e.insertBefore(r,e.firstChild):e.appendChild(r),r.appendChild(document.createTextNode(n))}(".indicator_aecf046b3f {\n  font: var(--font-text2-normal);\n  color: var(--text-color-on-primary);\n  display: flex;\n  margin: 0;\n  padding: 0;\n  text-indent: 0;\n  list-style-type: none;\n}\n\n.textContainer_56461919e6 {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-left: 16px;\n}\n\n.sizeCompactTextContainer_bc45e91ac9 {\n  margin-left: var(--spacing-small);\n  justify-content: center;\n  align-content: center;\n}\n\n.textContainerTitle_addeef0dbc {\n  width: 100%;\n  margin-bottom: var(--spacing-xs);\n}\n\n.textContainerTitle_addeef0dbc .visuallyHidden_2537ed65e6 {\n  display: none;\n}\n\n.textContainerTitleText_b634398b97 {\n  font: var(--font-text2-medium);\n  color: var(--primary-text-color);\n  margin-bottom: 2px;\n}\n\n.textContainerSubtitleText_8c0590fbc3 {\n  width: 100%;\n  font: var(--font-text2-normal);\n  color: var(--primary-text-color);\n}\n\n.sizeCompactTextContainerTitle_82718a10a3 {\n  margin-bottom: 0px;\n}\n\n.textPlacementVertical_209eba2e8f {\n  margin: 8px;\n  flex-direction: column;\n  flex: 1 1 0px;\n}\n\n.textPlacementVertical_209eba2e8f .textContainer_56461919e6 {\n  margin-left: 0;\n  margin-top: var(--spacing-medium);\n}\n\n.textPlacementVertical_209eba2e8f .numberDividerContainer_415d316139 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n}\n\n.sizeCompactTextContainerTitleText_1f39bff89e {\n  display: block;\n  font: var(--font-text2-normal);\n  max-width: 150px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  margin-bottom: 0;\n}\n\n.textPlacementVertical_209eba2e8f .numberDividerContainer_415d316139 .divider_d7e00e9e63 {\n  background-color: var(--ui-border-color);\n  margin: 16px 0 16px 16px;\n  height: 1px;\n  flex: 1 1 0;\n}\n\n.sizeCompactNumberDividerContainer_5dca52ad0a {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sizeCompactNumberDividerContainer_5dca52ad0a.statusActiveNumberDividerContainer_7797a951f9 {\n  width: 40px;\n}\n\n.indicator_aecf046b3f.clickable_51ae9ba113 {\n  cursor: pointer;\n}\n\n.withAnimation_8472458ecb {\n  animation: stepIndicatiorCirclePopElastic_d4cffbd709 var(--motion-expressive-short);\n}\n\n/* New state enters */\n\n.swapEnter_0833f6936e {\n  opacity: 0;\n  transform: translateY(15px);\n}\n\n.swapEnterActive_70c1d8e52d {\n  position: relative;\n  opacity: 1;\n  transition: transform var(--motion-productive-long) var(--motion-timing-enter), opacity var(--motion-productive-short);\n  transform: translateY(0);\n}\n\n/* Old state leaves */\n\n.swapExit_986571addf {\n  position: relative;\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.swapExitActive_40817c6594 {\n  position: relative;\n  opacity: 0;\n  transform: translateY(-15px);\n  transition: transform var(--motion-productive-long) var(--motion-timing-enter), opacity var(--motion-productive-short);\n}\n\n.numberContainer_1fb5bc4f83 {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  display: flex;\n}\n\n.numberContainerText_0936b88b48 {\n  margin: auto;\n  display: flex;\n  align-items: center;\n}\n\n.numberContainerTextCheckIcon_9e219fde5c {\n  width: 20px;\n  height: 20px;\n  margin-top: 2px;\n}\n\n.typePrimaryNumberContainer_53f6f62761 {\n  background-color: var(--primary-color);\n}\n\n.typePrimaryNumberContainer_53f6f62761:hover {\n  background-color: var(--primary-hover-color);\n}\n\n.typeDangerNumberContainer_4147f12566 {\n  background-color: var(--negative-color);\n}\n\n.typeDangerNumberContainer_4147f12566:hover {\n  background-color: var(--negative-color-hover);\n}\n\n.typeSuccessNumberContainer_aa4202b90f {\n  background-color: var(--positive-color);\n}\n\n.typeSuccessNumberContainer_aa4202b90f:hover {\n  background-color: var(--positive-color-hover);\n}\n\n.typeDarkNumberContainer_58bab550e4 {\n  background-color: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n\n.typeDarkNumberContainer_58bab550e4:hover {\n  background-color: var(--secondary-text-color);\n}\n\n.statusActiveNumberContainer_fab8b60042 {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--primary-color);\n}\n\n.statusActiveNumberContainer_fab8b60042.typeDangerNumberContainer_4147f12566 {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--negative-color);\n}\n\n.statusActiveNumberContainer_fab8b60042.typeSuccessNumberContainer_aa4202b90f {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--positive-color);\n}\n\n.statusActiveNumberContainer_fab8b60042.typeDarkNumberContainer_58bab550e4 {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--primary-text-color);\n}\n\n.sizeCompactNumberContainer_f35ff9b094 {\n  width: 28px;\n  height: 28px;\n}\n\n.statusPendingNumberContainer_355a258933 {\n  background-color: var(--primary-background-color);\n  color: var(--primary-text-color);\n  border-color: var(--ui-border-color) !important;\n  border: 1px solid;\n}\n\n.statusPendingNumberContainer_355a258933:hover {\n  background-color: var(--primary-color);\n  color: var(--text-color-on-primary);\n  border: none;\n}\n\n.statusPendingNumberContainer_355a258933.typeDangerNumberContainer_4147f12566:hover {\n  background-color: var(--negative-color);\n}\n\n.statusPendingNumberContainer_355a258933.typeSuccessNumberContainer_aa4202b90f:hover {\n  background-color: var(--positive-color);\n}\n\n.statusPendingNumberContainer_355a258933.typeDarkNumberContainer_58bab550e4:hover {\n  background-color: var(--text-color-on-inverted);\n}\n\n@keyframes step-indicatior-circle-pop-elastic_d6baab1085 {\n  0% {\n    transform: scale(1);\n  }\n  33% {\n    transform: scale(1.2);\n  }\n  66% {\n    transform: scale(0.9);\n  }\n  100% {\n    transform: scale(1);\n  }\n}");export{n as default};
+var n={indicator:"indicator_5ebb37ec01",textContainer:"textContainer_39d935d73e",sizeCompactTextContainer:"sizeCompactTextContainer_045b8d336a",textContainerTitle:"textContainerTitle_296a5eb04c",visuallyHidden:"visuallyHidden_c84a65289d",textContainerTitleText:"textContainerTitleText_3a8dd25557",textContainerSubtitleText:"textContainerSubtitleText_d8a139293a",sizeCompactTextContainerTitle:"sizeCompactTextContainerTitle_39bfe4f6cd",textPlacementVertical:"textPlacementVertical_ed7a3b4603",numberDividerContainer:"numberDividerContainer_e534832cd7",sizeCompactTextContainerTitleText:"sizeCompactTextContainerTitleText_dfb9a60a14",divider:"divider_c2ad0390a7",sizeCompactNumberDividerContainer:"sizeCompactNumberDividerContainer_d161bd1f27",statusActiveNumberDividerContainer:"statusActiveNumberDividerContainer_959ae604e8",clickable:"clickable_7dc88b9cc5",withAnimation:"withAnimation_44bb603493",stepIndicatiorCirclePopElastic:"stepIndicatiorCirclePopElastic_17976610a1",swapEnter:"swapEnter_8565f0241f",swapEnterActive:"swapEnterActive_855d578ad1",swapExit:"swapExit_5f1bb4f056",swapExitActive:"swapExitActive_0ba5ae87e8",numberContainer:"numberContainer_9f80a0e5b5",numberContainerText:"numberContainerText_5cf3ce2c88",numberContainerTextCheckIcon:"numberContainerTextCheckIcon_ba1194196b",typePrimaryNumberContainer:"typePrimaryNumberContainer_d493ebc6b3",typeDangerNumberContainer:"typeDangerNumberContainer_2daf4d27a7",typeSuccessNumberContainer:"typeSuccessNumberContainer_f8b7b2663b",typeDarkNumberContainer:"typeDarkNumberContainer_5e953ecbb4",statusActiveNumberContainer:"statusActiveNumberContainer_cab663849c",sizeCompactNumberContainer:"sizeCompactNumberContainer_e2c016b088",statusPendingNumberContainer:"statusPendingNumberContainer_4e5ae28952","step-indicatior-circle-pop-elastic":"step-indicatior-circle-pop-elastic_cc3f1c526e"};!function(n){if("undefined"==typeof document)return;const e=document.head||document.getElementsByTagName("head")[0],t="s_id-f9249b867669_3_0_0-alpha_5";if(e.querySelector("#"+t))return;const r=document.createElement("style");r.id=t,e.firstChild?e.insertBefore(r,e.firstChild):e.appendChild(r),r.appendChild(document.createTextNode(n))}(".indicator_5ebb37ec01 {\n  font: var(--font-text2-normal);\n  color: var(--text-color-on-primary);\n  display: flex;\n  margin: 0;\n  padding: 0;\n  text-indent: 0;\n  list-style-type: none;\n}\n\n.textContainer_39d935d73e {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-left: 16px;\n}\n\n.sizeCompactTextContainer_045b8d336a {\n  margin-left: var(--spacing-small);\n  justify-content: center;\n  align-content: center;\n}\n\n.textContainerTitle_296a5eb04c {\n  width: 100%;\n  margin-bottom: var(--spacing-xs);\n}\n\n.textContainerTitle_296a5eb04c .visuallyHidden_c84a65289d {\n  display: none;\n}\n\n.textContainerTitleText_3a8dd25557 {\n  font: var(--font-text2-medium);\n  color: var(--primary-text-color);\n  margin-bottom: 2px;\n}\n\n.textContainerSubtitleText_d8a139293a {\n  width: 100%;\n  font: var(--font-text2-normal);\n  color: var(--primary-text-color);\n}\n\n.sizeCompactTextContainerTitle_39bfe4f6cd {\n  margin-bottom: 0px;\n}\n\n.textPlacementVertical_ed7a3b4603 {\n  margin: 8px;\n  flex-direction: column;\n  flex: 1 1 0px;\n}\n\n.textPlacementVertical_ed7a3b4603 .textContainer_39d935d73e {\n  margin-left: 0;\n  margin-top: var(--spacing-medium);\n}\n\n.textPlacementVertical_ed7a3b4603 .numberDividerContainer_e534832cd7 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n}\n\n.sizeCompactTextContainerTitleText_dfb9a60a14 {\n  display: block;\n  font: var(--font-text2-normal);\n  max-width: 150px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  margin-bottom: 0;\n}\n\n.textPlacementVertical_ed7a3b4603 .numberDividerContainer_e534832cd7 .divider_c2ad0390a7 {\n  background-color: var(--ui-border-color);\n  margin: 16px 0 16px 16px;\n  height: 1px;\n  flex: 1 1 0;\n}\n\n.sizeCompactNumberDividerContainer_d161bd1f27 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sizeCompactNumberDividerContainer_d161bd1f27.statusActiveNumberDividerContainer_959ae604e8 {\n  width: 40px;\n}\n\n.indicator_5ebb37ec01.clickable_7dc88b9cc5 {\n  cursor: pointer;\n}\n\n.withAnimation_44bb603493 {\n  animation: stepIndicatiorCirclePopElastic_17976610a1 var(--motion-expressive-short);\n}\n\n/* New state enters */\n\n.swapEnter_8565f0241f {\n  opacity: 0;\n  transform: translateY(15px);\n}\n\n.swapEnterActive_855d578ad1 {\n  position: relative;\n  opacity: 1;\n  transition: transform var(--motion-productive-long) var(--motion-timing-enter), opacity var(--motion-productive-short);\n  transform: translateY(0);\n}\n\n/* Old state leaves */\n\n.swapExit_5f1bb4f056 {\n  position: relative;\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.swapExitActive_0ba5ae87e8 {\n  position: relative;\n  opacity: 0;\n  transform: translateY(-15px);\n  transition: transform var(--motion-productive-long) var(--motion-timing-enter), opacity var(--motion-productive-short);\n}\n\n.numberContainer_9f80a0e5b5 {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  display: flex;\n}\n\n.numberContainerText_5cf3ce2c88 {\n  margin: auto;\n  display: flex;\n  align-items: center;\n}\n\n.numberContainerTextCheckIcon_ba1194196b {\n  width: 20px;\n  height: 20px;\n  margin-top: 2px;\n}\n\n.typePrimaryNumberContainer_d493ebc6b3 {\n  background-color: var(--primary-color);\n}\n\n.typePrimaryNumberContainer_d493ebc6b3:hover {\n  background-color: var(--primary-hover-color);\n}\n\n.typeDangerNumberContainer_2daf4d27a7 {\n  background-color: var(--negative-color);\n}\n\n.typeDangerNumberContainer_2daf4d27a7:hover {\n  background-color: var(--negative-color-hover);\n}\n\n.typeSuccessNumberContainer_f8b7b2663b {\n  background-color: var(--positive-color);\n}\n\n.typeSuccessNumberContainer_f8b7b2663b:hover {\n  background-color: var(--positive-color-hover);\n}\n\n.typeDarkNumberContainer_5e953ecbb4 {\n  background-color: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n\n.typeDarkNumberContainer_5e953ecbb4:hover {\n  background-color: var(--secondary-text-color);\n}\n\n.statusActiveNumberContainer_cab663849c {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--primary-color);\n}\n\n.statusActiveNumberContainer_cab663849c.typeDangerNumberContainer_2daf4d27a7 {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--negative-color);\n}\n\n.statusActiveNumberContainer_cab663849c.typeSuccessNumberContainer_f8b7b2663b {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--positive-color);\n}\n\n.statusActiveNumberContainer_cab663849c.typeDarkNumberContainer_5e953ecbb4 {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--primary-text-color);\n}\n\n.sizeCompactNumberContainer_e2c016b088 {\n  width: 28px;\n  height: 28px;\n}\n\n.statusPendingNumberContainer_4e5ae28952 {\n  background-color: var(--primary-background-color);\n  color: var(--primary-text-color);\n  border-color: var(--ui-border-color) !important;\n  border: 1px solid;\n}\n\n.statusPendingNumberContainer_4e5ae28952:hover {\n  background-color: var(--primary-color);\n  color: var(--text-color-on-primary);\n  border: none;\n}\n\n.statusPendingNumberContainer_4e5ae28952.typeDangerNumberContainer_2daf4d27a7:hover {\n  background-color: var(--negative-color);\n}\n\n.statusPendingNumberContainer_4e5ae28952.typeSuccessNumberContainer_f8b7b2663b:hover {\n  background-color: var(--positive-color);\n}\n\n.statusPendingNumberContainer_4e5ae28952.typeDarkNumberContainer_5e953ecbb4:hover {\n  background-color: var(--text-color-on-inverted);\n}\n\n@keyframes step-indicatior-circle-pop-elastic_cc3f1c526e {\n  0% {\n    transform: scale(1);\n  }\n  33% {\n    transform: scale(1.2);\n  }\n  66% {\n    transform: scale(0.9);\n  }\n  100% {\n    transform: scale(1);\n  }\n}");export{n as default};
 //# sourceMappingURL=StepIndicator.module.scss.js.map

package/dist/src/components/ProgressBars/LinearProgressBar/Bar/Bar.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var r={bar:"bar_7e3ddf72ce",typePrimaryPrimary:"typePrimaryPrimary_53f6f62761",typePrimarySecondary:"typePrimarySecondary_1a90679107",typePrimaryPositive:"typePrimaryPositive_aa4202b90f",typePrimaryNegative:"typePrimaryNegative_4147f12566",typePrimaryWarning:"typePrimaryWarning_a004048fdb",typeSecondaryPrimary:"typeSecondaryPrimary_6b75a59a02",typeSecondarySecondary:"typeSecondarySecondary_aff247690a",typeSecondaryPositive:"typeSecondaryPositive_7f28bea4b2",typeSecondaryNegative:"typeSecondaryNegative_d54c003d51",typeSecondaryWarning:"typeSecondaryWarning_c2cb3df9ae",animate:"animate_1cf8e0a1c4"};!function(r){if("undefined"==typeof document)return;const e=document.head||document.getElementsByTagName("head")[0],a="s_id-4250992e3ce2_3_0_0-alpha_3";if(e.querySelector("#"+a))return;const n=document.createElement("style");n.id=a,e.firstChild?e.insertBefore(n,e.firstChild):e.appendChild(n),n.appendChild(document.createTextNode(r))}(".bar_7e3ddf72ce {\n  left: 0;\n  height: 100%;\n  position: absolute;\n  border-radius: var(--border-radius-small);\n}\n\n.typePrimaryPrimary_53f6f62761 {\n  background-color: var(--primary-color);\n}\n\n.typePrimarySecondary_1a90679107 {\n  background-color: var(--inverted-color-background);\n}\n\n.typePrimaryPositive_aa4202b90f {\n  background-color: var(--positive-color);\n}\n\n.typePrimaryNegative_4147f12566 {\n  background-color: var(--negative-color);\n}\n\n.typePrimaryWarning_a004048fdb {\n  background-color: var(--warning-color);\n}\n\n.typeSecondaryPrimary_6b75a59a02 {\n  background-color: var(--primary-selected-color);\n}\n\n.typeSecondarySecondary_aff247690a {\n  background-color: var(--ui-border-color);\n}\n\n.typeSecondaryPositive_7f28bea4b2 {\n  background-color: var(--positive-color-selected);\n}\n\n.typeSecondaryNegative_d54c003d51 {\n  background-color: var(--negative-color-selected);\n}\n\n.typeSecondaryWarning_c2cb3df9ae {\n  background-color: var(--warning-color-selected);\n}\n\n.animate_1cf8e0a1c4 {\n  transition: width var(--motion-productive-medium) var(--motion-timing-transition);\n}");export{r as default};
+var e={bar:"bar_8c7596eeb7",typePrimaryPrimary:"typePrimaryPrimary_d493ebc6b3",typePrimarySecondary:"typePrimarySecondary_744ced38fb",typePrimaryPositive:"typePrimaryPositive_f8b7b2663b",typePrimaryNegative:"typePrimaryNegative_2daf4d27a7",typePrimaryWarning:"typePrimaryWarning_ccd61fd9ad",typeSecondaryPrimary:"typeSecondaryPrimary_49934d4692",typeSecondarySecondary:"typeSecondarySecondary_d1e5a93fb5",typeSecondaryPositive:"typeSecondaryPositive_66f6f16f7f",typeSecondaryNegative:"typeSecondaryNegative_4510bb241e",typeSecondaryWarning:"typeSecondaryWarning_ab752ce89c",animate:"animate_6dd6b38b76"};!function(e){if("undefined"==typeof document)return;const r=document.head||document.getElementsByTagName("head")[0],n="s_id-4250992e3ce2_3_0_0-alpha_5";if(r.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.appendChild(document.createTextNode(e))}(".bar_8c7596eeb7 {\n  left: 0;\n  height: 100%;\n  position: absolute;\n  border-radius: var(--border-radius-small);\n}\n\n.typePrimaryPrimary_d493ebc6b3 {\n  background-color: var(--primary-color);\n}\n\n.typePrimarySecondary_744ced38fb {\n  background-color: var(--inverted-color-background);\n}\n\n.typePrimaryPositive_f8b7b2663b {\n  background-color: var(--positive-color);\n}\n\n.typePrimaryNegative_2daf4d27a7 {\n  background-color: var(--negative-color);\n}\n\n.typePrimaryWarning_ccd61fd9ad {\n  background-color: var(--warning-color);\n}\n\n.typeSecondaryPrimary_49934d4692 {\n  background-color: var(--primary-selected-color);\n}\n\n.typeSecondarySecondary_d1e5a93fb5 {\n  background-color: var(--ui-border-color);\n}\n\n.typeSecondaryPositive_66f6f16f7f {\n  background-color: var(--positive-color-selected);\n}\n\n.typeSecondaryNegative_4510bb241e {\n  background-color: var(--negative-color-selected);\n}\n\n.typeSecondaryWarning_ab752ce89c {\n  background-color: var(--warning-color-selected);\n}\n\n.animate_6dd6b38b76 {\n  transition: width var(--motion-productive-medium) var(--motion-timing-transition);\n}");export{e as default};
 //# sourceMappingURL=Bar.module.scss.js.map

package/dist/src/components/ProgressBars/LinearProgressBar/LinearProgressBar.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={wrapper:"wrapper_565b2216db",fullWidth:"fullWidth_edb1077374",container:"container_f9f9599fa0",progressBar:"progressBar_055d6cad43",completed:"completed_f9f9599fa0",label:"label_34c54adae7",large:"large_83f013277c",medium:"medium_3039d6f997",small:"small_85036afe46"};!function(e){if("undefined"==typeof document)return;const n=document.head||document.getElementsByTagName("head")[0],r="s_id-5855608df299_3_0_0-alpha_3";if(n.querySelector("#"+r))return;const a=document.createElement("style");a.id=r,n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.appendChild(document.createTextNode(e))}(".wrapper_565b2216db {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  width: 100%;\n  font: var(--font-text2-normal);\n  line-height: 8px !important;\n}\n.wrapper_565b2216db.fullWidth_edb1077374 {\n  width: 100%;\n}\n.wrapper_565b2216db.fullWidth_edb1077374 .container_f9f9599fa0 {\n  border-radius: 0;\n}\n.wrapper_565b2216db.fullWidth_edb1077374 .container_f9f9599fa0 .progressBar_055d6cad43 {\n  border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;\n}\n.wrapper_565b2216db.fullWidth_edb1077374 .container_f9f9599fa0 .progressBar_055d6cad43.completed_f9f9599fa0 {\n  border-radius: 0;\n}\n.label_34c54adae7 {\n  padding-left: var(--spacing-xs);\n}\n.large_83f013277c {\n  height: 8px;\n  line-height: 8px;\n}\n.medium_3039d6f997 {\n  height: 6px;\n  line-height: 6px;\n}\n.small_85036afe46 {\n  height: 4px;\n  line-height: 4px;\n}\n.container_f9f9599fa0 {\n  position: relative;\n  width: 100%;\n  background-color: var(--ui-background-color);\n  border-radius: var(--border-radius-small);\n}");export{e as default};
+var e={wrapper:"wrapper_60d4fb0d84",fullWidth:"fullWidth_c450989100",container:"container_8d1febb233",progressBar:"progressBar_eab21ff909",completed:"completed_8d1febb233",label:"label_ecbf33694c",large:"large_073c1fbdb1",medium:"medium_28e58450cb",small:"small_365b3f379a"};!function(e){if("undefined"==typeof document)return;const n=document.head||document.getElementsByTagName("head")[0],r="s_id-5855608df299_3_0_0-alpha_5";if(n.querySelector("#"+r))return;const d=document.createElement("style");d.id=r,n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.appendChild(document.createTextNode(e))}(".wrapper_60d4fb0d84 {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  width: 100%;\n  font: var(--font-text2-normal);\n  line-height: 8px !important;\n}\n.wrapper_60d4fb0d84.fullWidth_c450989100 {\n  width: 100%;\n}\n.wrapper_60d4fb0d84.fullWidth_c450989100 .container_8d1febb233 {\n  border-radius: 0;\n}\n.wrapper_60d4fb0d84.fullWidth_c450989100 .container_8d1febb233 .progressBar_eab21ff909 {\n  border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;\n}\n.wrapper_60d4fb0d84.fullWidth_c450989100 .container_8d1febb233 .progressBar_eab21ff909.completed_8d1febb233 {\n  border-radius: 0;\n}\n.label_ecbf33694c {\n  padding-left: var(--spacing-xs);\n}\n.large_073c1fbdb1 {\n  height: 8px;\n  line-height: 8px;\n}\n.medium_28e58450cb {\n  height: 6px;\n  line-height: 6px;\n}\n.small_365b3f379a {\n  height: 4px;\n  line-height: 4px;\n}\n.container_8d1febb233 {\n  position: relative;\n  width: 100%;\n  background-color: var(--ui-background-color);\n  border-radius: var(--border-radius-small);\n}");export{e as default};
 //# sourceMappingURL=LinearProgressBar.module.scss.js.map

package/dist/src/components/ProgressBars/PercentageLabel/PercentageLabel.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={label:"label_34c54adae7"};!function(e){if("undefined"==typeof document)return;const d=document.head||document.getElementsByTagName("head")[0],t="s_id-de8a28d20526_3_0_0-alpha_3";if(d.querySelector("#"+t))return;const a=document.createElement("style");a.id=t,d.firstChild?d.insertBefore(a,d.firstChild):d.appendChild(a),a.appendChild(document.createTextNode(e))}(".label_34c54adae7 {\n  padding-left: var(--spacing-xs);\n}");export{e as default};
+var e={label:"label_ecbf33694c"};!function(e){if("undefined"==typeof document)return;const t=document.head||document.getElementsByTagName("head")[0],d="s_id-de8a28d20526_3_0_0-alpha_5";if(t.querySelector("#"+d))return;const n=document.createElement("style");n.id=d,t.firstChild?t.insertBefore(n,t.firstChild):t.appendChild(n),n.appendChild(document.createTextNode(e))}(".label_ecbf33694c {\n  padding-left: var(--spacing-xs);\n}");export{e as default};
 //# sourceMappingURL=PercentageLabel.module.scss.js.map