@hashicorp/mds-react 0.9.13 → 0.9.15

package/package.json

@@ -1,77 +1,118 @@
 {
-  "name": "@hashicorp/mds-react",
-  "version": "0.9.13",
-  "description": "Materia Design System React components",
-  "author": "HashiCorp",
-  "license": "MPL-2.0",
-  "type": "module",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/hashicorp/web.git",
-    "directory": "packages/mds-react"
-  },
-  "homepage": "https://github.com/hashicorp/web/tree/main/packages/mds-react#readme",
-  "bugs": {
-    "url": "https://github.com/hashicorp/web/issues"
-  },
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "engines": {
-    "node": ">=18.17"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "module": "./index.js",
-  "types": "./index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./index.d.ts",
-      "import": "./index.js"
-    },
-    "./components": {
-      "types": "./components/index.d.ts",
-      "import": "./components/index.js"
-    },
-    "./patterns": {
-      "types": "./patterns/index.d.ts",
-      "import": "./patterns/index.js"
-    },
-    "./utils": {
-      "types": "./utils/index.d.ts",
-      "import": "./utils/index.js"
-    },
-    "./style.css": "./style.css",
-    "./package.json": "./package.json",
-    "./*": null
-  },
-  "typesVersions": {
-    "*": {
-      "components": [
-        "components/index.d.ts"
-      ],
-      "patterns": [
-        "patterns/index.d.ts"
-      ],
-      "utils": [
-        "utils/index.d.ts"
-      ]
-    }
-  },
-  "dependencies": {
-    "@hashicorp/flight-icons": "^3.7.0",
-    "@nivo/pie": "^0.87.0",
-    "@react-spring/web": "^9.7.3",
-    "classnames": "^2.3.2",
-    "react-focus-lock": "^2.13.6",
-    "react-wrap-balancer": "^0.4.0",
-    "use-resize-observer": "^9.1.0"
-  },
-  "peerDependencies": {
-    "@tippyjs/react": "^4.2.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tippy.js": "^6.3.1"
-  }
+	"name": "@hashicorp/mds-react",
+	"version": "0.9.15",
+	"description": "Materia Design System React components",
+	"author": "HashiCorp",
+	"license": "MPL-2.0",
+	"type": "module",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/hashicorp/web.git",
+		"directory": "packages/mds-react"
+	},
+	"homepage": "https://github.com/hashicorp/web/tree/main/packages/mds-react#readme",
+	"bugs": {
+		"url": "https://github.com/hashicorp/web/issues"
+	},
+	"sideEffects": [
+		"**/*.css"
+	],
+	"files": [
+		"dist",
+		"README.md",
+		"LICENSE",
+		"package.json"
+	],
+	"module": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js"
+		},
+		"./components": {
+			"types": "./dist/components/index.d.ts",
+			"import": "./dist/components/index.js"
+		},
+		"./patterns": {
+			"types": "./dist/patterns/index.d.ts",
+			"import": "./dist/patterns/index.js"
+		},
+		"./utils": {
+			"types": "./dist/utils/index.d.ts",
+			"import": "./dist/utils/index.js"
+		},
+		"./style.css": "./dist/style.css",
+		"./package.json": "./package.json",
+		"./*": null
+	},
+	"typesVersions": {
+		"*": {
+			"components": [
+				"dist/components/index.d.ts"
+			],
+			"patterns": [
+				"dist/patterns/index.d.ts"
+			],
+			"utils": [
+				"dist/utils/index.d.ts"
+			]
+		}
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"clean": "rimraf dist",
+		"dev:js": "vite build --watch",
+		"dev:types": "tsc -p tsconfig.build.json --watch",
+		"dev:assets": "cpx \"src/**/*.{css,scss,svg,png,jpg,jpeg,woff,woff2}\" dist -w",
+		"dev": "npm-run-all -p dev:js dev:types dev:assets",
+		"build:js": "vite build",
+		"build:types": "tsc -p tsconfig.build.json",
+		"build:assets": "cpx \"src/**/*.{css,scss,svg,png,jpg,jpeg,woff,woff2}\" dist",
+		"build": "npm run clean && npm-run-all -s build:js build:types build:assets",
+		"typecheck": "tsc --noEmit",
+		"lint": "eslint",
+		"test": "vitest run",
+		"test:watch": "vitest watch",
+		"release": "npm run build && cd dist && npm publish --access public",
+		"prebuild-storybook": "cd ../mds-tokens && npm run build && cd ../mds-react",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "npm run prebuild-storybook && storybook build",
+		"publish": "npm publish --access public"
+	},
+	"dependencies": {
+		"@hashicorp/flight-icons": "^3.7.0",
+		"@nivo/pie": "^0.99.0",
+		"@react-spring/web": "^10.0.3",
+		"@usefy/use-resize-observer": "^0.2.6",
+		"classnames": "^2.3.2",
+		"react-focus-lock": "^2.13.6",
+		"react-wrap-balancer": "^1.1.1",
+		"use-resize-observer": "^9.1.0"
+	},
+	"peerDependencies": {
+		"@tippyjs/react": "^4.2.6",
+		"react": "^18.2.0 || ^19.0",
+		"react-dom": "^18.2.0 || ^19.0",
+		"tippy.js": "^6.3.1"
+	},
+	"devDependencies": {
+		"@hashicorp/mds-postcss-config": "*",
+		"@storybook/addon-docs": "9.1.10",
+		"@storybook/addon-themes": "^9.1.10",
+		"@storybook/react-vite": "9.1.10",
+		"@testing-library/jest-dom": "^6.4.2",
+		"@vitejs/plugin-react": "^4.2.1",
+		"npm-run-all": "^4.1.5",
+		"rimraf": "^5.0.0",
+		"storybook": "9.1.10",
+		"typescript": "^5.4.5",
+		"vite-plugin-dts": "^4.5.4",
+		"vitest": "^1.4.0"
+	},
+	"engines": {
+		"node": ">=20.x"
+	}
 }

package/components/accordion/index.d.ts

@@ -1,14 +0,0 @@
-import { 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';

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

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

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

@@ -1,24 +0,0 @@
-import { 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 };

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

@@ -1 +0,0 @@
-{"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/components/accordion/style.module.scss

@@ -1,110 +0,0 @@
-//
-// 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/components/alert/alert.module.scss

@@ -1,229 +0,0 @@
-//
-// 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/components/alert/icon.d.ts

@@ -1,9 +0,0 @@
-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/components/alert/index.d.ts

@@ -1,62 +0,0 @@
-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/components/alert/index.js.map

@@ -1 +0,0 @@
-{"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;"}