@hashicorp/mds-react 0.9.0

package/dist/components/breadcrumbs/style.module.scss.js

@@ -0,0 +1,27 @@
+const t = "breadcrumbs__qRWRC", n = "list__ex8fu", c = "sublist__sSjxU", s = "item__vAjEk", i = "truncation__Kmsae", o = "link__T7iXX", _ = "text__g0Z5V", r = "current__RtvDC", e = "icon__QZYpF", u = {
+  breadcrumbs: t,
+  list: n,
+  "items-can-wrap": "items-can-wrap__vfE8u",
+  sublist: c,
+  item: s,
+  truncation: i,
+  link: o,
+  text: _,
+  current: r,
+  icon: e,
+  "truncation-button": "truncation-button__3eNF8",
+  "truncation-content": "truncation-content__P-Vh1"
+};
+export {
+  t as breadcrumbs,
+  r as current,
+  u as default,
+  e as icon,
+  s as item,
+  o as link,
+  n as list,
+  c as sublist,
+  _ as text,
+  i as truncation
+};
+//# sourceMappingURL=style.module.scss.js.map

package/dist/components/breadcrumbs/style.module.scss.js.map

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

package/dist/components/breadcrumbs/truncation-button/index.d.ts

@@ -0,0 +1,3 @@
+export declare const TruncationButton: ({ ariaLabel, }: {
+    ariaLabel?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/breadcrumbs/truncation-button/index.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { IconMoreHorizontal16 as e } from "@hashicorp/flight-icons/svg-react/more-horizontal-16";
+import { useMenuPrimitive as i } from "../../menu-primitive/use-menu-primitive.js";
+import a from "../style.module.scss.js";
+const l = ({
+  ariaLabel: t = "show more"
+}) => {
+  const { isOpen: n, onClickToggle: r } = i();
+  return /* @__PURE__ */ o(
+    "button",
+    {
+      type: "button",
+      className: a["truncation-button"],
+      "aria-label": t,
+      "aria-expanded": n,
+      onClick: r,
+      children: /* @__PURE__ */ o(e, {})
+    }
+  );
+};
+export {
+  l as TruncationButton
+};
+//# sourceMappingURL=index.js.map

package/dist/components/breadcrumbs/truncation-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/breadcrumbs/truncation-button/index.tsx"],"sourcesContent":["'use client'\n\nimport { IconMoreHorizontal16 } from '@hashicorp/flight-icons/svg-react/more-horizontal-16'\nimport { useMenuPrimitive } from '../../menu-primitive/use-menu-primitive'\nimport s from '../style.module.scss'\n\nexport const TruncationButton = ({\n\tariaLabel = 'show more',\n}: {\n\tariaLabel?: string\n}) => {\n\tconst { isOpen, onClickToggle } = useMenuPrimitive()\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName={s['truncation-button']}\n\t\t\taria-label={ariaLabel}\n\t\t\taria-expanded={isOpen}\n\t\t\tonClick={onClickToggle}\n\t\t>\n\t\t\t<IconMoreHorizontal16 />\n\t\t</button>\n\t)\n}\n"],"names":["ariaLabel","useMenuPrimitive","jsx","s","isOpen","IconMoreHorizontal16"],"mappings":";;;;;AAMiC,UACpB,CAAA;AAAA,EACb,WAAAA,IAEM;AACL,MAAA;AAEA,sCACC,IAAAC,EAAA;AAAA,SAAC,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA,MAAA;AAAA,MACA,WAAAC,qBAAY;AAAA,MACZ,cAAAH;AAAA,MACA,iBAASI;AAAA,MAET;MAAsB,UAAA,gBAAAF,EAAAG,GAAA,CAAA,CAAA;AAAA,IACvB;AAAA,EAEF;;"}

package/dist/components/breadcrumbs/types/index.d.ts

@@ -0,0 +1,51 @@
+import { HTMLAttributes, LiHTMLAttributes, ReactNode } from 'react';
+export interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * This controls if the Breadcrumb Items can wrap if they don’t fit within the container.
+     * @default true
+     */
+    itemsCanWrap?: boolean;
+    /**
+     * Accepts a localized string.
+     * @default 'breadcrumbs'
+     */
+    ariaLabel?: string;
+    /**
+     * Array of Breadcrumb.Item and/or Breadcrumb.Truncation components.
+     */
+    children: ReactNode;
+}
+export interface BreadcrumbItemProps extends LiHTMLAttributes<HTMLLIElement> {
+    /**
+     * The URL to link to.
+     */
+    url: string;
+    /**
+     * The text displayed within the item.
+     */
+    text: string;
+    /**
+     * Use to show an flight icon.
+     */
+    icon?: ReactNode;
+    /**
+     * Determines if an item is the last item in the Breadcrumb, in which case it doesn’t generate a link.
+     * @default false
+     */
+    current?: boolean;
+    /**
+     * A parameter that can be applied to an "item" to limit its max-width
+     */
+    maxWidth?: `${number}px` | `${number}em`;
+}
+export interface BreadcrumbTruncationProps extends HTMLAttributes<HTMLLIElement> {
+    /**
+     * Set on the truncation toggle button. Accepts a localized string.
+     * @default 'show more'
+     */
+    ariaLabel?: string;
+    /**
+     * Array of Breadcrumb.Item components.
+     */
+    children: ReactNode;
+}

package/dist/components/button/index.d.ts

@@ -0,0 +1,31 @@
+import { ForwardRefExoticComponent } from 'react';
+export declare const BUTTON_SIZES: readonly ["small", "medium", "large"];
+export type ButtonSize = (typeof BUTTON_SIZES)[number];
+export declare const BUTTON_ICON_POSITIONS: readonly ["leading", "trailing"];
+export type ButtonIconPosition = (typeof BUTTON_ICON_POSITIONS)[number];
+export declare const BUTTON_COLORS: readonly ["primary", "primary-black", "primary-white", "secondary", "secondary-high-contrast", "secondary-white", "secondary-black", "tertiary", "critical", "boundary", "consul", "nomad", "packer", "terraform", "vagrant", "vault", "waypoint", "hashicorp"];
+export type ButtonColor = (typeof BUTTON_COLORS)[number];
+declare const LEGACY_COLORS: readonly ["primary", "secondary", "tertiary", "critical", "custom"];
+type LegacyButtonColor = (typeof LEGACY_COLORS)[number];
+interface ButtonPrimitiveProps {
+    size?: ButtonSize;
+    color?: LegacyButtonColor;
+    isFullWidth?: boolean;
+    isIconOnly?: boolean;
+    icon?: string;
+    iconPosition?: ButtonIconPosition;
+    text?: string;
+    href?: string;
+    isHrefExternal?: boolean;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    className?: string;
+    locale?: string;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+}
+export interface ButtonProps extends Omit<ButtonPrimitiveProps, 'color'> {
+    color?: ButtonColor;
+}
+export declare const Button: ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export {};

package/dist/components/button/index.js

@@ -0,0 +1,119 @@
+import { jsx as c, jsxs as I, Fragment as v } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import y from "classnames";
+import { Interactive as w } from "../interactive/index.js";
+import { FlightIcon as b } from "../flight-icon/index.js";
+import a from "./styles.module.scss.js";
+const U = ["small", "medium", "large"], $ = ["leading", "trailing"], j = [
+  "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
+], B = {
+  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"
+}, C = {
+  small: 12,
+  medium: 16,
+  large: 24
+}, p = u(
+  ({
+    size: o = "medium",
+    color: t = "primary",
+    isFullWidth: m,
+    isIconOnly: i,
+    icon: r,
+    iconPosition: e = "leading",
+    text: s,
+    href: h,
+    isHrefExternal: g,
+    className: f,
+    locale: N,
+    ...d
+  }, O) => {
+    const n = i && !!r, l = r && /* @__PURE__ */ c(b, { name: r, size: C[o] });
+    return /* @__PURE__ */ c(
+      w,
+      {
+        className: y(
+          a.button,
+          a[`size-${o}`],
+          {
+            [a["width-full"]]: m,
+            [a["icon-only"]]: n
+          },
+          t !== "custom" && a[`color-${t}`],
+          f
+        ),
+        href: d.disabled ? "" : h,
+        isHrefExternal: g,
+        "aria-label": n ? s : void 0,
+        locale: N,
+        ...d,
+        ref: O,
+        children: n && r ? l : /* @__PURE__ */ I(v, { children: [
+          r && e === "leading" && l,
+          /* @__PURE__ */ c("div", { className: a.text, children: s }),
+          r && e === "trailing" && l
+        ] })
+      }
+    );
+  }
+);
+p.displayName = "ButtonPrimitive";
+const T = u(({ color: o = "primary", className: t, ...m }, i) => {
+  const r = B[o], s = r === "custom" ? a[`color-${{
+    hashicorp: "primary",
+    secondary: "secondary-white"
+  }[o] ?? o}`] : void 0;
+  return /* @__PURE__ */ c(
+    p,
+    {
+      ...m,
+      color: r,
+      className: y(s, t),
+      ref: i
+    }
+  );
+});
+T.displayName = "Button";
+export {
+  j as BUTTON_COLORS,
+  $ as BUTTON_ICON_POSITIONS,
+  U as BUTTON_SIZES,
+  T as Button
+};
+//# sourceMappingURL=index.js.map

package/dist/components/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import type { ForwardRefExoticComponent } from 'react'\nimport { forwardRef } from 'react'\nimport classNames from 'classnames'\nimport { Interactive } from '../interactive'\nimport type { FlightIconSize } from '../flight-icon'\nimport { FlightIcon } from '../flight-icon'\nimport s from './styles.module.scss'\n\nexport const BUTTON_SIZES = ['small', 'medium', 'large'] as const\nexport type ButtonSize = (typeof BUTTON_SIZES)[number]\n\nexport const BUTTON_ICON_POSITIONS = ['leading', 'trailing'] as const\nexport type ButtonIconPosition = (typeof BUTTON_ICON_POSITIONS)[number]\n\nexport const BUTTON_COLORS = [\n\t'primary',\n\t'primary-black',\n\t'primary-white',\n\t'secondary', // deprecated; maps to secondary-white\n\t'secondary-high-contrast', // alternates based on theme\n\t'secondary-white',\n\t'secondary-black',\n\t'tertiary',\n\t'critical',\n\t'boundary',\n\t'consul',\n\t'nomad',\n\t'packer',\n\t'terraform',\n\t'vagrant',\n\t'vault',\n\t'waypoint',\n\t'hashicorp', // alias to primary\n] as const\nexport type ButtonColor = (typeof BUTTON_COLORS)[number]\n\n// These are the only “real” colors our legacy button knows about\nconst LEGACY_COLORS = [\n\t'primary',\n\t'secondary',\n\t'tertiary',\n\t'critical',\n\t'custom',\n] as const\ntype LegacyButtonColor = (typeof LEGACY_COLORS)[number]\n\n// map HDS “super-set” colors down to our legacy ones\nconst COLOR_MAP: Record<ButtonColor, LegacyButtonColor> = {\n\tprimary: 'primary',\n\t'primary-black': 'custom',\n\t'primary-white': 'custom',\n\tsecondary: 'custom',\n\t'secondary-high-contrast': 'custom',\n\t'secondary-white': 'custom',\n\t'secondary-black': 'custom',\n\ttertiary: 'tertiary',\n\tcritical: 'critical',\n\tboundary: 'custom',\n\tconsul: 'custom',\n\tnomad: 'custom',\n\tpacker: 'custom',\n\tterraform: 'custom',\n\tvagrant: 'custom',\n\tvault: 'custom',\n\twaypoint: 'custom',\n\thashicorp: 'primary',\n}\n\ninterface ButtonPrimitiveProps {\n\tsize?: ButtonSize\n\tcolor?: LegacyButtonColor\n\tisFullWidth?: boolean\n\tisIconOnly?: boolean\n\ticon?: string\n\ticonPosition?: ButtonIconPosition\n\ttext?: string\n\thref?: string\n\tisHrefExternal?: boolean\n\tonClick?: React.MouseEventHandler<HTMLButtonElement>\n\tclassName?: string\n\tlocale?: string\n\tdisabled?: boolean\n\tautoFocus?: boolean\n\ttype?: 'button' | 'submit' | 'reset'\n}\n\nconst ICON_SIZE_MAP = {\n\tsmall: 12,\n\tmedium: 16,\n\tlarge: 24,\n} as const satisfies Record<'small' | 'medium' | 'large', FlightIconSize>\n\nconst ButtonPrimitive = forwardRef<HTMLButtonElement, ButtonPrimitiveProps>(\n\t(\n\t\t{\n\t\t\tsize = 'medium',\n\t\t\tcolor = 'primary',\n\t\t\tisFullWidth,\n\t\t\tisIconOnly,\n\t\t\ticon,\n\t\t\ticonPosition = 'leading',\n\t\t\ttext,\n\t\t\thref,\n\t\t\tisHrefExternal,\n\t\t\tclassName,\n\t\t\tlocale,\n\t\t\t...rest\n\t\t},\n\t\tref\n\t) => {\n\t\tconst hasIcon = Boolean(icon)\n\t\tconst showIconOnly = isIconOnly && hasIcon\n\n\t\tconst iconElement = icon && (\n\t\t\t<FlightIcon name={icon} size={ICON_SIZE_MAP[size]} />\n\t\t)\n\n\t\treturn (\n\t\t\t<Interactive\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts.button,\n\t\t\t\t\ts[`size-${size}`],\n\t\t\t\t\t{\n\t\t\t\t\t\t[s['width-full']]: isFullWidth,\n\t\t\t\t\t\t[s['icon-only']]: showIconOnly,\n\t\t\t\t\t},\n\t\t\t\t\tcolor !== 'custom' && s[`color-${color}`],\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\thref={rest.disabled ? '' : href}\n\t\t\t\tisHrefExternal={isHrefExternal}\n\t\t\t\taria-label={showIconOnly ? text : undefined}\n\t\t\t\tlocale={locale}\n\t\t\t\t{...rest}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t{showIconOnly && icon ? (\n\t\t\t\t\ticonElement\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{icon && iconPosition === 'leading' && iconElement}\n\t\t\t\t\t\t<div className={s.text}>{text}</div>\n\t\t\t\t\t\t{icon && iconPosition === 'trailing' && iconElement}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</Interactive>\n\t\t)\n\t}\n)\nButtonPrimitive.displayName = 'ButtonPrimitive'\n\nexport interface ButtonProps extends Omit<ButtonPrimitiveProps, 'color'> {\n\tcolor?: ButtonColor\n}\n\nexport const Button = forwardRef<\n\tHTMLAnchorElement | HTMLButtonElement,\n\tButtonProps\n>(({ color = 'primary', className, ...rest }, ref) => {\n\tconst legacyColor = COLOR_MAP[color]\n\n\tconst remappedColors: Partial<Record<ButtonColor, ButtonColor>> = {\n\t\thashicorp: 'primary',\n\t\tsecondary: 'secondary-white',\n\t}\n\n\tconst customClass =\n\t\tlegacyColor === 'custom'\n\t\t\t? s[`color-${remappedColors[color] ?? color}`]\n\t\t\t: undefined\n\n\treturn (\n\t\t<ButtonPrimitive\n\t\t\t{...rest}\n\t\t\tcolor={legacyColor}\n\t\t\tclassName={classNames(customClass, className)}\n\t\t\tref={ref as ForwardRefExoticComponent<HTMLButtonElement>}\n\t\t/>\n\t)\n})\n\nButton.displayName = 'Button'\n"],"names":["BUTTON_SIZES","BUTTON_ICON_POSITIONS","BUTTON_COLORS","COLOR_MAP","ICON_SIZE_MAP","ButtonPrimitive","forwardRef","size","color","isFullWidth","isIconOnly","icon","iconPosition","text","href","isHrefExternal","className","locale","rest","ref","showIconOnly","iconElement","jsx","FlightIcon","Interactive","classNames","s","jsxs","Fragment","Button","legacyColor","customClass"],"mappings":"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"}

package/dist/components/button/styles.module.scss

@@ -0,0 +1,221 @@
+@use 'styles/mixins/button' as *;
+
+$button-border-width: 1px;
+$button-focus-border-width: 3px;
+$button-border-radius: 5px;
+
+.button {
+	@include hds-button();
+
+	// the <a> element behaves differently than a <button>
+	@at-root a#{&} {
+		width: fit-content;
+
+		// for more background on the use of underlining as defined below read the following document: https://docs.google.com/document/d/1acLxdRqmy92vQ8ArShPxoBFmAV0StsbZrqEic6MVt20
+		&:hover,
+		&:focus,
+		&:active {
+			text-decoration: underline;
+		}
+	}
+
+	// This covers all of the browsers and focus scenarios (due to the custom focus design).
+	//
+	// IMPORTANT: we need to use also the [disabled] selector because if the "disabled" attribute is applied to a "Button as link",
+	// the ":disabled" pseudo-selector is not applied to the element in the browser (rightly) because a link can't be disabled
+	// but from the product perspective there may be use cases where they need to have a "Button as link" that looks disabled anyway
+	//
+	&:disabled,
+	&[disabled],
+	&:disabled:focus,
+	&[disabled]:focus,
+	&:disabled:hover,
+	&[disabled]:hover {
+		@include hds-button-state-disabled();
+	}
+
+	&.width-full {
+		width: 100%;
+		max-width: 100%;
+
+		.text {
+			flex: 0 0 auto;
+		}
+	}
+
+	&:focus {
+		@include hds-button-state-focus();
+	}
+}
+
+.text {
+	flex: 1 0 0;
+}
+
+.color-primary {
+	@include hds-button-color-primary();
+}
+
+.color-secondary {
+	@include hds-button-color-secondary();
+}
+
+.color-tertiary {
+	@include hds-button-color-tertiary();
+}
+
+.color-critical {
+	@include hds-button-color-critical();
+}
+
+@mixin mds-button-color-product($product) {
+	color: var(--mds-color-#{$product}-button-foreground);
+	background-color: var(--mds-color-#{$product}-button-background);
+	border-color: var(
+		--mds-color-#{$product}-button-border,
+		var(--mds-color-border-primary)
+	);
+	box-shadow: var(--mds-elevation-low-box-shadow);
+
+	&:hover {
+		color: var(--mds-color-#{$product}-button-foreground);
+		background-color: var(--mds-color-#{$product}-button-background-hover);
+		cursor: pointer;
+	}
+
+	&:focus {
+		color: var(--mds-color-#{$product}-button-foreground);
+		background-color: var(--mds-color-#{$product}-button-background-focus);
+
+		&::before {
+			/* the position absolute of an element is computed from the inside of the border of the container
+      so we have to take in account the border width of the pseudo-element container itself
+      plus for the primary button we want to have a 2px gap between the button and the focus */
+			$shift: $button-border-width + $button-focus-border-width + 2px;
+			top: -$shift;
+			right: -$shift;
+			bottom: -$shift;
+			left: -$shift;
+			border-color: var(--mds-color-focus-action-external);
+			border-radius: $button-border-radius + $button-focus-border-width +
+				2px;
+		}
+	}
+
+	&:active {
+		color: var(--mds-color-#{$product}-button-foreground);
+		background-color: var(--mds-color-#{$product}-button-background-active);
+		box-shadow: none;
+
+		&::before {
+			border-color: transparent;
+		}
+	}
+}
+
+.color-primary-white {
+	@include mds-button-color-product('primary-white');
+}
+
+.color-primary-black {
+	@include mds-button-color-product('primary-black');
+}
+
+.color-secondary-white {
+	@include mds-button-color-product('secondary-white');
+}
+
+.color-secondary-black {
+	@include mds-button-color-product('secondary-black');
+}
+
+:global(.mds-dark-mode),
+:global([data-theme='dark']) {
+	& .color-secondary-high-contrast {
+		@include mds-button-color-product('secondary-white');
+	}
+}
+
+.color-secondary-high-contrast {
+	@include mds-button-color-product('secondary-black');
+}
+
+.color-boundary {
+	@include mds-button-color-product('boundary');
+}
+
+.color-consul {
+	@include mds-button-color-product('consul');
+}
+
+.color-nomad {
+	@include mds-button-color-product('nomad');
+}
+
+.color-packer {
+	@include mds-button-color-product('packer');
+}
+
+.color-terraform {
+	@include mds-button-color-product('terraform');
+}
+
+.color-vagrant {
+	@include mds-button-color-product('vagrant');
+}
+
+.color-vault {
+	@include mds-button-color-product('vault');
+}
+
+.color-waypoint {
+	@include mds-button-color-product('waypoint');
+}
+
+.size-small {
+	min-height: 1.75rem;
+	padding: 0.375rem 0.6875rem;
+
+	& .text {
+		font-size: 0.8125rem;
+		line-height: 0.875rem;
+	}
+
+	&.icon-only {
+		min-width: 1.75rem;
+		padding-right: 0.375rem;
+		padding-left: 0.375rem;
+	}
+}
+
+.size-medium {
+	min-height: 2.25rem;
+	padding: 0.5625rem 0.9375rem;
+
+	& .text {
+		font-size: 0.875rem;
+		line-height: 1rem;
+	}
+
+	&.icon-only {
+		min-width: 2.25rem;
+		padding-right: 0.5625rem;
+		padding-left: 0.5625rem;
+	}
+}
+
+.size-large {
+	min-height: 3rem;
+	padding: 0.6875rem 1.1875rem;
+
+	& .text {
+		font-size: 1rem;
+		line-height: 1.5rem;
+	}
+
+	&.icon-only {
+		min-width: 3rem;
+		padding-right: 0.6875rem;
+		padding-left: 0.6875rem;
+	}
+}

package/dist/components/button/styles.module.scss.js

@@ -0,0 +1,32 @@
+const o = "button__gOWvd", r = "text__KbKvH", c = {
+  button: o,
+  "width-full": "width-full__juTUO",
+  text: r,
+  "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"
+};
+export {
+  o as button,
+  c as default,
+  r as text
+};
+//# sourceMappingURL=styles.module.scss.js.map

package/dist/components/button/styles.module.scss.js.map

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

package/dist/components/card/card-thumbnail/card-thumbnail.module.css

@@ -0,0 +1,10 @@
+.thumbnail {
+	position: relative;
+	aspect-ratio: var(--aspect-ratio, 1/1);
+	border-top-left-radius: inherit;
+	border-top-right-radius: inherit;
+	overflow: hidden;
+	& img {
+		object-fit: cover;
+	}
+}

package/dist/components/card/card-thumbnail/card-thumbnail.module.css.js

@@ -0,0 +1,8 @@
+const t = "thumbnail__f0mUs", a = {
+  thumbnail: t
+};
+export {
+  a as default,
+  t as thumbnail
+};
+//# sourceMappingURL=card-thumbnail.module.css.js.map

package/dist/components/card/card-thumbnail/card-thumbnail.module.css.js.map

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

package/dist/components/card/card-thumbnail/index.d.ts

@@ -0,0 +1,2 @@
+import { CardThumbnailProps } from '../types';
+export declare const CardThumbnail: ({ alt, aspectRatio, src, }: CardThumbnailProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/card/card-thumbnail/index.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { useMDSImage as l } from "../../../utils/mds-context/index.js";
+import o from "./card-thumbnail.module.css.js";
+const u = ({
+  alt: r,
+  aspectRatio: m,
+  src: t
+}) => {
+  const i = l();
+  return t ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: o.thumbnail,
+      style: { "--aspect-ratio": m },
+      children: /* @__PURE__ */ e(i, { fill: !0, alt: r, src: t })
+    }
+  ) : null;
+};
+export {
+  u as CardThumbnail
+};
+//# sourceMappingURL=index.js.map

package/dist/components/card/card-thumbnail/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/card/card-thumbnail/index.tsx"],"sourcesContent":["'use client'\n\nimport { useMDSImage } from '../../../utils/mds-context'\nimport type { CardThumbnailProps } from '../types'\nimport s from './card-thumbnail.module.css'\n\nexport const CardThumbnail = ({\n\talt,\n\taspectRatio,\n\tsrc,\n}: CardThumbnailProps) => {\n\tconst Image = useMDSImage()\n\treturn src ? (\n\t\t<div\n\t\t\tclassName={s.thumbnail}\n\t\t\tstyle={{ ['--aspect-ratio' as string]: aspectRatio }}\n\t\t>\n\t\t\t<Image fill alt={alt} src={src} />\n\t\t</div>\n\t) : null\n}\n"],"names":["CardThumbnail","alt","aspectRatio","src","Image","useMDSImage","jsx","s"],"mappings":";;;;AAM8B,MAC7BA,IAAA,CAAA;AAAA,EACA,KAAAC;AAAA,EACA,aAAAC;AAAA,EACD,KAAAC;AACC,MAAA;AACA,QAAAC,IAAOC,EAAA;AACN,SAACF,IAAA,gBAAAG;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA,WAAUC,EAAA;AAAA,MAEV,OAAA,EAAA,kBAAAL,EAAO;AAAA,MAAyB,UAAA,gBAAAI,EAAAF,GAAA,EAAA,MAAA,IAAA,KAAAH,GAAA,KAAAE,EAAA,CAAA;AAAA;EAGnC,IAAA;;"}

package/dist/components/card/index.d.ts

@@ -0,0 +1,3 @@
+import { CardProps } from './types';
+declare const Card: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Card };