@hashicorp/mds-react 0.9.13 → 0.9.15

package/components/badge/index.d.ts

@@ -1,31 +0,0 @@
-import { FlightIconName } from '../flight-icon';
-declare const BADGE_SIZES: readonly ["small", "medium", "large"];
-type BadgeSize = (typeof BADGE_SIZES)[number];
-declare const BADGE_TYPES: readonly ["filled", "inverted", "outlined"];
-type BadgeType = (typeof BADGE_TYPES)[number];
-declare const BADGE_COLORS: readonly ["neutral", "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 };

package/components/badge/index.js.map

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

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

package/components/badge-count/index.d.ts

@@ -1,15 +0,0 @@
-import { HTMLAttributes } from 'react';
-interface BadgeCountProps extends HTMLAttributes<HTMLDivElement> {
-    size?: 'small' | 'medium' | 'large';
-    type?: 'filled' | 'inverted' | 'outlined';
-    /**
-     * Text value that renders in the Badge Count.
-     */
-    text: string;
-}
-declare const BadgeCount: {
-    ({ text, size, type, color, className, ...rest }: BadgeCountProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export type { BadgeCountProps };
-export { BadgeCount };

package/components/badge-count/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/badge-count/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { HTMLAttributes } from 'react'\nimport s from './style.module.scss'\n\ninterface BadgeCountProps extends HTMLAttributes<HTMLDivElement> {\n\tsize?: 'small' | 'medium' | 'large'\n\ttype?: 'filled' | 'inverted' | 'outlined'\n\t/**\n\t * Text value that renders in the Badge Count.\n\t */\n\ttext: string\n}\n\nconst BadgeCount = ({\n\ttext,\n\tsize = 'medium',\n\ttype = 'filled',\n\tcolor = 'neutral',\n\tclassName,\n\t...rest\n}: BadgeCountProps) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\n\t\t\t\ts['badge-count'],\n\t\t\t\ts[`size-${size}`],\n\t\t\t\ts[`type-${type}`],\n\t\t\t\ts[`color-neutral`],\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{text}\n\t\t</div>\n\t)\n}\n\nBadgeCount.displayName = 'BadgeCount'\n\nexport type { BadgeCountProps }\nexport { BadgeCount }\n"],"names":["BadgeCount","text","size","type","color","className","rest","jsx","classNames","s"],"mappings":";;;AAaA,MAAMA,IAAa,CAAC;AAAA,EACnB,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC;AAAA,MACVC,EAAE,aAAa;AAAA,MACfA,EAAE,QAAQP,CAAI,EAAE;AAAA,MAChBO,EAAE,QAAQN,CAAI,EAAE;AAAA,MAChBM,EAAE,eAAe;AAAA,MACjBJ;AAAA,IAAA;AAAA,IAEA,GAAGC;AAAA,IAEH,UAAAL;AAAA,EAAA;AAAA;AAKJD,EAAW,cAAc;"}

package/components/badge-count/style.module.scss

@@ -1,91 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-//
-// BADGE-COUNT COMPONENT
-//
-
-@use 'sass:math';
-@use 'sass:map';
-
-$sizes: ('small', 'medium', 'large');
-$border-width: 1px;
-
-.badge-count {
-	display: inline-flex;
-	align-items: center;
-	max-width: 100%;
-	font-weight: var(--mds-typography-font-weight-medium);
-	font-family: var(--mds-typography-font-stack-text);
-	border: $border-width solid transparent;
-}
-
-// SIZE
-
-// these values later may come from the design tokens
-$size-props: (
-	'small': (
-		'font-size': 0.8125rem,
-		// 13px
-		'height': 1.25rem,
-		'line-height': 1.2308,
-		// 16px
-		'padding-vertical': 0.125rem,
-		'padding-horizontal': 0.5rem,
-	),
-	'medium': (
-		'font-size': 0.8125rem,
-		// 13px
-		'height': 1.5rem,
-		'line-height': 1.2308,
-		// 16px
-		'padding-vertical': 0.25rem,
-		'padding-horizontal': 0.75rem,
-	),
-	'large': (
-		'font-size': 1rem,
-		// 16px
-		'height': 2rem,
-		'line-height': 1.5,
-		// 24px
-		'padding-vertical': 0.25rem,
-		'padding-horizontal': 0.875rem,
-	),
-);
-
-@each $size in $sizes {
-	.size-#{$size} {
-		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}
-			);
-		font-size: map.get($size-props, $size, 'font-size');
-		line-height: map.get($size-props, $size, 'line-height');
-		border-radius: math.div(map.get($size-props, $size, 'height'), 2);
-	}
-}
-
-// 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-faint);
-	}
-
-	&.type-outlined {
-		color: var(--mds-color-foreground-primary);
-		background-color: transparent;
-		border-color: var(--mds-color-foreground-faint);
-	}
-}

package/components/breadcrumbs/index.d.ts

@@ -1,7 +0,0 @@
-import { BreadcrumbProps, BreadcrumbTruncationProps } from './types';
-declare const Breadcrumbs: {
-    Root: ({ itemsCanWrap, ariaLabel, children, className, ...rest }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
-    Item: ({ maxWidth, current, icon, text, url, ...rest }: import('./types').BreadcrumbItemProps) => import("react/jsx-runtime").JSX.Element;
-    Truncation: ({ ariaLabel, children, ...rest }: BreadcrumbTruncationProps) => import("react/jsx-runtime").JSX.Element;
-};
-export { Breadcrumbs };

package/components/breadcrumbs/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/breadcrumbs/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport * as MenuPrimitive from '../menu-primitive'\nimport { Item } from './item'\nimport { TruncationButton } from './truncation-button'\nimport type { BreadcrumbProps, BreadcrumbTruncationProps } from './types'\nimport s from './style.module.scss'\n\nconst Root = ({\n\titemsCanWrap = true,\n\tariaLabel = 'breadcrumbs',\n\tchildren,\n\tclassName,\n\t...rest\n}: BreadcrumbProps) => {\n\treturn (\n\t\t<nav\n\t\t\tclassName={classNames(\n\t\t\t\ts.breadcrumbs,\n\t\t\t\t{\n\t\t\t\t\t[s['items-can-wrap']]: itemsCanWrap,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\taria-label={ariaLabel}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<ol className={s.list}>{children}</ol>\n\t\t</nav>\n\t)\n}\n\nconst Truncation = ({\n\tariaLabel,\n\tchildren,\n\t...rest\n}: BreadcrumbTruncationProps) => {\n\treturn (\n\t\t<li className={classNames(s.item, s.truncation)} {...rest}>\n\t\t\t<MenuPrimitive.Provider>\n\t\t\t\t<MenuPrimitive.Toggle>\n\t\t\t\t\t<TruncationButton />\n\t\t\t\t</MenuPrimitive.Toggle>\n\t\t\t\t<MenuPrimitive.Content>\n\t\t\t\t\t<div className={s['truncation-content']}>\n\t\t\t\t\t\t<ol className={s.sublist}>{children}</ol>\n\t\t\t\t\t</div>\n\t\t\t\t</MenuPrimitive.Content>\n\t\t\t</MenuPrimitive.Provider>\n\t\t</li>\n\t)\n}\n\nconst Breadcrumbs = { Root, Item, Truncation }\n\nexport { Breadcrumbs }\n"],"names":["Root","itemsCanWrap","ariaLabel","children","className","rest","jsx","classNames","s","Truncation","jsxs","MenuPrimitive.Provider","MenuPrimitive.Toggle","TruncationButton","MenuPrimitive.Content","Breadcrumbs","Item"],"mappings":";;;;;;AAOA,MAAMA,IAAO,CAAC;AAAA,EACb,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC;AAAA,MACVC,EAAE;AAAA,MACF;AAAA,QACC,CAACA,EAAE,gBAAgB,CAAC,GAAGP;AAAA,MAAA;AAAA,MAExBG;AAAA,IAAA;AAAA,IAED,cAAYF;AAAA,IACX,GAAGG;AAAA,IAEJ,UAAA,gBAAAC,EAAC,MAAA,EAAG,WAAWE,EAAE,MAAO,UAAAL,EAAA,CAAS;AAAA,EAAA;AAAA,GAK9BM,IAAa,CAAC;AAAA,EACnB,WAAAP;AAAA,EACA,UAAAC;AAAA,EACA,GAAGE;AACJ,MAEE,gBAAAC,EAAC,MAAA,EAAG,WAAWC,EAAWC,EAAE,MAAMA,EAAE,UAAU,GAAI,GAAGH,GACpD,UAAA,gBAAAK,EAACC,GAAA,EACA,UAAA;AAAA,EAAA,gBAAAL,EAACM,GAAA,EACA,UAAA,gBAAAN,EAACO,KAAiB,GACnB;AAAA,oBACCC,GAAA,EACA,UAAA,gBAAAR,EAAC,SAAI,WAAWE,EAAE,oBAAoB,GACrC,4BAAC,MAAA,EAAG,WAAWA,EAAE,SAAU,UAAAL,GAAS,GACrC,EAAA,CACD;AAAA,EAAA,CACD,EAAA,CACD,GAIIY,IAAc,EAAE,MAAAf,GAAM,MAAAgB,GAAM,YAAAP,EAAA;"}

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

@@ -1,2 +0,0 @@
-import { BreadcrumbItemProps } from '../types';
-export declare const Item: ({ maxWidth, current, icon, text, url, ...rest }: BreadcrumbItemProps) => import("react/jsx-runtime").JSX.Element;

package/components/breadcrumbs/style.module.scss

@@ -1,183 +0,0 @@
-@use 'styles/mixins/focus-ring' as *;
-
-$item-height: 28px;
-$item-border-radius: 5px;
-$item-visual-horizontal-padding: 4px;
-
-// MAIN CONTAINER (NAV)
-.breadcrumbs {
-	position: relative;
-}
-
-// LIST (OL)
-
-.list {
-	display: flex;
-	margin: 0;
-	padding: 0;
-	list-style: none;
-
-	.items-can-wrap & {
-		flex-wrap: wrap;
-	}
-}
-
-.sublist {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-}
-
-// ITEM (LI)
-
-.item {
-	position: relative;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	min-width: 0;
-
-	.list > & {
-		&:not(:last-child)::after {
-			padding: 0 8px;
-			color: var(--mds-color-palette-neutral-300);
-			content: '/';
-		}
-	}
-
-	.sublist > & + & {
-		margin-top: 4px;
-	}
-}
-
-.truncation {
-	flex: none; // needed to avoid that the "flex" parent collapses the truncation element (it happens with very long strings and no-wrapping)
-}
-
-// LINK (A)
-
-.link {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	min-width: 0;
-	margin: 0 (-$item-visual-horizontal-padding); // we use a negative horizontal margin to counter-balance the horizonal padding (used to shift the focus from the content)
-	padding: 0 $item-visual-horizontal-padding;
-	color: var(--mds-color-foreground-faint);
-	border-radius: $item-border-radius;
-	// notice: the text decoration is applied directly to the "text" container because of a bug in Safari (see https://github.com/hashicorp/design-system-components/issues/159)
-	text-decoration-color: transparent;
-
-	&:hover {
-		color: var(--mds-color-palette-neutral-600);
-
-		& > .text {
-			text-decoration-color: currentColor;
-		}
-	}
-
-	// we apply the focus directly to the element, without using a pseudo-element
-	@include hds-focus-ring-basic();
-
-	&:active {
-		& > .text {
-			text-decoration-color: currentColor;
-		}
-	}
-}
-
-// CURRENT
-
-.current {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	min-width: 0;
-	margin: 0 (-$item-visual-horizontal-padding); // we use a negative horizontal margin to counter-balance the horizonal padding (used to shift the focus from the content)
-	padding: 0 $item-visual-horizontal-padding;
-	color: var(--mds-color-foreground-strong);
-}
-
-// SUB-ELEMENTS
-
-.icon {
-	flex: none;
-	width: 13px;
-	height: 13px;
-	margin-right: 6px;
-
-	& svg {
-		display: block;
-		width: 100%;
-		height: 100%;
-	}
-}
-
-.text {
-	// we use the extra vertical padding to force the height of the parent item to be exactly $item-height
-	padding: calc((#{$item-height} - 1rem) / 2) 0;
-	overflow: hidden;
-	font-size: 0.8125rem; // 13px
-	font-family: var(--mds-typography-font-stack-text);
-	line-height: 1rem; // 16px
-	white-space: nowrap;
-	text-decoration: underline;
-	text-overflow: ellipsis;
-	text-decoration-color: transparent;
-
-	.sublist & {
-		white-space: normal;
-	}
-}
-
-// TRUNCATION
-
-.truncation-button {
-	display: flex;
-	flex: none;
-	align-items: center;
-	justify-content: center;
-	width: $item-height;
-	height: $item-height;
-	margin: 0 (-$item-visual-horizontal-padding); // the horizontal negative margin applied here is for visual balance of the spacing between items
-	padding: 0;
-	color: var(--mds-color-foreground-faint);
-	background-color: transparent;
-	border: 1px solid transparent; // We need this to be transparent for a11y
-	border-radius: $item-border-radius;
-	outline: none; // TODO check with @melanie
-	cursor: pointer;
-
-	&:hover {
-		color: var(--mds-color-foreground-faint);
-		border-color: var(--mds-color-border-strong);
-	}
-
-	// we apply the focus directly to the element, without using a pseudo-element
-	@include hds-focus-ring-basic();
-
-	&:focus {
-		background-color: transparent;
-		border: none; // important: we need to completely remove the border, of the inner box-shadow of the focus ring will be drawn inside the border
-	}
-
-	&:active {
-		color: var(--mds-color-foreground-primary);
-		background-color: var(--mds-color-surface-interactive-active);
-		border-color: var(--mds-color-border-strong);
-	}
-}
-
-.truncation-content {
-	position: absolute;
-	top: 100%;
-	left: -$item-visual-horizontal-padding;
-	z-index: 300; // this is the z-index used in Structure for this kind of things, I am reusing the same value
-	width: max-content;
-	max-width: 200px; // by design
-	margin-top: 4px;
-	padding: 6px 12px;
-	background-color: var(--mds-color-surface-primary);
-	border-radius: 6px;
-	box-shadow: var(--mds-surface-high-box-shadow);
-}

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

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

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

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

package/components/button/button-primitive.d.ts

@@ -1,5 +0,0 @@
-import { ButtonPrimitiveProps } from '.';
-declare const LEGACY_COLORS: readonly ["primary", "secondary", "tertiary", "critical", "custom"];
-export type LegacyButtonColor = (typeof LEGACY_COLORS)[number];
-export declare const ButtonPrimitive: import('react').ForwardRefExoticComponent<ButtonPrimitiveProps & import('react').RefAttributes<HTMLButtonElement>>;
-export {};

package/components/button/button-primitive.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-primitive.js","sources":["../../../src/components/button/button-primitive.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport type { ButtonPrimitiveProps } from '.'\nimport { FlightIcon, type FlightIconSize } from '../flight-icon'\nimport { Interactive } from '../interactive'\nimport classNames from 'classnames'\nimport s from './styles.module.scss'\n\n// These are the only “real” colors our legacy button knows about\nconst LEGACY_COLORS = [\n\t'primary',\n\t'secondary',\n\t'tertiary',\n\t'critical',\n\t'custom',\n] as const\nexport type LegacyButtonColor = (typeof LEGACY_COLORS)[number]\n\nconst ICON_SIZE_MAP = {\n\tsmall: 12,\n\tmedium: 16,\n\tlarge: 24,\n} as const satisfies Record<'small' | 'medium' | 'large', FlightIconSize>\n\nexport const ButtonPrimitive = forwardRef<\n\tHTMLButtonElement,\n\tButtonPrimitiveProps\n>(\n\t(\n\t\t{\n\t\t\tsize = 'medium',\n\t\t\tcolor = 'primary',\n\t\t\tisFullWidth,\n\t\t\tisIconOnly,\n\t\t\ticon,\n\t\t\ticonPosition = 'leading',\n\t\t\ttext,\n\t\t\thref,\n\t\t\tisHrefExternal,\n\t\t\tclassName,\n\t\t\tlocale,\n\t\t\t...rest\n\t\t},\n\t\tref\n\t) => {\n\t\tconst hasIcon = Boolean(icon)\n\t\tconst showIconOnly = isIconOnly && hasIcon\n\n\t\tconst iconElement = icon && (\n\t\t\t<FlightIcon name={icon} size={ICON_SIZE_MAP[size]} />\n\t\t)\n\n\t\treturn (\n\t\t\t<Interactive\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts.button,\n\t\t\t\t\ts[`size-${size}`],\n\t\t\t\t\t{\n\t\t\t\t\t\t[s['width-full']]: isFullWidth,\n\t\t\t\t\t\t[s['icon-only']]: showIconOnly,\n\t\t\t\t\t},\n\t\t\t\t\tcolor !== 'custom' && s[`color-${color}`],\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\thref={rest.disabled ? '' : href}\n\t\t\t\tisHrefExternal={isHrefExternal}\n\t\t\t\taria-label={showIconOnly ? text : undefined}\n\t\t\t\tlocale={locale}\n\t\t\t\t{...rest}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t{showIconOnly && icon ? (\n\t\t\t\t\ticonElement\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{icon && iconPosition === 'leading' && iconElement}\n\t\t\t\t\t\t{text ? <div className={s.text}>{text}</div> : null}\n\t\t\t\t\t\t{icon && iconPosition === 'trailing' && iconElement}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</Interactive>\n\t\t)\n\t}\n)\nButtonPrimitive.displayName = 'ButtonPrimitive'\n"],"names":["ICON_SIZE_MAP","ButtonPrimitive","forwardRef","size","color","isFullWidth","isIconOnly","icon","iconPosition","text","href","isHrefExternal","className","locale","rest","ref","showIconOnly","iconElement","jsx","FlightIcon","Interactive","classNames","s","jsxs","Fragment"],"mappings":";;;;;;AAiBA,MAAMA,IAAgB;AAAA,EACrB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACR,GAEaC,IAAkBC;AAAA,EAI9B,CACC;AAAA,IACC,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEJC,MACI;AAEJ,UAAMC,IAAeV,KADL,EAAQC,GAGlBU,IAAcV,KACnB,gBAAAW,EAACC,GAAA,EAAW,MAAMZ,GAAM,MAAMP,EAAcG,CAAI,EAAA,CAAG;AAGpD,WACC,gBAAAe;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,WAAWC;AAAA,UACVC,EAAE;AAAA,UACFA,EAAE,QAAQnB,CAAI,EAAE;AAAA,UAChB;AAAA,YACC,CAACmB,EAAE,YAAY,CAAC,GAAGjB;AAAA,YACnB,CAACiB,EAAE,WAAW,CAAC,GAAGN;AAAA,UAAA;AAAA,UAEnBZ,MAAU,YAAYkB,EAAE,SAASlB,CAAK,EAAE;AAAA,UACxCQ;AAAA,QAAA;AAAA,QAED,MAAME,EAAK,WAAW,KAAKJ;AAAA,QAC3B,gBAAAC;AAAA,QACA,cAAYK,IAAeP,IAAO;AAAA,QAClC,QAAAI;AAAA,QACC,GAAGC;AAAA,QACJ,KAAAC;AAAA,QAEC,UAAAC,KAAgBT,IAChBU,IAEA,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,UAAAjB,KAAQC,MAAiB,aAAaS;AAAA,UACtCR,IAAO,gBAAAS,EAAC,OAAA,EAAI,WAAWI,EAAE,MAAO,aAAK,IAAS;AAAA,UAC9Cf,KAAQC,MAAiB,cAAcS;AAAA,QAAA,EAAA,CACzC;AAAA,MAAA;AAAA,IAAA;AAAA,EAIJ;AACD;AACAhB,EAAgB,cAAc;"}

package/components/button/index.d.ts

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