@hashicorp/mds-react 0.9.0

package/dist/components/accordion/style.module.scss

@@ -0,0 +1,110 @@
+//
+// ACCORDION
+//
+
+@use 'styles/mixins/button' as *;
+@use 'styles/mixins/focus-ring' as *;
+
+$item-padding: 16px;
+$item-border-radius: 6px;
+
+// ACCORDION COMPONENT (wrapper)
+
+.accordion {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+// ACCORDION ITEM COMPONENT (nested child)
+
+.item {
+	background: var(--mds-color-surface-primary);
+	border-radius: $item-border-radius;
+
+	&.does-not-contain-interactive {
+		box-shadow: var(--mds-surface-mid-box-shadow);
+
+		&:hover,
+		&:global(.mock-hover) {
+			box-shadow: var(--mds-surface-high-box-shadow);
+		}
+	}
+
+	&.contains-interactive {
+		box-shadow: var(--mds-surface-base-box-shadow);
+	}
+}
+
+// TOGGLE BLOCK
+
+.toggle {
+	position: relative;
+	display: flex;
+	gap: 12px;
+	align-items: center;
+	padding: $item-padding $item-padding $item-padding 12px; // by design
+}
+
+.button {
+	padding: 0;
+
+	&:hover {
+		cursor: pointer;
+	}
+
+	& .icon {
+		@media (prefers-reduced-motion: no-preference) {
+			transition: transform 0.3s;
+		}
+
+		&.icon-rotate {
+			transform: rotate(-180deg);
+		}
+	}
+
+	// entire toggle area is interactive
+	&.parent-does-not-contain-interactive {
+		@include hds-focus-ring-with-pseudo-element();
+		position: static;
+		margin: -1px 0;
+		color: var(--mds-color-foreground-primary);
+		background: transparent;
+		border: 1px solid transparent;
+
+		// expand button target to cover entire AccordionItem Toggle block (depending on the `@containsInteractive/@parentContainsInteractive` argument)
+		&::after {
+			position: absolute;
+			display: block;
+			border-radius: $item-border-radius;
+			content: '';
+			inset: 0;
+		}
+	}
+
+	// only chevron button area is interactive
+	&.parent-contains-interactive {
+		@include hds-button();
+		width: 24px;
+		height: 24px;
+
+		&:focus,
+		&:global(.mock-focus) {
+			@include hds-button-state-focus();
+		}
+
+		// `hds-button-color-secondary` determines the focus color and needs to be placed after `hds-button-state-focus`
+		@include hds-button-color-secondary();
+	}
+}
+
+// Consumer added content that appears next to the chevron button:
+.toggle-content {
+	flex: 1;
+}
+
+// CONTENT BLOCK
+
+.content {
+	padding: 4px $item-padding $item-padding $item-padding;
+}

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

@@ -0,0 +1,24 @@
+const t = "accordion__tWR7C", n = "item__MYeus", o = "toggle__cD-PM", e = "button__e63te", c = "icon__xZL-n", i = "content__RNHA7", a = {
+  accordion: t,
+  item: n,
+  "does-not-contain-interactive": "does-not-contain-interactive__9u5oz",
+  "contains-interactive": "contains-interactive__7-Y60",
+  toggle: o,
+  button: e,
+  icon: c,
+  "icon-rotate": "icon-rotate__OTQtF",
+  "parent-does-not-contain-interactive": "parent-does-not-contain-interactive__H4GPb",
+  "parent-contains-interactive": "parent-contains-interactive__FGVlz",
+  "toggle-content": "toggle-content__6cjUu",
+  content: i
+};
+export {
+  t as accordion,
+  e as button,
+  i as content,
+  a as default,
+  c as icon,
+  n as item,
+  o as toggle
+};
+//# sourceMappingURL=style.module.scss.js.map

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

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

package/dist/components/alert/alert.module.scss

@@ -0,0 +1,229 @@
+//
+// ALERT COMPONENT
+//
+
+.alert {
+	display: flex;
+	align-items: flex-start;
+}
+
+// ICON
+
+.icon {
+	flex: none;
+	width: 20px;
+	height: 20px;
+	margin-right: 12px;
+
+	.type-compact & {
+		width: 14px;
+		height: 14px;
+	}
+}
+
+// CONTENT (TEXT + ACTIONS + GENERIC)
+
+.content {
+	flex: 1 1 auto;
+}
+
+// TEXT (TITLE & DESCRIPTION)
+
+.text {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	justify-content: center;
+	color: var(--mds-color-foreground-warning-on-surface);
+}
+
+.description {
+	word-break: break-word;
+
+	// we add very basic styling for elements that may be injected via the "description" string
+
+	strong {
+		font-weight: var(--mds-typography-font-weight-semibold);
+	}
+
+	code,
+	pre {
+		display: inline;
+		padding: 1px 5px;
+		font-size: 0.9em; // as discussed with designers, we reduce the size for optical/visual balance
+		font-family: var(--mds-typography-font-stack-mono);
+		line-height: 1em;
+		background-color: var(--mds-color-surface-primary);
+		border: 1px solid var(--mds-color-palette-neutral-200);
+		border-radius: 5px;
+	}
+
+	// Default styling for bare HTML links not using HDS::Link components
+	a:not([class*='hds-']) {
+		color: var(--mds-color-foreground-strong);
+
+		&:focus,
+		&:focus-visible {
+			text-decoration: none;
+			outline: 2px solid var(--mds-color-focus-action-internal);
+			outline-offset: 1px;
+		}
+
+		&:hover {
+			color: var(--mds-color-foreground-primary);
+		}
+
+		&:active {
+			color: var(--mds-color-foreground-faint);
+		}
+	}
+
+	*:where(p, ul, ol, h1, h2, h3, h4, h5, h6):first-child {
+		margin-top: 0;
+	}
+
+	*:where(p, ul, ol, h1, h2, h3, h4, h5, h6):last-child {
+		margin-bottom: 0;
+	}
+}
+
+// ACTIONS
+
+.actions {
+	display: flex;
+	gap: 16px;
+	align-items: center;
+
+	> * {
+		margin-top: 16px;
+	}
+}
+
+// DISMISS
+
+.dismiss-button-wrapper {
+	margin-top: 2px; // for alignment with the main icon and text
+	margin-left: 16px;
+}
+
+// TYPES
+
+.type-page {
+	padding: 16px 48px; // by design
+}
+
+.type-inline {
+	padding: 16px;
+	border-style: solid;
+	border-width: 1px;
+	border-radius: 6px;
+}
+
+.type-compact {
+	.icon {
+		margin-top: 2px; // notice: the icon size for the "compact" type is 14px, not 20px, so this 2px extra are needed to reach the exact same height as the "description" text line-height
+		margin-right: 8px;
+	}
+
+	// extra safety
+	.title {
+		display: none;
+
+		& + .description {
+			margin-top: 0;
+		}
+	}
+}
+
+// COLORS (& TYPES)
+
+.color-neutral {
+	&.type-page {
+		background-color: var(--mds-color-surface-faint);
+		box-shadow: 0 1px 0 0 var(--mds-color-palette-alpha-300);
+	}
+
+	&.type-inline {
+		background-color: var(--mds-color-surface-faint);
+		border-color: var(
+			--mds-color-border-strong
+		); // notice: in the "neutral" color the "inline" has a slightly darker border color compared to the others to increase contrast (eg. could be used on a light gray background)
+	}
+
+	// different color by design
+	.icon {
+		color: var(--mds-color-foreground-faint);
+	}
+
+	.title {
+		color: var(--mds-color-foreground-primary);
+	}
+}
+
+.color-highlight {
+	&.type-page {
+		background-color: var(--mds-color-surface-highlight);
+		box-shadow: 0 1px 0 0 var(--mds-color-border-highlight);
+	}
+
+	&.type-inline {
+		background-color: var(--mds-color-surface-highlight);
+		border-color: var(--mds-color-border-highlight);
+	}
+
+	.icon,
+	.title {
+		color: var(--mds-color-foreground-highlight-on-surface);
+	}
+}
+
+.color-success {
+	&.type-page {
+		background-color: var(--mds-color-surface-success);
+		box-shadow: 0 1px 0 0 var(--mds-color-border-success);
+	}
+
+	&.type-inline {
+		background-color: var(--mds-color-surface-success);
+		border-color: var(--mds-color-border-success);
+	}
+
+	.icon,
+	.title {
+		color: var(--mds-color-foreground-success-on-surface);
+	}
+}
+
+.color-warning {
+	&.type-page {
+		background-color: var(--mds-color-surface-warning);
+		box-shadow: 0 1px 0 0 var(--mds-color-border-warning);
+	}
+
+	&.type-inline {
+		background-color: var(--mds-color-surface-warning);
+		border-color: var(--mds-color-border-warning);
+	}
+
+	.icon,
+	.title {
+		color: var(--mds-color-foreground-warning-on-surface);
+	}
+}
+
+.color-critical {
+	&.type-page {
+		background-color: var(--mds-color-surface-critical);
+		box-shadow: 0 1px 0 0 var(--mds-color-border-critical);
+	}
+
+	&.type-inline {
+		background-color: var(--mds-color-surface-critical);
+		border-color: var(--mds-color-border-critical);
+	}
+
+	.icon,
+	.title {
+		color: var(--mds-color-foreground-critical-on-surface);
+	}
+}

package/dist/components/alert/alert.module.scss.js

@@ -0,0 +1,29 @@
+const t = "alert__j7ZRS", o = "icon__vbZHd", c = "content__0FEM2", n = "text__qorMN", e = "description__PMywu", i = "actions__vQ07y", _ = "title__MWel2", s = {
+  alert: t,
+  icon: o,
+  "type-compact": "type-compact__ptTlw",
+  content: c,
+  text: n,
+  description: e,
+  actions: i,
+  "dismiss-button-wrapper": "dismiss-button-wrapper__vcfJ-",
+  "type-page": "type-page__tP9-W",
+  "type-inline": "type-inline__7sxYA",
+  title: _,
+  "color-neutral": "color-neutral__x4pkI",
+  "color-highlight": "color-highlight__64nTZ",
+  "color-success": "color-success__UMfyG",
+  "color-warning": "color-warning__V1hfX",
+  "color-critical": "color-critical__3hs0B"
+};
+export {
+  i as actions,
+  t as alert,
+  c as content,
+  s as default,
+  e as description,
+  o as icon,
+  n as text,
+  _ as title
+};
+//# sourceMappingURL=alert.module.scss.js.map

package/dist/components/alert/alert.module.scss.js.map

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

package/dist/components/alert/icon.d.ts

@@ -0,0 +1,9 @@
+import { AlertColor, AlertProps } from '.';
+import { FlightIconName } from '../flight-icon';
+interface IconProps {
+    icon?: FlightIconName | false;
+    color: AlertColor;
+    type: AlertProps['type'];
+}
+declare const Icon: ({ icon, type, color }: IconProps) => import("react/jsx-runtime").JSX.Element | null;
+export { Icon };

package/dist/components/alert/icon.js

@@ -0,0 +1,34 @@
+import { jsx as l } from "react/jsx-runtime";
+import { FlightIcon as n } from "../flight-icon/index.js";
+import r from "./alert.module.scss.js";
+const a = {
+  neutral: {
+    compact: "info-fill",
+    default: "info"
+  },
+  highlight: {
+    compact: "info-fill",
+    default: "info"
+  },
+  success: {
+    compact: "check-circle-fill",
+    default: "check-circle"
+  },
+  warning: {
+    compact: "alert-triangle-fill",
+    default: "alert-triangle"
+  },
+  critical: {
+    compact: "alert-diamond-fill",
+    default: "alert-diamond"
+  }
+}, s = ({ icon: t, type: e, color: c }) => {
+  if (t === !1)
+    return null;
+  const i = e === "compact" ? a[c].compact : a[c].default, o = t ?? i;
+  return /* @__PURE__ */ l("div", { className: r.icon, children: /* @__PURE__ */ l(n, { name: o, stretched: !0 }) });
+};
+export {
+  s as Icon
+};
+//# sourceMappingURL=icon.js.map

package/dist/components/alert/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sources":["../../../src/components/alert/icon.tsx"],"sourcesContent":["import type { AlertColor, AlertProps } from '.'\nimport type { FlightIconName } from '../flight-icon'\nimport { FlightIcon } from '../flight-icon'\nimport s from './alert.module.scss'\n\nconst ICON_BY_COLOR_AND_TYPE = {\n\tneutral: {\n\t\tcompact: 'info-fill',\n\t\tdefault: 'info',\n\t},\n\thighlight: {\n\t\tcompact: 'info-fill',\n\t\tdefault: 'info',\n\t},\n\tsuccess: {\n\t\tcompact: 'check-circle-fill',\n\t\tdefault: 'check-circle',\n\t},\n\twarning: {\n\t\tcompact: 'alert-triangle-fill',\n\t\tdefault: 'alert-triangle',\n\t},\n\tcritical: {\n\t\tcompact: 'alert-diamond-fill',\n\t\tdefault: 'alert-diamond',\n\t},\n} as const satisfies Record<\n\tAlertColor,\n\tRecord<'compact' | 'default', FlightIconName>\n>\n\ninterface IconProps {\n\ticon?: FlightIconName | false\n\tcolor: AlertColor\n\ttype: AlertProps['type']\n}\n\nconst Icon = ({ icon, type, color }: IconProps) => {\n\tif (icon === false) {\n\t\treturn null\n\t}\n\n\tconst defaultIconName: FlightIconName =\n\t\ttype === 'compact'\n\t\t\t? ICON_BY_COLOR_AND_TYPE[color].compact\n\t\t\t: ICON_BY_COLOR_AND_TYPE[color].default\n\n\tconst iconName = icon ?? defaultIconName\n\n\treturn (\n\t\t<div className={s.icon}>\n\t\t\t<FlightIcon name={iconName} stretched />\n\t\t</div>\n\t)\n}\n\nexport { Icon }\n"],"names":["ICON_BY_COLOR_AND_TYPE","Icon","icon","type","color","defaultIconName","iconName","jsx","s","FlightIcon"],"mappings":";;;AAKA,MAAMA,IAAyB;AAAA,EAC9B,SAAS;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAAA,EAEV,WAAW;AAAA,IACV,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAAA,EAEV,SAAS;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAAA,EAEV,SAAS;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAAA,EAEV,UAAU;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAEX,GAWMC,IAAO,CAAC,EAAE,MAAAC,GAAM,MAAAC,GAAM,OAAAC,QAAuB;AAClD,MAAIF,MAAS;AACZ,WAAO;AAGR,QAAMG,IACLF,MAAS,YACNH,EAAuBI,CAAK,EAAE,UAC9BJ,EAAuBI,CAAK,EAAE,SAE5BE,IAAWJ,KAAQG;AAEzB,SACC,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAE,MACjB,UAAA,gBAAAD,EAACE,GAAA,EAAW,MAAMH,GAAU,WAAS,GAAA,CAAC,GACvC;AAEF;"}

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

@@ -0,0 +1,62 @@
+import { StandaloneLinkProps } from '../standalone-link';
+import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+import { ButtonProps } from '../button';
+import { FlightIconName } from '../flight-icon';
+type AlertColor = 'neutral' | 'highlight' | 'success' | 'warning' | 'critical';
+interface CommonAlertProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Sets the color scheme for `background`, `border`, `title`, and `description`, which cannot be overridden.
+     * `color` results in a default icon, which can be overridden.
+     * default: `neutral`
+     */
+    color?: AlertColor;
+    /**
+     * The alert can be dismissed by the user. When a function is passed, the "dismiss" button is displayed.
+     */
+    onDismiss?: () => void;
+    /**
+     * A string used for the title of the alert.
+     * Alert must have either a title or a description, or both.
+     */
+    title?: string;
+    /**
+     * A plain text string or basic html that is used for the description.
+     * Alert must have either a title or a description, or both.
+     */
+    description?: ReactNode;
+    /**
+     * Role for the alert.
+     * `alertdialog` should be used when the alert includes interactive elements (<Alert.Actions>).
+     * `alert` should be used for all other scenarios.
+     */
+    role: 'alert' | 'alertdialog';
+}
+type AlertProps = (CommonAlertProps & {
+    /** compact alerts must specify an icon */
+    type: 'compact';
+    /** an icon from the Flight Icon set or false to hide the default icon */
+    icon?: FlightIconName;
+}) | (CommonAlertProps & {
+    /** page & inline alerts get an optional icon override */
+    type: 'page' | 'inline';
+    /** an icon from the Flight Icon set or false to hide the default icon */
+    icon?: FlightIconName | false;
+});
+declare const Alert: {
+    ({ type, color, icon, onDismiss, title, description, children, role, className, ...rest }: AlertProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertActions: {
+    ({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertButton: {
+    ({ ...props }: Exclude<ButtonProps, 'size'>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertStandaloneLink: {
+    ({ ...props }: Exclude<StandaloneLinkProps, 'size'>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Alert, AlertActions, AlertButton, AlertStandaloneLink };
+export type { AlertProps, AlertColor };

package/dist/components/alert/index.js

@@ -0,0 +1,97 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import o from "classnames";
+import { useId as u } from "react";
+import { DismissButton as f } from "../dismiss-button/index.js";
+import { StandaloneLink as N } from "../standalone-link/index.js";
+import { Icon as g } from "./icon.js";
+import { Button as A } from "../button/index.js";
+import t from "./alert.module.scss.js";
+const v = ({
+  type: r,
+  color: n = "neutral",
+  icon: d,
+  onDismiss: m,
+  title: a,
+  description: i,
+  children: c,
+  role: p,
+  className: y,
+  ...h
+}) => {
+  if (!a && !i)
+    throw new Error(
+      "Alert must include either a title or a description, or both"
+    );
+  const s = u();
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: o(
+        t.alert,
+        t[`type-${r}`],
+        t[`color-${n}`],
+        y
+      ),
+      role: p,
+      "aria-live": "polite",
+      "aria-labelledby": s,
+      ...h,
+      children: [
+        /* @__PURE__ */ e(g, { icon: d, type: r, color: n }),
+        /* @__PURE__ */ l("div", { className: t.content, children: [
+          /* @__PURE__ */ l(
+            "div",
+            {
+              className: o(
+                t.text,
+                r === "compact" ? "mds-typography-legacy-body-100" : "mds-typography-legacy-body-200"
+              ),
+              children: [
+                a && /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: o(
+                      t.title,
+                      "mds-typography-font-weight-semibold"
+                    ),
+                    id: s,
+                    children: a
+                  }
+                ),
+                i && /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: o(
+                      t.description,
+                      "mds-typography-font-weight-regular mds-foreground-primary"
+                    ),
+                    id: a ? void 0 : s,
+                    children: i
+                  }
+                )
+              ]
+            }
+          ),
+          c
+        ] }),
+        m && /* @__PURE__ */ e("div", { className: t["dismiss-button-wrapper"], children: /* @__PURE__ */ e(f, { onClick: m }) })
+      ]
+    }
+  );
+};
+v.displayName = "Alert";
+const b = ({ children: r }) => /* @__PURE__ */ e("div", { className: t.actions, children: r });
+b.displayName = "AlertActions";
+const w = ({ ...r }) => /* @__PURE__ */ e(A, { size: "small", ...r });
+w.displayName = "AlertButton";
+const k = ({
+  ...r
+}) => /* @__PURE__ */ e(N, { size: "small", ...r });
+k.displayName = "AlertStandaloneLink";
+export {
+  v as Alert,
+  b as AlertActions,
+  w as AlertButton,
+  k as AlertStandaloneLink
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/alert/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { useId } from 'react'\nimport { DismissButton } from '../dismiss-button'\nimport { StandaloneLink, type StandaloneLinkProps } from '../standalone-link'\nimport { Icon } from './icon'\nimport type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport type { ButtonProps } from '../button'\nimport { Button } from '../button'\nimport s from './alert.module.scss'\nimport type { FlightIconName } from '../flight-icon'\n\ntype AlertColor = 'neutral' | 'highlight' | 'success' | 'warning' | 'critical'\n\ninterface CommonAlertProps extends HTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Sets the color scheme for `background`, `border`, `title`, and `description`, which cannot be overridden.\n\t * `color` results in a default icon, which can be overridden.\n\t * default: `neutral`\n\t */\n\tcolor?: AlertColor\n\t/**\n\t * The alert can be dismissed by the user. When a function is passed, the \"dismiss\" button is displayed.\n\t */\n\tonDismiss?: () => void\n\t/**\n\t * A string used for the title of the alert.\n\t * Alert must have either a title or a description, or both.\n\t */\n\ttitle?: string\n\t/**\n\t * A plain text string or basic html that is used for the description.\n\t * Alert must have either a title or a description, or both.\n\t */\n\tdescription?: ReactNode\n\t/**\n\t * Role for the alert.\n\t * `alertdialog` should be used when the alert includes interactive elements (<Alert.Actions>).\n\t * `alert` should be used for all other scenarios.\n\t */\n\trole: 'alert' | 'alertdialog'\n}\n\ntype AlertProps =\n\t| (CommonAlertProps & {\n\t\t\t/** compact alerts must specify an icon */\n\t\t\ttype: 'compact'\n\t\t\t/** an icon from the Flight Icon set or false to hide the default icon */\n\t\t\ticon?: FlightIconName\n\t  })\n\t| (CommonAlertProps & {\n\t\t\t/** page & inline alerts get an optional icon override */\n\t\t\ttype: 'page' | 'inline'\n\t\t\t/** an icon from the Flight Icon set or false to hide the default icon */\n\t\t\ticon?: FlightIconName | false\n\t  })\n\nconst Alert = ({\n\ttype,\n\tcolor = 'neutral',\n\ticon,\n\tonDismiss,\n\ttitle,\n\tdescription,\n\tchildren,\n\trole,\n\tclassName,\n\t...rest\n}: AlertProps) => {\n\tif (!title && !description) {\n\t\tthrow new Error(\n\t\t\t'Alert must include either a title or a description, or both'\n\t\t)\n\t}\n\n\t// `alertdialog` must have an accessible name so we use either the\n\t// title or the description as label for the alert\n\tconst generatedLabelId = useId()\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\n\t\t\t\ts.alert,\n\t\t\t\ts[`type-${type}`],\n\t\t\t\ts[`color-${color}`],\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\trole={role}\n\t\t\taria-live=\"polite\"\n\t\t\taria-labelledby={generatedLabelId}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<Icon icon={icon} type={type} color={color} />\n\t\t\t<div className={s.content}>\n\t\t\t\t<div\n\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\ts.text,\n\t\t\t\t\t\ttype === 'compact'\n\t\t\t\t\t\t\t? 'mds-typography-legacy-body-100'\n\t\t\t\t\t\t\t: 'mds-typography-legacy-body-200'\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{title && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\t\ts.title,\n\t\t\t\t\t\t\t\t'mds-typography-font-weight-semibold'\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\tid={generatedLabelId}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{description && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\t\ts.description,\n\t\t\t\t\t\t\t\t'mds-typography-font-weight-regular mds-foreground-primary'\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\tid={!title ? generatedLabelId : undefined}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{description}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t\t{onDismiss && (\n\t\t\t\t<div className={s['dismiss-button-wrapper']}>\n\t\t\t\t\t<DismissButton onClick={onDismiss} />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nAlert.displayName = 'Alert'\n\nconst AlertActions = ({ children }: PropsWithChildren) => {\n\treturn <div className={s.actions}>{children}</div>\n}\n\nAlertActions.displayName = 'AlertActions'\n\nconst AlertButton = ({ ...props }: Exclude<ButtonProps, 'size'>) => {\n\treturn <Button size=\"small\" {...props} />\n}\n\nAlertButton.displayName = 'AlertButton'\n\nconst AlertStandaloneLink = ({\n\t...props\n}: Exclude<StandaloneLinkProps, 'size'>) => {\n\treturn <StandaloneLink size=\"small\" {...props} />\n}\n\nAlertStandaloneLink.displayName = 'AlertStandaloneLink'\n\nexport { Alert, AlertActions, AlertButton, AlertStandaloneLink }\nexport type { AlertProps, AlertColor }\n"],"names":["Alert","type","color","icon","onDismiss","title","description","children","role","className","rest","generatedLabelId","useId","jsxs","classNames","s","jsx","Icon","DismissButton","AlertActions","AlertButton","props","Button","AlertStandaloneLink","StandaloneLink"],"mappings":";;;;;;;;AAwDA,MAAMA,IAAQ,CAAC;AAAA,EACd,MAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAAkB;AACjB,MAAI,CAACL,KAAS,CAACC;AACd,UAAM,IAAI;AAAA,MACT;AAAA,IAAA;AAMF,QAAMK,IAAmBC,EAAA;AAEzB,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAWC;AAAA,QACVC,EAAE;AAAA,QACFA,EAAE,QAAQd,CAAI,EAAE;AAAA,QAChBc,EAAE,SAASb,CAAK,EAAE;AAAA,QAClBO;AAAA,MAAA;AAAA,MAED,MAAAD;AAAA,MACA,aAAU;AAAA,MACV,mBAAiBG;AAAA,MAChB,GAAGD;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAM,EAACC,GAAA,EAAK,MAAAd,GAAY,MAAAF,GAAY,OAAAC,EAAA,CAAc;AAAA,QAC5C,gBAAAW,EAAC,OAAA,EAAI,WAAWE,EAAE,SACjB,UAAA;AAAA,UAAA,gBAAAF;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,WAAWC;AAAA,gBACVC,EAAE;AAAA,gBACFd,MAAS,YACN,mCACA;AAAA,cAAA;AAAA,cAGH,UAAA;AAAA,gBAAAI,KACA,gBAAAW;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACA,WAAWF;AAAA,sBACVC,EAAE;AAAA,sBACF;AAAA,oBAAA;AAAA,oBAED,IAAIJ;AAAA,oBAEH,UAAAN;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGFC,KACA,gBAAAU;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACA,WAAWF;AAAA,sBACVC,EAAE;AAAA,sBACF;AAAA,oBAAA;AAAA,oBAED,IAAKV,IAA2B,SAAnBM;AAAA,oBAEZ,UAAAL;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UAAA;AAAA,UAGDC;AAAA,QAAA,GACF;AAAA,QACCH,KACA,gBAAAY,EAAC,OAAA,EAAI,WAAWD,EAAE,wBAAwB,GACzC,UAAA,gBAAAC,EAACE,GAAA,EAAc,SAASd,EAAA,CAAW,EAAA,CACpC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIJ;AAEAJ,EAAM,cAAc;AAEpB,MAAMmB,IAAe,CAAC,EAAE,UAAAZ,QAChB,gBAAAS,EAAC,OAAA,EAAI,WAAWD,EAAE,SAAU,UAAAR,GAAS;AAG7CY,EAAa,cAAc;AAE3B,MAAMC,IAAc,CAAC,EAAE,GAAGC,QAClB,gBAAAL,EAACM,GAAA,EAAO,MAAK,SAAS,GAAGD,GAAO;AAGxCD,EAAY,cAAc;AAE1B,MAAMG,IAAsB,CAAC;AAAA,EAC5B,GAAGF;AACJ,MACQ,gBAAAL,EAACQ,GAAA,EAAe,MAAK,SAAS,GAAGH,GAAO;AAGhDE,EAAoB,cAAc;"}

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

@@ -0,0 +1,30 @@
+import { FlightIconName } from '../flight-icon';
+declare const BADGE_SIZES: readonly ["small", "medium", "large"];
+type BadgeSize = (typeof BADGE_SIZES)[number];
+declare const BADGE_TYPES: readonly ["filled", "inverted", "outlined"];
+type BadgeType = (typeof BADGE_TYPES)[number];
+declare const BADGE_COLORS: readonly ["neutral", "neutral-dark-mode", "highlight", "success", "warning", "critical"];
+type BadgeColor = (typeof BADGE_COLORS)[number];
+interface BadgeProps {
+    /** Use this parameter to show an icon. */
+    icon?: FlightIconName;
+    /**
+     * The `iconColor` prop can be used to change the icon color. It works by setting
+     * the value of the icon SVG’s fill property.
+     */
+    iconColor?: string;
+    /** This indicates if the button will only contain an icon. An internal check is in place to ensure that accessible text is still applied to the component. */
+    iconOnly?: boolean;
+    /** The text of the Badge or value of the screen-reader only element if isIconOnly is set to true. If no text value is defined an error will be thrown. */
+    text: string;
+    size?: BadgeSize;
+    type?: BadgeType;
+    color?: BadgeColor;
+    className?: string;
+}
+declare const Badge: {
+    ({ icon, iconColor, iconOnly, text, size, type, color, className, ...rest }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { BadgeProps, BadgeColor, BadgeSize, BadgeType };
+export { Badge, BADGE_COLORS, BADGE_SIZES, BADGE_TYPES };