@hashicorp/mds-react 0.9.0

package/dist/components/form/text-input/styles.module.css

@@ -0,0 +1,158 @@
+.text-input {
+	composes: mds-typography-font-weight-regular from global;
+	width: 100%;
+	max-width: 100%;
+	padding: var(--mds-form-control-padding);
+	color: var(--mds-form-control-base-foreground-value-color);
+	background-color: var(--mds-form-control-base-surface-color-default);
+	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-inset-box-shadow);
+
+	/* PLACEHOLDER */
+
+	&::placeholder {
+		color: var(--mds-form-control-base-foreground-placeholder-color);
+	}
+
+	/* STATUS */
+
+	&:hover,
+	&.mock-hover {
+		border-color: var(--mds-form-control-base-border-color-hover);
+	}
+
+	/* focus (same for all the states) */
+
+	&:focus,
+	&.mock-focus {
+		border-color: var(--mds-color-focus-action-internal);
+		outline: 3px solid var(--mds-color-focus-action-external);
+		outline-offset: 0;
+	}
+
+	/* READONLY */
+
+	&:read-only {
+		color: var(--mds-form-control-readonly-foreground-color);
+		background-color: var(--mds-form-control-readonly-surface-color);
+		border-color: var(--mds-form-control-readonly-border-color);
+		box-shadow: none;
+	}
+
+	/* DISABLED */
+
+	&:disabled {
+		color: var(--mds-form-control-disabled-foreground-color);
+		background-color: var(--mds-form-control-disabled-surface-color);
+		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,
+		&.mock-hover {
+			border-color: var(--mds-form-control-invalid-border-color-hover);
+		}
+
+		&:focus,
+		&.mock-focus {
+			border-color: var(--mds-color-focus-critical-internal);
+			outline-color: var(--mds-color-focus-critical-external);
+		}
+	}
+
+	/* DATE/TIME */
+	&[type='month'],
+	&[type='date'],
+	&[type='time'],
+	&[type='datetime-local'] {
+		/* browsers set a specific width for these controls, we want to keep it */
+		width: initial;
+
+		/* show the native icon dimmed if disabled (hidden in Chrome) */
+		&:disabled::-webkit-calendar-picker-indicator {
+			visibility: visible;
+			opacity: 0.5;
+		}
+
+		/* show the icon if readonly
+    notice: don't change the "[readonly]" selector to ":readonly" because it's needed to overwrite the specificity in Chrome */
+		&[readonly]::-webkit-calendar-picker-indicator {
+			visibility: visible;
+		}
+	}
+
+	/* we override the default icon with the Flight corresponding one
+  notice: the original in Chrome has two assets, one for light and one for dark mode, and uses a special syntax, but apparently it doesn't work if used in a stylesheet */
+	&[type='month'],
+	&[type='date'],
+	&[type='datetime-local'] {
+		&::-webkit-calendar-picker-indicator {
+			background-image: var(
+				--mds-form-text-input-background-image-data-url-date
+			);
+			background-position: center center;
+			background-size: var(--mds-form-text-input-background-image-size);
+		}
+	}
+
+	&[type='time'] {
+		&::-webkit-calendar-picker-indicator {
+			background-image: var(
+				--mds-form-text-input-background-image-data-url-time
+			);
+			background-position: center center;
+			background-size: var(--mds-form-text-input-background-image-size);
+		}
+	}
+
+	/* SEARCH */
+	&[type='search'] {
+		padding-left: calc(var(--mds-form-control-padding) + 24px);
+		background-image: var(
+			--mds-form-text-input-background-image-data-url-search
+		);
+		background-repeat: no-repeat;
+		background-position: var(
+				--mds-form-text-input-background-image-position-x
+			)
+			50%;
+		background-size: var(--mds-form-text-input-background-image-size);
+
+		&::-webkit-search-cancel-button {
+			width: var(--mds-form-text-input-background-image-size);
+			height: var(--mds-form-text-input-background-image-size);
+			background-image: var(
+				--mds-form-text-input-background-image-data-url-search-cancel
+			);
+			background-position: center center;
+			background-size: var(--mds-form-text-input-background-image-size);
+			-webkit-appearance: none;
+		}
+
+		&.loading {
+			background-image: var(
+				--mds-form-text-input-background-image-data-url-search-loading
+			);
+		}
+	}
+}
+
+/* this is essentially a no-op since the base styles are already medium-sized */
+.size-medium {
+	composes: mds-typography-legacy-body-200 from global;
+	padding: var(--mds-form-control-padding);
+}
+
+.size-large {
+	composes: mds-typography-legacy-body-300 from global;
+	padding: 11px;
+	min-height: 3rem;
+}

package/dist/components/form/text-input/styles.module.css.js

@@ -0,0 +1,15 @@
+const o = "invalid__rrYph", e = "loading__O7Vv0", i = {
+  "text-input": "text-input__Xudum mds-typography-font-weight-regular",
+  "mock-hover": "mock-hover__-ItMX",
+  "mock-focus": "mock-focus__S6jof",
+  invalid: o,
+  loading: e,
+  "size-medium": "size-medium__-UzIQ mds-typography-legacy-body-200",
+  "size-large": "size-large__Hceu2 mds-typography-legacy-body-300"
+};
+export {
+  i as default,
+  o as invalid,
+  e as loading
+};
+//# sourceMappingURL=styles.module.css.js.map

package/dist/components/form/text-input/styles.module.css.js.map

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

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

@@ -0,0 +1,88 @@
+/*
+* FORM > TEXTAREA
+*/
+
+/* "BASE" CONTROL */
+
+.textarea {
+	composes: mds-typography-font-weight-regular from global;
+	width: 100%;
+	max-width: 100%;
+	min-height: 36px;
+	padding: var(--mds-form-control-padding);
+	color: var(--mds-form-control-base-foreground-value-color);
+	background-color: var(--mds-form-control-base-surface-color-default);
+	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-inset-box-shadow);
+	resize: vertical;
+
+	/* PLACEHOLDER */
+
+	&::placeholder {
+		color: var(--mds-form-control-base-foreground-placeholder-color);
+	}
+
+	/* 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;
+	}
+
+	/* READONLY */
+
+	&:read-only {
+		color: var(--mds-form-control-readonly-foreground-color);
+		background-color: var(--mds-form-control-readonly-surface-color);
+		border-color: var(--mds-form-control-readonly-border-color);
+		box-shadow: none;
+	}
+
+	/* DISABLED */
+
+	&:disabled {
+		color: var(--mds-form-control-disabled-foreground-color);
+		background-color: var(--mds-form-control-disabled-surface-color);
+		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);
+		}
+	}
+}
+
+/* this is essentially a no-op since the base styles are already medium-sized */
+.medium {
+	composes: mds-typography-legacy-body-200 from global;
+	padding: var(--mds-form-control-padding);
+}
+
+.large {
+	composes: mds-typography-legacy-body-300 from global;
+	padding: 11px;
+	min-height: 5rem;
+}

package/dist/components/form/textarea/form-textarea.module.css.js

@@ -0,0 +1,14 @@
+const a = "textarea__3MZYV mds-typography-font-weight-regular", e = "invalid__Q80EM", t = "medium__G2gPs mds-typography-legacy-body-200", d = "large__0Y-7C mds-typography-legacy-body-300", o = {
+  textarea: a,
+  invalid: e,
+  medium: t,
+  large: d
+};
+export {
+  o as default,
+  e as invalid,
+  d as large,
+  t as medium,
+  a as textarea
+};
+//# sourceMappingURL=form-textarea.module.css.js.map

package/dist/components/form/textarea/form-textarea.module.css.js.map

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

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

@@ -0,0 +1,19 @@
+import { HTMLProps, ReactNode } from 'react';
+interface TextAreaFieldProps {
+    isInvalid?: boolean;
+    isLoading?: boolean;
+    isRequired?: boolean;
+    isOptional?: boolean;
+    id?: string;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    field: HTMLProps<HTMLTextAreaElement>;
+    size?: 'medium' | 'large';
+    disabled?: boolean;
+}
+declare const TextAreaField: {
+    ({ isInvalid, isLoading, isRequired, isOptional, id, label, helperText, error, field, size, ...rest }: TextAreaFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { TextAreaField };

package/dist/components/form/textarea/index.js

@@ -0,0 +1,74 @@
+import { jsx as s } from "react/jsx-runtime";
+import f from "classnames";
+import { useId as y } from "react";
+import { Field as A } from "../field/index.js";
+import m from "./form-textarea.module.css.js";
+const F = ({
+  isInvalid: t,
+  isLoading: l,
+  className: e,
+  id: r,
+  field: a,
+  size: i,
+  error: o,
+  ...d
+}) => /* @__PURE__ */ s(
+  "textarea",
+  {
+    id: r,
+    className: f(
+      m.textarea,
+      m[i],
+      {
+        [m.invalid]: t
+      },
+      e
+    ),
+    "aria-describedby": `${o ? "error" : "helper-text"}-${r}`,
+    ...a,
+    ...d
+  }
+), I = ({
+  isInvalid: t,
+  isLoading: l,
+  isRequired: e,
+  isOptional: r,
+  id: a,
+  label: i,
+  helperText: o,
+  error: d,
+  field: c,
+  size: p = "medium",
+  ...x
+}) => {
+  const u = y(), n = a ?? u;
+  return /* @__PURE__ */ s(
+    A,
+    {
+      label: i,
+      helperText: o,
+      error: d,
+      isRequired: e,
+      isOptional: r,
+      id: n,
+      layout: "vertical",
+      children: /* @__PURE__ */ s(
+        F,
+        {
+          id: n,
+          isInvalid: t,
+          isLoading: l,
+          required: e,
+          field: c,
+          size: p,
+          ...x
+        }
+      )
+    }
+  );
+};
+I.displayName = "TextAreaField";
+export {
+  I as TextAreaField
+};
+//# sourceMappingURL=index.js.map

package/dist/components/form/textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/textarea/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { useId } from 'react'\nimport { Field } from '../field'\nimport type { HTMLProps, ReactNode } from 'react'\nimport s from './form-textarea.module.css'\n\ninterface TextAreaBaseProps {\n\tisInvalid?: boolean\n\tisLoading?: boolean\n\trequired?: boolean\n\tclassName?: string\n\tid: string\n\tfield: HTMLProps<HTMLTextAreaElement>\n\tsize: 'medium' | 'large'\n\terror?: ReactNode\n\tdisabled?: boolean\n}\n\nconst TextAreaBase = ({\n\tisInvalid,\n\tisLoading,\n\tclassName,\n\tid,\n\tfield,\n\tsize,\n\terror,\n\t...rest\n}: TextAreaBaseProps) => {\n\treturn (\n\t\t<textarea\n\t\t\tid={id}\n\t\t\tclassName={classNames(\n\t\t\t\ts.textarea,\n\t\t\t\ts[size],\n\t\t\t\t{\n\t\t\t\t\t[s.invalid]: isInvalid,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\taria-describedby={`${error ? 'error' : 'helper-text'}-${id}`}\n\t\t\t{...field}\n\t\t\t{...rest}\n\t\t/>\n\t)\n}\n\ninterface TextAreaFieldProps {\n\tisInvalid?: boolean\n\tisLoading?: boolean\n\tisRequired?: boolean\n\tisOptional?: boolean\n\tid?: string\n\tlabel?: ReactNode\n\thelperText?: ReactNode\n\terror?: ReactNode\n\tfield: HTMLProps<HTMLTextAreaElement>\n\tsize?: 'medium' | 'large'\n\tdisabled?: boolean\n}\n\nconst TextAreaField = ({\n\tisInvalid,\n\tisLoading,\n\tisRequired,\n\tisOptional,\n\tid,\n\tlabel,\n\thelperText,\n\terror,\n\tfield,\n\tsize = 'medium',\n\t...rest\n}: TextAreaFieldProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\n\treturn (\n\t\t<Field\n\t\t\tlabel={label}\n\t\t\thelperText={helperText}\n\t\t\terror={error}\n\t\t\tisRequired={isRequired}\n\t\t\tisOptional={isOptional}\n\t\t\tid={inputId}\n\t\t\tlayout=\"vertical\"\n\t\t>\n\t\t\t<TextAreaBase\n\t\t\t\tid={inputId}\n\t\t\t\tisInvalid={isInvalid}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\trequired={isRequired}\n\t\t\t\tfield={field}\n\t\t\t\tsize={size}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t</Field>\n\t)\n}\n\nTextAreaField.displayName = 'TextAreaField'\n\nexport { TextAreaField }\n"],"names":["TextAreaBase","isInvalid","isLoading","className","id","field","size","error","rest","jsx","classNames","s","TextAreaField","isRequired","isOptional","label","helperText","generatedId","useId","inputId","Field"],"mappings":";;;;;AAkBA,MAAMA,IAAe,CAAC;AAAA,EACrB,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,IAAAL;AAAA,IACA,WAAWM;AAAA,MACVC,EAAE;AAAA,MACFA,EAAEL,CAAI;AAAA,MACN;AAAA,QACC,CAACK,EAAE,OAAO,GAAGV;AAAA,MAAA;AAAA,MAEdE;AAAA,IAAA;AAAA,IAED,oBAAkB,GAAGI,IAAQ,UAAU,aAAa,IAAIH,CAAE;AAAA,IACzD,GAAGC;AAAA,IACH,GAAGG;AAAA,EAAA;AAAA,GAmBDI,IAAgB,CAAC;AAAA,EACtB,WAAAX;AAAA,EACA,WAAAC;AAAA,EACA,YAAAW;AAAA,EACA,YAAAC;AAAA,EACA,IAAAV;AAAA,EACA,OAAAW;AAAA,EACA,YAAAC;AAAA,EACA,OAAAT;AAAA,EACA,OAAAF;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGE;AACJ,MAA0B;AACzB,QAAMS,IAAcC,EAAA,GACdC,IAAUf,KAAMa;AAEtB,SACC,gBAAAR;AAAA,IAACW;AAAA,IAAA;AAAA,MACA,OAAAL;AAAA,MACA,YAAAC;AAAA,MACA,OAAAT;AAAA,MACA,YAAAM;AAAA,MACA,YAAAC;AAAA,MACA,IAAIK;AAAA,MACJ,QAAO;AAAA,MAEP,UAAA,gBAAAV;AAAA,QAACT;AAAA,QAAA;AAAA,UACA,IAAImB;AAAA,UACJ,WAAAlB;AAAA,UACA,WAAAC;AAAA,UACA,UAAUW;AAAA,UACV,OAAAR;AAAA,UACA,MAAAC;AAAA,UACC,GAAGE;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;AAEAI,EAAc,cAAc;"}

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

@@ -0,0 +1,164 @@
+/**
+ * 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/form-toggle.module.scss.js

@@ -0,0 +1,12 @@
+const o = "toggle__PmDvt", t = "control__GLB77", c = "facade__-n7d2", a = {
+  toggle: o,
+  control: t,
+  facade: c
+};
+export {
+  t as control,
+  a as default,
+  c as facade,
+  o as toggle
+};
+//# sourceMappingURL=form-toggle.module.scss.js.map

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

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

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

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