@stihl-design-system/components/chunks/Button.CCol--xy.js

Welcome to the STIHL Design System react component library.

"use client";
import { jsxs as kt, jsx as H } from "react/jsx-runtime";
import { d as yt } from "./index.cKLI89Eg.js";
import { c as vt } from "./index.DQOqod3i.js";
import { forwardRef as qt } from "react";
import { u as St } from "./useBreakpoint.1txsny17.js";
import { D as Nt } from "./Icon.DYtaQgbw.js";
import { DSSpinner as Ot } from "../spinner.DtLnsqVV.js";
import { Tooltip as pt } from "../tooltip.BFQG-7VR.js";
import { g as p } from "./helpers.CexwVao7.js";
import '../assets/Button.Bi1KUKMv.css';const Ft = "ds-button_root_eqbz4_1", Lt = "ds-button_root--highlight_eqbz4_76", wt = "ds-button_root--dark-highlight_eqbz4_76", It = "ds-button_root--filled_eqbz4_152", Bt = "ds-button_root--outline_eqbz4_180", Ht = "ds-button_root--ghost_eqbz4_207", Gt = "ds-button_root--ghost-flush_eqbz4_232", Tt = "ds-button_root--small_eqbz4_238", Pt = "ds-button_root--utility_eqbz4_318", Ut = "ds-button_loader_eqbz4_408", Ct = "ds-button_root--navigation_eqbz4_429", Et = "ds-button_root--navigation--stretched_eqbz4_507", At = "ds-button_root--navigation--stretched--icon-left_eqbz4_510", xt = "ds-button_root--dark-filled_eqbz4_513", Vt = "ds-button_root--dark-outline_eqbz4_570", jt = "ds-button_root--dark-ghost_eqbz4_626", Rt = "ds-button_root--dark-ghost-flush_eqbz4_680", Mt = "ds-button_root--dark-utility_eqbz4_742", Zt = "ds-button_root--stretched_eqbz4_855", $t = "ds-button_root--icon-left_eqbz4_858", Jt = "ds-button_root--icon-only_eqbz4_861", Kt = "ds-button_root--icon-only-small_eqbz4_877", Qt = "ds-button_icon--navigation_eqbz4_900", Wt = "ds-button_icon--hidden_eqbz4_907", Xt = "ds-button_label--hidden_eqbz4_911", Yt = "ds-button_label--loading_eqbz4_923", e = {
  root: Ft,
  rootHighlight: Lt,
  rootDarkHighlight: wt,
  rootFilled: It,
  rootOutline: Bt,
  rootGhost: Ht,
  rootGhostFlush: Gt,
  rootSmall: Tt,
  rootUtility: Pt,
  loader: Ut,
  rootNavigation: Ct,
  rootNavigationStretched: Et,
  rootNavigationStretchedIconLeft: At,
  rootDarkFilled: xt,
  rootDarkOutline: Vt,
  rootDarkGhost: jt,
  rootDarkGhostFlush: Rt,
  rootDarkUtility: Mt,
  rootStretched: Zt,
  rootIconLeft: $t,
  rootIconOnly: Jt,
  rootIconOnlySmall: Kt,
  iconNavigation: Qt,
  iconHidden: Wt,
  labelHidden: Xt,
  labelLoading: Yt
}, uo = ["medium", "small"], _o = ["highlight", "filled", "outline", "ghost", "utility", "navigation"], to = ({
  hideLabel: D,
  iconName: k,
  iconSource: t,
  isFlush: l,
  size: d,
  stretched: r,
  theme: s,
  variant: i
}) => {
  if (i === "navigation" && (d === "small" && console.warn(p("DSButton", 'A "size" prop should not be used in combination with variant="navigation". Please remove the "size" prop.')), s === "dark"))
    throw new Error(p("DSButton", 'A DSButton with variant="navigation" does not support theme="dark". Please remove the "theme" prop.'));
  i !== "ghost" && l ? console.warn(p("DSButton", 'The "isFlush" prop only has an effect when used with variant="ghost". Please remove the "isFlush" prop or set variant="ghost".')) : i === "ghost" && l && r && console.warn(p("DSButton", 'The "stretched" and "isFlush" props do not have an effect when used together. Please remove one of them.')), D && (!k && !t && console.warn(p("DSButton", 'The "hideLabel" prop is set to true but no icon is provided via "iconName" or "iconSource". Please provide an icon to ensure the button is not empty when the label is hidden.')), r && console.warn(p("DSButton", 'The "stretched" and "hideLabel" props do not have an effect when used together. Please remove one of them.')));
}, oo = qt((D, k) => {
  const t = yt.c(80);
  let l, d, r, s, i, h, _, S, z, y, q, N, O, F, L, w, u;
  t[0] !== D ? ({
    children: d,
    aria: l,
    className: r,
    disabled: S,
    hideLabel: z,
    iconName: s,
    iconPosition: y,
    iconSource: i,
    isFlush: q,
    loading: N,
    size: O,
    stretched: F,
    theme: L,
    tooltip: u,
    variant: w,
    onClick: h,
    ..._
  } = D, t[0] = D, t[1] = l, t[2] = d, t[3] = r, t[4] = s, t[5] = i, t[6] = h, t[7] = _, t[8] = S, t[9] = z, t[10] = y, t[11] = q, t[12] = N, t[13] = O, t[14] = F, t[15] = L, t[16] = w, t[17] = u) : (l = t[1], d = t[2], r = t[3], s = t[4], i = t[5], h = t[6], _ = t[7], S = t[8], z = t[9], y = t[10], q = t[11], N = t[12], O = t[13], F = t[14], L = t[15], w = t[16], u = t[17]);
  const G = S === void 0 ? !1 : S, zt = z === void 0 ? !1 : z, j = y === void 0 ? "left" : y, I = q === void 0 ? !1 : q, n = N === void 0 ? !1 : N, T = O === void 0 ? "medium" : O, Dt = F === void 0 ? !1 : F, R = L === void 0 ? "light" : L, o = w === void 0 ? "filled" : w, b = St(zt), B = St(Dt);
  process.env.NODE_ENV !== "production" && to({
    hideLabel: b,
    iconName: s,
    iconSource: i,
    isFlush: I,
    size: T,
    stretched: Dt,
    theme: R,
    variant: o
  });
  const a = R === "dark", M = o === "filled", Z = o === "highlight", $ = o === "outline", J = o === "ghost" && I !== !0, K = o === "utility", Q = o === "navigation", W = o === "navigation" && B && j === "right", X = o === "navigation" && B && j === "left", Y = o === "ghost" && I === !0, tt = a && o === "filled", ot = a && o === "highlight", et = a && o === "outline", nt = a && o === "ghost" && I !== !0, it = a && o === "utility", st = a && o === "ghost" && I === !0, lt = T === "small" || o === "navigation", rt = j === "left", at = b && T === "medium" && o !== "navigation", ct = b && T === "small" && o !== "navigation";
  let P;
  t[18] !== r || t[19] !== B || t[20] !== M || t[21] !== Z || t[22] !== $ || t[23] !== J || t[24] !== K || t[25] !== Q || t[26] !== W || t[27] !== X || t[28] !== Y || t[29] !== tt || t[30] !== ot || t[31] !== et || t[32] !== nt || t[33] !== it || t[34] !== st || t[35] !== lt || t[36] !== rt || t[37] !== at || t[38] !== ct ? (P = vt(e.root, r, {
    [e.rootFilled]: M,
    [e.rootHighlight]: Z,
    [e.rootOutline]: $,
    [e.rootGhost]: J,
    [e.rootUtility]: K,
    [e.rootNavigation]: Q,
    [e.rootNavigationStretched]: W,
    [e.rootNavigationStretchedIconLeft]: X,
    [e.rootGhostFlush]: Y,
    [e.rootDarkFilled]: tt,
    [e.rootDarkHighlight]: ot,
    [e.rootDarkOutline]: et,
    [e.rootDarkGhost]: nt,
    [e.rootDarkUtility]: it,
    [e.rootDarkGhostFlush]: st,
    [e.rootSmall]: lt,
    [e.rootStretched]: B,
    [e.rootIconLeft]: rt,
    [e.rootIconOnly]: at,
    [e.rootIconOnlySmall]: ct
  }), t[18] = r, t[19] = B, t[20] = M, t[21] = Z, t[22] = $, t[23] = J, t[24] = K, t[25] = Q, t[26] = W, t[27] = X, t[28] = Y, t[29] = tt, t[30] = ot, t[31] = et, t[32] = nt, t[33] = it, t[34] = st, t[35] = lt, t[36] = rt, t[37] = at, t[38] = ct, t[39] = P) : P = t[39];
  const dt = P;
  let U;
  t[40] !== n || t[41] !== b || t[42] !== o ? (U = vt({
    [e.labelHidden]: b && o !== "navigation",
    [e.labelLoading]: n
  }) || void 0, t[40] = n, t[41] = b, t[42] = o, t[43] = U) : U = t[43];
  const ht = U, ut = o === "navigation", _t = o === "utility";
  let C;
  t[44] !== n || t[45] !== ut || t[46] !== _t ? (C = vt({
    [e.iconNavigation]: ut,
    [e.iconUtility]: _t,
    [e.iconHidden]: n
  }), t[44] = n, t[45] = ut, t[46] = _t, t[47] = C) : C = t[47];
  const bt = C, gt = R === "light" && o === "filled" || a && o === "outline" || a && o === "ghost" || a && o === "utility" ? "dark" : "light";
  let E;
  t[48] !== G || t[49] !== n || t[50] !== h ? (E = (c) => {
    if (G || n) {
      c.preventDefault();
      return;
    }
    h && h(c);
  }, t[48] = G, t[49] = n, t[50] = h, t[51] = E) : E = t[51];
  const ft = E, mt = G || n;
  let g;
  t[52] !== n ? (g = n && /* @__PURE__ */ H(Ot, { className: e.loader, aria: {
    "aria-label": "Loading state"
  } }), t[52] = n, t[53] = g) : g = t[53];
  let f;
  t[54] !== d || t[55] !== ht ? (f = /* @__PURE__ */ H("span", { className: ht, children: d }), t[54] = d, t[55] = ht, t[56] = f) : f = t[56];
  let m;
  t[57] !== bt || t[58] !== s || t[59] !== i || t[60] !== gt ? (m = (s || i) && /* @__PURE__ */ H(Nt, { name: s, theme: gt, source: i, className: bt, "aria-hidden": "true" }), t[57] = bt, t[58] = s, t[59] = i, t[60] = gt, t[61] = m) : m = t[61];
  let A;
  t[62] !== l || t[63] !== ft || t[64] !== n || t[65] !== k || t[66] !== _ || t[67] !== dt || t[68] !== mt || t[69] !== g || t[70] !== f || t[71] !== m ? (A = /* @__PURE__ */ kt("button", { className: dt, type: "submit", onClick: ft, ...l, ..._, "aria-disabled": mt, "aria-busy": n, ref: k, children: [
    g,
    f,
    m
  ] }), t[62] = l, t[63] = ft, t[64] = n, t[65] = k, t[66] = _, t[67] = dt, t[68] = mt, t[69] = g, t[70] = f, t[71] = m, t[72] = A) : A = t[72];
  const x = A;
  if (u) {
    let c;
    t[73] !== x ? (c = /* @__PURE__ */ H(pt.Anchor, { children: x }), t[73] = x, t[74] = c) : c = t[74];
    let v;
    t[75] !== u ? (v = /* @__PURE__ */ H(pt.Content, { children: u }), t[75] = u, t[76] = v) : v = t[76];
    let V;
    return t[77] !== c || t[78] !== v ? (V = /* @__PURE__ */ kt(pt, { placement: "top", tooltipOffset: 6, children: [
      c,
      v
    ] }), t[77] = c, t[78] = v, t[79] = V) : V = t[79], V;
  }
  return x;
});
oo.displayName = "DSButton";
export {
  uo as B,
  oo as D,
  _o as a,
  to as v
};