@hashicorp/mds-react 0.9.3 → 0.9.5

package/index-WkGIywHj.js

@@ -1,767 +0,0 @@
-import { jsx as t, jsxs as _, Fragment as $ } from "react/jsx-runtime";
-import { useId as M, createElement as T, forwardRef as v, useState as X, useRef as q } from "react";
-import { u as H, a as J } from "./index-DBjAbGt7.js";
-import g from "classnames";
-import { IconArrowRight24 as Y } from "@hashicorp/flight-icons/svg-react/arrow-right-24";
-import x from "@hashicorp/flight-icons/svg-sprite/svg-sprite.svg";
-const Q = "loading__-Ng-b", V = "running__6uXP5", E = {
-  "flight-icon": "flight-icon__f6lPO",
-  "display-inline": "display-inline__ItStG",
-  loading: Q,
-  running: V
-}, sr = [12, 16, 24, 32], oo = {
-  12: 16,
-  16: 16,
-  24: 24,
-  32: 24
-}, D = typeof x == "string" ? x : x.src, k = ({
-  name: o,
-  color: r = "currentColor",
-  size: e = 16,
-  stretched: s = !1,
-  isInlineBlock: n = !0,
-  title: a,
-  className: i,
-  ...c
-}) => {
-  const l = M(), u = M(), d = oo[e];
-  return /* @__PURE__ */ t(
-    "svg",
-    {
-      className: g(
-        E["flight-icon"],
-        `flight-icon-${o}`,
-        {
-          [E["display-inline"]]: n && !s,
-          [E.loading]: o === "loading",
-          [E.running]: o === "running"
-        },
-        i
-      ),
-      ...c,
-      "aria-hidden": a ? "false" : "true",
-      "aria-labelledby": a ? u : void 0,
-      fill: r,
-      id: l,
-      role: a ? "img" : void 0,
-      width: s ? "100%" : e,
-      height: s ? "100%" : e,
-      viewBox: `0 0 ${d} ${d}`,
-      xmlns: "http://www.w3.org/2000/svg",
-      children: a ? /* @__PURE__ */ _($, { children: [
-        /* @__PURE__ */ t("title", { id: u, children: a }),
-        /* @__PURE__ */ t("g", { role: "presentation", children: /* @__PURE__ */ t("use", { href: `${D}#flight-${o}-${d}` }) })
-      ] }) : /* @__PURE__ */ t("use", { href: `${D}#flight-${o}-${d}` })
-    }
-  );
-};
-k.displayName = "FlightIcon";
-const ro = {
-  "align-left": "align-left__Twy3l",
-  "align-center": "align-center__iK1pm",
-  "align-right": "align-right__YgPRT"
-}, eo = [
-  "primary",
-  "strong",
-  "faint",
-  "disabled",
-  "high-contrast",
-  "action",
-  "action-hover",
-  "action-active",
-  "highlight",
-  "highlight-on-surface",
-  "highlight-high-contrast",
-  "success",
-  "success-on-surface",
-  "success-high-contrast",
-  "warning",
-  "warning-on-surface",
-  "warning-high-contrast",
-  "critical",
-  "critical-on-surface",
-  "critical-high-contrast"
-], ar = ["regular", "medium", "semibold", "bold"];
-function to(o, r) {
-  return {
-    "hds-body": `mds-typography-legacy-body-${r}`,
-    code: `mds-typography-code-${r}`,
-    "display-expressive": `mds-typography-display-expressive-${r}`,
-    label: "mds-typography-label",
-    body: `mds-typography-body-${r}`
-  }[o];
-}
-const C = ({
-  tag: o,
-  group: r,
-  size: e = "200",
-  weight: s,
-  align: n,
-  color: a,
-  children: i,
-  className: c,
-  ...l
-}) => {
-  const u = o ?? "span", d = to(r, e), p = eo.includes(a);
-  return /* @__PURE__ */ t(
-    u,
-    {
-      className: g(
-        d,
-        {
-          [ro[`align-${n}`]]: n,
-          [`mds-typography-font-weight-${s}`]: s,
-          [`mds-foreground-${a}`]: a && p
-        },
-        c
-      ),
-      style: a && !p ? { color: a } : {},
-      ...l,
-      children: i
-    }
-  );
-}, no = ({
-  size: o = "300",
-  ...r
-}) => T(C, {
-  ...r,
-  size: o,
-  group: "body"
-}), so = ({
-  size: o = "200",
-  ...r
-}) => T(C, {
-  ...r,
-  size: o,
-  group: "display-expressive"
-}), ao = (o) => T(C, {
-  ...o,
-  group: "label"
-}), io = ({
-  size: o = "200",
-  weight: r = "regular",
-  ...e
-}) => T(C, {
-  ...e,
-  size: o,
-  weight: r,
-  group: "hds-body"
-}), co = ({
-  size: o = "200",
-  weight: r = "regular",
-  ...e
-}) => T(C, {
-  ...e,
-  size: o,
-  weight: r,
-  group: "code"
-}), I = {
-  Body: no,
-  DisplayExpressive: so,
-  Label: ao,
-  HDSBody: io,
-  Code: co
-}, lo = "badge__zns82", uo = "text__WoM4W", w = {
-  badge: lo,
-  text: uo,
-  "size-small": "size-small__8xHdE",
-  "size-medium": "size-medium__xqCpO",
-  "size-large": "size-large__Pviip",
-  "color-neutral": "color-neutral__6Csf4",
-  "type-filled": "type-filled__ZaWsu",
-  "type-inverted": "type-inverted__A3554",
-  "type-outlined": "type-outlined__l0zjH",
-  "color-neutral-dark-mode": "color-neutral-dark-mode__C1TO4",
-  "color-highlight": "color-highlight__eWwJ5",
-  "color-success": "color-success__EuxKz",
-  "color-warning": "color-warning__gCbUY",
-  "color-critical": "color-critical__hV-l-"
-}, ir = ["small", "medium", "large"], cr = ["filled", "inverted", "outlined"], lr = [
-  "neutral",
-  "neutral-dark-mode",
-  "highlight",
-  "success",
-  "warning",
-  "critical"
-], mo = {
-  small: 12,
-  medium: 16,
-  large: 16
-}, R = ({
-  icon: o,
-  iconColor: r,
-  iconOnly: e,
-  text: s,
-  size: n = "medium",
-  type: a = "filled",
-  color: i = "neutral",
-  className: c,
-  ...l
-}) => /* @__PURE__ */ _(
-  "div",
-  {
-    className: g(
-      w.badge,
-      w[`size-${n}`],
-      w[`type-${a}`],
-      w[`color-${i}`],
-      c
-    ),
-    ...l,
-    children: [
-      o && /* @__PURE__ */ t(k, { name: o, color: r, size: mo[n] }),
-      e && o ? /* @__PURE__ */ t("span", { className: "sr-only", children: s }) : /* @__PURE__ */ t("div", { className: w.text, children: s })
-    ]
-  }
-);
-R.displayName = "Badge";
-const z = v((o, r) => {
-  const e = H(), {
-    href: s,
-    className: n,
-    isHrefExternal: a,
-    onClick: i,
-    children: c,
-    locale: l,
-    ...u
-  } = o;
-  return s ? /* @__PURE__ */ t(
-    e,
-    {
-      className: n,
-      target: a ? "_blank" : void 0,
-      rel: a ? "noopener noreferrer" : void 0,
-      onClick: i,
-      ...po(s, l, a),
-      ...u,
-      ref: r,
-      children: c
-    }
-  ) : /* @__PURE__ */ t(
-    "button",
-    {
-      type: "button",
-      className: n,
-      onClick: i,
-      ...u,
-      ref: r,
-      children: c
-    }
-  );
-});
-z.displayName = "Interactive";
-const po = (o, r, e) => e ? {
-  href: o,
-  hrefLang: void 0
-} : ["en", "de", "es", "fr", "ja", "ko", "pt", "id"].includes(
-  o.substring(1, 3)
-) ? {
-  href: o,
-  hrefLang: o.substring(1, 3)
-} : o.startsWith("/") && r ? {
-  href: `/${r}${o}`,
-  hrefLang: r
-} : {
-  href: o,
-  hrefLang: void 0
-}, go = "text__2B7Ih", N = {
-  "standalone-link": "standalone-link__85Pyl",
-  "icon-position-leading": "icon-position-leading__KE5kn",
-  "icon-position-trailing": "icon-position-trailing__Mygyz",
-  text: go,
-  "size-small": "size-small__pf7gu",
-  "size-medium": "size-medium__r6Rbi",
-  "size-large": "size-large__aue6M",
-  "color-primary": "color-primary__7WaoM",
-  "color-secondary": "color-secondary__4qYkh",
-  "color-secondary-inverted": "color-secondary-inverted__ILbsj"
-}, dr = ["small", "medium", "large"], ur = [
-  "primary",
-  "secondary",
-  "secondary-inverted"
-], mr = ["leading", "trailing"], L = v(
-  ({
-    text: o,
-    size: r = "medium",
-    color: e = "primary",
-    icon: s,
-    iconPosition: n = "leading",
-    className: a,
-    "data-testid": i,
-    locale: c,
-    ...l
-  }, u) => {
-    const d = s && /* @__PURE__ */ t(k, { name: s, size: 16 });
-    return /* @__PURE__ */ _(
-      z,
-      {
-        ...l,
-        ref: u,
-        className: g(
-          N["standalone-link"],
-          N[`size-${r}`],
-          N[`color-${e}`],
-          N[`icon-position-${n}`],
-          a
-        ),
-        "data-testid": i,
-        locale: c,
-        children: [
-          d && n === "leading" && d,
-          /* @__PURE__ */ t("span", { className: N.text, children: o }),
-          d && n === "trailing" && d
-        ]
-      }
-    );
-  }
-);
-L.displayName = "StandaloneLink";
-const _o = "button__gOWvd", yo = "text__KbKvH", f = {
-  button: _o,
-  "width-full": "width-full__juTUO",
-  text: yo,
-  "color-primary": "color-primary__rWbwp",
-  "color-secondary": "color-secondary__-5Q4d",
-  "color-tertiary": "color-tertiary__rw4Ww",
-  "color-critical": "color-critical__-8hXs",
-  "color-primary-white": "color-primary-white__2JDoz",
-  "color-primary-black": "color-primary-black__zTF4n",
-  "color-secondary-white": "color-secondary-white__AseI0",
-  "color-secondary-black": "color-secondary-black__b-umt",
-  "color-secondary-high-contrast": "color-secondary-high-contrast__3bxg3",
-  "color-boundary": "color-boundary__xJtzy",
-  "color-consul": "color-consul__5lFsa",
-  "color-nomad": "color-nomad__HGWXf",
-  "color-packer": "color-packer__vbRu0",
-  "color-terraform": "color-terraform__DQMD5",
-  "color-vagrant": "color-vagrant__iNokw",
-  "color-vault": "color-vault__Q6Qbm",
-  "color-waypoint": "color-waypoint__8j-Oi",
-  "size-small": "size-small__kT0Jp",
-  "icon-only": "icon-only__5c-is",
-  "size-medium": "size-medium__HxMcm",
-  "size-large": "size-large__MEpK3"
-}, pr = ["small", "medium", "large"], gr = ["leading", "trailing"], _r = [
-  "primary",
-  "primary-black",
-  "primary-white",
-  "secondary",
-  // deprecated; maps to secondary-white
-  "secondary-high-contrast",
-  // alternates based on theme
-  "secondary-white",
-  "secondary-black",
-  "tertiary",
-  "critical",
-  "boundary",
-  "consul",
-  "nomad",
-  "packer",
-  "terraform",
-  "vagrant",
-  "vault",
-  "waypoint",
-  "hashicorp"
-  // alias to primary
-], ho = {
-  primary: "primary",
-  "primary-black": "custom",
-  "primary-white": "custom",
-  secondary: "custom",
-  "secondary-high-contrast": "custom",
-  "secondary-white": "custom",
-  "secondary-black": "custom",
-  tertiary: "tertiary",
-  critical: "critical",
-  boundary: "custom",
-  consul: "custom",
-  nomad: "custom",
-  packer: "custom",
-  terraform: "custom",
-  vagrant: "custom",
-  vault: "custom",
-  waypoint: "custom",
-  hashicorp: "primary"
-}, fo = {
-  small: 12,
-  medium: 16,
-  large: 24
-}, F = v(
-  ({
-    size: o = "medium",
-    color: r = "primary",
-    isFullWidth: e,
-    isIconOnly: s,
-    icon: n,
-    iconPosition: a = "leading",
-    text: i,
-    href: c,
-    isHrefExternal: l,
-    className: u,
-    locale: d,
-    ...p
-  }, y) => {
-    const h = s && !!n, b = n && /* @__PURE__ */ t(k, { name: n, size: fo[o] });
-    return /* @__PURE__ */ t(
-      z,
-      {
-        className: g(
-          f.button,
-          f[`size-${o}`],
-          {
-            [f["width-full"]]: e,
-            [f["icon-only"]]: h
-          },
-          r !== "custom" && f[`color-${r}`],
-          u
-        ),
-        href: p.disabled ? "" : c,
-        isHrefExternal: l,
-        "aria-label": h ? i : void 0,
-        locale: d,
-        ...p,
-        ref: y,
-        children: h && n ? b : /* @__PURE__ */ _($, { children: [
-          n && a === "leading" && b,
-          /* @__PURE__ */ t("div", { className: f.text, children: i }),
-          n && a === "trailing" && b
-        ] })
-      }
-    );
-  }
-);
-F.displayName = "ButtonPrimitive";
-const U = v(({ color: o = "primary", className: r, ...e }, s) => {
-  const n = ho[o], i = n === "custom" ? f[`color-${{
-    hashicorp: "primary",
-    secondary: "secondary-white"
-  }[o] ?? o}`] : void 0;
-  return /* @__PURE__ */ t(
-    F,
-    {
-      ...e,
-      color: n,
-      className: g(i, r),
-      ref: s
-    }
-  );
-});
-U.displayName = "Button";
-const bo = "thumbnail__f0mUs", wo = {
-  thumbnail: bo
-}, No = ({
-  alt: o,
-  aspectRatio: r,
-  src: e
-}) => {
-  const s = J();
-  return e ? /* @__PURE__ */ t(
-    "div",
-    {
-      className: wo.thumbnail,
-      style: { "--aspect-ratio": r },
-      children: /* @__PURE__ */ t(s, { fill: !0, alt: o, src: e })
-    }
-  ) : null;
-}, To = "card__HomZw", vo = "interactive__Irpce", Co = "arrow__qnBL7", So = "link__Dz3Nf", Eo = "cta__UfNG2", ko = "content__SiycH", Io = "subheading__MM0J8", Oo = "contentLockup__08EYi", xo = "badges__GrCpe", Lo = "meta__8eKyE", $o = "metaSeparator__44API", m = {
-  card: To,
-  interactive: vo,
-  arrow: Co,
-  link: So,
-  cta: Eo,
-  content: ko,
-  "has-thumbnail": "has-thumbnail__ftF14",
-  subheading: Io,
-  contentLockup: Oo,
-  badges: xo,
-  meta: Lo,
-  metaSeparator: $o
-}, W = v(
-  ({
-    children: o,
-    className: r,
-    content: e,
-    ctaLabel: s,
-    href: n,
-    standaloneLink: a,
-    isExternal: i,
-    onClickCapture: c,
-    "aria-label": l
-  }, u) => {
-    const d = H(), p = n && !s, y = i ? { target: "_blank", rel: "noopener noreferrer" } : {};
-    return /* @__PURE__ */ _(
-      "div",
-      {
-        ref: u,
-        className: g(
-          m.card,
-          { [m.interactive]: p },
-          r
-        ),
-        children: [
-          p && /* @__PURE__ */ t(
-            d,
-            {
-              href: n,
-              className: m.link,
-              draggable: "false",
-              onClickCapture: c,
-              "aria-label": l,
-              ...y
-            }
-          ),
-          e && /* @__PURE__ */ t(
-            zo,
-            {
-              badges: e.badges,
-              description: e.description,
-              eyebrow: e.eyebrow,
-              heading: e.heading,
-              subheading: e.subheading,
-              thumbnail: e.thumbnail,
-              showArrow: e.showArrow && !!p,
-              cta: {
-                ctaLabel: s,
-                href: n,
-                standaloneLink: a,
-                onClickCapture: c,
-                isExternal: i
-              }
-            }
-          ),
-          o,
-          o && /* @__PURE__ */ t(
-            K,
-            {
-              ctaLabel: s,
-              href: n,
-              standaloneLink: a,
-              onClickCapture: c,
-              isExternal: i
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-W.displayName = "Card";
-const zo = ({
-  badges: o,
-  description: r,
-  eyebrow: e,
-  heading: s,
-  thumbnail: n,
-  subheading: a,
-  cta: i,
-  showArrow: c
-}) => /* @__PURE__ */ _("div", { className: g(m.content, { [m["has-thumbnail"]]: n }), children: [
-  n && /* @__PURE__ */ t(No, { ...n }),
-  /* @__PURE__ */ _("div", { className: m.contentLockup, children: [
-    /* @__PURE__ */ t(Ao, { children: e }),
-    /* @__PURE__ */ t(Do, { children: s }),
-    /* @__PURE__ */ t(Bo, { children: a }),
-    /* @__PURE__ */ t(Po, { children: r }),
-    /* @__PURE__ */ t(Ho, { badges: o }),
-    i && /* @__PURE__ */ t(
-      K,
-      {
-        ctaLabel: i.ctaLabel,
-        href: i.href,
-        standaloneLink: i.standaloneLink,
-        isExternal: i.isExternal,
-        onClickCapture: i.onClickCapture
-      }
-    ),
-    c ? /* @__PURE__ */ t("div", { className: m.arrow, children: /* @__PURE__ */ t(Y, {}) }) : null
-  ] })
-] }), K = ({
-  href: o,
-  ctaLabel: r,
-  standaloneLink: e,
-  isExternal: s,
-  onClickCapture: n
-}) => {
-  const a = o && !r;
-  if (e) {
-    const i = {
-      ...e,
-      icon: e.icon || "chevron-right",
-      iconPosition: e.iconPosition || "trailing"
-    };
-    return /* @__PURE__ */ t(L, { className: m.cta, ...i });
-  }
-  return o && !a && r ? /* @__PURE__ */ t(
-    L,
-    {
-      className: m.cta,
-      text: r,
-      href: o,
-      icon: "chevron-right",
-      iconPosition: "trailing",
-      color: "secondary",
-      onClickCapture: n,
-      isHrefExternal: s
-    }
-  ) : null;
-}, Ao = ({ children: o }) => o ? Array.isArray(o) ? /* @__PURE__ */ t(Mo, { items: Array.from(o) }) : /* @__PURE__ */ t(G, { children: o }) : null, Mo = ({ items: o }) => /* @__PURE__ */ t("ul", { className: m.meta, children: o.map((r, e) => /* @__PURE__ */ _("li", { children: [
-  /* @__PURE__ */ t(G, { children: r }),
-  e < o.length - 1 ? /* @__PURE__ */ t("span", { className: m.metaSeparator, "aria-hidden": !0, children: "|" }) : null
-] }, r)) }), G = ({ children: o }) => o ? /* @__PURE__ */ t(I.Label, { color: "faint", weight: "medium", children: o }) : null, Do = ({ children: o }) => o ? /* @__PURE__ */ t(
-  I.DisplayExpressive,
-  {
-    tag: "span",
-    size: "200",
-    weight: "semibold",
-    color: "strong",
-    children: o
-  }
-) : null, Bo = ({ children: o }) => o ? /* @__PURE__ */ t(I.Body, { tag: "span", size: "200", className: m.subheading, color: "primary", children: o }) : null, Po = ({ children: o }) => o ? typeof o == "string" ? /* @__PURE__ */ t(I.Body, { tag: "span", size: "200", color: "primary", children: o }) : /* @__PURE__ */ t($, { children: o }) : null, Ho = ({ badges: o }) => o && o.length > 0 ? /* @__PURE__ */ t("div", { className: m.badges, children: o.map((r) => /* @__PURE__ */ t(R, { ...r }, r.text)) }) : null;
-W.displayName = "Card";
-const Ro = (o) => {
-  let r;
-  if (o)
-    if (typeof o == "string")
-      r = o;
-    else if (
-      // context: https://github.com/hashicorp/design-system/pull/1564
-      typeof o == "number" || typeof o == "bigint"
-    )
-      r = o.toString();
-    else
-      throw new Error(
-        `\`hds-clipboard\` modifier - \`text\` argument must be a string - provided: ${typeof o}`
-      );
-  return r;
-}, Fo = (o) => {
-  let r;
-  if (typeof o == "string") {
-    if (r = document.querySelector(o), !r) {
-      console.error(
-        "`hds-clipboard` modifier - `target` selector provided does not point to an existing DOM node, check your selector string",
-        r
-      );
-      return;
-    }
-  } else if (o instanceof Node && o.nodeType === Node.ELEMENT_NODE)
-    r = o;
-  else
-    throw o instanceof NodeList ? new Error(
-      "`hds-clipboard` modifier - `target` argument must be a string or a DOM node - provided: a list of DOM nodes"
-    ) : new Error(
-      `\`hds-clipboard\` modifier - \`target\` argument must be a string or a DOM node - provided: ${typeof o}`
-    );
-  return r;
-}, Uo = (o) => {
-  let r;
-  return o instanceof Node && o.nodeType === Node.ELEMENT_NODE && (o instanceof HTMLInputElement || // targetElement.nodeName === 'INPUT' ||
-  o instanceof HTMLTextAreaElement || // targetElement.nodeName === 'TEXTAREA' ||
-  o instanceof HTMLSelectElement ? r = o.value : r = o.innerText), r;
-}, Wo = async (o) => {
-  if (o)
-    try {
-      return await navigator.clipboard.writeText(o), !0;
-    } catch {
-      return console.warn(
-        "copy action failed, please check your browser‘s permissions",
-        {
-          id: "hds-clipboard.write-text-to-clipboard.catch-error"
-        }
-      ), !1;
-    }
-  else
-    return !1;
-}, Ko = async (o, r, e) => {
-  let s;
-  if (e)
-    s = e();
-  else if (o)
-    s = Ro(o);
-  else if (r) {
-    const a = Fo(r);
-    s = Uo(a);
-  } else
-    throw new Error(
-      "`hds-clipboard` modifier - either a `getTextFn`, `text`, or a `target` argument is required"
-    );
-  return await Wo(s);
-}, Go = (o) => {
-  const { text: r, target: e, getTextFn: s, onSuccess: n, onError: a } = o;
-  return { onClick: async (c) => {
-    const l = c.currentTarget;
-    await Ko(r, e, s) ? typeof n == "function" && n({ trigger: l, text: r, target: e }) : typeof a == "function" && a({ trigger: l, text: r, target: e });
-  } };
-}, Zo = "idle__1ofXr", jo = "success__9mXCl", Xo = "error__a3l-p", B = {
-  "copy-button": "copy-button__uXOTd",
-  idle: Zo,
-  success: jo,
-  error: Xo
-}, qo = "clipboard-copy", Jo = "clipboard-checked", Yo = "clipboard-x", P = "idle", Qo = ({
-  size: o = "medium",
-  isIconOnly: r = !1,
-  isFullWidth: e = !1,
-  text: s,
-  textToCopy: n,
-  getTextFn: a,
-  targetToCopy: i,
-  onSuccess: c,
-  onError: l,
-  className: u,
-  defaultIcon: d,
-  ...p
-}) => {
-  const [y, S] = X(P), h = q(null), b = y === "idle" ? d || qo : y === "success" ? Jo : Yo, A = () => {
-    h.current && clearTimeout(h.current), h.current = setTimeout(() => {
-      S(P);
-    }, 1500);
-  }, Z = (O) => {
-    S("success"), A(), c && c(O);
-  }, j = (O) => {
-    S("error"), A(), l && l(O);
-  };
-  return /* @__PURE__ */ t(
-    U,
-    {
-      className: g(B["copy-button"], B[y], u),
-      size: o,
-      isFullWidth: e,
-      text: s,
-      icon: b,
-      isIconOnly: r,
-      color: "secondary",
-      iconPosition: "trailing",
-      ...Go({
-        text: n,
-        getTextFn: a,
-        target: i,
-        onSuccess: Z,
-        onError: j
-      }),
-      ...p
-    }
-  );
-};
-Qo.displayName = "CopyButton";
-export {
-  lr as B,
-  W as C,
-  sr as F,
-  z as I,
-  L as S,
-  I as T,
-  ir as a,
-  cr as b,
-  R as c,
-  U as d,
-  _r as e,
-  gr as f,
-  pr as g,
-  k as h,
-  ur as i,
-  mr as j,
-  dr as k,
-  eo as l,
-  ar as m,
-  Qo as n
-};
-//# sourceMappingURL=index-WkGIywHj.js.map