@hashicorp/mds-react 0.9.0

package/dist/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/dist/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/dist/components/hds/wrappers/tooltip.d.ts

@@ -0,0 +1,13 @@
+import { TippyProps } from '@tippyjs/react';
+import { Plugin } from 'tippy.js';
+import { ReactElement } from 'react';
+export interface TooltipProps {
+    options?: TippyProps;
+    children: TippyProps['children'];
+    text: string | ReactElement;
+}
+export interface HideOnEsc extends Plugin {
+    name: 'hideOnEsc';
+    defaultValue: true;
+}
+export declare const Tooltip: ({ options, children, text }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/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/dist/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/dist/components/icon-tile/index.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'react';
+type BaseProps = {
+    size: 'small' | 'medium' | 'large';
+    iconSecondary?: string;
+    color?: 'neutral' | 'boundary' | 'consul' | 'nomad' | 'packer' | 'terraform' | 'vagrant' | 'vault' | 'vault-secrets' | 'waypoint';
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
+type WithLogo = {
+    logo: 'hcp' | 'boundary' | 'consul' | 'nomad' | 'packer' | 'terraform' | 'vagrant' | 'vault' | 'vault-secrets' | 'waypoint';
+    icon?: never;
+};
+type WithIcon = {
+    icon: string;
+    logo?: never;
+};
+type IconTileProps = BaseProps & (WithLogo | WithIcon);
+declare const IconTile: {
+    ({ size, logo, icon, iconSecondary, color, ...rest }: IconTileProps): import("react/jsx-runtime").JSX.Element | undefined;
+    displayName: string;
+};
+export type { IconTileProps };
+export { IconTile };

package/dist/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/dist/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/dist/components/icon-tile/style.module.scss

@@ -0,0 +1,136 @@
+$hds-icon-tile-sizes: ('small', 'medium', 'large');
+$hds-icon-tile-colors-products: (
+	'boundary',
+	'consul',
+	'hcp',
+	'nomad',
+	'packer',
+	'terraform',
+	'vagrant',
+	'vault',
+	'vault-secrets',
+	'waypoint'
+);
+$size-props: (
+	'small': (
+		'size': 1.75rem,
+		// 28px
+		'border-radius': 5px,
+		'icon-size': 1rem,
+		// 16px
+		'logo-size': 1.125rem,
+		// 18px
+		'extra-size': 1.125rem,
+		// 18px
+		'extra-border-radius': 4px,
+	),
+	'medium': (
+		'size': 2.5rem,
+		// 40px
+		'border-radius': 6px,
+		'icon-size': 1.5rem,
+		// 24px
+		'logo-size': 1.75rem,
+		// 28px
+		'extra-size': 1.5rem,
+		// 24px
+		'extra-border-radius': 5px,
+	),
+	'large': (
+		'size': 3rem,
+		// 48px
+		'border-radius': 6px,
+		'icon-size': 1.5rem,
+		// 24px
+		'logo-size': 2rem,
+		// 32px
+		'extra-size': 1.5rem,
+		// 24px
+		'extra-border-radius': 5px,
+	),
+);
+
+.icon-tile {
+	position: relative;
+	display: flex;
+	border: 1px solid transparent;
+	border-radius: 4px;
+	box-shadow: var(--mds-elevation-low-box-shadow);
+}
+
+.icon,
+.logo {
+	display: flex;
+	margin: auto;
+}
+
+.extra {
+	position: absolute;
+	right: -6px;
+	bottom: -6px;
+	display: grid;
+	place-content: center;
+	box-sizing: content-box; // the border is outside
+	background-color: var(--mds-color-surface-primary);
+	border: 1px solid var(--mds-color-border-primary);
+	box-shadow: var(--mds-elevation-low-box-shadow);
+}
+
+@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');
+
+		.icon {
+			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');
+		}
+
+		.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');
+		}
+	}
+}
+
+.type-logo {
+	// notice: we are using colored icons so we don't need to set the "color" property here
+	background-color: var(--mds-color-surface-primary);
+	border-color: var(--mds-color-border-primary);
+}
+
+.type-icon {
+	&.color-neutral {
+		color: var(--mds-color-foreground-faint);
+		background-color: var(--mds-color-surface-faint);
+		border-color: var(--mds-color-border-primary);
+	}
+
+	@each $product in $hds-icon-tile-colors-products {
+		@if ($product == 'hcp') {
+			// exception for HCP (we use neutral colors, we don't have specific product colors for foreground/background)
+			&.color-hcp {
+				color: var(--mds-color-hcp-brand);
+				background-color: var(--mds-color-surface-faint);
+				border-color: var(--mds-color-border-primary);
+			}
+		} @else {
+			&.color-#{$product} {
+				color: var(--mds-color-#{$product}-foreground);
+				background: linear-gradient(
+					135deg,
+					var(--mds-color-#{$product}-gradient-faint-start) 0%,
+					var(--mds-color-#{$product}-gradient-faint-stop) 100%
+				);
+				border-color: var(--mds-color-#{$product}-border);
+			}
+		}
+	}
+}

package/dist/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/dist/components/icon-tile/style.module.scss.js.map

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

package/dist/components/index.d.ts

@@ -0,0 +1,60 @@
+export type { AccordionProps } from './accordion';
+export { Accordion, AccordionContent, AccordionItem, AccordionToggle, } from './accordion';
+export type { BadgeColor, BadgeProps, BadgeSize, BadgeType } from './badge';
+export { BADGE_COLORS, BADGE_SIZES, BADGE_TYPES, Badge } from './badge';
+export type { BadgeCountProps } from './badge-count';
+export { BadgeCount } from './badge-count';
+export type { AlertProps, AlertColor } from './alert';
+export { Alert, AlertActions, AlertButton, AlertStandaloneLink } from './alert';
+export type { BreadcrumbItemProps, BreadcrumbProps, BreadcrumbTruncationProps, } from './breadcrumbs/types';
+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 type { CodeBlockProps } from './code-block';
+export { CodeBlock } from './code-block';
+export { DisclosurePrimitive } from './disclosure-primitive';
+export { useDisclosurePrimitive } from './disclosure-primitive/use-disclosure-primitive';
+export type { DropdownContentProps, DropdownHeaderFooterProps, DropdownProps, DropdownToggleButtonProps, } from './dropdown';
+export { Dropdown } from './dropdown';
+export type { FlightIconName, FlightIconProps, FlightIconSize, } from './flight-icon';
+export { FLIGHT_ICON_SIZES, FlightIcon } from './flight-icon';
+export { CheckboxField, CheckboxGroup, CheckboxBase } from './form/checkbox';
+export { Error } from './form/error';
+export { Field } from './form/field';
+export { Fieldset } from './form/fieldset';
+export { FileInputField, FileInputBase } from './form/file-input';
+export { HelperText } from './form/helper-text';
+export { Indicator } from './form/indicator';
+export { Label } from './form/label';
+export { Legend } from './form/legend';
+export { RadioGroup, RadioBase, RadioField } from './form/radio';
+export { RadioCard, RadioCardGroup } from './form/radio-card';
+export { SelectField } from './form/select';
+export type { SuperSelectSearchInputProps, TSuperSelectOption, SuperSelectOptionProps, } from './form/super-select';
+export { SuperSelectField } from './form/super-select';
+export { TextInput, TextInputBase } from './form/text-input';
+export { TextAreaField } from './form/textarea';
+export { ToggleField, ToggleBase, ToggleGroup } from './form/toggle';
+export type { IconTileProps } from './icon-tile';
+export { IconTile } from './icon-tile';
+export type { InlineLinkProps } from './inline-link';
+export { InlineLink } from './inline-link';
+export { MDSButton } from './legacy-button';
+export { ModalProvider, useModal } from './modal';
+export type { SeparatorProps } from './separator';
+export { Separator } from './separator';
+export type { StandaloneLinkColor, StandaloneLinkIconPosition, StandaloneLinkProps, StandaloneLinkSize, } from './standalone-link';
+export { StandaloneLink, STANDALONE_LINK_COLORS, STANDALONE_LINK_ICON_POSITIONS, STANDALONE_LINK_SIZES, } from './standalone-link';
+export type { TableProps } from './table';
+export { Table } from './table';
+export { getDensity, getHorizontalAlignment, getScope, getVerticalAlignment, } from './table/utils';
+export type { TabsListProps, TabsProps } from './tabs';
+export { Tabs } from './tabs';
+export { useTabsContext } from './tabs/use-tabs-context';
+export { Text, TEXT_COLORS, TEXT_WEIGHTS } from './text';
+export type { BarChartProps } from './visualizations/bar-chart';
+export { BarChart } from './visualizations/bar-chart';
+export type { DonutChartData } from './visualizations/donut-chart/types';
+export { DonutChart } from './visualizations/donut-chart';

package/dist/components/index.js

@@ -0,0 +1,119 @@
+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 l } 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 O, BUTTON_ICON_POSITIONS as u, BUTTON_SIZES as B, Button as C } from "./button/index.js";
+import { Card as s } from "./card/index.js";
+import { CodeBlock as N } from "./code-block/index.js";
+import { DisclosurePrimitive as E } from "./disclosure-primitive/index.js";
+import { useDisclosurePrimitive as D } from "./disclosure-primitive/use-disclosure-primitive.js";
+import { Dropdown as R } from "./dropdown/index.js";
+import { FLIGHT_ICON_SIZES as k, FlightIcon as h } from "./flight-icon/index.js";
+import { CheckboxBase as H, CheckboxField as Z, CheckboxGroup as v } from "./form/checkbox/index.js";
+import { Error as M } from "./form/error/index.js";
+import { Field as X } from "./form/field/index.js";
+import { Fieldset as y } from "./form/fieldset/index.js";
+import { FileInputBase as V, FileInputField as W } from "./form/file-input/index.js";
+import { HelperText as j } from "./form/helper-text/index.js";
+import { Indicator as J } from "./form/indicator/index.js";
+import { Label as $ } from "./form/label/index.js";
+import { Legend as ro } from "./form/legend/index.js";
+import { RadioBase as to, RadioField as po, RadioGroup as xo } from "./form/radio/index.js";
+import { RadioCard as fo } from "./form/radio-card/index.js";
+import { SelectField as lo } from "./form/select/index.js";
+import { SuperSelectField as ao } from "./form/super-select/index.js";
+import { TextInput as So, TextInputBase as Io } from "./form/text-input/index.js";
+import { TextAreaField as Ao } from "./form/textarea/index.js";
+import { ToggleBase as uo, ToggleField as Bo, ToggleGroup as Co } from "./form/toggle/index.js";
+import { IconTile as so } from "./icon-tile/index.js";
+import { InlineLink as No } from "./inline-link/index.js";
+import { MDSButton as Eo } from "./legacy-button/index.js";
+import { ModalProvider as Do } from "./modal/index.js";
+import { Separator as Ro } from "./separator/index.js";
+import { STANDALONE_LINK_COLORS as ko, STANDALONE_LINK_ICON_POSITIONS as ho, STANDALONE_LINK_SIZES as Po, StandaloneLink as Ho } from "./standalone-link/index.js";
+import { Table as vo } from "./table/index.js";
+import { getDensity as Mo, getHorizontalAlignment as Uo, getScope as Xo, getVerticalAlignment as wo } from "./table/utils.js";
+import { Tabs as zo } from "./tabs/index.js";
+import { useTabsContext as Wo } from "./tabs/use-tabs-context.js";
+import { TEXT_COLORS as jo, TEXT_WEIGHTS as qo, Text as Jo } from "./text/index.js";
+import { BarChart as $o } from "./visualizations/bar-chart/index.js";
+import { DonutChart as rr } from "./visualizations/donut-chart/index.js";
+import { AccordionContent as tr, AccordionItem as pr, AccordionToggle as xr } from "./accordion/item/index.js";
+import { RadioCardGroup as fr } from "./form/radio-card/group.js";
+import { useModal as lr } from "./modal/use-modal.js";
+export {
+  e as Accordion,
+  tr as AccordionContent,
+  pr as AccordionItem,
+  xr 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,
+  O as BUTTON_COLORS,
+  u as BUTTON_ICON_POSITIONS,
+  B as BUTTON_SIZES,
+  f as Badge,
+  l as BadgeCount,
+  $o as BarChart,
+  c as Breadcrumbs,
+  C as Button,
+  s as Card,
+  H as CheckboxBase,
+  Z as CheckboxField,
+  v as CheckboxGroup,
+  N as CodeBlock,
+  E as DisclosurePrimitive,
+  rr as DonutChart,
+  R as Dropdown,
+  M as Error,
+  k as FLIGHT_ICON_SIZES,
+  X as Field,
+  y as Fieldset,
+  V as FileInputBase,
+  W as FileInputField,
+  h as FlightIcon,
+  j as HelperText,
+  so as IconTile,
+  J as Indicator,
+  No as InlineLink,
+  $ as Label,
+  ro as Legend,
+  Eo as MDSButton,
+  Do as ModalProvider,
+  to as RadioBase,
+  fo as RadioCard,
+  fr as RadioCardGroup,
+  po as RadioField,
+  xo as RadioGroup,
+  ko as STANDALONE_LINK_COLORS,
+  ho as STANDALONE_LINK_ICON_POSITIONS,
+  Po as STANDALONE_LINK_SIZES,
+  lo as SelectField,
+  Ro as Separator,
+  Ho as StandaloneLink,
+  ao as SuperSelectField,
+  jo as TEXT_COLORS,
+  qo as TEXT_WEIGHTS,
+  vo as Table,
+  zo as Tabs,
+  Jo as Text,
+  Ao as TextAreaField,
+  So as TextInput,
+  Io as TextInputBase,
+  uo as ToggleBase,
+  Bo as ToggleField,
+  Co as ToggleGroup,
+  Mo as getDensity,
+  Uo as getHorizontalAlignment,
+  Xo as getScope,
+  wo as getVerticalAlignment,
+  D as useDisclosurePrimitive,
+  lr as useModal,
+  Wo as useTabsContext
+};
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

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

package/dist/components/inline-link/index.d.ts

@@ -0,0 +1,40 @@
+import { FlightIconName } from '../flight-icon';
+interface InlineLinkProps {
+    /**
+     * There are two available colors for an `<InlineLink />`: primary and secondary.
+     */
+    color?: 'primary' | 'secondary';
+    /**
+     * Use this parameter to show an icon.
+     */
+    icon?: FlightIconName;
+    /**
+     * Positions the icon before or after the text.
+     */
+    iconPosition?: 'leading' | 'trailing';
+    /**
+     * URL parameter that’s passed down to the `<a>` element.
+     */
+    href: string;
+    /**
+     * Controls if the <a> link is external. For security reasons, we add the target="_blank" and rel="noopener noreferrer" attributes to it by default.
+     * default: `false`
+     */
+    isHrefExternal?: boolean;
+    /**
+     * The content of the <a> HTML element.
+     */
+    text: string;
+    /**
+     * Optional class name to add to the component.
+     */
+    className?: string;
+    prefetch?: boolean;
+    locale?: string;
+}
+declare const InlineLink: {
+    ({ text, color, icon, iconPosition, className, isHrefExternal, ...props }: InlineLinkProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { InlineLinkProps };
+export { InlineLink };