@ogcio/design-system-react 1.12.4 → 1.13.0

package/dist/accordion/accordion-item.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as d, Fragment as u, jsx as i } from "react/jsx-runtime";
 import { useState as y, useRef as b } from "react";
-import { c as h } from "../index-DNkhmzZp.js";
+import { c as h } from "../index-CB-zPpNk.js";
 import { cn as r } from "../cn.js";
 import { Icon as w } from "../icon/icon.js";
 const I = h({

package/dist/alert/alert.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as n, jsx as r } from "react/jsx-runtime";
 import { useState as D } from "react";
-import { c as h } from "../index-DNkhmzZp.js";
+import { c as h } from "../index-CB-zPpNk.js";
 import { cn as v } from "../cn.js";
 import { translate as k } from "../i18n/utility.js";
 import { Icon as w } from "../icon/icon.js";

package/dist/autocomplete/autocomplete.js

@@ -1,222 +1,142 @@
 "use client";
-import { jsxs as G, jsx as E } from "react/jsx-runtime";
-import { useRef as C, useReducer as H, useEffect as m, createElement as j, isValidElement as K, Children as X } from "react";
-import { cn as N } from "../cn.js";
-import { InputText as $ } from "../input-text/input-text.js";
-import { Popover as q } from "../popover/popover.js";
-import { SelectMenu as z, SelectMenuOption as F } from "../select/select-menu.js";
-import { AUTOCOMPLETE_ACTIONS as J } from "./types.js";
+import { jsxs as R, jsx as h } from "react/jsx-runtime";
+import { useRef as B, createElement as G } from "react";
+import { cn as T } from "../cn.js";
+import { translate as H } from "../i18n/utility.js";
+import { InputText as M } from "../input-text/input-text.js";
+import { Popover as V } from "../popover/popover.js";
+import { SelectMenu as j, SelectMenuOption as K } from "../select/select-menu.js";
+import { AUTOCOMPLETE_ACTIONS as X } from "./types.js";
+import { useAutocompleteController as $ } from "./use-autocomplete-controller.js";
 const {
-  ON_RESET: v,
-  ON_SELECT_ITEM: L,
-  SET_INPUT_VALUE: h,
-  SET_IS_OPEN: u,
-  SET_OPTIONS: T,
-  TOGGLE_CLEAR_BUTTON: O,
-  SET_VALUE: R,
-  SET_HIGHLIGHTED_INDEX: b
-} = J, Q = (t, o) => {
-  switch (o.type) {
-    case u:
-      return { ...t, isOpen: o.payload };
-    case h:
-      return { ...t, inputValue: o.payload };
-    case T:
-      return { ...t, autocompleteOptions: o.payload };
-    case R:
-      return { ...t, value: o.payload };
-    case O:
-      return {
-        ...t,
-        isClearButtonEnabled: o.payload || !!t.inputValue
-      };
-    case v:
-      return {
-        ...t,
-        value: "",
-        inputValue: "",
-        isClearButtonEnabled: !1,
-        highlightedIndex: -1
-      };
-    case L:
-      return {
-        ...t,
-        inputValue: o.payload.inputValue,
-        value: o.payload.value,
-        isOpen: !1,
-        isClearButtonEnabled: !0
-      };
-    case b:
-      return { ...t, highlightedIndex: o.payload, isOpen: !0 };
-    default:
-      return t;
+  ON_RESET: q,
+  ON_SELECT_ITEM: z,
+  SET_INPUT_VALUE: F,
+  SET_IS_OPEN: s,
+  TOGGLE_CLEAR_BUTTON: _,
+  SET_HIGHLIGHTED_INDEX: x
+} = X, J = (n) => n ? "arrow_drop_up" : "arrow_drop_down", g = (n) => (c, a) => {
+  if (n && a.current) {
+    const u = {
+      target: {
+        ...a.current,
+        value: c
+      },
+      currentTarget: a.current,
+      bubbles: !0,
+      isTrusted: !0
+    };
+    n == null || n(u);
   }
-}, W = (t, o) => {
-  var l, y;
-  const r = ((l = t.props.children) == null ? void 0 : l.toString().toLowerCase()) || "", s = (y = t.props.value) == null ? void 0 : y.toLowerCase(), c = o.toLowerCase();
-  return r.includes(c) || s.includes(c);
-}, _ = (t) => {
-  var r, s;
-  const o = ((r = t == null ? void 0 : t.type) == null ? void 0 : r.componentType) || ((s = t == null ? void 0 : t.props) == null ? void 0 : s.__mdxType);
-  return K(t) && o === "AutocompleteItem";
-}, S = (t) => X.toArray(t).filter((o) => _(o)) || [], I = (t, o) => {
-  var r;
-  return (((r = S(t).find((s) => s.props.value === o)) == null ? void 0 : r.props.children) || "").toString();
-}, re = ({
-  disabled: t,
-  children: o,
-  defaultValue: r = "",
-  onChange: s,
-  ...c
-}) => {
-  const l = C(null), y = C(null), x = C(!1), [n, a] = H(Q, {
-    isOpen: !1,
-    value: r,
-    inputValue: r ? I(o, r) : "",
-    autocompleteOptions: o,
-    isClearButtonEnabled: !1,
-    highlightedIndex: -1
-  }), f = S(n.autocompleteOptions), V = (e) => {
-    if (s && l.current) {
-      const p = {
-        target: {
-          ...l.current,
-          value: e
-        },
-        currentTarget: l.current,
-        bubbles: !0,
-        isTrusted: !0
-      };
-      s(p);
-    }
+}, re = (n) => {
+  var E, I;
+  const c = B(null), {
+    disabled: a,
+    children: u,
+    placeholder: C,
+    onSelectItem: y,
+    isLoading: S,
+    freeSolo: m = !1,
+    onChange: f
+  } = n, { state: t, dispatch: o, inputRef: i, getOptionLabelByValue: A } = $({
+    ...n,
+    onChange: g(f)
+  }), w = (e) => {
+    o({ type: s, payload: e }), e || o({ type: _, payload: !1 });
+  }, N = () => {
+    o({ type: q }), o({ type: s, payload: !1 }), g(f)("", i);
   }, k = (e) => {
-    a({ type: u, payload: e }), e || a({ type: O, payload: !1 });
-  }, B = (e) => {
+    o({ type: F, payload: e }), g(f)(e, i), e && o({ type: s, payload: !0 });
+  }, v = (e) => {
     const {
-      target: { value: p }
+      target: { value: l }
     } = e;
-    e.__origin === "clear_button" ? (a({ type: v }), a({ type: u, payload: !1 }), V("")) : (a({ type: h, payload: p }), p && a({ type: u, payload: !0 })), a({ type: O }), setTimeout(() => {
-      var i;
-      return (i = l.current) == null ? void 0 : i.focus();
+    e.__origin === "clear_button" ? N() : k(l), o({ type: _ }), setTimeout(() => {
+      var p;
+      return (p = i.current) == null ? void 0 : p.focus();
     });
-  }, P = () => {
-    var e;
-    a({ type: u, payload: !n.isOpen }), (e = l.current) == null || e.focus();
   }, D = () => {
-    n.isOpen || a({
-      type: u,
+    var e;
+    o({ type: s, payload: !t.isOpen }), (e = i.current) == null || e.focus();
+  }, L = () => {
+    t.isOpen || o({
+      type: s,
       payload: !0
     });
-  }, w = (e) => {
-    a({
-      type: L,
+  }, O = (e) => {
+    o({
+      type: z,
       payload: {
-        inputValue: I(o, e),
+        inputValue: A(u, e),
         value: e
       }
-    }), V(e);
-  };
-  m(() => {
-    var p;
-    const e = f.find(
-      (i) => _(i) && i.props.value === n.value
-    );
-    e && a({
-      type: h,
-      payload: ((p = e.props.children) == null ? void 0 : p.toString()) || ""
-    });
-  }, [n.value]), m(() => {
-    var p;
-    if (!x.current) {
-      x.current = !0;
-      return;
-    }
-    n.inputValue === "" && n.value === "" && ((p = l.current) == null || p.focus());
-  }, [n.isClearButtonEnabled]), m(() => {
-    var e;
-    if (n.isOpen)
-      (e = l.current) == null || e.focus();
-    else {
-      const p = I(o, n.value);
-      p && n.value ? (a({
-        type: h,
-        payload: p
-      }), a({ type: u, payload: !1 })) : a({ type: v }), a({ type: O });
-    }
-  }, [n.isOpen]), m(() => {
-    if (n.inputValue && o) {
-      const e = S(o).filter(
-        (p) => W(p, n.inputValue)
-      );
-      a({ type: T, payload: e }), !n.isOpen && !n.value && a({ type: u, payload: !0 });
-    } else
-      a({ type: R, payload: "" }), a({ type: T, payload: o });
-  }, [n.inputValue]);
-  const U = (e) => {
-    const p = f.length, i = (d, M) => {
-      let g = d;
-      for (let A = 0; A < p; A++)
-        if (g = (g + M + p) % p, !f[g].props.disabled)
-          return g;
+    }), y && y(e);
+  }, P = (e) => {
+    const l = t.autocompleteOptions.length, p = (r, U) => {
+      let d = r;
+      for (let b = 0; b < l; b++)
+        if (d = (d + U + l) % l, !t.autocompleteOptions[d].props.disabled)
+          return d;
       return -1;
     };
     if (e.key === "ArrowDown")
-      e.preventDefault(), a({
-        type: b,
-        payload: n.isOpen ? i(n.highlightedIndex, 1) : 0
+      e.preventDefault(), o({
+        type: x,
+        payload: t.isOpen ? p(t.highlightedIndex, 1) : 0
       });
     else if (e.key === "ArrowUp")
-      e.preventDefault(), a({
-        type: b,
-        payload: i(n.highlightedIndex, -1)
+      e.preventDefault(), o({
+        type: x,
+        payload: p(t.highlightedIndex, -1)
       });
-    else if (e.key === "Enter" && n.highlightedIndex >= 0) {
-      const d = f[n.highlightedIndex];
-      d && d.props.value && !d.props.disabled && w(d.props.value);
+    else if (e.key === "Enter" && t.highlightedIndex >= 0) {
+      const r = t.autocompleteOptions[t.highlightedIndex];
+      r && r.props.value && !r.props.disabled && O(r.props.value);
     }
   };
-  return /* @__PURE__ */ G(
+  return /* @__PURE__ */ R(
     "div",
     {
-      ...c,
-      "aria-disabled": t,
-      className: N("gi-autocomplete gi-not-prose", c.className),
+      ...n,
+      "aria-disabled": a,
+      className: T("gi-autocomplete gi-not-prose", n.className),
       children: [
-        /* @__PURE__ */ E(
-          $,
+        /* @__PURE__ */ h(
+          M,
           {
-            onKeyDown: U,
-            onIconEndClick: P,
-            onChange: B,
-            onClick: D,
-            clearButtonEnabled: n.isClearButtonEnabled,
+            onKeyDown: P,
+            onIconEndClick: D,
+            onChange: v,
+            onClick: L,
+            clearButtonEnabled: t.isClearButtonEnabled,
             inputActionPosition: "beforeSuffix",
             "aria-label": "Type to Search",
-            "aria-disabled": t,
-            disabled: t,
-            placeholder: n.inputValue || "Type to Search",
-            iconEndClassName: N({
-              "gi-cursor-pointer": !t,
-              "gi-cursor-not-allowed gi-pointer-events-none": t
+            "aria-disabled": a,
+            disabled: a,
+            placeholder: C || H("autocomplete.placeholder"),
+            iconEndClassName: T({
+              "gi-cursor-pointer": !a && !m,
+              "gi-cursor-not-allowed gi-pointer-events-none": a && !m
             }),
-            iconEnd: n.isOpen ? "arrow_drop_up" : "arrow_drop_down",
-            ref: l,
-            iconEndRef: y,
-            value: n.inputValue,
-            "data-highlighted-index": n.highlightedIndex
+            iconEnd: m ? void 0 : J(t.isOpen),
+            ref: i,
+            iconEndRef: c,
+            value: t.inputValue,
+            "data-highlighted-index": t.highlightedIndex
           }
         ),
-        /* @__PURE__ */ E(
-          q,
+        /* @__PURE__ */ h(
+          V,
           {
-            onOpenChange: k,
-            triggerRef: l,
-            extraRefs: [y],
-            open: n.isOpen,
+            onOpenChange: w,
+            triggerRef: i,
+            extraRefs: [c],
+            open: t.isOpen,
             options: {
               placement: "bottom-start",
               strategy: "absolute",
               modifiers: [
+                { name: "offset", options: { offset: [0, 4] } },
                 { name: "preventOverflow", options: { padding: 8 } },
                 {
                   name: "flip",
@@ -224,29 +144,35 @@ const {
                 }
               ]
             },
-            children: /* @__PURE__ */ E(z, { onChange: w, children: f.map(
-              (e, p) => _(e) ? /* @__PURE__ */ j(
-                F,
-                {
-                  ...e.props,
-                  key: `AutocompleteItem-${e.props.value}`,
-                  selected: n.value === e.props.value,
-                  isHighlighted: p === n.highlightedIndex
-                }
-              ) : null
-            ) })
+            children: /* @__PURE__ */ h(
+              j,
+              {
+                onChange: O,
+                isLoading: S,
+                showNoData: !((E = t.autocompleteOptions) != null && E.length),
+                children: (I = t.autocompleteOptions) == null ? void 0 : I.map((e, l) => /* @__PURE__ */ G(
+                  K,
+                  {
+                    ...e.props,
+                    key: `AutocompleteItem-${e.props.value}`,
+                    selected: t.value === e.props.value,
+                    isHighlighted: l === t.highlightedIndex
+                  }
+                ))
+              }
+            )
           }
         )
       ]
     }
   );
-}, Y = () => null;
-Object.defineProperty(Y, "componentType", {
+}, Q = () => null;
+Object.defineProperty(Q, "componentType", {
   value: "AutocompleteItem",
   writable: !1,
   enumerable: !1
 });
 export {
   re as Autocomplete,
-  Y as AutocompleteItem
+  Q as AutocompleteItem
 };

package/dist/autocomplete/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { ChangeEvent, ReactElement } from 'react';
 import { SelectMenuOptionProps } from '../select/types.js';
 export declare const AUTOCOMPLETE_ACTIONS: {
     readonly SET_IS_OPEN: "SET_IS_OPEN";
@@ -15,7 +15,7 @@ export type AutocompleteState = {
     value: string;
     inputValue: string;
     isClearButtonEnabled: boolean;
-    autocompleteOptions: React.ReactNode;
+    autocompleteOptions: any[];
     highlightedIndex: number;
 };
 export type AutocompleteAction = {
@@ -26,7 +26,7 @@ export type AutocompleteAction = {
     payload: string;
 } | {
     type: typeof AUTOCOMPLETE_ACTIONS.SET_OPTIONS;
-    payload: React.ReactNode;
+    payload: any[];
 } | {
     type: typeof AUTOCOMPLETE_ACTIONS.SET_VALUE;
     payload: string;
@@ -49,9 +49,27 @@ export type AutocompleteOptionItemElement = ReactElement<SelectMenuOptionProps &
     selectedValue: string;
 }>;
 export type AutocompleteProps = {
-    defaultValue?: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     children: ReactElement<AutocompleteItemProps> | ReactElement<AutocompleteItemProps>[];
+    /** Unique identifier for the autocomplete component. */
+    id?: string;
+    /** Initial selected value when the component is first rendered. */
+    defaultValue?: string;
+    /** When true, disables the autocomplete input and prevents user interaction. */
+    disabled?: boolean;
+    /** Callback function triggered when the input value changes */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /** Enables typing freeform values not limited to the dropdown options and keep the value inside the Input. */
+    freeSolo?: boolean;
+    /** Displays loading spinner inside the dropdown list. */
+    isLoading?: boolean;
+    /** Callback triggered when an option is selected from the dropdown. */
+    onSelectItem?: (item: string) => void;
+    /** Callback triggered when the dropdown is opened. */
+    onOpen?: () => void;
+    /** Callback triggered when the dropdown is closed. */
+    onClose?: () => void;
+    /** Controls whether the dropdown is open (controlled mode). */
+    isOpen?: boolean;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'defaultChecked'>;
 export type AutocompleteItemProps = {
     children: string;

package/dist/autocomplete/use-autocomplete-controller.d.ts

@@ -0,0 +1,10 @@
+import { AutocompleteAction, AutocompleteState, AutocompleteOptionItemElement, AutocompleteProps } from './types.js';
+export declare const useAutocompleteController: ({ children, defaultValue, isOpen, freeSolo, onOpen, onClose, onChange, }: {
+    onChange?: (input: string, inputRef: any) => void;
+} & Pick<AutocompleteProps, "children" | "defaultValue" | "isOpen" | "freeSolo" | "onOpen" | "onClose">) => {
+    state: AutocompleteState;
+    dispatch: import('react').ActionDispatch<[action: AutocompleteAction]>;
+    inputRef: import('react').RefObject<HTMLInputElement | null>;
+    validChildren: AutocompleteOptionItemElement[];
+    getOptionLabelByValue: (children: AutocompleteProps["children"], value: string) => string;
+};

package/dist/autocomplete/use-autocomplete-controller.js

@@ -0,0 +1,125 @@
+import { l as B } from "../lodash-D1c5hFAM.js";
+import { useRef as _, useMemo as v, Children as x, useReducer as R, useEffect as y, isValidElement as U } from "react";
+import { AUTOCOMPLETE_ACTIONS as w } from "./types.js";
+const {
+  ON_RESET: V,
+  ON_SELECT_ITEM: C,
+  SET_INPUT_VALUE: L,
+  SET_IS_OPEN: f,
+  SET_OPTIONS: c,
+  TOGGLE_CLEAR_BUTTON: b,
+  SET_VALUE: E,
+  SET_HIGHLIGHTED_INDEX: G
+} = w, M = (e, t) => {
+  switch (t.type) {
+    case f:
+      return { ...e, isOpen: t.payload };
+    case L:
+      return { ...e, inputValue: t.payload };
+    case c:
+      return { ...e, autocompleteOptions: t.payload || [] };
+    case E:
+      return { ...e, value: t.payload };
+    case b:
+      return {
+        ...e,
+        isClearButtonEnabled: t.payload || !!e.inputValue
+      };
+    case V:
+      return {
+        ...e,
+        value: "",
+        inputValue: "",
+        isClearButtonEnabled: !1,
+        highlightedIndex: -1
+      };
+    case C:
+      return {
+        ...e,
+        inputValue: t.payload.inputValue,
+        value: t.payload.value,
+        isOpen: !1,
+        isClearButtonEnabled: !0
+      };
+    case G:
+      return { ...e, highlightedIndex: t.payload, isOpen: !0 };
+    default:
+      return e;
+  }
+}, P = (e) => {
+  var p, r;
+  const t = ((p = e == null ? void 0 : e.type) == null ? void 0 : p.componentType) || ((r = e == null ? void 0 : e.props) == null ? void 0 : r.__mdxType);
+  return U(e) && t === "AutocompleteItem";
+}, H = (e, t) => {
+  var i, a;
+  const p = ((i = e.props.children) == null ? void 0 : i.toString().toLowerCase()) || "", r = (a = e.props.value) == null ? void 0 : a.toLowerCase(), o = t.toLowerCase();
+  return p.includes(o) || r.includes(o);
+}, S = (e) => x.toArray(e).filter((t) => P(t)) || [], I = (e, t) => {
+  var p;
+  return (((p = S(e).find((r) => r.props.value === t)) == null ? void 0 : p.props.children) || "").toString();
+}, X = ({
+  children: e,
+  defaultValue: t = "",
+  isOpen: p = !1,
+  freeSolo: r = !1,
+  onOpen: o,
+  onClose: i,
+  onChange: a
+}) => {
+  const d = _(null), T = _(!1), n = v(
+    () => S(e || []),
+    [e]
+  ), O = () => {
+    var s;
+    return (s = d.current) == null ? void 0 : s.focus();
+  }, [u, l] = R(M, null, () => ({
+    isOpen: !!p,
+    value: t,
+    inputValue: t,
+    autocompleteOptions: n,
+    isClearButtonEnabled: !1,
+    highlightedIndex: -1
+  }));
+  y(() => {
+    l({ type: c, payload: n });
+  }, [n]), y(() => {
+    if (!T.current) {
+      T.current = !0;
+      return;
+    }
+    u.inputValue === "" && u.value === "" && O();
+  }, [u.isClearButtonEnabled]), y(() => {
+    if (u.isOpen)
+      o == null || o(), O();
+    else {
+      i == null || i();
+      const s = I(e, u.value);
+      s && u.value ? (l({
+        type: L,
+        payload: s
+      }), l({ type: f, payload: !1 }), a == null || a(s, d)) : r || (l({ type: V }), a == null || a("", d)), l({ type: b });
+    }
+  }, [u.isOpen]);
+  const m = v(
+    () => B.debounce((s) => {
+      if (s) {
+        const A = n.filter(
+          (N) => H(N, s)
+        );
+        l({ type: c, payload: A }), !u.isOpen && !u.value && l({ type: f, payload: !0 }), r && l({ type: E, payload: "" });
+      } else
+        l({ type: E, payload: "" }), l({ type: c, payload: n });
+    }, 500),
+    [n, u.isOpen, u.value, r]
+  );
+  return y(() => (m(u.inputValue), () => m.cancel()), [u.inputValue]), {
+    state: u,
+    dispatch: l,
+    inputRef: d,
+    validChildren: n,
+    getOptionLabelByValue: I
+  };
+};
+export {
+  X as useAutocompleteController
+};

package/dist/button/helpers.d.ts

@@ -5,7 +5,7 @@ export declare const getVariantAppearanceClass: ({ disabled, variant, appearance
     appearance?: ButtonAppearance;
 }) => string | undefined;
 export declare const getSizeClass: (size?: ButtonSize) => "gi-btn-small" | "gi-btn-large" | "gi-btn-regular";
-export declare const getButtonIconSizeClass: (size?: ButtonSize) => "gi-icon-btn-small" | "gi-icon-btn-large" | "gi-icon-btn-regular";
+export declare const getButtonIconSizeClass: (size?: ButtonSize) => "gi-icon-btn-small" | "gi-icon-btn-large" | "gi-icon-btn-extra-large" | "gi-icon-btn-regular";
 export declare const isButtonDisabled: ({ disabled, variant, appearance, }: {
     disabled?: boolean;
     variant?: ButtonVariant;

package/dist/button/helpers.js

@@ -1,12 +1,12 @@
 const s = ({
-  disabled: t,
+  disabled: l,
   variant: e,
-  appearance: l
+  appearance: t
 }) => {
   let i;
-  return t || (e === "secondary" ? l === "dark" ? i = "gi-btn-secondary-dark" : l === "light" ? i = "gi-btn-secondary-light" : i = "gi-btn-secondary" : e === "flat" ? l === "dark" ? i = "gi-btn-flat-dark" : l === "light" ? i = "gi-btn-flat-light" : i = "gi-btn-flat" : l === "dark" ? i = "gi-btn-primary-dark" : l === "light" ? i = "gi-btn-primary-light" : i = "gi-btn-primary"), i;
-}, r = (t) => {
-  switch (t) {
+  return l || (e === "secondary" ? t === "dark" ? i = "gi-btn-secondary-dark" : t === "light" ? i = "gi-btn-secondary-light" : i = "gi-btn-secondary" : e === "flat" ? t === "dark" ? i = "gi-btn-flat-dark" : t === "light" ? i = "gi-btn-flat-light" : i = "gi-btn-flat" : t === "dark" ? i = "gi-btn-primary-dark" : t === "light" ? i = "gi-btn-primary-light" : i = "gi-btn-primary"), i;
+}, r = (l) => {
+  switch (l) {
     case "small":
       return "gi-btn-small";
     case "large":
@@ -14,26 +14,28 @@ const s = ({
     default:
       return "gi-btn-regular";
   }
-}, g = (t) => {
-  switch (t) {
+}, g = (l) => {
+  switch (l) {
     case "small":
       return "gi-icon-btn-small";
     case "large":
       return "gi-icon-btn-large";
+    case "extraLarge":
+      return "gi-icon-btn-extra-large";
     default:
       return "gi-icon-btn-regular";
   }
-}, d = ({
-  disabled: t,
+}, n = ({
+  disabled: l,
   variant: e,
-  appearance: l
+  appearance: t
 }) => {
   let i;
-  return t && (e === "secondary" ? l === "dark" ? i = "gi-btn-secondary-dark-disabled" : l === "light" ? i = "gi-btn-secondary-light-disabled" : i = "gi-btn-secondary-disabled" : e === "flat" ? l === "dark" ? i = "gi-btn-flat-dark-disabled" : l === "light" ? i = "gi-btn-flat-light-disabled" : i = "gi-btn-flat-disabled" : l === "dark" ? i = "gi-btn-primary-dark-disabled" : l === "light" ? i = "gi-btn-primary-light-disabled" : i = "gi-btn-primary-disabled"), i;
+  return l && (e === "secondary" ? t === "dark" ? i = "gi-btn-secondary-dark-disabled" : t === "light" ? i = "gi-btn-secondary-light-disabled" : i = "gi-btn-secondary-disabled" : e === "flat" ? t === "dark" ? i = "gi-btn-flat-dark-disabled" : t === "light" ? i = "gi-btn-flat-light-disabled" : i = "gi-btn-flat-disabled" : t === "dark" ? i = "gi-btn-primary-dark-disabled" : t === "light" ? i = "gi-btn-primary-light-disabled" : i = "gi-btn-primary-disabled"), i;
 };
 export {
   g as getButtonIconSizeClass,
   r as getSizeClass,
   s as getVariantAppearanceClass,
-  d as isButtonDisabled
+  n as isButtonDisabled
 };

package/dist/button/types.d.ts

@@ -1,7 +1,7 @@
 export declare const ButtonVariants: readonly ["primary", "secondary", "flat"];
 export type ButtonVariant = (typeof ButtonVariants)[number];
 export type ButtonAppearance = 'default' | 'dark' | 'light';
-export type ButtonSize = 'medium' | 'small' | 'large';
+export type ButtonSize = 'medium' | 'small' | 'large' | 'extraLarge';
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: ButtonVariant;
     appearance?: ButtonAppearance;