@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
151 lines (150 loc) • 8.36 kB
JavaScript
"use client";
import { jsxs as kt, jsx as K } from "react/jsx-runtime";
import { d as pt } from "./index.cKLI89Eg.js";
import { c as _t } from "./index.DQOqod3i.js";
import { D as bt } from "./Icon.DYtaQgbw.js";
import { Tooltip as ft } from "../tooltip.BFQG-7VR.js";
import { g as D } from "./helpers.CexwVao7.js";
import { forwardRef as Dt } from "react";
import { u as wt } from "./useBreakpoint.1txsny17.js";
import '../assets/LinkButton.IKIlFnpH.css';const St = "ds-link-button_root_6wtw2_1", Nt = "ds-link-button_root--highlight_6wtw2_76", Lt = "ds-link-button_root--dark-highlight_6wtw2_76", It = "ds-link-button_root--filled_6wtw2_152", Ft = "ds-link-button_root--outline_6wtw2_180", Ot = "ds-link-button_root--ghost_6wtw2_207", Bt = "ds-link-button_root--ghost-flush_6wtw2_232", yt = "ds-link-button_root--small_6wtw2_238", Tt = "ds-link-button_root--navigation_6wtw2_429", Gt = "ds-link-button_root--navigation--stretched_6wtw2_507", Ht = "ds-link-button_root--navigation--stretched--icon-left_6wtw2_510", Pt = "ds-link-button_root--dark-filled_6wtw2_513", Et = "ds-link-button_root--dark-outline_6wtw2_570", At = "ds-link-button_root--dark-ghost_6wtw2_626", xt = "ds-link-button_root--dark-ghost-flush_6wtw2_680", zt = "ds-link-button_root--stretched_6wtw2_855", Ct = "ds-link-button_root--icon-left_6wtw2_858", Vt = "ds-link-button_root--icon-only_6wtw2_861", jt = "ds-link-button_root--icon-only-small_6wtw2_877", Kt = "ds-link-button_icon--navigation_6wtw2_896", Rt = "ds-link-button_label--hidden_6wtw2_904", e = {
root: St,
rootHighlight: Nt,
rootDarkHighlight: Lt,
rootFilled: It,
rootOutline: Ft,
rootGhost: Ot,
rootGhostFlush: Bt,
rootSmall: yt,
rootNavigation: Tt,
rootNavigationStretched: Gt,
rootNavigationStretchedIconLeft: Ht,
rootDarkFilled: Pt,
rootDarkOutline: Et,
rootDarkGhost: At,
rootDarkGhostFlush: xt,
rootStretched: zt,
rootIconLeft: Ct,
rootIconOnly: Vt,
rootIconOnlySmall: jt,
iconNavigation: Kt,
labelHidden: Rt
}, to = ["medium", "small"], oo = ["filled", "highlight", "outline", "ghost", "navigation"], Ut = ({
hideLabel: S,
iconName: N,
iconSource: t,
isFlush: i,
size: l,
stretched: s,
theme: r,
variant: n
}) => {
if (n === "navigation" && (l === "small" && console.warn(D("DSLinkButton", 'A "size" prop should not be used in combination with variant="navigation". Please remove the "size" prop.')), r === "dark"))
throw new Error(D("DSLinkButton", 'A DSLinkButton with variant="navigation" does not support theme="dark". Please remove the "theme" prop.'));
n !== "ghost" && i ? console.warn(D("DSLinkButton", 'The "isFlush" prop only has an effect when used with variant="ghost". Please remove the "isFlush" prop or set variant="ghost".')) : n === "ghost" && i && s && console.warn(D("DSLinkButton", 'The "stretched" and "isFlush" props do not have an effect when used together. Please remove one of them.')), S && (!N && !t && console.warn(D("DSLinkButton", 'The "hideLabel" prop is set to true but no icon is provided via "iconName" or "iconSource". Please provide an icon to ensure the link is not empty when the label is hidden.')), s && console.warn(D("DSLinkButton", 'The "stretched" and "hideLabel" props do not have an effect when used together. Please remove one of them.')));
}, Mt = Dt((S, N) => {
const t = pt.c(76);
let i, l, s, r, n, a, c, u, g, _, L, I, F, O, B, y, T, G, h;
t[0] !== S ? ({
children: l,
aria: i,
className: s,
download: r,
hideLabel: L,
href: n,
iconName: a,
iconPosition: I,
iconSource: c,
isFlush: F,
referrerPolicy: u,
rel: g,
size: O,
stretched: B,
target: y,
theme: T,
variant: G,
tooltip: h,
..._
} = S, t[0] = S, t[1] = i, t[2] = l, t[3] = s, t[4] = r, t[5] = n, t[6] = a, t[7] = c, t[8] = u, t[9] = g, t[10] = _, t[11] = L, t[12] = I, t[13] = F, t[14] = O, t[15] = B, t[16] = y, t[17] = T, t[18] = G, t[19] = h) : (i = t[1], l = t[2], s = t[3], r = t[4], n = t[5], a = t[6], c = t[7], u = t[8], g = t[9], _ = t[10], L = t[11], I = t[12], F = t[13], O = t[14], B = t[15], y = t[16], T = t[17], G = t[18], h = t[19]);
const vt = L === void 0 ? !1 : L, R = I === void 0 ? "left" : I, H = F === void 0 ? !1 : F, E = O === void 0 ? "medium" : O, mt = B === void 0 ? !1 : B, U = y === void 0 ? "_self" : y, M = T === void 0 ? "light" : T, o = G === void 0 ? "filled" : G, f = wt(vt), P = wt(mt);
process.env.NODE_ENV !== "production" && Ut({
hideLabel: f,
iconName: a,
iconSource: c,
isFlush: H,
size: E,
stretched: mt,
theme: M,
variant: o
});
const d = M === "dark", Z = o === "filled", $ = o === "highlight", q = o === "outline", J = o === "ghost" && H !== !0, Q = o === "navigation", W = o === "navigation" && P && R === "right", X = o === "navigation" && P && R === "left", Y = o === "ghost" && H === !0, tt = d && o === "filled", ot = d && o === "highlight", et = d && o === "outline", nt = d && o === "ghost" && H !== !0, it = d && o === "ghost" && H === !0, st = E === "small" || o === "navigation", lt = R === "left", rt = f && E === "medium" && o !== "navigation", at = f && E === "small" && o !== "navigation";
let A;
t[20] !== s || t[21] !== P || t[22] !== $ || t[23] !== q || t[24] !== J || 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] !== Z ? (A = _t(e.root, s, {
[]: Z,
[]: $,
[]: q,
[]: J,
[]: Q,
[]: W,
[]: X,
[]: Y,
[]: tt,
[]: ot,
[]: et,
[]: nt,
[]: it,
[]: st,
[]: P,
[]: lt,
[]: rt,
[]: at
}), t[20] = s, t[21] = P, t[22] = $, t[23] = q, t[24] = J, 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] = Z, t[39] = A) : A = t[39];
const ct = A;
let x;
t[40] !== f || t[41] !== o ? (x = _t({
[]: f && o !== "navigation"
}) || void 0, t[40] = f, t[41] = o, t[42] = x) : x = t[42];
const ht = x, dt = o === "navigation";
let z;
t[43] !== dt ? (z = _t({
[]: dt
}), t[43] = dt, t[44] = z) : z = t[44];
const ut = z, gt = M === "light" && o === "filled" || d && o === "outline" || d && o === "ghost" ? "dark" : "light", m = n === void 0 ? "span" : "a";
let k;
t[45] !== m || t[46] !== r || t[47] !== n || t[48] !== u || t[49] !== g || t[50] !== U ? (k = m === "a" && {
href: n,
target: U,
rel: g,
referrerPolicy: u,
download: r
}, t[45] = m, t[46] = r, t[47] = n, t[48] = u, t[49] = g, t[50] = U, t[51] = k) : k = t[51];
let w;
t[52] !== l || t[53] !== ht ? (w = /* @__PURE__ */ K("span", { className: ht, children: l }), t[52] = l, t[53] = ht, t[54] = w) : w = t[54];
let v;
t[55] !== ut || t[56] !== a || t[57] !== c || t[58] !== gt ? (v = (a || c) && /* @__PURE__ */ K(bt, { name: a, theme: gt, source: c, className: ut, "aria-hidden": "true" }), t[55] = ut, t[56] = a, t[57] = c, t[58] = gt, t[59] = v) : v = t[59];
let C;
t[60] !== m || t[61] !== i || t[62] !== N || t[63] !== _ || t[64] !== ct || t[65] !== k || t[66] !== w || t[67] !== v ? (C = /* @__PURE__ */ kt(m, { className: ct, ...k, ...i, ..._, ref: N, children: [
w,
v
] }), t[60] = m, t[61] = i, t[62] = N, t[63] = _, t[64] = ct, t[65] = k, t[66] = w, t[67] = v, t[68] = C) : C = t[68];
const V = C;
if (h) {
let p;
t[69] !== V ? (p = /* @__PURE__ */ K(ft.Anchor, { children: V }), t[69] = V, t[70] = p) : p = t[70];
let b;
t[71] !== h ? (b = /* @__PURE__ */ K(ft.Content, { children: h }), t[71] = h, t[72] = b) : b = t[72];
let j;
return t[73] !== p || t[74] !== b ? (j = /* @__PURE__ */ kt(ft, { placement: "top", tooltipOffset: 6, children: [
p,
b
] }), t[73] = p, t[74] = b, t[75] = j) : j = t[75], j;
}
return V;
});
Mt.displayName = "DSLinkButton";
export {
Mt as D,
to as L,
oo as a,
Ut as v
};