@vibe/core 3.13.0-alpha-b02ef.0 → 3.13.0-alpha-4ba3f.0

package/dist/components/Modal/Modal/Modal.types.d.ts

@@ -57,4 +57,12 @@ export interface ModalProps extends VibeComponentProps {
      * The z-index to be used for the modal and overlay.
      */
     zIndex?: number;
+    /**
+     * If provided, overrides the automatically generated aria-labelledby, that is assigned when used with ModalHeader.
+     */
+    "aria-labelledby"?: string;
+    /**
+     * If provided, overrides the automatically generated aria-describedby, that is assigned when used with ModalHeader.
+     */
+    "aria-describedby"?: string;
 }

package/dist/components/Modal/ModalHeader/ModalHeader.types.d.ts

@@ -7,7 +7,12 @@ interface WithoutDescription {
 interface WithDescription {
     /**
      * Descriptive text or content below the title.
-     * When supplied, would also add an aria-describedby attribute to the modal dialog element.
+     * - If you pass a **string**, this will automatically set an internally generated `aria-describedby` on the parent Modal.
+     * - If you pass a **ReactNode** (e.g., a complex component), we recommend assigning an **`id`** to that component (or a nested element),
+     *   and then pass that same ID in `aria-describedby` to the **Modal** (overriding the internal ID).
+     *
+     * This ensures that assistive technologies know which element is the modal's descriptive content.
+     * @see [WAI-ARIA Authoring Practices for Dialog (Modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/#wai-ariaroles,states,andproperties)
      */
     description: string | React.ReactNode;
     /**
@@ -21,8 +26,16 @@ interface WithDescription {
 export type ModalHeaderProps = {
     /**
      * Main heading text of the modal.
-     * When supplied, would also add an aria-labelledby attribute to the modal dialog element.
+     *
+     * - If you pass a **string**, `ModalHeader` will generate an internal ID and communicate it to the parent `Modal`
+     *   so that `aria-labelledby` is set automatically (unless `Modal` receives `aria-labelledby` prop).
+     * - If you pass a **ReactNode** (such as a custom component), **you must**:
+     *   1. Assign an **`id`** to that element (or a nested element), and
+     *   2. Pass that **same `id`** as the `aria-labelledby` prop to the `Modal`.
+     *
+     * This ensures that assistive technologies know which element is the modal's title.
+     * @see [WAI-ARIA Authoring Practices for Dialog (Modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/#wai-ariaroles,states,andproperties)
      */
-    title: string;
+    title: string | React.ReactNode;
 } & (WithDescription | WithoutDescription) & VibeComponentProps;
 export {};

package/dist/mocked_classnames/components/Modal/Modal/Modal.types.d.ts

@@ -57,4 +57,12 @@ export interface ModalProps extends VibeComponentProps {
      * The z-index to be used for the modal and overlay.
      */
     zIndex?: number;
+    /**
+     * If provided, overrides the automatically generated aria-labelledby, that is assigned when used with ModalHeader.
+     */
+    "aria-labelledby"?: string;
+    /**
+     * If provided, overrides the automatically generated aria-describedby, that is assigned when used with ModalHeader.
+     */
+    "aria-describedby"?: string;
 }

package/dist/mocked_classnames/components/Modal/ModalHeader/ModalHeader.types.d.ts

@@ -7,7 +7,12 @@ interface WithoutDescription {
 interface WithDescription {
     /**
      * Descriptive text or content below the title.
-     * When supplied, would also add an aria-describedby attribute to the modal dialog element.
+     * - If you pass a **string**, this will automatically set an internally generated `aria-describedby` on the parent Modal.
+     * - If you pass a **ReactNode** (e.g., a complex component), we recommend assigning an **`id`** to that component (or a nested element),
+     *   and then pass that same ID in `aria-describedby` to the **Modal** (overriding the internal ID).
+     *
+     * This ensures that assistive technologies know which element is the modal's descriptive content.
+     * @see [WAI-ARIA Authoring Practices for Dialog (Modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/#wai-ariaroles,states,andproperties)
      */
     description: string | React.ReactNode;
     /**
@@ -21,8 +26,16 @@ interface WithDescription {
 export type ModalHeaderProps = {
     /**
      * Main heading text of the modal.
-     * When supplied, would also add an aria-labelledby attribute to the modal dialog element.
+     *
+     * - If you pass a **string**, `ModalHeader` will generate an internal ID and communicate it to the parent `Modal`
+     *   so that `aria-labelledby` is set automatically (unless `Modal` receives `aria-labelledby` prop).
+     * - If you pass a **ReactNode** (such as a custom component), **you must**:
+     *   1. Assign an **`id`** to that element (or a nested element), and
+     *   2. Pass that **same `id`** as the `aria-labelledby` prop to the `Modal`.
+     *
+     * This ensures that assistive technologies know which element is the modal's title.
+     * @see [WAI-ARIA Authoring Practices for Dialog (Modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/#wai-ariaroles,states,andproperties)
      */
-    title: string;
+    title: string | React.ReactNode;
 } & (WithDescription | WithoutDescription) & VibeComponentProps;
 export {};

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

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import r,{forwardRef as n,useRef as o,useState as l,useEffect as a,useLayoutEffect as i}from"react";import u from"classnames";import s from"../../hooks/useMergeRef.js";import c from"./EditableTypography.module.scss.js";import{keyCodes as d}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import{useKeyboardButtonPressedFunc as p}from"../../hooks/useKeyboardButtonPressedFunc.js";import f from"../../hooks/usePrevious/index.js";var m=n((function(n,m){var v=n.id,h=n.className,y=n["data-testid"],g=n.value,b=n.onChange,E=n.onClick,P=n.readOnly,x=void 0!==P&&P,C=n.ariaLabel,w=void 0===C?"":C,k=n.placeholder,j=n.clearable,B=n.typographyClassName,F=n.component,N=n.isEditMode,T=n.autoSelectTextOnEditMode,D=n.onEditModeChange,K=n.tooltipProps,M=n.type,R=n.weight,S=n.multiline,A=void 0!==S&&S,H=o(null),O=s(m,H),W=l(N||!1),_=e(W,2),q=_[0],z=_[1],I=l(g),L=e(I,2),G=L[0],J=L[1],Q=o(0),U=o(0),V=f(g),X=o(null),Y=o(null);function Z(e){x||q||(e.preventDefault(),$(!0))}function $(e){null==D||D(e),z(e)}function ee(){($(!1),g!==G)&&(G||j&&k?(J(G),null==b||b(G)):J(g))}function te(){ee()}function re(e){if(e.key===d.ENTER){if(A&&e.shiftKey)return;e.preventDefault(),e.stopPropagation(),ee()}e.key===d.ESCAPE&&(e.preventDefault(),e.stopPropagation(),$(!1),J(g))}function ne(e){J(e.target.value),A&&ae()}a((function(){q||g===V||g===G||J(g)}),[V,q,g,G]),a((function(){z(N)}),[N]);var oe=p(Z);function le(){var e,t;if(null===(t=null===(e=X.current)||void 0===e?void 0:e.focus)||void 0===t||t.call(e),X.current){var r=X.current,n=r.value.length;r.setSelectionRange(n,n)}A&&function(){if(A&&X.current){var e=X.current;if(!e)return;var t=window.getComputedStyle(e),r=parseFloat(t.lineHeight)||16,n=parseFloat(t.paddingTop)||0,o=parseFloat(t.paddingBottom)||0,l=parseFloat(t.borderTopWidth)||0,a=parseFloat(t.borderBottomWidth)||0;U.current=r,Q.current=n+o+l+a,ae()}}()}function ae(){var e;X.current&&(null===(e=null==X?void 0:X.current)||void 0===e||e.style.setProperty("--input-height","auto"),requestAnimationFrame((function(){var e,t=X.current;t&&(null===(e=null==X?void 0:X.current)||void 0===e||e.style.setProperty("--input-height","".concat(Math.max(t.scrollHeight+Q.current,U.current+Q.current),"px")))})))}return a((function(){var e,t;q&&(le(),T&&(null===(t=null===(e=X.current)||void 0===e?void 0:e.select)||void 0===t||t.call(e)))}),[T,q]),i((function(){var e;if(Y.current){var t=Y.current.getBoundingClientRect();null===(e=null==X?void 0:X.current)||void 0===e||e.style.setProperty("--input-width","".concat(t.width,"px"))}}),[G,q]),r.createElement("div",{ref:O,id:v,"aria-label":w,"data-testid":y,className:u(c.editableTypography,h),role:q?null:"button",onClick:function(e){null==E||E(e),Z(e)},onKeyDown:oe},q&&(A?r.createElement("textarea",{ref:X,className:u(c.textarea,B),value:G,onChange:ne,onKeyDown:re,onBlur:te,"aria-label":w,placeholder:k,role:"textbox",rows:1}):r.createElement("input",{ref:X,className:u(c.input,B),value:G,onChange:ne,onKeyDown:re,onBlur:te,"aria-label":w,placeholder:k,role:"input"})),r.createElement(F,{ref:Y,"aria-hidden":q,className:u(c.typography,B,t(t(t(t({},c.hidden,q),c.disabled,x),c.placeholder,!G&&k),c.multiline,!q&&A)),tabIndex:0,tooltipProps:K,weight:R,type:M,ellipsis:!A},G||k))}));export{m as default};
+import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import r,{forwardRef as o,useRef as n,useState as a,useEffect as l}from"react";import i from"classnames";import u from"../../hooks/useMergeRef.js";import s from"./EditableTypography.module.scss.js";import{keyCodes as c}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import{useKeyboardButtonPressedFunc as d}from"../../hooks/useKeyboardButtonPressedFunc.js";import p from"../../hooks/usePrevious/index.js";var f=o((function(o,f){var m=o.id,h=o.className,v=o["data-testid"],g=o.value,y=o.onChange,b=o.onClick,E=o.readOnly,w=void 0!==E&&E,C=o.ariaLabel,x=void 0===C?"":C,P=o.placeholder,k=o.clearable,j=o.typographyClassName,B=o.component,F=o.isEditMode,N=o.autoSelectTextOnEditMode,T=o.onEditModeChange,D=o.tooltipProps,K=o.type,M=o.weight,R=o.multiline,S=void 0!==R&&R,A=n(null),H=u(f,A),O=a(F||!1),W=e(O,2),_=W[0],q=W[1],z=a(g),I=e(z,2),L=I[0],G=I[1],J=a(0),Q=e(J,2),U=Q[0],V=Q[1],X=a(0),Y=e(X,2),Z=Y[0],$=Y[1],ee=n(0),te=n(0),re=p(g),oe=n(null),ne=n(null);function ae(e){w||_||(e.preventDefault(),le(!0))}function le(e){null==T||T(e),q(e)}function ie(){(le(!1),g!==L)&&(L||k&&P?(G(L),null==y||y(L)):G(g))}function ue(){ie()}function se(e){if(e.key===c.ENTER){if(S&&e.shiftKey)return;e.preventDefault(),e.stopPropagation(),ie()}e.key===c.ESCAPE&&(e.preventDefault(),e.stopPropagation(),le(!1),G(g))}function ce(e){G(e.target.value),S&&fe()}l((function(){_||g===re||g===L||G(g)}),[re,_,g,L]),l((function(){q(F)}),[F]);var de=d(ae);function pe(){var e,t;if(null===(t=null===(e=oe.current)||void 0===e?void 0:e.focus)||void 0===t||t.call(e),oe.current){var r=oe.current,o=r.value.length;r.setSelectionRange(o,o)}S&&function(){if(S&&oe.current){var e=oe.current;if(!e)return;var t=window.getComputedStyle(e),r=parseFloat(t.lineHeight)||16,o=parseFloat(t.paddingTop)||0,n=parseFloat(t.paddingBottom)||0,a=parseFloat(t.borderTopWidth)||0,l=parseFloat(t.borderBottomWidth)||0;te.current=r,ee.current=o+n+a+l,fe()}}()}function fe(){oe.current&&($("auto"),requestAnimationFrame((function(){var e=oe.current;e&&$(Math.max(e.scrollHeight+ee.current,te.current+ee.current))})))}return l((function(){var e,t;_&&(pe(),N&&(null===(t=null===(e=oe.current)||void 0===e?void 0:e.select)||void 0===t||t.call(e)))}),[N,_]),l((function(){if(ne.current){var e=ne.current.getBoundingClientRect();V(e.width)}}),[L,_]),r.createElement("div",{ref:H,id:m,"aria-label":x,"data-testid":v,className:i(s.editableTypography,h),role:_?null:"button",onClick:function(e){null==b||b(e),ae(e)},onKeyDown:de},_&&(S?r.createElement("textarea",{ref:oe,className:i(s.textarea,j),value:L,onChange:ce,onKeyDown:se,onBlur:ue,"aria-label":x,placeholder:P,style:{width:U,height:Z},role:"textbox",rows:1}):r.createElement("input",{ref:oe,className:i(s.input,j),value:L,onChange:ce,onKeyDown:se,onBlur:ue,"aria-label":x,placeholder:P,style:{width:U},role:"input"})),r.createElement(B,{ref:ne,"aria-hidden":_,className:i(s.typography,j,t(t(t(t({},s.hidden,_),s.disabled,w),s.placeholder,!L&&P),s.multiline,!_&&S)),tabIndex:0,tooltipProps:D,weight:M,type:K,ellipsis:!S},L||P))}));export{f as default};
 //# sourceMappingURL=EditableTypography.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditableTypography.js","sources":["../../../../../src/components/EditableTypography/EditableTypography.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useRef, useState, useLayoutEffect } from \"react\";\nimport cx from \"classnames\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport VibeComponentProps from \"../../types/VibeComponentProps\";\nimport VibeComponent from \"../../types/VibeComponent\";\nimport styles from \"./EditableTypography.module.scss\";\nimport { keyCodes } from \"../../constants\";\nimport { useKeyboardButtonPressedFunc } from \"../../hooks/useKeyboardButtonPressedFunc\";\nimport { TooltipProps } from \"../Tooltip/Tooltip\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport { TextType, TextWeight } from \"../Text/Text.types\";\nimport { HeadingType, HeadingWeight } from \"../Heading/Heading.types\";\n\nexport interface EditableTypographyImplementationProps {\n  /** Value of the text */\n  value: string;\n  /** Will be called whenever the current value changes to a non-empty value */\n  onChange?: (value: string) => void;\n  /** Will be called whenever the component gets clicked */\n  onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;\n  /** Disables editing mode - component will be just a typography element */\n  readOnly?: boolean;\n  /** Shown in edit mode when the text value is empty */\n  placeholder?: string;\n  /** ARIA Label */\n  ariaLabel?: string;\n  /** Controls the mode of the component (i.e. view/edit mode) */\n  isEditMode?: boolean;\n  /** If true, automatically select all text when entering edit mode */\n  autoSelectTextOnEditMode?: boolean;\n  /** Will be called when the mode of the component changes */\n  onEditModeChange?: (isEditMode: boolean) => void;\n  /** Override Tooltip props when needed */\n  tooltipProps?: Partial<TooltipProps>;\n}\n\nexport interface EditableTypographyProps extends VibeComponentProps, EditableTypographyImplementationProps {\n  /** A typography component that is being rendered in view mode */\n  component: ElementType;\n  /** Controls the style of the typography component in view mode */\n  typographyClassName: string;\n  /** Shows placeholder when empty, if provided */\n  clearable?: boolean;\n  /** Sets the Text/Heading type */\n  type?: TextType | HeadingType;\n  /** Sets the Text/Heading weight */\n  weight?: TextWeight | HeadingWeight;\n  /** Controls whether a textarea or a simple input would be rendered, allowing multi-lines */\n  multiline?: boolean;\n}\n\nconst EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> = forwardRef(\n  (\n    {\n      id,\n      className,\n      \"data-testid\": dataTestId,\n      value,\n      onChange,\n      onClick,\n      readOnly = false,\n      ariaLabel = \"\",\n      placeholder,\n      clearable,\n      typographyClassName,\n      component: TypographyComponent,\n      isEditMode,\n      autoSelectTextOnEditMode,\n      onEditModeChange,\n      tooltipProps,\n      type,\n      weight,\n      multiline = false\n    }: EditableTypographyProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [isEditing, setIsEditing] = useState(isEditMode || false);\n    const [inputValue, setInputValue] = useState(value);\n    const textareaBorderBoxSizing = useRef(0);\n    const textareaLineHeight = useRef(0);\n\n    const prevValue = usePrevious(value);\n\n    const inputRef = useRef(null);\n    const typographyRef = useRef(null);\n\n    useEffect(() => {\n      if (!isEditing && value !== prevValue && value !== inputValue) {\n        setInputValue(value);\n      }\n    }, [prevValue, isEditing, value, inputValue]);\n\n    useEffect(() => {\n      setIsEditing(isEditMode);\n    }, [isEditMode]);\n\n    function onTypographyClick(event: React.KeyboardEvent | React.MouseEvent) {\n      onClick?.(event);\n      toggleEditMode(event);\n    }\n\n    function toggleEditMode(event: React.KeyboardEvent | React.MouseEvent) {\n      if (readOnly || isEditing) {\n        return;\n      }\n      event.preventDefault();\n      handleEditModeChange(true);\n    }\n\n    function handleEditModeChange(value: boolean) {\n      onEditModeChange?.(value);\n      setIsEditing(value);\n    }\n\n    function handleInputValueChange() {\n      handleEditModeChange(false);\n\n      if (value === inputValue) {\n        return;\n      }\n\n      const shouldShowPlaceholderWhenEmpty = clearable && placeholder;\n      if (!inputValue && !shouldShowPlaceholderWhenEmpty) {\n        setInputValue(value);\n        return;\n      }\n      setInputValue(inputValue);\n      onChange?.(inputValue);\n    }\n\n    function handleBlur() {\n      handleInputValueChange();\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) {\n      if (event.key === keyCodes.ENTER) {\n        if (multiline && event.shiftKey) {\n          return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n        handleInputValueChange();\n      }\n      if (event.key === keyCodes.ESCAPE) {\n        event.preventDefault();\n        event.stopPropagation();\n        handleEditModeChange(false);\n        setInputValue(value);\n      }\n    }\n\n    function handleChange(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {\n      setInputValue(event.target.value);\n\n      if (multiline) {\n        resizeTextarea();\n      }\n    }\n\n    const toggleKeyboardEditMode = useKeyboardButtonPressedFunc(toggleEditMode);\n\n    function focus() {\n      inputRef.current?.focus?.();\n\n      if (inputRef.current) {\n        const inputElement = inputRef.current as HTMLInputElement | HTMLTextAreaElement;\n        const textLength = inputElement.value.length;\n        inputElement.setSelectionRange(textLength, textLength);\n      }\n\n      if (multiline) {\n        calculateTextareaHeightAttrs();\n      }\n    }\n\n    /* Dynamically resizes the textarea to fit its content */\n    function resizeTextarea() {\n      if (inputRef.current) {\n        // Temporarily set the height to \"auto\" to accurately measure the scroll height of the content inside the textarea.\n        inputRef?.current?.style.setProperty(\"--input-height\", \"auto\");\n\n        requestAnimationFrame(() => {\n          const textarea = inputRef.current as HTMLTextAreaElement;\n\n          if (!textarea) {\n            return;\n          }\n\n          // Ensure we at least have 1 line\n          const height = Math.max(\n            textarea.scrollHeight + textareaBorderBoxSizing.current,\n            textareaLineHeight.current + textareaBorderBoxSizing.current\n          );\n          inputRef?.current?.style.setProperty(\"--input-height\", `${height}px`);\n        });\n      }\n    }\n\n    function selectAllInputText() {\n      inputRef.current?.select?.();\n    }\n\n    useEffect(() => {\n      if (!isEditing) return;\n      focus();\n      if (autoSelectTextOnEditMode) {\n        selectAllInputText();\n      }\n    }, [autoSelectTextOnEditMode, isEditing]);\n\n    useLayoutEffect(() => {\n      if (!typographyRef.current) {\n        return;\n      }\n\n      const { width } = typographyRef.current.getBoundingClientRect();\n      inputRef?.current?.style.setProperty(\"--input-width\", `${width}px`);\n    }, [inputValue, isEditing]);\n\n    /* Calculate the minimual textarea height, taking its applied styles (padding, border width) into consideration \n       This is done only on focus, so that we don't need to get the computed style every time.\n    */\n    function calculateTextareaHeightAttrs() {\n      if (multiline && inputRef.current) {\n        const textarea = inputRef.current as HTMLTextAreaElement;\n\n        if (!textarea) {\n          return;\n        }\n\n        const computedStyle = window.getComputedStyle(textarea);\n\n        // Calculate the appropriate height by taking into account the scrollable content inside the textarea,\n        // as well as the styles applied to it, such as padding and border widths.\n        const lineHeight = parseFloat(computedStyle.lineHeight) || 16;\n        const paddingTop = parseFloat(computedStyle.paddingTop) || 0;\n        const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;\n        const borderTopWidth = parseFloat(computedStyle.borderTopWidth) || 0;\n        const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;\n\n        textareaLineHeight.current = lineHeight;\n        textareaBorderBoxSizing.current = paddingTop + paddingBottom + borderTopWidth + borderBottomWidth;\n        resizeTextarea();\n      }\n    }\n\n    return (\n      <div\n        ref={mergedRef}\n        id={id}\n        aria-label={ariaLabel}\n        data-testid={dataTestId}\n        className={cx(styles.editableTypography, className)}\n        role={isEditing ? null : \"button\"}\n        onClick={onTypographyClick}\n        onKeyDown={toggleKeyboardEditMode}\n      >\n        {isEditing &&\n          (multiline ? (\n            <textarea\n              ref={inputRef}\n              className={cx(styles.textarea, typographyClassName)}\n              value={inputValue}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onBlur={handleBlur}\n              aria-label={ariaLabel}\n              placeholder={placeholder}\n              // style={{ width: inputWidth, height: inputHeight }}\n              role=\"textbox\"\n              rows={1}\n            />\n          ) : (\n            <input\n              ref={inputRef}\n              className={cx(styles.input, typographyClassName)}\n              value={inputValue}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onBlur={handleBlur}\n              aria-label={ariaLabel}\n              placeholder={placeholder}\n              role=\"input\"\n            />\n          ))}\n        <TypographyComponent\n          ref={typographyRef}\n          aria-hidden={isEditing}\n          className={cx(styles.typography, typographyClassName, {\n            [styles.hidden]: isEditing,\n            [styles.disabled]: readOnly,\n            [styles.placeholder]: !inputValue && placeholder,\n            [styles.multiline]: !isEditing && multiline\n          })}\n          tabIndex={0}\n          tooltipProps={tooltipProps}\n          weight={weight}\n          type={type}\n          ellipsis={!multiline}\n        >\n          {inputValue || placeholder}\n        </TypographyComponent>\n      </div>\n    );\n  }\n);\n\nexport default EditableTypography;\n"],"names":["EditableTypography","forwardRef","_ref","ref","id","className","dataTestId","value","onChange","onClick","_ref$readOnly","readOnly","_ref$ariaLabel","ariaLabel","placeholder","clearable","typographyClassName","TypographyComponent","component","isEditMode","autoSelectTextOnEditMode","onEditModeChange","tooltipProps","type","weight","_ref$multiline","multiline","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isEditing","setIsEditing","_useState3","_useState4","inputValue","setInputValue","textareaBorderBoxSizing","textareaLineHeight","prevValue","usePrevious","inputRef","typographyRef","toggleEditMode","event","preventDefault","handleEditModeChange","handleInputValueChange","handleBlur","handleKeyDown","key","keyCodes","ENTER","shiftKey","stopPropagation","ESCAPE","handleChange","target","resizeTextarea","useEffect","toggleKeyboardEditMode","useKeyboardButtonPressedFunc","focus","_b","current","_a","inputElement","textLength","length","setSelectionRange","textarea","computedStyle","window","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth","calculateTextareaHeightAttrs","style","setProperty","requestAnimationFrame","concat","Math","max","scrollHeight","select","useLayoutEffect","_typographyRef$curren","getBoundingClientRect","width","React","createElement","cx","styles","editableTypography","role","onKeyDown","onBlur","rows","input","typography","_defineProperty","hidden","disabled","tabIndex","ellipsis"],"mappings":"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"}
+{"version":3,"file":"EditableTypography.js","sources":["../../../../../src/components/EditableTypography/EditableTypography.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport VibeComponentProps from \"../../types/VibeComponentProps\";\nimport VibeComponent from \"../../types/VibeComponent\";\nimport styles from \"./EditableTypography.module.scss\";\nimport { keyCodes } from \"../../constants\";\nimport { useKeyboardButtonPressedFunc } from \"../../hooks/useKeyboardButtonPressedFunc\";\nimport { TooltipProps } from \"../Tooltip/Tooltip\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport { TextType, TextWeight } from \"../Text/Text.types\";\nimport { HeadingType, HeadingWeight } from \"../Heading/Heading.types\";\n\nexport interface EditableTypographyImplementationProps {\n  /** Value of the text */\n  value: string;\n  /** Will be called whenever the current value changes to a non-empty value */\n  onChange?: (value: string) => void;\n  /** Will be called whenever the component gets clicked */\n  onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;\n  /** Disables editing mode - component will be just a typography element */\n  readOnly?: boolean;\n  /** Shown in edit mode when the text value is empty */\n  placeholder?: string;\n  /** ARIA Label */\n  ariaLabel?: string;\n  /** Controls the mode of the component (i.e. view/edit mode) */\n  isEditMode?: boolean;\n  /** If true, automatically select all text when entering edit mode */\n  autoSelectTextOnEditMode?: boolean;\n  /** Will be called when the mode of the component changes */\n  onEditModeChange?: (isEditMode: boolean) => void;\n  /** Override Tooltip props when needed */\n  tooltipProps?: Partial<TooltipProps>;\n}\n\nexport interface EditableTypographyProps extends VibeComponentProps, EditableTypographyImplementationProps {\n  /** A typography component that is being rendered in view mode */\n  component: ElementType;\n  /** Controls the style of the typography component in view mode */\n  typographyClassName: string;\n  /** Shows placeholder when empty, if provided */\n  clearable?: boolean;\n  /** Sets the Text/Heading type */\n  type?: TextType | HeadingType;\n  /** Sets the Text/Heading weight */\n  weight?: TextWeight | HeadingWeight;\n  /** Controls whether a textarea or a simple input would be rendered, allowing multi-lines */\n  multiline?: boolean;\n}\n\nconst EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> = forwardRef(\n  (\n    {\n      id,\n      className,\n      \"data-testid\": dataTestId,\n      value,\n      onChange,\n      onClick,\n      readOnly = false,\n      ariaLabel = \"\",\n      placeholder,\n      clearable,\n      typographyClassName,\n      component: TypographyComponent,\n      isEditMode,\n      autoSelectTextOnEditMode,\n      onEditModeChange,\n      tooltipProps,\n      type,\n      weight,\n      multiline = false\n    }: EditableTypographyProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [isEditing, setIsEditing] = useState(isEditMode || false);\n    const [inputValue, setInputValue] = useState(value);\n    const [inputWidth, setInputWidth] = useState(0);\n    const [inputHeight, setInputHeight] = useState<number | string>(0);\n    const textareaBorderBoxSizing = useRef(0);\n    const textareaLineHeight = useRef(0);\n\n    const prevValue = usePrevious(value);\n\n    const inputRef = useRef(null);\n    const typographyRef = useRef(null);\n\n    useEffect(() => {\n      if (!isEditing && value !== prevValue && value !== inputValue) {\n        setInputValue(value);\n      }\n    }, [prevValue, isEditing, value, inputValue]);\n\n    useEffect(() => {\n      setIsEditing(isEditMode);\n    }, [isEditMode]);\n\n    function onTypographyClick(event: React.KeyboardEvent | React.MouseEvent) {\n      onClick?.(event);\n      toggleEditMode(event);\n    }\n\n    function toggleEditMode(event: React.KeyboardEvent | React.MouseEvent) {\n      if (readOnly || isEditing) {\n        return;\n      }\n      event.preventDefault();\n      handleEditModeChange(true);\n    }\n\n    function handleEditModeChange(value: boolean) {\n      onEditModeChange?.(value);\n      setIsEditing(value);\n    }\n\n    function handleInputValueChange() {\n      handleEditModeChange(false);\n\n      if (value === inputValue) {\n        return;\n      }\n\n      const shouldShowPlaceholderWhenEmpty = clearable && placeholder;\n      if (!inputValue && !shouldShowPlaceholderWhenEmpty) {\n        setInputValue(value);\n        return;\n      }\n      setInputValue(inputValue);\n      onChange?.(inputValue);\n    }\n\n    function handleBlur() {\n      handleInputValueChange();\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) {\n      if (event.key === keyCodes.ENTER) {\n        if (multiline && event.shiftKey) {\n          return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n        handleInputValueChange();\n      }\n      if (event.key === keyCodes.ESCAPE) {\n        event.preventDefault();\n        event.stopPropagation();\n        handleEditModeChange(false);\n        setInputValue(value);\n      }\n    }\n\n    function handleChange(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {\n      setInputValue(event.target.value);\n\n      if (multiline) {\n        resizeTextarea();\n      }\n    }\n\n    const toggleKeyboardEditMode = useKeyboardButtonPressedFunc(toggleEditMode);\n\n    function focus() {\n      inputRef.current?.focus?.();\n\n      if (inputRef.current) {\n        const inputElement = inputRef.current as HTMLInputElement | HTMLTextAreaElement;\n        const textLength = inputElement.value.length;\n        inputElement.setSelectionRange(textLength, textLength);\n      }\n\n      if (multiline) {\n        calculateTextareaHeightAttrs();\n      }\n    }\n\n    /* Dynamically resizes the textarea to fit its content */\n    function resizeTextarea() {\n      if (inputRef.current) {\n        // Temporarily set the height to \"auto\" to accurately measure the scroll height of the content inside the textarea.\n        setInputHeight(\"auto\");\n\n        requestAnimationFrame(() => {\n          const textarea = inputRef.current as HTMLTextAreaElement;\n\n          if (!textarea) {\n            return;\n          }\n\n          // Ensure we at least have 1 line\n          setInputHeight(\n            Math.max(\n              textarea.scrollHeight + textareaBorderBoxSizing.current,\n              textareaLineHeight.current + textareaBorderBoxSizing.current\n            )\n          );\n        });\n      }\n    }\n\n    function selectAllInputText() {\n      inputRef.current?.select?.();\n    }\n\n    useEffect(() => {\n      if (!isEditing) return;\n      focus();\n      if (autoSelectTextOnEditMode) {\n        selectAllInputText();\n      }\n    }, [autoSelectTextOnEditMode, isEditing]);\n\n    useEffect(() => {\n      if (!typographyRef.current) {\n        return;\n      }\n\n      const { width } = typographyRef.current.getBoundingClientRect();\n      setInputWidth(width);\n    }, [inputValue, isEditing]);\n\n    /* Calculate the minimual textarea height, taking its applied styles (padding, border width) into consideration \n       This is done only on focus, so that we don't need to get the computed style every time.\n    */\n    function calculateTextareaHeightAttrs() {\n      if (multiline && inputRef.current) {\n        const textarea = inputRef.current as HTMLTextAreaElement;\n\n        if (!textarea) {\n          return;\n        }\n\n        const computedStyle = window.getComputedStyle(textarea);\n\n        // Calculate the appropriate height by taking into account the scrollable content inside the textarea,\n        // as well as the styles applied to it, such as padding and border widths.\n        const lineHeight = parseFloat(computedStyle.lineHeight) || 16;\n        const paddingTop = parseFloat(computedStyle.paddingTop) || 0;\n        const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;\n        const borderTopWidth = parseFloat(computedStyle.borderTopWidth) || 0;\n        const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;\n\n        textareaLineHeight.current = lineHeight;\n        textareaBorderBoxSizing.current = paddingTop + paddingBottom + borderTopWidth + borderBottomWidth;\n        resizeTextarea();\n      }\n    }\n\n    return (\n      <div\n        ref={mergedRef}\n        id={id}\n        aria-label={ariaLabel}\n        data-testid={dataTestId}\n        className={cx(styles.editableTypography, className)}\n        role={isEditing ? null : \"button\"}\n        onClick={onTypographyClick}\n        onKeyDown={toggleKeyboardEditMode}\n      >\n        {isEditing &&\n          (multiline ? (\n            <textarea\n              ref={inputRef}\n              className={cx(styles.textarea, typographyClassName)}\n              value={inputValue}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onBlur={handleBlur}\n              aria-label={ariaLabel}\n              placeholder={placeholder}\n              style={{ width: inputWidth, height: inputHeight }}\n              role=\"textbox\"\n              rows={1}\n            />\n          ) : (\n            <input\n              ref={inputRef}\n              className={cx(styles.input, typographyClassName)}\n              value={inputValue}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onBlur={handleBlur}\n              aria-label={ariaLabel}\n              placeholder={placeholder}\n              style={{ width: inputWidth }}\n              role=\"input\"\n            />\n          ))}\n        <TypographyComponent\n          ref={typographyRef}\n          aria-hidden={isEditing}\n          className={cx(styles.typography, typographyClassName, {\n            [styles.hidden]: isEditing,\n            [styles.disabled]: readOnly,\n            [styles.placeholder]: !inputValue && placeholder,\n            [styles.multiline]: !isEditing && multiline\n          })}\n          tabIndex={0}\n          tooltipProps={tooltipProps}\n          weight={weight}\n          type={type}\n          ellipsis={!multiline}\n        >\n          {inputValue || placeholder}\n        </TypographyComponent>\n      </div>\n    );\n  }\n);\n\nexport default EditableTypography;\n"],"names":["EditableTypography","forwardRef","_ref","ref","id","className","dataTestId","value","onChange","onClick","_ref$readOnly","readOnly","_ref$ariaLabel","ariaLabel","placeholder","clearable","typographyClassName","TypographyComponent","component","isEditMode","autoSelectTextOnEditMode","onEditModeChange","tooltipProps","type","weight","_ref$multiline","multiline","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isEditing","setIsEditing","_useState3","_useState4","inputValue","setInputValue","_useState5","_useState6","inputWidth","setInputWidth","_useState7","_useState8","inputHeight","setInputHeight","textareaBorderBoxSizing","textareaLineHeight","prevValue","usePrevious","inputRef","typographyRef","toggleEditMode","event","preventDefault","handleEditModeChange","handleInputValueChange","handleBlur","handleKeyDown","key","keyCodes","ENTER","shiftKey","stopPropagation","ESCAPE","handleChange","target","resizeTextarea","useEffect","toggleKeyboardEditMode","useKeyboardButtonPressedFunc","focus","_b","current","_a","inputElement","textLength","length","setSelectionRange","textarea","computedStyle","window","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth","calculateTextareaHeightAttrs","requestAnimationFrame","Math","max","scrollHeight","select","_typographyRef$curren","getBoundingClientRect","width","React","createElement","cx","styles","editableTypography","role","onKeyDown","onBlur","style","height","rows","input","typography","_defineProperty","hidden","disabled","tabIndex","ellipsis"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e={editableTypography:"editableTypography",input:"input",textarea:"textarea",typography:"typography",disabled:"disabled",hidden:"hidden",placeholder:"placeholder",multiline:"multiline"};!function(e){const n="s_id-be4dbaebdbfd_3_12_3";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,a.firstChild?a.insertBefore(t,a.firstChild):a.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".editableTypography {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n  margin-left: -6px;\n  overflow: hidden;\n  position: relative;\n}\n.editableTypography .input,\n.editableTypography .textarea {\n  width: var(--input-width);\n  display: inline-block;\n  max-width: 100%;\n  min-width: 64px;\n  padding: 0 var(--spacing-xs);\n  outline: none;\n  border: 1px solid var(--primary-color);\n  border-radius: var(--border-radius-small);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.editableTypography .input:focus, .editableTypography .input:active,\n.editableTypography .textarea:focus,\n.editableTypography .textarea:active {\n  outline: none;\n}\n.editableTypography .textarea {\n  resize: none;\n  height: var(--input-height);\n}\n.editableTypography .typography {\n  border: 1px solid transparent;\n  padding: 0 var(--spacing-xs);\n  border-radius: var(--border-radius-small);\n}\n.editableTypography .typography:hover:not(.disabled) {\n  border-color: var(--ui-border-color);\n}\n.editableTypography .typography.hidden {\n  position: absolute;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.editableTypography .typography.placeholder {\n  color: var(--secondary-text-color);\n}\n.editableTypography .typography.multiline {\n  white-space: pre-wrap;\n}");export{e as default};
+var e={editableTypography:"editableTypography",input:"input",textarea:"textarea",typography:"typography",disabled:"disabled",hidden:"hidden",placeholder:"placeholder",multiline:"multiline"};!function(e){const a="s_id-ae5d3ede7a9c_3_12_3";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+a))return;const r=document.createElement("style");r.id=a,n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=e)}(".editableTypography {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n  margin-left: -6px;\n  overflow: hidden;\n  position: relative;\n}\n.editableTypography .input, .editableTypography .textarea {\n  display: inline-block;\n  max-width: 100%;\n  min-width: 64px;\n  padding: 0 var(--spacing-xs);\n  outline: none;\n  border: 1px solid var(--primary-color);\n  border-radius: var(--border-radius-small);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.editableTypography .input:focus, .editableTypography .input:active, .editableTypography .textarea:focus, .editableTypography .textarea:active {\n  outline: none;\n}\n.editableTypography .textarea {\n  resize: none;\n}\n.editableTypography .typography {\n  border: 1px solid transparent;\n  padding: 0 var(--spacing-xs);\n  border-radius: var(--border-radius-small);\n}\n.editableTypography .typography:hover:not(.disabled) {\n  border-color: var(--ui-border-color);\n}\n.editableTypography .typography.hidden {\n  position: absolute;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.editableTypography .typography.placeholder {\n  color: var(--secondary-text-color);\n}\n.editableTypography .typography.multiline {\n  white-space: pre-wrap;\n}");export{e as default};
 //# sourceMappingURL=EditableTypography.module.scss.js.map

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

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import r,{forwardRef as o,useRef as a,useState as i,useCallback as s,useMemo as n}from"react";import l from"classnames";import{RemoveScroll as m}from"react-remove-scroll";import d from"react-focus-lock";import{AnimatePresence as c,motion as u}from"framer-motion";import{getTestId as f}from"../../../tests/testIds.js";import{ComponentDefaultTestId as p}from"../../../tests/constants.js";import y from"./Modal.module.scss.js";import v from"../ModalTopActions/ModalTopActions.js";import{getStyle as j}from"../../../helpers/typesciptCssModulesHelper.js";import{camelCase as E}from"lodash-es";import{ModalProvider as A}from"../context/ModalContext.js";import{keyCodes as b}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{modalAnimationAnchorPopVariants as h,modalAnimationCenterPopVariants as x,modalAnimationOverlayVariants as M}from"../utils/animationVariants.js";import{createPortal as T}from"react-dom";import g from"../hooks/usePortalTarget/usePortalTarget.js";import P from"../../LayerProvider/LayerProvider.js";import C from"../../../hooks/useMergeRef.js";var L=d.default||d,k=o((function(o,d){var k=o.id,I=o.show,z=o.size,N=void 0===z?"medium":z,O=o.renderHeaderAction,_=o.closeButtonTheme,w=o.closeButtonAriaLabel,B=o.onClose,D=void 0===B?function(){}:B,H=o.anchorElementRef,R=o.alertModal,F=o.container,V=void 0===F?document.body:F,X=o.children,K=o.style,S=o.zIndex,Y=o.className,q=o["data-testid"],G=g(V),J=a(null),Q=C(d,J),U=a(null),W=i(),Z=e(W,2),$=Z[0],ee=Z[1],te=i(),re=e(te,2),oe=re[0],ae=re[1],ie=s((function(e){return ee(e)}),[]),se=s((function(e){return ae(e)}),[]),ne=n((function(){return{modalId:k,setTitleId:ie,setDescriptionId:se}}),[k,ie,se]),le=s((function(e){I&&!R&&D(e)}),[I,R,D]),me=s((function(e){e.key===b.ESCAPE&&I&&!R&&D(e)}),[R,D,I]),de=(null==H?void 0:H.current)?h:x,ce=S?{"--monday-modal-z-index":S}:{},ue=Object.assign(Object.assign({},ce),K);return r.createElement(c,null,I&&r.createElement(P,{layerRef:U},r.createElement(A,{value:ne},T(r.createElement(r.Fragment,null,r.createElement(u.div,{ref:U,variants:M,initial:"initial",animate:"enter",exit:"exit","data-testid":f(p.MODAL_NEXT_OVERLAY,k),className:y.overlay,onClick:le,"aria-hidden":!0,style:ce}),r.createElement(L,{returnFocus:!0},r.createElement(m,{forwardProps:!0,ref:Q},r.createElement(u.div,{variants:de,initial:"exit",animate:"enter",exit:"exit",custom:H,className:l(y.modal,j(y,E("size-"+N)),t({},y.withHeaderAction,!!O),Y),id:k,"data-testid":q||f(p.MODAL_NEXT,k),role:"dialog","aria-modal":!0,"aria-labelledby":$,"aria-describedby":oe,style:ue,onKeyDown:me,tabIndex:-1},X,r.createElement(v,{renderAction:O,theme:_,closeButtonAriaLabel:w,onClose:D}))))),G))))}));export{k as default};
+import{slicedToArray as e,defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as r,useRef as a,useState as i,useCallback as s,useMemo as n}from"react";import l from"classnames";import{RemoveScroll as m}from"react-remove-scroll";import d from"react-focus-lock";import{AnimatePresence as c,motion as f}from"framer-motion";import{getTestId as u}from"../../../tests/testIds.js";import{ComponentDefaultTestId as p}from"../../../tests/constants.js";import y from"./Modal.module.scss.js";import v from"../ModalTopActions/ModalTopActions.js";import{getStyle as E}from"../../../helpers/typesciptCssModulesHelper.js";import{camelCase as b}from"lodash-es";import{ModalProvider as j}from"../context/ModalContext.js";import{keyCodes as A}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{modalAnimationAnchorPopVariants as h,modalAnimationCenterPopVariants as x,modalAnimationOverlayVariants as M}from"../utils/animationVariants.js";import{createPortal as T}from"react-dom";import P from"../hooks/usePortalTarget/usePortalTarget.js";import C from"../../LayerProvider/LayerProvider.js";import L from"../../../hooks/useMergeRef.js";var k=d.default||d,I=r((function(r,d){var I=r.id,N=r.show,g=r.size,z=void 0===g?"medium":g,_=r.renderHeaderAction,w=r.closeButtonTheme,B=r.closeButtonAriaLabel,D=r.onClose,H=void 0===D?function(){}:D,R=r.anchorElementRef,O=r.alertModal,V=r.container,X=void 0===V?document.body:V,F=r.children,K=r.style,S=r.zIndex,Y=r.className,q=r["data-testid"],G=r["aria-labelledby"],J=r["aria-describedby"],Q=P(X),U=a(null),W=L(d,U),Z=a(null),$=i(),ee=e($,2),te=ee[0],oe=ee[1],re=i(),ae=e(re,2),ie=ae[0],se=ae[1],ne=s((function(e){G||oe(e)}),[G]),le=s((function(e){J||se(e)}),[J]),me=n((function(){return{modalId:I,setTitleId:ne,setDescriptionId:le}}),[I,ne,le]),de=s((function(e){N&&!O&&H(e)}),[N,O,H]),ce=s((function(e){e.key===A.ESCAPE&&N&&!O&&H(e)}),[O,H,N]),fe=(null==R?void 0:R.current)?h:x;return o.createElement(c,null,N&&o.createElement(C,{layerRef:Z},o.createElement(j,{value:me},T(o.createElement(k,{returnFocus:!0},o.createElement("div",{ref:Z,className:y.container,style:S?{"--monday-modal-z-index":S}:{}},o.createElement(f.div,{variants:M,initial:"initial",animate:"enter",exit:"exit","data-testid":u(p.MODAL_NEXT_OVERLAY,I),className:y.overlay,onClick:de,"aria-hidden":!0}),o.createElement(m,{forwardProps:!0,ref:W},o.createElement(f.div,{variants:fe,initial:"exit",animate:"enter",exit:"exit",custom:R,className:l(y.modal,E(y,b("size-"+z)),t({},y.withHeaderAction,!!_),Y),id:I,"data-testid":q||u(p.MODAL_NEXT,I),role:"dialog","aria-modal":!0,"aria-labelledby":G||te,"aria-describedby":J||ie,style:K,onKeyDown:ce,tabIndex:-1},F,o.createElement(v,{renderAction:_,theme:w,closeButtonAriaLabel:B,onClose:H}))))),Q))))}));export{I as default};
 //# sourceMappingURL=Modal.js.map

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 } from \"../../../tests/constants\";\nimport styles from \"./Modal.module.scss\";\nimport { ModalProps } from \"./Modal.types\";\nimport ModalTopActions from \"../ModalTopActions/ModalTopActions\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"lodash-es\";\nimport { ModalProvider } from \"../context/ModalContext\";\nimport { ModalProviderValue } from \"../context/ModalContext.types\";\nimport { keyCodes } from \"../../../constants\";\nimport {\n  modalAnimationAnchorPopVariants,\n  modalAnimationCenterPopVariants,\n  modalAnimationOverlayVariants\n} from \"../utils/animationVariants\";\nimport { createPortal } from \"react-dom\";\nimport usePortalTarget from \"../hooks/usePortalTarget/usePortalTarget\";\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      anchorElementRef,\n      alertModal,\n      container = document.body,\n      children,\n      style,\n      zIndex,\n      className,\n      \"data-testid\": dataTestId\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 overlayRef = useRef<HTMLDivElement>(null);\n\n    const [titleId, setTitleId] = useState<string>();\n    const [descriptionId, setDescriptionId] = useState<string>();\n\n    const setTitleIdCallback = useCallback((id: string) => setTitleId(id), []);\n    const setDescriptionIdCallback = useCallback((id: string) => setDescriptionId(id), []);\n\n    const contextValue = useMemo<ModalProviderValue>(\n      () => ({\n        modalId: id,\n        setTitleId: setTitleIdCallback,\n        setDescriptionId: setDescriptionIdCallback\n      }),\n      [id, setTitleIdCallback, setDescriptionIdCallback]\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 = anchorElementRef?.current\n      ? modalAnimationAnchorPopVariants\n      : modalAnimationCenterPopVariants;\n\n    const zIndexStyle = zIndex ? ({ \"--monday-modal-z-index\": zIndex } as React.CSSProperties) : {};\n    const modalStyle = { ...zIndexStyle, ...style };\n\n    return (\n      <AnimatePresence>\n        {show && (\n          <LayerProvider layerRef={overlayRef}>\n            <ModalProvider value={contextValue}>\n              {createPortal(\n                <>\n                  <motion.div\n                    ref={overlayRef}\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                    style={zIndexStyle}\n                  />\n                  <FocusLockComponent returnFocus>\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                        role=\"dialog\"\n                        aria-modal\n                        aria-labelledby={titleId}\n                        aria-describedby={descriptionId}\n                        style={modalStyle}\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                  </FocusLockComponent>\n                </>,\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","anchorElementRef","alertModal","_ref$container","container","document","body","children","style","zIndex","className","dataTestId","portalTargetElement","usePortalTarget","modalRef","useRef","modalMergedRef","useMergeRef","overlayRef","_useState","useState","_useState2","_slicedToArray","titleId","setTitleId","_useState3","_useState4","descriptionId","setDescriptionId","setTitleIdCallback","useCallback","setDescriptionIdCallback","contextValue","useMemo","modalId","onBackdropClick","e","onModalKeyDown","key","keyCodes","ESCAPE","modalAnimationVariants","current","modalAnimationAnchorPopVariants","modalAnimationCenterPopVariants","zIndexStyle","modalStyle","Object","assign","React","createElement","AnimatePresence","LayerProvider","layerRef","ModalProvider","value","createPortal","Fragment","motion","div","variants","modalAnimationOverlayVariants","initial","animate","exit","getTestId","ComponentDefaultTestId","MODAL_NEXT_OVERLAY","styles","overlay","onClick","returnFocus","RemoveScroll","forwardProps","custom","cx","modal","getStyle","camelCase","_defineProperty","withHeaderAction","MODAL_NEXT","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 } from \"../../../tests/constants\";\nimport styles from \"./Modal.module.scss\";\nimport { ModalProps } from \"./Modal.types\";\nimport ModalTopActions from \"../ModalTopActions/ModalTopActions\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"lodash-es\";\nimport { ModalProvider } from \"../context/ModalContext\";\nimport { ModalProviderValue } from \"../context/ModalContext.types\";\nimport { keyCodes } from \"../../../constants\";\nimport {\n  modalAnimationAnchorPopVariants,\n  modalAnimationCenterPopVariants,\n  modalAnimationOverlayVariants\n} from \"../utils/animationVariants\";\nimport { createPortal } from \"react-dom\";\nimport usePortalTarget from \"../hooks/usePortalTarget/usePortalTarget\";\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      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      }),\n      [id, setTitleIdCallback, setDescriptionIdCallback]\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 = anchorElementRef?.current\n      ? modalAnimationAnchorPopVariants\n      : modalAnimationCenterPopVariants;\n\n    const zIndexStyle = zIndex ? ({ \"--monday-modal-z-index\": zIndex } as React.CSSProperties) : {};\n    // useEffect(() => {\n    //   containerRef.current?.style?.setProperty(\"--monday-modal-z-index\", zIndex?.toString() || \"\");\n    // }, [zIndex, containerRef]);\n\n    return (\n      <AnimatePresence>\n        {show && (\n          <LayerProvider layerRef={containerRef}>\n            <ModalProvider value={contextValue}>\n              {createPortal(\n                <FocusLockComponent returnFocus>\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                        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","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","current","modalAnimationAnchorPopVariants","modalAnimationCenterPopVariants","React","createElement","AnimatePresence","LayerProvider","layerRef","ModalProvider","value","createPortal","returnFocus","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","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 e={overlay:"overlay",modal:"modal",withHeaderAction:"withHeaderAction",sizeSmall:"sizeSmall",sizeMedium:"sizeMedium",sizeLarge:"sizeLarge"};!function(e){const n="s_id-c4e9eb1452e8_3_12_3";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".overlay {\n  position: fixed;\n  inset: 0;\n  background-color: var(--color-surface);\n  z-index: var(--monday-modal-z-index, 10000);\n}\n\n.modal {\n  --top-actions-spacing: var(--spacing-large);\n  --top-actions-width: var(--spacing-xl);\n  --modal-inline-padding: var(--spacing-xl);\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: var(--monday-modal-z-index, 10000);\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}\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: 480px;\n}\n\n.modal.sizeMedium {\n  --modal-max-height: 80%;\n  --modal-width: 580px;\n}\n\n.modal.sizeLarge {\n  --modal-max-height: 80%;\n  --modal-width: 840px;\n}");export{e as default};
+var n={container:"container",overlay:"overlay",modal:"modal",withHeaderAction:"withHeaderAction",sizeSmall:"sizeSmall",sizeMedium:"sizeMedium",sizeLarge:"sizeLarge"};!function(n){const e="s_id-67c47d259b33_3_12_3";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+e))return;const i=document.createElement("style");i.id=e,a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".container {\n  position: fixed;\n  inset: 0;\n  z-index: var(--monday-modal-z-index, 10000);\n}\n.container .overlay {\n  position: fixed;\n  inset: 0;\n  height: 100%;\n  background-color: var(--color-surface);\n}\n.container .modal {\n  --top-actions-spacing: 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}\n.container .modal.withHeaderAction {\n  --top-actions-width: calc(var(--spacing-xl) * 2);\n}\n.container .modal.sizeSmall {\n  --modal-max-height: 50%;\n  --modal-width: 480px;\n}\n.container .modal.sizeMedium {\n  --modal-max-height: 80%;\n  --modal-width: 580px;\n}\n.container .modal.sizeLarge {\n  --modal-max-height: 80%;\n  --modal-width: 840px;\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 e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as o,useEffect as a}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 d from"../../Icon/Icon.js";import{useModal as p}from"../context/ModalContext.js";var f=o((function(o,f){var j=o.title,u=o.description,x=o.descriptionIcon,_=o.className,g=o.id,E=o["data-testid"],I=p(),N=I.modalId,b=I.setDescriptionId,h=I.setTitleId,H=g?"".concat(N,"_").concat(g,"_label"):"".concat(N,"_label"),y=g?"".concat(N,"_").concat(g,"_desc"):"".concat(N,"_desc");return a((function(){N&&(h(H),u&&b(y))}),[N,h,H,u,b,y]),t.createElement(c,{gap:"xs",direction:"column",align:"start",ref:f,className:s(n.header,_),id:g,"data-testid":E||i(r.MODAL_NEXT_HEADER,g)},t.createElement(m,{id:H,align:"inherit",type:"h2",weight:"medium",maxLines:2,className:n.title},j),u&&t.createElement(c,{id:y},x&&t.createElement(d,{icon:"object"===e(x)?x.name:x,className:s(n.descriptionIcon,"object"===e(x)&&x.className)}),"string"==typeof u?t.createElement(l,{element:"span",align:"inherit",type:"text1"},u):u))}));export{f as default};
+import{typeof as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as o,useEffect as a}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 d from"../../Icon/Icon.js";import{useModal as p}from"../context/ModalContext.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=p(),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 a((function(){N&&(h(y),g&&b(H))}),[N,h,y,g,b,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 j?t.createElement(m,{id:y,align:"inherit",type:"h2",weight:"medium",maxLines:2,className:n.title},j):j,g&&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 g?t.createElement(l,{element:"span",align:"inherit",type:"text1"},g):g))}));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 { ModalHeaderProps } from \"./ModalHeader.types\";\nimport Flex from \"../../Flex/Flex\";\nimport Heading from \"../../Heading/Heading\";\nimport Text from \"../../Text/Text\";\nimport Icon from \"../../Icon/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        <Heading id={titleId} align=\"inherit\" type=\"h2\" weight=\"medium\" maxLines={2} className={styles.title}>\n          {title}\n        </Heading>\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","createElement","Heading","type","weight","maxLines","Icon","icon","_typeof","name","Text","element"],"mappings":"qgBAYMA,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,IAE/EW,EAAAW,cAACC,EAAO,CAACvB,GAAIO,EAASQ,MAAM,UAAUS,KAAK,KAAKC,OAAO,SAASC,SAAU,EAAG3B,UAAWkB,EAAOrB,OAC5FA,GAEFC,GACCc,EAAAW,cAACV,EAAK,CAAAZ,GAAIS,GACPX,GACCa,EAAAW,cAACK,EACC,CAAAC,KAAiC,WAA3BC,EAAO/B,GAA+BA,EAAgBgC,KAAOhC,EACnEC,UAAWiB,EAAGC,EAAOnB,gBAA4C,WAA3B+B,EAAO/B,IAAgCA,EAAgBC,aAGzE,iBAAhBF,EACNc,EAACW,cAAAS,GAAKC,QAAQ,OAAOjB,MAAM,UAAUS,KAAK,SACvC3B,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 { ModalHeaderProps } from \"./ModalHeader.types\";\nimport Flex from \"../../Flex/Flex\";\nimport Heading from \"../../Heading/Heading\";\nimport Text from \"../../Text/Text\";\nimport Icon from \"../../Icon/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":"qgBAYMA,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/src/components/EditableTypography/EditableTypography.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import r,{forwardRef as n,useRef as o,useState as l,useEffect as a,useLayoutEffect as i}from"react";import u from"classnames";import s from"../../hooks/useMergeRef.js";import c from"./EditableTypography.module.scss.js";import{keyCodes as d}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import{useKeyboardButtonPressedFunc as p}from"../../hooks/useKeyboardButtonPressedFunc.js";import f from"../../hooks/usePrevious/index.js";var m=n((function(n,m){var v=n.id,h=n.className,y=n["data-testid"],g=n.value,b=n.onChange,E=n.onClick,P=n.readOnly,x=void 0!==P&&P,C=n.ariaLabel,w=void 0===C?"":C,k=n.placeholder,j=n.clearable,B=n.typographyClassName,F=n.component,N=n.isEditMode,T=n.autoSelectTextOnEditMode,D=n.onEditModeChange,K=n.tooltipProps,M=n.type,R=n.weight,S=n.multiline,A=void 0!==S&&S,H=o(null),O=s(m,H),W=l(N||!1),_=e(W,2),q=_[0],z=_[1],I=l(g),L=e(I,2),G=L[0],J=L[1],Q=o(0),U=o(0),V=f(g),X=o(null),Y=o(null);function Z(e){x||q||(e.preventDefault(),$(!0))}function $(e){null==D||D(e),z(e)}function ee(){($(!1),g!==G)&&(G||j&&k?(J(G),null==b||b(G)):J(g))}function te(){ee()}function re(e){if(e.key===d.ENTER){if(A&&e.shiftKey)return;e.preventDefault(),e.stopPropagation(),ee()}e.key===d.ESCAPE&&(e.preventDefault(),e.stopPropagation(),$(!1),J(g))}function ne(e){J(e.target.value),A&&ae()}a((function(){q||g===V||g===G||J(g)}),[V,q,g,G]),a((function(){z(N)}),[N]);var oe=p(Z);function le(){var e,t;if(null===(t=null===(e=X.current)||void 0===e?void 0:e.focus)||void 0===t||t.call(e),X.current){var r=X.current,n=r.value.length;r.setSelectionRange(n,n)}A&&function(){if(A&&X.current){var e=X.current;if(!e)return;var t=window.getComputedStyle(e),r=parseFloat(t.lineHeight)||16,n=parseFloat(t.paddingTop)||0,o=parseFloat(t.paddingBottom)||0,l=parseFloat(t.borderTopWidth)||0,a=parseFloat(t.borderBottomWidth)||0;U.current=r,Q.current=n+o+l+a,ae()}}()}function ae(){var e;X.current&&(null===(e=null==X?void 0:X.current)||void 0===e||e.style.setProperty("--input-height","auto"),requestAnimationFrame((function(){var e,t=X.current;t&&(null===(e=null==X?void 0:X.current)||void 0===e||e.style.setProperty("--input-height","".concat(Math.max(t.scrollHeight+Q.current,U.current+Q.current),"px")))})))}return a((function(){var e,t;q&&(le(),T&&(null===(t=null===(e=X.current)||void 0===e?void 0:e.select)||void 0===t||t.call(e)))}),[T,q]),i((function(){var e;if(Y.current){var t=Y.current.getBoundingClientRect();null===(e=null==X?void 0:X.current)||void 0===e||e.style.setProperty("--input-width","".concat(t.width,"px"))}}),[G,q]),r.createElement("div",{ref:O,id:v,"aria-label":w,"data-testid":y,className:u(c.editableTypography,h),role:q?null:"button",onClick:function(e){null==E||E(e),Z(e)},onKeyDown:oe},q&&(A?r.createElement("textarea",{ref:X,className:u(c.textarea,B),value:G,onChange:ne,onKeyDown:re,onBlur:te,"aria-label":w,placeholder:k,role:"textbox",rows:1}):r.createElement("input",{ref:X,className:u(c.input,B),value:G,onChange:ne,onKeyDown:re,onBlur:te,"aria-label":w,placeholder:k,role:"input"})),r.createElement(F,{ref:Y,"aria-hidden":q,className:u(c.typography,B,t(t(t(t({},c.hidden,q),c.disabled,x),c.placeholder,!G&&k),c.multiline,!q&&A)),tabIndex:0,tooltipProps:K,weight:R,type:M,ellipsis:!A},G||k))}));export{m as default};
+import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import r,{forwardRef as o,useRef as n,useState as a,useEffect as l}from"react";import i from"classnames";import u from"../../hooks/useMergeRef.js";import s from"./EditableTypography.module.scss.js";import{keyCodes as c}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import{useKeyboardButtonPressedFunc as d}from"../../hooks/useKeyboardButtonPressedFunc.js";import p from"../../hooks/usePrevious/index.js";var f=o((function(o,f){var m=o.id,h=o.className,v=o["data-testid"],g=o.value,y=o.onChange,b=o.onClick,E=o.readOnly,w=void 0!==E&&E,C=o.ariaLabel,x=void 0===C?"":C,P=o.placeholder,k=o.clearable,j=o.typographyClassName,B=o.component,F=o.isEditMode,N=o.autoSelectTextOnEditMode,T=o.onEditModeChange,D=o.tooltipProps,K=o.type,M=o.weight,R=o.multiline,S=void 0!==R&&R,A=n(null),H=u(f,A),O=a(F||!1),W=e(O,2),_=W[0],q=W[1],z=a(g),I=e(z,2),L=I[0],G=I[1],J=a(0),Q=e(J,2),U=Q[0],V=Q[1],X=a(0),Y=e(X,2),Z=Y[0],$=Y[1],ee=n(0),te=n(0),re=p(g),oe=n(null),ne=n(null);function ae(e){w||_||(e.preventDefault(),le(!0))}function le(e){null==T||T(e),q(e)}function ie(){(le(!1),g!==L)&&(L||k&&P?(G(L),null==y||y(L)):G(g))}function ue(){ie()}function se(e){if(e.key===c.ENTER){if(S&&e.shiftKey)return;e.preventDefault(),e.stopPropagation(),ie()}e.key===c.ESCAPE&&(e.preventDefault(),e.stopPropagation(),le(!1),G(g))}function ce(e){G(e.target.value),S&&fe()}l((function(){_||g===re||g===L||G(g)}),[re,_,g,L]),l((function(){q(F)}),[F]);var de=d(ae);function pe(){var e,t;if(null===(t=null===(e=oe.current)||void 0===e?void 0:e.focus)||void 0===t||t.call(e),oe.current){var r=oe.current,o=r.value.length;r.setSelectionRange(o,o)}S&&function(){if(S&&oe.current){var e=oe.current;if(!e)return;var t=window.getComputedStyle(e),r=parseFloat(t.lineHeight)||16,o=parseFloat(t.paddingTop)||0,n=parseFloat(t.paddingBottom)||0,a=parseFloat(t.borderTopWidth)||0,l=parseFloat(t.borderBottomWidth)||0;te.current=r,ee.current=o+n+a+l,fe()}}()}function fe(){oe.current&&($("auto"),requestAnimationFrame((function(){var e=oe.current;e&&$(Math.max(e.scrollHeight+ee.current,te.current+ee.current))})))}return l((function(){var e,t;_&&(pe(),N&&(null===(t=null===(e=oe.current)||void 0===e?void 0:e.select)||void 0===t||t.call(e)))}),[N,_]),l((function(){if(ne.current){var e=ne.current.getBoundingClientRect();V(e.width)}}),[L,_]),r.createElement("div",{ref:H,id:m,"aria-label":x,"data-testid":v,className:i(s.editableTypography,h),role:_?null:"button",onClick:function(e){null==b||b(e),ae(e)},onKeyDown:de},_&&(S?r.createElement("textarea",{ref:oe,className:i(s.textarea,j),value:L,onChange:ce,onKeyDown:se,onBlur:ue,"aria-label":x,placeholder:P,style:{width:U,height:Z},role:"textbox",rows:1}):r.createElement("input",{ref:oe,className:i(s.input,j),value:L,onChange:ce,onKeyDown:se,onBlur:ue,"aria-label":x,placeholder:P,style:{width:U},role:"input"})),r.createElement(B,{ref:ne,"aria-hidden":_,className:i(s.typography,j,t(t(t(t({},s.hidden,_),s.disabled,w),s.placeholder,!L&&P),s.multiline,!_&&S)),tabIndex:0,tooltipProps:D,weight:M,type:K,ellipsis:!S},L||P))}));export{f as default};
 //# sourceMappingURL=EditableTypography.js.map

package/dist/src/components/EditableTypography/EditableTypography.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableTypography.js","sources":["../../../../src/components/EditableTypography/EditableTypography.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useRef, useState, useLayoutEffect } from \"react\";\nimport cx from \"classnames\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport VibeComponentProps from \"../../types/VibeComponentProps\";\nimport VibeComponent from \"../../types/VibeComponent\";\nimport styles from \"./EditableTypography.module.scss\";\nimport { keyCodes } from \"../../constants\";\nimport { useKeyboardButtonPressedFunc } from \"../../hooks/useKeyboardButtonPressedFunc\";\nimport { TooltipProps } from \"../Tooltip/Tooltip\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport { TextType, TextWeight } from \"../Text/Text.types\";\nimport { HeadingType, HeadingWeight } from \"../Heading/Heading.types\";\n\nexport interface EditableTypographyImplementationProps {\n  /** Value of the text */\n  value: string;\n  /** Will be called whenever the current value changes to a non-empty value */\n  onChange?: (value: string) => void;\n  /** Will be called whenever the component gets clicked */\n  onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;\n  /** Disables editing mode - component will be just a typography element */\n  readOnly?: boolean;\n  /** Shown in edit mode when the text value is empty */\n  placeholder?: string;\n  /** ARIA Label */\n  ariaLabel?: string;\n  /** Controls the mode of the component (i.e. view/edit mode) */\n  isEditMode?: boolean;\n  /** If true, automatically select all text when entering edit mode */\n  autoSelectTextOnEditMode?: boolean;\n  /** Will be called when the mode of the component changes */\n  onEditModeChange?: (isEditMode: boolean) => void;\n  /** Override Tooltip props when needed */\n  tooltipProps?: Partial<TooltipProps>;\n}\n\nexport interface EditableTypographyProps extends VibeComponentProps, EditableTypographyImplementationProps {\n  /** A typography component that is being rendered in view mode */\n  component: ElementType;\n  /** Controls the style of the typography component in view mode */\n  typographyClassName: string;\n  /** Shows placeholder when empty, if provided */\n  clearable?: boolean;\n  /** Sets the Text/Heading type */\n  type?: TextType | HeadingType;\n  /** Sets the Text/Heading weight */\n  weight?: TextWeight | HeadingWeight;\n  /** Controls whether a textarea or a simple input would be rendered, allowing multi-lines */\n  multiline?: boolean;\n}\n\nconst EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> = forwardRef(\n  (\n    {\n      id,\n      className,\n      \"data-testid\": dataTestId,\n      value,\n      onChange,\n      onClick,\n      readOnly = false,\n      ariaLabel = \"\",\n      placeholder,\n      clearable,\n      typographyClassName,\n      component: TypographyComponent,\n      isEditMode,\n      autoSelectTextOnEditMode,\n      onEditModeChange,\n      tooltipProps,\n      type,\n      weight,\n      multiline = false\n    }: EditableTypographyProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [isEditing, setIsEditing] = useState(isEditMode || false);\n    const [inputValue, setInputValue] = useState(value);\n    const textareaBorderBoxSizing = useRef(0);\n    const textareaLineHeight = useRef(0);\n\n    const prevValue = usePrevious(value);\n\n    const inputRef = useRef(null);\n    const typographyRef = useRef(null);\n\n    useEffect(() => {\n      if (!isEditing && value !== prevValue && value !== inputValue) {\n        setInputValue(value);\n      }\n    }, [prevValue, isEditing, value, inputValue]);\n\n    useEffect(() => {\n      setIsEditing(isEditMode);\n    }, [isEditMode]);\n\n    function onTypographyClick(event: React.KeyboardEvent | React.MouseEvent) {\n      onClick?.(event);\n      toggleEditMode(event);\n    }\n\n    function toggleEditMode(event: React.KeyboardEvent | React.MouseEvent) {\n      if (readOnly || isEditing) {\n        return;\n      }\n      event.preventDefault();\n      handleEditModeChange(true);\n    }\n\n    function handleEditModeChange(value: boolean) {\n      onEditModeChange?.(value);\n      setIsEditing(value);\n    }\n\n    function handleInputValueChange() {\n      handleEditModeChange(false);\n\n      if (value === inputValue) {\n        return;\n      }\n\n      const shouldShowPlaceholderWhenEmpty = clearable && placeholder;\n      if (!inputValue && !shouldShowPlaceholderWhenEmpty) {\n        setInputValue(value);\n        return;\n      }\n      setInputValue(inputValue);\n      onChange?.(inputValue);\n    }\n\n    function handleBlur() {\n      handleInputValueChange();\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) {\n      if (event.key === keyCodes.ENTER) {\n        if (multiline && event.shiftKey) {\n          return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n        handleInputValueChange();\n      }\n      if (event.key === keyCodes.ESCAPE) {\n        event.preventDefault();\n        event.stopPropagation();\n        handleEditModeChange(false);\n        setInputValue(value);\n      }\n    }\n\n    function handleChange(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {\n      setInputValue(event.target.value);\n\n      if (multiline) {\n        resizeTextarea();\n      }\n    }\n\n    const toggleKeyboardEditMode = useKeyboardButtonPressedFunc(toggleEditMode);\n\n    function focus() {\n      inputRef.current?.focus?.();\n\n      if (inputRef.current) {\n        const inputElement = inputRef.current as HTMLInputElement | HTMLTextAreaElement;\n        const textLength = inputElement.value.length;\n        inputElement.setSelectionRange(textLength, textLength);\n      }\n\n      if (multiline) {\n        calculateTextareaHeightAttrs();\n      }\n    }\n\n    /* Dynamically resizes the textarea to fit its content */\n    function resizeTextarea() {\n      if (inputRef.current) {\n        // Temporarily set the height to \"auto\" to accurately measure the scroll height of the content inside the textarea.\n        inputRef?.current?.style.setProperty(\"--input-height\", \"auto\");\n\n        requestAnimationFrame(() => {\n          const textarea = inputRef.current as HTMLTextAreaElement;\n\n          if (!textarea) {\n            return;\n          }\n\n          // Ensure we at least have 1 line\n          const height = Math.max(\n            textarea.scrollHeight + textareaBorderBoxSizing.current,\n            textareaLineHeight.current + textareaBorderBoxSizing.current\n          );\n          inputRef?.current?.style.setProperty(\"--input-height\", `${height}px`);\n        });\n      }\n    }\n\n    function selectAllInputText() {\n      inputRef.current?.select?.();\n    }\n\n    useEffect(() => {\n      if (!isEditing) return;\n      focus();\n      if (autoSelectTextOnEditMode) {\n        selectAllInputText();\n      }\n    }, [autoSelectTextOnEditMode, isEditing]);\n\n    useLayoutEffect(() => {\n      if (!typographyRef.current) {\n        return;\n      }\n\n      const { width } = typographyRef.current.getBoundingClientRect();\n      inputRef?.current?.style.setProperty(\"--input-width\", `${width}px`);\n    }, [inputValue, isEditing]);\n\n    /* Calculate the minimual textarea height, taking its applied styles (padding, border width) into consideration \n       This is done only on focus, so that we don't need to get the computed style every time.\n    */\n    function calculateTextareaHeightAttrs() {\n      if (multiline && inputRef.current) {\n        const textarea = inputRef.current as HTMLTextAreaElement;\n\n        if (!textarea) {\n          return;\n        }\n\n        const computedStyle = window.getComputedStyle(textarea);\n\n        // Calculate the appropriate height by taking into account the scrollable content inside the textarea,\n        // as well as the styles applied to it, such as padding and border widths.\n        const lineHeight = parseFloat(computedStyle.lineHeight) || 16;\n        const paddingTop = parseFloat(computedStyle.paddingTop) || 0;\n        const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;\n        const borderTopWidth = parseFloat(computedStyle.borderTopWidth) || 0;\n        const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;\n\n        textareaLineHeight.current = lineHeight;\n        textareaBorderBoxSizing.current = paddingTop + paddingBottom + borderTopWidth + borderBottomWidth;\n        resizeTextarea();\n      }\n    }\n\n    return (\n      <div\n        ref={mergedRef}\n        id={id}\n        aria-label={ariaLabel}\n        data-testid={dataTestId}\n        className={cx(styles.editableTypography, className)}\n        role={isEditing ? null : \"button\"}\n        onClick={onTypographyClick}\n        onKeyDown={toggleKeyboardEditMode}\n      >\n        {isEditing &&\n          (multiline ? (\n            <textarea\n              ref={inputRef}\n              className={cx(styles.textarea, typographyClassName)}\n              value={inputValue}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onBlur={handleBlur}\n              aria-label={ariaLabel}\n              placeholder={placeholder}\n              // style={{ width: inputWidth, height: inputHeight }}\n              role=\"textbox\"\n              rows={1}\n            />\n          ) : (\n            <input\n              ref={inputRef}\n              className={cx(styles.input, typographyClassName)}\n              value={inputValue}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onBlur={handleBlur}\n              aria-label={ariaLabel}\n              placeholder={placeholder}\n              role=\"input\"\n            />\n          ))}\n        <TypographyComponent\n          ref={typographyRef}\n          aria-hidden={isEditing}\n          className={cx(styles.typography, typographyClassName, {\n            [styles.hidden]: isEditing,\n            [styles.disabled]: readOnly,\n            [styles.placeholder]: !inputValue && placeholder,\n            [styles.multiline]: !isEditing && multiline\n          })}\n          tabIndex={0}\n          tooltipProps={tooltipProps}\n          weight={weight}\n          type={type}\n          ellipsis={!multiline}\n        >\n          {inputValue || placeholder}\n        </TypographyComponent>\n      </div>\n    );\n  }\n);\n\nexport default EditableTypography;\n"],"names":["EditableTypography","forwardRef","_ref","ref","id","className","dataTestId","value","onChange","onClick","_ref$readOnly","readOnly","_ref$ariaLabel","ariaLabel","placeholder","clearable","typographyClassName","TypographyComponent","component","isEditMode","autoSelectTextOnEditMode","onEditModeChange","tooltipProps","type","weight","_ref$multiline","multiline","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isEditing","setIsEditing","_useState3","_useState4","inputValue","setInputValue","textareaBorderBoxSizing","textareaLineHeight","prevValue","usePrevious","inputRef","typographyRef","toggleEditMode","event","preventDefault","handleEditModeChange","handleInputValueChange","handleBlur","handleKeyDown","key","keyCodes","ENTER","shiftKey","stopPropagation","ESCAPE","handleChange","target","resizeTextarea","useEffect","toggleKeyboardEditMode","useKeyboardButtonPressedFunc","focus","_b","current","_a","inputElement","textLength","length","setSelectionRange","textarea","computedStyle","window","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth","calculateTextareaHeightAttrs","style","setProperty","requestAnimationFrame","concat","Math","max","scrollHeight","select","useLayoutEffect","_typographyRef$curren","getBoundingClientRect","width","React","createElement","cx","styles","editableTypography","role","onKeyDown","onBlur","rows","input","typography","_defineProperty","hidden","disabled","tabIndex","ellipsis"],"mappings":"iiBAmDMA,IAAAA,EAA0EC,GAC9E,SAAAC,EAsBEC,GACE,IArBAC,EAAEF,EAAFE,GACAC,EAASH,EAATG,UACeC,EAAUJ,EAAzB,eACAK,EAAKL,EAALK,MACAC,EAAQN,EAARM,SACAC,EAAOP,EAAPO,QAAOC,EAAAR,EACPS,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAV,EAChBW,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EACdE,EAAWZ,EAAXY,YACAC,EAASb,EAATa,UACAC,EAAmBd,EAAnBc,oBACWC,EAAmBf,EAA9BgB,UACAC,EAAUjB,EAAViB,WACAC,EAAwBlB,EAAxBkB,yBACAC,EAAgBnB,EAAhBmB,iBACAC,EAAYpB,EAAZoB,aACAC,EAAIrB,EAAJqB,KACAC,EAAMtB,EAANsB,OAAMC,EAAAvB,EACNwB,UAAAA,OAAY,IAAHD,GAAQA,EAIbE,EAAeC,EAAO,MACtBC,EAAYC,EAAY3B,EAAKwB,GAEnCI,EAAkCC,EAASb,IAAc,GAAMc,EAAAC,EAAAH,EAAA,GAAxDI,EAASF,EAAA,GAAEG,EAAYH,EAAA,GAC9BI,EAAoCL,EAASzB,GAAM+B,EAAAJ,EAAAG,EAAA,GAA5CE,EAAUD,EAAA,GAAEE,EAAaF,EAAA,GAC1BG,EAA0Bb,EAAO,GACjCc,EAAqBd,EAAO,GAE5Be,EAAYC,EAAYrC,GAExBsC,EAAWjB,EAAO,MAClBkB,EAAgBlB,EAAO,MAiB7B,SAASmB,EAAeC,GAClBrC,GAAYwB,IAGhBa,EAAMC,iBACNC,GAAqB,GACvB,CAEA,SAASA,EAAqB3C,GAC5Bc,SAAAA,EAAmBd,GACnB6B,EAAa7B,EACf,CAEA,SAAS4C,MACPD,GAAqB,GAEjB3C,IAAUgC,KAKTA,GADkCxB,GAAaD,GAKpD0B,EAAcD,GACd/B,SAAAA,EAAW+B,IAJTC,EAAcjC,GAKlB,CAEA,SAAS6C,KACPD,IACF,CAEA,SAASE,GAAcL,GACrB,GAAIA,EAAMM,MAAQC,EAASC,MAAO,CAChC,GAAI9B,GAAasB,EAAMS,SACrB,OAGFT,EAAMC,iBACND,EAAMU,kBACNP,IACD,CACGH,EAAMM,MAAQC,EAASI,SACzBX,EAAMC,iBACND,EAAMU,kBACNR,GAAqB,GACrBV,EAAcjC,GAElB,CAEA,SAASqD,GAAaZ,GACpBR,EAAcQ,EAAMa,OAAOtD,OAEvBmB,GACFoC,IAEJ,CAxEAC,GAAU,WACH5B,GAAa5B,IAAUoC,GAAapC,IAAUgC,GACjDC,EAAcjC,EAEjB,GAAE,CAACoC,EAAWR,EAAW5B,EAAOgC,IAEjCwB,GAAU,WACR3B,EAAajB,EACf,GAAG,CAACA,IAkEJ,IAAM6C,GAAyBC,EAA6BlB,GAE5D,SAASmB,aAGP,WAFAC,EAAkB,UAAlBtB,EAASuB,eAAS,IAAAC,OAAA,EAAAA,EAAAH,8BAEdrB,EAASuB,QAAS,CACpB,IAAME,EAAezB,EAASuB,QACxBG,EAAaD,EAAa/D,MAAMiE,OACtCF,EAAaG,kBAAkBF,EAAYA,EAC5C,CAEG7C,GAoDN,WACE,GAAIA,GAAamB,EAASuB,QAAS,CACjC,IAAMM,EAAW7B,EAASuB,QAE1B,IAAKM,EACH,OAGF,IAAMC,EAAgBC,OAAOC,iBAAiBH,GAIxCI,EAAaC,WAAWJ,EAAcG,aAAe,GACrDE,EAAaD,WAAWJ,EAAcK,aAAe,EACrDC,EAAgBF,WAAWJ,EAAcM,gBAAkB,EAC3DC,EAAiBH,WAAWJ,EAAcO,iBAAmB,EAC7DC,EAAoBJ,WAAWJ,EAAcQ,oBAAsB,EAEzEzC,EAAmB0B,QAAUU,EAC7BrC,EAAwB2B,QAAUY,EAAaC,EAAgBC,EAAiBC,EAChFrB,IACD,CACH,CAzEIsB,EAEJ,CAGA,SAAStB,WACHjB,EAASuB,UAEM,QAAjBC,EAAAxB,aAAA,EAAAA,EAAUuB,eAAO,IAAAC,GAAAA,EAAEgB,MAAMC,YAAY,iBAAkB,QAEvDC,uBAAsB,iBACdb,EAAW7B,EAASuB,QAErBM,IASc,QAAnBL,EAAAxB,eAAAA,EAAUuB,eAAS,IAAAC,GAAAA,EAAAgB,MAAMC,YAAY,iBAAgB,GAAAE,OAJtCC,KAAKC,IAClBhB,EAASiB,aAAelD,EAAwB2B,QAChD1B,EAAmB0B,QAAU3B,EAAwB2B,gBAGzD,IAEJ,CAkDA,OA5CAL,GAAU,WAJV,QAKO5B,IACL+B,KACI9C,YANJ+C,EAAkB,UAAlBtB,EAASuB,eAAS,IAAAC,OAAA,EAAAA,EAAAuB,gCASpB,GAAG,CAACxE,EAA0Be,IAE9B0D,GAAgB,iBACd,GAAK/C,EAAcsB,QAAnB,CAIA,IAAA0B,EAAkBhD,EAAcsB,QAAQ2B,wBACrB,QAAnB1B,EAAAxB,eAAAA,EAAUuB,eAAS,IAAAC,GAAAA,EAAAgB,MAAMC,YAAY,gBAAe,GAAAE,OADvCM,EAALE,YAFP,CAIH,GAAG,CAACzD,EAAYJ,IA8Bd8D,EACEC,cAAA,MAAA,CAAA/F,IAAK0B,EACLzB,GAAIA,eACQS,EAAS,cACRP,EACbD,UAAW8F,EAAGC,EAAOC,mBAAoBhG,GACzCiG,KAAMnE,EAAY,KAAO,SACzB1B,QA/JJ,SAA2BuC,GACzBvC,SAAAA,EAAUuC,GACVD,EAAeC,EACjB,EA6JIuD,UAAWvC,IAEV7B,IACET,EACCuE,EAAAC,cAAA,WAAA,CACE/F,IAAK0C,EACLxC,UAAW8F,EAAGC,EAAO1B,SAAU1D,GAC/BT,MAAOgC,EACP/B,SAAUoD,GACV2C,UAAWlD,GACXmD,OAAQpD,GAAU,aACNvC,EACZC,YAAaA,EAEbwF,KAAK,UACLG,KAAM,IAGRR,yBACE9F,IAAK0C,EACLxC,UAAW8F,EAAGC,EAAOM,MAAO1F,GAC5BT,MAAOgC,EACP/B,SAAUoD,GACV2C,UAAWlD,GACXmD,OAAQpD,GACI,aAAAvC,EACZC,YAAaA,EACbwF,KAAK,WAGXL,EAAAC,cAACjF,EACC,CAAAd,IAAK2C,gBACQX,EACb9B,UAAW8F,EAAGC,EAAOO,WAAY3F,EAAmB4F,EAAAA,EAAAA,EAAAA,KACjDR,EAAOS,OAAS1E,GAChBiE,EAAOU,SAAWnG,GAClByF,EAAOtF,aAAeyB,GAAczB,GACpCsF,EAAO1E,WAAaS,GAAaT,IAEpCqF,SAAU,EACVzF,aAAcA,EACdE,OAAQA,EACRD,KAAMA,EACNyF,UAAWtF,GAEVa,GAAczB,GAIvB"}
+{"version":3,"file":"EditableTypography.js","sources":["../../../../src/components/EditableTypography/EditableTypography.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport VibeComponentProps from \"../../types/VibeComponentProps\";\nimport VibeComponent from \"../../types/VibeComponent\";\nimport styles from \"./EditableTypography.module.scss\";\nimport { keyCodes } from \"../../constants\";\nimport { useKeyboardButtonPressedFunc } from \"../../hooks/useKeyboardButtonPressedFunc\";\nimport { TooltipProps } from \"../Tooltip/Tooltip\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport { TextType, TextWeight } from \"../Text/Text.types\";\nimport { HeadingType, HeadingWeight } from \"../Heading/Heading.types\";\n\nexport interface EditableTypographyImplementationProps {\n  /** Value of the text */\n  value: string;\n  /** Will be called whenever the current value changes to a non-empty value */\n  onChange?: (value: string) => void;\n  /** Will be called whenever the component gets clicked */\n  onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;\n  /** Disables editing mode - component will be just a typography element */\n  readOnly?: boolean;\n  /** Shown in edit mode when the text value is empty */\n  placeholder?: string;\n  /** ARIA Label */\n  ariaLabel?: string;\n  /** Controls the mode of the component (i.e. view/edit mode) */\n  isEditMode?: boolean;\n  /** If true, automatically select all text when entering edit mode */\n  autoSelectTextOnEditMode?: boolean;\n  /** Will be called when the mode of the component changes */\n  onEditModeChange?: (isEditMode: boolean) => void;\n  /** Override Tooltip props when needed */\n  tooltipProps?: Partial<TooltipProps>;\n}\n\nexport interface EditableTypographyProps extends VibeComponentProps, EditableTypographyImplementationProps {\n  /** A typography component that is being rendered in view mode */\n  component: ElementType;\n  /** Controls the style of the typography component in view mode */\n  typographyClassName: string;\n  /** Shows placeholder when empty, if provided */\n  clearable?: boolean;\n  /** Sets the Text/Heading type */\n  type?: TextType | HeadingType;\n  /** Sets the Text/Heading weight */\n  weight?: TextWeight | HeadingWeight;\n  /** Controls whether a textarea or a simple input would be rendered, allowing multi-lines */\n  multiline?: boolean;\n}\n\nconst EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> = forwardRef(\n  (\n    {\n      id,\n      className,\n      \"data-testid\": dataTestId,\n      value,\n      onChange,\n      onClick,\n      readOnly = false,\n      ariaLabel = \"\",\n      placeholder,\n      clearable,\n      typographyClassName,\n      component: TypographyComponent,\n      isEditMode,\n      autoSelectTextOnEditMode,\n      onEditModeChange,\n      tooltipProps,\n      type,\n      weight,\n      multiline = false\n    }: EditableTypographyProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [isEditing, setIsEditing] = useState(isEditMode || false);\n    const [inputValue, setInputValue] = useState(value);\n    const [inputWidth, setInputWidth] = useState(0);\n    const [inputHeight, setInputHeight] = useState<number | string>(0);\n    const textareaBorderBoxSizing = useRef(0);\n    const textareaLineHeight = useRef(0);\n\n    const prevValue = usePrevious(value);\n\n    const inputRef = useRef(null);\n    const typographyRef = useRef(null);\n\n    useEffect(() => {\n      if (!isEditing && value !== prevValue && value !== inputValue) {\n        setInputValue(value);\n      }\n    }, [prevValue, isEditing, value, inputValue]);\n\n    useEffect(() => {\n      setIsEditing(isEditMode);\n    }, [isEditMode]);\n\n    function onTypographyClick(event: React.KeyboardEvent | React.MouseEvent) {\n      onClick?.(event);\n      toggleEditMode(event);\n    }\n\n    function toggleEditMode(event: React.KeyboardEvent | React.MouseEvent) {\n      if (readOnly || isEditing) {\n        return;\n      }\n      event.preventDefault();\n      handleEditModeChange(true);\n    }\n\n    function handleEditModeChange(value: boolean) {\n      onEditModeChange?.(value);\n      setIsEditing(value);\n    }\n\n    function handleInputValueChange() {\n      handleEditModeChange(false);\n\n      if (value === inputValue) {\n        return;\n      }\n\n      const shouldShowPlaceholderWhenEmpty = clearable && placeholder;\n      if (!inputValue && !shouldShowPlaceholderWhenEmpty) {\n        setInputValue(value);\n        return;\n      }\n      setInputValue(inputValue);\n      onChange?.(inputValue);\n    }\n\n    function handleBlur() {\n      handleInputValueChange();\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) {\n      if (event.key === keyCodes.ENTER) {\n        if (multiline && event.shiftKey) {\n          return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n        handleInputValueChange();\n      }\n      if (event.key === keyCodes.ESCAPE) {\n        event.preventDefault();\n        event.stopPropagation();\n        handleEditModeChange(false);\n        setInputValue(value);\n      }\n    }\n\n    function handleChange(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {\n      setInputValue(event.target.value);\n\n      if (multiline) {\n        resizeTextarea();\n      }\n    }\n\n    const toggleKeyboardEditMode = useKeyboardButtonPressedFunc(toggleEditMode);\n\n    function focus() {\n      inputRef.current?.focus?.();\n\n      if (inputRef.current) {\n        const inputElement = inputRef.current as HTMLInputElement | HTMLTextAreaElement;\n        const textLength = inputElement.value.length;\n        inputElement.setSelectionRange(textLength, textLength);\n      }\n\n      if (multiline) {\n        calculateTextareaHeightAttrs();\n      }\n    }\n\n    /* Dynamically resizes the textarea to fit its content */\n    function resizeTextarea() {\n      if (inputRef.current) {\n        // Temporarily set the height to \"auto\" to accurately measure the scroll height of the content inside the textarea.\n        setInputHeight(\"auto\");\n\n        requestAnimationFrame(() => {\n          const textarea = inputRef.current as HTMLTextAreaElement;\n\n          if (!textarea) {\n            return;\n          }\n\n          // Ensure we at least have 1 line\n          setInputHeight(\n            Math.max(\n              textarea.scrollHeight + textareaBorderBoxSizing.current,\n              textareaLineHeight.current + textareaBorderBoxSizing.current\n            )\n          );\n        });\n      }\n    }\n\n    function selectAllInputText() {\n      inputRef.current?.select?.();\n    }\n\n    useEffect(() => {\n      if (!isEditing) return;\n      focus();\n      if (autoSelectTextOnEditMode) {\n        selectAllInputText();\n      }\n    }, [autoSelectTextOnEditMode, isEditing]);\n\n    useEffect(() => {\n      if (!typographyRef.current) {\n        return;\n      }\n\n      const { width } = typographyRef.current.getBoundingClientRect();\n      setInputWidth(width);\n    }, [inputValue, isEditing]);\n\n    /* Calculate the minimual textarea height, taking its applied styles (padding, border width) into consideration \n       This is done only on focus, so that we don't need to get the computed style every time.\n    */\n    function calculateTextareaHeightAttrs() {\n      if (multiline && inputRef.current) {\n        const textarea = inputRef.current as HTMLTextAreaElement;\n\n        if (!textarea) {\n          return;\n        }\n\n        const computedStyle = window.getComputedStyle(textarea);\n\n        // Calculate the appropriate height by taking into account the scrollable content inside the textarea,\n        // as well as the styles applied to it, such as padding and border widths.\n        const lineHeight = parseFloat(computedStyle.lineHeight) || 16;\n        const paddingTop = parseFloat(computedStyle.paddingTop) || 0;\n        const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;\n        const borderTopWidth = parseFloat(computedStyle.borderTopWidth) || 0;\n        const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;\n\n        textareaLineHeight.current = lineHeight;\n        textareaBorderBoxSizing.current = paddingTop + paddingBottom + borderTopWidth + borderBottomWidth;\n        resizeTextarea();\n      }\n    }\n\n    return (\n      <div\n        ref={mergedRef}\n        id={id}\n        aria-label={ariaLabel}\n        data-testid={dataTestId}\n        className={cx(styles.editableTypography, className)}\n        role={isEditing ? null : \"button\"}\n        onClick={onTypographyClick}\n        onKeyDown={toggleKeyboardEditMode}\n      >\n        {isEditing &&\n          (multiline ? (\n            <textarea\n              ref={inputRef}\n              className={cx(styles.textarea, typographyClassName)}\n              value={inputValue}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onBlur={handleBlur}\n              aria-label={ariaLabel}\n              placeholder={placeholder}\n              style={{ width: inputWidth, height: inputHeight }}\n              role=\"textbox\"\n              rows={1}\n            />\n          ) : (\n            <input\n              ref={inputRef}\n              className={cx(styles.input, typographyClassName)}\n              value={inputValue}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onBlur={handleBlur}\n              aria-label={ariaLabel}\n              placeholder={placeholder}\n              style={{ width: inputWidth }}\n              role=\"input\"\n            />\n          ))}\n        <TypographyComponent\n          ref={typographyRef}\n          aria-hidden={isEditing}\n          className={cx(styles.typography, typographyClassName, {\n            [styles.hidden]: isEditing,\n            [styles.disabled]: readOnly,\n            [styles.placeholder]: !inputValue && placeholder,\n            [styles.multiline]: !isEditing && multiline\n          })}\n          tabIndex={0}\n          tooltipProps={tooltipProps}\n          weight={weight}\n          type={type}\n          ellipsis={!multiline}\n        >\n          {inputValue || placeholder}\n        </TypographyComponent>\n      </div>\n    );\n  }\n);\n\nexport default EditableTypography;\n"],"names":["EditableTypography","forwardRef","_ref","ref","id","className","dataTestId","value","onChange","onClick","_ref$readOnly","readOnly","_ref$ariaLabel","ariaLabel","placeholder","clearable","typographyClassName","TypographyComponent","component","isEditMode","autoSelectTextOnEditMode","onEditModeChange","tooltipProps","type","weight","_ref$multiline","multiline","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isEditing","setIsEditing","_useState3","_useState4","inputValue","setInputValue","_useState5","_useState6","inputWidth","setInputWidth","_useState7","_useState8","inputHeight","setInputHeight","textareaBorderBoxSizing","textareaLineHeight","prevValue","usePrevious","inputRef","typographyRef","toggleEditMode","event","preventDefault","handleEditModeChange","handleInputValueChange","handleBlur","handleKeyDown","key","keyCodes","ENTER","shiftKey","stopPropagation","ESCAPE","handleChange","target","resizeTextarea","useEffect","toggleKeyboardEditMode","useKeyboardButtonPressedFunc","focus","_b","current","_a","inputElement","textLength","length","setSelectionRange","textarea","computedStyle","window","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth","calculateTextareaHeightAttrs","requestAnimationFrame","Math","max","scrollHeight","select","_typographyRef$curren","getBoundingClientRect","width","React","createElement","cx","styles","editableTypography","role","onKeyDown","onBlur","style","height","rows","input","typography","_defineProperty","hidden","disabled","tabIndex","ellipsis"],"mappings":"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"}

package/dist/src/components/EditableTypography/EditableTypography.module.scss.js

@@ -1,2 +1,2 @@
-var e={editableTypography:"editableTypography_fd533ed4b4",input:"input_1319196700",textarea:"textarea_adf116ac75",typography:"typography_057ee5fa59",disabled:"disabled_e1050254a9",hidden:"hidden_322339211d",placeholder:"placeholder_5b87804f19",multiline:"multiline_0cfdb1d3a0"};!function(e){const a="s_id-be4dbaebdbfd_3_12_3";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+a))return;const n=document.createElement("style");n.id=a,d.firstChild?d.insertBefore(n,d.firstChild):d.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=e)}(".editableTypography_fd533ed4b4 {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n  margin-left: -6px;\n  overflow: hidden;\n  position: relative;\n}\n.editableTypography_fd533ed4b4 .input_1319196700,\n.editableTypography_fd533ed4b4 .textarea_adf116ac75 {\n  width: var(--input-width);\n  display: inline-block;\n  max-width: 100%;\n  min-width: 64px;\n  padding: 0 var(--spacing-xs);\n  outline: none;\n  border: 1px solid var(--primary-color);\n  border-radius: var(--border-radius-small);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.editableTypography_fd533ed4b4 .input_1319196700:focus, .editableTypography_fd533ed4b4 .input_1319196700:active,\n.editableTypography_fd533ed4b4 .textarea_adf116ac75:focus,\n.editableTypography_fd533ed4b4 .textarea_adf116ac75:active {\n  outline: none;\n}\n.editableTypography_fd533ed4b4 .textarea_adf116ac75 {\n  resize: none;\n  height: var(--input-height);\n}\n.editableTypography_fd533ed4b4 .typography_057ee5fa59 {\n  border: 1px solid transparent;\n  padding: 0 var(--spacing-xs);\n  border-radius: var(--border-radius-small);\n}\n.editableTypography_fd533ed4b4 .typography_057ee5fa59:hover:not(.disabled_e1050254a9) {\n  border-color: var(--ui-border-color);\n}\n.editableTypography_fd533ed4b4 .typography_057ee5fa59.hidden_322339211d {\n  position: absolute;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.editableTypography_fd533ed4b4 .typography_057ee5fa59.placeholder_5b87804f19 {\n  color: var(--secondary-text-color);\n}\n.editableTypography_fd533ed4b4 .typography_057ee5fa59.multiline_0cfdb1d3a0 {\n  white-space: pre-wrap;\n}");export{e as default};
+var e={editableTypography:"editableTypography_fd533ed4b4",input:"input_1319196700",textarea:"textarea_830f6de23b",typography:"typography_057ee5fa59",disabled:"disabled_e1050254a9",hidden:"hidden_322339211d",placeholder:"placeholder_5b87804f19",multiline:"multiline_0cfdb1d3a0"};!function(e){const d="s_id-ae5d3ede7a9c_3_12_3";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+d))return;const n=document.createElement("style");n.id=d,a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[d]=e)}(".editableTypography_fd533ed4b4 {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n  margin-left: -6px;\n  overflow: hidden;\n  position: relative;\n}\n.editableTypography_fd533ed4b4 .input_1319196700, .editableTypography_fd533ed4b4 .textarea_830f6de23b {\n  display: inline-block;\n  max-width: 100%;\n  min-width: 64px;\n  padding: 0 var(--spacing-xs);\n  outline: none;\n  border: 1px solid var(--primary-color);\n  border-radius: var(--border-radius-small);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.editableTypography_fd533ed4b4 .input_1319196700:focus, .editableTypography_fd533ed4b4 .input_1319196700:active, .editableTypography_fd533ed4b4 .textarea_830f6de23b:focus, .editableTypography_fd533ed4b4 .textarea_830f6de23b:active {\n  outline: none;\n}\n.editableTypography_fd533ed4b4 .textarea_830f6de23b {\n  resize: none;\n}\n.editableTypography_fd533ed4b4 .typography_057ee5fa59 {\n  border: 1px solid transparent;\n  padding: 0 var(--spacing-xs);\n  border-radius: var(--border-radius-small);\n}\n.editableTypography_fd533ed4b4 .typography_057ee5fa59:hover:not(.disabled_e1050254a9) {\n  border-color: var(--ui-border-color);\n}\n.editableTypography_fd533ed4b4 .typography_057ee5fa59.hidden_322339211d {\n  position: absolute;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.editableTypography_fd533ed4b4 .typography_057ee5fa59.placeholder_5b87804f19 {\n  color: var(--secondary-text-color);\n}\n.editableTypography_fd533ed4b4 .typography_057ee5fa59.multiline_0cfdb1d3a0 {\n  white-space: pre-wrap;\n}");export{e as default};
 //# sourceMappingURL=EditableTypography.module.scss.js.map

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

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import r,{forwardRef as o,useRef as a,useState as i,useCallback as s,useMemo as n}from"react";import l from"classnames";import{RemoveScroll as m}from"react-remove-scroll";import d from"react-focus-lock";import{AnimatePresence as c,motion as u}from"framer-motion";import{getTestId as f}from"../../../tests/testIds.js";import{ComponentDefaultTestId as p}from"../../../tests/constants.js";import y from"./Modal.module.scss.js";import v from"../ModalTopActions/ModalTopActions.js";import{getStyle as j}from"../../../helpers/typesciptCssModulesHelper.js";import{camelCase as E}from"lodash-es";import{ModalProvider as A}from"../context/ModalContext.js";import{keyCodes as b}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{modalAnimationAnchorPopVariants as h,modalAnimationCenterPopVariants as x,modalAnimationOverlayVariants as M}from"../utils/animationVariants.js";import{createPortal as T}from"react-dom";import g from"../hooks/usePortalTarget/usePortalTarget.js";import P from"../../LayerProvider/LayerProvider.js";import C from"../../../hooks/useMergeRef.js";var L=d.default||d,k=o((function(o,d){var k=o.id,I=o.show,z=o.size,N=void 0===z?"medium":z,O=o.renderHeaderAction,_=o.closeButtonTheme,w=o.closeButtonAriaLabel,B=o.onClose,D=void 0===B?function(){}:B,H=o.anchorElementRef,R=o.alertModal,F=o.container,V=void 0===F?document.body:F,X=o.children,K=o.style,S=o.zIndex,Y=o.className,q=o["data-testid"],G=g(V),J=a(null),Q=C(d,J),U=a(null),W=i(),Z=e(W,2),$=Z[0],ee=Z[1],te=i(),re=e(te,2),oe=re[0],ae=re[1],ie=s((function(e){return ee(e)}),[]),se=s((function(e){return ae(e)}),[]),ne=n((function(){return{modalId:k,setTitleId:ie,setDescriptionId:se}}),[k,ie,se]),le=s((function(e){I&&!R&&D(e)}),[I,R,D]),me=s((function(e){e.key===b.ESCAPE&&I&&!R&&D(e)}),[R,D,I]),de=(null==H?void 0:H.current)?h:x,ce=S?{"--monday-modal-z-index":S}:{},ue=Object.assign(Object.assign({},ce),K);return r.createElement(c,null,I&&r.createElement(P,{layerRef:U},r.createElement(A,{value:ne},T(r.createElement(r.Fragment,null,r.createElement(u.div,{ref:U,variants:M,initial:"initial",animate:"enter",exit:"exit","data-testid":f(p.MODAL_NEXT_OVERLAY,k),className:y.overlay,onClick:le,"aria-hidden":!0,style:ce}),r.createElement(L,{returnFocus:!0},r.createElement(m,{forwardProps:!0,ref:Q},r.createElement(u.div,{variants:de,initial:"exit",animate:"enter",exit:"exit",custom:H,className:l(y.modal,j(y,E("size-"+N)),t({},y.withHeaderAction,!!O),Y),id:k,"data-testid":q||f(p.MODAL_NEXT,k),role:"dialog","aria-modal":!0,"aria-labelledby":$,"aria-describedby":oe,style:ue,onKeyDown:me,tabIndex:-1},X,r.createElement(v,{renderAction:O,theme:_,closeButtonAriaLabel:w,onClose:D}))))),G))))}));export{k as default};
+import{slicedToArray as e,defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as r,useRef as a,useState as i,useCallback as s,useMemo as n}from"react";import l from"classnames";import{RemoveScroll as m}from"react-remove-scroll";import d from"react-focus-lock";import{AnimatePresence as c,motion as f}from"framer-motion";import{getTestId as u}from"../../../tests/testIds.js";import{ComponentDefaultTestId as p}from"../../../tests/constants.js";import y from"./Modal.module.scss.js";import v from"../ModalTopActions/ModalTopActions.js";import{getStyle as E}from"../../../helpers/typesciptCssModulesHelper.js";import{camelCase as b}from"lodash-es";import{ModalProvider as j}from"../context/ModalContext.js";import{keyCodes as A}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{modalAnimationAnchorPopVariants as h,modalAnimationCenterPopVariants as x,modalAnimationOverlayVariants as M}from"../utils/animationVariants.js";import{createPortal as T}from"react-dom";import P from"../hooks/usePortalTarget/usePortalTarget.js";import C from"../../LayerProvider/LayerProvider.js";import L from"../../../hooks/useMergeRef.js";var k=d.default||d,I=r((function(r,d){var I=r.id,N=r.show,g=r.size,z=void 0===g?"medium":g,_=r.renderHeaderAction,w=r.closeButtonTheme,B=r.closeButtonAriaLabel,D=r.onClose,H=void 0===D?function(){}:D,R=r.anchorElementRef,O=r.alertModal,V=r.container,X=void 0===V?document.body:V,F=r.children,K=r.style,S=r.zIndex,Y=r.className,q=r["data-testid"],G=r["aria-labelledby"],J=r["aria-describedby"],Q=P(X),U=a(null),W=L(d,U),Z=a(null),$=i(),ee=e($,2),te=ee[0],oe=ee[1],re=i(),ae=e(re,2),ie=ae[0],se=ae[1],ne=s((function(e){G||oe(e)}),[G]),le=s((function(e){J||se(e)}),[J]),me=n((function(){return{modalId:I,setTitleId:ne,setDescriptionId:le}}),[I,ne,le]),de=s((function(e){N&&!O&&H(e)}),[N,O,H]),ce=s((function(e){e.key===A.ESCAPE&&N&&!O&&H(e)}),[O,H,N]),fe=(null==R?void 0:R.current)?h:x;return o.createElement(c,null,N&&o.createElement(C,{layerRef:Z},o.createElement(j,{value:me},T(o.createElement(k,{returnFocus:!0},o.createElement("div",{ref:Z,className:y.container,style:S?{"--monday-modal-z-index":S}:{}},o.createElement(f.div,{variants:M,initial:"initial",animate:"enter",exit:"exit","data-testid":u(p.MODAL_NEXT_OVERLAY,I),className:y.overlay,onClick:de,"aria-hidden":!0}),o.createElement(m,{forwardProps:!0,ref:W},o.createElement(f.div,{variants:fe,initial:"exit",animate:"enter",exit:"exit",custom:R,className:l(y.modal,E(y,b("size-"+z)),t({},y.withHeaderAction,!!_),Y),id:I,"data-testid":q||u(p.MODAL_NEXT,I),role:"dialog","aria-modal":!0,"aria-labelledby":G||te,"aria-describedby":J||ie,style:K,onKeyDown:ce,tabIndex:-1},F,o.createElement(v,{renderAction:_,theme:w,closeButtonAriaLabel:B,onClose:H}))))),Q))))}));export{I as default};
 //# sourceMappingURL=Modal.js.map

package/dist/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 } from \"../../../tests/constants\";\nimport styles from \"./Modal.module.scss\";\nimport { ModalProps } from \"./Modal.types\";\nimport ModalTopActions from \"../ModalTopActions/ModalTopActions\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"lodash-es\";\nimport { ModalProvider } from \"../context/ModalContext\";\nimport { ModalProviderValue } from \"../context/ModalContext.types\";\nimport { keyCodes } from \"../../../constants\";\nimport {\n  modalAnimationAnchorPopVariants,\n  modalAnimationCenterPopVariants,\n  modalAnimationOverlayVariants\n} from \"../utils/animationVariants\";\nimport { createPortal } from \"react-dom\";\nimport usePortalTarget from \"../hooks/usePortalTarget/usePortalTarget\";\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      anchorElementRef,\n      alertModal,\n      container = document.body,\n      children,\n      style,\n      zIndex,\n      className,\n      \"data-testid\": dataTestId\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 overlayRef = useRef<HTMLDivElement>(null);\n\n    const [titleId, setTitleId] = useState<string>();\n    const [descriptionId, setDescriptionId] = useState<string>();\n\n    const setTitleIdCallback = useCallback((id: string) => setTitleId(id), []);\n    const setDescriptionIdCallback = useCallback((id: string) => setDescriptionId(id), []);\n\n    const contextValue = useMemo<ModalProviderValue>(\n      () => ({\n        modalId: id,\n        setTitleId: setTitleIdCallback,\n        setDescriptionId: setDescriptionIdCallback\n      }),\n      [id, setTitleIdCallback, setDescriptionIdCallback]\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 = anchorElementRef?.current\n      ? modalAnimationAnchorPopVariants\n      : modalAnimationCenterPopVariants;\n\n    const zIndexStyle = zIndex ? ({ \"--monday-modal-z-index\": zIndex } as React.CSSProperties) : {};\n    const modalStyle = { ...zIndexStyle, ...style };\n\n    return (\n      <AnimatePresence>\n        {show && (\n          <LayerProvider layerRef={overlayRef}>\n            <ModalProvider value={contextValue}>\n              {createPortal(\n                <>\n                  <motion.div\n                    ref={overlayRef}\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                    style={zIndexStyle}\n                  />\n                  <FocusLockComponent returnFocus>\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                        role=\"dialog\"\n                        aria-modal\n                        aria-labelledby={titleId}\n                        aria-describedby={descriptionId}\n                        style={modalStyle}\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                  </FocusLockComponent>\n                </>,\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","anchorElementRef","alertModal","_ref$container","container","document","body","children","style","zIndex","className","dataTestId","portalTargetElement","usePortalTarget","modalRef","useRef","modalMergedRef","useMergeRef","overlayRef","_useState","useState","_useState2","_slicedToArray","titleId","setTitleId","_useState3","_useState4","descriptionId","setDescriptionId","setTitleIdCallback","useCallback","setDescriptionIdCallback","contextValue","useMemo","modalId","onBackdropClick","e","onModalKeyDown","key","keyCodes","ESCAPE","modalAnimationVariants","current","modalAnimationAnchorPopVariants","modalAnimationCenterPopVariants","zIndexStyle","modalStyle","Object","assign","React","createElement","AnimatePresence","LayerProvider","layerRef","ModalProvider","value","createPortal","Fragment","motion","div","variants","modalAnimationOverlayVariants","initial","animate","exit","getTestId","ComponentDefaultTestId","MODAL_NEXT_OVERLAY","styles","overlay","onClick","returnFocus","RemoveScroll","forwardProps","custom","cx","modal","getStyle","camelCase","_defineProperty","withHeaderAction","MODAL_NEXT","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 } from \"../../../tests/constants\";\nimport styles from \"./Modal.module.scss\";\nimport { ModalProps } from \"./Modal.types\";\nimport ModalTopActions from \"../ModalTopActions/ModalTopActions\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"lodash-es\";\nimport { ModalProvider } from \"../context/ModalContext\";\nimport { ModalProviderValue } from \"../context/ModalContext.types\";\nimport { keyCodes } from \"../../../constants\";\nimport {\n  modalAnimationAnchorPopVariants,\n  modalAnimationCenterPopVariants,\n  modalAnimationOverlayVariants\n} from \"../utils/animationVariants\";\nimport { createPortal } from \"react-dom\";\nimport usePortalTarget from \"../hooks/usePortalTarget/usePortalTarget\";\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      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      }),\n      [id, setTitleIdCallback, setDescriptionIdCallback]\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 = anchorElementRef?.current\n      ? modalAnimationAnchorPopVariants\n      : modalAnimationCenterPopVariants;\n\n    const zIndexStyle = zIndex ? ({ \"--monday-modal-z-index\": zIndex } as React.CSSProperties) : {};\n    // useEffect(() => {\n    //   containerRef.current?.style?.setProperty(\"--monday-modal-z-index\", zIndex?.toString() || \"\");\n    // }, [zIndex, containerRef]);\n\n    return (\n      <AnimatePresence>\n        {show && (\n          <LayerProvider layerRef={containerRef}>\n            <ModalProvider value={contextValue}>\n              {createPortal(\n                <FocusLockComponent returnFocus>\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                        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","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","current","modalAnimationAnchorPopVariants","modalAnimationCenterPopVariants","React","createElement","AnimatePresence","LayerProvider","layerRef","ModalProvider","value","createPortal","returnFocus","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","role","onKeyDown","tabIndex","ModalTopActions","renderAction","theme"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e={overlay:"overlay_83ea55e45c",modal:"modal_784f2e601b",withHeaderAction:"withHeaderAction_f922970f4c",sizeSmall:"sizeSmall_a4631e51b4",sizeMedium:"sizeMedium_c7de491ed2",sizeLarge:"sizeLarge_3fcd9b2216"};!function(e){const n="s_id-c4e9eb1452e8_3_12_3";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+n))return;const d=document.createElement("style");d.id=n,a.firstChild?a.insertBefore(d,a.firstChild):a.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".overlay_83ea55e45c {\n  position: fixed;\n  inset: 0;\n  background-color: var(--color-surface);\n  z-index: var(--monday-modal-z-index, 10000);\n}\n\n.modal_784f2e601b {\n  --top-actions-spacing: var(--spacing-large);\n  --top-actions-width: var(--spacing-xl);\n  --modal-inline-padding: var(--spacing-xl);\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: var(--monday-modal-z-index, 10000);\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}\n\n.modal_784f2e601b.withHeaderAction_f922970f4c {\n  --top-actions-width: calc(var(--spacing-xl) * 2);\n}\n\n.modal_784f2e601b.sizeSmall_a4631e51b4 {\n  --modal-max-height: 50%;\n  --modal-width: 480px;\n}\n\n.modal_784f2e601b.sizeMedium_c7de491ed2 {\n  --modal-max-height: 80%;\n  --modal-width: 580px;\n}\n\n.modal_784f2e601b.sizeLarge_3fcd9b2216 {\n  --modal-max-height: 80%;\n  --modal-width: 840px;\n}");export{e as default};
+var e={container:"container_0eeb874de2",overlay:"overlay_35fe3c3b9d",modal:"modal_1fb77c68c5",withHeaderAction:"withHeaderAction_f922970f4c",sizeSmall:"sizeSmall_a4631e51b4",sizeMedium:"sizeMedium_c7de491ed2",sizeLarge:"sizeLarge_3fcd9b2216"};!function(e){const n="s_id-67c47d259b33_3_12_3";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".container_0eeb874de2 {\n  position: fixed;\n  inset: 0;\n  z-index: var(--monday-modal-z-index, 10000);\n}\n.container_0eeb874de2 .overlay_35fe3c3b9d {\n  position: fixed;\n  inset: 0;\n  height: 100%;\n  background-color: var(--color-surface);\n}\n.container_0eeb874de2 .modal_1fb77c68c5 {\n  --top-actions-spacing: 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}\n.container_0eeb874de2 .modal_1fb77c68c5.withHeaderAction_f922970f4c {\n  --top-actions-width: calc(var(--spacing-xl) * 2);\n}\n.container_0eeb874de2 .modal_1fb77c68c5.sizeSmall_a4631e51b4 {\n  --modal-max-height: 50%;\n  --modal-width: 480px;\n}\n.container_0eeb874de2 .modal_1fb77c68c5.sizeMedium_c7de491ed2 {\n  --modal-max-height: 80%;\n  --modal-width: 580px;\n}\n.container_0eeb874de2 .modal_1fb77c68c5.sizeLarge_3fcd9b2216 {\n  --modal-max-height: 80%;\n  --modal-width: 840px;\n}");export{e as default};
 //# sourceMappingURL=Modal.module.scss.js.map

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

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

package/dist/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 { ModalHeaderProps } from \"./ModalHeader.types\";\nimport Flex from \"../../Flex/Flex\";\nimport Heading from \"../../Heading/Heading\";\nimport Text from \"../../Text/Text\";\nimport Icon from \"../../Icon/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        <Heading id={titleId} align=\"inherit\" type=\"h2\" weight=\"medium\" maxLines={2} className={styles.title}>\n          {title}\n        </Heading>\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","createElement","Heading","type","weight","maxLines","Icon","icon","_typeof","name","Text","element"],"mappings":"qgBAYMA,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,IAE/EW,EAAAW,cAACC,EAAO,CAACvB,GAAIO,EAASQ,MAAM,UAAUS,KAAK,KAAKC,OAAO,SAASC,SAAU,EAAG3B,UAAWkB,EAAOrB,OAC5FA,GAEFC,GACCc,EAAAW,cAACV,EAAK,CAAAZ,GAAIS,GACPX,GACCa,EAAAW,cAACK,EACC,CAAAC,KAAiC,WAA3BC,EAAO/B,GAA+BA,EAAgBgC,KAAOhC,EACnEC,UAAWiB,EAAGC,EAAOnB,gBAA4C,WAA3B+B,EAAO/B,IAAgCA,EAAgBC,aAGzE,iBAAhBF,EACNc,EAACW,cAAAS,GAAKC,QAAQ,OAAOjB,MAAM,UAAUS,KAAK,SACvC3B,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 { ModalHeaderProps } from \"./ModalHeader.types\";\nimport Flex from \"../../Flex/Flex\";\nimport Heading from \"../../Heading/Heading\";\nimport Text from \"../../Text/Text\";\nimport Icon from \"../../Icon/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":"qgBAYMA,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibe/core",
-  "version": "3.13.0-alpha-b02ef.0",
+  "version": "3.13.0-alpha-4ba3f.0",
   "description": "Official monday.com UI resources for application development in React.js",
   "repository": {
     "type": "git",
@@ -268,5 +268,5 @@
   "browserslist": [
     "extends browserslist-config-monday"
   ],
-  "gitHead": "62e013ce884f8cc4a2c6ddfdd9e3cc76c437fcfd"
+  "gitHead": "85cfc8eaaab0dc5da6c61722035c56d19c12fa56"
 }