@unoff/ui 1.21.0 → 1.21.1

package/dist/components/actions/button/Button.js

@@ -1,12 +1,12 @@
 import '../../../assets/Button.css';
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { jsxs as m, jsx as i } from "react/jsx-runtime";
 import I from "react";
+import { t as w } from "../../../do-classnames-DSDFCvzy.js";
 import g from "../../../styles/layouts.module.js";
 import E from "../../tags/tooltip/Tooltip.js";
 import _ from "../../tags/icon-chip/IconChip.js";
 import S from "../../tags/chip/Chip.js";
 import { Icon as N } from "../../assets/icon/Icon.js";
-import { t as w } from "../../../do-classnames-DSDFCvzy.js";
 class P extends I.Component {
   buttonRef = I.createRef();
   static defaultProps = {
@@ -21,16 +21,16 @@ class P extends I.Component {
     isDisabled: !1,
     isNew: !1
   };
-  constructor(s) {
-    super(s), this.state = {
+  constructor(t) {
+    super(t), this.state = {
       isTooltipVisible: !1,
       documentWidth: document.documentElement.clientWidth
     };
   }
   // Lifecycle
   componentDidMount = () => {
-    const { isAutofocus: s } = this.props;
-    s && setTimeout(() => {
+    const { isAutofocus: t } = this.props;
+    t && setTimeout(() => {
       this.buttonRef.current && this.buttonRef.current.focus();
     }, 1), window.addEventListener("resize", this.handleResize);
   };
@@ -43,45 +43,45 @@ class P extends I.Component {
   };
   // Templates
   Status = () => {
-    const { type: s, warning: i, preview: c, isBlocked: t, isNew: a, onUnblock: u } = this.props;
-    if (i || t || a)
+    const { warning: t, preview: n, isBlocked: a, isNew: e, onUnblock: c } = this.props;
+    if (t || a || e)
       return /* @__PURE__ */ m("div", { className: "button__status", children: [
-        i !== void 0 && /* @__PURE__ */ e(
+        t !== void 0 && /* @__PURE__ */ i(
           _,
           {
             iconType: "PICTO",
             iconName: "warning",
-            text: i.label,
-            pin: i.pin,
-            type: i.type
+            text: t.label,
+            pin: t.pin,
+            type: t.type
           }
         ),
-        (t || a) && s !== "icon" && /* @__PURE__ */ e(
+        (a || e) && /* @__PURE__ */ i(
           S,
           {
-            preview: c,
+            preview: n,
             isSolo: !0,
-            action: t ? u : void 0,
-            children: a ? "New" : "Pro"
+            action: a ? c : void 0,
+            children: e ? "New" : "Pro"
           }
         )
       ] });
   };
   Button = () => {
     const {
-      type: s,
-      icon: i,
-      size: c,
-      helper: t,
-      feature: a,
-      hasMultipleActions: u,
+      type: t,
+      icon: n,
+      size: a,
+      helper: e,
+      feature: c,
+      hasMultipleActions: b,
       isLoading: o,
-      isDisabled: p,
-      isBlocked: l,
-      action: d,
-      label: r,
-      shouldReflow: b
-    } = this.props, { isTooltipVisible: v, documentWidth: T } = this.state, n = b?.isEnabled && T <= 460, y = () => n ? void 0 : r, L = () => n ? r : t?.label, h = () => n ? r !== void 0 : t !== void 0, k = () => n && b?.icon !== void 0 ? b.icon : i;
+      isDisabled: l,
+      isBlocked: s,
+      action: r,
+      label: u,
+      shouldReflow: p
+    } = this.props, { isTooltipVisible: T, documentWidth: d } = this.state, v = p?.isEnabled && d <= 460, y = () => v ? void 0 : u, L = () => v ? u : e?.label, h = () => v ? u !== void 0 : e !== void 0, k = () => v && p?.icon !== void 0 ? p.icon : n;
     return /* @__PURE__ */ m("div", { className: g["snackbar--medium"], children: [
       /* @__PURE__ */ m(
         "button",
@@ -89,20 +89,20 @@ class P extends I.Component {
           role: "button",
           className: w([
             "button",
-            `button--${s}`,
-            `button--${c}`,
+            `button--${t}`,
+            `button--${a}`,
             o && "button--loading",
-            l && "button--blocked"
+            s && "button--blocked"
           ]),
-          "data-feature": a,
-          disabled: p || l,
-          "aria-label": typeof (y() || t?.label) == "string" ? y() || t?.label : void 0,
-          "aria-disabled": p || l,
+          "data-feature": c,
+          disabled: l || s,
+          "aria-label": typeof (y() || e?.label) == "string" ? y() || e?.label : void 0,
+          "aria-disabled": l || s,
           "aria-busy": o,
           onKeyDown: (f) => {
-            (f.key === " " || f.key === "Enter") && (!p || !l) && d?.(f), f.key === "Escape" && f.target.blur();
+            (f.key === " " || f.key === "Enter") && (!l || !s) && r?.(f), f.key === "Escape" && f.target.blur();
           },
-          onMouseDown: p || l ? void 0 : d,
+          onMouseDown: l || s ? void 0 : r,
           onMouseEnter: () => {
             h() && this.setState({ isTooltipVisible: !0 });
           },
@@ -118,12 +118,12 @@ class P extends I.Component {
           tabIndex: 0,
           ref: this.buttonRef,
           children: [
-            k() !== void 0 && /* @__PURE__ */ e(
+            k() !== void 0 && /* @__PURE__ */ i(
               "span",
               {
                 className: "button__icon",
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ e(
+                children: /* @__PURE__ */ i(
                   N,
                   {
                     type: "PICTO",
@@ -132,13 +132,13 @@ class P extends I.Component {
                 )
               }
             ),
-            y() !== void 0 && /* @__PURE__ */ e("span", { className: "button__label", children: y() }),
-            o && /* @__PURE__ */ e(
+            y() !== void 0 && /* @__PURE__ */ i("span", { className: "button__label", children: y() }),
+            o && /* @__PURE__ */ i(
               "div",
               {
                 className: "button__loader",
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ e(
+                children: /* @__PURE__ */ i(
                   N,
                   {
                     type: "PICTO",
@@ -148,12 +148,12 @@ class P extends I.Component {
                 )
               }
             ),
-            u && /* @__PURE__ */ e(
+            b && /* @__PURE__ */ i(
               "span",
               {
                 className: "button__caret",
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ e(
+                children: /* @__PURE__ */ i(
                   N,
                   {
                     type: "PICTO",
@@ -162,11 +162,11 @@ class P extends I.Component {
                 )
               }
             ),
-            v && h() && /* @__PURE__ */ e(
+            T && h() && /* @__PURE__ */ i(
               E,
               {
-                pin: t?.pin || "BOTTOM",
-                type: t?.type || "SINGLE_LINE",
+                pin: e?.pin || "BOTTOM",
+                type: e?.type || "SINGLE_LINE",
                 children: L()
               }
             )
@@ -177,29 +177,29 @@ class P extends I.Component {
     ] });
   };
   LinkButton = () => {
-    const { type: s, size: i, feature: c, label: t, url: a } = this.props;
-    return /* @__PURE__ */ e(
+    const { type: t, size: n, feature: a, label: e, url: c } = this.props;
+    return /* @__PURE__ */ i(
       "button",
       {
         role: "link",
         className: w([
           "button",
-          `button--${s}`,
-          `button--${i}`
+          `button--${t}`,
+          `button--${n}`
         ]),
-        "data-feature": c,
+        "data-feature": a,
         ref: this.buttonRef,
-        "aria-label": t,
+        "aria-label": e,
         tabIndex: 0,
-        children: /* @__PURE__ */ e(
+        children: /* @__PURE__ */ i(
           "a",
           {
-            href: a,
+            href: c,
             target: "_blank",
             rel: "noreferrer",
             className: "button__label",
-            "aria-label": t,
-            children: t
+            "aria-label": e,
+            children: e
           }
         )
       }
@@ -207,42 +207,41 @@ class P extends I.Component {
   };
   Icon = () => {
     const {
-      size: s,
-      icon: i,
-      iconClassName: c,
-      customIcon: t,
-      feature: a,
-      state: u,
+      size: t,
+      icon: n,
+      iconClassName: a,
+      customIcon: e,
+      feature: c,
+      state: b,
       helper: o,
-      warning: p,
       isLoading: l,
-      isDisabled: d,
+      isDisabled: s,
       isBlocked: r,
-      isNew: b,
-      action: v
+      isNew: u,
+      action: p
     } = this.props, { isTooltipVisible: T } = this.state;
     return /* @__PURE__ */ m("div", { className: g["snackbar--medium"], children: [
       /* @__PURE__ */ m(
         "button",
         {
           role: "button",
-          "data-feature": a,
+          "data-feature": c,
           className: w([
             "icon-button",
-            `icon-button--${s}`,
-            u === "selected" && "icon-button--selected",
-            b && "icon-button--new",
+            `icon-button--${t}`,
+            b === "selected" && "icon-button--selected",
+            u && "icon-button--new",
             l && "button--loading"
           ]),
-          disabled: d || r,
-          "aria-label": typeof o?.label == "string" ? o.label : i,
-          "aria-disabled": d || r,
-          "aria-pressed": u === "selected",
+          disabled: s || r,
+          "aria-label": typeof o?.label == "string" ? o.label : n,
+          "aria-disabled": s || r,
+          "aria-pressed": b === "selected",
           "aria-busy": l,
-          onKeyDown: (n) => {
-            (n.key === " " || n.key === "Enter") && !(d || r) && v?.(n), n.key === "Escape" && n.target.blur();
+          onKeyDown: (d) => {
+            (d.key === " " || d.key === "Enter") && !(s || r) && p?.(d), d.key === "Escape" && d.target.blur();
           },
-          onMouseDown: d || r ? void 0 : v,
+          onMouseDown: s || r ? void 0 : p,
           onMouseEnter: () => {
             o !== void 0 && this.setState({ isTooltipVisible: !0 });
           },
@@ -258,18 +257,18 @@ class P extends I.Component {
           tabIndex: 0,
           ref: this.buttonRef,
           children: [
-            t === void 0 ? /* @__PURE__ */ e(
+            e === void 0 ? /* @__PURE__ */ i(
               N,
               {
                 type: "PICTO",
-                iconName: l ? "spinner" : i,
-                customClassName: c !== void 0 ? c : void 0
+                iconName: l ? "spinner" : n,
+                customClassName: a !== void 0 ? a : void 0
               }
-            ) : /* @__PURE__ */ e(
+            ) : /* @__PURE__ */ i(
               "div",
               {
                 style: {
-                  opacity: d || r ? 0.5 : 1,
+                  opacity: s || r ? 0.5 : 1,
                   pointerEvents: "none",
                   width: "100%",
                   height: "100%",
@@ -277,10 +276,10 @@ class P extends I.Component {
                   alignItems: "center",
                   justifyContent: "center"
                 },
-                children: t
+                children: e
               }
             ),
-            T && o !== void 0 && u !== "selected" && /* @__PURE__ */ e(
+            T && o !== void 0 && b !== "selected" && /* @__PURE__ */ i(
               E,
               {
                 pin: o?.pin || "BOTTOM",
@@ -291,13 +290,13 @@ class P extends I.Component {
           ]
         }
       ),
-      p !== void 0 && this.Status()
+      !u && this.Status()
     ] });
   };
   // Render
   render() {
-    const { type: s, isLink: i } = this.props;
-    return s !== "icon" ? i ? this.LinkButton() : this.Button() : this.Icon();
+    const { type: t, isLink: n } = this.props;
+    return t !== "icon" ? n ? this.LinkButton() : this.Button() : this.Icon();
   }
 }
 export {

package/dist/components/actions/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/actions/button/Button.tsx"],"sourcesContent":["import React from 'react'\nimport layouts from '@styles/layouts.module.scss'\nimport Tooltip from '@components/tags/tooltip/Tooltip'\nimport IconChip from '@components/tags/icon-chip/IconChip'\nimport Chip from '@components/tags/chip/Chip'\nimport Icon from '@components/assets/icon/Icon'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport type { IconList } from '@tps/icon.types'\nimport './button.scss'\n\nexport interface ButtonProps {\n  /**\n   * Visual style of the button\n   */\n  type:\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'destructive'\n    | 'alternative'\n    | 'icon'\n  /**\n   * Size of the button\n   * @default 'default'\n   */\n  size?: 'small' | 'default' | 'large'\n  /**\n   * Icon name to display in the button\n   */\n  icon?: IconList\n  /**\n   * Custom CSS class for the icon\n   */\n  iconClassName?: string\n  /**\n   * Custom icon element to replace the default icon\n   */\n  customIcon?: React.ReactElement\n  /**\n   * Text label of the button\n   */\n  label?: string\n  /**\n   * Visual state of the button\n   * @default 'default'\n   */\n  state?: 'default' | 'selected'\n  /**\n   * URL for link buttons\n   */\n  url?: string\n  /**\n   * Helper tooltip configuration\n   */\n  helper?: {\n    /** Tooltip content */\n    label: string | React.ReactNode\n    /** Tooltip position */\n    pin?: 'TOP' | 'BOTTOM'\n    /** Tooltip display type */\n    type?: 'MULTI_LINE' | 'SINGLE_LINE'\n  }\n  /**\n   * Preview tooltip configuration with image\n   */\n  preview?: {\n    /** Preview image URL */\n    image: string\n    /** Preview text */\n    text: string | React.ReactNode\n    /** Preview position */\n    pin?: 'TOP' | 'BOTTOM'\n  }\n  /**\n   * Warning tooltip configuration\n   */\n  warning?: {\n    /** Warning message */\n    label: string | React.ReactNode\n    /** Warning position */\n    pin?: 'TOP' | 'BOTTOM'\n    /** Warning display type */\n    type?: 'MULTI_LINE' | 'SINGLE_LINE'\n  }\n  /**\n   * Feature identifier for tracking\n   */\n  feature?: string\n  /**\n   * Whether the button has multiple actions\n   * @default false\n   */\n  hasMultipleActions?: boolean\n  /**\n   * Whether the button should render as a link\n   * @default false\n   */\n  isLink?: boolean\n  /**\n   * Whether the button should auto-focus on mount\n   * @default false\n   */\n  isAutofocus?: boolean\n  /**\n   * Reflow configuration for responsive behavior\n   * @default { isEnabled: false, icon: 'adjust' }\n   */\n  shouldReflow?: {\n    /** Whether reflow is enabled */\n    isEnabled: boolean\n    /** Icon to show when reflowed */\n    icon: IconList\n  }\n  /**\n   * Whether the button is in loading state\n   * @default false\n   */\n  isLoading?: boolean\n  /**\n   * Whether the button is blocked (shows unblock action)\n   * @default false\n   */\n  isBlocked?: boolean\n  /**\n   * Whether the button is disabled\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * Whether to show a \"New\" badge\n   * @default false\n   */\n  isNew?: boolean\n  /**\n   * Click handler for the button\n   */\n  action?: React.MouseEventHandler & React.KeyboardEventHandler\n  /**\n   * Handler called when unblock is clicked\n   */\n  onUnblock?: React.MouseEventHandler & React.KeyboardEventHandler\n}\n\ninterface ButtonStates {\n  isTooltipVisible: boolean\n  documentWidth: number\n}\n\nexport default class Button extends React.Component<ButtonProps, ButtonStates> {\n  buttonRef: React.RefObject<HTMLButtonElement> = React.createRef()\n\n  static defaultProps: Partial<ButtonProps> = {\n    size: 'default',\n    state: 'default',\n    hasMultipleActions: false,\n    isLink: false,\n    shouldReflow: { isEnabled: false, icon: 'adjust' },\n    isAutofocus: false,\n    isLoading: false,\n    isBlocked: false,\n    isDisabled: false,\n    isNew: false,\n  }\n\n  constructor(props: ButtonProps) {\n    super(props)\n    this.state = {\n      isTooltipVisible: false,\n      documentWidth: document.documentElement.clientWidth,\n    }\n  }\n\n  // Lifecycle\n  componentDidMount = () => {\n    const { isAutofocus } = this.props\n\n    if (isAutofocus)\n      setTimeout(() => {\n        if (this.buttonRef.current) this.buttonRef.current.focus()\n      }, 1)\n\n    window.addEventListener('resize', this.handleResize)\n  }\n\n  componentWillUnmount = () => {\n    window.removeEventListener('resize', this.handleResize)\n  }\n\n  // Handlers\n  handleResize = () => {\n    this.setState({ documentWidth: document.documentElement.clientWidth })\n  }\n\n  // Templates\n  Status = () => {\n    const { type, warning, preview, isBlocked, isNew, onUnblock } = this.props\n\n    if (warning || isBlocked || isNew)\n      return (\n        <div className=\"button__status\">\n          {warning !== undefined && (\n            <IconChip\n              iconType=\"PICTO\"\n              iconName=\"warning\"\n              text={warning.label}\n              pin={warning.pin}\n              type={warning.type}\n            />\n          )}\n          {(isBlocked || isNew) && type !== 'icon' && (\n            <Chip\n              preview={preview}\n              isSolo\n              action={isBlocked ? onUnblock : undefined}\n            >\n              {isNew ? 'New' : 'Pro'}\n            </Chip>\n          )}\n        </div>\n      )\n  }\n\n  Button = () => {\n    const {\n      type,\n      icon,\n      size,\n      helper,\n      feature,\n      hasMultipleActions,\n      isLoading,\n      isDisabled,\n      isBlocked,\n      action,\n      label,\n      shouldReflow,\n    } = this.props\n    const { isTooltipVisible, documentWidth } = this.state\n\n    const isReflowActive = shouldReflow?.isEnabled && documentWidth <= 460\n\n    const getButtonLabel = () => (isReflowActive ? undefined : label)\n    const getTooltipLabel = () => (isReflowActive ? label : helper?.label)\n    const hasTooltipContent = () =>\n      isReflowActive ? label !== undefined : helper !== undefined\n    const getIconName = () =>\n      isReflowActive && shouldReflow?.icon !== undefined\n        ? shouldReflow.icon\n        : icon\n\n    return (\n      <div className={layouts['snackbar--medium']}>\n        <button\n          role=\"button\"\n          className={doClassnames([\n            'button',\n            `button--${type}`,\n            `button--${size}`,\n            isLoading && 'button--loading',\n            isBlocked && 'button--blocked',\n          ])}\n          data-feature={feature}\n          disabled={isDisabled || isBlocked}\n          aria-label={\n            typeof (getButtonLabel() || helper?.label) === 'string'\n              ? ((getButtonLabel() || helper?.label) as string)\n              : undefined\n          }\n          aria-disabled={isDisabled || isBlocked}\n          aria-busy={isLoading}\n          onKeyDown={(e) => {\n            if (\n              (e.key === ' ' || e.key === 'Enter') &&\n              (!isDisabled || !isBlocked)\n            )\n              action?.(e)\n            if (e.key === 'Escape') (e.target as HTMLElement).blur()\n          }}\n          onMouseDown={!(isDisabled || isBlocked) ? action : undefined}\n          onMouseEnter={() => {\n            if (hasTooltipContent()) this.setState({ isTooltipVisible: true })\n          }}\n          onMouseLeave={() => {\n            if (hasTooltipContent()) this.setState({ isTooltipVisible: false })\n          }}\n          onFocus={() => {\n            if (hasTooltipContent()) this.setState({ isTooltipVisible: true })\n          }}\n          onBlur={() => {\n            if (hasTooltipContent()) this.setState({ isTooltipVisible: false })\n          }}\n          tabIndex={0}\n          ref={this.buttonRef}\n        >\n          {getIconName() !== undefined && (\n            <span\n              className=\"button__icon\"\n              aria-hidden=\"true\"\n            >\n              <Icon\n                type=\"PICTO\"\n                iconName={getIconName()}\n              />\n            </span>\n          )}\n          {getButtonLabel() !== undefined && (\n            <span className=\"button__label\">{getButtonLabel()}</span>\n          )}\n          {isLoading && (\n            <div\n              className=\"button__loader\"\n              aria-hidden=\"true\"\n            >\n              <Icon\n                type=\"PICTO\"\n                iconName=\"spinner\"\n                customClassName=\"button__spinner\"\n              />\n            </div>\n          )}\n          {hasMultipleActions && (\n            <span\n              className=\"button__caret\"\n              aria-hidden=\"true\"\n            >\n              <Icon\n                type=\"PICTO\"\n                iconName=\"chevron-down\"\n              />\n            </span>\n          )}\n          {isTooltipVisible && hasTooltipContent() && (\n            <Tooltip\n              pin={helper?.pin || 'BOTTOM'}\n              type={helper?.type || 'SINGLE_LINE'}\n            >\n              {getTooltipLabel()}\n            </Tooltip>\n          )}\n        </button>\n        {this.Status()}\n      </div>\n    )\n  }\n\n  LinkButton = () => {\n    const { type, size, feature, label, url } = this.props\n\n    return (\n      <button\n        role=\"link\"\n        className={doClassnames([\n          'button',\n          `button--${type}`,\n          `button--${size}`,\n        ])}\n        data-feature={feature}\n        ref={this.buttonRef}\n        aria-label={label}\n        tabIndex={0}\n      >\n        <a\n          href={url}\n          target=\"_blank\"\n          rel=\"noreferrer\"\n          className=\"button__label\"\n          aria-label={label}\n        >\n          {label}\n        </a>\n      </button>\n    )\n  }\n\n  Icon = () => {\n    const {\n      size,\n      icon,\n      iconClassName,\n      customIcon,\n      feature,\n      state,\n      helper,\n      warning,\n      isLoading,\n      isDisabled,\n      isBlocked,\n      isNew,\n      action,\n    } = this.props\n    const { isTooltipVisible } = this.state\n\n    return (\n      <div className={layouts['snackbar--medium']}>\n        <button\n          role=\"button\"\n          data-feature={feature}\n          className={doClassnames([\n            'icon-button',\n            `icon-button--${size}`,\n            state === 'selected' && 'icon-button--selected',\n            isNew && 'icon-button--new',\n            isLoading && 'button--loading',\n          ])}\n          disabled={isDisabled || isBlocked}\n          aria-label={typeof helper?.label === 'string' ? helper.label : icon}\n          aria-disabled={isDisabled || isBlocked}\n          aria-pressed={state === 'selected'}\n          aria-busy={isLoading}\n          onKeyDown={(e) => {\n            if (\n              (e.key === ' ' || e.key === 'Enter') &&\n              !(isDisabled || isBlocked)\n            )\n              action?.(e)\n            if (e.key === 'Escape') (e.target as HTMLElement).blur()\n          }}\n          onMouseDown={!(isDisabled || isBlocked) ? action : undefined}\n          onMouseEnter={() => {\n            if (helper !== undefined) this.setState({ isTooltipVisible: true })\n          }}\n          onMouseLeave={() => {\n            if (helper !== undefined) this.setState({ isTooltipVisible: false })\n          }}\n          onFocus={() => {\n            if (helper !== undefined) this.setState({ isTooltipVisible: true })\n          }}\n          onBlur={() => {\n            if (helper !== undefined) this.setState({ isTooltipVisible: false })\n          }}\n          tabIndex={0}\n          ref={this.buttonRef}\n        >\n          {customIcon === undefined ? (\n            <Icon\n              type=\"PICTO\"\n              iconName={isLoading ? 'spinner' : icon}\n              customClassName={\n                iconClassName !== undefined ? iconClassName : undefined\n              }\n            />\n          ) : (\n            <div\n              style={{\n                opacity: isDisabled || isBlocked ? 0.5 : 1,\n                pointerEvents: 'none',\n                width: '100%',\n                height: '100%',\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              {customIcon}\n            </div>\n          )}\n          {isTooltipVisible && helper !== undefined && state !== 'selected' && (\n            <Tooltip\n              pin={helper?.pin || 'BOTTOM'}\n              type={helper?.type || 'SINGLE_LINE'}\n            >\n              {helper?.label}\n            </Tooltip>\n          )}\n        </button>\n        {warning !== undefined && this.Status()}\n      </div>\n    )\n  }\n\n  // Render\n  render() {\n    const { type, isLink } = this.props\n\n    if (type !== 'icon') return isLink ? this.LinkButton() : this.Button()\n    return this.Icon()\n  }\n}\n"],"names":["Button","React","props","isAutofocus","type","warning","preview","isBlocked","isNew","onUnblock","jsxs","jsx","IconChip","Chip","icon","size","helper","feature","hasMultipleActions","isLoading","isDisabled","action","label","shouldReflow","isTooltipVisible","documentWidth","isReflowActive","getButtonLabel","getTooltipLabel","hasTooltipContent","getIconName","layouts","doClassnames","e","Icon","Tooltip","url","iconClassName","customIcon","state","isLink"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/actions/button/Button.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport layouts from '@styles/layouts.module.scss'\nimport Tooltip from '@components/tags/tooltip/Tooltip'\nimport IconChip from '@components/tags/icon-chip/IconChip'\nimport Chip from '@components/tags/chip/Chip'\nimport Icon from '@components/assets/icon/Icon'\nimport type { IconList } from '@tps/icon.types'\nimport './button.scss'\n\nexport interface ButtonProps {\n  /**\n   * Visual style of the button\n   */\n  type:\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'destructive'\n    | 'alternative'\n    | 'icon'\n  /**\n   * Size of the button\n   * @default 'default'\n   */\n  size?: 'small' | 'default' | 'large'\n  /**\n   * Icon name to display in the button\n   */\n  icon?: IconList\n  /**\n   * Custom CSS class for the icon\n   */\n  iconClassName?: string\n  /**\n   * Custom icon element to replace the default icon\n   */\n  customIcon?: React.ReactElement\n  /**\n   * Text label of the button\n   */\n  label?: string\n  /**\n   * Visual state of the button\n   * @default 'default'\n   */\n  state?: 'default' | 'selected'\n  /**\n   * URL for link buttons\n   */\n  url?: string\n  /**\n   * Helper tooltip configuration\n   */\n  helper?: {\n    /** Tooltip content */\n    label: string | React.ReactNode\n    /** Tooltip position */\n    pin?: 'TOP' | 'BOTTOM'\n    /** Tooltip display type */\n    type?: 'MULTI_LINE' | 'SINGLE_LINE'\n  }\n  /**\n   * Preview tooltip configuration with image\n   */\n  preview?: {\n    /** Preview image URL */\n    image: string\n    /** Preview text */\n    text: string | React.ReactNode\n    /** Preview position */\n    pin?: 'TOP' | 'BOTTOM'\n  }\n  /**\n   * Warning tooltip configuration\n   */\n  warning?: {\n    /** Warning message */\n    label: string | React.ReactNode\n    /** Warning position */\n    pin?: 'TOP' | 'BOTTOM'\n    /** Warning display type */\n    type?: 'MULTI_LINE' | 'SINGLE_LINE'\n  }\n  /**\n   * Feature identifier for tracking\n   */\n  feature?: string\n  /**\n   * Whether the button has multiple actions\n   * @default false\n   */\n  hasMultipleActions?: boolean\n  /**\n   * Whether the button should render as a link\n   * @default false\n   */\n  isLink?: boolean\n  /**\n   * Whether the button should auto-focus on mount\n   * @default false\n   */\n  isAutofocus?: boolean\n  /**\n   * Reflow configuration for responsive behavior\n   * @default { isEnabled: false, icon: 'adjust' }\n   */\n  shouldReflow?: {\n    /** Whether reflow is enabled */\n    isEnabled: boolean\n    /** Icon to show when reflowed */\n    icon: IconList\n  }\n  /**\n   * Whether the button is in loading state\n   * @default false\n   */\n  isLoading?: boolean\n  /**\n   * Whether the button is blocked (shows unblock action)\n   * @default false\n   */\n  isBlocked?: boolean\n  /**\n   * Whether the button is disabled\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * Whether to show a \"New\" badge\n   * @default false\n   */\n  isNew?: boolean\n  /**\n   * Click handler for the button\n   */\n  action?: React.MouseEventHandler & React.KeyboardEventHandler\n  /**\n   * Handler called when unblock is clicked\n   */\n  onUnblock?: React.MouseEventHandler & React.KeyboardEventHandler\n}\n\ninterface ButtonStates {\n  isTooltipVisible: boolean\n  documentWidth: number\n}\n\nexport default class Button extends React.Component<ButtonProps, ButtonStates> {\n  buttonRef: React.RefObject<HTMLButtonElement> = React.createRef()\n\n  static defaultProps: Partial<ButtonProps> = {\n    size: 'default',\n    state: 'default',\n    hasMultipleActions: false,\n    isLink: false,\n    shouldReflow: { isEnabled: false, icon: 'adjust' },\n    isAutofocus: false,\n    isLoading: false,\n    isBlocked: false,\n    isDisabled: false,\n    isNew: false,\n  }\n\n  constructor(props: ButtonProps) {\n    super(props)\n    this.state = {\n      isTooltipVisible: false,\n      documentWidth: document.documentElement.clientWidth,\n    }\n  }\n\n  // Lifecycle\n  componentDidMount = () => {\n    const { isAutofocus } = this.props\n\n    if (isAutofocus)\n      setTimeout(() => {\n        if (this.buttonRef.current) this.buttonRef.current.focus()\n      }, 1)\n\n    window.addEventListener('resize', this.handleResize)\n  }\n\n  componentWillUnmount = () => {\n    window.removeEventListener('resize', this.handleResize)\n  }\n\n  // Handlers\n  handleResize = () => {\n    this.setState({ documentWidth: document.documentElement.clientWidth })\n  }\n\n  // Templates\n  Status = () => {\n    const { warning, preview, isBlocked, isNew, onUnblock } = this.props\n\n    if (warning || isBlocked || isNew)\n      return (\n        <div className=\"button__status\">\n          {warning !== undefined && (\n            <IconChip\n              iconType=\"PICTO\"\n              iconName=\"warning\"\n              text={warning.label}\n              pin={warning.pin}\n              type={warning.type}\n            />\n          )}\n          {(isBlocked || isNew) && (\n            <Chip\n              preview={preview}\n              isSolo\n              action={isBlocked ? onUnblock : undefined}\n            >\n              {isNew ? 'New' : 'Pro'}\n            </Chip>\n          )}\n        </div>\n      )\n  }\n\n  Button = () => {\n    const {\n      type,\n      icon,\n      size,\n      helper,\n      feature,\n      hasMultipleActions,\n      isLoading,\n      isDisabled,\n      isBlocked,\n      action,\n      label,\n      shouldReflow,\n    } = this.props\n    const { isTooltipVisible, documentWidth } = this.state\n\n    const isReflowActive = shouldReflow?.isEnabled && documentWidth <= 460\n\n    const getButtonLabel = () => (isReflowActive ? undefined : label)\n    const getTooltipLabel = () => (isReflowActive ? label : helper?.label)\n    const hasTooltipContent = () =>\n      isReflowActive ? label !== undefined : helper !== undefined\n    const getIconName = () =>\n      isReflowActive && shouldReflow?.icon !== undefined\n        ? shouldReflow.icon\n        : icon\n\n    return (\n      <div className={layouts['snackbar--medium']}>\n        <button\n          role=\"button\"\n          className={doClassnames([\n            'button',\n            `button--${type}`,\n            `button--${size}`,\n            isLoading && 'button--loading',\n            isBlocked && 'button--blocked',\n          ])}\n          data-feature={feature}\n          disabled={isDisabled || isBlocked}\n          aria-label={\n            typeof (getButtonLabel() || helper?.label) === 'string'\n              ? ((getButtonLabel() || helper?.label) as string)\n              : undefined\n          }\n          aria-disabled={isDisabled || isBlocked}\n          aria-busy={isLoading}\n          onKeyDown={(e) => {\n            if (\n              (e.key === ' ' || e.key === 'Enter') &&\n              (!isDisabled || !isBlocked)\n            )\n              action?.(e)\n            if (e.key === 'Escape') (e.target as HTMLElement).blur()\n          }}\n          onMouseDown={!(isDisabled || isBlocked) ? action : undefined}\n          onMouseEnter={() => {\n            if (hasTooltipContent()) this.setState({ isTooltipVisible: true })\n          }}\n          onMouseLeave={() => {\n            if (hasTooltipContent()) this.setState({ isTooltipVisible: false })\n          }}\n          onFocus={() => {\n            if (hasTooltipContent()) this.setState({ isTooltipVisible: true })\n          }}\n          onBlur={() => {\n            if (hasTooltipContent()) this.setState({ isTooltipVisible: false })\n          }}\n          tabIndex={0}\n          ref={this.buttonRef}\n        >\n          {getIconName() !== undefined && (\n            <span\n              className=\"button__icon\"\n              aria-hidden=\"true\"\n            >\n              <Icon\n                type=\"PICTO\"\n                iconName={getIconName()}\n              />\n            </span>\n          )}\n          {getButtonLabel() !== undefined && (\n            <span className=\"button__label\">{getButtonLabel()}</span>\n          )}\n          {isLoading && (\n            <div\n              className=\"button__loader\"\n              aria-hidden=\"true\"\n            >\n              <Icon\n                type=\"PICTO\"\n                iconName=\"spinner\"\n                customClassName=\"button__spinner\"\n              />\n            </div>\n          )}\n          {hasMultipleActions && (\n            <span\n              className=\"button__caret\"\n              aria-hidden=\"true\"\n            >\n              <Icon\n                type=\"PICTO\"\n                iconName=\"chevron-down\"\n              />\n            </span>\n          )}\n          {isTooltipVisible && hasTooltipContent() && (\n            <Tooltip\n              pin={helper?.pin || 'BOTTOM'}\n              type={helper?.type || 'SINGLE_LINE'}\n            >\n              {getTooltipLabel()}\n            </Tooltip>\n          )}\n        </button>\n        {this.Status()}\n      </div>\n    )\n  }\n\n  LinkButton = () => {\n    const { type, size, feature, label, url } = this.props\n\n    return (\n      <button\n        role=\"link\"\n        className={doClassnames([\n          'button',\n          `button--${type}`,\n          `button--${size}`,\n        ])}\n        data-feature={feature}\n        ref={this.buttonRef}\n        aria-label={label}\n        tabIndex={0}\n      >\n        <a\n          href={url}\n          target=\"_blank\"\n          rel=\"noreferrer\"\n          className=\"button__label\"\n          aria-label={label}\n        >\n          {label}\n        </a>\n      </button>\n    )\n  }\n\n  Icon = () => {\n    const {\n      size,\n      icon,\n      iconClassName,\n      customIcon,\n      feature,\n      state,\n      helper,\n      isLoading,\n      isDisabled,\n      isBlocked,\n      isNew,\n      action,\n    } = this.props\n    const { isTooltipVisible } = this.state\n\n    return (\n      <div className={layouts['snackbar--medium']}>\n        <button\n          role=\"button\"\n          data-feature={feature}\n          className={doClassnames([\n            'icon-button',\n            `icon-button--${size}`,\n            state === 'selected' && 'icon-button--selected',\n            isNew && 'icon-button--new',\n            isLoading && 'button--loading',\n          ])}\n          disabled={isDisabled || isBlocked}\n          aria-label={typeof helper?.label === 'string' ? helper.label : icon}\n          aria-disabled={isDisabled || isBlocked}\n          aria-pressed={state === 'selected'}\n          aria-busy={isLoading}\n          onKeyDown={(e) => {\n            if (\n              (e.key === ' ' || e.key === 'Enter') &&\n              !(isDisabled || isBlocked)\n            )\n              action?.(e)\n            if (e.key === 'Escape') (e.target as HTMLElement).blur()\n          }}\n          onMouseDown={!(isDisabled || isBlocked) ? action : undefined}\n          onMouseEnter={() => {\n            if (helper !== undefined) this.setState({ isTooltipVisible: true })\n          }}\n          onMouseLeave={() => {\n            if (helper !== undefined) this.setState({ isTooltipVisible: false })\n          }}\n          onFocus={() => {\n            if (helper !== undefined) this.setState({ isTooltipVisible: true })\n          }}\n          onBlur={() => {\n            if (helper !== undefined) this.setState({ isTooltipVisible: false })\n          }}\n          tabIndex={0}\n          ref={this.buttonRef}\n        >\n          {customIcon === undefined ? (\n            <Icon\n              type=\"PICTO\"\n              iconName={isLoading ? 'spinner' : icon}\n              customClassName={\n                iconClassName !== undefined ? iconClassName : undefined\n              }\n            />\n          ) : (\n            <div\n              style={{\n                opacity: isDisabled || isBlocked ? 0.5 : 1,\n                pointerEvents: 'none',\n                width: '100%',\n                height: '100%',\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              {customIcon}\n            </div>\n          )}\n          {isTooltipVisible && helper !== undefined && state !== 'selected' && (\n            <Tooltip\n              pin={helper?.pin || 'BOTTOM'}\n              type={helper?.type || 'SINGLE_LINE'}\n            >\n              {helper?.label}\n            </Tooltip>\n          )}\n        </button>\n        {!isNew && this.Status()}\n      </div>\n    )\n  }\n\n  // Render\n  render() {\n    const { type, isLink } = this.props\n\n    if (type !== 'icon') return isLink ? this.LinkButton() : this.Button()\n    return this.Icon()\n  }\n}\n"],"names":["Button","React","props","isAutofocus","warning","preview","isBlocked","isNew","onUnblock","jsxs","jsx","IconChip","Chip","type","icon","size","helper","feature","hasMultipleActions","isLoading","isDisabled","action","label","shouldReflow","isTooltipVisible","documentWidth","isReflowActive","getButtonLabel","getTooltipLabel","hasTooltipContent","getIconName","layouts","doClassnames","e","Icon","Tooltip","url","iconClassName","customIcon","state","isLink"],"mappings":"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"}

package/dist/components/actions/card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/card/Card.tsx"],"names":[],"mappings":";AAIA,OAAO,aAAa,CAAA;AAGpB,UAAU,SAAS;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,MAAM,EAAE,CACN,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,KAC5D,IAAI,CAAA;CACV;AAED,QAAA,MAAM,IAAI,UAAW,SAAS,4CAmF7B,CAAA;AAED,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/card/Card.tsx"],"names":[],"mappings":";AAKA,OAAO,aAAa,CAAA;AAEpB,UAAU,SAAS;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,MAAM,EAAE,CACN,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,KAC5D,IAAI,CAAA;CACV;AAED,QAAA,MAAM,IAAI,UAAW,SAAS,4CAmF7B,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/components/actions/card/Card.js

@@ -1,10 +1,10 @@
 import '../../../assets/Card.css';
 import { jsxs as a, jsx as e, Fragment as g } from "react/jsx-runtime";
 import { useState as y } from "react";
+import { t as s } from "../../../do-classnames-DSDFCvzy.js";
 import o from "../../../styles/texts/texts.module.js";
 import v from "../../tags/chip/Chip.js";
 import x from "../../assets/thumbnail/Thumbnail.js";
-import { t as s } from "../../../do-classnames-DSDFCvzy.js";
 const M = (f) => {
   const [i, t] = y(!1), {
     src: l,

package/dist/components/actions/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../src/components/actions/card/Card.tsx"],"sourcesContent":["import { useState } from 'react'\nimport texts from '@styles/texts/texts.module.scss'\nimport Chip from '@components/tags/chip/Chip'\nimport Thumbnail from '@components/assets/thumbnail/Thumbnail'\nimport './card.scss'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\n\ninterface CardProps {\n  /**\n   * Image source URL for the card thumbnail\n   */\n  src?: string\n  /**\n   * Tag label of the card\n   */\n  tag?: string\n  /**\n   * Main title of the card\n   */\n  title?: string\n  /**\n   * Subtitle text of the card\n   */\n  subtitle?: string\n  /**\n   * Rich text content to display in the card\n   */\n  richText?: React.ReactNode\n  /**\n   * Action buttons to display on hover\n   */\n  actions?: React.ReactNode\n  /**\n   * Whether the card should fill available space\n   * @default false\n   */\n  shouldFill?: boolean\n  /**\n   * Click handler for the card\n   */\n  action: (\n    event: React.MouseEvent<Element> | React.KeyboardEvent<Element>\n  ) => void\n}\n\nconst Card = (props: CardProps) => {\n  const [isActionsVisible, setActionsVisible] = useState<boolean>(false)\n  const {\n    src,\n    tag,\n    title,\n    subtitle,\n    richText,\n    actions,\n    shouldFill = false,\n    action,\n  } = props\n\n  return (\n    <div\n      className={doClassnames(['card', shouldFill && 'card--fill'])}\n      role=\"article\"\n      onMouseEnter={() => setActionsVisible(true)}\n      onMouseLeave={() => setActionsVisible(false)}\n      onFocus={() => setActionsVisible(true)}\n      onBlur={() => setActionsVisible(false)}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') action(e)\n        if (e.key === 'Escape') (e.target as HTMLElement).blur()\n      }}\n      onMouseDown={action}\n      tabIndex={0}\n    >\n      {tag !== undefined && (\n        <div\n          className=\"card__tags\"\n          role=\"group\"\n        >\n          <Chip isSolo>{tag}</Chip>\n        </div>\n      )}\n      {src && (\n        <div\n          className=\"card__asset\"\n          role=\"group\"\n        >\n          <Thumbnail src={src} />\n          {actions && (\n            <div\n              className={'card__actions'}\n              role=\"group\"\n              aria-hidden={!isActionsVisible}\n            >\n              {isActionsVisible && actions}\n            </div>\n          )}\n        </div>\n      )}\n      <div\n        className=\"card__text\"\n        role=\"contentinfo\"\n      >\n        {title && (\n          <span\n            className={doClassnames([\n              texts.type,\n              texts['type--xlarge'],\n              texts['type--bold'],\n            ])}\n            role=\"heading\"\n            aria-level={3}\n          >\n            {title}\n          </span>\n        )}\n        {subtitle && (\n          <span\n            className={doClassnames([texts.type, texts['type--large']])}\n            role=\"note\"\n          >\n            {subtitle}\n          </span>\n        )}\n\n        {richText && <>{richText}</>}\n      </div>\n    </div>\n  )\n}\n\nexport default Card\n"],"names":["Card","props","isActionsVisible","setActionsVisible","useState","src","tag","title","subtitle","richText","actions","shouldFill","action","jsxs","doClassnames","e","jsx","Chip","Thumbnail","texts"],"mappings":";;;;;;AA6CA,MAAMA,IAAO,CAACC,MAAqB;AACjC,QAAM,CAACC,GAAkBC,CAAiB,IAAIC,EAAkB,EAAK,GAC/D;AAAA,IACJ,KAAAC;AAAA,IACA,KAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,QAAAC;AAAA,EAAA,IACEX;AAEJ,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAa,CAAC,QAAQH,KAAc,YAAY,CAAC;AAAA,MAC5D,MAAK;AAAA,MACL,cAAc,MAAMR,EAAkB,EAAI;AAAA,MAC1C,cAAc,MAAMA,EAAkB,EAAK;AAAA,MAC3C,SAAS,MAAMA,EAAkB,EAAI;AAAA,MACrC,QAAQ,MAAMA,EAAkB,EAAK;AAAA,MACrC,WAAW,CAACY,MAAM;AAChB,SAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,UAAYA,CAAC,GAC5CA,EAAE,QAAQ,YAAWA,EAAE,OAAuB,KAAA;AAAA,MACpD;AAAA,MACA,aAAaH;AAAA,MACb,UAAU;AAAA,MAET,UAAA;AAAA,QAAAN,MAAQ,UACP,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEL,UAAA,gBAAAA,EAACC,GAAA,EAAK,QAAM,IAAE,UAAAX,EAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGrBD,KACC,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEL,UAAA;AAAA,cAAA,gBAAAG,EAACE,KAAU,KAAAb,GAAU;AAAA,cACpBK,KACC,gBAAAM;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,kBACX,MAAK;AAAA,kBACL,eAAa,CAACd;AAAA,kBAEb,UAAAA,KAAoBQ;AAAA,gBAAA;AAAA,cAAA;AAAA,YACvB;AAAA,UAAA;AAAA,QAAA;AAAA,QAIN,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEJ,UAAA;AAAA,cAAAN,KACC,gBAAAS;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWF,EAAa;AAAA,oBACtBK,EAAM;AAAA,oBACNA,EAAM,cAAc;AAAA,oBACpBA,EAAM,YAAY;AAAA,kBAAA,CACnB;AAAA,kBACD,MAAK;AAAA,kBACL,cAAY;AAAA,kBAEX,UAAAZ;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGJC,KACC,gBAAAQ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWF,EAAa,CAACK,EAAM,MAAMA,EAAM,aAAa,CAAC,CAAC;AAAA,kBAC1D,MAAK;AAAA,kBAEJ,UAAAX;AAAA,gBAAA;AAAA,cAAA;AAAA,cAIJC,4BAAe,UAAAA,EAAA,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAC3B;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Card.js","sources":["../../../../src/components/actions/card/Card.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport texts from '@styles/texts/texts.module.scss'\nimport Chip from '@components/tags/chip/Chip'\nimport Thumbnail from '@components/assets/thumbnail/Thumbnail'\nimport './card.scss'\n\ninterface CardProps {\n  /**\n   * Image source URL for the card thumbnail\n   */\n  src?: string\n  /**\n   * Tag label of the card\n   */\n  tag?: string\n  /**\n   * Main title of the card\n   */\n  title?: string\n  /**\n   * Subtitle text of the card\n   */\n  subtitle?: string\n  /**\n   * Rich text content to display in the card\n   */\n  richText?: React.ReactNode\n  /**\n   * Action buttons to display on hover\n   */\n  actions?: React.ReactNode\n  /**\n   * Whether the card should fill available space\n   * @default false\n   */\n  shouldFill?: boolean\n  /**\n   * Click handler for the card\n   */\n  action: (\n    event: React.MouseEvent<Element> | React.KeyboardEvent<Element>\n  ) => void\n}\n\nconst Card = (props: CardProps) => {\n  const [isActionsVisible, setActionsVisible] = useState<boolean>(false)\n  const {\n    src,\n    tag,\n    title,\n    subtitle,\n    richText,\n    actions,\n    shouldFill = false,\n    action,\n  } = props\n\n  return (\n    <div\n      className={doClassnames(['card', shouldFill && 'card--fill'])}\n      role=\"article\"\n      onMouseEnter={() => setActionsVisible(true)}\n      onMouseLeave={() => setActionsVisible(false)}\n      onFocus={() => setActionsVisible(true)}\n      onBlur={() => setActionsVisible(false)}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') action(e)\n        if (e.key === 'Escape') (e.target as HTMLElement).blur()\n      }}\n      onMouseDown={action}\n      tabIndex={0}\n    >\n      {tag !== undefined && (\n        <div\n          className=\"card__tags\"\n          role=\"group\"\n        >\n          <Chip isSolo>{tag}</Chip>\n        </div>\n      )}\n      {src && (\n        <div\n          className=\"card__asset\"\n          role=\"group\"\n        >\n          <Thumbnail src={src} />\n          {actions && (\n            <div\n              className={'card__actions'}\n              role=\"group\"\n              aria-hidden={!isActionsVisible}\n            >\n              {isActionsVisible && actions}\n            </div>\n          )}\n        </div>\n      )}\n      <div\n        className=\"card__text\"\n        role=\"contentinfo\"\n      >\n        {title && (\n          <span\n            className={doClassnames([\n              texts.type,\n              texts['type--xlarge'],\n              texts['type--bold'],\n            ])}\n            role=\"heading\"\n            aria-level={3}\n          >\n            {title}\n          </span>\n        )}\n        {subtitle && (\n          <span\n            className={doClassnames([texts.type, texts['type--large']])}\n            role=\"note\"\n          >\n            {subtitle}\n          </span>\n        )}\n\n        {richText && <>{richText}</>}\n      </div>\n    </div>\n  )\n}\n\nexport default Card\n"],"names":["Card","props","isActionsVisible","setActionsVisible","useState","src","tag","title","subtitle","richText","actions","shouldFill","action","jsxs","doClassnames","e","jsx","Chip","Thumbnail","texts"],"mappings":";;;;;;AA6CA,MAAMA,IAAO,CAACC,MAAqB;AACjC,QAAM,CAACC,GAAkBC,CAAiB,IAAIC,EAAkB,EAAK,GAC/D;AAAA,IACJ,KAAAC;AAAA,IACA,KAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,QAAAC;AAAA,EAAA,IACEX;AAEJ,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAa,CAAC,QAAQH,KAAc,YAAY,CAAC;AAAA,MAC5D,MAAK;AAAA,MACL,cAAc,MAAMR,EAAkB,EAAI;AAAA,MAC1C,cAAc,MAAMA,EAAkB,EAAK;AAAA,MAC3C,SAAS,MAAMA,EAAkB,EAAI;AAAA,MACrC,QAAQ,MAAMA,EAAkB,EAAK;AAAA,MACrC,WAAW,CAACY,MAAM;AAChB,SAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,UAAYA,CAAC,GAC5CA,EAAE,QAAQ,YAAWA,EAAE,OAAuB,KAAA;AAAA,MACpD;AAAA,MACA,aAAaH;AAAA,MACb,UAAU;AAAA,MAET,UAAA;AAAA,QAAAN,MAAQ,UACP,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEL,UAAA,gBAAAA,EAACC,GAAA,EAAK,QAAM,IAAE,UAAAX,EAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGrBD,KACC,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEL,UAAA;AAAA,cAAA,gBAAAG,EAACE,KAAU,KAAAb,GAAU;AAAA,cACpBK,KACC,gBAAAM;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,kBACX,MAAK;AAAA,kBACL,eAAa,CAACd;AAAA,kBAEb,UAAAA,KAAoBQ;AAAA,gBAAA;AAAA,cAAA;AAAA,YACvB;AAAA,UAAA;AAAA,QAAA;AAAA,QAIN,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEJ,UAAA;AAAA,cAAAN,KACC,gBAAAS;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWF,EAAa;AAAA,oBACtBK,EAAM;AAAA,oBACNA,EAAM,cAAc;AAAA,oBACpBA,EAAM,YAAY;AAAA,kBAAA,CACnB;AAAA,kBACD,MAAK;AAAA,kBACL,cAAY;AAAA,kBAEX,UAAAZ;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGJC,KACC,gBAAAQ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWF,EAAa,CAACK,EAAM,MAAMA,EAAM,aAAa,CAAC,CAAC;AAAA,kBAC1D,MAAK;AAAA,kBAEJ,UAAAX;AAAA,gBAAA;AAAA,cAAA;AAAA,cAIJC,4BAAe,UAAAA,EAAA,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAC3B;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/actions/knob/Knob.js

@@ -1,10 +1,10 @@
 import '../../../assets/Knob.css';
 import { jsxs as k, jsx as n } from "react/jsx-runtime";
 import O from "react";
+import { t as u } from "../../../do-classnames-DSDFCvzy.js";
 import v from "../../../styles/texts/texts.module.js";
 import I from "../../tags/tooltip/Tooltip.js";
 import T from "../../inputs/input/Input.js";
-import { t as u } from "../../../do-classnames-DSDFCvzy.js";
 class D extends O.Component {
   static defaultProps = {
     isBlocked: !1,

package/dist/components/actions/knob/Knob.js.map

@@ -1 +1 @@
-{"version":3,"file":"Knob.js","sources":["../../../../src/components/actions/knob/Knob.tsx"],"sourcesContent":["import React from 'react'\nimport texts from '@styles/texts/texts.module.scss'\nimport Tooltip from '@components/tags/tooltip/Tooltip'\nimport Input from '@components/inputs/input/Input'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport './knob.scss'\n\nexport interface KnobProps {\n  /**\n   * Unique identifier for the knob\n   */\n  id: string\n  /**\n   * Short identifier for the knob\n   */\n  shortId: string\n  /**\n   * Current value of the knob\n   */\n  value: string | number\n  /**\n   * Offset position for the knob display\n   */\n  offset: number\n  /**\n   * Minimum allowed value\n   */\n  min?: string\n  /**\n   * Maximum allowed value\n   */\n  max?: string\n  /**\n   * Helper tooltip configuration\n   */\n  helper?: {\n    /** Tooltip content */\n    label: string | React.ReactNode\n    /** Tooltip display type */\n    type: 'MULTI_LINE' | 'SINGLE_LINE' | 'WITH_IMAGE'\n  }\n  /**\n   * Whether the value can be edited by typing\n   */\n  canBeTyped: boolean\n  /**\n   * Whether the knob is visible\n   */\n  isDisplayed: boolean\n  /**\n   * Whether the knob is blocked\n   * @default false\n   */\n  isBlocked: boolean\n  /**\n   * Whether the knob is disabled\n   * @default false\n   */\n  isDisabled: boolean\n  /**\n   * Custom inline styles\n   */\n  style?: React.CSSProperties\n  /**\n   * Handler for right arrow key\n   */\n  onShiftRight?: React.KeyboardEventHandler<HTMLInputElement>\n  /**\n   * Handler for left arrow key\n   */\n  onShiftLeft?: React.KeyboardEventHandler<HTMLInputElement>\n  /**\n   * Handler for delete key\n   */\n  onDelete?: React.KeyboardEventHandler<HTMLInputElement>\n  /**\n   * Mouse down handler for dragging\n   */\n  onMouseDown: React.MouseEventHandler<HTMLDivElement>\n  /**\n   * Callback when value is validated\n   */\n  onValidStopValue?: (\n    stopId: string,\n    e:\n      | React.FocusEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n  ) => void\n}\n\nexport interface KnobStates {\n  isStopInputOpen: boolean\n  isTooltipOpen: boolean\n  stopInputValue: string | number\n}\n\nexport default class Knob extends React.Component<KnobProps, KnobStates> {\n  static defaultProps: Partial<KnobProps> = {\n    isBlocked: false,\n    isDisabled: false,\n  }\n\n  constructor(props: KnobProps) {\n    super(props)\n    this.state = {\n      isStopInputOpen: false,\n      isTooltipOpen: false,\n      stopInputValue: props.value,\n    }\n  }\n\n  // Handlers\n  keyboardHandler = (\n    action: string,\n    e: React.KeyboardEvent<HTMLInputElement>\n  ) => {\n    const { value, canBeTyped, onShiftRight, onShiftLeft, onDelete } =\n      this.props\n\n    const actions = {\n      ArrowRight: () => {\n        if (onShiftRight !== undefined) onShiftRight(e)\n      },\n      ArrowLeft: () => {\n        if (onShiftLeft !== undefined) onShiftLeft(e)\n      },\n      Enter: () => {\n        if (canBeTyped)\n          this.setState({\n            isStopInputOpen: true,\n            isTooltipOpen: false,\n            stopInputValue: value,\n          })\n      },\n      Escape: () => {\n        ;(e.target as HTMLElement).blur()\n        this.setState({ isStopInputOpen: false })\n      },\n      Backspace: () => {\n        if (onDelete !== undefined) onDelete(e)\n      },\n    }\n\n    if (e.currentTarget === e.target)\n      return actions[\n        action as 'ArrowRight' | 'ArrowLeft' | 'Enter' | 'Escape' | 'Backspace'\n      ]?.()\n  }\n\n  clickHandler = (e: React.MouseEvent<HTMLDivElement>) => {\n    const { canBeTyped, value } = this.props\n\n    if (e.detail === 2 && canBeTyped)\n      this.setState({\n        isStopInputOpen: true,\n        isTooltipOpen: false,\n        stopInputValue: value,\n      })\n  }\n\n  transformStopValue = (value: string | number) => {\n    let newValue = value\n    if (typeof newValue !== 'string') newValue = newValue.toFixed(1)\n    if (newValue.includes('.0')) return (newValue = newValue.replace('.0', ''))\n    return newValue\n  }\n\n  // Render\n  render() {\n    const {\n      id,\n      shortId,\n      value,\n      min,\n      max,\n      offset,\n      helper,\n      style,\n      isDisplayed,\n      isBlocked,\n      isDisabled,\n      onMouseDown,\n      onValidStopValue,\n    } = this.props\n    const { isTooltipOpen, isStopInputOpen, stopInputValue } = this.state\n\n    return (\n      <div\n        className={doClassnames([\n          'knob',\n          isStopInputOpen && 'knob--editing',\n          (isBlocked || isDisabled) && 'knob--disabled',\n        ])}\n        style={{\n          left: `${offset}%`,\n          zIndex: isTooltipOpen ? '2' : '1',\n          ...style,\n        }}\n        data-id={id}\n        data-value={value}\n        role=\"slider\"\n        aria-label={`${shortId} knob, value ${this.transformStopValue(value)}`}\n        aria-valuemin={min ? parseFloat(min) : undefined}\n        aria-valuemax={max ? parseFloat(max) : undefined}\n        aria-valuenow={typeof value === 'number' ? value : parseFloat(value)}\n        aria-valuetext={this.transformStopValue(value).toString()}\n        aria-disabled={isDisabled || isBlocked}\n        aria-readonly={isBlocked}\n        tabIndex={!(isBlocked || isDisabled) ? 0 : -1}\n        onKeyDown={(e) =>\n          !(isBlocked || isDisabled)\n            ? this.keyboardHandler(\n                e.key,\n                e as React.KeyboardEvent<HTMLInputElement>\n              )\n            : undefined\n        }\n        onMouseDown={!(isBlocked || isDisabled) ? onMouseDown : undefined}\n        onMouseEnter={() =>\n          !(isBlocked || isDisabled || isStopInputOpen)\n            ? this.setState({ isTooltipOpen: true })\n            : undefined\n        }\n        onMouseLeave={(e) => {\n          const isFocused = document.activeElement === e.target\n          if (isFocused && !(isBlocked || isDisabled))\n            this.setState({ isTooltipOpen: true })\n          else this.setState({ isTooltipOpen: false })\n        }}\n        onFocus={() =>\n          !(isBlocked || isDisabled)\n            ? this.setState({ isTooltipOpen: true })\n            : undefined\n        }\n        onBlur={() =>\n          !(isBlocked || isDisabled)\n            ? this.setState({ isTooltipOpen: false })\n            : undefined\n        }\n        onClick={(e) =>\n          !(isBlocked || isDisabled) ? this.clickHandler(e) : undefined\n        }\n      >\n        {(isDisplayed || isTooltipOpen) && (\n          <div\n            className={doClassnames(['knob__tooltip'])}\n            role=\"status\"\n          >\n            <span\n              className={doClassnames([texts.type, texts['type--inverse']])}\n            >\n              {this.transformStopValue(value)}\n            </span>\n          </div>\n        )}\n        {isStopInputOpen && (\n          <div\n            className=\"knob__input\"\n            role=\"group\"\n          >\n            <Input\n              type=\"NUMBER\"\n              value={(stopInputValue as number).toFixed(1) ?? '0'}\n              min={min}\n              max={max}\n              step=\"0.1\"\n              feature=\"TYPE_STOP_VALUE\"\n              shouldBlur={true}\n              isAutoFocus={true}\n              isFlex={true}\n              onFocus={() =>\n                this.setState({\n                  stopInputValue: value,\n                })\n              }\n              onBlur={(e: React.FocusEvent<HTMLInputElement>) => {\n                if ((e.target as HTMLInputElement)?.value !== value)\n                  onValidStopValue?.(shortId, e)\n                this.setState({ isStopInputOpen: false })\n              }}\n            />\n          </div>\n        )}\n        <div\n          className={doClassnames(['knob__label'])}\n          role=\"presentation\"\n          aria-hidden=\"true\"\n        >\n          <span className={doClassnames([texts.type])}>{shortId}</span>\n        </div>\n        <div\n          className=\"knob__graduation\"\n          role=\"presentation\"\n          aria-hidden=\"true\"\n        ></div>\n        {helper !== undefined && isTooltipOpen && (\n          <Tooltip type={helper.type}>{helper.label}</Tooltip>\n        )}\n      </div>\n    )\n  }\n}\n"],"names":["Knob","React","props","action","value","canBeTyped","onShiftRight","onShiftLeft","onDelete","actions","e","newValue","id","shortId","min","max","offset","helper","style","isDisplayed","isBlocked","isDisabled","onMouseDown","onValidStopValue","isTooltipOpen","isStopInputOpen","stopInputValue","jsxs","doClassnames","jsx","texts","Input","Tooltip"],"mappings":"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"}
+{"version":3,"file":"Knob.js","sources":["../../../../src/components/actions/knob/Knob.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport texts from '@styles/texts/texts.module.scss'\nimport Tooltip from '@components/tags/tooltip/Tooltip'\nimport Input from '@components/inputs/input/Input'\nimport './knob.scss'\n\nexport interface KnobProps {\n  /**\n   * Unique identifier for the knob\n   */\n  id: string\n  /**\n   * Short identifier for the knob\n   */\n  shortId: string\n  /**\n   * Current value of the knob\n   */\n  value: string | number\n  /**\n   * Offset position for the knob display\n   */\n  offset: number\n  /**\n   * Minimum allowed value\n   */\n  min?: string\n  /**\n   * Maximum allowed value\n   */\n  max?: string\n  /**\n   * Helper tooltip configuration\n   */\n  helper?: {\n    /** Tooltip content */\n    label: string | React.ReactNode\n    /** Tooltip display type */\n    type: 'MULTI_LINE' | 'SINGLE_LINE' | 'WITH_IMAGE'\n  }\n  /**\n   * Whether the value can be edited by typing\n   */\n  canBeTyped: boolean\n  /**\n   * Whether the knob is visible\n   */\n  isDisplayed: boolean\n  /**\n   * Whether the knob is blocked\n   * @default false\n   */\n  isBlocked: boolean\n  /**\n   * Whether the knob is disabled\n   * @default false\n   */\n  isDisabled: boolean\n  /**\n   * Custom inline styles\n   */\n  style?: React.CSSProperties\n  /**\n   * Handler for right arrow key\n   */\n  onShiftRight?: React.KeyboardEventHandler<HTMLInputElement>\n  /**\n   * Handler for left arrow key\n   */\n  onShiftLeft?: React.KeyboardEventHandler<HTMLInputElement>\n  /**\n   * Handler for delete key\n   */\n  onDelete?: React.KeyboardEventHandler<HTMLInputElement>\n  /**\n   * Mouse down handler for dragging\n   */\n  onMouseDown: React.MouseEventHandler<HTMLDivElement>\n  /**\n   * Callback when value is validated\n   */\n  onValidStopValue?: (\n    stopId: string,\n    e:\n      | React.FocusEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n  ) => void\n}\n\nexport interface KnobStates {\n  isStopInputOpen: boolean\n  isTooltipOpen: boolean\n  stopInputValue: string | number\n}\n\nexport default class Knob extends React.Component<KnobProps, KnobStates> {\n  static defaultProps: Partial<KnobProps> = {\n    isBlocked: false,\n    isDisabled: false,\n  }\n\n  constructor(props: KnobProps) {\n    super(props)\n    this.state = {\n      isStopInputOpen: false,\n      isTooltipOpen: false,\n      stopInputValue: props.value,\n    }\n  }\n\n  // Handlers\n  keyboardHandler = (\n    action: string,\n    e: React.KeyboardEvent<HTMLInputElement>\n  ) => {\n    const { value, canBeTyped, onShiftRight, onShiftLeft, onDelete } =\n      this.props\n\n    const actions = {\n      ArrowRight: () => {\n        if (onShiftRight !== undefined) onShiftRight(e)\n      },\n      ArrowLeft: () => {\n        if (onShiftLeft !== undefined) onShiftLeft(e)\n      },\n      Enter: () => {\n        if (canBeTyped)\n          this.setState({\n            isStopInputOpen: true,\n            isTooltipOpen: false,\n            stopInputValue: value,\n          })\n      },\n      Escape: () => {\n        ;(e.target as HTMLElement).blur()\n        this.setState({ isStopInputOpen: false })\n      },\n      Backspace: () => {\n        if (onDelete !== undefined) onDelete(e)\n      },\n    }\n\n    if (e.currentTarget === e.target)\n      return actions[\n        action as 'ArrowRight' | 'ArrowLeft' | 'Enter' | 'Escape' | 'Backspace'\n      ]?.()\n  }\n\n  clickHandler = (e: React.MouseEvent<HTMLDivElement>) => {\n    const { canBeTyped, value } = this.props\n\n    if (e.detail === 2 && canBeTyped)\n      this.setState({\n        isStopInputOpen: true,\n        isTooltipOpen: false,\n        stopInputValue: value,\n      })\n  }\n\n  transformStopValue = (value: string | number) => {\n    let newValue = value\n    if (typeof newValue !== 'string') newValue = newValue.toFixed(1)\n    if (newValue.includes('.0')) return (newValue = newValue.replace('.0', ''))\n    return newValue\n  }\n\n  // Render\n  render() {\n    const {\n      id,\n      shortId,\n      value,\n      min,\n      max,\n      offset,\n      helper,\n      style,\n      isDisplayed,\n      isBlocked,\n      isDisabled,\n      onMouseDown,\n      onValidStopValue,\n    } = this.props\n    const { isTooltipOpen, isStopInputOpen, stopInputValue } = this.state\n\n    return (\n      <div\n        className={doClassnames([\n          'knob',\n          isStopInputOpen && 'knob--editing',\n          (isBlocked || isDisabled) && 'knob--disabled',\n        ])}\n        style={{\n          left: `${offset}%`,\n          zIndex: isTooltipOpen ? '2' : '1',\n          ...style,\n        }}\n        data-id={id}\n        data-value={value}\n        role=\"slider\"\n        aria-label={`${shortId} knob, value ${this.transformStopValue(value)}`}\n        aria-valuemin={min ? parseFloat(min) : undefined}\n        aria-valuemax={max ? parseFloat(max) : undefined}\n        aria-valuenow={typeof value === 'number' ? value : parseFloat(value)}\n        aria-valuetext={this.transformStopValue(value).toString()}\n        aria-disabled={isDisabled || isBlocked}\n        aria-readonly={isBlocked}\n        tabIndex={!(isBlocked || isDisabled) ? 0 : -1}\n        onKeyDown={(e) =>\n          !(isBlocked || isDisabled)\n            ? this.keyboardHandler(\n                e.key,\n                e as React.KeyboardEvent<HTMLInputElement>\n              )\n            : undefined\n        }\n        onMouseDown={!(isBlocked || isDisabled) ? onMouseDown : undefined}\n        onMouseEnter={() =>\n          !(isBlocked || isDisabled || isStopInputOpen)\n            ? this.setState({ isTooltipOpen: true })\n            : undefined\n        }\n        onMouseLeave={(e) => {\n          const isFocused = document.activeElement === e.target\n          if (isFocused && !(isBlocked || isDisabled))\n            this.setState({ isTooltipOpen: true })\n          else this.setState({ isTooltipOpen: false })\n        }}\n        onFocus={() =>\n          !(isBlocked || isDisabled)\n            ? this.setState({ isTooltipOpen: true })\n            : undefined\n        }\n        onBlur={() =>\n          !(isBlocked || isDisabled)\n            ? this.setState({ isTooltipOpen: false })\n            : undefined\n        }\n        onClick={(e) =>\n          !(isBlocked || isDisabled) ? this.clickHandler(e) : undefined\n        }\n      >\n        {(isDisplayed || isTooltipOpen) && (\n          <div\n            className={doClassnames(['knob__tooltip'])}\n            role=\"status\"\n          >\n            <span\n              className={doClassnames([texts.type, texts['type--inverse']])}\n            >\n              {this.transformStopValue(value)}\n            </span>\n          </div>\n        )}\n        {isStopInputOpen && (\n          <div\n            className=\"knob__input\"\n            role=\"group\"\n          >\n            <Input\n              type=\"NUMBER\"\n              value={(stopInputValue as number).toFixed(1) ?? '0'}\n              min={min}\n              max={max}\n              step=\"0.1\"\n              feature=\"TYPE_STOP_VALUE\"\n              shouldBlur={true}\n              isAutoFocus={true}\n              isFlex={true}\n              onFocus={() =>\n                this.setState({\n                  stopInputValue: value,\n                })\n              }\n              onBlur={(e: React.FocusEvent<HTMLInputElement>) => {\n                if ((e.target as HTMLInputElement)?.value !== value)\n                  onValidStopValue?.(shortId, e)\n                this.setState({ isStopInputOpen: false })\n              }}\n            />\n          </div>\n        )}\n        <div\n          className={doClassnames(['knob__label'])}\n          role=\"presentation\"\n          aria-hidden=\"true\"\n        >\n          <span className={doClassnames([texts.type])}>{shortId}</span>\n        </div>\n        <div\n          className=\"knob__graduation\"\n          role=\"presentation\"\n          aria-hidden=\"true\"\n        ></div>\n        {helper !== undefined && isTooltipOpen && (\n          <Tooltip type={helper.type}>{helper.label}</Tooltip>\n        )}\n      </div>\n    )\n  }\n}\n"],"names":["Knob","React","props","action","value","canBeTyped","onShiftRight","onShiftLeft","onDelete","actions","e","newValue","id","shortId","min","max","offset","helper","style","isDisplayed","isBlocked","isDisabled","onMouseDown","onValidStopValue","isTooltipOpen","isStopInputOpen","stopInputValue","jsxs","doClassnames","jsx","texts","Input","Tooltip"],"mappings":"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"}

package/dist/components/actions/menu/Menu.js

@@ -1,8 +1,8 @@
 import '../../../assets/Menu.css';
 import { jsx as g, jsxs as T } from "react/jsx-runtime";
 import h from "react";
-import y from "../../lists/actions-list/ActionsList.js";
-import { t as B } from "../../../do-classnames-DSDFCvzy.js";
+import { t as y } from "../../../do-classnames-DSDFCvzy.js";
+import B from "../../lists/actions-list/ActionsList.js";
 import M from "../button/Button.js";
 class x extends h.Component {
   selectMenuRef;
@@ -118,7 +118,7 @@ class x extends h.Component {
       "div",
       {
         id: s,
-        className: B([
+        className: y([
           "menu",
           "recharged",
           `menu--${r?.toLocaleLowerCase().replace("_", "-")}`
@@ -175,7 +175,7 @@ class x extends h.Component {
               },
               ref: this.listRef,
               children: /* @__PURE__ */ g(
-                y,
+                B,
                 {
                   options: d,
                   selected: p,