@hashicorp/mds-react 0.9.13 → 0.9.15

package/components/dropdown/list-item/styles.module.css

@@ -1,222 +0,0 @@
-.list-item[disabled],
-.list-item[disabled]:hover {
-	color: var(--mds-color-foreground-disabled);
-	cursor: not-allowed;
-}
-
-.interactive {
-	position: relative;
-	min-height: 36px;
-	isolation: isolate; /* used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container) */
-
-	/* need to reset a few extra things to make the button visually appear the same as the link */
-	& button {
-		width: 100%;
-		background-color: transparent;
-
-		&:hover {
-			cursor: pointer;
-		}
-	}
-
-	/* shared styles for links and buttons */
-	& a,
-	& button {
-		display: flex;
-		align-items: flex-start;
-		padding: 7px 9px 7px 15px; /* notice: we're subtracting 1px because of the transparent border */
-		text-decoration: none;
-		border: 1px solid transparent; /* because a border for the button is needed for a11y, we apply it to both the button and the link so they have the same height */
-		outline-style: solid; /* used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656) */
-		outline-color: transparent;
-
-		/* this is used for the left "hover" indicator */
-		&::before {
-			position: absolute;
-			top: 6px;
-			bottom: 6px;
-			left: 4px;
-			z-index: -1;
-			width: 2px;
-			border-radius: 1px;
-			content: '';
-		}
-
-		/* Notice: this is used for the active/focus states which have very specific positions
-		and also has a background color, so we can't use the existing focus-ring mixins */
-		&::after {
-			position: absolute;
-			top: 0;
-			right: 4px;
-			bottom: 0;
-			left: 10px;
-			z-index: -1;
-			border-radius: 5px;
-			content: '';
-		}
-
-		/* Notice: to avoid too much duplication we define two local CSS variables
-	  and define their values in the color variants below */
-
-		&:hover {
-			color: var(--current-color-hover);
-
-			&::before {
-				background-color: currentColor;
-			}
-		}
-
-		/* default focus for browsers that still rely on ":focus" */
-		&:focus {
-			color: var(--current-color-focus);
-
-			&::after {
-				left: 4px;
-				box-shadow: var(--current-focus-ring-box-shadow);
-			}
-		}
-
-		/* undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles */
-		&:focus:not(:focus-visible) {
-			&::after {
-				background-color: transparent;
-				box-shadow: none;
-			}
-		}
-
-		/* set focus for browsers that support ":focus-visible" */
-		&:focus-visible {
-			color: var(--current-color-focus);
-
-			&::after {
-				left: 4px;
-				box-shadow: var(--current-focus-ring-box-shadow);
-			}
-		}
-
-		/* remove the focus ring on "active + focused" state (by design) */
-		&:focus:active,
-		&:focus-visible:active {
-			&::after {
-				left: 10px;
-				background-color: var(--current-background-color);
-				box-shadow: none;
-			}
-		}
-
-		&:active {
-			color: var(--current-color-active);
-
-			&::before {
-				background-color: currentColor;
-			}
-		}
-	}
-}
-
-.color-action {
-	& a,
-	& button {
-		color: var(--mds-color-foreground-primary);
-
-		/* assign the values to the local CSS variables used above */
-		--current-color-hover: var(--mds-color-foreground-action-hover);
-		--current-color-focus: var(--mds-color-foreground-action-active);
-		--current-color-active: var(--mds-color-foreground-action-active);
-
-		&::after {
-			--current-focus-ring-box-shadow: var(
-				--mds-focus-ring-action-box-shadow
-			);
-		}
-	}
-}
-
-.color-critical {
-	& a,
-	& button {
-		color: var(--mds-color-foreground-critical);
-
-		/* assign the values to the local CSS variables used above */
-		--current-color-hover: var(--mds-color-palette-red-300);
-		--current-color-focus: var(--mds-color-palette-red-400);
-		--current-color-active: var(--mds-color-palette-red-400);
-
-		&::after {
-			--current-background-color: var(--mds-color-surface-critical);
-			--current-focus-ring-box-shadow: var(
-				--mds-focus-ring-critical-box-shadow
-			);
-		}
-	}
-}
-
-.custom {
-	display: flex;
-	align-items: flex-start;
-	padding: 7px 9px 7px 15px;
-}
-
-.interactive-icon {
-	display: block;
-	margin-top: 2px;
-
-	&.leading {
-		margin-right: 8px;
-	}
-
-	&.trailing {
-		margin-left: 8px;
-	}
-}
-
-.interactive-text {
-	flex: 1;
-	text-align: left;
-}
-
-.loading-wrapper {
-	display: flex;
-	align-items: center;
-	padding: 8px 10px 8px 16px;
-
-	& .interactive-text {
-		color: var(--mds-color-foreground-faint);
-	}
-
-	& .interactive-icon {
-		color: var(--mds-color-foreground-primary);
-	}
-}
-
-.text-regular {
-	composes: mds-typography-legacy-body-100 from global;
-	composes: mds-typography-font-weight-regular from global;
-}
-
-.text-large {
-	composes: mds-typography-legacy-body-200 from global;
-	composes: mds-typography-font-weight-medium from global;
-}
-
-.separator {
-	position: relative;
-	width: 100%;
-	height: 4px;
-
-	&::before {
-		position: absolute;
-		right: 6px;
-		bottom: 0;
-		left: 6px;
-		border-bottom: 1px solid var(--mds-color-border-primary);
-		content: '';
-	}
-}
-
-.title {
-	composes: mds-typography-legacy-body-100 from global;
-	composes: mds-typography-font-weight-semibold from global;
-	padding: 10px 16px 4px;
-	color: var(--mds-color-foreground-strong);
-}

package/components/dropdown/list-item/title.d.ts

@@ -1,10 +0,0 @@
-import { HTMLAttributes } from 'react';
-interface ListItemTitleProps extends Omit<HTMLAttributes<HTMLLIElement>, 'className'> {
-    text: string;
-}
-declare const ListItemTitle: {
-    ({ text, ...rest }: ListItemTitleProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export type { ListItemTitleProps };
-export { ListItemTitle };

package/components/dropdown/list-item/title.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"title.js","sources":["../../../../src/components/dropdown/list-item/title.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\nimport classNames from 'classnames'\nimport s from './styles.module.css'\n\ninterface ListItemTitleProps\n\textends Omit<HTMLAttributes<HTMLLIElement>, 'className'> {\n\ttext: string\n}\n\nconst ListItemTitle = ({ text, ...rest }: ListItemTitleProps) => {\n\treturn (\n\t\t<li className={classNames(s['list-item'], s.title)} {...rest}>\n\t\t\t{text}\n\t\t</li>\n\t)\n}\n\nListItemTitle.displayName = 'Dropdown.ListItem.Title'\n\nexport type { ListItemTitleProps }\nexport { ListItemTitle }\n"],"names":["ListItemTitle","text","rest","jsx","classNames","s"],"mappings":";;;AASA,MAAMA,IAAgB,CAAC,EAAE,MAAAC,GAAM,GAAGC,QAEhC,gBAAAC,EAAC,MAAA,EAAG,WAAWC,EAAWC,EAAE,WAAW,GAAGA,EAAE,KAAK,GAAI,GAAGH,GACtD,UAAAD,EAAA,CACF;AAIFD,EAAc,cAAc;"}

package/components/dropdown/toggle-button/index.d.ts

@@ -1,30 +0,0 @@
-import { FlightIconName } from '../../flight-icon';
-import { ButtonHTMLAttributes } from 'react';
-interface DropdownToggleButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * Text of the ToggleButton. If no text value is defined, an error will be thrown.
-     */
-    text: string;
-    color?: 'primary' | 'secondary';
-    size?: 'small' | 'medium';
-    icon?: string;
-    isFullWidth?: boolean;
-    /**
-     * Displays an optional count indicator using the Badge Count component.
-     */
-    count?: string;
-    /**
-     * Displays an optional badge indicator using the Badge component.
-     */
-    badge?: string;
-    /**
-     * Appends an icon to the optional badge indicator.
-     */
-    badgeIcon?: FlightIconName;
-}
-declare const ToggleButton: {
-    ({ text, color, size, icon, isFullWidth, count, badge, badgeIcon, disabled, ...rest }: DropdownToggleButtonProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export type { DropdownToggleButtonProps };
-export { ToggleButton };

package/components/dropdown/toggle-button/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/dropdown/toggle-button/index.tsx"],"sourcesContent":["'use client'\n\nimport classNames from 'classnames'\nimport { Badge } from '../../badge'\nimport { BadgeCount } from '../../badge-count'\nimport { Toggle } from '../../menu-primitive'\nimport { useMenuPrimitive } from '../../menu-primitive/use-menu-primitive'\nimport type { FlightIconName } from '../../flight-icon'\nimport { FlightIcon } from '../../flight-icon'\nimport type { ButtonHTMLAttributes } from 'react'\nimport s from './styles.module.scss'\n\ninterface DropdownToggleButtonProps\n\textends ButtonHTMLAttributes<HTMLButtonElement> {\n\t/**\n\t * Text of the ToggleButton. If no text value is defined, an error will be thrown.\n\t */\n\ttext: string\n\tcolor?: 'primary' | 'secondary'\n\tsize?: 'small' | 'medium'\n\ticon?: string\n\tisFullWidth?: boolean\n\t/**\n\t * Displays an optional count indicator using the Badge Count component.\n\t */\n\tcount?: string\n\t/**\n\t * Displays an optional badge indicator using the Badge component.\n\t */\n\tbadge?: string\n\t/**\n\t * Appends an icon to the optional badge indicator.\n\t */\n\tbadgeIcon?: FlightIconName\n}\n\nconst ToggleButton = ({\n\ttext,\n\tcolor = 'primary',\n\tsize = 'medium',\n\ticon,\n\tisFullWidth,\n\tcount,\n\tbadge,\n\tbadgeIcon,\n\tdisabled,\n\t...rest\n}: DropdownToggleButtonProps) => {\n\tconst { isOpen, onClickToggle } = useMenuPrimitive()\n\tconst badgeType = color === 'primary' || disabled ? 'filled' : 'inverted'\n\tconst iconSize = size === 'small' ? 12 : 16\n\n\treturn (\n\t\t<Toggle>\n\t\t\t<button\n\t\t\t\taria-expanded={isOpen}\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts['toggle-button'],\n\t\t\t\t\ts[`size-${size}`],\n\t\t\t\t\ts[`color-${color}`],\n\t\t\t\t\t{\n\t\t\t\t\t\t[s['width-full']]: isFullWidth,\n\t\t\t\t\t}\n\t\t\t\t)}\n\t\t\t\tonClick={onClickToggle}\n\t\t\t\tdisabled={disabled}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{icon && <FlightIcon name={icon} size={iconSize} />}\n\t\t\t\t<div className={s.text}>{text}</div>\n\t\t\t\t{count && <BadgeCount text={count} size=\"small\" type={badgeType} />}\n\t\t\t\t{badge && (\n\t\t\t\t\t<Badge text={badge} icon={badgeIcon} size=\"small\" type={badgeType} />\n\t\t\t\t)}\n\t\t\t\t<Chevron />\n\t\t\t</button>\n\t\t</Toggle>\n\t)\n}\n\nToggleButton.displayName = 'Dropdown.ToggleButton'\n\nconst Chevron = () => {\n\treturn <FlightIcon name=\"chevron-down\" isInlineBlock={false} />\n}\n\nexport type { DropdownToggleButtonProps }\nexport { ToggleButton }\n"],"names":["ToggleButton","text","color","size","icon","isFullWidth","count","badge","badgeIcon","disabled","rest","isOpen","onClickToggle","useMenuPrimitive","badgeType","iconSize","jsx","Toggle","jsxs","classNames","s","BadgeCount","Badge","Chevron","FlightIcon"],"mappings":";;;;;;;;;AAoCsB,MACrBA,IAAA,CAAA;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC,IAAO;AAAA,EACP,MAAAC,IAAA;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACD,GAAAC;AACC,MAAA;AACA,QAAM,EAAA,QAAAC,GAAA,eAAAC,EAAsB,IAAAC,EAAa,GACnCC,IAAWZ,MAAS,aAAeO,IAAA,WAAA,YAEzCM,IAAAZ,gBACE,KACA;AAAA,SAAC,gBAAAa,EAAAC,GAAA,EAAA,UAAA,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA,iBAAKP;AAAA,MACL,MAAA;AAAA,MAAW,WACRQ;AAAA,QACFC,EAAE,eAAc;AAAA,QAChBA,EAAE,SAAS,EAAK;AAAA,QAChBA,EAAA,SAAAlB,CAAA,EAAA;AAAA,QAAA;AAAA,UACoB,CAAAkB,EAAA,YAAA,CAAA,GAAAf;AAAA,QAErB;AAAA,MACA;AAAA,MACA,SAAAO;AAAA,MACC,UAAAH;AAAA,MAEA;MAAA,UAAA;AAAA,QAAgDL,KAChD,gBAAAY,KAAe,EAAE,MAAOZ,GAAA,MAAAW,EAAK,CAAA;AAAA,QAC7B,gBAAAC,EAAA,SAAU,WAAAI,QAAW,UAAanB,EAAK,CAAA;AAAA,QACvCK,KACA,gBAAAU,EAACK,GAAM,EAAA,MAAMf,SAAa,SAAW,MAAKQ,EAAQ,CAAA;AAAA,QAAiBP,KAEnE,gBAAAS,EAAAM,GAAQ,EAAA,MAAAf,GAAA,MAAAC,GAAA,MAAA,SAAA,MAAAM,EAAA,CAAA;AAAA,QAAA,gBAAAE,EAAAO,GAAA,CAAA,CAAA;AAAA,MAAA;AAAA;EAIb,EAAA,CAAA;AAEA;AAEAvB,gBAAsB;AACrB,MAAAuB,IAAA,MACD,gBAAAP,EAAAQ,GAAA,EAAA,MAAA,gBAAA,eAAA,GAAA,CAAA;"}

package/components/dropdown/toggle-button/styles.module.scss

@@ -1,54 +0,0 @@
-@use 'styles/mixins/button' as *;
-
-.toggle-button {
-	@include hds-button();
-
-	&:focus {
-		@include hds-button-state-focus();
-	}
-
-	&:disabled,
-	&:disabled:focus,
-	&:disabled:hover {
-		@include hds-button-state-disabled();
-	}
-}
-
-.color-primary {
-	@include hds-button-color-primary();
-}
-
-.color-secondary {
-	@include hds-button-color-secondary();
-}
-
-.width-full {
-	justify-content: space-between;
-	width: 100%;
-	max-width: 100%;
-}
-
-.text {
-	text-align: left;
-	white-space: nowrap;
-}
-
-.size-small {
-	min-height: 1.75rem;
-	padding: 0.375rem 0.375rem 0.375rem 0.6875rem;
-
-	& .text {
-		font-size: 0.8125rem;
-		line-height: 0.875rem;
-	}
-}
-
-.size-medium {
-	min-height: 2.25rem;
-	padding: 0.5625rem 0.5625rem 0.5625rem 0.9375rem;
-
-	& .text {
-		font-size: 0.875rem;
-		line-height: 1rem;
-	}
-}

package/components/flight-icon/index.d.ts

@@ -1,44 +0,0 @@
-import { SVGProps } from 'react';
-import { IconName } from '@hashicorp/flight-icons/svg';
-declare const FLIGHT_ICON_SIZES: readonly [12, 16, 24, 32];
-type FlightIconSize = (typeof FLIGHT_ICON_SIZES)[number];
-type FlightIconName = IconName | (string & Record<never, never>);
-interface FlightIconProps extends SVGProps<SVGSVGElement> {
-    /**
-     * The name of the icon you wish to use. Search for existing icon
-     * names in the Icon library.
-     */
-    name: FlightIconName;
-    /**
-     * The `color` prop can be used to change the color. It works by setting
-     * the value of the icon SVG’s fill property.
-     */
-    color?: string;
-    /**
-     * The `size` prop can be used to change the size.
-     */
-    size?: FlightIconSize;
-    /**
-     * Determines whether the icon will stretch to fill the parent container.
-     * Setting it to `true` will make the icon have a height and width of 100%
-     * and a display of `block`.
-     */
-    stretched?: boolean;
-    /**
-     * Sets the `display` style for the icon. Setting it to `false` will make
-     * the icon have a display of `block`.
-     */
-    isInlineBlock?: boolean;
-    /**
-     * Use to add accessible text to standalone icons. This will also change
-     * the `aria-hidden` value to `false` instead of the default value of `true`.
-     */
-    title?: string;
-    className?: string;
-}
-declare const FlightIcon: {
-    ({ name, color, size, stretched, isInlineBlock, title, className, ...rest }: FlightIconProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export type { FlightIconProps, FlightIconSize, FlightIconName };
-export { FlightIcon, FLIGHT_ICON_SIZES };

package/components/flight-icon/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/flight-icon/index.tsx"],"sourcesContent":["'use client'\n\nimport svgSprite from '@hashicorp/flight-icons/svg-sprite/svg-sprite.svg'\nimport classNames from 'classnames'\nimport { useId, type SVGProps } from 'react'\nimport type { IconName } from '@hashicorp/flight-icons/svg'\nimport s from './flight-icon.module.css'\n\nconst FLIGHT_ICON_SIZES = [12, 16, 24, 32] as const\ntype FlightIconSize = (typeof FLIGHT_ICON_SIZES)[number]\n\nconst SPRITE_SIZE_MAP = {\n\t12: 16,\n\t16: 16,\n\t24: 24,\n\t32: 24,\n} as const\n\ntype FlightIconName = IconName | (string & Record<never, never>)\n\ninterface FlightIconProps extends SVGProps<SVGSVGElement> {\n\t/**\n\t * The name of the icon you wish to use. Search for existing icon\n\t * names in the Icon library.\n\t */\n\tname: FlightIconName\n\n\t/**\n\t * The `color` prop can be used to change the color. It works by setting\n\t * the value of the icon SVG’s fill property.\n\t */\n\tcolor?: string\n\n\t/**\n\t * The `size` prop can be used to change the size.\n\t */\n\tsize?: FlightIconSize\n\n\t/**\n\t * Determines whether the icon will stretch to fill the parent container.\n\t * Setting it to `true` will make the icon have a height and width of 100%\n\t * and a display of `block`.\n\t */\n\tstretched?: boolean\n\n\t/**\n\t * Sets the `display` style for the icon. Setting it to `false` will make\n\t * the icon have a display of `block`.\n\t */\n\tisInlineBlock?: boolean\n\n\t/**\n\t * Use to add accessible text to standalone icons. This will also change\n\t * the `aria-hidden` value to `false` instead of the default value of `true`.\n\t */\n\ttitle?: string\n\tclassName?: string\n}\n\n// When an SVG file is imported in Next.js, it is an object with a `src`\n// property. However, tools like Webpack and Vite default to returning a URL.\n// This runtime check allows the component to work in all of these cases.\nconst svgSpriteSrc =\n\ttypeof svgSprite === 'string' ? svgSprite : (svgSprite as { src: string }).src\n\nconst FlightIcon = ({\n\tname,\n\tcolor = 'currentColor',\n\tsize = 16,\n\tstretched = false,\n\tisInlineBlock = true,\n\ttitle,\n\tclassName,\n\t...rest\n}: FlightIconProps) => {\n\tconst iconId = useId()\n\tconst titleId = useId()\n\n\tconst spriteSize = SPRITE_SIZE_MAP[size]\n\n\treturn (\n\t\t<svg\n\t\t\tclassName={classNames(\n\t\t\t\ts['flight-icon'],\n\t\t\t\t`flight-icon-${name}`,\n\t\t\t\t{\n\t\t\t\t\t[s['display-inline']]: isInlineBlock && !stretched,\n\t\t\t\t\t[s['loading']]: name === 'loading',\n\t\t\t\t\t[s['running']]: name === 'running',\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...rest}\n\t\t\taria-hidden={title ? 'false' : 'true'}\n\t\t\taria-labelledby={title ? titleId : undefined}\n\t\t\tfill={color}\n\t\t\tid={iconId}\n\t\t\trole={title ? 'img' : undefined}\n\t\t\twidth={stretched ? '100%' : size}\n\t\t\theight={stretched ? '100%' : size}\n\t\t\tviewBox={`0 0 ${spriteSize} ${spriteSize}`}\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t{title ? (\n\t\t\t\t<>\n\t\t\t\t\t<title id={titleId}>{title}</title>\n\t\t\t\t\t<g role=\"presentation\">\n\t\t\t\t\t\t<use href={`${svgSpriteSrc}#flight-${name}-${spriteSize}`}></use>\n\t\t\t\t\t</g>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<use href={`${svgSpriteSrc}#flight-${name}-${spriteSize}`}></use>\n\t\t\t)}\n\t\t</svg>\n\t)\n}\n\nFlightIcon.displayName = 'FlightIcon'\n\nexport type { FlightIconProps, FlightIconSize, FlightIconName }\nexport { FlightIcon, FLIGHT_ICON_SIZES }\n"],"names":["FLIGHT_ICON_SIZES","SPRITE_SIZE_MAP","svgSpriteSrc","svgSprite","FlightIcon","name","color","size","stretched","isInlineBlock","title","className","rest","iconId","titleId","useId","jsx","classNames","spriteSize","jsxs","Fragment"],"mappings":";;;;;;AAWA,MAAMA,IAAkB,CAAA,IAAA,IAAA,IAAA,EAAA,GACnBC,IAAA;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACL,IAAA;AA8CA,GAGMC,IAAc,OAAAC,KAAA,WAAAA,IAAAA,EAAA,KACnBC,IAAA,CAAA;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC,IAAO;AAAA,EACP,MAAAC,IAAA;AAAA,EACA,WAAAC,IAAA;AAAA,EACA,eAAAC,IAAA;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACD,GAAAC;AACC,MAAA;AACA,QAAMC,MAAU,GAEVC,IAAAC,EAAa,SAGlBR,CAAA;AAAA,SAAC,gBAAAS;AAAA,IAAA;AAAA,IAAA;AAAA,MACW,WACRC;AAAA,QACF,eAAe;AAAA,QACf,eAAAZ,CAAA;AAAA,QAAA;AAAA,UAEC,CAAC,EAAE,gBAAa,CAAA,QAAS,CAAAG;AAAA,UACzB,CAAC,EAAE,OAAU,GAAGH,MAAS;AAAA,UAC1B,CAAA,EAAA,OAAA,GAAAA,MAAA;AAAA,QACA;AAAA,QACDM;AAAA,MACC;AAAA,MACD;MACA,mBAAiB,UAAQ;AAAA,MACzB,mBAAMD,IAAAI,IAAA;AAAA,MACN,MAAIR;AAAA,MACJ,IAAAO;AAAA,MACA,MAAAH,IAAO,QAAY;AAAA,MACnB,OAAAF;MACA,QAAAA,IAAgB,SAAUD;AAAA,MAC1B,SAAM,OAAAW,CAAA,IAAAA,CAAA;AAAA,MAEL,OAAA;AAAA,MAEC,UAAAR,IAAO,gBAAAS,EAAIC,GAAU,EAAA,UAAA;AAAA,QACrB,gBAAAJ,EAAC,SAAE,EAAA,IAAKF,GAAA,UACPJ;QAEF,gBAAAM,EAAA,KAEC,EAAA,MAAA,gBAAa,UAA+B,gBAAAA,EAAA,OAAU,EAAI,MAAA,GAAAd,CAAA,WAAAG,CAAA,IAAAa,CAAA,GAAA,CAAA,EAAA,CAAA;AAAA,MAAA,EAAA,CAAA,IAAA,gBAAAF,EAAA,OAAA,EAAA,MAAA,GAAAd,CAAA,WAAAG,CAAA,IAAAa,CAAA,GAAA,CAAA;AAAA,IAE7D;AAAA,EAEF;AAEA;;"}

package/components/form/checkbox/form-checkbox.module.css

@@ -1,88 +0,0 @@
-.checkbox {
-	width: var(--mds-form-checkbox-size);
-	height: var(--mds-form-checkbox-size);
-	margin: 0;
-	padding: 0;
-	background-position: center center;
-	background-size: var(--mds-form-checkbox-background-image-size)
-		var(--mds-form-checkbox-background-image-size);
-	border-style: solid;
-	border-width: var(--mds-form-checkbox-border-width);
-	border-radius: var(--mds-form-checkbox-border-radius);
-	cursor: pointer;
-	appearance: none;
-
-	/* STATUS */
-
-	/* base (default) */
-
-	&:not(:checked, :indeterminate) {
-		background-color: var(--mds-form-control-base-surface-color-default);
-		border-color: var(--mds-form-control-base-border-color-default);
-		box-shadow: var(--mds-elevation-inset-box-shadow);
-	}
-
-	&:checked {
-		background-color: var(--mds-form-control-checked-surface-color-default);
-		background-image: var(--mds-form-checkbox-background-image-data-url);
-		border-color: var(--mds-form-control-checked-border-color-default);
-	}
-
-	&:indeterminate {
-		background-color: var(--mds-form-control-checked-surface-color-default);
-		background-image: var(
-			--mds-form-checkbox-background-image-data-url-indeterminate
-		);
-		border-color: var(--mds-form-control-checked-border-color-default);
-	}
-
-	/* hover */
-
-	&:hover:not(:checked, :indeterminate) {
-		background-color: var(--mds-form-control-base-surface-color-hover);
-		border-color: var(--mds-form-control-base-border-color-hover);
-	}
-
-	&:hover:checked,
-	&:hover:indeterminate {
-		background-color: var(--mds-form-control-checked-border-color-default);
-		border-color: var(--mds-form-control-checked-border-color-hover);
-	}
-
-	/* focus (same for all the states) */
-
-	&:focus {
-		outline: 3px solid var(--mds-color-focus-action-external);
-		outline-offset: 1px;
-	}
-
-	/* DISABLED */
-
-	&:disabled:not(:checked, :indeterminate) {
-		background-color: var(--mds-form-control-disabled-surface-color);
-		border-color: var(--mds-form-control-disabled-border-color);
-		box-shadow: none;
-		cursor: not-allowed;
-	}
-
-	&:disabled:checked {
-		background-color: var(--mds-form-control-disabled-surface-color);
-		background-image: var(
-			--mds-form-checkbox-background-image-data-url-disabled
-		);
-		border-color: var(--mds-form-control-disabled-border-color);
-		box-shadow: none;
-		cursor: not-allowed;
-	}
-
-	&:disabled:indeterminate {
-		background-color: var(--mds-form-control-disabled-surface-color);
-		background-image: var(
-			--mds-form-checkbox-background-image-data-url-indeterminate-disabled
-		);
-		background-repeat: no-repeat;
-		border-color: var(--mds-form-control-disabled-border-color);
-		box-shadow: none;
-		cursor: not-allowed;
-	}
-}

package/components/form/checkbox/index.d.ts

@@ -1,45 +0,0 @@
-import { ComponentProps, HTMLProps, ReactNode } from 'react';
-import { Fieldset } from '../fieldset';
-interface CheckboxBaseProps {
-    id?: string;
-    required?: boolean;
-    field: HTMLProps<HTMLInputElement>;
-    testingKey?: string;
-    error?: ReactNode;
-}
-declare const CheckboxBase: {
-    ({ id, required, field, testingKey, error, }: CheckboxBaseProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-interface CheckboxFieldProps {
-    isInvalid?: boolean;
-    isLoading?: boolean;
-    isRequired?: boolean;
-    isOptional?: boolean;
-    id?: string;
-    label?: ReactNode;
-    helperText?: ReactNode;
-    error?: ReactNode;
-    field: HTMLProps<HTMLInputElement>;
-    className?: string;
-    testingKey?: string;
-    disabled?: boolean;
-}
-declare const CheckboxField: {
-    ({ isInvalid, isLoading, isRequired, isOptional, id, label, helperText, error, field, className, testingKey, ...rest }: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-interface CheckboxGroupRootProps extends ComponentProps<typeof Fieldset> {
-    children: ReactNode;
-}
-declare const CheckboxGroup: {
-    Root: {
-        ({ layout, legend, helperText, error, isOptional, isRequired, children, }: CheckboxGroupRootProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Inner: {
-        (props: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-};
-export { CheckboxGroup, CheckboxBase, CheckboxField };

package/components/form/error/index.d.ts

@@ -1,16 +0,0 @@
-import { ReactNode } from 'react';
-interface ErrorMessageProps {
-    children: ReactNode;
-}
-declare const ErrorMessage: ({ children, ...rest }: ErrorMessageProps) => import("react/jsx-runtime").JSX.Element;
-interface ErrorProps {
-    children: ReactNode;
-    className?: string;
-    controlId?: string;
-}
-declare const Error: {
-    ({ children, className, controlId, ...rest }: ErrorProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export type { ErrorProps, ErrorMessageProps };
-export { Error, ErrorMessage };

package/components/form/field/index.d.ts

@@ -1,19 +0,0 @@
-import { ReactNode } from 'react';
-interface FieldProps {
-    badgeText?: string;
-    id: string;
-    isRequired?: boolean;
-    isOptional?: boolean;
-    label?: ReactNode;
-    helperText?: ReactNode;
-    error?: ReactNode;
-    className?: string;
-    layout?: 'vertical' | 'flag';
-    children: ReactNode;
-}
-declare const Field: {
-    ({ badgeText, id, isRequired, isOptional, label, helperText, error, className, layout, children, ...rest }: FieldProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export type { FieldProps };
-export { Field };

package/components/form/fieldset/index.d.ts

@@ -1,18 +0,0 @@
-import { ReactNode } from 'react';
-interface FieldsetProps extends React.PropsWithChildren {
-    isRequired?: boolean;
-    isOptional?: boolean;
-    legend?: ReactNode;
-    helperText?: ReactNode;
-    error?: ReactNode;
-    className?: string;
-    layout?: 'vertical' | 'horizontal';
-    id?: string;
-    testingKey?: string;
-}
-declare const Fieldset: {
-    ({ isRequired, isOptional, legend, helperText, error, className, layout, children, id, testingKey, ...rest }: FieldsetProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export type { FieldsetProps };
-export { Fieldset };

package/components/form/file-input/form-file-input.module.scss

@@ -1,81 +0,0 @@
-@use '../../../styles/mixins/button.scss' as *;
-@use '../../../../../mds-tokens/src/helper-classes/typography' as *;
-
-.file-input {
-	@extend .mds-typography-legacy-body-200;
-	margin: -4px 0 -4px -4px; // offset shadow padding + default 1px spacing
-	padding: 3px 0 3px 3px; // add padding so button shadow is visible
-	color: var(--mds-color-foreground-primary);
-
-	&:focus,
-	&:focus-visible {
-		outline: none;
-	}
-}
-
-// https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button
-// https://caniuse.com/?search=file-selector-button
-
-// Button
-.file-input::file-selector-button {
-	min-height: 36px;
-	margin-right: 16px;
-	padding: 7px 16px 7px 37px; // padding in code altered to match Figma visual design
-	color: var(--mds-color-foreground-primary);
-	font: inherit;
-	background-color: var(--mds-color-surface-faint);
-	// upload icon
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cg fill='%233b3d45'%3E%3Cpath d='M4.24 5.8a.75.75 0 001.06-.04l1.95-2.1v6.59a.75.75 0 001.5 0V3.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.101.001L4.2 4.74a.75.75 0 00.04 1.06z'/%3E%3Cpath d='M1.75 9a.75.75 0 01.75.75v3c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75v-3a.75.75 0 011.5 0v3A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-3A.75.75 0 011.75 9z'/%3E%3C/g%3E%3C/svg%3E");
-	background-repeat: no-repeat;
-	background-position: 15px 50%;
-	background-size: var(--mds-form-text-input-background-image-size);
-	border: $hds-button-border-width solid var(--mds-color-border-strong);
-	border-radius: $hds-button-border-radius;
-	box-shadow: var(--mds-elevation-low-box-shadow);
-	cursor: pointer;
-}
-
-// Button states
-.file-input::file-selector-button:hover {
-	color: var(--mds-color-foreground-primary);
-	background-color: var(--mds-color-surface-primary);
-	border-color: var(--mds-color-border-strong);
-}
-
-.file-input:focus-within::file-selector-button {
-	color: var(--mds-color-foreground-primary);
-	background-color: var(--mds-color-surface-faint);
-	border-color: var(--mds-color-focus-action-internal);
-	outline: 3px solid var(--mds-color-focus-action-external);
-}
-
-// Fix issue with button focus style which was displaying after button was activated
-.file-input:not(:focus) {
-	&::file-selector-button {
-		border-color: var(--mds-color-border-strong);
-		outline: 0;
-	}
-}
-
-.file-input::file-selector-button:active {
-	color: var(--mds-color-foreground-primary);
-	background-color: var(--mds-color-surface-interactive-active);
-	border-color: var(--mds-color-border-strong);
-	box-shadow: none;
-}
-
-.hds-form-file-input {
-	&:disabled,
-	&[disabled],
-	&:disabled:focus,
-	&[disabled]:focus,
-	&:disabled:hover,
-	&[disabled]:hover {
-		color: var(--mds-color-foreground-disabled);
-
-		&::file-selector-button {
-			@include hds-button-state-disabled();
-			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cg fill='%238c909c'%3E%3Cpath d='M4.24 5.8a.75.75 0 001.06-.04l1.95-2.1v6.59a.75.75 0 001.5 0V3.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.101.001L4.2 4.74a.75.75 0 00.04 1.06z'/%3E%3Cpath d='M1.75 9a.75.75 0 01.75.75v3c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75v-3a.75.75 0 011.5 0v3A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-3A.75.75 0 011.75 9z'/%3E%3C/g%3E%3C/svg%3E");
-		}
-	}
-}