@hashicorp/mds-react 0.9.3 → 0.9.5

package/components/form/toggle/form-toggle.module.scss.js

@@ -0,0 +1,12 @@
+const o = "toggle__PmDvt", t = "control__GLB77", c = "facade__-n7d2", a = {
+  toggle: o,
+  control: t,
+  facade: c
+};
+export {
+  t as control,
+  a as default,
+  c as facade,
+  o as toggle
+};
+//# sourceMappingURL=form-toggle.module.scss.js.map

package/components/form/toggle/form-toggle.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-toggle.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/components/form/toggle/index.js

@@ -0,0 +1,102 @@
+import { jsx as o, jsxs as F } from "react/jsx-runtime";
+import { useId as p } from "react";
+import { Field as I } from "../field/index.js";
+import { Fieldset as x } from "../fieldset/index.js";
+import g from "./form-toggle.module.scss.js";
+const u = ({
+  id: e,
+  field: r,
+  toggleOnEnter: t,
+  testingKey: l,
+  error: a,
+  ...d
+}) => {
+  const i = p(), c = e ?? i, n = (s) => {
+    s.key === "Enter" && (s.currentTarget.checked = !s.currentTarget.checked);
+  };
+  return /* @__PURE__ */ F("div", { className: g.toggle, children: [
+    /* @__PURE__ */ o(
+      "input",
+      {
+        id: c,
+        className: g.control,
+        type: "checkbox",
+        ...r,
+        ...d,
+        role: "switch",
+        "aria-describedby": `${a ? "error" : "helper-text"}-${e}`,
+        onKeyDown: t ? n : void 0,
+        "data-testid": l
+      }
+    ),
+    /* @__PURE__ */ o("div", { className: g.facade })
+  ] });
+};
+u.displayName = "ToggleBase";
+const T = ({
+  isInvalid: e,
+  isRequired: r,
+  isOptional: t,
+  id: l,
+  label: a,
+  helperText: d,
+  error: i,
+  field: c,
+  className: n,
+  testingKey: s,
+  ...f
+}) => {
+  const h = p(), m = l ?? h;
+  return /* @__PURE__ */ o(
+    I,
+    {
+      label: a,
+      helperText: d,
+      error: i,
+      isRequired: r,
+      isOptional: t,
+      id: m,
+      layout: "flag",
+      className: n,
+      children: /* @__PURE__ */ o(
+        u,
+        {
+          id: m,
+          field: c,
+          testingKey: s,
+          ...f
+        }
+      )
+    }
+  );
+};
+T.displayName = "ToggleField";
+const y = ({
+  layout: e = "vertical",
+  legend: r,
+  isOptional: t,
+  isRequired: l,
+  children: a
+}) => /* @__PURE__ */ o(
+  x,
+  {
+    layout: e,
+    legend: r,
+    isOptional: t,
+    isRequired: l,
+    children: a
+  }
+);
+y.displayName = "ToggleGroupRoot";
+const N = (e) => /* @__PURE__ */ o(T, { ...e, className: e.className });
+N.displayName = "ToggleGroupField";
+const j = {
+  Root: y,
+  Field: N
+};
+export {
+  u as ToggleBase,
+  T as ToggleField,
+  j as ToggleGroup
+};
+//# sourceMappingURL=index.js.map

package/components/form/toggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/toggle/index.tsx"],"sourcesContent":["import { useId } from 'react'\nimport type { ReactNode, HTMLProps, ComponentProps } from 'react'\nimport { Field } from '../field'\nimport { Fieldset } from '../fieldset'\nimport s from './form-toggle.module.scss'\n\ninterface ToggleBaseProps {\n\tid?: string\n\n\t/**\n\t * Can be used to supply any props that the native `<input>` element supports (such as `value`, `placeholder`, in addition to events like `onChange` and `onBlur`)\n\t */\n\tfield: HTMLProps<HTMLInputElement>\n\ttoggleOnEnter?: boolean\n\ttestingKey?: string\n\terror?: ReactNode\n}\n\nconst ToggleBase = ({\n\tid,\n\tfield,\n\ttoggleOnEnter,\n\ttestingKey,\n\terror,\n\t...rest\n}: ToggleBaseProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\n\tconst handleEnterKey = (event: React.KeyboardEvent<HTMLInputElement>) => {\n\t\tif (event.key === 'Enter') {\n\t\t\tevent.currentTarget.checked = !event.currentTarget.checked\n\t\t}\n\t}\n\n\treturn (\n\t\t<div className={s.toggle}>\n\t\t\t<input\n\t\t\t\tid={inputId}\n\t\t\t\tclassName={s.control}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\t{...field}\n\t\t\t\t{...rest}\n\t\t\t\trole=\"switch\"\n\t\t\t\taria-describedby={`${error ? 'error' : 'helper-text'}-${id}`}\n\t\t\t\tonKeyDown={toggleOnEnter ? handleEnterKey : undefined}\n\t\t\t\tdata-testid={testingKey}\n\t\t\t/>\n\t\t\t<div className={s.facade}></div>\n\t\t</div>\n\t)\n}\n\nToggleBase.displayName = 'ToggleBase'\n\ninterface ToggleFieldProps {\n\t/**\n\t * Applies an “invalid” appearance to the control but doesn’t modify its logical validity.\n\t */\n\tisInvalid?: boolean\n\n\t/**\n\t * Appends a `Required` indicator next to the label text and sets the `required` attribute on the control when user input is required.\n\t */\n\tisRequired?: boolean\n\n\t/**\n\t * Appends an `Optional` indicator next to the label text when user input is optional.\n\t */\n\tisOptional?: boolean\n\n\t/**\n\t * Input control’s ID attribute.\n\t *\n\t * By default, the ID is automatically generated by the component. Use this argument to pass a custom ID.\n\t */\n\tid?: string\n\n\t/**\n\t * Container that renders its content inside the `<label>` element. The content can be a simple string or a `ReactNode`, in which case it inherits the text style.\n\t *\n\t * The `for` attribute of the label is automatically generated using the `controlId` value of the control.\n\t */\n\tlabel?: ReactNode\n\n\t/**\n\t * Container that renders its content inside the \"helper text\" block. The content can be a simple string or a `ReactNode`, in which case it inherits the text style.\n\t *\n\t * The `id` attribute of the message is automatically generated using the `controlId` value of the control.\n\t */\n\thelperText?: ReactNode\n\n\t/**\n\t * Container that renders its content inside the \"error\" block. The content can be a simple string or a `ReactNode`, in which case it inherits the text style.\n\t *\n\t * The `id` attribute of the error message is automatically generated using the `controlId` value of the control.\n\t */\n\terror?: ReactNode\n\n\t/**\n\t * Can be used to supply any props that the native `<input>` element supports (such as `value`, `placeholder`, in addition to events like `onChange` and `onBlur`)\n\t */\n\tfield: HTMLProps<HTMLInputElement>\n\tclassName?: string\n\ttestingKey?: string\n}\n\nconst ToggleField = ({\n\tisInvalid,\n\tisRequired,\n\tisOptional,\n\tid,\n\tlabel,\n\thelperText,\n\terror,\n\tfield,\n\tclassName,\n\ttestingKey,\n\t...rest\n}: ToggleFieldProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\treturn (\n\t\t<Field\n\t\t\tlabel={label}\n\t\t\thelperText={helperText}\n\t\t\terror={error}\n\t\t\tisRequired={isRequired}\n\t\t\tisOptional={isOptional}\n\t\t\tid={inputId}\n\t\t\tlayout=\"flag\"\n\t\t\tclassName={className}\n\t\t>\n\t\t\t<ToggleBase\n\t\t\t\tid={inputId}\n\t\t\t\tfield={field}\n\t\t\t\ttestingKey={testingKey}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t</Field>\n\t)\n}\n\nToggleField.displayName = 'ToggleField'\n\ninterface ToggleGroupProps extends ComponentProps<typeof Fieldset> {\n\tchildren: ReactNode\n}\n\nconst ToggleGroupRoot = ({\n\tlayout = 'vertical',\n\tlegend,\n\tisOptional,\n\tisRequired,\n\tchildren,\n}: ToggleGroupProps) => {\n\treturn (\n\t\t<Fieldset\n\t\t\tlayout={layout}\n\t\t\tlegend={legend}\n\t\t\tisOptional={isOptional}\n\t\t\tisRequired={isRequired}\n\t\t>\n\t\t\t{children}\n\t\t</Fieldset>\n\t)\n}\n\nToggleGroupRoot.displayName = 'ToggleGroupRoot'\n\nconst ToggleGroupField = (props: ToggleFieldProps) => {\n\treturn <ToggleField {...props} className={props.className} />\n}\n\nToggleGroupField.displayName = 'ToggleGroupField'\n\nconst ToggleGroup = {\n\tRoot: ToggleGroupRoot,\n\tField: ToggleGroupField,\n}\n\nexport { ToggleBase, ToggleField, ToggleGroup }\n"],"names":["ToggleBase","id","field","toggleOnEnter","testingKey","error","rest","generatedId","useId","inputId","handleEnterKey","event","jsxs","s","jsx","ToggleField","isInvalid","isRequired","isOptional","label","helperText","className","Field","ToggleGroupRoot","layout","legend","children","Fieldset","ToggleGroupField","props","ToggleGroup"],"mappings":";;;;;AAkBA,MAAMA,IAAa,CAAC;AAAA,EACnB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACJ,MAAuB;AACtB,QAAMC,IAAcC,EAAA,GACdC,IAAUR,KAAMM,GAEhBG,IAAiB,CAACC,MAAiD;AACxE,IAAIA,EAAM,QAAQ,YACjBA,EAAM,cAAc,UAAU,CAACA,EAAM,cAAc;AAAA,EAErD;AAEA,SACC,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAE,QACjB,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,IAAIL;AAAA,QACJ,WAAWI,EAAE;AAAA,QACb,MAAK;AAAA,QACJ,GAAGX;AAAA,QACH,GAAGI;AAAA,QACJ,MAAK;AAAA,QACL,oBAAkB,GAAGD,IAAQ,UAAU,aAAa,IAAIJ,CAAE;AAAA,QAC1D,WAAWE,IAAgBO,IAAiB;AAAA,QAC5C,eAAaN;AAAA,MAAA;AAAA,IAAA;AAAA,IAEd,gBAAAU,EAAC,OAAA,EAAI,WAAWD,EAAE,OAAA,CAAQ;AAAA,EAAA,GAC3B;AAEF;AAEAb,EAAW,cAAc;AAsDzB,MAAMe,IAAc,CAAC;AAAA,EACpB,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,IAAAjB;AAAA,EACA,OAAAkB;AAAA,EACA,YAAAC;AAAA,EACA,OAAAf;AAAA,EACA,OAAAH;AAAA,EACA,WAAAmB;AAAA,EACA,YAAAjB;AAAA,EACA,GAAGE;AACJ,MAAwB;AACvB,QAAMC,IAAcC,EAAA,GACdC,IAAUR,KAAMM;AACtB,SACC,gBAAAO;AAAA,IAACQ;AAAA,IAAA;AAAA,MACA,OAAAH;AAAA,MACA,YAAAC;AAAA,MACA,OAAAf;AAAA,MACA,YAAAY;AAAA,MACA,YAAAC;AAAA,MACA,IAAIT;AAAA,MACJ,QAAO;AAAA,MACP,WAAAY;AAAA,MAEA,UAAA,gBAAAP;AAAA,QAACd;AAAA,QAAA;AAAA,UACA,IAAIS;AAAA,UACJ,OAAAP;AAAA,UACA,YAAAE;AAAA,UACC,GAAGE;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;AAEAS,EAAY,cAAc;AAM1B,MAAMQ,IAAkB,CAAC;AAAA,EACxB,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,YAAAP;AAAA,EACA,YAAAD;AAAA,EACA,UAAAS;AACD,MAEE,gBAAAZ;AAAA,EAACa;AAAA,EAAA;AAAA,IACA,QAAAH;AAAA,IACA,QAAAC;AAAA,IACA,YAAAP;AAAA,IACA,YAAAD;AAAA,IAEC,UAAAS;AAAA,EAAA;AAAA;AAKJH,EAAgB,cAAc;AAE9B,MAAMK,IAAmB,CAACC,wBACjBd,GAAA,EAAa,GAAGc,GAAO,WAAWA,EAAM,WAAW;AAG5DD,EAAiB,cAAc;AAE/B,MAAME,IAAc;AAAA,EACnB,MAAMP;AAAA,EACN,OAAOK;AACR;"}

package/components/hds/wrappers/tooltip.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import s from "@tippyjs/react";
+import { followCursor as d } from "tippy.js";
+import "tippy.js/dist/svg-arrow.css";
+const n = {
+  name: "hideOnEsc",
+  defaultValue: !0,
+  fn(e) {
+    function o(t) {
+      t.key === "Escape" && e.hide();
+    }
+    return {
+      onShow() {
+        document.addEventListener("keydown", o);
+      },
+      onHide() {
+        document.removeEventListener("keydown", o);
+      }
+    };
+  }
+}, w = ({ options: e = {}, children: o, text: t }) => {
+  const r = e.followCursor !== void 0 ? [n, d] : [n];
+  return /* @__PURE__ */ i(
+    s,
+    {
+      theme: "hds",
+      arrow: `<svg
+					className="hds-tooltip-pointer"
+					width="16"
+					height="7"
+					viewBox="0 0 16 7"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path d="M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z" />
+				</svg>`,
+      interactive: !0,
+      aria: {
+        content: "describedby"
+      },
+      plugins: r,
+      content: t,
+      ...e,
+      children: o
+    }
+  );
+};
+export {
+  w as Tooltip
+};
+//# sourceMappingURL=tooltip.js.map

package/components/hds/wrappers/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sources":["../../../../src/components/hds/wrappers/tooltip.tsx"],"sourcesContent":["'use client'\n\nimport Tippy, { type TippyProps } from '@tippyjs/react'\nimport { followCursor, type Plugin } from 'tippy.js'\nimport type { ReactElement } from 'react'\nimport 'tippy.js/dist/svg-arrow.css'\n\nexport interface TooltipProps {\n\toptions?: TippyProps\n\tchildren: TippyProps['children']\n\ttext: string | ReactElement\n}\n\nexport interface HideOnEsc extends Plugin {\n\tname: 'hideOnEsc'\n\tdefaultValue: true\n}\n\nconst hideOnEsc = {\n\tname: 'hideOnEsc',\n\tdefaultValue: true,\n\tfn(instance: { hide: () => void }) {\n\t\tfunction onKeyDown(event: KeyboardEvent): void {\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tinstance.hide()\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\tonShow() {\n\t\t\t\tdocument.addEventListener('keydown', onKeyDown)\n\t\t\t},\n\t\t\tonHide() {\n\t\t\t\tdocument.removeEventListener('keydown', onKeyDown)\n\t\t\t},\n\t\t}\n\t},\n}\n\nexport const Tooltip = ({ options = {}, children, text }: TooltipProps) => {\n\tconst plugins =\n\t\toptions.followCursor !== undefined ? [hideOnEsc, followCursor] : [hideOnEsc]\n\n\treturn (\n\t\t<Tippy\n\t\t\ttheme=\"hds\"\n\t\t\tarrow={`<svg\n\t\t\t\t\tclassName=\"hds-tooltip-pointer\"\n\t\t\t\t\twidth=\"16\"\n\t\t\t\t\theight=\"7\"\n\t\t\t\t\tviewBox=\"0 0 16 7\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z\" />\n\t\t\t\t</svg>`}\n\t\t\tinteractive\n\t\t\taria={{\n\t\t\t\tcontent: 'describedby',\n\t\t\t}}\n\t\t\tplugins={plugins}\n\t\t\tcontent={text}\n\t\t\t{...options}\n\t\t>\n\t\t\t{children}\n\t\t</Tippy>\n\t)\n}\n"],"names":["hideOnEsc","instance","onKeyDown","event","options","text","followCursor","jsx","Tippy","plugins","children"],"mappings":";;;;;AAkBkB,MACjBA,IAAM;AAAA,EACN,MAAA;AAAA,EACA,cAAmC;AAAA,EAClC,GAAAC,GAAS;AACR,aAAIC;AACH,MAAAC,EAAA,QAAc,YACfF,EAAA,KAAA;AAAA,IAGD;AAAO;MAEL;AACD,iBAAA,iBAAA,WAAAC,CAAA;AAAA,MACA;AAAA,MACC;AACD,iBAAA,oBAAA,WAAAA,CAAA;AAAA,MACD;AAAA,IACD;AAAA,EACD;AAEO,OACA,CAAA,EACL,SAAAE,qBAAyB,MAAAC,EAAA;AAE1B,cACC,iBAAA,SAAA,CAAAL,GAAAM,CAAA,IAAA,CAAAN,CAAA;AAAA,SAAC,gBAAAO;AAAA,IAAAC;AAAA,IAAA;AAAA,MAEA,OAAO;AAAA,MAAA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUP,aAAM;AAAA,MAAA;QAEN,SAAA;AAAA,MACA;AAAA,MACA,SAAAC;AAAA,MACC,SAAGJ;AAAA,MAEH,GAAAD;AAAA,MAAA,UAAAM;AAAA,IACF;AAAA,EAEF;;"}

package/components/icon-tile/index.js

@@ -0,0 +1,50 @@
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import N from "classnames";
+import { FlightIcon as t } from "../flight-icon/index.js";
+import e from "./style.module.scss.js";
+const f = {
+  small: 12,
+  medium: 16,
+  large: 16
+}, h = ({
+  size: i = "medium",
+  logo: r,
+  icon: m,
+  iconSecondary: s,
+  color: n = "neutral",
+  ...a
+}) => {
+  const c = r ? `${r}-color` : m;
+  if (c) {
+    const l = i === "small" ? 16 : 24, d = r ? "logo" : "icon", p = r || n;
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        className: N(
+          e["icon-tile"],
+          e[`type-${d}`],
+          e[`size-${i}`],
+          e[`color-${p}`]
+        ),
+        "aria-hidden": "true",
+        ...a,
+        children: [
+          /* @__PURE__ */ o("div", { className: r ? e.logo : e.icon, children: /* @__PURE__ */ o(t, { name: c, size: l, stretched: !0 }) }),
+          s && /* @__PURE__ */ o("div", { className: e.extra, children: /* @__PURE__ */ o(
+            t,
+            {
+              name: s,
+              size: f[i],
+              color: "var(--mds-color-foreground-strong)"
+            }
+          ) })
+        ]
+      }
+    );
+  }
+};
+h.displayName = "IconTile";
+export {
+  h as IconTile
+};
+//# sourceMappingURL=index.js.map

package/components/icon-tile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/icon-tile/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { FlightIconSize } from '../flight-icon'\nimport { FlightIcon } from '../flight-icon'\nimport type { HTMLAttributes } from 'react'\nimport s from './style.module.scss'\n\ntype BaseProps = {\n\tsize: 'small' | 'medium' | 'large'\n\ticonSecondary?: string\n\tcolor?:\n\t\t| 'neutral'\n\t\t| 'boundary'\n\t\t| 'consul'\n\t\t| 'nomad'\n\t\t| 'packer'\n\t\t| 'terraform'\n\t\t| 'vagrant'\n\t\t| 'vault'\n\t\t| 'vault-secrets'\n\t\t| 'waypoint'\n} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>\n\ntype WithLogo = {\n\tlogo:\n\t\t| 'hcp'\n\t\t| 'boundary'\n\t\t| 'consul'\n\t\t| 'nomad'\n\t\t| 'packer'\n\t\t| 'terraform'\n\t\t| 'vagrant'\n\t\t| 'vault'\n\t\t| 'vault-secrets'\n\t\t| 'waypoint'\n\ticon?: never\n}\n\ntype WithIcon = {\n\ticon: string\n\tlogo?: never\n}\n\ntype IconTileProps = BaseProps & (WithLogo | WithIcon)\n\nconst EXTRA_ICON_SIZE_MAP = {\n\tsmall: 12,\n\tmedium: 16,\n\tlarge: 16,\n} as const satisfies Record<'small' | 'medium' | 'large', FlightIconSize>\n\nconst IconTile = ({\n\tsize = 'medium',\n\tlogo,\n\ticon,\n\ticonSecondary,\n\tcolor = 'neutral',\n\t...rest\n}: IconTileProps) => {\n\tconst iconName = logo ? `${logo}-color` : icon\n\n\tif (iconName) {\n\t\tconst iconSize = size === 'small' ? 16 : 24\n\t\tconst entity = logo ? 'logo' : 'icon'\n\t\tconst colorUse = logo ? logo : color\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts['icon-tile'],\n\t\t\t\t\ts[`type-${entity}`],\n\t\t\t\t\ts[`size-${size}`],\n\t\t\t\t\ts[`color-${colorUse}`]\n\t\t\t\t)}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<div className={logo ? s.logo : s.icon}>\n\t\t\t\t\t<FlightIcon name={iconName} size={iconSize} stretched />\n\t\t\t\t</div>\n\t\t\t\t{iconSecondary && (\n\t\t\t\t\t<div className={s.extra}>\n\t\t\t\t\t\t<FlightIcon\n\t\t\t\t\t\t\tname={iconSecondary}\n\t\t\t\t\t\t\tsize={EXTRA_ICON_SIZE_MAP[size]}\n\t\t\t\t\t\t\tcolor=\"var(--mds-color-foreground-strong)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t)\n\t}\n}\n\nIconTile.displayName = 'IconTile'\n\nexport type { IconTileProps }\nexport { IconTile }\n"],"names":["EXTRA_ICON_SIZE_MAP","IconTile","size","logo","icon","iconSecondary","color","rest","iconName","iconSize","entity","colorUse","jsxs","classNames","s","jsx","FlightIcon"],"mappings":";;;;AA4CA,MAAMA,IAAsB;AAAA,EAC3B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACR,GAEMC,IAAW,CAAC;AAAA,EACjB,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACJ,MAAqB;AACpB,QAAMC,IAAWL,IAAO,GAAGA,CAAI,WAAWC;AAE1C,MAAII,GAAU;AACb,UAAMC,IAAWP,MAAS,UAAU,KAAK,IACnCQ,IAASP,IAAO,SAAS,QACzBQ,IAAWR,KAAcG;AAE/B,WACC,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAWC;AAAA,UACVC,EAAE,WAAW;AAAA,UACbA,EAAE,QAAQJ,CAAM,EAAE;AAAA,UAClBI,EAAE,QAAQZ,CAAI,EAAE;AAAA,UAChBY,EAAE,SAASH,CAAQ,EAAE;AAAA,QAAA;AAAA,QAEtB,eAAY;AAAA,QACX,GAAGJ;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAQ,EAAC,OAAA,EAAI,WAAWZ,IAAOW,EAAE,OAAOA,EAAE,MACjC,UAAA,gBAAAC,EAACC,GAAA,EAAW,MAAMR,GAAU,MAAMC,GAAU,WAAS,IAAC,GACvD;AAAA,UACCJ,KACA,gBAAAU,EAAC,OAAA,EAAI,WAAWD,EAAE,OACjB,UAAA,gBAAAC;AAAA,YAACC;AAAA,YAAA;AAAA,cACA,MAAMX;AAAA,cACN,MAAML,EAAoBE,CAAI;AAAA,cAC9B,OAAM;AAAA,YAAA;AAAA,UAAA,EACP,CACD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIJ;AACD;AAEAD,EAAS,cAAc;"}

package/components/icon-tile/style.module.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 $hds-icon-tile-sizes: ('small', 'medium', 'large');
 $hds-icon-tile-colors-products: (
 	'boundary',
@@ -78,24 +80,24 @@ $size-props: (
 
 @each $size in $hds-icon-tile-sizes {
 	.size-#{$size} {
-		width: map-get($size-props, $size, 'size');
-		height: map-get($size-props, $size, 'size');
-		border-radius: map-get($size-props, $size, 'border-radius');
+		width: map.get($size-props, $size, 'size');
+		height: map.get($size-props, $size, 'size');
+		border-radius: map.get($size-props, $size, 'border-radius');
 
 		.icon {
-			width: map-get($size-props, $size, 'icon-size');
-			height: map-get($size-props, $size, 'icon-size');
+			width: map.get($size-props, $size, 'icon-size');
+			height: map.get($size-props, $size, 'icon-size');
 		}
 
 		.logo {
-			width: map-get($size-props, $size, 'logo-size');
-			height: map-get($size-props, $size, 'logo-size');
+			width: map.get($size-props, $size, 'logo-size');
+			height: map.get($size-props, $size, 'logo-size');
 		}
 
 		.extra {
-			width: map-get($size-props, $size, 'extra-size');
-			height: map-get($size-props, $size, 'extra-size');
-			border-radius: map-get($size-props, $size, 'extra-border-radius');
+			width: map.get($size-props, $size, 'extra-size');
+			height: map.get($size-props, $size, 'extra-size');
+			border-radius: map.get($size-props, $size, 'extra-border-radius');
 		}
 	}
 }

package/components/icon-tile/style.module.scss.js

@@ -0,0 +1,29 @@
+const o = "icon__aQOfk", r = "logo__3zBXv", l = "extra__5VSha", c = {
+  "icon-tile": "icon-tile__8Lxip",
+  icon: o,
+  logo: r,
+  extra: l,
+  "size-small": "size-small__eKjTy",
+  "size-medium": "size-medium__Cpd2c",
+  "size-large": "size-large__0nIKA",
+  "type-logo": "type-logo__bXQnG",
+  "type-icon": "type-icon__DoyiK",
+  "color-neutral": "color-neutral__s-i4y",
+  "color-boundary": "color-boundary__TWXib",
+  "color-consul": "color-consul__qHXGr",
+  "color-hcp": "color-hcp__T1Cpx",
+  "color-nomad": "color-nomad__OPKVc",
+  "color-packer": "color-packer__VbjYn",
+  "color-terraform": "color-terraform__CzLAd",
+  "color-vagrant": "color-vagrant__GMAgE",
+  "color-vault": "color-vault__yHn5Z",
+  "color-vault-secrets": "color-vault-secrets__GiX0y",
+  "color-waypoint": "color-waypoint__YASrb"
+};
+export {
+  c as default,
+  l as extra,
+  o as icon,
+  r as logo
+};
+//# sourceMappingURL=style.module.scss.js.map

package/components/icon-tile/style.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/components/index.d.ts

@@ -11,7 +11,7 @@ export { Breadcrumbs } from './breadcrumbs';
 export type { ButtonProps, ButtonColor, ButtonIconPosition, ButtonSize, } from './button';
 export { Button, BUTTON_COLORS, BUTTON_ICON_POSITIONS, BUTTON_SIZES, } from './button';
 export type { CardProps, CardThumbnailProps } from './card/types';
-export { Card } from './card';
+export { Card, CardContent } from './card';
 export type { CodeBlockProps } from './code-block';
 export { CodeBlock } from './code-block';
 export { DisclosurePrimitive } from './disclosure-primitive';

package/components/index.js

@@ -1,77 +1,120 @@
-import { A as e, a as o, b as t, c as i, d as r, e as l, f as n, g as d, B as T, _ as S, h as I, l as c, j as A, k as O, C as u, D as B, $ as C, i as g, E as _, F as N, m as L, o as p, n as E, H as F, J as D, I as x, K as b, L as m, p as G, M as R, N as k, q as h, s as P, t as H, r as Z, R as f, S as v, P as K, v as M, Q as U, Y as X, x as j, T as w, w as y, z, y as V, G as W, U as Y, V as q, W as J, X as Q, u as $, O as aa, Z as sa } from "../index-C4GBbW3N.js";
-import { B as oa, a as ta, b as ia, e as ra, f as la, g as na, c as da, d as Ta, C as Sa, F as Ia, h as ca, i as Aa, j as Oa, k as ua, S as Ba, l as Ca, m as ga, T as _a } from "../index-WkGIywHj.js";
+import { Accordion as e } from "./accordion/index.js";
+import { BADGE_COLORS as p, BADGE_SIZES as x, BADGE_TYPES as m, Badge as f } from "./badge/index.js";
+import { BadgeCount as n } from "./badge-count/index.js";
+import { Alert as a, AlertActions as d, AlertButton as T, AlertStandaloneLink as S } from "./alert/index.js";
+import { Breadcrumbs as c } from "./breadcrumbs/index.js";
+import { BUTTON_COLORS as C, BUTTON_ICON_POSITIONS as O, BUTTON_SIZES as u, Button as B } from "./button/index.js";
+import { Card as s, CardContent as _ } from "./card/index.js";
+import { CodeBlock as L } from "./code-block/index.js";
+import { DisclosurePrimitive as F } from "./disclosure-primitive/index.js";
+import { useDisclosurePrimitive as G } from "./disclosure-primitive/use-disclosure-primitive.js";
+import { Dropdown as b } from "./dropdown/index.js";
+import { FLIGHT_ICON_SIZES as h, FlightIcon as P } from "./flight-icon/index.js";
+import { CheckboxBase as Z, CheckboxField as v, CheckboxGroup as K } from "./form/checkbox/index.js";
+import { Error as U } from "./form/error/index.js";
+import { Field as w } from "./form/field/index.js";
+import { Fieldset as z } from "./form/fieldset/index.js";
+import { FileInputBase as W, FileInputField as Y } from "./form/file-input/index.js";
+import { HelperText as q } from "./form/helper-text/index.js";
+import { Indicator as Q } from "./form/indicator/index.js";
+import { Label as oo } from "./form/label/index.js";
+import { Legend as eo } from "./form/legend/index.js";
+import { RadioBase as po, RadioField as xo, RadioGroup as mo } from "./form/radio/index.js";
+import { RadioCard as io } from "./form/radio-card/index.js";
+import { SelectField as lo } from "./form/select/index.js";
+import { SuperSelectField as To } from "./form/super-select/index.js";
+import { TextInput as Io, TextInputBase as co } from "./form/text-input/index.js";
+import { TextAreaField as Co } from "./form/textarea/index.js";
+import { ToggleBase as uo, ToggleField as Bo, ToggleGroup as go } from "./form/toggle/index.js";
+import { IconTile as _o } from "./icon-tile/index.js";
+import { InlineLink as Lo } from "./inline-link/index.js";
+import { MDSButton as Fo } from "./legacy-button/index.js";
+import { ModalProvider as Go } from "./modal/index.js";
+import { Separator as bo } from "./separator/index.js";
+import { STANDALONE_LINK_COLORS as ho, STANDALONE_LINK_ICON_POSITIONS as Po, STANDALONE_LINK_SIZES as Ho, StandaloneLink as Zo } from "./standalone-link/index.js";
+import { Table as Ko } from "./table/index.js";
+import { getDensity as Uo, getHorizontalAlignment as Xo, getScope as wo, getVerticalAlignment as yo } from "./table/utils.js";
+import { Tabs as Vo } from "./tabs/index.js";
+import { useTabsContext as Yo } from "./tabs/use-tabs-context.js";
+import { TEXT_COLORS as qo, TEXT_WEIGHTS as Jo, Text as Qo } from "./text/index.js";
+import { BarChart as or } from "./visualizations/bar-chart/index.js";
+import { DonutChart as er } from "./visualizations/donut-chart/index.js";
+import { AccordionContent as pr, AccordionItem as xr, AccordionToggle as mr } from "./accordion/item/index.js";
+import { RadioCardGroup as ir } from "./form/radio-card/group.js";
+import { useModal as lr } from "./modal/use-modal.js";
 export {
   e as Accordion,
-  o as AccordionContent,
-  t as AccordionItem,
-  i as AccordionToggle,
-  r as Alert,
-  l as AlertActions,
-  n as AlertButton,
-  d as AlertStandaloneLink,
-  oa as BADGE_COLORS,
-  ta as BADGE_SIZES,
-  ia as BADGE_TYPES,
-  ra as BUTTON_COLORS,
-  la as BUTTON_ICON_POSITIONS,
-  na as BUTTON_SIZES,
-  da as Badge,
-  T as BadgeCount,
-  S as BarChart,
-  I as Breadcrumbs,
-  Ta as Button,
-  Sa as Card,
-  c as CheckboxBase,
-  A as CheckboxField,
-  O as CheckboxGroup,
-  u as CodeBlock,
-  B as DisclosurePrimitive,
-  C as DonutChart,
-  g as Dropdown,
-  _ as Error,
-  Ia as FLIGHT_ICON_SIZES,
-  N as Field,
-  L as Fieldset,
-  p as FileInputBase,
-  E as FileInputField,
-  ca as FlightIcon,
-  F as HelperText,
-  D as IconTile,
-  x as Indicator,
-  b as InlineLink,
-  m as Label,
-  G as Legend,
-  R as MDSButton,
-  k as ModalProvider,
-  h as RadioBase,
-  P as RadioCard,
-  H as RadioCardGroup,
-  Z as RadioField,
-  f as RadioGroup,
-  Aa as STANDALONE_LINK_COLORS,
-  Oa as STANDALONE_LINK_ICON_POSITIONS,
-  ua as STANDALONE_LINK_SIZES,
-  v as SelectField,
-  K as Separator,
-  Ba as StandaloneLink,
-  M as SuperSelectField,
-  Ca as TEXT_COLORS,
-  ga as TEXT_WEIGHTS,
-  U as Table,
-  X as Tabs,
-  _a as Text,
-  j as TextAreaField,
-  w as TextInput,
-  y as TextInputBase,
-  z as ToggleBase,
-  V as ToggleField,
-  W as ToggleGroup,
-  Y as getDensity,
-  q as getHorizontalAlignment,
-  J as getScope,
-  Q as getVerticalAlignment,
-  $ as useDisclosurePrimitive,
-  aa as useModal,
-  sa as useTabsContext
+  pr as AccordionContent,
+  xr as AccordionItem,
+  mr as AccordionToggle,
+  a as Alert,
+  d as AlertActions,
+  T as AlertButton,
+  S as AlertStandaloneLink,
+  p as BADGE_COLORS,
+  x as BADGE_SIZES,
+  m as BADGE_TYPES,
+  C as BUTTON_COLORS,
+  O as BUTTON_ICON_POSITIONS,
+  u as BUTTON_SIZES,
+  f as Badge,
+  n as BadgeCount,
+  or as BarChart,
+  c as Breadcrumbs,
+  B as Button,
+  s as Card,
+  _ as CardContent,
+  Z as CheckboxBase,
+  v as CheckboxField,
+  K as CheckboxGroup,
+  L as CodeBlock,
+  F as DisclosurePrimitive,
+  er as DonutChart,
+  b as Dropdown,
+  U as Error,
+  h as FLIGHT_ICON_SIZES,
+  w as Field,
+  z as Fieldset,
+  W as FileInputBase,
+  Y as FileInputField,
+  P as FlightIcon,
+  q as HelperText,
+  _o as IconTile,
+  Q as Indicator,
+  Lo as InlineLink,
+  oo as Label,
+  eo as Legend,
+  Fo as MDSButton,
+  Go as ModalProvider,
+  po as RadioBase,
+  io as RadioCard,
+  ir as RadioCardGroup,
+  xo as RadioField,
+  mo as RadioGroup,
+  ho as STANDALONE_LINK_COLORS,
+  Po as STANDALONE_LINK_ICON_POSITIONS,
+  Ho as STANDALONE_LINK_SIZES,
+  lo as SelectField,
+  bo as Separator,
+  Zo as StandaloneLink,
+  To as SuperSelectField,
+  qo as TEXT_COLORS,
+  Jo as TEXT_WEIGHTS,
+  Ko as Table,
+  Vo as Tabs,
+  Qo as Text,
+  Co as TextAreaField,
+  Io as TextInput,
+  co as TextInputBase,
+  uo as ToggleBase,
+  Bo as ToggleField,
+  go as ToggleGroup,
+  Uo as getDensity,
+  Xo as getHorizontalAlignment,
+  wo as getScope,
+  yo as getVerticalAlignment,
+  G as useDisclosurePrimitive,
+  lr as useModal,
+  Yo as useTabsContext
 };
 //# sourceMappingURL=index.js.map

package/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/inline-link/index.js

@@ -0,0 +1,34 @@
+import { jsxs as c, jsx as p } from "react/jsx-runtime";
+import I from "classnames";
+import { Interactive as d } from "../interactive/index.js";
+import i from "./inline-link.module.css.js";
+import { FlightIcon as f } from "../flight-icon/index.js";
+const g = ({
+  text: o,
+  color: s = "primary",
+  icon: r,
+  iconPosition: e = "trailing",
+  className: t,
+  isHrefExternal: l,
+  ...a
+}) => {
+  const m = r || !l ? r : "external-link", n = m && /* @__PURE__ */ p(f, { name: m, size: 16, className: i.icon });
+  return /* @__PURE__ */ c(
+    d,
+    {
+      className: I(i["link-inline"], i[`color-${s}`], t),
+      isHrefExternal: l,
+      ...a,
+      children: [
+        n && e === "leading" && n,
+        o,
+        n && e === "trailing" && n
+      ]
+    }
+  );
+};
+g.displayName = "InlineLink";
+export {
+  g as InlineLink
+};
+//# sourceMappingURL=index.js.map

package/components/inline-link/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/inline-link/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { Interactive } from '../interactive'\nimport s from './inline-link.module.css'\nimport type { FlightIconName } from '../flight-icon'\nimport { FlightIcon } from '../flight-icon'\n\ninterface InlineLinkProps {\n\t/**\n\t * There are two available colors for an `<InlineLink />`: primary and secondary.\n\t */\n\tcolor?: 'primary' | 'secondary'\n\t/**\n\t * Use this parameter to show an icon.\n\t */\n\ticon?: FlightIconName\n\t/**\n\t * Positions the icon before or after the text.\n\t */\n\ticonPosition?: 'leading' | 'trailing'\n\t/**\n\t * URL parameter that’s passed down to the `<a>` element.\n\t */\n\thref: string\n\t/**\n\t * Controls if the <a> link is external. For security reasons, we add the target=\"_blank\" and rel=\"noopener noreferrer\" attributes to it by default.\n\t * default: `false`\n\t */\n\tisHrefExternal?: boolean\n\t/**\n\t * The content of the <a> HTML element.\n\t */\n\ttext: string\n\t/**\n\t * Optional class name to add to the component.\n\t */\n\tclassName?: string\n\tprefetch?: boolean\n\tlocale?: string\n}\n\nconst InlineLink = ({\n\ttext,\n\tcolor = 'primary',\n\ticon,\n\ticonPosition = 'trailing',\n\tclassName,\n\tisHrefExternal,\n\t...props\n}: InlineLinkProps) => {\n\tconst resolvedIcon = icon || !isHrefExternal ? icon : 'external-link'\n\tconst iconElement = resolvedIcon && (\n\t\t<FlightIcon name={resolvedIcon} size={16} className={s.icon} />\n\t)\n\n\treturn (\n\t\t<Interactive\n\t\t\tclassName={classNames(s['link-inline'], s[`color-${color}`], className)}\n\t\t\tisHrefExternal={isHrefExternal}\n\t\t\t{...props}\n\t\t>\n\t\t\t{iconElement && iconPosition === 'leading' && iconElement}\n\t\t\t{text}\n\t\t\t{iconElement && iconPosition === 'trailing' && iconElement}\n\t\t</Interactive>\n\t)\n}\n\nInlineLink.displayName = 'InlineLink'\n\nexport type { InlineLinkProps }\nexport { InlineLink }\n"],"names":["InlineLink","text","color","icon","iconPosition","className","isHrefExternal","props","resolvedIcon","iconElement","jsx","FlightIcon","s","jsxs","Interactive","classNames"],"mappings":";;;;;AAwCA,MAAMA,IAAa,CAAC;AAAA,EACnB,MAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,GAAGC;AACJ,MAAuB;AACtB,QAAMC,IAAeL,KAAQ,CAACG,IAAiBH,IAAO,iBAChDM,IAAcD,KACnB,gBAAAE,EAACC,GAAA,EAAW,MAAMH,GAAc,MAAM,IAAI,WAAWI,EAAE,KAAA,CAAM;AAG9D,SACC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,WAAWC,EAAWH,EAAE,aAAa,GAAGA,EAAE,SAASV,CAAK,EAAE,GAAGG,CAAS;AAAA,MACtE,gBAAAC;AAAA,MACC,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAE,KAAeL,MAAiB,aAAaK;AAAA,QAC7CR;AAAA,QACAQ,KAAeL,MAAiB,cAAcK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlD;AAEAT,EAAW,cAAc;"}

package/components/inline-link/inline-link.module.css.js

@@ -0,0 +1,11 @@
+const o = "icon__CPQmv", n = {
+  "link-inline": "link-inline__Wl8cA",
+  "color-primary": "color-primary__XlogH",
+  "color-secondary": "color-secondary__sf-Wg",
+  icon: o
+};
+export {
+  n as default,
+  o as icon
+};
+//# sourceMappingURL=inline-link.module.css.js.map

package/components/inline-link/inline-link.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-link.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}