@hashicorp/mds-react 0.9.13 → 0.9.15

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

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

package/dist/components/form/file-input/index.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLProps, ReactNode } from 'react';
+interface FileInputBaseProps {
+    isRequired?: boolean;
+    className?: string;
+    id?: string;
+    /**
+     * Can be used to supply any props that the native `<input>` element supports.
+     * Since this is for file input, we omit `type`, see here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
+     */
+    field: Omit<HTMLProps<HTMLInputElement>, 'type' | 'id'>;
+    error?: ReactNode;
+}
+declare const FileInputBase: {
+    ({ isRequired, className, id, field, error, ...rest }: FileInputBaseProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface FileInputFieldProps extends FileInputBaseProps {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    isOptional?: boolean;
+}
+declare const FileInputField: {
+    ({ id, label, helperText, error, field, className, isRequired, isOptional, ...rest }: FileInputFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { FileInputBase, FileInputField };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/file-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/file-input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKjD,UAAU,kBAAkB;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX;;;OAGG;IACH,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC,CAAA;IACvD,KAAK,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,QAAA,MAAM,aAAa;2DAOhB,kBAAkB;;CAepB,CAAA;AAID,UAAU,mBAAoB,SAAQ,kBAAkB;IACvD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,QAAA,MAAM,cAAc;0FAUjB,mBAAmB;;CAuBrB,CAAA;AAID,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/form/helper-text/index.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+interface HelperTextProps {
+    children: ReactNode;
+    className?: string;
+    controlId?: string;
+}
+declare const HelperText: {
+    ({ children, className, controlId, ...rest }: HelperTextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { HelperText };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/helper-text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/helper-text/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,UAAU,eAAe;IACxB,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,QAAA,MAAM,UAAU;kDAKb,eAAe;;CAUjB,CAAA;AAID,OAAO,EAAE,UAAU,EAAE,CAAA"}

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

@@ -0,0 +1,10 @@
+interface IndicatorProps {
+    isOptional?: boolean;
+    isRequired?: boolean;
+}
+declare const Indicator: {
+    ({ isOptional, isRequired }: IndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export { Indicator };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/indicator/index.tsx"],"names":[],"mappings":"AAKA,UAAU,cAAc;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,QAAA,MAAM,SAAS;iCAAgC,cAAc;;CAuB5D,CAAA;AAID,OAAO,EAAE,SAAS,EAAE,CAAA"}

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

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+interface LabelProps {
+    badgeText?: string;
+    className?: string;
+    controlId: string;
+    children: ReactNode;
+    isRequired?: boolean;
+    isOptional?: boolean;
+}
+declare const Label: {
+    ({ badgeText, className, controlId, children, isRequired, isOptional, ...rest }: LabelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Label };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/label/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,UAAU,UAAU;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,QAAA,MAAM,KAAK;qFAQR,UAAU;;CAgBZ,CAAA;AAID,OAAO,EAAE,KAAK,EAAE,CAAA"}

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

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+interface LegendProps {
+    className?: string;
+    isRequired?: boolean;
+    isOptional?: boolean;
+    children: ReactNode;
+}
+declare const Legend: {
+    ({ className, isRequired, isOptional, children, ...rest }: LegendProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Legend };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/legend/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,UAAU,WAAW;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,SAAS,CAAA;CACnB;AAED,QAAA,MAAM,MAAM;+DAMT,WAAW;;CAWb,CAAA;AAID,OAAO,EAAE,MAAM,EAAE,CAAA"}

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

@@ -0,0 +1,71 @@
+/*
+* FORM > RADIO
+*/
+
+/* "BASE" CONTROL */
+
+.radio {
+	width: var(--mds-form-radio-size);
+	height: var(--mds-form-radio-size);
+	margin: 0;
+	padding: 0;
+	background-position: center center;
+	background-size: var(--mds-form-radio-background-image-size) var(--mds-form-radio-background-image-size);
+	border-style: solid;
+	border-width: var(--mds-form-radio-border-width);
+	border-radius: 50%;
+	cursor: pointer;
+	appearance: none;
+
+	/* STATUS */
+
+	/* base (default) */
+
+	&:not(:checked) {
+		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-radio-background-image-data-url);
+		border-color: var(--mds-form-control-checked-border-color-default);
+	}
+
+	/* hover */
+
+	&:hover:not(:checked) {
+		background-color: var(--mds-form-control-base-surface-color-hover);
+		border-color: var(--mds-form-control-base-border-color-hover);
+	}
+
+	&:hover:checked {
+		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) {
+		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-radio-background-image-data-url-disabled);
+		border-color: var(--mds-form-control-disabled-border-color);
+		box-shadow: none;
+		cursor: not-allowed;
+	}
+}

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

@@ -0,0 +1,43 @@
+import { type HTMLProps, type ReactNode } from 'react';
+import { type FieldsetProps } from '../fieldset';
+interface RadioBaseProps {
+    id: string;
+    required?: boolean;
+    field: HTMLProps<HTMLInputElement>;
+    className?: string;
+    testingKey?: string;
+}
+declare const RadioBase: {
+    ({ id, required, field, className, testingKey, }: RadioBaseProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface RadioFieldProps {
+    isInvalid?: boolean;
+    isLoading?: boolean;
+    isRequired?: boolean;
+    isOptional?: boolean;
+    id?: string;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    field: HTMLProps<HTMLInputElement>;
+    className?: string;
+    testingKey?: string;
+}
+declare const RadioField: {
+    ({ isInvalid, isLoading, isRequired, isOptional, id, label, helperText, error, field, className, testingKey, ...rest }: RadioFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type RadioGroupProps = FieldsetProps;
+declare const RadioGroup: {
+    Root: {
+        ({ layout, legend, isOptional, isRequired, children, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Field: {
+        (props: RadioFieldProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export { RadioGroup, RadioBase, RadioField };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/radio/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAE7D,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAI1D,UAAU,cAAc;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,SAAS;sDAMZ,cAAc;;CAWhB,CAAA;AAID,UAAU,eAAe;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,KAAK,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,UAAU;4HAab,eAAe;;CAwBjB,CAAA;AAID,KAAK,eAAe,GAAG,aAAa,CAAA;AAmCpC,QAAA,MAAM,UAAU;;gEA3Bb,eAAe;;;;gBAec,eAAe;;;CAe9C,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/form/radio-card/description.d.ts

@@ -0,0 +1,4 @@
+export default function Description({ description }: {
+    description: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=description.d.ts.map

package/dist/components/form/radio-card/description.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"description.d.ts","sourceRoot":"","sources":["../../../../src/components/form/radio-card/description.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,WAAW,EAAE,EAAE;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,2CAM3E"}

package/dist/components/form/radio-card/form-radio-card.module.css

@@ -0,0 +1,152 @@
+/*
+* FORM > RADIO-CARD
+*/
+
+/* RadioCard Group */
+
+.radio-cards {
+	& legend {
+		margin-bottom: 12px;
+	}
+
+	& .has-fluid-width {
+		flex: 1 0 0;
+	}
+
+	& .has-fixed-width {
+		flex: 1 0 100%;
+	}
+}
+
+/* RadioCard */
+
+.radio-card {
+	display: flex;
+	flex-direction: column;
+	background-color: var(--mds-color-surface-primary);
+	border: var(--mds-form-radiocard-border-width) solid var(--mds-color-border-primary);
+	border-radius: var(--mds-form-radiocard-border-radius);
+	box-shadow: var(--mds-elevation-mid-box-shadow);
+	cursor: pointer;
+
+	/* prevent focus on the form control as it is handled at the card level */
+	& .control {
+		outline-color: transparent;
+	}
+
+	/* STATES */
+
+	&:hover {
+		box-shadow: var(--mds-elevation-high-box-shadow);
+		transition: var(--mds-form-radiocard-transition-duration);
+	}
+
+	&:focus-within {
+		border-color: var(--mds-color-focus-action-internal);
+		box-shadow: 0 0 0 3px var(--mds-color-focus-action-external);
+	}
+
+	&.checked {
+		border-color: var(--mds-color-focus-action-internal);
+
+		& .control-wrapper {
+			background-color: var(--mds-color-surface-action);
+			border-color: var(--mds-color-border-action);
+		}
+	}
+
+	&.disabled {
+		background-color: var(--mds-color-surface-interactive-disabled);
+		border-color: var(--mds-color-border-primary);
+		box-shadow: none;
+		cursor: not-allowed;
+
+		& .control-wrapper {
+			background-color: var(--mds-color-surface-interactive-disabled);
+			border-color: var(--mds-color-border-primary);
+		}
+	}
+}
+
+/* ALIGNMENT */
+
+.align-left {
+	text-align: left;
+}
+
+.align-center {
+	text-align: center;
+}
+
+/* CONTROL POSITION */
+
+.control-bottom {
+	& .control-wrapper {
+		border-top-width: var(--mds-form-radiocard-border-width);
+		border-top-style: solid;
+		border-bottom-right-radius: inherit;
+		border-bottom-left-radius: inherit;
+	}
+}
+
+.control-left {
+	flex-direction: row-reverse;
+
+	& .control-wrapper {
+		display: flex;
+		align-items: center;
+		border-right-width: var(--mds-form-radiocard-border-width);
+		border-right-style: solid;
+		border-top-left-radius: inherit;
+		border-bottom-left-radius: inherit;
+	}
+}
+
+.content {
+	flex: 1;
+	padding: var(--mds-form-radiocard-content-padding);
+}
+
+.label {
+	display: block;
+	margin: 8px 0;
+	color: var(--mds-form-label-color);
+	overflow-wrap: break-word;
+
+	&:first-child {
+		margin-top: 0;
+	}
+
+	@media (max-width: 767px) {
+		font-size: var(--mds-typography-body-200-font-size);
+		line-height: var(--mds-typography-body-200-line-height);
+	}
+}
+
+.description {
+	display: block;
+	color: var(--mds-color-foreground-primary);
+}
+
+.control-wrapper {
+	padding: var(--mds-form-radiocard-control-padding);
+	background-color: var(--mds-color-surface-faint);
+	border-color: var(--mds-color-border-primary);
+}
+
+.control {
+	display: block;
+	margin: auto;
+}
+
+.badges {
+	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
+	gap: var(--mds-spacing-02);
+	margin-bottom: 12px;
+}
+
+.icon-center {
+	margin: auto;
+}

package/dist/components/form/radio-card/group.d.ts

@@ -0,0 +1,12 @@
+import { Fieldset } from '../fieldset';
+import type { ComponentProps, ReactNode } from 'react';
+export interface RadioCardGroupProps extends ComponentProps<typeof Fieldset> {
+    children: ReactNode;
+    legend: ReactNode;
+}
+declare const RadioCardGroup: {
+    ({ layout, isRequired, isOptional, error, legend, helperText, children, ...rest }: RadioCardGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { RadioCardGroup };
+//# sourceMappingURL=group.d.ts.map

package/dist/components/form/radio-card/group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.d.ts","sourceRoot":"","sources":["../../../../src/components/form/radio-card/group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtD,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,OAAO,QAAQ,CAAC;IAC3E,QAAQ,EAAE,SAAS,CAAA;IACnB,MAAM,EAAE,SAAS,CAAA;CACjB;AAED,QAAA,MAAM,cAAc;uFASjB,mBAAmB;;CAerB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/form/radio-card/index.d.ts

@@ -0,0 +1,49 @@
+import { RadioCardGroup } from './group';
+import type { HTMLProps, ReactNode } from 'react';
+import type { BadgeProps } from '../../badge';
+export declare const DEFAULT_CONTROL_POSITION = "bottom";
+export declare const DEFAULT_ALIGNMENT = "left";
+export declare const CONTROL_POSITIONS: readonly ["bottom", "left"];
+export declare const ALIGNMENTS: readonly ["left", "center"];
+interface RadioCardProps {
+    /**
+     * Sets the position of the form control in relation to the Radio Card content.
+     */
+    controlPosition?: (typeof CONTROL_POSITIONS)[number];
+    /**
+     * Sets the alignment of the Radio Card content.
+     */
+    alignment?: (typeof ALIGNMENTS)[number];
+    /**
+     * any valid CSS width (%, vw, etc)
+     * This parameter will set the width of the card, wrapping cards on multiple rows if necessary.
+     * You can use it to define the number of Radio Cards shown per row (for example `25%`
+     * will result in 4 cards).
+     */
+    maxWidth?: `${number}px` | `${number}vw` | `${number}%`;
+    /**
+     * Renders <Badge /> component.
+     */
+    badges?: Array<BadgeProps>;
+    /**
+     * The name of the flight icon to render.
+     */
+    icon?: string;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The description text.
+     */
+    description?: string;
+    children?: ReactNode;
+    field: HTMLProps<HTMLInputElement>;
+    id?: string;
+}
+declare const RadioCard: {
+    ({ controlPosition, alignment, maxWidth, field, icon, label, description, badges, children, }: RadioCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { RadioCardGroup, RadioCard };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/radio-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/radio-card/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAGxC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAG7C,eAAO,MAAM,wBAAwB,WAAW,CAAA;AAChD,eAAO,MAAM,iBAAiB,SAAS,CAAA;AACvC,eAAO,MAAM,iBAAiB,6BAA8B,CAAA;AAC5D,eAAO,MAAM,UAAU,6BAA8B,CAAA;AAErD,UAAU,cAAc;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;IACpD;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;IACvC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,GAAG,MAAM,IAAI,GAAG,GAAG,MAAM,IAAI,GAAG,GAAG,MAAM,GAAG,CAAA;IACvD;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAA;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAIpB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAClC,EAAE,CAAC,EAAE,MAAM,CAAA;CACX;AAED,QAAA,MAAM,SAAS;mGAUZ,cAAc;;CA8ChB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/form/radio-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/radio-card/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { useId } from 'react'\nimport { Badge } from '../../badge'\nimport { FlightIcon } from '../../flight-icon'\nimport { RadioBase } from '../radio'\nimport { RadioCardGroup } from './group'\nimport Label from './label'\nimport Description from './description'\nimport type { HTMLProps, ReactNode } from 'react'\nimport type { BadgeProps } from '../../badge'\nimport s from './form-radio-card.module.css'\n\nexport const DEFAULT_CONTROL_POSITION = 'bottom'\nexport const DEFAULT_ALIGNMENT = 'left'\nexport const CONTROL_POSITIONS = ['bottom', 'left'] as const\nexport const ALIGNMENTS = ['left', 'center'] as const\n\ninterface RadioCardProps {\n\t/**\n\t * Sets the position of the form control in relation to the Radio Card content.\n\t */\n\tcontrolPosition?: (typeof CONTROL_POSITIONS)[number]\n\t/**\n\t * Sets the alignment of the Radio Card content.\n\t */\n\talignment?: (typeof ALIGNMENTS)[number]\n\t/**\n\t * any valid CSS width (%, vw, etc)\n\t * This parameter will set the width of the card, wrapping cards on multiple rows if necessary.\n\t * You can use it to define the number of Radio Cards shown per row (for example `25%`\n\t * will result in 4 cards).\n\t */\n\tmaxWidth?: `${number}px` | `${number}vw` | `${number}%`\n\t/**\n\t * Renders <Badge /> component.\n\t */\n\tbadges?: Array<BadgeProps>\n\t/**\n\t * The name of the flight icon to render.\n\t */\n\ticon?: string\n\t/**\n\t * The label text.\n\t */\n\tlabel?: string\n\t/**\n\t * The description text.\n\t */\n\tdescription?: string\n\t/*\n\t * Optional children rendered below the label and description (if provided).\n\t */\n\tchildren?: ReactNode\n\tfield: HTMLProps<HTMLInputElement>\n\tid?: string\n}\n\nconst RadioCard = ({\n\tcontrolPosition = DEFAULT_CONTROL_POSITION,\n\talignment = DEFAULT_ALIGNMENT,\n\tmaxWidth,\n\tfield,\n\ticon,\n\tlabel,\n\tdescription,\n\tbadges,\n\tchildren,\n}: RadioCardProps) => {\n\tconst generatedId = useId()\n\n\treturn (\n\t\t<label\n\t\t\thtmlFor={generatedId}\n\t\t\tstyle={{ maxWidth }}\n\t\t\tclassName={classNames(\n\t\t\t\ts['radio-card'],\n\t\t\t\ts[`control-${controlPosition}`],\n\t\t\t\ts[`align-${alignment}`],\n\t\t\t\t{\n\t\t\t\t\t[s['checked']]: field.checked,\n\t\t\t\t\t[s['disabled']]: field.disabled,\n\t\t\t\t\t[s['has-fixed-width']]: maxWidth,\n\t\t\t\t\t[s['has-fluid-width']]: !maxWidth,\n\t\t\t\t},\n\t\t\t)}\n\t\t>\n\t\t\t<span className={s['content']}>\n\t\t\t\t{icon && (\n\t\t\t\t\t<FlightIcon\n\t\t\t\t\t\tname={icon}\n\t\t\t\t\t\tsize={24}\n\t\t\t\t\t\tisInlineBlock={false}\n\t\t\t\t\t\tclassName={classNames({\n\t\t\t\t\t\t\t[s['icon-center']]: alignment === 'center',\n\t\t\t\t\t\t})}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{label && <Label label={label} />}\n\t\t\t\t{badges?.length ? (\n\t\t\t\t\t<div className={s.badges}>\n\t\t\t\t\t\t{badges.map((badge) => (\n\t\t\t\t\t\t\t<Badge {...badge} key={badge.text} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t\t{description && <Description description={description} />}\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t\t<span className={s['control-wrapper']}>\n\t\t\t\t<RadioBase className={s.control} id={generatedId} field={field} />\n\t\t\t</span>\n\t\t</label>\n\t)\n}\n\nRadioCard.displayName = 'RadioCard'\n\nexport { RadioCardGroup, RadioCard }\n"],"names":["DEFAULT_CONTROL_POSITION","DEFAULT_ALIGNMENT","RadioCard","controlPosition","alignment","maxWidth","field","icon","label","description","badges","children","generatedId","useId","jsxs","classNames","s","jsx","FlightIcon","Label","badge","createElement","Badge","Description","RadioBase"],"mappings":";;;;;;;;;AAYO,MAAMA,IAA2B,UAC3BC,IAAoB,QA4C3BC,IAAY,CAAC;AAAA,EAClB,iBAAAC,IAAkBH;AAAA,EAClB,WAAAI,IAAYH;AAAA,EACZ,UAAAI;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AACD,MAAsB;AACrB,QAAMC,IAAcC,EAAA;AAEpB,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,SAASF;AAAA,MACT,OAAO,EAAE,UAAAP,EAAA;AAAA,MACT,WAAWU;AAAA,QACVC,EAAE,YAAY;AAAA,QACdA,EAAE,WAAWb,CAAe,EAAE;AAAA,QAC9Ba,EAAE,SAASZ,CAAS,EAAE;AAAA,QACtB;AAAA,UACC,CAACY,EAAE,OAAU,GAAGV,EAAM;AAAA,UACtB,CAACU,EAAE,QAAW,GAAGV,EAAM;AAAA,UACvB,CAACU,EAAE,iBAAiB,CAAC,GAAGX;AAAA,UACxB,CAACW,EAAE,iBAAiB,CAAC,GAAG,CAACX;AAAA,QAAA;AAAA,MAC1B;AAAA,MAGD,UAAA;AAAA,QAAA,gBAAAS,EAAC,QAAA,EAAK,WAAWE,EAAE,SACjB,UAAA;AAAA,UAAAT,KACA,gBAAAU;AAAA,YAACC;AAAA,YAAA;AAAA,cACA,MAAMX;AAAA,cACN,MAAM;AAAA,cACN,eAAe;AAAA,cACf,WAAWQ,EAAW;AAAA,gBACrB,CAACC,EAAE,aAAa,CAAC,GAAGZ,MAAc;AAAA,cAAA,CAClC;AAAA,YAAA;AAAA,UAAA;AAAA,UAGFI,KAAS,gBAAAS,EAACE,GAAA,EAAM,OAAAX,EAAA,CAAc;AAAA,UAC9BE,GAAQ,SACR,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAE,QAChB,YAAO,IAAI,CAACI,MACZ,gBAAAC,EAACC,GAAA,EAAO,GAAGF,GAAO,KAAKA,EAAM,KAAA,CAAM,CACnC,GACF,IACG;AAAA,UACHX,KAAe,gBAAAQ,EAACM,GAAA,EAAY,aAAAd,EAAA,CAA0B;AAAA,UACtDE;AAAA,QAAA,GACF;AAAA,QACA,gBAAAM,EAAC,QAAA,EAAK,WAAWD,EAAE,iBAAiB,GACnC,UAAA,gBAAAC,EAACO,GAAA,EAAU,WAAWR,EAAE,SAAS,IAAIJ,GAAa,OAAAN,GAAc,EAAA,CACjE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGH;AAEAJ,EAAU,cAAc;"}

package/dist/components/form/radio-card/label.d.ts

@@ -0,0 +1,4 @@
+export default function Label({ label }: {
+    label: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=label.d.ts.map

package/dist/components/form/radio-card/label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../../src/components/form/radio-card/label.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,2CAMzD"}

package/dist/components/form/select/form-select.module.css

@@ -0,0 +1,81 @@
+/*
+* FORM > SELECT
+*/
+
+/* "BASE" CONTROL */
+
+.select {
+	composes: mds-typography-font-weight-regular from global;
+	max-width: 100%;
+	padding: var(--mds-padding);
+	padding-right: calc(var(--mds-padding) + 24px); /* extra space for the icon */
+
+	color: var(--mds-form-control-base-foreground-value-color);
+	background-color: var(--mds-form-control-base-surface-color-default);
+	background-image: var(--mds-form-select-background-image-data-url);
+	background-repeat: no-repeat;
+	background-position: right var(--mds-form-select-background-image-position-right-x) top var(--mds-form-select-background-image-position-top-y); /* we have to take into account the border */
+
+	background-size: var(--mds-form-select-background-image-size) var(--mds-form-select-background-image-size);
+	border: var(--mds-form-control-border-width) solid var(--mds-form-control-base-border-color-default);
+	border-radius: var(--mds-form-control-border-radius);
+	box-shadow: var(--mds-elevation-low-box-shadow);
+	appearance: none;
+
+	/* STATUS */
+
+	&:hover {
+		border-color: var(--mds-form-control-base-border-color-hover);
+	}
+
+	/* focus (same for all the states) */
+
+	&:focus {
+		border-color: var(--mds-color-focus-action-internal);
+
+		/* Notice: Safari doesn't apply a rounded border */
+		outline: 3px solid var(--mds-color-focus-action-external);
+		outline-offset: 0;
+	}
+
+	/* DISABLED */
+
+	&:disabled {
+		color: var(--mds-form-control-disabled-foreground-color);
+		background-color: var(--mds-form-control-disabled-surface-color);
+		background-image: var(--mds-form-select-background-image-data-url-disabled);
+		border-color: var(--mds-form-control-disabled-border-color);
+		box-shadow: none;
+		cursor: not-allowed;
+	}
+
+	/* INVALID */
+
+	&.invalid {
+		border-color: var(--mds-form-control-invalid-border-color-default);
+
+		&:hover {
+			border-color: var(--mds-form-control-invalid-border-color-hover);
+		}
+
+		&:focus {
+			border-color: var(--mds-color-focus-critical-internal);
+			outline-color: var(--mds-color-focus-critical-external);
+		}
+	}
+}
+
+.medium {
+	composes: mds-typography-legacy-body-200 from global;
+
+	--mds-padding: var(--mds-form-control-padding);
+}
+
+.large {
+	composes: mds-typography-legacy-body-300 from global;
+
+	--mds-padding: calc(var(--mds-form-control-padding) + 4px);
+
+	min-height: 3rem;
+	background-position: right 11px top 16px; /* we have to take into account the border */
+}

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

@@ -0,0 +1,23 @@
+import type { HTMLProps, ReactNode } from 'react';
+interface SelectFieldProps {
+    isInvalid?: boolean;
+    isLoading?: boolean;
+    isRequired?: boolean;
+    isOptional?: boolean;
+    id?: string;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    field: HTMLProps<HTMLSelectElement>;
+    children: ReactNode;
+    className?: string;
+    size?: 'medium' | 'large';
+    disabled?: boolean;
+    multiple?: boolean;
+}
+declare const SelectField: {
+    ({ isInvalid, isLoading, isRequired, isOptional, id, label, helperText, error, field, children, className, size, ...rest }: SelectFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { SelectField };
+//# sourceMappingURL=index.d.ts.map