@hashicorp/mds-react 0.9.13 → 0.9.15

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

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'react';
+interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * optional class name to add to the accordion
+     */
+    className?: string;
+}
+declare const Accordion: {
+    ({ children, className, ...rest }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Accordion };
+export type { AccordionProps };
+export { AccordionContent, AccordionItem, AccordionToggle } from './item';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C,UAAU,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC9D;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,QAAA,MAAM,SAAS;uCAAsC,cAAc;;CAMlE,CAAA;AAID,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,cAAc,EAAE,CAAA;AAC9B,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAA"}

package/dist/components/accordion/item/button.d.ts

@@ -0,0 +1,7 @@
+interface AccordionButtonProps {
+    anchorId?: string;
+    updateUrl?: boolean;
+}
+declare const AccordionButton: ({ anchorId, updateUrl }: AccordionButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { AccordionButton };
+//# sourceMappingURL=button.d.ts.map

package/dist/components/accordion/item/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/accordion/item/button.tsx"],"names":[],"mappings":"AAQA,UAAU,oBAAoB;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,eAAe,GAAI,yBAAyB,oBAAoB,4CAyCrE,CAAA;AAED,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/accordion/item/index.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from 'react';
+interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+    ariaLabel?: string;
+    isOpen?: boolean;
+    containsInteractive?: boolean;
+}
+declare const AccordionItem: {
+    ({ children, containsInteractive, isOpen, ariaLabel, ...rest }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface AccordionToggleProps {
+    children: React.ReactNode;
+    anchorId?: string;
+    updateUrl?: boolean;
+}
+declare const AccordionToggle: {
+    ({ children, anchorId, updateUrl, }: AccordionToggleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AccordionContent: {
+    ({ children }: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { AccordionItem, AccordionToggle, AccordionContent };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/accordion/item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/accordion/item/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAK3C,UAAU,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAClE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,QAAA,MAAM,aAAa;oEAMhB,kBAAkB;;CAepB,CAAA;AAID,UAAU,oBAAoB;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;CACnB;AACD,QAAA,MAAM,eAAe;yCAIlB,oBAAoB;;CAStB,CAAA;AAID,QAAA,MAAM,gBAAgB;mBAAkB,KAAK,CAAC,iBAAiB;;CAgB9D,CAAA;AAID,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/accordion/item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/accordion/item/index.tsx"],"sourcesContent":["'use client'\n\nimport classNames from 'classnames'\nimport { DisclosurePrimitive } from '../../disclosure-primitive'\nimport { useDisclosurePrimitive } from '../../disclosure-primitive/use-disclosure-primitive'\nimport type { HTMLAttributes } from 'react'\nimport { AccordionButton } from './button'\nimport s from '../style.module.scss'\nimport { Text } from '../../text'\n\ninterface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {\n\tariaLabel?: string\n\tisOpen?: boolean\n\tcontainsInteractive?: boolean\n}\n\nconst AccordionItem = ({\n\tchildren,\n\tcontainsInteractive,\n\tisOpen,\n\tariaLabel = 'Toggle display',\n\t...rest\n}: AccordionItemProps) => {\n\treturn (\n\t\t<DisclosurePrimitive.Provider\n\t\t\tclassName={classNames(s.item, {\n\t\t\t\t[s['contains-interactive']]: containsInteractive,\n\t\t\t\t[s['does-not-contain-interactive']]: !containsInteractive,\n\t\t\t})}\n\t\t\ttrackedIsOpen={isOpen}\n\t\t\tcontainsInteractive={containsInteractive}\n\t\t\tariaLabel={ariaLabel}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</DisclosurePrimitive.Provider>\n\t)\n}\n\nAccordionItem.displayName = 'AccordionItem'\n\ninterface AccordionToggleProps {\n\tchildren: React.ReactNode\n\tanchorId?: string\n\tupdateUrl?: boolean\n}\nconst AccordionToggle = ({\n\tchildren,\n\tanchorId,\n\tupdateUrl,\n}: AccordionToggleProps) => {\n\treturn (\n\t\t<div className={s.toggle}>\n\t\t\t<AccordionButton anchorId={anchorId ?? ''} updateUrl={updateUrl} />\n\t\t\t<div className={classNames(s['toggle-content'])}>\n\t\t\t\t<Text.Body weight=\"semibold\">{children}</Text.Body>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\nAccordionToggle.displayName = 'AccordionToggle'\n\nconst AccordionContent = ({ children }: React.PropsWithChildren) => {\n\tconst { contentId } = useDisclosurePrimitive()\n\n\treturn (\n\t\t<DisclosurePrimitive.Content>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts['content'],\n\t\t\t\t\t'mds-typography-legacy-body-200 mds-foreground-primary',\n\t\t\t\t)}\n\t\t\t\tid={contentId}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</DisclosurePrimitive.Content>\n\t)\n}\n\nAccordionContent.displayName = 'AccordionContent'\n\nexport { AccordionItem, AccordionToggle, AccordionContent }\n"],"names":["AccordionItem","children","containsInteractive","isOpen","ariaLabel","rest","jsx","DisclosurePrimitive","classNames","s","AccordionToggle","anchorId","updateUrl","jsxs","AccordionButton","Text","contentId","useDisclosurePrimitive"],"mappings":";;;;;;;;AAgBuB,MACtBA,IAAA,CAAA;AAAA,EACA,UAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAG;AAAA,EACJ,GAAAC;AACC,MACsB,gBAAAC;AAAA,EAApBC,EAAA;AAAA,EAAA;AAAA,IAC8B,WAC1BC,EAAAC,EAAA;MACH,CAACA,EAAE,sBAAA,CAAA,GAAAP;AAAA,MACH,CAAAO,EAAA,8BAAA,CAAA,GAAA,CAAAP;AAAA,IACD,CAAA;AAAA,IACA,eAAAC;AAAA,IACA,qBAAAD;AAAA,IACC,WAAAE;AAAA,IAEA,GAAAC;AAAA,IAAA,UAAAJ;AAAA,EACF;AAEF;AASAD,EAAM,cAAmB;AAAA,MACxBU,IAAA,CAAA;AAAA,EACA,UAAAT;AAAA,EACA,UAAAU;AAAA,EACD,WAAAC;AACC,MAEG,gBAAAC,EAAA,OAAA,EAAA,WAAgBJ,EAAA,QAAU,UAAgB;AAAA,EAC3C,gBAAAH,EAACQ,GAAI,EAAA,UAAWH,KAAa,IAAA,WAAAC,EAC5B,CAAA;AAAA,EAEF,gBAAAN,EAAA,OAAA,EAAA,WAAAE,EAAAC,EAAA,gBAAA,CAAA,GAAA,UAAA,gBAAAH,EAAAS,EAAA,MAAA,EAAA,QAAA,YAAA,UAAAd,EAAA,CAAA,EAAA,CAAA;AAEF,EAAA,CAAA;AAIAS,gBAA4B;AAC3B;AAEA,QAAA,EAAA,WAAAM,EAAA,IAAAC,EACE;AACA,SAAC,gBAAAX,EAAAC,EAAA,SAAA,EAAA,UAAA,gBAAAD;AAAA,IAAA;AAAA,IAAA;AAAA,MACW,WACRE;AAAA,QACFC,EAAA;AAAA,QACD;AAAA,MACA;AAAA,MAEC,IAAAO;AAAA,MAAA,UAAAf;AAAA;EAIL,EAAA,CAAA;AAEA;;"}

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/alert/alert.module.scss

@@ -0,0 +1,227 @@
+//
+// 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 {
+	overflow-wrap: 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/icon.d.ts

@@ -0,0 +1,10 @@
+import type { AlertColor, AlertProps } from '.';
+import type { 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 };
+//# sourceMappingURL=icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/alert/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,GAAG,CAAA;AAC/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AA8BpD,UAAU,SAAS;IAClB,IAAI,CAAC,EAAE,cAAc,GAAG,KAAK,CAAA;IAC7B,KAAK,EAAE,UAAU,CAAA;IACjB,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAA;CACxB;AAED,QAAA,MAAM,IAAI,GAAI,uBAAuB,SAAS,mDAiB7C,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}

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

@@ -0,0 +1,63 @@
+import { type StandaloneLinkProps } from '../standalone-link';
+import type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+import type { ButtonProps } from '../button';
+import type { 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 };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/alert/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AAE7E,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACzE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAG5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAEpD,KAAK,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAA;AAE9E,UAAU,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE;;;;OAIG;IACH,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;OAIG;IACH,IAAI,EAAE,OAAO,GAAG,aAAa,CAAA;CAC7B;AAED,KAAK,UAAU,GACZ,CAAC,gBAAgB,GAAG;IACpB,0CAA0C;IAC1C,IAAI,EAAE,SAAS,CAAA;IACf,yEAAyE;IACzE,IAAI,CAAC,EAAE,cAAc,CAAA;CACpB,CAAC,GACF,CAAC,gBAAgB,GAAG;IACpB,yDAAyD;IACzD,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAA;IACvB,yEAAyE;IACzE,IAAI,CAAC,EAAE,cAAc,GAAG,KAAK,CAAA;CAC5B,CAAC,CAAA;AAEL,QAAA,MAAM,KAAK;+FAWR,UAAU;;CAkEZ,CAAA;AAID,QAAA,MAAM,YAAY;mBAAkB,iBAAiB;;CAEpD,CAAA;AAID,QAAA,MAAM,WAAW;mBAAkB,OAAO,CAAC,WAAW,EAAE,MAAM,CAAC;;CAE9D,CAAA;AAID,QAAA,MAAM,mBAAmB;mBAEtB,OAAO,CAAC,mBAAmB,EAAE,MAAM,CAAC;;CAEtC,CAAA;AAID,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,mBAAmB,EAAE,CAAA;AAChE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,CAAA"}

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,32 @@
+import type { 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", "highlight", "success", "warning", "critical"];
+type BadgeColor = (typeof BADGE_COLORS)[number];
+interface BaseBadgeProps {
+    size?: BadgeSize;
+    type?: BadgeType;
+    color?: BadgeColor;
+    className?: string;
+    iconColor?: string;
+}
+interface BadgeWithTextProps extends BaseBadgeProps {
+    text: string;
+    icon?: FlightIconName;
+    accessibleText?: string;
+}
+interface IconOnlyBadgeProps extends BaseBadgeProps {
+    text?: undefined;
+    icon: FlightIconName;
+    accessibleText: string;
+}
+type BadgeProps = IconOnlyBadgeProps | BadgeWithTextProps;
+declare const Badge: {
+    ({ icon, iconColor, text, size, type, color, className, accessibleText, }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { BadgeProps, BadgeColor, BadgeSize, BadgeType };
+export { Badge, BADGE_COLORS, BADGE_SIZES, BADGE_TYPES };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/badge/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAkB,MAAM,gBAAgB,CAAA;AAIpE,QAAA,MAAM,WAAW,uCAAwC,CAAA;AACzD,KAAK,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7C,QAAA,MAAM,WAAW,6CAA8C,CAAA;AAC/D,KAAK,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7C,QAAA,MAAM,YAAY,qEAMR,CAAA;AACV,KAAK,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAQ/C,UAAU,cAAc;IACvB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,UAAU,kBAAmB,SAAQ,cAAc;IAClD,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,UAAU,kBAAmB,SAAQ,cAAc;IAClD,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,IAAI,EAAE,cAAc,CAAA;IACpB,cAAc,EAAE,MAAM,CAAA;CACtB;AAED,KAAK,UAAU,GAAG,kBAAkB,GAAG,kBAAkB,CAAA;AAEzD,QAAA,MAAM,KAAK;+EASR,UAAU;;CAwBZ,CAAA;AAID,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/badge/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { FlightIconName, FlightIconSize } from '../flight-icon'\nimport { FlightIcon } from '../flight-icon'\nimport s from './style.module.scss'\n\nconst BADGE_SIZES = ['small', 'medium', 'large'] as const\ntype BadgeSize = (typeof BADGE_SIZES)[number]\n\nconst BADGE_TYPES = ['filled', 'inverted', 'outlined'] as const\ntype BadgeType = (typeof BADGE_TYPES)[number]\n\nconst BADGE_COLORS = [\n\t'neutral',\n\t'highlight',\n\t'success',\n\t'warning',\n\t'critical',\n] as const\ntype BadgeColor = (typeof BADGE_COLORS)[number]\n\nconst ICON_SIZE_MAP = {\n\tsmall: 12,\n\tmedium: 16,\n\tlarge: 16,\n} as const satisfies Record<'small' | 'medium' | 'large', FlightIconSize>\n\ninterface BaseBadgeProps {\n\tsize?: BadgeSize\n\ttype?: BadgeType\n\tcolor?: BadgeColor\n\tclassName?: string\n\ticonColor?: string\n}\n\ninterface BadgeWithTextProps extends BaseBadgeProps {\n\ttext: string\n\ticon?: FlightIconName\n\taccessibleText?: string\n}\n\ninterface IconOnlyBadgeProps extends BaseBadgeProps {\n\ttext?: undefined\n\ticon: FlightIconName\n\taccessibleText: string\n}\n\ntype BadgeProps = IconOnlyBadgeProps | BadgeWithTextProps\n\nconst Badge = ({\n\ticon,\n\ticonColor,\n\ttext,\n\tsize = 'medium',\n\ttype = 'filled',\n\tcolor = 'neutral',\n\tclassName,\n\taccessibleText,\n}: BadgeProps) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\n\t\t\t\ts.badge,\n\t\t\t\ts[`size-${size}`],\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>\n\t\t\t{icon && (\n\t\t\t\t<FlightIcon name={icon} color={iconColor} size={ICON_SIZE_MAP[size]} />\n\t\t\t)}\n\t\t\t{text ? (\n\t\t\t\t<div className={s.text} aria-hidden={!!accessibleText}>\n\t\t\t\t\t{text}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t\t{accessibleText ? (\n\t\t\t\t<span className=\"sr-only\">{accessibleText}</span>\n\t\t\t) : null}\n\t\t</div>\n\t)\n}\n\nBadge.displayName = 'Badge'\n\nexport type { BadgeProps, BadgeColor, BadgeSize, BadgeType }\nexport { Badge, BADGE_COLORS, BADGE_SIZES, BADGE_TYPES }\n"],"names":["BADGE_SIZES","BADGE_TYPES","BADGE_COLORS","ICON_SIZE_MAP","Badge","icon","iconColor","text","size","type","color","className","accessibleText","jsxs","classNames","s","jsx","FlightIcon"],"mappings":";;;;AAKA,MAAMA,IAAc,CAAC,SAAS,UAAU,OAAO,GAGzCC,IAAc,CAAC,UAAU,YAAY,UAAU,GAG/CC,IAAe;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAGMC,IAAgB;AAAA,EACrB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACR,GAwBMC,IAAQ,CAAC;AAAA,EACd,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,gBAAAC;AACD,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC;AAAA,MACVC,EAAE;AAAA,MACFA,EAAE,QAAQP,CAAI,EAAE;AAAA,MAChBO,EAAE,QAAQN,CAAI,EAAE;AAAA,MAChBM,EAAE,SAASL,CAAK,EAAE;AAAA,MAClBC;AAAA,IAAA;AAAA,IAGA,UAAA;AAAA,MAAAN,KACA,gBAAAW,EAACC,KAAW,MAAMZ,GAAM,OAAOC,GAAW,MAAMH,EAAcK,CAAI,EAAA,CAAG;AAAA,MAErED,IACA,gBAAAS,EAAC,OAAA,EAAI,WAAWD,EAAE,MAAM,eAAa,CAAC,CAACH,GACrC,UAAAL,EAAA,CACF,IACG;AAAA,MACHK,IACA,gBAAAI,EAAC,QAAA,EAAK,WAAU,WAAW,aAAe,IACvC;AAAA,IAAA;AAAA,EAAA;AAAA;AAKPZ,EAAM,cAAc;"}

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

@@ -0,0 +1,108 @@
+@use 'sass:map';
+
+$colors: ('highlight', 'success', 'warning', 'critical');
+$sizes: ('small', 'medium', 'large');
+$border-width: 1px;
+
+.badge {
+	display: inline-flex;
+	align-items: center;
+	max-width: 100%;
+	border: $border-width solid transparent;
+	border-radius: 5px;
+}
+
+.text {
+	flex: 1 0 0;
+	font-weight: var(--mds-typography-font-weight-medium);
+	font-family: var(--mds-typography-font-stack-text);
+}
+
+// SIZE
+
+// these values later may come from the design tokens
+$size-props: (
+	'small': (
+		'font-size': 0.8125rem,
+		// 13px
+		'gap': 0.25rem,
+		'height': 1.25rem,
+		'line-height': 1.2308,
+		// 16px
+		'padding-vertical': 0.125rem,
+		'padding-horizontal': 0.375rem,
+	),
+	'medium': (
+		'font-size': 0.8125rem,
+		// 13px
+		'gap': 0.25rem,
+		'height': 1.5rem,
+		'line-height': 1.2308,
+		// 16px
+		'padding-vertical': 0.25rem,
+		'padding-horizontal': 0.5rem,
+	),
+	'large': (
+		'font-size': 1rem,
+		// 16px
+		'gap': 0.375rem,
+		'height': 2rem,
+		'line-height': 1.5,
+		// 24px
+		'padding-vertical': 0.25rem,
+		'padding-horizontal': 0.5rem,
+	),
+);
+
+@each $size in $sizes {
+	.size-#{$size} {
+		gap: map.get($size-props, $size, 'gap');
+		min-height: map.get($size-props, $size, 'height');
+		padding: calc(#{map.get($size-props, $size, 'padding-vertical')} - #{$border-width}) calc(#{map.get($size-props, $size, 'padding-horizontal')} - #{$border-width});
+
+		.text {
+			font-size: map.get($size-props, $size, 'font-size');
+			line-height: map.get($size-props, $size, 'line-height');
+		}
+	}
+}
+
+// COLOR + TYPE COMBINATIONS
+
+.color-neutral {
+	&.type-filled {
+		color: var(--mds-color-foreground-primary);
+		background-color: var(--mds-color-surface-strong);
+	}
+
+	&.type-inverted {
+		color: var(--mds-color-foreground-high-contrast);
+		background-color: var(--mds-color-foreground-primary);
+	}
+
+	&.type-outlined {
+		color: var(--mds-color-foreground-primary);
+		background-color: transparent;
+		border-color: var(--mds-color-foreground-faint);
+	}
+}
+
+@each $color in $colors {
+	.color-#{$color} {
+		&.type-filled {
+			color: var(--mds-color-foreground-#{$color}-on-surface);
+			background-color: var(--mds-color-surface-#{$color});
+		}
+
+		&.type-inverted {
+			color: var(--mds-color-foreground-high-contrast);
+			background-color: var(--mds-color-foreground-#{$color});
+		}
+
+		&.type-outlined {
+			color: var(--mds-color-foreground-#{$color});
+			background-color: transparent;
+			border-color: currentColor;
+		}
+	}
+}