@unoff/ui 1.21.0

package/dist/components/actions/accordion/Accordion.js

@@ -0,0 +1,104 @@
+import '../../../assets/Accordion.css';
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import w from "../../tags/chip/Chip.js";
+import N from "../../assets/section-title/SectionTitle.js";
+import { t as g } from "../../../do-classnames-DSDFCvzy.js";
+import l from "../button/Button.js";
+const E = (s) => {
+  const {
+    label: a,
+    indicator: p,
+    icon: m = "plus",
+    helper: _,
+    helpers: r,
+    isExpanded: c,
+    isBlocked: e = !1,
+    isNew: d = !1,
+    children: h,
+    onAdd: t,
+    onEmpty: f
+  } = s, u = (o) => {
+    o.stopPropagation(), t(o);
+  }, v = (o) => {
+    o.stopPropagation(), f(o);
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: g([
+        "accordion",
+        c && "accordion--expanded",
+        e && "accordion--blocked"
+      ]),
+      onMouseDown: (o) => {
+        o.target.dataset.feature === void 0 && !c && !e && t(o);
+      },
+      children: [
+        /* @__PURE__ */ n("div", { className: "accordion__row", children: [
+          /* @__PURE__ */ i(
+            "div",
+            {
+              className: "accordion__row__left",
+              role: "presentation",
+              children: /* @__PURE__ */ i(
+                N,
+                {
+                  label: a,
+                  indicator: p,
+                  helper: _
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ n(
+            "div",
+            {
+              className: "accordion__row__right",
+              role: "group",
+              children: [
+                c ? /* @__PURE__ */ i(
+                  l,
+                  {
+                    type: "icon",
+                    icon: "minus",
+                    iconClassName: "accordion__row__icon",
+                    helper: r?.empty !== void 0 ? {
+                      label: r.empty
+                    } : void 0,
+                    action: (o) => v(o)
+                  }
+                ) : /* @__PURE__ */ i(
+                  l,
+                  {
+                    type: "icon",
+                    icon: m,
+                    iconClassName: "accordion__row__icon",
+                    helper: r?.add !== void 0 ? {
+                      label: r.add
+                    } : void 0,
+                    isDisabled: e,
+                    isBlocked: e,
+                    action: (o) => u(o)
+                  }
+                ),
+                (e || d) && /* @__PURE__ */ i(w, { children: d ? "New" : "Pro" })
+              ]
+            }
+          )
+        ] }),
+        c && /* @__PURE__ */ i(
+          "div",
+          {
+            id: `accordion-content-${a}`,
+            role: "region",
+            children: h
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  E as default
+};
+//# sourceMappingURL=Accordion.js.map

package/dist/components/actions/accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sources":["../../../../src/components/actions/accordion/Accordion.tsx"],"sourcesContent":["import { IconList } from '@tps/icon.types'\nimport Chip from '@components/tags/chip/Chip'\nimport SectionTitle from '@components/assets/section-title/SectionTitle'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport Button from '../button/Button'\nimport './accordion.scss'\n\nexport interface AccordionProps {\n  /**\n   * Title label of the accordion\n   */\n  label: string\n  /**\n   * Optional indicator (number or text) displayed next to the label\n   */\n  indicator?: string | number\n  /**\n   * Icon to display in the add button\n   * @default 'plus'\n   */\n  icon?: IconList\n  /**\n   * Helper text displayed near the title\n   */\n  helper?: string\n  /**\n   * Helper texts for the action buttons\n   */\n  helpers?: {\n    /** Helper text for the add button */\n    add?: string\n    /** Helper text for the empty button */\n    empty?: string\n  }\n  /**\n   * Whether the accordion is expanded\n   */\n  isExpanded: boolean\n  /**\n   * Whether the accordion is blocked (disabled)\n   * @default false\n   */\n  isBlocked?: boolean\n  /**\n   * Whether to show a \"New\" badge\n   * @default false\n   */\n  isNew?: boolean\n  /**\n   * Content to display when accordion is expanded\n   */\n  children?: React.ReactNode\n  /**\n   * Callback fired when the add button is clicked\n   */\n  onAdd: (\n    event: React.MouseEvent<Element> | React.KeyboardEvent<Element>\n  ) => void\n  /**\n   * Callback fired when the empty button is clicked\n   */\n  onEmpty: (\n    event: React.MouseEvent<Element> | React.KeyboardEvent<Element>\n  ) => void\n}\n\nconst Accordion = (props: AccordionProps) => {\n  const {\n    label,\n    indicator,\n    icon = 'plus',\n    helper,\n    helpers,\n    isExpanded,\n    isBlocked = false,\n    isNew = false,\n    children,\n    onAdd,\n    onEmpty,\n  } = props\n\n  const handleAdd = (\n    event: React.MouseEvent<Element> | React.KeyboardEvent<Element>\n  ) => {\n    event.stopPropagation()\n    onAdd(event)\n  }\n\n  const handleEmpty = (\n    event: React.MouseEvent<Element> | React.KeyboardEvent<Element>\n  ) => {\n    event.stopPropagation()\n    onEmpty(event)\n  }\n\n  return (\n    <div\n      className={doClassnames([\n        'accordion',\n        isExpanded && 'accordion--expanded',\n        isBlocked && 'accordion--blocked',\n      ])}\n      onMouseDown={(e) => {\n        if (\n          (e.target as HTMLElement).dataset.feature === undefined &&\n          !isExpanded &&\n          !isBlocked\n        )\n          onAdd(e as React.MouseEvent<HTMLDivElement, MouseEvent>)\n      }}\n    >\n      <div className=\"accordion__row\">\n        <div\n          className=\"accordion__row__left\"\n          role=\"presentation\"\n        >\n          <SectionTitle\n            label={label}\n            indicator={indicator}\n            helper={helper}\n          />\n        </div>\n        <div\n          className=\"accordion__row__right\"\n          role=\"group\"\n        >\n          {isExpanded ? (\n            <Button\n              type=\"icon\"\n              icon=\"minus\"\n              iconClassName=\"accordion__row__icon\"\n              helper={\n                helpers?.empty !== undefined\n                  ? {\n                      label: helpers.empty,\n                    }\n                  : undefined\n              }\n              action={(e) => handleEmpty(e)}\n            />\n          ) : (\n            <Button\n              type=\"icon\"\n              icon={icon}\n              iconClassName=\"accordion__row__icon\"\n              helper={\n                helpers?.add !== undefined\n                  ? {\n                      label: helpers.add,\n                    }\n                  : undefined\n              }\n              isDisabled={isBlocked}\n              isBlocked={isBlocked}\n              action={(e) => handleAdd(e)}\n            />\n          )}\n          {(isBlocked || isNew) && <Chip>{isNew ? 'New' : 'Pro'}</Chip>}\n        </div>\n      </div>\n      {isExpanded && (\n        <div\n          id={`accordion-content-${label}`}\n          role=\"region\"\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default Accordion\n"],"names":["Accordion","props","label","indicator","icon","helper","helpers","isExpanded","isBlocked","isNew","children","onAdd","onEmpty","handleAdd","event","handleEmpty","jsxs","doClassnames","e","jsx","SectionTitle","Button","Chip"],"mappings":";;;;;AAkEA,MAAMA,IAAY,CAACC,MAA0B;AAC3C,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,EAAA,IACEX,GAEEY,IAAY,CAChBC,MACG;AACH,IAAAA,EAAM,gBAAA,GACNH,EAAMG,CAAK;AAAA,EACb,GAEMC,IAAc,CAClBD,MACG;AACH,IAAAA,EAAM,gBAAA,GACNF,EAAQE,CAAK;AAAA,EACf;AAEA,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAa;AAAA,QACtB;AAAA,QACAV,KAAc;AAAA,QACdC,KAAa;AAAA,MAAA,CACd;AAAA,MACD,aAAa,CAACU,MAAM;AAClB,QACGA,EAAE,OAAuB,QAAQ,YAAY,UAC9C,CAACX,KACD,CAACC,KAEDG,EAAMO,CAAiD;AAAA,MAC3D;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAF,EAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,UAAA,gBAAAG;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEL,UAAA,gBAAAA;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACC,OAAAlB;AAAA,kBACA,WAAAC;AAAA,kBACA,QAAAE;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,UAEF,gBAAAW;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEJ,UAAA;AAAA,gBAAAT,IACC,gBAAAY;AAAA,kBAACE;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,QACEf,GAAS,UAAU,SACf;AAAA,sBACE,OAAOA,EAAQ;AAAA,oBAAA,IAEjB;AAAA,oBAEN,QAAQ,CAACY,MAAMH,EAAYG,CAAC;AAAA,kBAAA;AAAA,gBAAA,IAG9B,gBAAAC;AAAA,kBAACE;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,MAAAjB;AAAA,oBACA,eAAc;AAAA,oBACd,QACEE,GAAS,QAAQ,SACb;AAAA,sBACE,OAAOA,EAAQ;AAAA,oBAAA,IAEjB;AAAA,oBAEN,YAAYE;AAAA,oBACZ,WAAAA;AAAA,oBACA,QAAQ,CAACU,MAAML,EAAUK,CAAC;AAAA,kBAAA;AAAA,gBAAA;AAAA,iBAG5BV,KAAaC,MAAU,gBAAAU,EAACG,GAAA,EAAM,UAAAb,IAAQ,QAAQ,MAAA,CAAM;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACxD,GACF;AAAA,QACCF,KACC,gBAAAY;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,qBAAqBjB,CAAK;AAAA,YAC9B,MAAK;AAAA,YAEJ,UAAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/actions/button/Button.d.ts

@@ -0,0 +1,148 @@
+import { default as React } from 'react';
+import { IconList } from '../../../types/icon.types';
+
+export interface ButtonProps {
+    /**
+     * Visual style of the button
+     */
+    type: 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'alternative' | 'icon';
+    /**
+     * Size of the button
+     * @default 'default'
+     */
+    size?: 'small' | 'default' | 'large';
+    /**
+     * Icon name to display in the button
+     */
+    icon?: IconList;
+    /**
+     * Custom CSS class for the icon
+     */
+    iconClassName?: string;
+    /**
+     * Custom icon element to replace the default icon
+     */
+    customIcon?: React.ReactElement;
+    /**
+     * Text label of the button
+     */
+    label?: string;
+    /**
+     * Visual state of the button
+     * @default 'default'
+     */
+    state?: 'default' | 'selected';
+    /**
+     * URL for link buttons
+     */
+    url?: string;
+    /**
+     * Helper tooltip configuration
+     */
+    helper?: {
+        /** Tooltip content */
+        label: string | React.ReactNode;
+        /** Tooltip position */
+        pin?: 'TOP' | 'BOTTOM';
+        /** Tooltip display type */
+        type?: 'MULTI_LINE' | 'SINGLE_LINE';
+    };
+    /**
+     * Preview tooltip configuration with image
+     */
+    preview?: {
+        /** Preview image URL */
+        image: string;
+        /** Preview text */
+        text: string | React.ReactNode;
+        /** Preview position */
+        pin?: 'TOP' | 'BOTTOM';
+    };
+    /**
+     * Warning tooltip configuration
+     */
+    warning?: {
+        /** Warning message */
+        label: string | React.ReactNode;
+        /** Warning position */
+        pin?: 'TOP' | 'BOTTOM';
+        /** Warning display type */
+        type?: 'MULTI_LINE' | 'SINGLE_LINE';
+    };
+    /**
+     * Feature identifier for tracking
+     */
+    feature?: string;
+    /**
+     * Whether the button has multiple actions
+     * @default false
+     */
+    hasMultipleActions?: boolean;
+    /**
+     * Whether the button should render as a link
+     * @default false
+     */
+    isLink?: boolean;
+    /**
+     * Whether the button should auto-focus on mount
+     * @default false
+     */
+    isAutofocus?: boolean;
+    /**
+     * Reflow configuration for responsive behavior
+     * @default { isEnabled: false, icon: 'adjust' }
+     */
+    shouldReflow?: {
+        /** Whether reflow is enabled */
+        isEnabled: boolean;
+        /** Icon to show when reflowed */
+        icon: IconList;
+    };
+    /**
+     * Whether the button is in loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Whether the button is blocked (shows unblock action)
+     * @default false
+     */
+    isBlocked?: boolean;
+    /**
+     * Whether the button is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether to show a "New" badge
+     * @default false
+     */
+    isNew?: boolean;
+    /**
+     * Click handler for the button
+     */
+    action?: React.MouseEventHandler & React.KeyboardEventHandler;
+    /**
+     * Handler called when unblock is clicked
+     */
+    onUnblock?: React.MouseEventHandler & React.KeyboardEventHandler;
+}
+interface ButtonStates {
+    isTooltipVisible: boolean;
+    documentWidth: number;
+}
+export default class Button extends React.Component<ButtonProps, ButtonStates> {
+    buttonRef: React.RefObject<HTMLButtonElement>;
+    static defaultProps: Partial<ButtonProps>;
+    constructor(props: ButtonProps);
+    componentDidMount: () => void;
+    componentWillUnmount: () => void;
+    handleResize: () => void;
+    Status: () => import("react/jsx-runtime").JSX.Element | undefined;
+    Button: () => import("react/jsx-runtime").JSX.Element;
+    LinkButton: () => import("react/jsx-runtime").JSX.Element;
+    Icon: () => import("react/jsx-runtime").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/actions/button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/Button.tsx"],"names":[],"mappings":"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"}

package/dist/components/actions/button/Button.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Button.figma.d.ts.map

package/dist/components/actions/button/Button.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.figma.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/Button.figma.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,43 @@
+import { jsx as a } from "react/jsx-runtime";
+import { i as e } from "../../../index_react-CmuCVQet.js";
+import i from "./Button.js";
+e.figma.connect(
+  i,
+  "https://www.figma.com/design/QlBdsfEcaUsGBzqA20xbNi/Unoff?node-id=1:4605",
+  {
+    props: {
+      type: e.figma.enum("type", {
+        PRIMARY: "primary",
+        SECONDARY: "secondary",
+        TERTIARY: "tertiary",
+        DESTRUCTIVE: "destructive",
+        ALTERNATIVE: "alternative",
+        INACTIVE: "alternative",
+        ICON: "icon"
+      }),
+      state: e.figma.boolean("isSelected", {
+        true: "selected",
+        false: "default"
+      }),
+      isBlocked: e.figma.boolean("isDisabled"),
+      label: e.figma.string("label"),
+      icon: e.figma.boolean("hasIcon", {
+        true: "adjust",
+        false: void 0
+      }),
+      hasMultipleActions: e.figma.boolean("hasMultipleActions")
+    },
+    example: (t) => /* @__PURE__ */ a(
+      i,
+      {
+        type: t.type,
+        state: t.state,
+        isBlocked: t.isBlocked,
+        label: t.label,
+        icon: t.icon,
+        hasMultipleActions: t.hasMultipleActions
+      }
+    )
+  }
+);
+//# sourceMappingURL=Button.figma.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.figma.js","sources":["../../../../src/components/actions/button/Button.figma.tsx"],"sourcesContent":["import { figma } from '@figma/code-connect'\nimport Button from './Button'\n\nfigma.connect(\n  Button,\n  'https://www.figma.com/design/QlBdsfEcaUsGBzqA20xbNi/Unoff?node-id=1:4605',\n  {\n    props: {\n      type: figma.enum('type', {\n        PRIMARY: 'primary',\n        SECONDARY: 'secondary',\n        TERTIARY: 'tertiary',\n        DESTRUCTIVE: 'destructive',\n        ALTERNATIVE: 'alternative',\n        INACTIVE: 'alternative',\n        ICON: 'icon',\n      }),\n      state: figma.boolean('isSelected', {\n        true: 'selected',\n        false: 'default',\n      }),\n      isBlocked: figma.boolean('isDisabled'),\n      label: figma.string('label'),\n      icon: figma.boolean('hasIcon', {\n        true: 'adjust',\n        false: undefined,\n      }),\n      hasMultipleActions: figma.boolean('hasMultipleActions'),\n    },\n    example: (props) => (\n      <Button\n        type={props.type}\n        state={props.state}\n        isBlocked={props.isBlocked}\n        label={props.label}\n        icon={props.icon}\n        hasMultipleActions={props.hasMultipleActions}\n      />\n    ),\n  }\n)\n"],"names":["figma","Button","props","jsx"],"mappings":";;;AAGAA,EAAAA,MAAM;AAAA,EACJC;AAAA,EACA;AAAA,EACA;AAAA,IACE,OAAO;AAAA,MACL,MAAMD,EAAAA,MAAM,KAAK,QAAQ;AAAA,QACvB,SAAS;AAAA,QACT,WAAW;AAAA,QACX,UAAU;AAAA,QACV,aAAa;AAAA,QACb,aAAa;AAAA,QACb,UAAU;AAAA,QACV,MAAM;AAAA,MAAA,CACP;AAAA,MACD,OAAOA,EAAAA,MAAM,QAAQ,cAAc;AAAA,QACjC,MAAM;AAAA,QACN,OAAO;AAAA,MAAA,CACR;AAAA,MACD,WAAWA,EAAAA,MAAM,QAAQ,YAAY;AAAA,MACrC,OAAOA,EAAAA,MAAM,OAAO,OAAO;AAAA,MAC3B,MAAMA,EAAAA,MAAM,QAAQ,WAAW;AAAA,QAC7B,MAAM;AAAA,QACN,OAAO;AAAA,MAAA,CACR;AAAA,MACD,oBAAoBA,EAAAA,MAAM,QAAQ,oBAAoB;AAAA,IAAA;AAAA,IAExD,SAAS,CAACE,MACR,gBAAAC;AAAA,MAACF;AAAA,MAAA;AAAA,QACC,MAAMC,EAAM;AAAA,QACZ,OAAOA,EAAM;AAAA,QACb,WAAWA,EAAM;AAAA,QACjB,OAAOA,EAAM;AAAA,QACb,MAAMA,EAAM;AAAA,QACZ,oBAAoBA,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5B;AAGN;"}

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

@@ -0,0 +1,306 @@
+import '../../../assets/Button.css';
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import I from "react";
+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 = {
+    size: "default",
+    state: "default",
+    hasMultipleActions: !1,
+    isLink: !1,
+    shouldReflow: { isEnabled: !1, icon: "adjust" },
+    isAutofocus: !1,
+    isLoading: !1,
+    isBlocked: !1,
+    isDisabled: !1,
+    isNew: !1
+  };
+  constructor(s) {
+    super(s), this.state = {
+      isTooltipVisible: !1,
+      documentWidth: document.documentElement.clientWidth
+    };
+  }
+  // Lifecycle
+  componentDidMount = () => {
+    const { isAutofocus: s } = this.props;
+    s && setTimeout(() => {
+      this.buttonRef.current && this.buttonRef.current.focus();
+    }, 1), window.addEventListener("resize", this.handleResize);
+  };
+  componentWillUnmount = () => {
+    window.removeEventListener("resize", this.handleResize);
+  };
+  // Handlers
+  handleResize = () => {
+    this.setState({ documentWidth: document.documentElement.clientWidth });
+  };
+  // Templates
+  Status = () => {
+    const { type: s, warning: i, preview: c, isBlocked: t, isNew: a, onUnblock: u } = this.props;
+    if (i || t || a)
+      return /* @__PURE__ */ m("div", { className: "button__status", children: [
+        i !== void 0 && /* @__PURE__ */ e(
+          _,
+          {
+            iconType: "PICTO",
+            iconName: "warning",
+            text: i.label,
+            pin: i.pin,
+            type: i.type
+          }
+        ),
+        (t || a) && s !== "icon" && /* @__PURE__ */ e(
+          S,
+          {
+            preview: c,
+            isSolo: !0,
+            action: t ? u : void 0,
+            children: a ? "New" : "Pro"
+          }
+        )
+      ] });
+  };
+  Button = () => {
+    const {
+      type: s,
+      icon: i,
+      size: c,
+      helper: t,
+      feature: a,
+      hasMultipleActions: u,
+      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;
+    return /* @__PURE__ */ m("div", { className: g["snackbar--medium"], children: [
+      /* @__PURE__ */ m(
+        "button",
+        {
+          role: "button",
+          className: w([
+            "button",
+            `button--${s}`,
+            `button--${c}`,
+            o && "button--loading",
+            l && "button--blocked"
+          ]),
+          "data-feature": a,
+          disabled: p || l,
+          "aria-label": typeof (y() || t?.label) == "string" ? y() || t?.label : void 0,
+          "aria-disabled": p || l,
+          "aria-busy": o,
+          onKeyDown: (f) => {
+            (f.key === " " || f.key === "Enter") && (!p || !l) && d?.(f), f.key === "Escape" && f.target.blur();
+          },
+          onMouseDown: p || l ? void 0 : d,
+          onMouseEnter: () => {
+            h() && this.setState({ isTooltipVisible: !0 });
+          },
+          onMouseLeave: () => {
+            h() && this.setState({ isTooltipVisible: !1 });
+          },
+          onFocus: () => {
+            h() && this.setState({ isTooltipVisible: !0 });
+          },
+          onBlur: () => {
+            h() && this.setState({ isTooltipVisible: !1 });
+          },
+          tabIndex: 0,
+          ref: this.buttonRef,
+          children: [
+            k() !== void 0 && /* @__PURE__ */ e(
+              "span",
+              {
+                className: "button__icon",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ e(
+                  N,
+                  {
+                    type: "PICTO",
+                    iconName: k()
+                  }
+                )
+              }
+            ),
+            y() !== void 0 && /* @__PURE__ */ e("span", { className: "button__label", children: y() }),
+            o && /* @__PURE__ */ e(
+              "div",
+              {
+                className: "button__loader",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ e(
+                  N,
+                  {
+                    type: "PICTO",
+                    iconName: "spinner",
+                    customClassName: "button__spinner"
+                  }
+                )
+              }
+            ),
+            u && /* @__PURE__ */ e(
+              "span",
+              {
+                className: "button__caret",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ e(
+                  N,
+                  {
+                    type: "PICTO",
+                    iconName: "chevron-down"
+                  }
+                )
+              }
+            ),
+            v && h() && /* @__PURE__ */ e(
+              E,
+              {
+                pin: t?.pin || "BOTTOM",
+                type: t?.type || "SINGLE_LINE",
+                children: L()
+              }
+            )
+          ]
+        }
+      ),
+      this.Status()
+    ] });
+  };
+  LinkButton = () => {
+    const { type: s, size: i, feature: c, label: t, url: a } = this.props;
+    return /* @__PURE__ */ e(
+      "button",
+      {
+        role: "link",
+        className: w([
+          "button",
+          `button--${s}`,
+          `button--${i}`
+        ]),
+        "data-feature": c,
+        ref: this.buttonRef,
+        "aria-label": t,
+        tabIndex: 0,
+        children: /* @__PURE__ */ e(
+          "a",
+          {
+            href: a,
+            target: "_blank",
+            rel: "noreferrer",
+            className: "button__label",
+            "aria-label": t,
+            children: t
+          }
+        )
+      }
+    );
+  };
+  Icon = () => {
+    const {
+      size: s,
+      icon: i,
+      iconClassName: c,
+      customIcon: t,
+      feature: a,
+      state: u,
+      helper: o,
+      warning: p,
+      isLoading: l,
+      isDisabled: d,
+      isBlocked: r,
+      isNew: b,
+      action: v
+    } = this.props, { isTooltipVisible: T } = this.state;
+    return /* @__PURE__ */ m("div", { className: g["snackbar--medium"], children: [
+      /* @__PURE__ */ m(
+        "button",
+        {
+          role: "button",
+          "data-feature": a,
+          className: w([
+            "icon-button",
+            `icon-button--${s}`,
+            u === "selected" && "icon-button--selected",
+            b && "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",
+          "aria-busy": l,
+          onKeyDown: (n) => {
+            (n.key === " " || n.key === "Enter") && !(d || r) && v?.(n), n.key === "Escape" && n.target.blur();
+          },
+          onMouseDown: d || r ? void 0 : v,
+          onMouseEnter: () => {
+            o !== void 0 && this.setState({ isTooltipVisible: !0 });
+          },
+          onMouseLeave: () => {
+            o !== void 0 && this.setState({ isTooltipVisible: !1 });
+          },
+          onFocus: () => {
+            o !== void 0 && this.setState({ isTooltipVisible: !0 });
+          },
+          onBlur: () => {
+            o !== void 0 && this.setState({ isTooltipVisible: !1 });
+          },
+          tabIndex: 0,
+          ref: this.buttonRef,
+          children: [
+            t === void 0 ? /* @__PURE__ */ e(
+              N,
+              {
+                type: "PICTO",
+                iconName: l ? "spinner" : i,
+                customClassName: c !== void 0 ? c : void 0
+              }
+            ) : /* @__PURE__ */ e(
+              "div",
+              {
+                style: {
+                  opacity: d || r ? 0.5 : 1,
+                  pointerEvents: "none",
+                  width: "100%",
+                  height: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: t
+              }
+            ),
+            T && o !== void 0 && u !== "selected" && /* @__PURE__ */ e(
+              E,
+              {
+                pin: o?.pin || "BOTTOM",
+                type: o?.type || "SINGLE_LINE",
+                children: o?.label
+              }
+            )
+          ]
+        }
+      ),
+      p !== void 0 && this.Status()
+    ] });
+  };
+  // Render
+  render() {
+    const { type: s, isLink: i } = this.props;
+    return s !== "icon" ? i ? this.LinkButton() : this.Button() : this.Icon();
+  }
+}
+export {
+  P as default
+};
+//# sourceMappingURL=Button.js.map