@vibe/core 3.77.0-alpha-1b943.0 → 3.77.1-alpha-eb809.0

package/dist/mocked_classnames/src/components/Modal/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../../../../src/components/Modal/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport FocusLock from \"react-focus-lock\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../../tests/constants\";\nimport styles from \"./Modal.module.scss\";\nimport { type ModalProps } from \"./Modal.types\";\nimport ModalTopActions from \"../ModalTopActions/ModalTopActions\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"es-toolkit\";\nimport { ModalProvider } from \"../context/ModalContext\";\nimport { type ModalProviderValue } from \"../context/ModalContext.types\";\nimport { keyCodes } from \"../../../constants\";\nimport {\n  modalAnimationAnchorPopVariants,\n  modalAnimationCenterPopVariants,\n  modalAnimationFullViewVariants,\n  modalAnimationOverlayVariants\n} from \"../utils/animationVariants\";\nimport { createPortal } from \"react-dom\";\nimport usePortalTarget from \"../hooks/usePortalTarget/usePortalTarget\";\nimport useFocusEscapeTargets from \"../hooks/useFocusEscapeTargets/useFocusEscapeTargets\";\nimport { LayerProvider } from \"../../LayerProvider\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\n\n// @ts-expect-error This is a precaution to support all possible module systems (ESM/CJS)\nconst FocusLockComponent = (FocusLock.default || FocusLock) as typeof FocusLock;\n\nconst Modal = forwardRef(\n  (\n    {\n      id,\n      show,\n      size = \"medium\",\n      renderHeaderAction,\n      closeButtonTheme,\n      closeButtonAriaLabel,\n      onClose = () => {},\n      autoFocus = true,\n      allowFocusEscapeTo,\n      onFocusAttempt,\n      anchorElementRef,\n      alertModal,\n      container = document.body,\n      children,\n      style,\n      zIndex,\n      className,\n      \"data-testid\": dataTestId,\n      \"aria-labelledby\": ariaLabelledby,\n      \"aria-describedby\": ariaDescribedby\n    }: ModalProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const portalTargetElement = usePortalTarget(container);\n\n    const modalRef = useRef<HTMLDivElement>(null);\n    const modalMergedRef = useMergeRef<HTMLDivElement>(ref, modalRef);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const [titleId, setTitleId] = useState<string>();\n    const [descriptionId, setDescriptionId] = useState<string>();\n\n    const setTitleIdCallback = useCallback(\n      (newId: string) => {\n        if (ariaLabelledby) return;\n        setTitleId(newId);\n      },\n      [ariaLabelledby]\n    );\n    const setDescriptionIdCallback = useCallback(\n      (newId: string) => {\n        if (ariaDescribedby) return;\n        setDescriptionId(newId);\n      },\n      [ariaDescribedby]\n    );\n\n    const contextValue = useMemo<ModalProviderValue>(\n      () => ({\n        modalId: id,\n        setTitleId: setTitleIdCallback,\n        setDescriptionId: setDescriptionIdCallback,\n        autoFocus\n      }),\n      [id, setTitleIdCallback, setDescriptionIdCallback, autoFocus]\n    );\n\n    const onBackdropClick = useCallback<React.MouseEventHandler<HTMLDivElement>>(\n      e => {\n        if (!show || alertModal) return;\n        onClose(e);\n      },\n      [show, alertModal, onClose]\n    );\n\n    const onModalKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n      e => {\n        if (e.key !== keyCodes.ESCAPE || !show || alertModal) return;\n        onClose(e);\n      },\n      [alertModal, onClose, show]\n    );\n\n    const modalAnimationVariants =\n      size === \"full-view\"\n        ? modalAnimationFullViewVariants\n        : anchorElementRef?.current\n        ? modalAnimationAnchorPopVariants\n        : modalAnimationCenterPopVariants;\n\n    const zIndexStyle = zIndex ? ({ \"--monday-modal-z-index\": zIndex } as React.CSSProperties) : {};\n\n    const shouldAllowFocusEscape = useFocusEscapeTargets(allowFocusEscapeTo);\n\n    /**\n     * Returning true means that the focus-lock is allowed to manage the element.\n     * Returning false means that the focus-lock would surrender control to the element.\n     */\n    const handleFocusLockWhiteList = useCallback(\n      (nextFocusedElement?: HTMLElement) => {\n        if (onFocusAttempt) {\n          const outcome = onFocusAttempt(nextFocusedElement);\n\n          if (outcome === true) return true;\n\n          if (outcome instanceof HTMLElement) {\n            outcome.focus();\n            return false;\n          }\n\n          return false;\n        }\n\n        return !shouldAllowFocusEscape(nextFocusedElement);\n      },\n      [onFocusAttempt, shouldAllowFocusEscape]\n    );\n\n    return (\n      <AnimatePresence>\n        {show && (\n          <LayerProvider layerRef={containerRef}>\n            <ModalProvider value={contextValue}>\n              {createPortal(\n                <FocusLockComponent returnFocus autoFocus={autoFocus} whiteList={handleFocusLockWhiteList}>\n                  <div ref={containerRef} className={styles.container} style={zIndexStyle}>\n                    <motion.div\n                      variants={modalAnimationOverlayVariants}\n                      initial=\"initial\"\n                      animate=\"enter\"\n                      exit=\"exit\"\n                      data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}\n                      className={styles.overlay}\n                      onClick={onBackdropClick}\n                      aria-hidden\n                    />\n                    <RemoveScroll forwardProps ref={modalMergedRef}>\n                      <motion.div\n                        variants={modalAnimationVariants}\n                        initial=\"exit\"\n                        animate=\"enter\"\n                        exit=\"exit\"\n                        custom={anchorElementRef}\n                        className={cx(\n                          styles.modal,\n                          getStyle(styles, camelCase(\"size-\" + size)),\n                          { [styles.withHeaderAction]: !!renderHeaderAction },\n                          className\n                        )}\n                        id={id}\n                        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT, id)}\n                        data-vibe={ComponentVibeId.MODAL}\n                        role=\"dialog\"\n                        aria-modal\n                        aria-labelledby={ariaLabelledby || titleId}\n                        aria-describedby={ariaDescribedby || descriptionId}\n                        style={style}\n                        onKeyDown={onModalKeyDown}\n                        tabIndex={-1}\n                      >\n                        {children}\n                        <ModalTopActions\n                          renderAction={renderHeaderAction}\n                          theme={closeButtonTheme}\n                          closeButtonAriaLabel={closeButtonAriaLabel}\n                          onClose={onClose}\n                        />\n                      </motion.div>\n                    </RemoveScroll>\n                  </div>\n                </FocusLockComponent>,\n                portalTargetElement\n              )}\n            </ModalProvider>\n          </LayerProvider>\n        )}\n      </AnimatePresence>\n    );\n  }\n);\n\nexport default Modal;\n"],"names":["FocusLockComponent","FocusLock","default","Modal","forwardRef","_ref","ref","id","show","_ref$size","size","renderHeaderAction","closeButtonTheme","closeButtonAriaLabel","_ref$onClose","onClose","_ref$autoFocus","autoFocus","allowFocusEscapeTo","onFocusAttempt","anchorElementRef","alertModal","_ref$container","container","document","body","children","style","zIndex","className","dataTestId","ariaLabelledby","ariaDescribedby","portalTargetElement","usePortalTarget","modalRef","useRef","modalMergedRef","useMergeRef","containerRef","_useState","useState","_useState2","_slicedToArray","titleId","setTitleId","_useState3","_useState4","descriptionId","setDescriptionId","setTitleIdCallback","useCallback","newId","setDescriptionIdCallback","contextValue","useMemo","modalId","onBackdropClick","e","onModalKeyDown","key","keyCodes","ESCAPE","modalAnimationVariants","modalAnimationFullViewVariants","current","modalAnimationAnchorPopVariants","modalAnimationCenterPopVariants","zIndexStyle","shouldAllowFocusEscape","useFocusEscapeTargets","handleFocusLockWhiteList","nextFocusedElement","outcome","HTMLElement","focus","React","createElement","AnimatePresence","LayerProvider","layerRef","ModalProvider","value","createPortal","returnFocus","whiteList","styles","motion","div","variants","modalAnimationOverlayVariants","initial","animate","exit","getTestId","ComponentDefaultTestId","MODAL_NEXT_OVERLAY","overlay","onClick","RemoveScroll","forwardProps","custom","cx","modal","getStyle","camelCase","_defineProperty","withHeaderAction","MODAL_NEXT","ComponentVibeId","MODAL","role","onKeyDown","tabIndex","ModalTopActions","renderAction","theme"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../../../../../src/components/Modal/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport FocusLock from \"react-focus-lock\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../../tests/constants\";\nimport styles from \"./Modal.module.scss\";\nimport { type ModalProps } from \"./Modal.types\";\nimport ModalTopActions from \"../ModalTopActions/ModalTopActions\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"es-toolkit\";\nimport { ModalProvider } from \"../context/ModalContext\";\nimport { type ModalProviderValue } from \"../context/ModalContext.types\";\nimport { keyCodes } from \"../../../constants\";\nimport {\n  modalAnimationAnchorPopVariants,\n  modalAnimationCenterPopVariants,\n  modalAnimationFullViewVariants,\n  modalAnimationOverlayVariants\n} from \"../utils/animationVariants\";\nimport { createPortal } from \"react-dom\";\nimport usePortalTarget from \"../hooks/usePortalTarget/usePortalTarget\";\nimport useFocusEscapeTargets from \"../hooks/useFocusEscapeTargets/useFocusEscapeTargets\";\nimport { LayerProvider } from \"@vibe/layer\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\n\n// @ts-expect-error This is a precaution to support all possible module systems (ESM/CJS)\nconst FocusLockComponent = (FocusLock.default || FocusLock) as typeof FocusLock;\n\nconst Modal = forwardRef(\n  (\n    {\n      id,\n      show,\n      size = \"medium\",\n      renderHeaderAction,\n      closeButtonTheme,\n      closeButtonAriaLabel,\n      onClose = () => {},\n      autoFocus = true,\n      allowFocusEscapeTo,\n      onFocusAttempt,\n      anchorElementRef,\n      alertModal,\n      container = document.body,\n      children,\n      style,\n      zIndex,\n      className,\n      \"data-testid\": dataTestId,\n      \"aria-labelledby\": ariaLabelledby,\n      \"aria-describedby\": ariaDescribedby\n    }: ModalProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const portalTargetElement = usePortalTarget(container);\n\n    const modalRef = useRef<HTMLDivElement>(null);\n    const modalMergedRef = useMergeRef<HTMLDivElement>(ref, modalRef);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const [titleId, setTitleId] = useState<string>();\n    const [descriptionId, setDescriptionId] = useState<string>();\n\n    const setTitleIdCallback = useCallback(\n      (newId: string) => {\n        if (ariaLabelledby) return;\n        setTitleId(newId);\n      },\n      [ariaLabelledby]\n    );\n    const setDescriptionIdCallback = useCallback(\n      (newId: string) => {\n        if (ariaDescribedby) return;\n        setDescriptionId(newId);\n      },\n      [ariaDescribedby]\n    );\n\n    const contextValue = useMemo<ModalProviderValue>(\n      () => ({\n        modalId: id,\n        setTitleId: setTitleIdCallback,\n        setDescriptionId: setDescriptionIdCallback,\n        autoFocus\n      }),\n      [id, setTitleIdCallback, setDescriptionIdCallback, autoFocus]\n    );\n\n    const onBackdropClick = useCallback<React.MouseEventHandler<HTMLDivElement>>(\n      e => {\n        if (!show || alertModal) return;\n        onClose(e);\n      },\n      [show, alertModal, onClose]\n    );\n\n    const onModalKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n      e => {\n        if (e.key !== keyCodes.ESCAPE || !show || alertModal) return;\n        onClose(e);\n      },\n      [alertModal, onClose, show]\n    );\n\n    const modalAnimationVariants =\n      size === \"full-view\"\n        ? modalAnimationFullViewVariants\n        : anchorElementRef?.current\n        ? modalAnimationAnchorPopVariants\n        : modalAnimationCenterPopVariants;\n\n    const zIndexStyle = zIndex ? ({ \"--monday-modal-z-index\": zIndex } as React.CSSProperties) : {};\n\n    const shouldAllowFocusEscape = useFocusEscapeTargets(allowFocusEscapeTo);\n\n    /**\n     * Returning true means that the focus-lock is allowed to manage the element.\n     * Returning false means that the focus-lock would surrender control to the element.\n     */\n    const handleFocusLockWhiteList = useCallback(\n      (nextFocusedElement?: HTMLElement) => {\n        if (onFocusAttempt) {\n          const outcome = onFocusAttempt(nextFocusedElement);\n\n          if (outcome === true) return true;\n\n          if (outcome instanceof HTMLElement) {\n            outcome.focus();\n            return false;\n          }\n\n          return false;\n        }\n\n        return !shouldAllowFocusEscape(nextFocusedElement);\n      },\n      [onFocusAttempt, shouldAllowFocusEscape]\n    );\n\n    return (\n      <AnimatePresence>\n        {show && (\n          <LayerProvider layerRef={containerRef}>\n            <ModalProvider value={contextValue}>\n              {createPortal(\n                <FocusLockComponent returnFocus autoFocus={autoFocus} whiteList={handleFocusLockWhiteList}>\n                  <div ref={containerRef} className={styles.container} style={zIndexStyle}>\n                    <motion.div\n                      variants={modalAnimationOverlayVariants}\n                      initial=\"initial\"\n                      animate=\"enter\"\n                      exit=\"exit\"\n                      data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}\n                      className={styles.overlay}\n                      onClick={onBackdropClick}\n                      aria-hidden\n                    />\n                    <RemoveScroll forwardProps ref={modalMergedRef}>\n                      <motion.div\n                        variants={modalAnimationVariants}\n                        initial=\"exit\"\n                        animate=\"enter\"\n                        exit=\"exit\"\n                        custom={anchorElementRef}\n                        className={cx(\n                          styles.modal,\n                          getStyle(styles, camelCase(\"size-\" + size)),\n                          { [styles.withHeaderAction]: !!renderHeaderAction },\n                          className\n                        )}\n                        id={id}\n                        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT, id)}\n                        data-vibe={ComponentVibeId.MODAL}\n                        role=\"dialog\"\n                        aria-modal\n                        aria-labelledby={ariaLabelledby || titleId}\n                        aria-describedby={ariaDescribedby || descriptionId}\n                        style={style}\n                        onKeyDown={onModalKeyDown}\n                        tabIndex={-1}\n                      >\n                        {children}\n                        <ModalTopActions\n                          renderAction={renderHeaderAction}\n                          theme={closeButtonTheme}\n                          closeButtonAriaLabel={closeButtonAriaLabel}\n                          onClose={onClose}\n                        />\n                      </motion.div>\n                    </RemoveScroll>\n                  </div>\n                </FocusLockComponent>,\n                portalTargetElement\n              )}\n            </ModalProvider>\n          </LayerProvider>\n        )}\n      </AnimatePresence>\n    );\n  }\n);\n\nexport default Modal;\n"],"names":["FocusLockComponent","FocusLock","default","Modal","forwardRef","_ref","ref","id","show","_ref$size","size","renderHeaderAction","closeButtonTheme","closeButtonAriaLabel","_ref$onClose","onClose","_ref$autoFocus","autoFocus","allowFocusEscapeTo","onFocusAttempt","anchorElementRef","alertModal","_ref$container","container","document","body","children","style","zIndex","className","dataTestId","ariaLabelledby","ariaDescribedby","portalTargetElement","usePortalTarget","modalRef","useRef","modalMergedRef","useMergeRef","containerRef","_useState","useState","_useState2","_slicedToArray","titleId","setTitleId","_useState3","_useState4","descriptionId","setDescriptionId","setTitleIdCallback","useCallback","newId","setDescriptionIdCallback","contextValue","useMemo","modalId","onBackdropClick","e","onModalKeyDown","key","keyCodes","ESCAPE","modalAnimationVariants","modalAnimationFullViewVariants","current","modalAnimationAnchorPopVariants","modalAnimationCenterPopVariants","zIndexStyle","shouldAllowFocusEscape","useFocusEscapeTargets","handleFocusLockWhiteList","nextFocusedElement","outcome","HTMLElement","focus","React","createElement","AnimatePresence","LayerProvider","layerRef","ModalProvider","value","createPortal","returnFocus","whiteList","styles","motion","div","variants","modalAnimationOverlayVariants","initial","animate","exit","getTestId","ComponentDefaultTestId","MODAL_NEXT_OVERLAY","overlay","onClick","RemoveScroll","forwardProps","custom","cx","modal","getStyle","camelCase","_defineProperty","withHeaderAction","MODAL_NEXT","ComponentVibeId","MODAL","role","onKeyDown","tabIndex","ModalTopActions","renderAction","theme"],"mappings":"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"}

package/dist/mocked_classnames/src/components/Modal/Modal/Modal.module.scss.js

@@ -1,2 +1,2 @@
-var n={container:"container",overlay:"overlay",modal:"modal",withHeaderAction:"withHeaderAction",sizeSmall:"sizeSmall",sizeMedium:"sizeMedium",sizeLarge:"sizeLarge",sizeFullView:"sizeFullView"};!function(n){const i="s_id-8ca942cc3b46_3_76_0";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+i))return;const a=document.createElement("style");a.id=i,e.firstChild?e.insertBefore(a,e.firstChild):e.appendChild(a),a.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[i]=n)}(".container {\n  position: fixed;\n  inset: 0;\n  z-index: var(--monday-modal-z-index, 10000);\n}\n\n.overlay {\n  position: fixed;\n  inset: 0;\n  height: 100%;\n  background-color: var(--backdrop-color);\n}\n\n.modal {\n  --top-actions-margin-inline: var(--spacing-large);\n  --top-actions-margin-block: var(--spacing-large);\n  --top-actions-width: var(--spacing-xl);\n  --modal-inline-padding: var(--spacing-xl);\n  position: relative;\n  top: 50%;\n  left: 50%;\n  display: flex;\n  flex-direction: column;\n  width: var(--modal-width);\n  max-height: var(--modal-max-height);\n  background-color: var(--primary-background-color);\n  overflow: hidden;\n  border-radius: var(--border-radius-big);\n  box-shadow: var(--box-shadow-large);\n  outline: none;\n}\n\n.modal.withHeaderAction {\n  --top-actions-width: calc(var(--spacing-xl) * 2);\n}\n\n.modal.sizeSmall {\n  --modal-max-height: 50%;\n  --modal-width: 460px;\n}\n\n.modal.sizeMedium {\n  --modal-max-height: 80%;\n  --modal-width: 540px;\n}\n\n.modal.sizeLarge {\n  --modal-max-height: 80%;\n  --modal-width: 800px;\n}\n\n.modal.sizeFullView {\n  --top-actions-margin-inline: var(--spacing-xl);\n  --modal-max-height: 100%;\n  --modal-width: auto;\n  position: fixed;\n  inset: 0;\n  height: calc(100% - 40px);\n  margin-inline: var(--spacing-large);\n  margin-block-start: 40px;\n  border-end-start-radius: unset;\n  border-end-end-radius: unset;\n}\n\n@media (min-width: 1280px) {\n  .modal.sizeSmall {\n    --modal-width: 480px;\n  }\n  .modal.sizeMedium {\n    --modal-width: 580px;\n  }\n  .modal.sizeLarge {\n    --modal-width: 840px;\n  }\n}\n\n@media (min-width: 1440px) {\n  .modal.sizeSmall {\n    --modal-width: 520px;\n  }\n  .modal.sizeMedium {\n    --modal-width: 620px;\n  }\n  .modal.sizeLarge {\n    --modal-width: 900px;\n  }\n}\n\n@media (min-width: 1720px) {\n  .modal.sizeFullView {\n    margin-inline: 40px;\n  }\n}");export{n as default};
+var n={container:"container",overlay:"overlay",modal:"modal",withHeaderAction:"withHeaderAction",sizeSmall:"sizeSmall",sizeMedium:"sizeMedium",sizeLarge:"sizeLarge",sizeFullView:"sizeFullView"};!function(n){const i="s_id-8ca942cc3b46_3_77_0";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+i))return;const a=document.createElement("style");a.id=i,e.firstChild?e.insertBefore(a,e.firstChild):e.appendChild(a),a.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[i]=n)}(".container {\n  position: fixed;\n  inset: 0;\n  z-index: var(--monday-modal-z-index, 10000);\n}\n\n.overlay {\n  position: fixed;\n  inset: 0;\n  height: 100%;\n  background-color: var(--backdrop-color);\n}\n\n.modal {\n  --top-actions-margin-inline: var(--spacing-large);\n  --top-actions-margin-block: var(--spacing-large);\n  --top-actions-width: var(--spacing-xl);\n  --modal-inline-padding: var(--spacing-xl);\n  position: relative;\n  top: 50%;\n  left: 50%;\n  display: flex;\n  flex-direction: column;\n  width: var(--modal-width);\n  max-height: var(--modal-max-height);\n  background-color: var(--primary-background-color);\n  overflow: hidden;\n  border-radius: var(--border-radius-big);\n  box-shadow: var(--box-shadow-large);\n  outline: none;\n}\n\n.modal.withHeaderAction {\n  --top-actions-width: calc(var(--spacing-xl) * 2);\n}\n\n.modal.sizeSmall {\n  --modal-max-height: 50%;\n  --modal-width: 460px;\n}\n\n.modal.sizeMedium {\n  --modal-max-height: 80%;\n  --modal-width: 540px;\n}\n\n.modal.sizeLarge {\n  --modal-max-height: 80%;\n  --modal-width: 800px;\n}\n\n.modal.sizeFullView {\n  --top-actions-margin-inline: var(--spacing-xl);\n  --modal-max-height: 100%;\n  --modal-width: auto;\n  position: fixed;\n  inset: 0;\n  height: calc(100% - 40px);\n  margin-inline: var(--spacing-large);\n  margin-block-start: 40px;\n  border-end-start-radius: unset;\n  border-end-end-radius: unset;\n}\n\n@media (min-width: 1280px) {\n  .modal.sizeSmall {\n    --modal-width: 480px;\n  }\n  .modal.sizeMedium {\n    --modal-width: 580px;\n  }\n  .modal.sizeLarge {\n    --modal-width: 840px;\n  }\n}\n\n@media (min-width: 1440px) {\n  .modal.sizeSmall {\n    --modal-width: 520px;\n  }\n  .modal.sizeMedium {\n    --modal-width: 620px;\n  }\n  .modal.sizeLarge {\n    --modal-width: 900px;\n  }\n}\n\n@media (min-width: 1720px) {\n  .modal.sizeFullView {\n    margin-inline: 40px;\n  }\n}");export{n as default};
 //# sourceMappingURL=Modal.module.scss.js.map

package/dist/mocked_classnames/src/components/Modal/ModalHeader/ModalHeader.js

@@ -1,2 +1,2 @@
-import{typeof as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import e,{forwardRef as o,useEffect as s}from"react";import a from"classnames";import{getTestId as i}from"../../../tests/testIds.js";import{ComponentDefaultTestId as n}from"../../../tests/constants.js";import r from"./ModalHeader.module.scss.js";import c from"../../Flex/Flex.js";import m from"../../Heading/Heading.js";import l from"../../Text/Text.js";import{useModal as d}from"../context/ModalContext.js";import p from"../../../../components/icon/dist/Icon/Icon.js";var f=o((function(o,f){var j=o.title,g=o.description,u=o.descriptionIcon,x=o.className,_=o.id,E=o["data-testid"],I=d(),N=I.modalId,b=I.setDescriptionId,h=I.setTitleId,y=_?"".concat(N,"_").concat(_,"_label"):"".concat(N,"_label"),H=_?"".concat(N,"_").concat(_,"_desc"):"".concat(N,"_desc");return s((function(){N&&(h(y),g&&b(H))}),[N,h,y,g,b,H]),e.createElement(c,{gap:"xs",direction:"column",align:"start",ref:f,className:a(r.header,x),id:_,"data-testid":E||i(n.MODAL_NEXT_HEADER,_)},"string"==typeof j?e.createElement(m,{id:y,align:"inherit",type:"h2",weight:"medium",maxLines:2,className:r.title},j):j,g&&e.createElement(c,{id:H},u&&e.createElement(p,{icon:"object"===t(u)?u.name:u,className:a(r.descriptionIcon,"object"===t(u)&&u.className)}),"string"==typeof g?e.createElement(l,{element:"span",align:"inherit",type:"text1"},g):g))}));export{f as default};
+import{typeof as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as a,useEffect as o}from"react";import s from"classnames";import{getTestId as i}from"../../../tests/testIds.js";import{ComponentDefaultTestId as r}from"../../../tests/constants.js";import n from"./ModalHeader.module.scss.js";import c from"../../Flex/Flex.js";import m from"../../Heading/Heading.js";import l from"../../Text/Text.js";import{Icon as d}from"@vibe/icon/mockedClassNames";import{useModal as p}from"../context/ModalContext.js";var f=a((function(a,f){var g=a.title,j=a.description,u=a.descriptionIcon,x=a.className,_=a.id,E=a["data-testid"],N=p(),b=N.modalId,I=N.setDescriptionId,h=N.setTitleId,y=_?"".concat(b,"_").concat(_,"_label"):"".concat(b,"_label"),H=_?"".concat(b,"_").concat(_,"_desc"):"".concat(b,"_desc");return o((function(){b&&(h(y),j&&I(H))}),[b,h,y,j,I,H]),t.createElement(c,{gap:"xs",direction:"column",align:"start",ref:f,className:s(n.header,x),id:_,"data-testid":E||i(r.MODAL_NEXT_HEADER,_)},"string"==typeof g?t.createElement(m,{id:y,align:"inherit",type:"h2",weight:"medium",maxLines:2,className:n.title},g):g,j&&t.createElement(c,{id:H},u&&t.createElement(d,{icon:"object"===e(u)?u.name:u,className:s(n.descriptionIcon,"object"===e(u)&&u.className)}),"string"==typeof j?t.createElement(l,{element:"span",align:"inherit",type:"text1"},j):j))}));export{f as default};
 //# sourceMappingURL=ModalHeader.js.map

package/dist/mocked_classnames/src/components/Modal/ModalHeader/ModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.js","sources":["../../../../../../src/components/Modal/ModalHeader/ModalHeader.tsx"],"sourcesContent":["import React, { forwardRef, useEffect } from \"react\";\nimport cx from \"classnames\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport styles from \"./ModalHeader.module.scss\";\nimport { type ModalHeaderProps } from \"./ModalHeader.types\";\nimport Flex from \"../../Flex/Flex\";\nimport Heading from \"../../Heading/Heading\";\nimport Text from \"../../Text/Text\";\nimport { Icon } from \"@vibe/icon\";\nimport { useModal } from \"../context/ModalContext\";\n\nconst ModalHeader = forwardRef(\n  (\n    { title, description, descriptionIcon, className, id, \"data-testid\": dataTestId }: ModalHeaderProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const { modalId, setDescriptionId, setTitleId } = useModal();\n    const titleId = id ? `${modalId}_${id}_label` : `${modalId}_label`;\n    const descriptionId = id ? `${modalId}_${id}_desc` : `${modalId}_desc`;\n\n    useEffect(() => {\n      if (!modalId) return;\n      setTitleId(titleId);\n      if (!description) return;\n      setDescriptionId(descriptionId);\n    }, [modalId, setTitleId, titleId, description, setDescriptionId, descriptionId]);\n\n    return (\n      <Flex\n        gap=\"xs\"\n        direction=\"column\"\n        align=\"start\"\n        ref={ref}\n        className={cx(styles.header, className)}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_HEADER, id)}\n      >\n        {typeof title === \"string\" ? (\n          <Heading id={titleId} align=\"inherit\" type=\"h2\" weight=\"medium\" maxLines={2} className={styles.title}>\n            {title}\n          </Heading>\n        ) : (\n          title\n        )}\n\n        {description && (\n          <Flex id={descriptionId}>\n            {descriptionIcon && (\n              <Icon\n                icon={typeof descriptionIcon === \"object\" ? descriptionIcon.name : descriptionIcon}\n                className={cx(styles.descriptionIcon, typeof descriptionIcon === \"object\" && descriptionIcon.className)}\n              />\n            )}\n            {typeof description === \"string\" ? (\n              <Text element=\"span\" align=\"inherit\" type=\"text1\">\n                {description}\n              </Text>\n            ) : (\n              description\n            )}\n          </Flex>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default ModalHeader;\n"],"names":["ModalHeader","forwardRef","_ref","ref","title","description","descriptionIcon","className","id","dataTestId","_useModal","useModal","modalId","setDescriptionId","setTitleId","titleId","concat","descriptionId","useEffect","React","Flex","gap","direction","align","cx","styles","header","getTestId","ComponentDefaultTestId","MODAL_NEXT_HEADER","Heading","type","weight","maxLines","createElement","Icon","icon","_typeof","name","Text","element"],"mappings":"giBAYMA,IAAAA,EAAcC,GAClB,SAAAC,EAEEC,GACE,IAFAC,EAAKF,EAALE,MAAOC,EAAWH,EAAXG,YAAaC,EAAeJ,EAAfI,gBAAiBC,EAASL,EAATK,UAAWC,EAAEN,EAAFM,GAAmBC,EAAUP,EAAzB,eAGtDQ,EAAkDC,IAA1CC,EAAOF,EAAPE,QAASC,EAAgBH,EAAhBG,iBAAkBC,EAAUJ,EAAVI,WAC7BC,EAAUP,EAAE,GAAAQ,OAAMJ,EAAOI,KAAAA,OAAIR,EAAE,UAAA,GAAAQ,OAAcJ,EAAe,UAC5DK,EAAgBT,EAAE,GAAAQ,OAAMJ,EAAOI,KAAAA,OAAIR,EAAE,SAAA,GAAAQ,OAAaJ,EAAc,SAStE,OAPAM,GAAU,WACHN,IACLE,EAAWC,GACNV,GACLQ,EAAiBI,GACnB,GAAG,CAACL,EAASE,EAAYC,EAASV,EAAaQ,EAAkBI,IAG/DE,gBAACC,EAAI,CACHC,IAAI,KACJC,UAAU,SACVC,MAAM,QACNpB,IAAKA,EACLI,UAAWiB,EAAGC,EAAOC,OAAQnB,GAC7BC,GAAIA,gBACSC,GAAckB,EAAUC,EAAuBC,kBAAmBrB,IAE7D,iBAAVJ,EACNe,gBAACW,EAAO,CAACtB,GAAIO,EAASQ,MAAM,UAAUQ,KAAK,KAAKC,OAAO,SAASC,SAAU,EAAG1B,UAAWkB,EAAOrB,OAC5FA,GAGHA,EAGDC,GACCc,EAAAe,cAACd,EAAK,CAAAZ,GAAIS,GACPX,GACCa,EAAAe,cAACC,EACC,CAAAC,KAAiC,WAA3BC,EAAO/B,GAA+BA,EAAgBgC,KAAOhC,EACnEC,UAAWiB,EAAGC,EAAOnB,gBAA4C,WAA3B+B,EAAO/B,IAAgCA,EAAgBC,aAGzE,iBAAhBF,EACNc,EAACe,cAAAK,GAAKC,QAAQ,OAAOjB,MAAM,UAAUQ,KAAK,SACvC1B,GAGHA,GAMZ"}
+{"version":3,"file":"ModalHeader.js","sources":["../../../../../../src/components/Modal/ModalHeader/ModalHeader.tsx"],"sourcesContent":["import React, { forwardRef, useEffect } from \"react\";\nimport cx from \"classnames\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport styles from \"./ModalHeader.module.scss\";\nimport { type ModalHeaderProps } from \"./ModalHeader.types\";\nimport Flex from \"../../Flex/Flex\";\nimport Heading from \"../../Heading/Heading\";\nimport Text from \"../../Text/Text\";\nimport { Icon } from \"@vibe/icon\";\nimport { useModal } from \"../context/ModalContext\";\n\nconst ModalHeader = forwardRef(\n  (\n    { title, description, descriptionIcon, className, id, \"data-testid\": dataTestId }: ModalHeaderProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const { modalId, setDescriptionId, setTitleId } = useModal();\n    const titleId = id ? `${modalId}_${id}_label` : `${modalId}_label`;\n    const descriptionId = id ? `${modalId}_${id}_desc` : `${modalId}_desc`;\n\n    useEffect(() => {\n      if (!modalId) return;\n      setTitleId(titleId);\n      if (!description) return;\n      setDescriptionId(descriptionId);\n    }, [modalId, setTitleId, titleId, description, setDescriptionId, descriptionId]);\n\n    return (\n      <Flex\n        gap=\"xs\"\n        direction=\"column\"\n        align=\"start\"\n        ref={ref}\n        className={cx(styles.header, className)}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_HEADER, id)}\n      >\n        {typeof title === \"string\" ? (\n          <Heading id={titleId} align=\"inherit\" type=\"h2\" weight=\"medium\" maxLines={2} className={styles.title}>\n            {title}\n          </Heading>\n        ) : (\n          title\n        )}\n\n        {description && (\n          <Flex id={descriptionId}>\n            {descriptionIcon && (\n              <Icon\n                icon={typeof descriptionIcon === \"object\" ? descriptionIcon.name : descriptionIcon}\n                className={cx(styles.descriptionIcon, typeof descriptionIcon === \"object\" && descriptionIcon.className)}\n              />\n            )}\n            {typeof description === \"string\" ? (\n              <Text element=\"span\" align=\"inherit\" type=\"text1\">\n                {description}\n              </Text>\n            ) : (\n              description\n            )}\n          </Flex>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default ModalHeader;\n"],"names":["ModalHeader","forwardRef","_ref","ref","title","description","descriptionIcon","className","id","dataTestId","_useModal","useModal","modalId","setDescriptionId","setTitleId","titleId","concat","descriptionId","useEffect","React","Flex","gap","direction","align","cx","styles","header","getTestId","ComponentDefaultTestId","MODAL_NEXT_HEADER","Heading","type","weight","maxLines","createElement","Icon","icon","_typeof","name","Text","element"],"mappings":"shBAYMA,IAAAA,EAAcC,GAClB,SAAAC,EAEEC,GACE,IAFAC,EAAKF,EAALE,MAAOC,EAAWH,EAAXG,YAAaC,EAAeJ,EAAfI,gBAAiBC,EAASL,EAATK,UAAWC,EAAEN,EAAFM,GAAmBC,EAAUP,EAAzB,eAGtDQ,EAAkDC,IAA1CC,EAAOF,EAAPE,QAASC,EAAgBH,EAAhBG,iBAAkBC,EAAUJ,EAAVI,WAC7BC,EAAUP,EAAE,GAAAQ,OAAMJ,EAAOI,KAAAA,OAAIR,EAAE,UAAA,GAAAQ,OAAcJ,EAAe,UAC5DK,EAAgBT,EAAE,GAAAQ,OAAMJ,EAAOI,KAAAA,OAAIR,EAAE,SAAA,GAAAQ,OAAaJ,EAAc,SAStE,OAPAM,GAAU,WACHN,IACLE,EAAWC,GACNV,GACLQ,EAAiBI,GACnB,GAAG,CAACL,EAASE,EAAYC,EAASV,EAAaQ,EAAkBI,IAG/DE,gBAACC,EAAI,CACHC,IAAI,KACJC,UAAU,SACVC,MAAM,QACNpB,IAAKA,EACLI,UAAWiB,EAAGC,EAAOC,OAAQnB,GAC7BC,GAAIA,gBACSC,GAAckB,EAAUC,EAAuBC,kBAAmBrB,IAE7D,iBAAVJ,EACNe,gBAACW,EAAO,CAACtB,GAAIO,EAASQ,MAAM,UAAUQ,KAAK,KAAKC,OAAO,SAASC,SAAU,EAAG1B,UAAWkB,EAAOrB,OAC5FA,GAGHA,EAGDC,GACCc,EAAAe,cAACd,EAAK,CAAAZ,GAAIS,GACPX,GACCa,EAAAe,cAACC,EACC,CAAAC,KAAiC,WAA3BC,EAAO/B,GAA+BA,EAAgBgC,KAAOhC,EACnEC,UAAWiB,EAAGC,EAAOnB,gBAA4C,WAA3B+B,EAAO/B,IAAgCA,EAAgBC,aAGzE,iBAAhBF,EACNc,EAACe,cAAAK,GAAKC,QAAQ,OAAOjB,MAAM,UAAUQ,KAAK,SACvC1B,GAGHA,GAMZ"}

package/dist/mocked_classnames/src/components/Modal/ModalHeader/ModalHeader.module.scss.js

@@ -1,2 +1,2 @@
-var e={header:"header",title:"title",descriptionIcon:"descriptionIcon"};!function(e){const n="s_id-9882eed3e38d_3_76_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".header {\n  width: 100%;\n  align-self: flex-start;\n}\n.header .title {\n  width: 100%;\n}\n.header .descriptionIcon {\n  flex-shrink: 0;\n  margin-inline-end: var(--spacing-xs);\n  color: var(--icon-color);\n}");export{e as default};
+var e={header:"header",title:"title",descriptionIcon:"descriptionIcon"};!function(e){const n="s_id-9882eed3e38d_3_77_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".header {\n  width: 100%;\n  align-self: flex-start;\n}\n.header .title {\n  width: 100%;\n}\n.header .descriptionIcon {\n  flex-shrink: 0;\n  margin-inline-end: var(--spacing-xs);\n  color: var(--icon-color);\n}");export{e as default};
 //# sourceMappingURL=ModalHeader.module.scss.js.map

package/dist/mocked_classnames/src/components/Modal/ModalMedia/ModalMedia.module.scss.js

@@ -1,2 +1,2 @@
-var e={media:"media"};!function(e){const t="s_id-17d5de3a21d7_3_76_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const d=document.createElement("style");d.id=t,n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".media {\n  max-width: 100%;\n  max-height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex: 1 0;\n  overflow: hidden;\n  position: relative;\n}");export{e as default};
+var e={media:"media"};!function(e){const t="s_id-17d5de3a21d7_3_77_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const d=document.createElement("style");d.id=t,n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".media {\n  max-width: 100%;\n  max-height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex: 1 0;\n  overflow: hidden;\n  position: relative;\n}");export{e as default};
 //# sourceMappingURL=ModalMedia.module.scss.js.map

package/dist/mocked_classnames/src/components/Modal/ModalTopActions/ModalTopActions.js

@@ -1,2 +1,2 @@
-import t from"react";import o from"./ModalTopActions.module.scss.js";import e from"../../IconButton/IconButton.js";import{ComponentDefaultTestId as r}from"../../../tests/constants.js";import a from"../../../../icons/dist/react/CloseMedium.js";var i={dark:"fixed-dark",light:"fixed-light"},s=function(s){var n=s.renderAction,c=s.closeButtonAriaLabel,m=s.onClose,l=i[s.theme]||"primary";return t.createElement("div",{className:o.actions,"data-no-autofocus":!0},"function"==typeof n?n(l):n,t.createElement(e,{"data-testid":r.MODAL_NEXT_CLOSE_BUTTON,icon:a,onClick:m,size:"small",kind:"tertiary",color:l,ariaLabel:c}))};export{s as default};
+import t from"react";import o from"./ModalTopActions.module.scss.js";import e from"../../IconButton/IconButton.js";import{CloseMedium as a}from"@vibe/icons/mockedClassNames";import{ComponentDefaultTestId as r}from"../../../tests/constants.js";var i={dark:"fixed-dark",light:"fixed-light"},s=function(s){var n=s.renderAction,c=s.closeButtonAriaLabel,m=s.onClose,l=i[s.theme]||"primary";return t.createElement("div",{className:o.actions,"data-no-autofocus":!0},"function"==typeof n?n(l):n,t.createElement(e,{"data-testid":r.MODAL_NEXT_CLOSE_BUTTON,icon:a,onClick:m,size:"small",kind:"tertiary",color:l,ariaLabel:c}))};export{s as default};
 //# sourceMappingURL=ModalTopActions.js.map

package/dist/mocked_classnames/src/components/Modal/ModalTopActions/ModalTopActions.module.scss.js

@@ -1,2 +1,2 @@
-var e={actions:"actions"};!function(e){const t="s_id-86629ffbaf1c_3_76_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const i=document.createElement("style");i.id=t,n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".actions {\n  display: flex;\n  align-items: center;\n  position: absolute;\n  right: var(--top-actions-margin-inline);\n  top: var(--top-actions-margin-block);\n}");export{e as default};
+var e={actions:"actions"};!function(e){const t="s_id-86629ffbaf1c_3_77_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const i=document.createElement("style");i.id=t,n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".actions {\n  display: flex;\n  align-items: center;\n  position: absolute;\n  right: var(--top-actions-margin-inline);\n  top: var(--top-actions-margin-block);\n}");export{e as default};
 //# sourceMappingURL=ModalTopActions.module.scss.js.map

package/dist/mocked_classnames/src/components/Modal/footers/ModalFooter/ModalFooter.module.scss.js

@@ -1,2 +1,2 @@
-var e={primary:"primary",secondary:"secondary"};!function(e){const n="s_id-4cbf6fa94914_3_76_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".primary {\n  order: 2;\n}\n.primary:only-child {\n  margin-left: auto;\n}\n.secondary {\n  order: 1;\n  margin-left: auto;\n}");export{e as default};
+var e={primary:"primary",secondary:"secondary"};!function(e){const n="s_id-4cbf6fa94914_3_77_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".primary {\n  order: 2;\n}\n.primary:only-child {\n  margin-left: auto;\n}\n.secondary {\n  order: 1;\n  margin-left: auto;\n}");export{e as default};
 //# sourceMappingURL=ModalFooter.module.scss.js.map

package/dist/mocked_classnames/src/components/Modal/footers/ModalFooterBase/ModalFooterBase.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../../../../../_virtual/_tslib.js";import e,{forwardRef as o}from"react";import r from"./ModalFooterBase.module.scss.js";import s from"../../../Flex/Flex.js";import a from"classnames";import n from"../../../Tooltip/Tooltip.js";import i from"../../../../../components/button/dist/Button/Button.js";var m=o((function(o,m){var c=o.primaryButton,l=o.secondaryButton,p=o.renderAction,d=o.id,f=o.className,u=o["data-testid"],j=c.text,b=c.tooltipProps,x=void 0===b?{}:b,g=t(c,["text","tooltipProps"]),v=l||{},B=v.text,E=v.tooltipProps,y=void 0===E?{}:E,O=t(v,["text","tooltipProps"]);return e.createElement(s,{ref:m,id:d,justify:"space-between",gap:"small",className:a(r.footer,f),"data-testid":u},e.createElement(n,Object.assign({},x,{content:x.content}),e.createElement(i,Object.assign({},g),j)),l&&e.createElement(n,Object.assign({},y,{content:y.content}),e.createElement(i,Object.assign({},O,{kind:"tertiary"}),B)),p)}));export{m as default};
+import{__rest as t}from"../../../../../_virtual/_tslib.js";import e,{forwardRef as o}from"react";import r from"./ModalFooterBase.module.scss.js";import{Button as s}from"@vibe/button/mockedClassNames";import a from"../../../Flex/Flex.js";import i from"classnames";import n from"../../../Tooltip/Tooltip.js";var m=o((function(o,m){var l=o.primaryButton,c=o.secondaryButton,p=o.renderAction,d=o.id,f=o.className,j=o["data-testid"],u=l.text,b=l.tooltipProps,x=void 0===b?{}:b,v=t(l,["text","tooltipProps"]),g=c||{},E=g.text,y=g.tooltipProps,O=void 0===y?{}:y,P=t(g,["text","tooltipProps"]);return e.createElement(a,{ref:m,id:d,justify:"space-between",gap:"small",className:i(r.footer,f),"data-testid":j},e.createElement(n,Object.assign({},x,{content:x.content}),e.createElement(s,Object.assign({},v),u)),c&&e.createElement(n,Object.assign({},O,{content:O.content}),e.createElement(s,Object.assign({},P,{kind:"tertiary"}),E)),p)}));export{m as default};
 //# sourceMappingURL=ModalFooterBase.js.map

package/dist/mocked_classnames/src/components/Modal/footers/ModalFooterBase/ModalFooterBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalFooterBase.js","sources":["../../../../../../../src/components/Modal/footers/ModalFooterBase/ModalFooterBase.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport styles from \"./ModalFooterBase.module.scss\";\nimport { Button } from \"@vibe/button\";\nimport Flex from \"../../../Flex/Flex\";\nimport { type ModalFooterBaseProps } from \"./ModalFooterBase.types\";\nimport cx from \"classnames\";\nimport { Tooltip } from \"../../../Tooltip\";\n\nconst ModalFooterBase = forwardRef(\n  (\n    { primaryButton, secondaryButton, renderAction, id, className, \"data-testid\": dataTestId }: ModalFooterBaseProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const {\n      text: primaryButtonText,\n      tooltipProps: primaryButtonTooltipProps = {},\n      ...primaryButtonProps\n    } = primaryButton;\n    const {\n      text: secondaryButtonText,\n      tooltipProps: secondaryButtonTooltipProps = {},\n      ...secondaryButtonProps\n    } = secondaryButton || {};\n\n    return (\n      <Flex\n        ref={ref}\n        id={id}\n        justify=\"space-between\"\n        gap=\"small\"\n        className={cx(styles.footer, className)}\n        data-testid={dataTestId}\n      >\n        <Tooltip {...primaryButtonTooltipProps} content={primaryButtonTooltipProps.content}>\n          <Button {...primaryButtonProps}>{primaryButtonText}</Button>\n        </Tooltip>\n        {secondaryButton && (\n          <Tooltip {...secondaryButtonTooltipProps} content={secondaryButtonTooltipProps.content}>\n            <Button {...secondaryButtonProps} kind=\"tertiary\">\n              {secondaryButtonText}\n            </Button>\n          </Tooltip>\n        )}\n        {renderAction}\n      </Flex>\n    );\n  }\n);\n\nexport default ModalFooterBase;\n"],"names":["ModalFooterBase","forwardRef","_ref","ref","primaryButton","secondaryButton","renderAction","id","className","dataTestId","primaryButtonText","text","_primaryButton$toolti","tooltipProps","primaryButtonTooltipProps","primaryButtonProps","__rest","_a","secondaryButtonText","_a$tooltipProps","secondaryButtonTooltipProps","secondaryButtonProps","React","createElement","Flex","justify","gap","cx","styles","footer","Tooltip","content","Button","Object","assign","kind"],"mappings":"iUAQMA,IAAAA,EAAkBC,GACtB,SAAAC,EAEEC,GACE,IAFAC,EAAaF,EAAbE,cAAeC,EAAeH,EAAfG,gBAAiBC,EAAYJ,EAAZI,aAAcC,EAAEL,EAAFK,GAAIC,EAASN,EAATM,UAA0BC,EAAUP,EAAzB,eAIvDQ,EAGJN,EAHFO,KAAIC,EAGFR,EAFFS,aAAcC,OAAyB,IAAAF,EAAG,CAAE,EAAAA,EACzCG,EAAkBC,EACnBZ,EAJE,CAAA,OAAA,iBAKAa,EAIFZ,GAAmB,CAAE,EAHjBa,EACwCD,EAD9CN,KAAIQ,EAC0CF,EAA9CJ,aAAcO,OAA2B,IAAAD,EAAG,CAAE,EAAAA,EAC3CE,EAAoBL,EAAAC,EAHnB,CAIL,OAAA,iBAED,OACEK,EAAAC,cAACC,EAAI,CACHrB,IAAKA,EACLI,GAAIA,EACJkB,QAAQ,gBACRC,IAAI,QACJlB,UAAWmB,EAAGC,EAAOC,OAAQrB,iBAChBC,GAEba,EAACC,cAAAO,mBAAYhB,EAAyB,CAAEiB,QAASjB,EAA0BiB,UACzET,EAAAC,cAACS,EAAWC,OAAAC,OAAA,CAAA,EAAAnB,GAAqBL,IAElCL,GACCiB,EAAAC,cAACO,EAAOG,OAAAC,OAAA,CAAA,EAAKd,EAA2B,CAAEW,QAASX,EAA4BW,UAC7ET,EAACC,cAAAS,EAAWC,OAAAC,OAAA,CAAA,EAAAb,EAAsB,CAAAc,KAAK,aACpCjB,IAINZ,EAGP"}
+{"version":3,"file":"ModalFooterBase.js","sources":["../../../../../../../src/components/Modal/footers/ModalFooterBase/ModalFooterBase.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport styles from \"./ModalFooterBase.module.scss\";\nimport { Button } from \"@vibe/button\";\nimport Flex from \"../../../Flex/Flex\";\nimport { type ModalFooterBaseProps } from \"./ModalFooterBase.types\";\nimport cx from \"classnames\";\nimport { Tooltip } from \"../../../Tooltip\";\n\nconst ModalFooterBase = forwardRef(\n  (\n    { primaryButton, secondaryButton, renderAction, id, className, \"data-testid\": dataTestId }: ModalFooterBaseProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const {\n      text: primaryButtonText,\n      tooltipProps: primaryButtonTooltipProps = {},\n      ...primaryButtonProps\n    } = primaryButton;\n    const {\n      text: secondaryButtonText,\n      tooltipProps: secondaryButtonTooltipProps = {},\n      ...secondaryButtonProps\n    } = secondaryButton || {};\n\n    return (\n      <Flex\n        ref={ref}\n        id={id}\n        justify=\"space-between\"\n        gap=\"small\"\n        className={cx(styles.footer, className)}\n        data-testid={dataTestId}\n      >\n        <Tooltip {...primaryButtonTooltipProps} content={primaryButtonTooltipProps.content}>\n          <Button {...primaryButtonProps}>{primaryButtonText}</Button>\n        </Tooltip>\n        {secondaryButton && (\n          <Tooltip {...secondaryButtonTooltipProps} content={secondaryButtonTooltipProps.content}>\n            <Button {...secondaryButtonProps} kind=\"tertiary\">\n              {secondaryButtonText}\n            </Button>\n          </Tooltip>\n        )}\n        {renderAction}\n      </Flex>\n    );\n  }\n);\n\nexport default ModalFooterBase;\n"],"names":["ModalFooterBase","forwardRef","_ref","ref","primaryButton","secondaryButton","renderAction","id","className","dataTestId","primaryButtonText","text","_primaryButton$toolti","tooltipProps","primaryButtonTooltipProps","primaryButtonProps","__rest","_a","secondaryButtonText","_a$tooltipProps","secondaryButtonTooltipProps","secondaryButtonProps","React","createElement","Flex","justify","gap","cx","styles","footer","Tooltip","content","Button","Object","assign","kind"],"mappings":"kTAQMA,IAAAA,EAAkBC,GACtB,SAAAC,EAEEC,GACE,IAFAC,EAAaF,EAAbE,cAAeC,EAAeH,EAAfG,gBAAiBC,EAAYJ,EAAZI,aAAcC,EAAEL,EAAFK,GAAIC,EAASN,EAATM,UAA0BC,EAAUP,EAAzB,eAIvDQ,EAGJN,EAHFO,KAAIC,EAGFR,EAFFS,aAAcC,OAAyB,IAAAF,EAAG,CAAE,EAAAA,EACzCG,EAAkBC,EACnBZ,EAJE,CAAA,OAAA,iBAKAa,EAIFZ,GAAmB,CAAE,EAHjBa,EACwCD,EAD9CN,KAAIQ,EAC0CF,EAA9CJ,aAAcO,OAA2B,IAAAD,EAAG,CAAE,EAAAA,EAC3CE,EAAoBL,EAAAC,EAHnB,CAIL,OAAA,iBAED,OACEK,EAAAC,cAACC,EAAI,CACHrB,IAAKA,EACLI,GAAIA,EACJkB,QAAQ,gBACRC,IAAI,QACJlB,UAAWmB,EAAGC,EAAOC,OAAQrB,iBAChBC,GAEba,EAACC,cAAAO,mBAAYhB,EAAyB,CAAEiB,QAASjB,EAA0BiB,UACzET,EAAAC,cAACS,EAAWC,OAAAC,OAAA,CAAA,EAAAnB,GAAqBL,IAElCL,GACCiB,EAAAC,cAACO,EAAOG,OAAAC,OAAA,CAAA,EAAKd,EAA2B,CAAEW,QAASX,EAA4BW,UAC7ET,EAACC,cAAAS,EAAWC,OAAAC,OAAA,CAAA,EAAAb,EAAsB,CAAAc,KAAK,aACpCjB,IAINZ,EAGP"}

package/dist/mocked_classnames/src/components/Modal/footers/ModalFooterBase/ModalFooterBase.module.scss.js

@@ -1,2 +1,2 @@
-var e={footer:"footer"};!function(e){const t="s_id-23913bf713c7_3_76_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];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))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".footer {\n  position: relative;\n  width: 100%;\n  padding: 20px var(--spacing-large);\n  flex-shrink: 0;\n  background-color: var(--primary-background-color);\n}");export{e as default};
+var e={footer:"footer"};!function(e){const t="s_id-23913bf713c7_3_77_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];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))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".footer {\n  position: relative;\n  width: 100%;\n  padding: 20px var(--spacing-large);\n  flex-shrink: 0;\n  background-color: var(--primary-background-color);\n}");export{e as default};
 //# sourceMappingURL=ModalFooterBase.module.scss.js.map

package/dist/mocked_classnames/src/components/Modal/footers/ModalFooterWizard/ModalFooterWizard.module.scss.js

@@ -1,2 +1,2 @@
-var e={primary:"primary",secondary:"secondary",stepDots:"stepDots"};!function(e){const n="s_id-51737ad1ac1f_3_76_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".primary {\n  order: 2;\n}\n\n.secondary {\n  order: 1;\n}\n\n.stepDots {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  margin: 0;\n}");export{e as default};
+var e={primary:"primary",secondary:"secondary",stepDots:"stepDots"};!function(e){const n="s_id-51737ad1ac1f_3_77_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".primary {\n  order: 2;\n}\n\n.secondary {\n  order: 1;\n}\n\n.stepDots {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  margin: 0;\n}");export{e as default};
 //# sourceMappingURL=ModalFooterWizard.module.scss.js.map

package/dist/mocked_classnames/src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.module.scss.js

@@ -1,2 +1,2 @@
-var e={layout:"layout",header:"header",divider:"divider",showDivider:"showDivider",content:"content"};!function(e){const n="s_id-b8093a4a9ca9_3_76_0";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,i.firstChild?i.insertBefore(t,i.firstChild):i.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".layout {\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n.layout .header {\n  width: 100%;\n  margin-block: var(--spacing-xl) var(--spacing-large);\n  padding-inline-end: calc(var(--top-actions-margin-inline) + var(--top-actions-width) + var(--spacing-medium));\n  padding-inline-start: var(--modal-inline-padding);\n}\n.layout .divider {\n  flex-shrink: 0;\n  opacity: 0;\n  transition: opacity var(--motion-productive-medium) ease-out;\n}\n.layout .divider.showDivider {\n  opacity: 1;\n}\n.layout .content {\n  padding-block-end: var(--spacing-xl);\n}");export{e as default};
+var e={layout:"layout",header:"header",divider:"divider",showDivider:"showDivider",content:"content"};!function(e){const n="s_id-b8093a4a9ca9_3_77_0";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,i.firstChild?i.insertBefore(t,i.firstChild):i.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".layout {\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n.layout .header {\n  width: 100%;\n  margin-block: var(--spacing-xl) var(--spacing-large);\n  padding-inline-end: calc(var(--top-actions-margin-inline) + var(--top-actions-width) + var(--spacing-medium));\n  padding-inline-start: var(--modal-inline-padding);\n}\n.layout .divider {\n  flex-shrink: 0;\n  opacity: 0;\n  transition: opacity var(--motion-productive-medium) ease-out;\n}\n.layout .divider.showDivider {\n  opacity: 1;\n}\n.layout .content {\n  padding-block-end: var(--spacing-xl);\n}");export{e as default};
 //# sourceMappingURL=ModalBasicLayout.module.scss.js.map

package/dist/mocked_classnames/src/components/Modal/layouts/ModalFooterShadow.module.scss.js

@@ -1,2 +1,2 @@
-var e={shadowWrapper:"shadowWrapper",show:"show"};!function(e){const t="s_id-c76d397ed7f2_3_76_0";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+t))return;const n=document.createElement("style");n.id=t,o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}('.shadowWrapper::after {\n  content: "";\n  position: absolute;\n  opacity: 0;\n  transition: opacity var(--motion-productive-medium) ease-out;\n  width: 100%;\n  height: 10px;\n  box-shadow: var(--box-shadow-medium);\n}\n.shadowWrapper.show::after {\n  opacity: 1;\n}');export{e as default};
+var e={shadowWrapper:"shadowWrapper",show:"show"};!function(e){const t="s_id-c76d397ed7f2_3_77_0";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+t))return;const n=document.createElement("style");n.id=t,o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}('.shadowWrapper::after {\n  content: "";\n  position: absolute;\n  opacity: 0;\n  transition: opacity var(--motion-productive-medium) ease-out;\n  width: 100%;\n  height: 10px;\n  box-shadow: var(--box-shadow-medium);\n}\n.shadowWrapper.show::after {\n  opacity: 1;\n}');export{e as default};
 //# sourceMappingURL=ModalFooterShadow.module.scss.js.map

package/dist/mocked_classnames/src/components/Modal/layouts/ModalLayoutScrollableContent.module.scss.js

@@ -1,2 +1,2 @@
-var e={content:"content"};!function(e){const n="s_id-a5c90e45f208_3_76_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".content {\n  width: 100%;\n  height: 100%;\n  padding-inline: var(--modal-inline-padding);\n  overflow: auto;\n}\n.content::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.content::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}");export{e as default};
+var e={content:"content"};!function(e){const n="s_id-a5c90e45f208_3_77_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".content {\n  width: 100%;\n  height: 100%;\n  padding-inline: var(--modal-inline-padding);\n  overflow: auto;\n}\n.content::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.content::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}");export{e as default};
 //# sourceMappingURL=ModalLayoutScrollableContent.module.scss.js.map

package/dist/mocked_classnames/src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.module.scss.js

@@ -1,2 +1,2 @@
-var e={layout:"layout",media:"media",header:"header",content:"content"};!function(e){const n="s_id-0e68c3ff993d_3_76_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".layout {\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n.layout .media {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n  flex-shrink: 0;\n}\n.layout .header {\n  width: 100%;\n  text-align: center;\n  margin-block: var(--spacing-xl) var(--spacing-small);\n  padding-inline: var(--modal-inline-padding);\n}\n.layout .content {\n  width: 100%;\n  height: 100%;\n  flex: 1;\n  align-self: flex-start;\n  padding-inline: var(--modal-inline-padding);\n  padding-block-end: var(--spacing-large);\n  text-align: center;\n  overflow: hidden;\n}");export{e as default};
+var e={layout:"layout",media:"media",header:"header",content:"content"};!function(e){const n="s_id-0e68c3ff993d_3_77_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".layout {\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n.layout .media {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n  flex-shrink: 0;\n}\n.layout .header {\n  width: 100%;\n  text-align: center;\n  margin-block: var(--spacing-xl) var(--spacing-small);\n  padding-inline: var(--modal-inline-padding);\n}\n.layout .content {\n  width: 100%;\n  height: 100%;\n  flex: 1;\n  align-self: flex-start;\n  padding-inline: var(--modal-inline-padding);\n  padding-block-end: var(--spacing-large);\n  text-align: center;\n  overflow: hidden;\n}");export{e as default};
 //# sourceMappingURL=ModalMediaLayout.module.scss.js.map

package/dist/mocked_classnames/src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.module.scss.js

@@ -1,2 +1,2 @@
-var n={layout:"layout",header:"header",content:"content",media:"media"};!function(n){const e="s_id-5a065e57e1cb_3_76_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const i=document.createElement("style");i.id=e,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".layout {\n  width: 100%;\n  height: 100%;\n  display: grid;\n  grid-template-columns: 60% 40%;\n  grid-template-rows: auto 1fr;\n  min-height: 0;\n}\n.layout .header {\n  width: 100%;\n  margin-block: var(--spacing-xl) var(--spacing-large);\n  padding-inline: var(--modal-inline-padding);\n  grid-column: 1/2;\n  grid-row: 1;\n}\n.layout .content {\n  grid-column: 1/2;\n  grid-row: 2;\n  padding-block-end: var(--spacing-xl);\n}\n.layout .media {\n  grid-column: 2/3;\n  grid-row: 1/3;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n}");export{n as default};
+var n={layout:"layout",header:"header",content:"content",media:"media"};!function(n){const e="s_id-5a065e57e1cb_3_77_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const i=document.createElement("style");i.id=e,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".layout {\n  width: 100%;\n  height: 100%;\n  display: grid;\n  grid-template-columns: 60% 40%;\n  grid-template-rows: auto 1fr;\n  min-height: 0;\n}\n.layout .header {\n  width: 100%;\n  margin-block: var(--spacing-xl) var(--spacing-large);\n  padding-inline: var(--modal-inline-padding);\n  grid-column: 1/2;\n  grid-row: 1;\n}\n.layout .content {\n  grid-column: 1/2;\n  grid-row: 2;\n  padding-block-end: var(--spacing-xl);\n}\n.layout .media {\n  grid-column: 2/3;\n  grid-row: 1/3;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n}");export{n as default};
 //# sourceMappingURL=ModalSideBySideLayout.module.scss.js.map

package/dist/mocked_classnames/src/components/MultiStepIndicator/MultiStepIndicator.js

@@ -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 r}from"react";import l from"../Divider/Divider.js";import{NOOP as a}from"../../utils/function-utils.js";import n from"./components/StepIndicator/StepIndicator.js";import{MultiStepType as p,StepStatus as m,TextPlacement as c,Size as d}from"./MultiStepConstants.js";import{getTestId as f}from"../../tests/testIds.js";import{ComponentDefaultTestId as u}from"../../tests/constants.js";import{withStaticProps as v}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import y from"./MultiStepIndicator.module.scss.js";import S from"../../../icons/dist/react/Check.js";var C=v(s((function(s,p){var m=s.className,c=s.steps,d=void 0===c?[]:c,v=s.type,C=void 0===v?"primary":v,N=s.stepComponentClassName,j=s.dividerComponentClassName,I=s.fulfilledStepIcon,g=void 0===I?S:I,b=s.fulfilledStepIconType,D=void 0===b?"svg":b,T=s.isFulfilledStepDisplayNumber,h=void 0!==T&&T,k=s.onClick,E=void 0===k?a: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(n,Object.assign({},s,{stepNumber:o+1,type:C,stepComponentClassName:N,fulfilledStepIcon:g,fulfilledStepIconType:D,onClick:E,isFulfilledStepDisplayNumber:h,size:z})),o!==d.length-1&&i.createElement(l,{className:t(y.divider,j,e({},y.compact,"compact"===z))}))}),[E,h,C,N,g,D,j,d.length,z]),M=o((function(e,s){return i.createElement(n,Object.assign({},e,{key:"".concat(e.titleText,"_").concat(s),stepNumber:s+1,type:C,stepComponentClassName:N,fulfilledStepIcon:g,fulfilledStepIconType:D,onClick:E,isFollowedByDivider:s!==d.length-1,stepDividerClassName:t(y.divider,j),isVertical:!0,isFulfilledStepDisplayNumber:h}))}),[E,h,C,N,g,D,j,d.length]),O=r((function(){return"vertical"===_?M:w}),[_,M,w]);return i.createElement("ol",{ref:p,id:x,"data-testid":F||f(u.MULTI_STEP_INDICATOR,x),className:t(y.wrapper,m)},d.map(O))})),{types:p,stepStatuses:m,textPlacements:c,sizes:d});export{C as default};
+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{Check as r}from"@vibe/icons/mockedClassNames";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,N=s.stepComponentClassName,I=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:N,fulfilledStepIcon:g,fulfilledStepIconType:D,onClick:E,isFulfilledStepDisplayNumber:h,size:z})),o!==f.length-1&&i.createElement(a,{className:t(S.divider,I,e({},S.compact,"compact"===z))}))}),[E,h,C,N,g,D,I,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:N,fulfilledStepIcon:g,fulfilledStepIconType:D,onClick:E,isFollowedByDivider:s!==f.length-1,stepDividerClassName:t(S.divider,I),isVertical:!0,isFulfilledStepDisplayNumber:h}))}),[E,h,C,N,g,D,I,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};
 //# sourceMappingURL=MultiStepIndicator.js.map

package/dist/mocked_classnames/src/components/MultiStepIndicator/MultiStepIndicator.js.map

@@ -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 \"@vibe/icons\";\nimport { type SubIcon } from \"@vibe/icon\";\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 { type MultiStepType, type MultiStepSize, type TextPlacement, type Step } from \"./MultiStep.types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { type VibeComponentProps, withStaticProps } from \"../../types\";\nimport styles from \"./MultiStepIndicator.module.scss\";\n\nexport interface MultiStepIndicatorProps extends VibeComponentProps {\n  /**\n   * The list of steps in the multi-step indicator.\n   */\n  steps?: Step[];\n  /**\n   * The visual style of the multi-step indicator.\n   */\n  type?: MultiStepType;\n  /**\n   * Class name applied to each step component.\n   */\n  stepComponentClassName?: string;\n  /**\n   * Class name applied to the divider between steps.\n   */\n  dividerComponentClassName?: string;\n  /**\n   * The icon used for fulfilled steps.\n   */\n  fulfilledStepIcon?: SubIcon;\n  /**\n   * The type of the fulfilled step icon.\n   */\n  fulfilledStepIconType?: \"svg\" | \"font\";\n  /**\n   * If true, displays the step number instead of the fulfilled step icon.\n   */\n  isFulfilledStepDisplayNumber?: boolean;\n  /**\n   * Callback fired when a step is clicked.\n   */\n  onClick?: (stepNumber: number) => void;\n  /**\n   * The placement of the step text.\n   */\n  textPlacement?: TextPlacement;\n  /**\n   * The size of the multi-step indicator.\n   */\n  size?: MultiStepSize;\n}\n\nconst MultiStepIndicator = 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: React.ForwardedRef<HTMLOListElement>\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\ninterface MultiStepIndicatorStaticProps {\n  types: typeof MultiStepTypeEnum;\n  stepStatuses: typeof StepStatusEnum;\n  textPlacements: typeof TextPlacementEnum;\n  sizes: typeof SizeEnum;\n}\n\nexport default withStaticProps<MultiStepIndicatorProps, MultiStepIndicatorStaticProps>(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":"0uBA8DA,IAmHeA,EAAAA,EAnHYC,GACzB,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,IAUyG,CACzGO,MAAOC,EACPC,aAAcC,EACdC,eAAgBC,EAChBC,MAAOC"}
+{"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 { type SubIcon } from \"@vibe/icon\";\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 { type MultiStepType, type MultiStepSize, type TextPlacement, type Step } from \"./MultiStep.types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { type VibeComponentProps, withStaticProps } from \"../../types\";\nimport styles from \"./MultiStepIndicator.module.scss\";\n\nexport interface MultiStepIndicatorProps extends VibeComponentProps {\n  /**\n   * The list of steps in the multi-step indicator.\n   */\n  steps?: Step[];\n  /**\n   * The visual style of the multi-step indicator.\n   */\n  type?: MultiStepType;\n  /**\n   * Class name applied to each step component.\n   */\n  stepComponentClassName?: string;\n  /**\n   * Class name applied to the divider between steps.\n   */\n  dividerComponentClassName?: string;\n  /**\n   * The icon used for fulfilled steps.\n   */\n  fulfilledStepIcon?: SubIcon;\n  /**\n   * The type of the fulfilled step icon.\n   */\n  fulfilledStepIconType?: \"svg\" | \"font\";\n  /**\n   * If true, displays the step number instead of the fulfilled step icon.\n   */\n  isFulfilledStepDisplayNumber?: boolean;\n  /**\n   * Callback fired when a step is clicked.\n   */\n  onClick?: (stepNumber: number) => void;\n  /**\n   * The placement of the step text.\n   */\n  textPlacement?: TextPlacement;\n  /**\n   * The size of the multi-step indicator.\n   */\n  size?: MultiStepSize;\n}\n\nconst MultiStepIndicator = 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: React.ForwardedRef<HTMLOListElement>\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\ninterface MultiStepIndicatorStaticProps {\n  types: typeof MultiStepTypeEnum;\n  stepStatuses: typeof StepStatusEnum;\n  textPlacements: typeof TextPlacementEnum;\n  sizes: typeof SizeEnum;\n}\n\nexport default withStaticProps<MultiStepIndicatorProps, MultiStepIndicatorStaticProps>(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":"6uBA8DA,IAmHeA,EAAAA,EAnHYC,GACzB,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,IAUyG,CACzGO,MAAOC,EACPC,aAAcC,EACdC,eAAgBC,EAChBC,MAAOC"}

package/dist/mocked_classnames/src/components/MultiStepIndicator/MultiStepIndicator.module.scss.js

@@ -1,2 +1,2 @@
-var e={wrapper:"wrapper",divider:"divider",compact:"compact"};!function(e){const n="s_id-0040463364ed_3_76_0";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".wrapper {\n  display: flex;\n}\n.wrapper .divider {\n  background-color: var(--ui-border-color);\n  margin: 16px;\n  height: 1px;\n  width: 48px;\n}\n.wrapper .divider.compact {\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",divider:"divider",compact:"compact"};!function(e){const n="s_id-0040463364ed_3_77_0";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".wrapper {\n  display: flex;\n}\n.wrapper .divider {\n  background-color: var(--ui-border-color);\n  margin: 16px;\n  height: 1px;\n  width: 48px;\n}\n.wrapper .divider.compact {\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/mocked_classnames/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e,toConsumableArray as t,defineProperty as i}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as n}from"es-toolkit";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"../../../Divider/Divider.js";import{NOOP as b}from"../../../../utils/function-utils.js";import N from"../../../HiddenText/HiddenText.js";import k from"../../../Clickable/Clickable.js";import C from"./StepIndicator.module.scss.js";import I from"../../../../../components/icon/dist/Icon/Icon.js";import S from"../../../../../icons/dist/react/Check.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(I,{icon:t,className:l(C.numberContainerTextCheckIcon),iconType:i,ignoreFocusStyle:!0,ariaHidden:!0})},A=function(s){var I=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?S: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?b: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(C,n(e||"indicator")),a(C,n("type-".concat(z).concat(e))),a(C,n("status-".concat(h).concat(e))),a(C,n("size-".concat($).concat(e)))]};return c.createElement(k,{tabIndex:"-1",elementType:"li",className:l.apply(void 0,t(de("")).concat([I,i(i(i({},C.withAnimation,ne),C.clickable,G),C.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:C.swapEnter,enterActive:C.swapEnterActive,exit:C.swapExit,exitActive:C.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(x,{className:l(C.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(N,{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 n}from"es-toolkit";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 d,useCallback as p,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{Icon as b}from"@vibe/icon/mockedClassNames";import{Check as x}from"@vibe/icons/mockedClassNames";import N from"../../../Divider/Divider.js";import{NOOP as k}from"../../../../utils/function-utils.js";import C from"../../../HiddenText/HiddenText.js";import S from"../../../Clickable/Clickable.js";import T from"./StepIndicator.module.scss.js";var I=[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(b,{icon:t,className:l(T.numberContainerTextCheckIcon),iconType:i,ignoreFocusStyle:!0,ariaHidden:!0})},A=function(s){var b=s.stepComponentClassName,A=s.stepNumber,g=void 0===A?1:A,D=s.status,w=void 0===D?"pending":D,F=s.titleText,H=void 0===F?"Heading text":F,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?x: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?k: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=d(null),re=d(w),le=p((function(){ae(!0)}),[ae]),se=p((function(){ae(!1)}),[ae]),ce=p((function(){return re.current!==w}),[re,w]),me=p((function(){G&&G(g)}),[G,g]);_({eventName:"animationend",callback:se,ref:oe}),E({keys:I,callback:me,ref:oe}),u((function(){ce()&&le()}),[w,ce,le]),u((function(){re.current=w}),[w]);var de=f((function(){return"Step ".concat(g,": ").concat(H," - ").concat(P,", status: ").concat(w)}),[w,H,g,P]),pe=function(e){return[a(T,n(e||"indicator")),a(T,n("type-".concat(z).concat(e))),a(T,n("status-".concat(w).concat(e))),a(T,n("size-".concat($).concat(e)))]};return c.createElement(S,{tabIndex:"-1",elementType:"li",className:l.apply(void 0,t(pe("")).concat([b,i(i(i({},T.withAnimation,ne),T.clickable,G),T.textPlacementVertical,X)])),"aria-label":de,onClick:me,"data-testid":ee||o(r.STEP_INDICATOR,Y)},c.createElement("div",{className:l.apply(void 0,t(pe("__number-divider-container")))},c.createElement("div",{className:l.apply(void 0,t(pe("__number-container"))),ref:oe,tabIndex:0,role:"button"},c.createElement(v,{mode:"out-in"},c.createElement(y,{classNames:{enter:T.swapEnter,enterActive:T.swapEnterActive,exit:T.swapExit,exitActive:T.swapExitActive},addEndListener:function(e,t){e.addEventListener("transitionend",t,!1)},key:w},c.createElement("span",{className:l.apply(void 0,t(pe("__number-container__text")))},c.createElement(j,{fulfilledStepIcon:R,fulfilledStepIconType:K,isFulfilledStepDisplayNumber:O,stepNumber:g,status:w}))))),Q&&X&&c.createElement(N,{className:l(T.divider,U)})),c.createElement("div",{className:l.apply(void 0,t(pe("__text-container")))},c.createElement("div",{className:l.apply(void 0,t(pe("__text-container__title")))},c.createElement(C,{text:w})," ",c.createElement("span",{className:l.apply(void 0,t(pe("__text-container__title__text")))},H)),"compact"!==$?c.createElement("span",{className:l.apply(void 0,t(pe("__text-container__subtitle__text")))},P):null))};export{A as default};
 //# sourceMappingURL=StepIndicator.js.map

package/dist/mocked_classnames/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepIndicator.js","sources":["../../../../../../../src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\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 \"@vibe/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 { type MultiStepSize, type MultiStepType, type StepStatus } from \"../../MultiStep.types\";\nimport styles from \"./StepIndicator.module.scss\";\nimport classNames from \"classnames\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\n\nconst KEYS = [keyCodes.ENTER, keyCodes.SPACE];\n\nexport interface StepCircleDisplayProps {\n  /**\n   * The status of the step.\n   */\n  status: StepStatus;\n  /**\n   * If true, displays the step number instead of the fulfilled step icon.\n   */\n  isFulfilledStepDisplayNumber: boolean;\n  /**\n   * The icon displayed when the step is fulfilled.\n   */\n  fulfilledStepIcon: SubIcon;\n  /**\n   * The type of icon used.\n   */\n  fulfilledStepIconType: \"svg\" | \"font\";\n  /**\n   * The step number in the sequence.\n   */\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  /**\n   * The status of the step.\n   */\n  status: StepStatus;\n  /**\n   * The main title text for the step.\n   */\n  titleText: string;\n  /**\n   * The subtitle text for the step.\n   */\n  subtitleText?: string;\n  /**\n   * The number of the step in the sequence.\n   */\n  stepNumber?: number;\n  /**\n   * Class name applied to the step component.\n   */\n  stepComponentClassName?: string;\n  /**\n   * The visual style of the step indicator.\n   */\n  type?: MultiStepType;\n  /**\n   * The icon used for a fulfilled step.\n   */\n  fulfilledStepIcon?: SubIcon;\n  /**\n   * The type of icon used.\n   */\n  fulfilledStepIconType?: \"svg\" | \"font\";\n  /**\n   * If true, displays the step number instead of the fulfilled step icon.\n   */\n  isFulfilledStepDisplayNumber?: boolean;\n  /**\n   * Callback fired when the step is clicked.\n   */\n  onClick?: (stepNumber: number) => void;\n  /**\n   * If true, adds a divider after the step.\n   */\n  isFollowedByDivider?: boolean;\n  /**\n   * Class name applied to the step divider.\n   */\n  stepDividerClassName?: string;\n  /**\n   * If true, the step indicator is displayed vertically.\n   */\n  isVertical?: boolean;\n  /**\n   * The size of the step indicator.\n   */\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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"}
+{"version":3,"file":"StepIndicator.js","sources":["../../../../../../../src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\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 \"@vibe/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 { type MultiStepSize, type MultiStepType, type StepStatus } from \"../../MultiStep.types\";\nimport styles from \"./StepIndicator.module.scss\";\nimport classNames from \"classnames\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\n\nconst KEYS = [keyCodes.ENTER, keyCodes.SPACE];\n\nexport interface StepCircleDisplayProps {\n  /**\n   * The status of the step.\n   */\n  status: StepStatus;\n  /**\n   * If true, displays the step number instead of the fulfilled step icon.\n   */\n  isFulfilledStepDisplayNumber: boolean;\n  /**\n   * The icon displayed when the step is fulfilled.\n   */\n  fulfilledStepIcon: SubIcon;\n  /**\n   * The type of icon used.\n   */\n  fulfilledStepIconType: \"svg\" | \"font\";\n  /**\n   * The step number in the sequence.\n   */\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  /**\n   * The status of the step.\n   */\n  status: StepStatus;\n  /**\n   * The main title text for the step.\n   */\n  titleText: string;\n  /**\n   * The subtitle text for the step.\n   */\n  subtitleText?: string;\n  /**\n   * The number of the step in the sequence.\n   */\n  stepNumber?: number;\n  /**\n   * Class name applied to the step component.\n   */\n  stepComponentClassName?: string;\n  /**\n   * The visual style of the step indicator.\n   */\n  type?: MultiStepType;\n  /**\n   * The icon used for a fulfilled step.\n   */\n  fulfilledStepIcon?: SubIcon;\n  /**\n   * The type of icon used.\n   */\n  fulfilledStepIconType?: \"svg\" | \"font\";\n  /**\n   * If true, displays the step number instead of the fulfilled step icon.\n   */\n  isFulfilledStepDisplayNumber?: boolean;\n  /**\n   * Callback fired when the step is clicked.\n   */\n  onClick?: (stepNumber: number) => void;\n  /**\n   * If true, adds a divider after the step.\n   */\n  isFollowedByDivider?: boolean;\n  /**\n   * Class name applied to the step divider.\n   */\n  stepDividerClassName?: string;\n  /**\n   * If true, the step indicator is displayed vertically.\n   */\n  isVertical?: boolean;\n  /**\n   * The size of the step indicator.\n   */\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/mocked_classnames/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.module.scss.js

@@ -1,2 +1,2 @@
-var n={indicator:"indicator",textContainer:"textContainer",sizeCompactTextContainer:"sizeCompactTextContainer",textContainerTitle:"textContainerTitle",visuallyHidden:"visuallyHidden",textContainerTitleText:"textContainerTitleText",textContainerSubtitleText:"textContainerSubtitleText",sizeCompactTextContainerTitle:"sizeCompactTextContainerTitle",textPlacementVertical:"textPlacementVertical",numberDividerContainer:"numberDividerContainer",sizeCompactTextContainerTitleText:"sizeCompactTextContainerTitleText",divider:"divider",sizeCompactNumberDividerContainer:"sizeCompactNumberDividerContainer",statusActiveNumberDividerContainer:"statusActiveNumberDividerContainer",clickable:"clickable",withAnimation:"withAnimation",stepIndicatiorCirclePopElastic:"stepIndicatiorCirclePopElastic",swapEnter:"swapEnter",swapEnterActive:"swapEnterActive",swapExit:"swapExit",swapExitActive:"swapExitActive",numberContainer:"numberContainer",numberContainerText:"numberContainerText",numberContainerTextCheckIcon:"numberContainerTextCheckIcon",typePrimaryNumberContainer:"typePrimaryNumberContainer",typeDangerNumberContainer:"typeDangerNumberContainer",typeSuccessNumberContainer:"typeSuccessNumberContainer",typeDarkNumberContainer:"typeDarkNumberContainer",statusActiveNumberContainer:"statusActiveNumberContainer",sizeCompactNumberContainer:"sizeCompactNumberContainer",statusPendingNumberContainer:"statusPendingNumberContainer","step-indicatior-circle-pop-elastic":"step-indicatior-circle-pop-elastic"};!function(n){const e="s_id-f9249b867669_3_76_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const r=document.createElement("style");r.id=e,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".indicator {\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 {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-left: 16px;\n}\n\n.sizeCompactTextContainer {\n  margin-left: var(--spacing-small);\n  justify-content: center;\n  align-content: center;\n}\n\n.textContainerTitle {\n  width: 100%;\n  margin-bottom: var(--spacing-xs);\n}\n\n.textContainerTitle .visuallyHidden {\n  display: none;\n}\n\n.textContainerTitleText {\n  font: var(--font-text2-medium);\n  color: var(--primary-text-color);\n  margin-bottom: 2px;\n}\n\n.textContainerSubtitleText {\n  width: 100%;\n  font: var(--font-text2-normal);\n  color: var(--primary-text-color);\n}\n\n.sizeCompactTextContainerTitle {\n  margin-bottom: 0px;\n}\n\n.textPlacementVertical {\n  margin: 8px;\n  flex-direction: column;\n  flex: 1 1 0px;\n}\n\n.textPlacementVertical .textContainer {\n  margin-left: 0;\n  margin-top: var(--spacing-medium);\n}\n\n.textPlacementVertical .numberDividerContainer {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n}\n\n.sizeCompactTextContainerTitleText {\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 .numberDividerContainer .divider {\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 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sizeCompactNumberDividerContainer.statusActiveNumberDividerContainer {\n  width: 40px;\n}\n\n.indicator.clickable {\n  cursor: pointer;\n}\n\n.withAnimation {\n  animation: stepIndicatiorCirclePopElastic var(--motion-expressive-short);\n}\n\n/* New state enters */\n\n.swapEnter {\n  opacity: 0;\n  transform: translateY(15px);\n}\n\n.swapEnterActive {\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 {\n  position: relative;\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.swapExitActive {\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 {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  display: flex;\n}\n\n.numberContainerText {\n  margin: auto;\n  display: flex;\n  align-items: center;\n}\n\n.numberContainerTextCheckIcon {\n  width: 20px;\n  height: 20px;\n  margin-top: 2px;\n}\n\n.typePrimaryNumberContainer {\n  background-color: var(--primary-color);\n}\n\n.typePrimaryNumberContainer:hover {\n  background-color: var(--primary-hover-color);\n}\n\n.typeDangerNumberContainer {\n  background-color: var(--negative-color);\n}\n\n.typeDangerNumberContainer:hover {\n  background-color: var(--negative-color-hover);\n}\n\n.typeSuccessNumberContainer {\n  background-color: var(--positive-color);\n}\n\n.typeSuccessNumberContainer:hover {\n  background-color: var(--positive-color-hover);\n}\n\n.typeDarkNumberContainer {\n  background-color: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n\n.typeDarkNumberContainer:hover {\n  background-color: var(--secondary-text-color);\n}\n\n.statusActiveNumberContainer {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--primary-color);\n}\n\n.statusActiveNumberContainer.typeDangerNumberContainer {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--negative-color);\n}\n\n.statusActiveNumberContainer.typeSuccessNumberContainer {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--positive-color);\n}\n\n.statusActiveNumberContainer.typeDarkNumberContainer {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--primary-text-color);\n}\n\n.sizeCompactNumberContainer {\n  width: 28px;\n  height: 28px;\n}\n\n.statusPendingNumberContainer {\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:hover {\n  background-color: var(--primary-color);\n  color: var(--text-color-on-primary);\n  border: none;\n}\n\n.statusPendingNumberContainer.typeDangerNumberContainer:hover {\n  background-color: var(--negative-color);\n}\n\n.statusPendingNumberContainer.typeSuccessNumberContainer:hover {\n  background-color: var(--positive-color);\n}\n\n.statusPendingNumberContainer.typeDarkNumberContainer:hover {\n  background-color: var(--text-color-on-inverted);\n}\n\n@keyframes step-indicatior-circle-pop-elastic {\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",textContainer:"textContainer",sizeCompactTextContainer:"sizeCompactTextContainer",textContainerTitle:"textContainerTitle",visuallyHidden:"visuallyHidden",textContainerTitleText:"textContainerTitleText",textContainerSubtitleText:"textContainerSubtitleText",sizeCompactTextContainerTitle:"sizeCompactTextContainerTitle",textPlacementVertical:"textPlacementVertical",numberDividerContainer:"numberDividerContainer",sizeCompactTextContainerTitleText:"sizeCompactTextContainerTitleText",divider:"divider",sizeCompactNumberDividerContainer:"sizeCompactNumberDividerContainer",statusActiveNumberDividerContainer:"statusActiveNumberDividerContainer",clickable:"clickable",withAnimation:"withAnimation",stepIndicatiorCirclePopElastic:"stepIndicatiorCirclePopElastic",swapEnter:"swapEnter",swapEnterActive:"swapEnterActive",swapExit:"swapExit",swapExitActive:"swapExitActive",numberContainer:"numberContainer",numberContainerText:"numberContainerText",numberContainerTextCheckIcon:"numberContainerTextCheckIcon",typePrimaryNumberContainer:"typePrimaryNumberContainer",typeDangerNumberContainer:"typeDangerNumberContainer",typeSuccessNumberContainer:"typeSuccessNumberContainer",typeDarkNumberContainer:"typeDarkNumberContainer",statusActiveNumberContainer:"statusActiveNumberContainer",sizeCompactNumberContainer:"sizeCompactNumberContainer",statusPendingNumberContainer:"statusPendingNumberContainer","step-indicatior-circle-pop-elastic":"step-indicatior-circle-pop-elastic"};!function(n){const e="s_id-f9249b867669_3_77_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const r=document.createElement("style");r.id=e,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".indicator {\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 {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-left: 16px;\n}\n\n.sizeCompactTextContainer {\n  margin-left: var(--spacing-small);\n  justify-content: center;\n  align-content: center;\n}\n\n.textContainerTitle {\n  width: 100%;\n  margin-bottom: var(--spacing-xs);\n}\n\n.textContainerTitle .visuallyHidden {\n  display: none;\n}\n\n.textContainerTitleText {\n  font: var(--font-text2-medium);\n  color: var(--primary-text-color);\n  margin-bottom: 2px;\n}\n\n.textContainerSubtitleText {\n  width: 100%;\n  font: var(--font-text2-normal);\n  color: var(--primary-text-color);\n}\n\n.sizeCompactTextContainerTitle {\n  margin-bottom: 0px;\n}\n\n.textPlacementVertical {\n  margin: 8px;\n  flex-direction: column;\n  flex: 1 1 0px;\n}\n\n.textPlacementVertical .textContainer {\n  margin-left: 0;\n  margin-top: var(--spacing-medium);\n}\n\n.textPlacementVertical .numberDividerContainer {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n}\n\n.sizeCompactTextContainerTitleText {\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 .numberDividerContainer .divider {\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 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sizeCompactNumberDividerContainer.statusActiveNumberDividerContainer {\n  width: 40px;\n}\n\n.indicator.clickable {\n  cursor: pointer;\n}\n\n.withAnimation {\n  animation: stepIndicatiorCirclePopElastic var(--motion-expressive-short);\n}\n\n/* New state enters */\n\n.swapEnter {\n  opacity: 0;\n  transform: translateY(15px);\n}\n\n.swapEnterActive {\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 {\n  position: relative;\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.swapExitActive {\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 {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  display: flex;\n}\n\n.numberContainerText {\n  margin: auto;\n  display: flex;\n  align-items: center;\n}\n\n.numberContainerTextCheckIcon {\n  width: 20px;\n  height: 20px;\n  margin-top: 2px;\n}\n\n.typePrimaryNumberContainer {\n  background-color: var(--primary-color);\n}\n\n.typePrimaryNumberContainer:hover {\n  background-color: var(--primary-hover-color);\n}\n\n.typeDangerNumberContainer {\n  background-color: var(--negative-color);\n}\n\n.typeDangerNumberContainer:hover {\n  background-color: var(--negative-color-hover);\n}\n\n.typeSuccessNumberContainer {\n  background-color: var(--positive-color);\n}\n\n.typeSuccessNumberContainer:hover {\n  background-color: var(--positive-color-hover);\n}\n\n.typeDarkNumberContainer {\n  background-color: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n\n.typeDarkNumberContainer:hover {\n  background-color: var(--secondary-text-color);\n}\n\n.statusActiveNumberContainer {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--primary-color);\n}\n\n.statusActiveNumberContainer.typeDangerNumberContainer {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--negative-color);\n}\n\n.statusActiveNumberContainer.typeSuccessNumberContainer {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--positive-color);\n}\n\n.statusActiveNumberContainer.typeDarkNumberContainer {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--primary-text-color);\n}\n\n.sizeCompactNumberContainer {\n  width: 28px;\n  height: 28px;\n}\n\n.statusPendingNumberContainer {\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:hover {\n  background-color: var(--primary-color);\n  color: var(--text-color-on-primary);\n  border: none;\n}\n\n.statusPendingNumberContainer.typeDangerNumberContainer:hover {\n  background-color: var(--negative-color);\n}\n\n.statusPendingNumberContainer.typeSuccessNumberContainer:hover {\n  background-color: var(--positive-color);\n}\n\n.statusPendingNumberContainer.typeDarkNumberContainer:hover {\n  background-color: var(--text-color-on-inverted);\n}\n\n@keyframes step-indicatior-circle-pop-elastic {\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/mocked_classnames/src/components/NumberField/NumberField.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../../_virtual/_tslib.js";import a,{forwardRef as n,useRef as t,useMemo as r}from"react";import i from"classnames";import o from"./hooks/useNumberFieldState.js";import l from"./hooks/useSpinButtonHandlers.js";import s from"../FieldLabel/FieldLabel.js";import d from"../InfoText/InfoText.js";import m from"./components/NumberFieldSpinButton/NumberFieldSpinButton.js";import u from"./NumberField.module.scss.js";import c from"../Flex/Flex.js";import p from"../../hooks/useMergeRef.js";import{ComponentVibeId as f}from"../../tests/constants.js";import b from"../../../components/icon/dist/Icon/Icon.js";import x from"../../../base/dist/BaseInput/BaseInput.js";var h=n((function(n,h){var v=n.className,O=n.value,g=n.onChange,y=n.label,j=n.required,I=n.placeholder,F=n.infoText,B=n.error,N=n.success,C=n.disabled,E=n.readOnly,w=n.min,M=n.max,D=n.step,R=void 0===D?1:D,T=n.size,V=void 0===T?"medium":T,q=n.leftIcon,z=n["aria-label"],A=n.id,L=n["data-testid"],S=n.allowOutOfBounds,k=n.onValidityChange,_=e(n,["className","value","onChange","label","required","placeholder","infoText","error","success","disabled","readOnly","min","max","step","size","leftIcon","aria-label","id","data-testid","allowOutOfBounds","onValidityChange"]),K=t(null),H=p(h,K),U=o({value:O,onChange:g,min:w,max:M,step:R,disabled:C,readOnly:E,allowOutOfBounds:S,onValidityChange:k}),G=U.inputValue,J=U.numericValue,P=U.onChange,Q=U.onKeyDown,W=U.isAtMin,X=U.isAtMax,Y=l({onChange:g,value:J,step:R,min:w,max:M,allowOutOfBounds:S,readOnly:E,inputRef:K}),Z=Y.onIncrement,$=Y.onDecrement,ee=r((function(){return q?a.createElement(b,{icon:q,className:u.leftIcon}):null}),[q]),ae=r((function(){return a.createElement(m,{inputId:A,onIncrement:Z,onDecrement:$,disabled:C||E,size:V,isAtMin:W,isAtMax:X})}),[A,Z,$,C,E,V,W,X]),ne=r((function(){return F&&A?"".concat(A,"-info-text"):void 0}),[F,A]),te=r((function(){return y&&A?"".concat(A,"-label"):void 0}),[y,A]);return a.createElement(c,{direction:"column",align:"stretch",gap:"xs",className:i(u.numberField,v),"data-vibe":f.NUMBER_FIELD},a.createElement(s,{id:te,className:u.label,labelText:y,required:j,labelFor:A}),a.createElement(x,Object.assign({},_,{"data-testid":L,ref:H,id:A,value:G,onChange:P,onKeyDown:Q,placeholder:I,type:"text",inputMode:"numeric",inputRole:"spinbutton","aria-valuenow":J,"aria-valuemin":w,"aria-valuemax":M,"aria-required":j,"aria-label":z||y,"aria-labelledby":te,"aria-describedby":ne,disabled:C,readOnly:E,size:V,error:B,success:N,renderLeft:ee,renderRight:ae})),a.createElement(d,{id:ne,text:F,error:B,success:N,disabled:C,readOnly:E}))}));export{h as default};
+import{__rest as e}from"../../../_virtual/_tslib.js";import a,{forwardRef as n,useRef as t,useMemo as r}from"react";import i from"classnames";import o from"./hooks/useNumberFieldState.js";import l from"./hooks/useSpinButtonHandlers.js";import{BaseInput as s}from"@vibe/base/mockedClassNames";import m from"../FieldLabel/FieldLabel.js";import d from"../InfoText/InfoText.js";import{Icon as u}from"@vibe/icon/mockedClassNames";import c from"./components/NumberFieldSpinButton/NumberFieldSpinButton.js";import f from"./NumberField.module.scss.js";import p from"../Flex/Flex.js";import b from"../../hooks/useMergeRef.js";import{ComponentVibeId as x}from"../../tests/constants.js";var v=n((function(n,v){var h=n.className,O=n.value,g=n.onChange,y=n.label,N=n.required,j=n.placeholder,C=n.infoText,F=n.error,I=n.success,B=n.disabled,E=n.readOnly,w=n.min,M=n.max,k=n.step,D=void 0===k?1:k,R=n.size,T=void 0===R?"medium":R,V=n.leftIcon,q=n["aria-label"],z=n.id,A=n["data-testid"],L=n.allowOutOfBounds,S=n.onValidityChange,_=e(n,["className","value","onChange","label","required","placeholder","infoText","error","success","disabled","readOnly","min","max","step","size","leftIcon","aria-label","id","data-testid","allowOutOfBounds","onValidityChange"]),K=t(null),H=b(v,K),U=o({value:O,onChange:g,min:w,max:M,step:D,disabled:B,readOnly:E,allowOutOfBounds:L,onValidityChange:S}),G=U.inputValue,J=U.numericValue,P=U.onChange,Q=U.onKeyDown,W=U.isAtMin,X=U.isAtMax,Y=l({onChange:g,value:J,step:D,min:w,max:M,allowOutOfBounds:L,readOnly:E,inputRef:K}),Z=Y.onIncrement,$=Y.onDecrement,ee=r((function(){return V?a.createElement(u,{icon:V,className:f.leftIcon}):null}),[V]),ae=r((function(){return a.createElement(c,{inputId:z,onIncrement:Z,onDecrement:$,disabled:B||E,size:T,isAtMin:W,isAtMax:X})}),[z,Z,$,B,E,T,W,X]),ne=r((function(){return C&&z?"".concat(z,"-info-text"):void 0}),[C,z]),te=r((function(){return y&&z?"".concat(z,"-label"):void 0}),[y,z]);return a.createElement(p,{direction:"column",align:"stretch",gap:"xs",className:i(f.numberField,h),"data-vibe":x.NUMBER_FIELD},a.createElement(m,{id:te,className:f.label,labelText:y,required:N,labelFor:z}),a.createElement(s,Object.assign({},_,{"data-testid":A,ref:H,id:z,value:G,onChange:P,onKeyDown:Q,placeholder:j,type:"text",inputMode:"numeric",inputRole:"spinbutton","aria-valuenow":J,"aria-valuemin":w,"aria-valuemax":M,"aria-required":N,"aria-label":q||y,"aria-labelledby":te,"aria-describedby":ne,disabled:B,readOnly:E,size:T,error:F,success:I,renderLeft:ee,renderRight:ae})),a.createElement(d,{id:ne,text:C,error:F,success:I,disabled:B,readOnly:E}))}));export{v as default};
 //# sourceMappingURL=NumberField.js.map

package/dist/mocked_classnames/src/components/NumberField/NumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.js","sources":["../../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { type NumberFieldProps } from \"./NumberField.types\";\nimport useNumberFieldState from \"./hooks/useNumberFieldState\";\nimport useSpinButtonHandlers from \"./hooks/useSpinButtonHandlers\";\nimport { BaseInput } from \"@vibe/base\";\nimport FieldLabel from \"../FieldLabel/FieldLabel\";\nimport InfoText from \"../InfoText/InfoText\";\nimport { Icon } from \"@vibe/icon\";\nimport NumberFieldSpinButton from \"./components/NumberFieldSpinButton/NumberFieldSpinButton\";\nimport styles from \"./NumberField.module.scss\";\nimport Flex from \"../Flex/Flex\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst NumberField = forwardRef(\n  (\n    {\n      className,\n      value,\n      onChange,\n      label,\n      required,\n      placeholder,\n      infoText,\n      error,\n      success,\n      disabled,\n      readOnly,\n      min,\n      max,\n      step = 1,\n      size = \"medium\",\n      leftIcon,\n      \"aria-label\": ariaLabel,\n      id,\n      \"data-testid\": dataTestId,\n      allowOutOfBounds,\n      onValidityChange,\n      ...inputProps\n    }: NumberFieldProps,\n    ref: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const mergedRef = useMergeRef<HTMLInputElement>(ref, inputRef);\n\n    const {\n      inputValue,\n      numericValue,\n      onChange: handleChange,\n      onKeyDown,\n      isAtMin,\n      isAtMax\n    } = useNumberFieldState({\n      value,\n      onChange,\n      min,\n      max,\n      step,\n      disabled,\n      readOnly,\n      allowOutOfBounds,\n      onValidityChange\n    });\n\n    const { onIncrement, onDecrement } = useSpinButtonHandlers({\n      onChange,\n      value: numericValue,\n      step,\n      min,\n      max,\n      allowOutOfBounds,\n      readOnly,\n      inputRef\n    });\n\n    const renderedLeftIcon = useMemo(() => {\n      if (!leftIcon) return null;\n      return <Icon icon={leftIcon} className={styles.leftIcon} />;\n    }, [leftIcon]);\n\n    const renderedRightIcon = useMemo(() => {\n      return (\n        <NumberFieldSpinButton\n          inputId={id}\n          onIncrement={onIncrement}\n          onDecrement={onDecrement}\n          disabled={disabled || readOnly}\n          size={size}\n          isAtMin={isAtMin}\n          isAtMax={isAtMax}\n        />\n      );\n    }, [id, onIncrement, onDecrement, disabled, readOnly, size, isAtMin, isAtMax]);\n\n    const infoTextId = useMemo(() => {\n      return infoText && id ? `${id}-info-text` : undefined;\n    }, [infoText, id]);\n\n    const labelId = useMemo(() => {\n      return label && id ? `${id}-label` : undefined;\n    }, [label, id]);\n\n    return (\n      <Flex\n        direction=\"column\"\n        align=\"stretch\"\n        gap=\"xs\"\n        className={cx(styles.numberField, className)}\n        data-vibe={ComponentVibeId.NUMBER_FIELD}\n      >\n        <FieldLabel id={labelId} className={styles.label} labelText={label} required={required} labelFor={id} />\n        <BaseInput\n          {...inputProps}\n          data-testid={dataTestId}\n          ref={mergedRef}\n          id={id}\n          value={inputValue}\n          onChange={handleChange}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          type=\"text\"\n          inputMode=\"numeric\"\n          inputRole=\"spinbutton\"\n          aria-valuenow={numericValue}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-required={required}\n          aria-label={ariaLabel || label}\n          aria-labelledby={labelId}\n          aria-describedby={infoTextId}\n          disabled={disabled}\n          readOnly={readOnly}\n          size={size}\n          error={error}\n          success={success}\n          renderLeft={renderedLeftIcon}\n          renderRight={renderedRightIcon}\n        />\n        <InfoText\n          id={infoTextId}\n          text={infoText}\n          error={error}\n          success={success}\n          disabled={disabled}\n          readOnly={readOnly}\n        />\n      </Flex>\n    );\n  }\n);\n\nexport default NumberField;\n"],"names":["NumberField","forwardRef","_a","ref","className","value","onChange","label","required","placeholder","infoText","error","success","disabled","readOnly","min","max","_a$step","step","_a$size","size","leftIcon","ariaLabel","id","dataTestId","allowOutOfBounds","onValidityChange","inputProps","__rest","inputRef","useRef","mergedRef","useMergeRef","_useNumberFieldState","useNumberFieldState","inputValue","numericValue","handleChange","onKeyDown","isAtMin","isAtMax","_useSpinButtonHandler","useSpinButtonHandlers","onIncrement","onDecrement","renderedLeftIcon","useMemo","React","createElement","Icon","icon","styles","renderedRightIcon","NumberFieldSpinButton","inputId","infoTextId","concat","undefined","labelId","Flex","direction","align","gap","cx","numberField","ComponentVibeId","NUMBER_FIELD","FieldLabel","labelText","labelFor","BaseInput","Object","assign","type","inputMode","inputRole","renderLeft","renderRight","InfoText","text"],"mappings":"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"}
+{"version":3,"file":"NumberField.js","sources":["../../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { type NumberFieldProps } from \"./NumberField.types\";\nimport useNumberFieldState from \"./hooks/useNumberFieldState\";\nimport useSpinButtonHandlers from \"./hooks/useSpinButtonHandlers\";\nimport { BaseInput } from \"@vibe/base\";\nimport FieldLabel from \"../FieldLabel/FieldLabel\";\nimport InfoText from \"../InfoText/InfoText\";\nimport { Icon } from \"@vibe/icon\";\nimport NumberFieldSpinButton from \"./components/NumberFieldSpinButton/NumberFieldSpinButton\";\nimport styles from \"./NumberField.module.scss\";\nimport Flex from \"../Flex/Flex\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst NumberField = forwardRef(\n  (\n    {\n      className,\n      value,\n      onChange,\n      label,\n      required,\n      placeholder,\n      infoText,\n      error,\n      success,\n      disabled,\n      readOnly,\n      min,\n      max,\n      step = 1,\n      size = \"medium\",\n      leftIcon,\n      \"aria-label\": ariaLabel,\n      id,\n      \"data-testid\": dataTestId,\n      allowOutOfBounds,\n      onValidityChange,\n      ...inputProps\n    }: NumberFieldProps,\n    ref: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const mergedRef = useMergeRef<HTMLInputElement>(ref, inputRef);\n\n    const {\n      inputValue,\n      numericValue,\n      onChange: handleChange,\n      onKeyDown,\n      isAtMin,\n      isAtMax\n    } = useNumberFieldState({\n      value,\n      onChange,\n      min,\n      max,\n      step,\n      disabled,\n      readOnly,\n      allowOutOfBounds,\n      onValidityChange\n    });\n\n    const { onIncrement, onDecrement } = useSpinButtonHandlers({\n      onChange,\n      value: numericValue,\n      step,\n      min,\n      max,\n      allowOutOfBounds,\n      readOnly,\n      inputRef\n    });\n\n    const renderedLeftIcon = useMemo(() => {\n      if (!leftIcon) return null;\n      return <Icon icon={leftIcon} className={styles.leftIcon} />;\n    }, [leftIcon]);\n\n    const renderedRightIcon = useMemo(() => {\n      return (\n        <NumberFieldSpinButton\n          inputId={id}\n          onIncrement={onIncrement}\n          onDecrement={onDecrement}\n          disabled={disabled || readOnly}\n          size={size}\n          isAtMin={isAtMin}\n          isAtMax={isAtMax}\n        />\n      );\n    }, [id, onIncrement, onDecrement, disabled, readOnly, size, isAtMin, isAtMax]);\n\n    const infoTextId = useMemo(() => {\n      return infoText && id ? `${id}-info-text` : undefined;\n    }, [infoText, id]);\n\n    const labelId = useMemo(() => {\n      return label && id ? `${id}-label` : undefined;\n    }, [label, id]);\n\n    return (\n      <Flex\n        direction=\"column\"\n        align=\"stretch\"\n        gap=\"xs\"\n        className={cx(styles.numberField, className)}\n        data-vibe={ComponentVibeId.NUMBER_FIELD}\n      >\n        <FieldLabel id={labelId} className={styles.label} labelText={label} required={required} labelFor={id} />\n        <BaseInput\n          {...inputProps}\n          data-testid={dataTestId}\n          ref={mergedRef}\n          id={id}\n          value={inputValue}\n          onChange={handleChange}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          type=\"text\"\n          inputMode=\"numeric\"\n          inputRole=\"spinbutton\"\n          aria-valuenow={numericValue}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-required={required}\n          aria-label={ariaLabel || label}\n          aria-labelledby={labelId}\n          aria-describedby={infoTextId}\n          disabled={disabled}\n          readOnly={readOnly}\n          size={size}\n          error={error}\n          success={success}\n          renderLeft={renderedLeftIcon}\n          renderRight={renderedRightIcon}\n        />\n        <InfoText\n          id={infoTextId}\n          text={infoText}\n          error={error}\n          success={success}\n          disabled={disabled}\n          readOnly={readOnly}\n        />\n      </Flex>\n    );\n  }\n);\n\nexport default NumberField;\n"],"names":["NumberField","forwardRef","_a","ref","className","value","onChange","label","required","placeholder","infoText","error","success","disabled","readOnly","min","max","_a$step","step","_a$size","size","leftIcon","ariaLabel","id","dataTestId","allowOutOfBounds","onValidityChange","inputProps","__rest","inputRef","useRef","mergedRef","useMergeRef","_useNumberFieldState","useNumberFieldState","inputValue","numericValue","handleChange","onKeyDown","isAtMin","isAtMax","_useSpinButtonHandler","useSpinButtonHandlers","onIncrement","onDecrement","renderedLeftIcon","useMemo","React","createElement","Icon","icon","styles","renderedRightIcon","NumberFieldSpinButton","inputId","infoTextId","concat","undefined","labelId","Flex","direction","align","gap","cx","numberField","ComponentVibeId","NUMBER_FIELD","FieldLabel","labelText","labelFor","BaseInput","Object","assign","type","inputMode","inputRole","renderLeft","renderRight","InfoText","text"],"mappings":"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"}

package/dist/mocked_classnames/src/components/NumberField/NumberField.module.scss.js

@@ -1,2 +1,2 @@
-var e={numberField:"numberField",label:"label",leftIcon:"leftIcon"};!function(e){const n="s_id-043e6276934a_3_76_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const l=document.createElement("style");l.id=n,t.firstChild?t.insertBefore(l,t.firstChild):t.appendChild(l),l.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".numberField {\n  width: 100%;\n}\n.numberField .label {\n  padding-bottom: 0;\n}\n.numberField .leftIcon {\n  color: var(--icon-color);\n}");export{e as default};
+var e={numberField:"numberField",label:"label",leftIcon:"leftIcon"};!function(e){const n="s_id-043e6276934a_3_77_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const l=document.createElement("style");l.id=n,t.firstChild?t.insertBefore(l,t.firstChild):t.appendChild(l),l.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".numberField {\n  width: 100%;\n}\n.numberField .label {\n  padding-bottom: 0;\n}\n.numberField .leftIcon {\n  color: var(--icon-color);\n}");export{e as default};
 //# sourceMappingURL=NumberField.module.scss.js.map

package/dist/mocked_classnames/src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.js

@@ -1,2 +1,2 @@
-import e from"react";import o from"classnames";import n from"../../../IconButton/IconButton.js";import t from"../../../Flex/Flex.js";import{getStyle as r}from"../../../../helpers/typesciptCssModulesHelper.js";import i from"./NumberFieldSpinButton.module.scss.js";import s from"../../../../../icons/dist/react/DropdownChevronUp.js";import a from"../../../../../icons/dist/react/DropdownChevronDown.js";var l=function(l){var c=l.inputId,m=l.onIncrement,p=l.onDecrement,d=l.disabled,u=l.isAtMin,f=l.isAtMax,C=o(i.spinButton,r(i,l.size)),b=i.icon;return e.createElement(t,{direction:"column",align:"stretch",justify:"center",onMouseDown:function(e){e.preventDefault()}},e.createElement(n,{ariaLabel:"Increase",hideTooltip:!0,ariaControls:c,tabIndex:-1,onClick:m,disabled:d||f,size:null,className:C,iconClassName:b,icon:s}),e.createElement(n,{ariaLabel:"Decrease",hideTooltip:!0,ariaControls:c,tabIndex:-1,onClick:p,disabled:d||u,size:null,className:C,iconClassName:b,icon:a}))};export{l as default};
+import e from"react";import o from"classnames";import t from"../../../IconButton/IconButton.js";import{DropdownChevronUp as n,DropdownChevronDown as i}from"@vibe/icons/mockedClassNames";import s from"../../../Flex/Flex.js";import{getStyle as a}from"../../../../helpers/typesciptCssModulesHelper.js";import r from"./NumberFieldSpinButton.module.scss.js";var l=function(l){var c=l.inputId,m=l.onIncrement,p=l.onDecrement,u=l.disabled,d=l.isAtMin,f=l.isAtMax,b=o(r.spinButton,a(r,l.size)),C=r.icon;return e.createElement(s,{direction:"column",align:"stretch",justify:"center",onMouseDown:function(e){e.preventDefault()}},e.createElement(t,{ariaLabel:"Increase",hideTooltip:!0,ariaControls:c,tabIndex:-1,onClick:m,disabled:u||f,size:null,className:b,iconClassName:C,icon:n}),e.createElement(t,{ariaLabel:"Decrease",hideTooltip:!0,ariaControls:c,tabIndex:-1,onClick:p,disabled:u||d,size:null,className:b,iconClassName:C,icon:i}))};export{l as default};
 //# sourceMappingURL=NumberFieldSpinButton.js.map