@frontify/fondue 12.0.0-beta.2 → 12.0.0-beta.4

package/dist/components/RichTextEditor/RichTextEditor.es.js

@@ -1,11 +1,11 @@
-import i, { useEffect as y, useCallback as I } from "react";
-import { Plate as V } from "@udecode/plate";
-import { useMemoizedId as W } from "../../hooks/useMemoizedId.es.js";
-import { debounce as v } from "../../utilities/debounce.es.js";
-import { Toolbar as z } from "./components/Toolbar/Toolbar.es.js";
-import { RichTextEditorContext as G } from "./context/RichTextEditorContext.es.js";
-import { useEditorState as L } from "./hooks/useEditorState.es.js";
-import { useEditorResize as M } from "./hooks/useEditorResize.es.js";
+import i, { useEffect as _, useCallback as v } from "react";
+import { Plate as x } from "@udecode/plate";
+import { useMemoizedId as I } from "../../hooks/useMemoizedId.es.js";
+import { debounce as V } from "../../utilities/debounce.es.js";
+import { Toolbar as W } from "./components/Toolbar/Toolbar.es.js";
+import { RichTextEditorContext as w } from "./context/RichTextEditorContext.es.js";
+import { useEditorState as z } from "./hooks/useEditorState.es.js";
+import { useEditorResize as D } from "./hooks/useEditorResize.es.js";
 import "../../foundation/Icon/Generated/IconAdobeCreativeCloud.es.js";
 import "../../foundation/Icon/Generated/IconAdobeCreativeCloud12.es.js";
 import "../../foundation/Icon/Generated/IconAdobeCreativeCloud16.es.js";
@@ -1644,63 +1644,67 @@ import "../../foundation/Icon/Generated/IconWorkflowShapes24.es.js";
 import "../../foundation/Icon/Generated/IconWorkflowShapes32.es.js";
 import "../../foundation/Icon/IconsMap.es.js";
 import { TextStyles as u } from "./utils/textStyles.es.js";
-import { PaddingSizes as T } from "./types.es.js";
-import { defaultActions as w } from "./utils/actions.es.js";
+import { PaddingSizes as G } from "./types.es.js";
+import { defaultActions as L } from "./utils/actions.es.js";
 import "slate";
-import { ON_SAVE_DELAY_IN_MS as D } from "./utils/constants.es.js";
+import { ON_SAVE_DELAY_IN_MS as M } from "./utils/constants.es.js";
 import { defaultDesignTokens as E } from "./utils/defaultDesignTokens.es.js";
 import { parseRawValue as J } from "./utils/parseRawValue.es.js";
 import { EditorPositioningWrapper as j } from "./EditorPositioningWrapper/index.es.js";
 import { getEditorConfig as F } from "./utils/editorConfig.es.js";
 import "./EditorActions/Plugins/index.es.js";
 import { GeneratePlugins as H } from "./EditorActions/GeneratePlugins.es.js";
+import { forceTabOutOfActiveElement as K } from "./helper.es.js";
 import { Position as Y } from "./EditorPositioningWrapper/types.es.js";
-const WV = ({
+const Wx = ({
   id: P,
   value: g,
-  placeholder: N = "",
-  readonly: R = !1,
-  clear: b = !1,
-  designTokens: o = E,
-  actions: n = w,
-  onTextChange: a,
-  onBlur: f,
-  padding: A = T.None,
-  position: O = Y.FLOATING,
+  placeholder: b = "",
+  readonly: N = !1,
+  clear: O = !1,
+  designTokens: t = E,
+  actions: n = L,
+  onTextChange: f,
+  onBlur: a,
+  padding: A = G.None,
+  position: R = Y.FLOATING,
   plugins: c
 }) => {
-  const r = W(P), { localValue: m } = L(r, b), { editorRef: S, editorWidth: l } = M(), h = {
-    placeholder: N,
-    readOnly: R,
-    onBlur: () => f && f(JSON.stringify(m.current)),
-    className: A
+  const r = I(P), { localValue: m } = z(r, O), { editorRef: S, editorWidth: l } = D(), h = {
+    placeholder: b,
+    readOnly: N,
+    onBlur: () => a && a(JSON.stringify(m.current)),
+    className: A,
+    onKeyDown: (o) => {
+      o.code === "Tab" && K();
+    }
   };
-  y(() => {
-    for (const t of Object.values(u).filter((x) => x !== u.ELEMENT_PARAGRAPH))
-      o[t] || (o[t] = E[t]);
-  }, [o]);
-  const s = v((t) => {
-    a && a(JSON.stringify(t));
-  }, D), C = I((t) => {
-    s(t), m.current = t;
-  }, [s, m]), d = j[O], p = H(r, c), e = p && n.length === 0 && c, _ = e ? p.create() : F();
-  return /* @__PURE__ */ i.createElement(G.Provider, {
-    value: { designTokens: o, PositioningWrapper: d }
+  _(() => {
+    for (const o of Object.values(u).filter((T) => T !== u.ELEMENT_PARAGRAPH))
+      t[o] || (t[o] = E[o]);
+  }, [t]);
+  const s = V((o) => {
+    f && f(JSON.stringify(o));
+  }, M), y = v((o) => {
+    s(o), m.current = o;
+  }, [s, m]), d = j[R], p = H(r, c), e = p && n.length === 0 && c, C = e ? p.create() : F();
+  return /* @__PURE__ */ i.createElement(w.Provider, {
+    value: { designTokens: t, PositioningWrapper: d }
   }, /* @__PURE__ */ i.createElement(d.PlateWrapper, {
     ref: S
-  }, /* @__PURE__ */ i.createElement(V, {
+  }, /* @__PURE__ */ i.createElement(x, {
     id: r,
     initialValue: J(g),
-    onChange: C,
+    onChange: y,
     editableProps: h,
-    plugins: _
-  }, e && p.toolbar(l), !e && /* @__PURE__ */ i.createElement(z, {
+    plugins: C
+  }, e && p.toolbar(l), !e && /* @__PURE__ */ i.createElement(W, {
     editorId: r,
     actions: n,
     editorWidth: l
   }))));
 };
 export {
-  WV as RichTextEditor
+  Wx as RichTextEditor
 };
 //# sourceMappingURL=RichTextEditor.es.js.map

package/dist/components/RichTextEditor/RichTextEditor.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.es.js","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, useCallback, useEffect } from 'react';\nimport { Plate, TNode } from '@udecode/plate';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { debounce } from '@utilities/debounce';\nimport { EditableProps } from 'slate-react/dist/components/editable';\nimport { Toolbar } from './components/Toolbar/Toolbar';\nimport { RichTextEditorContext } from './context/RichTextEditorContext';\nimport { useEditorResize, useEditorState } from './hooks';\nimport { DesignTokens, PaddingSizes } from './types';\nimport { EditorActions, defaultActions } from './utils/actions';\nimport { ON_SAVE_DELAY_IN_MS } from './utils';\nimport { defaultDesignTokens } from './utils/defaultDesignTokens';\nimport { parseRawValue } from './utils/parseRawValue';\nimport { TextStyles } from './utils/textStyles';\nimport { EditorPositioningWrapper } from './EditorPositioningWrapper';\nimport { Position } from './EditorPositioningWrapper';\nimport { getEditorConfig } from './utils/editorConfig';\nimport { GeneratePlugins, PluginComposer } from './EditorActions';\n\nexport type RichTextEditorProps = {\n    id?: string;\n    placeholder?: string;\n    value?: string;\n    onTextChange?: (value: string) => void;\n    onBlur?: (value: string) => void;\n    readonly?: boolean;\n    clear?: boolean;\n    designTokens?: DesignTokens;\n    actions?: EditorActions[][];\n    padding?: PaddingSizes;\n    position?: Position;\n    plugins?: PluginComposer;\n};\n\nexport const RichTextEditor: FC<RichTextEditorProps> = ({\n    id,\n    value: initialValue,\n    placeholder = '',\n    readonly = false,\n    clear = false,\n    designTokens = defaultDesignTokens,\n    actions = defaultActions,\n    onTextChange,\n    onBlur,\n    padding = PaddingSizes.None,\n    position = Position.FLOATING,\n    plugins,\n}) => {\n    const editorId = useMemoizedId(id);\n    const { localValue } = useEditorState(editorId, clear);\n    const { editorRef, editorWidth } = useEditorResize();\n\n    const editableProps: EditableProps = {\n        placeholder,\n        readOnly: readonly,\n        onBlur: () => onBlur && onBlur(JSON.stringify(localValue.current)),\n        className: padding,\n    };\n\n    useEffect(() => {\n        for (const element of Object.values(TextStyles).filter(\n            (textStyle) => textStyle !== TextStyles.ELEMENT_PARAGRAPH,\n        )) {\n            if (!designTokens[element]) {\n                designTokens[element] = defaultDesignTokens[element];\n            }\n        }\n    }, [designTokens]);\n\n    const debouncedOnChange = debounce((value: TNode[]) => {\n        onTextChange && onTextChange(JSON.stringify(value));\n    }, ON_SAVE_DELAY_IN_MS);\n\n    const onChange = useCallback(\n        (value) => {\n            debouncedOnChange(value);\n            localValue.current = value;\n        },\n        [debouncedOnChange, localValue],\n    );\n\n    const PositioningWrapper = EditorPositioningWrapper[position];\n\n    const config = GeneratePlugins(editorId, plugins);\n    const isNew = config && actions.length === 0 && plugins;\n    const editorConfig = isNew ? config.create() : getEditorConfig();\n\n    return (\n        <RichTextEditorContext.Provider value={{ designTokens, PositioningWrapper }}>\n            <PositioningWrapper.PlateWrapper ref={editorRef}>\n                <Plate\n                    id={editorId}\n                    initialValue={parseRawValue(initialValue)}\n                    onChange={onChange}\n                    editableProps={editableProps}\n                    plugins={editorConfig}\n                >\n                    {isNew && config.toolbar(editorWidth)}\n                    {!isNew && <Toolbar editorId={editorId} actions={actions} editorWidth={editorWidth} />}\n                </Plate>\n            </PositioningWrapper.PlateWrapper>\n        </RichTextEditorContext.Provider>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCO,MAAM,KAA0C,CAAC;AAAA,EACpD;AAAA,EACA,OAAO;AAAA,EACP,iBAAc;AAAA,EACd,cAAW;AAAA,EACX,WAAQ;AAAA,EACR,kBAAe;AAAA,EACf,aAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,aAAU,EAAa;AAAA,EACvB,cAAW,EAAS;AAAA,EACpB;AAAA,MACE;AACI,QAAA,IAAW,EAAc,CAAE,GAC3B,EAAE,kBAAe,EAAe,GAAU,CAAK,GAC/C,EAAE,cAAW,mBAAgB,EAAgB,GAE7C,IAA+B;AAAA,IACjC;AAAA,IACA,UAAU;AAAA,IACV,QAAQ,MAAM,KAAU,EAAO,KAAK,UAAU,EAAW,OAAO,CAAC;AAAA,IACjE,WAAW;AAAA,EAAA;AAGf,IAAU,MAAM;AACD,eAAA,KAAW,OAAO,OAAO,CAAU,EAAE,OAC5C,CAAC,MAAc,MAAc,EAAW,iBAC5C;AACQ,MAAC,EAAa,MACd,GAAa,KAAW,EAAoB;AAAA,EAEpD,GACD,CAAC,CAAY,CAAC;AAEX,QAAA,IAAoB,EAAS,CAAC,MAAmB;AACnD,SAAgB,EAAa,KAAK,UAAU,CAAK,CAAC;AAAA,KACnD,CAAmB,GAEhB,IAAW,EACb,CAAC,MAAU;AACP,MAAkB,CAAK,GACvB,EAAW,UAAU;AAAA,EAAA,GAEzB,CAAC,GAAmB,CAAU,CAClC,GAEM,IAAqB,EAAyB,IAE9C,IAAS,EAAgB,GAAU,CAAO,GAC1C,IAAQ,KAAU,EAAQ,WAAW,KAAK,GAC1C,IAAe,IAAQ,EAAO,WAAW,EAAgB;AAG3D,SAAA,kBAAA,cAAC,EAAsB,UAAtB;AAAA,IAA+B,OAAO,EAAE,iBAAc,sBAAmB;AAAA,EACtE,GAAA,kBAAA,cAAC,EAAmB,cAAnB;AAAA,IAAgC,KAAK;AAAA,EAAA,GACjC,kBAAA,cAAA,GAAA;AAAA,IACG,IAAI;AAAA,IACJ,cAAc,EAAc,CAAY;AAAA,IACxC;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,GAER,KAAS,EAAO,QAAQ,CAAW,GACnC,CAAC,KAAU,kBAAA,cAAA,GAAA;AAAA,IAAQ;AAAA,IAAoB;AAAA,IAAkB;AAAA,EAAA,CAA0B,CACxF,CACJ,CACJ;AAER;"}
+{"version":3,"file":"RichTextEditor.es.js","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, useCallback, useEffect } from 'react';\nimport { Plate, TNode } from '@udecode/plate';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { debounce } from '@utilities/debounce';\nimport { EditableProps } from 'slate-react/dist/components/editable';\nimport { Toolbar } from './components/Toolbar/Toolbar';\nimport { RichTextEditorContext } from './context/RichTextEditorContext';\nimport { useEditorResize, useEditorState } from './hooks';\nimport { DesignTokens, PaddingSizes } from './types';\nimport { EditorActions, defaultActions } from './utils/actions';\nimport { ON_SAVE_DELAY_IN_MS } from './utils';\nimport { defaultDesignTokens } from './utils/defaultDesignTokens';\nimport { parseRawValue } from './utils/parseRawValue';\nimport { TextStyles } from './utils/textStyles';\nimport { EditorPositioningWrapper } from './EditorPositioningWrapper';\nimport { Position } from './EditorPositioningWrapper';\nimport { getEditorConfig } from './utils/editorConfig';\nimport { GeneratePlugins, PluginComposer } from './EditorActions';\nimport { forceTabOutOfActiveElement } from './helper';\n\nexport type RichTextEditorProps = {\n    id?: string;\n    placeholder?: string;\n    value?: string;\n    onTextChange?: (value: string) => void;\n    onBlur?: (value: string) => void;\n    readonly?: boolean;\n    clear?: boolean;\n    designTokens?: DesignTokens;\n    actions?: EditorActions[][];\n    padding?: PaddingSizes;\n    position?: Position;\n    plugins?: PluginComposer;\n};\n\nexport const RichTextEditor: FC<RichTextEditorProps> = ({\n    id,\n    value: initialValue,\n    placeholder = '',\n    readonly = false,\n    clear = false,\n    designTokens = defaultDesignTokens,\n    actions = defaultActions,\n    onTextChange,\n    onBlur,\n    padding = PaddingSizes.None,\n    position = Position.FLOATING,\n    plugins,\n}) => {\n    const editorId = useMemoizedId(id);\n    const { localValue } = useEditorState(editorId, clear);\n    const { editorRef, editorWidth } = useEditorResize();\n\n    const editableProps: EditableProps = {\n        placeholder,\n        readOnly: readonly,\n        onBlur: () => onBlur && onBlur(JSON.stringify(localValue.current)),\n        className: padding,\n        onKeyDown: (event) => {\n            if (event.code === 'Tab') {\n                // Forcing a blur event because of accessibility\n                forceTabOutOfActiveElement();\n            }\n        },\n    };\n\n    useEffect(() => {\n        for (const element of Object.values(TextStyles).filter(\n            (textStyle) => textStyle !== TextStyles.ELEMENT_PARAGRAPH,\n        )) {\n            if (!designTokens[element]) {\n                designTokens[element] = defaultDesignTokens[element];\n            }\n        }\n    }, [designTokens]);\n\n    const debouncedOnChange = debounce((value: TNode[]) => {\n        onTextChange && onTextChange(JSON.stringify(value));\n    }, ON_SAVE_DELAY_IN_MS);\n\n    const onChange = useCallback(\n        (value) => {\n            debouncedOnChange(value);\n            localValue.current = value;\n        },\n        [debouncedOnChange, localValue],\n    );\n\n    const PositioningWrapper = EditorPositioningWrapper[position];\n\n    const config = GeneratePlugins(editorId, plugins);\n    const isNew = config && actions.length === 0 && plugins;\n    const editorConfig = isNew ? config.create() : getEditorConfig();\n\n    return (\n        <RichTextEditorContext.Provider value={{ designTokens, PositioningWrapper }}>\n            <PositioningWrapper.PlateWrapper ref={editorRef}>\n                <Plate\n                    id={editorId}\n                    initialValue={parseRawValue(initialValue)}\n                    onChange={onChange}\n                    editableProps={editableProps}\n                    plugins={editorConfig}\n                >\n                    {isNew && config.toolbar(editorWidth)}\n                    {!isNew && <Toolbar editorId={editorId} actions={actions} editorWidth={editorWidth} />}\n                </Plate>\n            </PositioningWrapper.PlateWrapper>\n        </RichTextEditorContext.Provider>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCO,MAAM,KAA0C,CAAC;AAAA,EACpD;AAAA,EACA,OAAO;AAAA,EACP,iBAAc;AAAA,EACd,cAAW;AAAA,EACX,WAAQ;AAAA,EACR,kBAAe;AAAA,EACf,aAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,aAAU,EAAa;AAAA,EACvB,cAAW,EAAS;AAAA,EACpB;AAAA,MACE;AACI,QAAA,IAAW,EAAc,CAAE,GAC3B,EAAE,kBAAe,EAAe,GAAU,CAAK,GAC/C,EAAE,cAAW,mBAAgB,EAAgB,GAE7C,IAA+B;AAAA,IACjC;AAAA,IACA,UAAU;AAAA,IACV,QAAQ,MAAM,KAAU,EAAO,KAAK,UAAU,EAAW,OAAO,CAAC;AAAA,IACjE,WAAW;AAAA,IACX,WAAW,CAAC,MAAU;AACd,MAAA,EAAM,SAAS,SAEY;IAEnC;AAAA,EAAA;AAGJ,IAAU,MAAM;AACD,eAAA,KAAW,OAAO,OAAO,CAAU,EAAE,OAC5C,CAAC,MAAc,MAAc,EAAW,iBAC5C;AACQ,MAAC,EAAa,MACd,GAAa,KAAW,EAAoB;AAAA,EAEpD,GACD,CAAC,CAAY,CAAC;AAEX,QAAA,IAAoB,EAAS,CAAC,MAAmB;AACnD,SAAgB,EAAa,KAAK,UAAU,CAAK,CAAC;AAAA,KACnD,CAAmB,GAEhB,IAAW,EACb,CAAC,MAAU;AACP,MAAkB,CAAK,GACvB,EAAW,UAAU;AAAA,EAAA,GAEzB,CAAC,GAAmB,CAAU,CAClC,GAEM,IAAqB,EAAyB,IAE9C,IAAS,EAAgB,GAAU,CAAO,GAC1C,IAAQ,KAAU,EAAQ,WAAW,KAAK,GAC1C,IAAe,IAAQ,EAAO,WAAW,EAAgB;AAG3D,SAAA,kBAAA,cAAC,EAAsB,UAAtB;AAAA,IAA+B,OAAO,EAAE,iBAAc,sBAAmB;AAAA,EACtE,GAAA,kBAAA,cAAC,EAAmB,cAAnB;AAAA,IAAgC,KAAK;AAAA,EAAA,GACjC,kBAAA,cAAA,GAAA;AAAA,IACG,IAAI;AAAA,IACJ,cAAc,EAAc,CAAY;AAAA,IACxC;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,GAER,KAAS,EAAO,QAAQ,CAAW,GACnC,CAAC,KAAU,kBAAA,cAAA,GAAA;AAAA,IAAQ;AAAA,IAAoB;AAAA,IAAkB;AAAA,EAAA,CAA0B,CACxF,CACJ,CACJ;AAER;"}

package/dist/components/RichTextEditor/helper.d.ts

@@ -0,0 +1 @@
+export declare const forceTabOutOfActiveElement: () => void;

package/dist/components/RichTextEditor/helper.es.js

@@ -0,0 +1,8 @@
+const t = () => {
+  var e;
+  (e = document.activeElement) == null || e.blur();
+};
+export {
+  t as forceTabOutOfActiveElement
+};
+//# sourceMappingURL=helper.es.js.map

package/dist/components/RichTextEditor/helper.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.es.js","sources":["../../../src/components/RichTextEditor/helper.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const forceTabOutOfActiveElement = () => {\n    (document.activeElement as HTMLElement)?.blur();\n};\n"],"names":[],"mappings":"AAEO,MAAM,IAA6B,MAAM;AAAzC;AACF,gBAAS,kBAAT,UAAwC;AAC7C;"}

package/dist/components/Switch/Switch.es.js

@@ -1,57 +1,74 @@
-import r, { useMemo as o } from "react";
+import r, { useMemo as i } from "react";
 import { merge as n } from "../../utilities/merge.es.js";
-import { useFocusRing as k } from "@react-aria/focus";
-import { FOCUS_STYLE as M } from "../../utilities/focusStyle.es.js";
-import { useMemoizedId as L } from "../../hooks/useMemoizedId.es.js";
-import { InputLabel as E } from "../InputLabel/InputLabel.es.js";
-var F = /* @__PURE__ */ ((e) => (e.Small = "Small", e.Medium = "Medium", e.Large = "Large", e))(F || {});
-const y = {
-  Small: "tw-w-5 tw-h-2",
-  Medium: "tw-w-7 tw-h-4",
-  Large: "tw-w-9 tw-h-5"
-}, N = {
-  Small: "tw-w-3 tw-h-3",
-  Medium: "tw-w-3 tw-h-3",
-  Large: "tw-w-4 tw-h-4"
-}, U = ({
-  id: e,
-  name: u,
-  label: l,
-  disabled: s,
-  onChange: b,
+import { useFocusRing as M } from "@react-aria/focus";
+import { FOCUS_STYLE as S } from "../../utilities/focusStyle.es.js";
+import { useMemoizedId as E } from "../../hooks/useMemoizedId.es.js";
+import { InputLabel as L } from "../InputLabel/InputLabel.es.js";
+var T = /* @__PURE__ */ ((s) => (s.Small = "Small", s.Medium = "Medium", s.Large = "Large", s))(T || {});
+const W = {
+  Small: "tw-w-[22px] tw-h-3",
+  Medium: "tw-w-[30px] tw-h-4",
+  Large: "tw-w-[38px] tw-h-5"
+}, w = {
+  Small: {
+    dimensions: "tw-w-3 tw-h-3",
+    activeWidth: "group-active:tw-w-[14px]",
+    activeTranslation: "tw-translate-x-[9px]"
+  },
+  Medium: {
+    dimensions: "tw-w-4 tw-h-4",
+    activeWidth: "group-active:tw-w-[18px]",
+    activeTranslation: "tw-translate-x-[13px]"
+  },
+  Large: {
+    dimensions: "tw-w-5 tw-h-5",
+    activeWidth: "group-active:tw-w-[22px]",
+    activeTranslation: "tw-translate-x-[17px]"
+  }
+}, O = ({
+  id: s,
+  name: p,
+  label: c,
+  disabled: a,
+  onChange: x,
   size: t = "Medium",
-  on: a = !1,
-  hug: w = !1,
-  tooltip: C
+  on: e = !1,
+  hug: m = !1,
+  tooltip: v
 }) => {
-  const i = L(e), { isFocusVisible: c, focusProps: g } = k(), f = o(() => n(["tw-inline-flex tw-border-0 tw-rounded-full tw-transition-colors tw-shrink-0", t !== "Small" ? "tw-py-0 tw-px-[0.125rem]" : "tw-p-0", s ? "tw-bg-box-disabled-strong tw-pointer-events-none" : a ? "tw-bg-button-strong-background hover:tw-bg-button-strong-background-hover" : "tw-bg-text-x-weak hover:tw-bg-text-weak", y[t], c && M]), [a, s, t, c]), x = o(() => {
-    const m = "tw-block tw-self-center tw-bg-box-neutral-strong-inverse tw-rounded-full tw-transition-transform", d = t === "Small" ? s ? "tw-border tw-border-box-disabled-strong" : "tw-border tw-border-line-xx-strong" : "", S = a ? t === "Small" ? "tw-translate-x-2" : "tw-translate-x-full" : "tw-translate-x-0";
-    return n([m, d, N[t], S]);
-  }, [a, s, t]), p = o(() => n(["tw-gap-2 tw-items-center tw-justify-between", w ? "tw-inline-flex" : "tw-flex"]), [w]);
+  const d = E(s), { isFocusVisible: u, focusProps: g } = M(), f = i(() => n(["tw-group tw-border tw-inline-flex tw-rounded-full tw-shrink-0 tw-p-0 tw-transition-colors", a ? "tw-bg-box-disabled tw-border-line tw-pointer-events-none" : e ? "tw-bg-text-weak tw-border-line-xx-strong hover:tw-bg-text" : "tw-bg-box-neutral tw-border-line-x-strong hover:tw-bg-box-neutral-hover", W[t], u && S]), [e, a, t, u]), C = i(() => {
+    const o = "tw-relative tw-self-center tw-transition-transform", l = e && w[t].activeTranslation;
+    return n([o, w[t].dimensions, l]);
+  }, [e, t]), h = i(() => {
+    const o = "tw-border tw-bg-base tw-rounded-full tw-absolute tw-block tw-self-center tw-transition-width tw-duration-75", l = e ? "tw-right-0" : "tw-left-0 -tw-translate-x-px", b = a ? "tw-border-line-strong" : n(["tw-bg-base tw-border-line-xx-strong", w[t].activeWidth]);
+    return n([o, w[t].dimensions, l, b]);
+  }, [e, a, t]), k = i(() => n(["tw-gap-2 tw-items-center tw-justify-between", m ? "tw-inline-flex" : "tw-flex"]), [m]);
   return /* @__PURE__ */ r.createElement("div", {
-    className: p,
+    className: k,
     "data-test-id": "switch-container"
-  }, l && /* @__PURE__ */ r.createElement(E, {
+  }, c && /* @__PURE__ */ r.createElement(L, {
     clickable: !0,
-    htmlFor: i,
-    disabled: s,
-    tooltip: C
-  }, l), /* @__PURE__ */ r.createElement("button", {
+    htmlFor: d,
+    disabled: a,
+    tooltip: v
+  }, c), /* @__PURE__ */ r.createElement("button", {
     ...g,
-    id: i,
-    disabled: s,
-    name: u,
+    id: d,
+    disabled: a,
+    name: p,
     "data-test-id": "switch",
     className: f,
-    value: a.toString(),
-    onClick: b,
+    value: e.toString(),
+    onClick: x,
     type: "button"
   }, /* @__PURE__ */ r.createElement("div", {
-    className: x
-  })));
+    className: C
+  }, /* @__PURE__ */ r.createElement("div", {
+    className: h
+  }))));
 };
 export {
-  U as Switch,
-  F as SwitchSize
+  O as Switch,
+  T as SwitchSize
 };
 //# sourceMappingURL=Switch.es.js.map

package/dist/components/Switch/Switch.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.es.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, MouseEvent, useMemo } from 'react';\nimport { merge } from '@utilities/merge';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { InputLabel, InputLabelTooltipProps } from '@components/InputLabel/InputLabel';\n\nexport enum SwitchSize {\n    Small = 'Small',\n    Medium = 'Medium',\n    Large = 'Large',\n}\n\nconst lineSizeClasses: Record<SwitchSize, string> = {\n    [SwitchSize.Small]: 'tw-w-5 tw-h-2',\n    [SwitchSize.Medium]: 'tw-w-7 tw-h-4',\n    [SwitchSize.Large]: 'tw-w-9 tw-h-5',\n};\n\nconst dotSizeClasses: Record<SwitchSize, string> = {\n    [SwitchSize.Small]: 'tw-w-3 tw-h-3',\n    [SwitchSize.Medium]: 'tw-w-3 tw-h-3',\n    [SwitchSize.Large]: 'tw-w-4 tw-h-4',\n};\n\nexport type SwitchProps = {\n    id?: string;\n    on?: boolean;\n    disabled?: boolean;\n    label?: string;\n    name?: string;\n    size?: SwitchSize;\n    hug?: boolean;\n    tooltip?: InputLabelTooltipProps;\n    onChange?: (e: MouseEvent) => void;\n};\n\nexport const Switch: FC<SwitchProps> = ({\n    id: propId,\n    name,\n    label,\n    disabled,\n    onChange,\n    size = SwitchSize.Medium,\n    on = false,\n    hug = false,\n    tooltip,\n}) => {\n    const id = useMemoizedId(propId);\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const lineClasses = useMemo(() => {\n        const baseClasses = 'tw-inline-flex tw-border-0 tw-rounded-full tw-transition-colors tw-shrink-0';\n        const sizeClasses = size !== SwitchSize.Small ? 'tw-py-0 tw-px-[0.125rem]' : 'tw-p-0';\n        const activatedClasses = on\n            ? 'tw-bg-button-strong-background hover:tw-bg-button-strong-background-hover'\n            : 'tw-bg-text-x-weak hover:tw-bg-text-weak';\n        const disabledClasses = disabled ? 'tw-bg-box-disabled-strong tw-pointer-events-none' : activatedClasses;\n\n        return merge([baseClasses, sizeClasses, disabledClasses, lineSizeClasses[size], isFocusVisible && FOCUS_STYLE]);\n    }, [on, disabled, size, isFocusVisible]);\n\n    const dotClasses = useMemo(() => {\n        const baseClasses =\n            'tw-block tw-self-center tw-bg-box-neutral-strong-inverse tw-rounded-full tw-transition-transform';\n        const disabledClasses = disabled\n            ? 'tw-border tw-border-box-disabled-strong'\n            : 'tw-border tw-border-line-xx-strong';\n        const sizeClasses = size === SwitchSize.Small ? disabledClasses : '';\n        const activatedClasses = size === SwitchSize.Small ? 'tw-translate-x-2' : 'tw-translate-x-full';\n        const animationClasses = on ? activatedClasses : 'tw-translate-x-0';\n\n        return merge([baseClasses, sizeClasses, dotSizeClasses[size], animationClasses]);\n    }, [on, disabled, size]);\n\n    const containerClasses = useMemo(() => {\n        return merge(['tw-gap-2 tw-items-center tw-justify-between', hug ? 'tw-inline-flex' : 'tw-flex']);\n    }, [hug]);\n\n    return (\n        <div className={containerClasses} data-test-id=\"switch-container\">\n            {label && (\n                <InputLabel clickable={true} htmlFor={id} disabled={disabled} tooltip={tooltip}>\n                    {label}\n                </InputLabel>\n            )}\n            <button\n                {...focusProps}\n                id={id}\n                disabled={disabled}\n                name={name}\n                data-test-id=\"switch\"\n                className={lineClasses}\n                value={on.toString()}\n                onClick={onChange}\n                type=\"button\"\n            >\n                <div className={dotClasses} />\n            </button>\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;AASY,IAAA,sBAAA,MACA,GAAA,QAAA,SACC,EAAA,SAAA,UACD,EAAA,QAAA,SAHA,IAAA,KAAA,CAAA,CAAA;AAMZ,MAAM,IAA8C;AAAA,EAChD,AAAC,OAAmB;AAAA,EACpB,AAAC,QAAoB;AAAA,EACrB,AAAC,OAAmB;AACxB,GAEM,IAA6C;AAAA,EAC/C,AAAC,OAAmB;AAAA,EACpB,AAAC,QAAoB;AAAA,EACrB,AAAC,OAAmB;AACxB,GAca,IAA0B,CAAC;AAAA,EACpC,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAO;AAAA,EACP,QAAK;AAAA,EACL,SAAM;AAAA,EACN;AAAA,MACE;AACI,QAAA,IAAK,EAAc,CAAM,GACzB,EAAE,mBAAgB,kBAAe,EAAa,GAE9C,IAAc,EAAQ,MAQjB,EAAM,CAPO,+EACA,MAAS,UAAmB,6BAA6B,UAIrD,IAAW,qDAHV,IACnB,8EACA,2CAGmD,EAAgB,IAAO,KAAkB,CAAW,CAAC,GAC/G,CAAC,GAAI,GAAU,GAAM,CAAc,CAAC,GAEjC,IAAa,EAAQ,MAAM;AAC7B,UAAM,IACF,oGAIE,IAAc,MAAS,UAHL,IAClB,4CACA,uCAC4D,IAE5D,IAAmB,IADA,MAAS,UAAmB,qBAAqB,wBACzB;AAEjD,WAAO,EAAM,CAAC,GAAa,GAAa,EAAe,IAAO,CAAgB,CAAC;AAAA,EAChF,GAAA,CAAC,GAAI,GAAU,CAAI,CAAC,GAEjB,IAAmB,EAAQ,MACtB,EAAM,CAAC,+CAA+C,IAAM,mBAAmB,SAAS,CAAC,GACjG,CAAC,CAAG,CAAC;AAER,SACK,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAW;AAAA,IAAkB,gBAAa;AAAA,EAAA,GAC1C,KACI,kBAAA,cAAA,GAAA;AAAA,IAAW,WAAW;AAAA,IAAM,SAAS;AAAA,IAAI;AAAA,IAAoB;AAAA,EACzD,GAAA,CACL,GAEH,kBAAA,cAAA,UAAA;AAAA,IACI,GAAG;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAa;AAAA,IACb,WAAW;AAAA,IACX,OAAO,EAAG,SAAS;AAAA,IACnB,SAAS;AAAA,IACT,MAAK;AAAA,EAAA,GAEJ,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAW;AAAA,EAAY,CAAA,CAChC,CACJ;AAER;"}
+{"version":3,"file":"Switch.es.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, MouseEvent, useMemo } from 'react';\nimport { merge } from '@utilities/merge';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { InputLabel, InputLabelTooltipProps } from '@components/InputLabel/InputLabel';\n\nexport enum SwitchSize {\n    Small = 'Small',\n    Medium = 'Medium',\n    Large = 'Large',\n}\n\nconst trackSizeClasses: Record<SwitchSize, string> = {\n    [SwitchSize.Small]: 'tw-w-[22px] tw-h-3',\n    [SwitchSize.Medium]: 'tw-w-[30px] tw-h-4',\n    [SwitchSize.Large]: 'tw-w-[38px] tw-h-5',\n};\n\nconst dotSizeClasses: Record<SwitchSize, Record<'dimensions' | 'activeWidth' | 'activeTranslation', string>> = {\n    [SwitchSize.Small]: {\n        dimensions: 'tw-w-3 tw-h-3',\n        activeWidth: 'group-active:tw-w-[14px]',\n        activeTranslation: 'tw-translate-x-[9px]',\n    },\n    [SwitchSize.Medium]: {\n        dimensions: 'tw-w-4 tw-h-4',\n        activeWidth: 'group-active:tw-w-[18px]',\n        activeTranslation: 'tw-translate-x-[13px]',\n    },\n    [SwitchSize.Large]: {\n        dimensions: 'tw-w-5 tw-h-5',\n        activeWidth: 'group-active:tw-w-[22px]',\n        activeTranslation: 'tw-translate-x-[17px]',\n    },\n};\n\nexport type SwitchProps = {\n    id?: string;\n    on?: boolean;\n    disabled?: boolean;\n    label?: string;\n    name?: string;\n    size?: SwitchSize;\n    hug?: boolean;\n    tooltip?: InputLabelTooltipProps;\n    onChange?: (e: MouseEvent) => void;\n};\n\nexport const Switch: FC<SwitchProps> = ({\n    id: propId,\n    name,\n    label,\n    disabled,\n    onChange,\n    size = SwitchSize.Medium,\n    on = false,\n    hug = false,\n    tooltip,\n}) => {\n    const id = useMemoizedId(propId);\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    // The track on which the dot moves\n    const trackClasses = useMemo(() => {\n        const baseClasses = 'tw-group tw-border tw-inline-flex tw-rounded-full tw-shrink-0 tw-p-0 tw-transition-colors';\n\n        const valueClasses = on\n            ? 'tw-bg-text-weak tw-border-line-xx-strong hover:tw-bg-text'\n            : 'tw-bg-box-neutral tw-border-line-x-strong hover:tw-bg-box-neutral-hover';\n\n        const disabledClasses = disabled ? 'tw-bg-box-disabled tw-border-line tw-pointer-events-none' : valueClasses;\n\n        return merge([baseClasses, disabledClasses, trackSizeClasses[size], isFocusVisible && FOCUS_STYLE]);\n    }, [on, disabled, size, isFocusVisible]);\n\n    // Responsible for the left-right translation\n    const dotWrapperClasses = useMemo(() => {\n        const baseClasses = 'tw-relative tw-self-center tw-transition-transform';\n\n        const valueClasses = on && dotSizeClasses[size].activeTranslation;\n\n        return merge([baseClasses, dotSizeClasses[size].dimensions, valueClasses]);\n    }, [on, size]);\n\n    // Responsible for dot styling and width animation on hover\n    const dotClasses = useMemo(() => {\n        const baseClasses =\n            'tw-border tw-bg-base tw-rounded-full tw-absolute tw-block tw-self-center tw-transition-width tw-duration-75';\n\n        const valueClasses = on ? 'tw-right-0' : 'tw-left-0 -tw-translate-x-px';\n\n        const disabledStateClasses = disabled\n            ? 'tw-border-line-strong'\n            : merge(['tw-bg-base tw-border-line-xx-strong', dotSizeClasses[size].activeWidth]);\n\n        return merge([baseClasses, dotSizeClasses[size].dimensions, valueClasses, disabledStateClasses]);\n    }, [on, disabled, size]);\n\n    // Wraps the InputLabel instance and switch element\n    const containerClasses = useMemo(() => {\n        return merge(['tw-gap-2 tw-items-center tw-justify-between', hug ? 'tw-inline-flex' : 'tw-flex']);\n    }, [hug]);\n\n    return (\n        <div className={containerClasses} data-test-id=\"switch-container\">\n            {label && (\n                <InputLabel clickable={true} htmlFor={id} disabled={disabled} tooltip={tooltip}>\n                    {label}\n                </InputLabel>\n            )}\n            <button\n                {...focusProps}\n                id={id}\n                disabled={disabled}\n                name={name}\n                data-test-id=\"switch\"\n                className={trackClasses}\n                value={on.toString()}\n                onClick={onChange}\n                type=\"button\"\n            >\n                <div className={dotWrapperClasses}>\n                    <div className={dotClasses} />\n                </div>\n            </button>\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;AASY,IAAA,sBAAA,MACA,GAAA,QAAA,SACC,EAAA,SAAA,UACD,EAAA,QAAA,SAHA,IAAA,KAAA,CAAA,CAAA;AAMZ,MAAM,IAA+C;AAAA,EACjD,AAAC,OAAmB;AAAA,EACpB,AAAC,QAAoB;AAAA,EACrB,AAAC,OAAmB;AACxB,GAEM,IAAyG;AAAA,EAC3G,AAAC,OAAmB;AAAA,IAChB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,mBAAmB;AAAA,EACvB;AAAA,EACA,AAAC,QAAoB;AAAA,IACjB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,mBAAmB;AAAA,EACvB;AAAA,EACA,AAAC,OAAmB;AAAA,IAChB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,mBAAmB;AAAA,EACvB;AACJ,GAca,IAA0B,CAAC;AAAA,EACpC,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAO;AAAA,EACP,QAAK;AAAA,EACL,SAAM;AAAA,EACN;AAAA,MACE;AACI,QAAA,IAAK,EAAc,CAAM,GACzB,EAAE,mBAAgB,kBAAe,EAAa,GAG9C,IAAe,EAAQ,MASlB,EAAM,CARO,6FAMI,IAAW,6DAJd,IACf,8DACA,2EAIsC,EAAiB,IAAO,KAAkB,CAAW,CAAC,GACnG,CAAC,GAAI,GAAU,GAAM,CAAc,CAAC,GAGjC,IAAoB,EAAQ,MAAM;AACpC,UAAM,IAAc,sDAEd,IAAe,KAAM,EAAe,GAAM;AAEhD,WAAO,EAAM,CAAC,GAAa,EAAe,GAAM,YAAY,CAAY,CAAC;AAAA,EAAA,GAC1E,CAAC,GAAI,CAAI,CAAC,GAGP,IAAa,EAAQ,MAAM;AAC7B,UAAM,IACF,+GAEE,IAAe,IAAK,eAAe,gCAEnC,IAAuB,IACvB,0BACA,EAAM,CAAC,uCAAuC,EAAe,GAAM,WAAW,CAAC;AAE9E,WAAA,EAAM,CAAC,GAAa,EAAe,GAAM,YAAY,GAAc,CAAoB,CAAC;AAAA,EAChG,GAAA,CAAC,GAAI,GAAU,CAAI,CAAC,GAGjB,IAAmB,EAAQ,MACtB,EAAM,CAAC,+CAA+C,IAAM,mBAAmB,SAAS,CAAC,GACjG,CAAC,CAAG,CAAC;AAER,SACK,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAW;AAAA,IAAkB,gBAAa;AAAA,EAAA,GAC1C,KACI,kBAAA,cAAA,GAAA;AAAA,IAAW,WAAW;AAAA,IAAM,SAAS;AAAA,IAAI;AAAA,IAAoB;AAAA,EACzD,GAAA,CACL,GAEH,kBAAA,cAAA,UAAA;AAAA,IACI,GAAG;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAa;AAAA,IACb,WAAW;AAAA,IACX,OAAO,EAAG,SAAS;AAAA,IACnB,SAAS;AAAA,IACT,MAAK;AAAA,EAAA,GAEJ,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAW;AAAA,EAAA,GACX,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAW;AAAA,EAAA,CAAY,CAChC,CACJ,CACJ;AAER;"}

package/dist/components/TextInput/TextInput.es.js

@@ -1682,10 +1682,10 @@ const LV = ({
   return /* @__PURE__ */ t.createElement("div", {
     ...O,
     className: i([
-      "tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-3 tw-border hover:tw-border-black-90 tw-transition tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent",
+      "tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-3 tw-border tw-transition tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent",
       V ? "tw-border-dashed" : "tw-border-solid",
       o || u ? "tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90" : i([
-        "focus-within:tw-border-black-90",
+        "focus-within:tw-border-black-90 hover:tw-border-black-90",
         J[d],
         L && n
       ])

package/dist/components/TextInput/TextInput.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.es.js","sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { useCopy } from '@hooks/useCopy';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport React, { FC, FocusEvent, KeyboardEvent, ReactNode, useEffect, useRef, useState } from 'react';\nimport { IconCheckMark, IconClipboard, IconCross, IconCrossCircle, IconEye, IconEyeOff } from '@foundation/Icon';\n\nexport enum TextInputType {\n    Text = 'text',\n    Password = 'password',\n    Number = 'number',\n}\n\nexport type TextInputBaseProps = {\n    id?: string;\n    type?: TextInputType;\n    decorator?: ReactNode;\n    dotted?: boolean;\n    clearable?: boolean;\n    placeholder?: string;\n    required?: boolean;\n    disabled?: boolean;\n    autocomplete?: boolean;\n    readonly?: boolean;\n    validation?: Validation;\n    copyable?: boolean;\n    value?: string;\n    onChange?: (value: string) => void;\n    onEnterPressed?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n    onClear?: () => void;\n    size?: number;\n    spellcheck?: boolean;\n    focusOnMount?: boolean;\n};\n\nexport type TextInputProps =\n    | ({\n          type?: TextInputType.Text;\n          obfuscated?: false;\n      } & TextInputBaseProps)\n    | ({\n          type?: TextInputType.Number;\n          obfuscated?: false;\n          min?: number;\n          max?: number;\n      } & TextInputBaseProps)\n    | ({\n          type: TextInputType.Password;\n          obfuscated?: boolean;\n      } & TextInputBaseProps);\n\nexport const TextInput: FC<TextInputProps> = ({\n    id: propId,\n    type = TextInputType.Text,\n    decorator,\n    validation = Validation.Default,\n    clearable = false,\n    placeholder,\n    required,\n    obfuscated,\n    disabled = false,\n    autocomplete = false,\n    dotted = false,\n    value = '',\n    copyable = false,\n    onChange,\n    onEnterPressed,\n    onBlur,\n    onClear,\n    size,\n    spellcheck,\n    readonly,\n    focusOnMount,\n}) => {\n    const { isFocusVisible, focusProps } = useFocusRing({ within: true, isTextInput: true });\n    const { isFocusVisible: clearButtonIsFocusVisible, focusProps: clearButtonFocusProps } = useFocusRing();\n    const { isFocusVisible: passwordButtonIsFocusVisible, focusProps: passwordButtonFocusProps } = useFocusRing();\n    const { isFocusVisible: copyButtonIsFocusVisible, focusProps: copyButtonFocusProps } = useFocusRing();\n\n    const { copy, status } = useCopy();\n\n    const inputElement = useRef<HTMLInputElement | null>(null);\n    const [isObfuscated, setIsObfuscated] = useState(\n        typeof obfuscated === 'boolean' ? obfuscated : type === TextInputType.Password,\n    );\n\n    useEffect(() => {\n        setTimeout(() => {\n            focusOnMount && inputElement.current?.focus();\n        }, 0);\n    }, [focusOnMount]);\n\n    useEffect(() => {\n        if (typeof obfuscated === 'boolean') {\n            setIsObfuscated(obfuscated);\n        }\n    }, [obfuscated]);\n\n    const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            onEnterPressed && onEnterPressed(event);\n        }\n    };\n\n    const getInputType = () => {\n        if (type === TextInputType.Password) {\n            return isObfuscated ? TextInputType.Password : TextInputType.Text;\n        }\n        return type;\n    };\n\n    const spellcheckProp = typeof spellcheck === 'boolean' ? { spellCheck: spellcheck } : null;\n\n    return (\n        <div\n            {...focusProps}\n            className={merge([\n                'tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-3 tw-border hover:tw-border-black-90 tw-transition tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent',\n                dotted ? 'tw-border-dashed' : 'tw-border-solid',\n                disabled || readonly\n                    ? 'tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90'\n                    : merge([\n                          'focus-within:tw-border-black-90',\n                          validationClassMap[validation],\n                          isFocusVisible && FOCUS_STYLE,\n                      ]),\n            ])}\n        >\n            {decorator && (\n                <div\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-pl-1',\n                        disabled ? 'tw-text-black-60' : 'tw-text-black-80',\n                    ])}\n                    data-test-id=\"decorator\"\n                >\n                    {decorator}\n                </div>\n            )}\n            <input\n                id={useMemoizedId(propId)}\n                ref={inputElement}\n                className={merge([\n                    'tw-w-full tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows',\n                    disabled || readonly\n                        ? 'tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40'\n                        : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n                ])}\n                onClick={() => inputElement.current?.focus()}\n                onChange={(event) => onChange && onChange(event.currentTarget.value)}\n                onBlur={onBlur}\n                onKeyDown={onKeyDown}\n                placeholder={placeholder}\n                value={value}\n                type={getInputType()}\n                required={required}\n                readOnly={readonly}\n                disabled={disabled}\n                autoComplete={autocomplete ? 'on' : 'off'}\n                size={size}\n                data-test-id=\"text-input\"\n                {...spellcheckProp}\n            />\n            {`${value}`.length > 0 && clearable && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60  hover:tw-text-black-100',\n                        clearButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => {\n                        inputElement.current?.focus();\n                        inputElement.current?.setAttribute('value', '');\n\n                        onChange && onChange('');\n                        onClear && onClear();\n                    }}\n                    data-test-id=\"clear-icon\"\n                    title=\"Clear text input\"\n                    aria-label=\"clear text input\"\n                    disabled={disabled}\n                    type=\"button\"\n                    {...clearButtonFocusProps}\n                >\n                    <IconCross />\n                </button>\n            )}\n            {type === TextInputType.Password && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n                        passwordButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => setIsObfuscated(!isObfuscated)}\n                    data-test-id=\"visibility-icon\"\n                    title=\"Toggle text visibility\"\n                    type=\"button\"\n                    aria-label={`${isObfuscated ? 'unveil' : 'obfuscate'} text input`}\n                    disabled={disabled}\n                    {...passwordButtonFocusProps}\n                >\n                    {isObfuscated ? <IconEye /> : <IconEyeOff />}\n                </button>\n            )}\n            {validation === Validation.Loading && (\n                <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10\">\n                    <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n                </span>\n            )}\n            {copyable && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n                        copyButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => copy(value)}\n                    data-test-id=\"copy-icon\"\n                    title=\"Copy input text\"\n                    disabled={disabled}\n                    type=\"button\"\n                    {...copyButtonFocusProps}\n                >\n                    {status === 'error' && (\n                        <span className=\"tw-text-box-negative-strong\">\n                            <IconCrossCircle />\n                        </span>\n                    )}\n                    {status === 'idle' && <IconClipboard />}\n                    {status === 'success' && (\n                        <span className=\"tw-text-box-positive-strong\">\n                            <IconCheckMark />\n                        </span>\n                    )}\n                </button>\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"version":3,"file":"TextInput.es.js","sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { useCopy } from '@hooks/useCopy';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport React, { FC, FocusEvent, KeyboardEvent, ReactNode, useEffect, useRef, useState } from 'react';\nimport { IconCheckMark, IconClipboard, IconCross, IconCrossCircle, IconEye, IconEyeOff } from '@foundation/Icon';\n\nexport enum TextInputType {\n    Text = 'text',\n    Password = 'password',\n    Number = 'number',\n}\n\nexport type TextInputBaseProps = {\n    id?: string;\n    type?: TextInputType;\n    decorator?: ReactNode;\n    dotted?: boolean;\n    clearable?: boolean;\n    placeholder?: string;\n    required?: boolean;\n    disabled?: boolean;\n    autocomplete?: boolean;\n    readonly?: boolean;\n    validation?: Validation;\n    copyable?: boolean;\n    value?: string;\n    onChange?: (value: string) => void;\n    onEnterPressed?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n    onClear?: () => void;\n    size?: number;\n    spellcheck?: boolean;\n    focusOnMount?: boolean;\n};\n\nexport type TextInputProps =\n    | ({\n          type?: TextInputType.Text;\n          obfuscated?: false;\n      } & TextInputBaseProps)\n    | ({\n          type?: TextInputType.Number;\n          obfuscated?: false;\n          min?: number;\n          max?: number;\n      } & TextInputBaseProps)\n    | ({\n          type: TextInputType.Password;\n          obfuscated?: boolean;\n      } & TextInputBaseProps);\n\nexport const TextInput: FC<TextInputProps> = ({\n    id: propId,\n    type = TextInputType.Text,\n    decorator,\n    validation = Validation.Default,\n    clearable = false,\n    placeholder,\n    required,\n    obfuscated,\n    disabled = false,\n    autocomplete = false,\n    dotted = false,\n    value = '',\n    copyable = false,\n    onChange,\n    onEnterPressed,\n    onBlur,\n    onClear,\n    size,\n    spellcheck,\n    readonly,\n    focusOnMount,\n}) => {\n    const { isFocusVisible, focusProps } = useFocusRing({ within: true, isTextInput: true });\n    const { isFocusVisible: clearButtonIsFocusVisible, focusProps: clearButtonFocusProps } = useFocusRing();\n    const { isFocusVisible: passwordButtonIsFocusVisible, focusProps: passwordButtonFocusProps } = useFocusRing();\n    const { isFocusVisible: copyButtonIsFocusVisible, focusProps: copyButtonFocusProps } = useFocusRing();\n\n    const { copy, status } = useCopy();\n\n    const inputElement = useRef<HTMLInputElement | null>(null);\n    const [isObfuscated, setIsObfuscated] = useState(\n        typeof obfuscated === 'boolean' ? obfuscated : type === TextInputType.Password,\n    );\n\n    useEffect(() => {\n        setTimeout(() => {\n            focusOnMount && inputElement.current?.focus();\n        }, 0);\n    }, [focusOnMount]);\n\n    useEffect(() => {\n        if (typeof obfuscated === 'boolean') {\n            setIsObfuscated(obfuscated);\n        }\n    }, [obfuscated]);\n\n    const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            onEnterPressed && onEnterPressed(event);\n        }\n    };\n\n    const getInputType = () => {\n        if (type === TextInputType.Password) {\n            return isObfuscated ? TextInputType.Password : TextInputType.Text;\n        }\n        return type;\n    };\n\n    const spellcheckProp = typeof spellcheck === 'boolean' ? { spellCheck: spellcheck } : null;\n\n    return (\n        <div\n            {...focusProps}\n            className={merge([\n                'tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-3 tw-border tw-transition tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent',\n                dotted ? 'tw-border-dashed' : 'tw-border-solid',\n                disabled || readonly\n                    ? 'tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90'\n                    : merge([\n                          'focus-within:tw-border-black-90 hover:tw-border-black-90',\n                          validationClassMap[validation],\n                          isFocusVisible && FOCUS_STYLE,\n                      ]),\n            ])}\n        >\n            {decorator && (\n                <div\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-pl-1',\n                        disabled ? 'tw-text-black-60' : 'tw-text-black-80',\n                    ])}\n                    data-test-id=\"decorator\"\n                >\n                    {decorator}\n                </div>\n            )}\n            <input\n                id={useMemoizedId(propId)}\n                ref={inputElement}\n                className={merge([\n                    'tw-w-full tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows',\n                    disabled || readonly\n                        ? 'tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40'\n                        : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n                ])}\n                onClick={() => inputElement.current?.focus()}\n                onChange={(event) => onChange && onChange(event.currentTarget.value)}\n                onBlur={onBlur}\n                onKeyDown={onKeyDown}\n                placeholder={placeholder}\n                value={value}\n                type={getInputType()}\n                required={required}\n                readOnly={readonly}\n                disabled={disabled}\n                autoComplete={autocomplete ? 'on' : 'off'}\n                size={size}\n                data-test-id=\"text-input\"\n                {...spellcheckProp}\n            />\n            {`${value}`.length > 0 && clearable && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60  hover:tw-text-black-100',\n                        clearButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => {\n                        inputElement.current?.focus();\n                        inputElement.current?.setAttribute('value', '');\n\n                        onChange && onChange('');\n                        onClear && onClear();\n                    }}\n                    data-test-id=\"clear-icon\"\n                    title=\"Clear text input\"\n                    aria-label=\"clear text input\"\n                    disabled={disabled}\n                    type=\"button\"\n                    {...clearButtonFocusProps}\n                >\n                    <IconCross />\n                </button>\n            )}\n            {type === TextInputType.Password && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n                        passwordButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => setIsObfuscated(!isObfuscated)}\n                    data-test-id=\"visibility-icon\"\n                    title=\"Toggle text visibility\"\n                    type=\"button\"\n                    aria-label={`${isObfuscated ? 'unveil' : 'obfuscate'} text input`}\n                    disabled={disabled}\n                    {...passwordButtonFocusProps}\n                >\n                    {isObfuscated ? <IconEye /> : <IconEyeOff />}\n                </button>\n            )}\n            {validation === Validation.Loading && (\n                <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10\">\n                    <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n                </span>\n            )}\n            {copyable && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n                        copyButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => copy(value)}\n                    data-test-id=\"copy-icon\"\n                    title=\"Copy input text\"\n                    disabled={disabled}\n                    type=\"button\"\n                    {...copyButtonFocusProps}\n                >\n                    {status === 'error' && (\n                        <span className=\"tw-text-box-negative-strong\">\n                            <IconCrossCircle />\n                        </span>\n                    )}\n                    {status === 'idle' && <IconClipboard />}\n                    {status === 'success' && (\n                        <span className=\"tw-text-box-positive-strong\">\n                            <IconCheckMark />\n                        </span>\n                    )}\n                </button>\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -21,6 +21,8 @@ export declare type TooltipProps = PropsWithChildren<{
     withArrow?: boolean;
     hoverDelay?: number;
     open?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
 }>;
 export declare enum TooltipPosition {
     Top = "Top",
@@ -33,4 +35,4 @@ export declare enum TooltipAlignment {
     Middle = "Middle",
     End = "End"
 }
-export declare const Tooltip: ({ content, tooltipIcon, heading, headingIcon, linkUrl, linkLabel, brightHeader, buttons, children, position, alignment, withArrow, flip, triggerElement, hoverDelay, open, }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ content, tooltipIcon, heading, headingIcon, linkUrl, linkLabel, brightHeader, buttons, children, position, alignment, withArrow, flip, triggerElement, hoverDelay, open, disabled, hidden, }: TooltipProps) => JSX.Element;