@hashicorp/mds-react 0.9.13 → 0.9.15

package/dist/components/form/toggle/form-toggle.module.scss

@@ -0,0 +1,151 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// FORM > TOGGLE
+//
+
+// "BASE" CONTROL
+
+.toggle {
+	position: relative;
+	display: inline-block; // we emulate the behaviour of a checkbox/radiobutton control
+	isolation: isolate; // used to create a new stacking context
+}
+
+// control (hidden)
+
+.control {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 1;
+	display: block;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	color: transparent;
+	background-color: transparent;
+	border: none;
+	outline: none;
+	cursor: pointer;
+	opacity: 0;
+	appearance: none;
+
+	&:disabled {
+		cursor: not-allowed;
+	}
+}
+
+// facade (visible)
+
+.facade {
+	position: relative;
+	display: block;
+	width: var(--mds-form-toggle-width);
+	height: var(--mds-form-toggle-height);
+	background-image: var(--mds-form-toggle-background-image-data-url);
+	background-repeat: no-repeat;
+	background-position: var(--mds-form-toggle-background-image-position-x) 50%;
+	background-size: var(--mds-form-toggle-background-image-size) var(--mds-form-toggle-background-image-size);
+	// notice: we want to share the border color between the "thumb" and the "track" so we use a local CSS prop for this
+	border: var(--mds-form-radio-border-width) solid var(--border-color);
+	border-radius: calc(var(--mds-form-toggle-height) / 2);
+
+	@media (prefers-reduced-motion: no-preference) {
+		transition-timing-function: var(--mds-form-toggle-transition-timing-function);
+		transition-duration: var(--mds-form-toggle-transition-duration);
+		transition-property: all;
+	}
+
+	// used for the "thumb"
+
+	&::after {
+		position: absolute;
+		top: calc(var(--mds-form-radio-border-width) * -1);
+		left: calc(var(--mds-form-radio-border-width) * -1);
+		width: var(--mds-form-toggle-thumb-size);
+		height: var(--mds-form-toggle-thumb-size);
+		background-color: var(--mds-form-control-base-surface-color-default);
+		border: var(--mds-form-radio-border-width) solid var(--border-color);
+		border-radius: 50%;
+		transform: translate3d(0, 0, 0);
+		content: '';
+
+		@media (prefers-reduced-motion: no-preference) {
+			transition-timing-function: var(--mds-form-toggle-transition-timing-function);
+			transition-duration: var(--mds-form-toggle-transition-duration);
+			transition-property: all;
+		}
+	}
+
+	// used for the focus
+
+	&::before {
+		// notice: to avoid too many nested calc() operation, we have decided to compute directly the values in Sass
+		$outline-width: 3px;
+		$outline-offset: 1px;
+		$shift: $outline-width + $outline-offset + 1px; // here 1px refers to "--mds-form-radio-border-width"
+		position: absolute;
+		top: -$shift;
+		right: -$shift;
+		bottom: -$shift;
+		left: -$shift;
+		margin: auto;
+		border-width: $outline-width;
+		border-radius: calc(var(--mds-form-toggle-height) / 2 + $outline-width + $outline-offset);
+		content: '';
+	}
+
+	// STATUS
+
+	// base (default)
+
+	:not(:checked) + & {
+		--border-color: var(--mds-form-control-base-border-color-default);
+		background-color: var(--mds-form-toggle-base-surface-color-default); // this is specific for "toggle", is not like the other controls!
+	}
+
+	:checked + & {
+		--border-color: var(--mds-form-control-checked-border-color-default);
+		background-color: var(--mds-form-control-checked-surface-color-default);
+
+		&::after {
+			$translation: calc(var(--mds-form-toggle-width) - var(--mds-form-toggle-thumb-size));
+			transform: translate3d($translation, 0, 0);
+		}
+	}
+
+	// hover
+
+	:hover:not(:checked) + & {
+		--border-color: var(--mds-form-control-base-border-color-hover);
+	}
+
+	:hover:checked + & {
+		--border-color: var(--mds-form-control-checked-border-color-hover);
+		background-color: var(--mds-form-control-checked-border-color-default);
+	}
+
+	// focus (same for all the states)
+
+	:focus + & {
+		&::before {
+			border-color: var(--mds-color-focus-action-external);
+			border-style: solid;
+		}
+	}
+
+	// DISABLED
+
+	:disabled:not(:checked) + &,
+	:disabled:checked + & {
+		--border-color: var(--mds-form-control-disabled-border-color);
+		background-color: var(--mds-form-control-disabled-surface-color);
+		background-image: var(--mds-form-toggle-background-image-data-url-disabled);
+	}
+}

package/dist/components/form/toggle/index.d.ts

@@ -0,0 +1,79 @@
+import type { ReactNode, HTMLProps, ComponentProps } from 'react';
+import { Fieldset } from '../fieldset';
+interface ToggleBaseProps {
+    id?: string;
+    /**
+     * Can be used to supply any props that the native `<input>` element supports (such as `value`, `placeholder`, in addition to events like `onChange` and `onBlur`)
+     */
+    field: HTMLProps<HTMLInputElement>;
+    toggleOnEnter?: boolean;
+    testingKey?: string;
+    error?: ReactNode;
+}
+declare const ToggleBase: {
+    ({ id, field, toggleOnEnter, testingKey, error, ...rest }: ToggleBaseProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ToggleFieldProps {
+    /**
+     * Applies an “invalid” appearance to the control but doesn’t modify its logical validity.
+     */
+    isInvalid?: boolean;
+    /**
+     * Appends a `Required` indicator next to the label text and sets the `required` attribute on the control when user input is required.
+     */
+    isRequired?: boolean;
+    /**
+     * Appends an `Optional` indicator next to the label text when user input is optional.
+     */
+    isOptional?: boolean;
+    /**
+     * Input control’s ID attribute.
+     *
+     * By default, the ID is automatically generated by the component. Use this argument to pass a custom ID.
+     */
+    id?: string;
+    /**
+     * Container that renders its content inside the `<label>` element. The content can be a simple string or a `ReactNode`, in which case it inherits the text style.
+     *
+     * The `for` attribute of the label is automatically generated using the `controlId` value of the control.
+     */
+    label?: ReactNode;
+    /**
+     * Container that renders its content inside the "helper text" block. The content can be a simple string or a `ReactNode`, in which case it inherits the text style.
+     *
+     * The `id` attribute of the message is automatically generated using the `controlId` value of the control.
+     */
+    helperText?: ReactNode;
+    /**
+     * Container that renders its content inside the "error" block. The content can be a simple string or a `ReactNode`, in which case it inherits the text style.
+     *
+     * The `id` attribute of the error message is automatically generated using the `controlId` value of the control.
+     */
+    error?: ReactNode;
+    /**
+     * Can be used to supply any props that the native `<input>` element supports (such as `value`, `placeholder`, in addition to events like `onChange` and `onBlur`)
+     */
+    field: HTMLProps<HTMLInputElement>;
+    className?: string;
+    testingKey?: string;
+}
+declare const ToggleField: {
+    ({ isInvalid, isRequired, isOptional, id, label, helperText, error, field, className, testingKey, ...rest }: ToggleFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ToggleGroupProps extends ComponentProps<typeof Fieldset> {
+    children: ReactNode;
+}
+declare const ToggleGroup: {
+    Root: {
+        ({ layout, legend, isOptional, isRequired, children, }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Field: {
+        (props: ToggleFieldProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export { ToggleBase, ToggleField, ToggleGroup };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/toggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/toggle/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEjE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAGtC,UAAU,eAAe;IACxB,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAClC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,QAAA,MAAM,UAAU;+DAOb,eAAe;;CA0BjB,CAAA;AAID,UAAU,gBAAgB;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAA;IAEtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,WAAW;iHAYd,gBAAgB;;CAsBlB,CAAA;AAID,UAAU,gBAAiB,SAAQ,cAAc,CAAC,OAAO,QAAQ,CAAC;IACjE,QAAQ,EAAE,SAAS,CAAA;CACnB;AA6BD,QAAA,MAAM,WAAW;;gEArBd,gBAAgB;;;;gBAec,gBAAgB;;;CAShD,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/hds/wrappers/tooltip.d.ts

@@ -0,0 +1,15 @@
+import { type TippyProps } from '@tippyjs/react';
+import { type Plugin } from 'tippy.js';
+import type { ReactElement } from 'react';
+import 'tippy.js/dist/svg-arrow.css';
+export interface TooltipProps {
+    options?: TippyProps;
+    children: TippyProps['children'];
+    text: string | ReactElement;
+}
+export interface HideOnEsc extends Plugin {
+    name: 'hideOnEsc';
+    defaultValue: true;
+}
+export declare const Tooltip: ({ options, children, text }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/hds/wrappers/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/hds/wrappers/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAgB,KAAK,MAAM,EAAE,MAAM,UAAU,CAAA;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,6BAA6B,CAAA;AAEpC,MAAM,WAAW,YAAY;IAC5B,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAA;IAChC,IAAI,EAAE,MAAM,GAAG,YAAY,CAAA;CAC3B;AAED,MAAM,WAAW,SAAU,SAAQ,MAAM;IACxC,IAAI,EAAE,WAAW,CAAA;IACjB,YAAY,EAAE,IAAI,CAAA;CAClB;AAuBD,eAAO,MAAM,OAAO,GAAI,6BAAkC,YAAY,4CA2BrE,CAAA"}

package/dist/components/icon-tile/index.d.ts

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

package/dist/components/icon-tile/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon-tile/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAG3C,KAAK,SAAS,GAAG;IAChB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EACH,SAAS,GACT,UAAU,GACV,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,WAAW,GACX,SAAS,GACT,OAAO,GACP,eAAe,GACf,UAAU,CAAA;CACb,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,CAAA;AAE/D,KAAK,QAAQ,GAAG;IACf,IAAI,EACD,KAAK,GACL,UAAU,GACV,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,WAAW,GACX,SAAS,GACT,OAAO,GACP,eAAe,GACf,UAAU,CAAA;IACb,IAAI,CAAC,EAAE,KAAK,CAAA;CACZ,CAAA;AAED,KAAK,QAAQ,GAAG;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,KAAK,CAAA;CACZ,CAAA;AAED,KAAK,aAAa,GAAG,SAAS,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAA;AAQtD,QAAA,MAAM,QAAQ;0DAOX,aAAa;;CAkCf,CAAA;AAID,YAAY,EAAE,aAAa,EAAE,CAAA;AAC7B,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/icon-tile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/icon-tile/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { FlightIconSize } from '../flight-icon'\nimport { FlightIcon } from '../flight-icon'\nimport type { HTMLAttributes } from 'react'\nimport s from './style.module.scss'\n\ntype BaseProps = {\n\tsize: 'small' | 'medium' | 'large'\n\ticonSecondary?: string\n\tcolor?:\n\t\t| 'neutral'\n\t\t| 'boundary'\n\t\t| 'consul'\n\t\t| 'nomad'\n\t\t| 'packer'\n\t\t| 'terraform'\n\t\t| 'vagrant'\n\t\t| 'vault'\n\t\t| 'vault-secrets'\n\t\t| 'waypoint'\n} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>\n\ntype WithLogo = {\n\tlogo:\n\t\t| 'hcp'\n\t\t| 'boundary'\n\t\t| 'consul'\n\t\t| 'nomad'\n\t\t| 'packer'\n\t\t| 'terraform'\n\t\t| 'vagrant'\n\t\t| 'vault'\n\t\t| 'vault-secrets'\n\t\t| 'waypoint'\n\ticon?: never\n}\n\ntype WithIcon = {\n\ticon: string\n\tlogo?: never\n}\n\ntype IconTileProps = BaseProps & (WithLogo | WithIcon)\n\nconst EXTRA_ICON_SIZE_MAP = {\n\tsmall: 12,\n\tmedium: 16,\n\tlarge: 16,\n} as const satisfies Record<'small' | 'medium' | 'large', FlightIconSize>\n\nconst IconTile = ({\n\tsize = 'medium',\n\tlogo,\n\ticon,\n\ticonSecondary,\n\tcolor = 'neutral',\n\t...rest\n}: IconTileProps) => {\n\tconst iconName = logo ? `${logo}-color` : icon\n\n\tif (iconName) {\n\t\tconst iconSize = size === 'small' ? 16 : 24\n\t\tconst entity = logo ? 'logo' : 'icon'\n\t\tconst colorUse = logo ? logo : color\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts['icon-tile'],\n\t\t\t\t\ts[`type-${entity}`],\n\t\t\t\t\ts[`size-${size}`],\n\t\t\t\t\ts[`color-${colorUse}`],\n\t\t\t\t)}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<div className={logo ? s.logo : s.icon}>\n\t\t\t\t\t<FlightIcon name={iconName} size={iconSize} stretched />\n\t\t\t\t</div>\n\t\t\t\t{iconSecondary && (\n\t\t\t\t\t<div className={s.extra}>\n\t\t\t\t\t\t<FlightIcon\n\t\t\t\t\t\t\tname={iconSecondary}\n\t\t\t\t\t\t\tsize={EXTRA_ICON_SIZE_MAP[size]}\n\t\t\t\t\t\t\tcolor=\"var(--mds-color-foreground-strong)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t)\n\t}\n}\n\nIconTile.displayName = 'IconTile'\n\nexport type { IconTileProps }\nexport { IconTile }\n"],"names":["EXTRA_ICON_SIZE_MAP","IconTile","size","logo","icon","iconSecondary","color","rest","iconName","iconSize","entity","colorUse","jsxs","classNames","s","jsx","FlightIcon"],"mappings":";;;;AA4CA,MAAMA,IAAsB;AAAA,EAC3B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACR,GAEMC,IAAW,CAAC;AAAA,EACjB,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACJ,MAAqB;AACpB,QAAMC,IAAWL,IAAO,GAAGA,CAAI,WAAWC;AAE1C,MAAII,GAAU;AACb,UAAMC,IAAWP,MAAS,UAAU,KAAK,IACnCQ,IAASP,IAAO,SAAS,QACzBQ,IAAWR,KAAcG;AAE/B,WACC,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAWC;AAAA,UACVC,EAAE,WAAW;AAAA,UACbA,EAAE,QAAQJ,CAAM,EAAE;AAAA,UAClBI,EAAE,QAAQZ,CAAI,EAAE;AAAA,UAChBY,EAAE,SAASH,CAAQ,EAAE;AAAA,QAAA;AAAA,QAEtB,eAAY;AAAA,QACX,GAAGJ;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAQ,EAAC,OAAA,EAAI,WAAWZ,IAAOW,EAAE,OAAOA,EAAE,MACjC,UAAA,gBAAAC,EAACC,GAAA,EAAW,MAAMR,GAAU,MAAMC,GAAU,WAAS,IAAC,GACvD;AAAA,UACCJ,KACA,gBAAAU,EAAC,OAAA,EAAI,WAAWD,EAAE,OACjB,UAAA,gBAAAC;AAAA,YAACC;AAAA,YAAA;AAAA,cACA,MAAMX;AAAA,cACN,MAAML,EAAoBE,CAAI;AAAA,cAC9B,OAAM;AAAA,YAAA;AAAA,UAAA,EACP,CACD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIJ;AACD;AAEAD,EAAS,cAAc;"}

package/dist/components/icon-tile/style.module.scss

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

package/dist/components/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}

package/dist/components/index.js

@@ -0,0 +1,124 @@
+import { Accordion as e } from "./accordion/index.js";
+import { BADGE_COLORS as p, BADGE_SIZES as x, BADGE_TYPES as m, Badge as f } from "./badge/index.js";
+import { BadgeCount as n } from "./badge-count/index.js";
+import { Alert as a, AlertActions as d, AlertButton as S, AlertStandaloneLink as T } from "./alert/index.js";
+import { Breadcrumbs as c } from "./breadcrumbs/index.js";
+import { BUTTON_COLORS as C, BUTTON_ICON_POSITIONS as O, BUTTON_SIZES as u, Button as B } from "./button/index.js";
+import { Card as s, CardContent as _ } from "./card/index.js";
+import { CodeBlock as L } from "./code-block/index.js";
+import { DisclosurePrimitive as F } from "./disclosure-primitive/index.js";
+import { useDisclosurePrimitive as k } from "./disclosure-primitive/use-disclosure-primitive.js";
+import { Dropdown as R } from "./dropdown/index.js";
+import { FLIGHT_ICON_SIZES as h, FlightIcon as P } from "./flight-icon/index.js";
+import { CheckboxBase as Z, CheckboxField as v, CheckboxGroup as K } from "./form/checkbox/index.js";
+import { Error as U } from "./form/error/index.js";
+import { Field as w } from "./form/field/index.js";
+import { Fieldset as z } from "./form/fieldset/index.js";
+import { FileInputBase as W, FileInputField as Y } from "./form/file-input/index.js";
+import { HelperText as q } from "./form/helper-text/index.js";
+import { Indicator as Q } from "./form/indicator/index.js";
+import { Label as oo } from "./form/label/index.js";
+import { Legend as eo } from "./form/legend/index.js";
+import { RadioBase as po, RadioField as xo, RadioGroup as mo } from "./form/radio/index.js";
+import { RadioCard as io } from "./form/radio-card/index.js";
+import { SelectField as lo } from "./form/select/index.js";
+import { SuperSelectField as So } from "./form/super-select/index.js";
+import { TextInput as Io, TextInputBase as co } from "./form/text-input/index.js";
+import { TextAreaField as Co } from "./form/textarea/index.js";
+import { ToggleBase as uo, ToggleField as Bo, ToggleGroup as go } from "./form/toggle/index.js";
+import { IconTile as _o } from "./icon-tile/index.js";
+import { InlineLink as Lo } from "./inline-link/index.js";
+import { MDSButton as Fo } from "./legacy-button/index.js";
+import { ModalProvider as ko } from "./modal/index.js";
+import { Separator as Ro } from "./separator/index.js";
+import { Skeleton as ho } from "./skeleton/index.js";
+import { SkeletonForm as Ho } from "./skeleton/skeleton-form/index.js";
+import { STANDALONE_LINK_COLORS as vo, STANDALONE_LINK_ICON_POSITIONS as Ko, STANDALONE_LINK_SIZES as Mo, StandaloneLink as Uo } from "./standalone-link/index.js";
+import { Table as wo } from "./table/index.js";
+import { getDensity as zo, getHorizontalAlignment as Vo, getScope as Wo, getVerticalAlignment as Yo } from "./table/utils.js";
+import { Tabs as qo } from "./tabs/index.js";
+import { useTabsContext as Qo } from "./tabs/use-tabs-context.js";
+import { TEXT_COLORS as or, TEXT_WEIGHTS as rr, Text as er } from "./text/index.js";
+import { BarChart as pr } from "./visualizations/bar-chart/index.js";
+import { DonutChart as mr } from "./visualizations/donut-chart/index.js";
+import { AccordionContent as ir, AccordionItem as nr, AccordionToggle as lr } from "./accordion/item/index.js";
+import { RadioCardGroup as dr } from "./form/radio-card/group.js";
+import { useModal as Tr } from "./modal/use-modal.js";
+export {
+  e as Accordion,
+  ir as AccordionContent,
+  nr as AccordionItem,
+  lr as AccordionToggle,
+  a as Alert,
+  d as AlertActions,
+  S as AlertButton,
+  T as AlertStandaloneLink,
+  p as BADGE_COLORS,
+  x as BADGE_SIZES,
+  m as BADGE_TYPES,
+  C as BUTTON_COLORS,
+  O as BUTTON_ICON_POSITIONS,
+  u as BUTTON_SIZES,
+  f as Badge,
+  n as BadgeCount,
+  pr as BarChart,
+  c as Breadcrumbs,
+  B as Button,
+  s as Card,
+  _ as CardContent,
+  Z as CheckboxBase,
+  v as CheckboxField,
+  K as CheckboxGroup,
+  L as CodeBlock,
+  F as DisclosurePrimitive,
+  mr as DonutChart,
+  R as Dropdown,
+  U as Error,
+  h as FLIGHT_ICON_SIZES,
+  w as Field,
+  z as Fieldset,
+  W as FileInputBase,
+  Y as FileInputField,
+  P as FlightIcon,
+  q as HelperText,
+  _o as IconTile,
+  Q as Indicator,
+  Lo as InlineLink,
+  oo as Label,
+  eo as Legend,
+  Fo as MDSButton,
+  ko as ModalProvider,
+  po as RadioBase,
+  io as RadioCard,
+  dr as RadioCardGroup,
+  xo as RadioField,
+  mo as RadioGroup,
+  vo as STANDALONE_LINK_COLORS,
+  Ko as STANDALONE_LINK_ICON_POSITIONS,
+  Mo as STANDALONE_LINK_SIZES,
+  lo as SelectField,
+  Ro as Separator,
+  ho as Skeleton,
+  Ho as SkeletonForm,
+  Uo as StandaloneLink,
+  So as SuperSelectField,
+  or as TEXT_COLORS,
+  rr as TEXT_WEIGHTS,
+  wo as Table,
+  qo as Tabs,
+  er as Text,
+  Co as TextAreaField,
+  Io as TextInput,
+  co as TextInputBase,
+  uo as ToggleBase,
+  Bo as ToggleField,
+  go as ToggleGroup,
+  zo as getDensity,
+  Vo as getHorizontalAlignment,
+  Wo as getScope,
+  Yo as getVerticalAlignment,
+  k as useDisclosurePrimitive,
+  Tr as useModal,
+  Qo as useTabsContext
+};
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/inline-link/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAGpD,UAAU,eAAe;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;IACrC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;CACf;AAED,QAAA,MAAM,UAAU;+EAQb,eAAe;;CAiBjB,CAAA;AAID,YAAY,EAAE,eAAe,EAAE,CAAA;AAC/B,OAAO,EAAE,UAAU,EAAE,CAAA"}