@hashicorp/mds-react 0.9.3 → 0.9.5

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-interface FieldsetProps {
+interface FieldsetProps extends React.PropsWithChildren {
     isRequired?: boolean;
     isOptional?: boolean;
     legend?: ReactNode;
@@ -7,7 +7,6 @@ interface FieldsetProps {
     error?: ReactNode;
     className?: string;
     layout?: 'vertical' | 'horizontal';
-    children: ReactNode;
     id?: string;
     testingKey?: string;
 }

package/components/form/fieldset/index.js

@@ -0,0 +1,65 @@
+import { jsxs as I, jsx as r } from "react/jsx-runtime";
+import m from "classnames";
+import { useId as x } from "react";
+import { Legend as g } from "../legend/index.js";
+import { HelperText as u } from "../helper-text/index.js";
+import { Error as j } from "../error/index.js";
+import e from "./form-fieldset.module.css.js";
+const F = ({
+  isRequired: i,
+  isOptional: a,
+  legend: s,
+  helperText: t,
+  error: l,
+  className: c,
+  layout: d,
+  children: n,
+  id: p,
+  testingKey: f,
+  ...N
+}) => {
+  const h = x(), o = p ?? h;
+  return /* @__PURE__ */ I(
+    "fieldset",
+    {
+      className: m(e.group, d ? e[d] : null, c),
+      id: o,
+      "data-testid": f,
+      ...N,
+      children: [
+        s && /* @__PURE__ */ r(
+          g,
+          {
+            isOptional: a,
+            isRequired: i,
+            className: e.legend,
+            children: s
+          }
+        ),
+        t && /* @__PURE__ */ r(
+          u,
+          {
+            controlId: `${o}-help`,
+            className: e["helper-text"],
+            children: t
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: m(e["control-fields-wrapper"], {
+              [e["has-legend"]]: s
+            }),
+            children: n
+          }
+        ),
+        l && /* @__PURE__ */ r(j, { controlId: `${o}-error`, className: e.error, children: l })
+      ]
+    }
+  );
+};
+F.displayName = "Fieldset";
+export {
+  F as Fieldset
+};
+//# sourceMappingURL=index.js.map

package/components/form/fieldset/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/fieldset/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { useId } from 'react'\nimport { Legend } from '../legend'\nimport { HelperText } from '../helper-text'\nimport { Error } from '../error'\nimport type { ReactNode } from 'react'\nimport s from './form-fieldset.module.css'\n\ninterface FieldsetProps extends React.PropsWithChildren {\n\tisRequired?: boolean\n\tisOptional?: boolean\n\tlegend?: ReactNode\n\thelperText?: ReactNode\n\terror?: ReactNode\n\tclassName?: string\n\tlayout?: 'vertical' | 'horizontal'\n\tid?: string\n\ttestingKey?: string\n}\n\nconst Fieldset = ({\n\tisRequired,\n\tisOptional,\n\tlegend,\n\thelperText,\n\terror,\n\tclassName,\n\tlayout,\n\tchildren,\n\tid,\n\ttestingKey,\n\t...rest\n}: FieldsetProps) => {\n\tconst generatedId = useId()\n\tconst fieldsetId = id ?? generatedId\n\n\treturn (\n\t\t<fieldset\n\t\t\tclassName={classNames(s.group, layout ? s[layout] : null, className)}\n\t\t\tid={fieldsetId}\n\t\t\tdata-testid={testingKey}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{legend && (\n\t\t\t\t<Legend\n\t\t\t\t\tisOptional={isOptional}\n\t\t\t\t\tisRequired={isRequired}\n\t\t\t\t\tclassName={s.legend}\n\t\t\t\t>\n\t\t\t\t\t{legend}\n\t\t\t\t</Legend>\n\t\t\t)}\n\t\t\t{helperText && (\n\t\t\t\t<HelperText\n\t\t\t\t\tcontrolId={`${fieldsetId}-help`}\n\t\t\t\t\tclassName={s['helper-text']}\n\t\t\t\t>\n\t\t\t\t\t{helperText}\n\t\t\t\t</HelperText>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tclassName={classNames(s['control-fields-wrapper'], {\n\t\t\t\t\t[s['has-legend']]: legend,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t\t{error && (\n\t\t\t\t<Error controlId={`${fieldsetId}-error`} className={s.error}>\n\t\t\t\t\t{error}\n\t\t\t\t</Error>\n\t\t\t)}\n\t\t</fieldset>\n\t)\n}\n\nFieldset.displayName = 'Fieldset'\n\nexport type { FieldsetProps }\nexport { Fieldset }\n"],"names":["Fieldset","isRequired","isOptional","legend","helperText","error","className","layout","children","id","testingKey","rest","generatedId","useId","fieldsetId","jsxs","classNames","s","jsx","Legend","HelperText","Error"],"mappings":";;;;;;;AAoBA,MAAMA,IAAW,CAAC;AAAA,EACjB,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGC;AACJ,MAAqB;AACpB,QAAMC,IAAcC,EAAA,GACdC,IAAaL,KAAMG;AAEzB,SACC,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAWC,EAAWC,EAAE,OAAOV,IAASU,EAAEV,CAAM,IAAI,MAAMD,CAAS;AAAA,MACnE,IAAIQ;AAAA,MACJ,eAAaJ;AAAA,MACZ,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAR,KACA,gBAAAe;AAAA,UAACC;AAAA,UAAA;AAAA,YACA,YAAAjB;AAAA,YACA,YAAAD;AAAA,YACA,WAAWgB,EAAE;AAAA,YAEZ,UAAAd;AAAA,UAAA;AAAA,QAAA;AAAA,QAGFC,KACA,gBAAAc;AAAA,UAACE;AAAA,UAAA;AAAA,YACA,WAAW,GAAGN,CAAU;AAAA,YACxB,WAAWG,EAAE,aAAa;AAAA,YAEzB,UAAAb;AAAA,UAAA;AAAA,QAAA;AAAA,QAGH,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAWF,EAAWC,EAAE,wBAAwB,GAAG;AAAA,cAClD,CAACA,EAAE,YAAY,CAAC,GAAGd;AAAA,YAAA,CACnB;AAAA,YAEA,UAAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAEDH,KACA,gBAAAa,EAACG,GAAA,EAAM,WAAW,GAAGP,CAAU,UAAU,WAAWG,EAAE,OACpD,UAAAZ,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIJ;AAEAL,EAAS,cAAc;"}

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

@@ -1,5 +1,5 @@
-@import '../../../styles/mixins/button.scss';
-@import '../../../../../mds-tokens/src/helper-classes/typography';
+@use '../../../styles/mixins/button.scss' as *;
+@use '../../../../../mds-tokens/src/helper-classes/typography' as *;
 
 .file-input {
 	@extend .mds-typography-legacy-body-200;

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

@@ -0,0 +1,7 @@
+const t = {
+  "file-input": "file-input__kBoO-"
+};
+export {
+  t as default
+};
+//# sourceMappingURL=form-file-input.module.scss.js.map

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

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

package/components/form/file-input/index.js

@@ -0,0 +1,68 @@
+import { jsx as p } from "react/jsx-runtime";
+import { useId as a } from "react";
+import { Field as I } from "../field/index.js";
+import F from "./form-file-input.module.scss.js";
+const u = ({
+  isRequired: i,
+  className: l,
+  id: e,
+  field: r,
+  error: n,
+  ...d
+}) => {
+  const t = a();
+  return /* @__PURE__ */ p(
+    "input",
+    {
+      type: "file",
+      required: i,
+      id: e ?? t,
+      className: F["file-input"],
+      "aria-describedby": `${n ? "error" : "helper-text"}-${e}`,
+      ...r,
+      ...d
+    }
+  );
+};
+u.displayName = "FileInputBase";
+const f = ({
+  id: i,
+  label: l,
+  helperText: e,
+  error: r,
+  field: n,
+  className: d,
+  isRequired: t,
+  isOptional: o,
+  ...m
+}) => {
+  const c = a(), s = i ?? c;
+  return /* @__PURE__ */ p(
+    I,
+    {
+      label: l,
+      helperText: e,
+      error: r,
+      isRequired: t,
+      isOptional: o,
+      id: s,
+      layout: "vertical",
+      className: d,
+      children: /* @__PURE__ */ p(
+        u,
+        {
+          id: s,
+          isRequired: t,
+          field: n,
+          ...m
+        }
+      )
+    }
+  );
+};
+f.displayName = "FileInputField";
+export {
+  u as FileInputBase,
+  f as FileInputField
+};
+//# sourceMappingURL=index.js.map

package/components/form/file-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/file-input/index.tsx"],"sourcesContent":["import type { HTMLProps, ReactNode } from 'react'\nimport { useId } from 'react'\nimport { Field } from '../field'\nimport s from './form-file-input.module.scss'\n\ninterface FileInputBaseProps {\n\tisRequired?: boolean\n\tclassName?: string\n\tid?: string\n\n\t/**\n\t * Can be used to supply any props that the native `<input>` element supports.\n\t * Since this is for file input, we omit `type`, see here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file\n\t */\n\tfield: Omit<HTMLProps<HTMLInputElement>, 'type' | 'id'>\n\terror?: ReactNode\n}\n\nconst FileInputBase = ({\n\tisRequired,\n\tclassName,\n\tid,\n\tfield,\n\terror,\n\t...rest\n}: FileInputBaseProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\n\treturn (\n\t\t<input\n\t\t\ttype=\"file\"\n\t\t\trequired={isRequired}\n\t\t\tid={inputId}\n\t\t\tclassName={s['file-input']}\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\nFileInputBase.displayName = 'FileInputBase'\n\ninterface FileInputFieldProps extends FileInputBaseProps {\n\tlabel?: ReactNode\n\thelperText?: ReactNode\n\terror?: ReactNode\n\tisOptional?: boolean\n}\n\nconst FileInputField = ({\n\tid,\n\tlabel,\n\thelperText,\n\terror,\n\tfield,\n\tclassName,\n\tisRequired,\n\tisOptional,\n\t...rest\n}: FileInputFieldProps) => {\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\tclassName={className}\n\t\t>\n\t\t\t<FileInputBase\n\t\t\t\tid={inputId}\n\t\t\t\tisRequired={isRequired}\n\t\t\t\tfield={field}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t</Field>\n\t)\n}\n\nFileInputField.displayName = 'FileInputField'\n\nexport { FileInputBase, FileInputField }\n"],"names":["FileInputBase","isRequired","className","id","field","error","rest","generatedId","useId","jsx","s","FileInputField","label","helperText","isOptional","inputId","Field"],"mappings":";;;;AAkBA,MAAMA,IAAgB,CAAC;AAAA,EACtB,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACJ,MAA0B;AACzB,QAAMC,IAAcC,EAAA;AAGpB,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,MAAK;AAAA,MACL,UAAUR;AAAA,MACV,IANcE,KAAMI;AAAA,MAOpB,WAAWG,EAAE,YAAY;AAAA,MACzB,oBAAkB,GAAGL,IAAQ,UAAU,aAAa,IAAIF,CAAE;AAAA,MACzD,GAAGC;AAAA,MACH,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAN,EAAc,cAAc;AAS5B,MAAMW,IAAiB,CAAC;AAAA,EACvB,IAAAR;AAAA,EACA,OAAAS;AAAA,EACA,YAAAC;AAAA,EACA,OAAAR;AAAA,EACA,OAAAD;AAAA,EACA,WAAAF;AAAA,EACA,YAAAD;AAAA,EACA,YAAAa;AAAA,EACA,GAAGR;AACJ,MAA2B;AAC1B,QAAMC,IAAcC,EAAA,GACdO,IAAUZ,KAAMI;AAEtB,SACC,gBAAAE;AAAA,IAACO;AAAA,IAAA;AAAA,MACA,OAAAJ;AAAA,MACA,YAAAC;AAAA,MACA,OAAAR;AAAA,MACA,YAAAJ;AAAA,MACA,YAAAa;AAAA,MACA,IAAIC;AAAA,MACJ,QAAO;AAAA,MACP,WAAAb;AAAA,MAEA,UAAA,gBAAAO;AAAA,QAACT;AAAA,QAAA;AAAA,UACA,IAAIe;AAAA,UACJ,YAAAd;AAAA,UACA,OAAAG;AAAA,UACC,GAAGE;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;AAEAK,EAAe,cAAc;"}

package/components/form/helper-text/form-helper-text.module.css.js

@@ -0,0 +1,7 @@
+const e = {
+  "helper-text": "helper-text__4mh4z mds-typography-legacy-body-100 mds-typography-font-weight-regular"
+};
+export {
+  e as default
+};
+//# sourceMappingURL=form-helper-text.module.css.js.map

package/components/form/helper-text/form-helper-text.module.css.js.map

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

package/components/form/helper-text/index.js

@@ -0,0 +1,22 @@
+import { jsx as p } from "react/jsx-runtime";
+import s from "classnames";
+import i from "./form-helper-text.module.css.js";
+const o = ({
+  children: r,
+  className: t,
+  controlId: e,
+  ...m
+}) => /* @__PURE__ */ p(
+  "div",
+  {
+    className: s(i["helper-text"], t),
+    id: e ? `helper-text-${e}` : void 0,
+    ...m,
+    children: r
+  }
+);
+o.displayName = "HelperText";
+export {
+  o as HelperText
+};
+//# sourceMappingURL=index.js.map

package/components/form/helper-text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/helper-text/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { ReactNode } from 'react'\nimport s from './form-helper-text.module.css'\n\ninterface HelperTextProps {\n\tchildren: ReactNode\n\tclassName?: string\n\tcontrolId?: string\n}\n\nconst HelperText = ({\n\tchildren,\n\tclassName,\n\tcontrolId,\n\t...rest\n}: HelperTextProps) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(s['helper-text'], className)}\n\t\t\tid={controlId ? `helper-text-${controlId}` : undefined}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nHelperText.displayName = 'HelperText'\n\nexport { HelperText }\n"],"names":["HelperText","children","className","controlId","rest","jsx","classNames","s"],"mappings":";;;AAUA,MAAMA,IAAa,CAAC;AAAA,EACnB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC,EAAWC,EAAE,aAAa,GAAGL,CAAS;AAAA,IACjD,IAAIC,IAAY,eAAeA,CAAS,KAAK;AAAA,IAC5C,GAAGC;AAAA,IAEH,UAAAH;AAAA,EAAA;AAAA;AAKJD,EAAW,cAAc;"}

package/components/form/indicator/form-indicator.module.css.js

@@ -0,0 +1,8 @@
+const o = "optional__xEN-m mds-typography-legacy-body-100 mds-typography-font-weight-regular", t = {
+  optional: o
+};
+export {
+  t as default,
+  o as optional
+};
+//# sourceMappingURL=form-indicator.module.css.js.map

package/components/form/indicator/form-indicator.module.css.js.map

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

package/components/form/indicator/index.js

@@ -0,0 +1,23 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Badge as a } from "../../badge/index.js";
+import { localize as i } from "../../../utils/i18n/index.js";
+import "../../../utils/i18n/helpers/locale-provider.js";
+import { useLocale as n } from "../../../utils/i18n/helpers/use-locale.js";
+import m from "./form-indicator.module.css.js";
+const s = ({ isOptional: r, isRequired: l }) => {
+  const e = n(), t = r ? m.optional : null;
+  return r ? /* @__PURE__ */ o("span", { "aria-hidden": "true", className: t, children: `(${i("optional", e, "title")})` }) : l ? /* @__PURE__ */ o(
+    a,
+    {
+      "aria-hidden": "true",
+      className: t,
+      size: "small",
+      text: i("required", e, "title")
+    }
+  ) : null;
+};
+s.displayName = "Indicator";
+export {
+  s as Indicator
+};
+//# sourceMappingURL=index.js.map

package/components/form/indicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/indicator/index.tsx"],"sourcesContent":["import { Badge } from '../../badge'\nimport { localize } from '../../../utils/i18n'\nimport { useLocale } from '@web/utils/i18n/helpers'\nimport s from './form-indicator.module.css'\n\ninterface IndicatorProps {\n\tisOptional?: boolean\n\tisRequired?: boolean\n}\n\nconst Indicator = ({ isOptional, isRequired }: IndicatorProps) => {\n\tconst locale = useLocale()\n\n\tconst className = isOptional ? s.optional : null\n\n\tif (isOptional) {\n\t\treturn (\n\t\t\t<span aria-hidden=\"true\" className={className}>\n\t\t\t\t{`(${localize('optional', locale, 'title')})`}\n\t\t\t</span>\n\t\t)\n\t} else if (isRequired) {\n\t\treturn (\n\t\t\t<Badge\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName={className}\n\t\t\t\tsize=\"small\"\n\t\t\t\ttext={localize('required', locale, 'title')}\n\t\t\t/>\n\t\t)\n\t}\n\n\treturn null\n}\n\nIndicator.displayName = 'Indicator'\n\nexport { Indicator }\n"],"names":["Indicator","isOptional","isRequired","locale","useLocale","className","s","jsx","localize","Badge"],"mappings":";;;;;;AAUA,MAAMA,IAAY,CAAC,EAAE,YAAAC,GAAY,YAAAC,QAAiC;AACjE,QAAMC,IAASC,EAAA,GAETC,IAAYJ,IAAaK,EAAE,WAAW;AAE5C,SAAIL,IAEF,gBAAAM,EAAC,QAAA,EAAK,eAAY,QAAO,WAAAF,GACvB,UAAA,IAAIG,EAAS,YAAYL,GAAQ,OAAO,CAAC,KAC3C,IAESD,IAET,gBAAAK;AAAA,IAACE;AAAA,IAAA;AAAA,MACA,eAAY;AAAA,MACZ,WAAAJ;AAAA,MACA,MAAK;AAAA,MACL,MAAMG,EAAS,YAAYL,GAAQ,OAAO;AAAA,IAAA;AAAA,EAAA,IAKtC;AACR;AAEAH,EAAU,cAAc;"}

package/components/form/label/form-label.module.css.js

@@ -0,0 +1,10 @@
+const a = "badges__fd5n1", e = "label__p8mfL mds-typography-legacy-body-200 mds-typography-font-weight-semibold", s = {
+  badges: a,
+  label: e
+};
+export {
+  a as badges,
+  s as default,
+  e as label
+};
+//# sourceMappingURL=form-label.module.css.js.map

package/components/form/label/form-label.module.css.js.map

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

package/components/form/label/index.js

@@ -0,0 +1,33 @@
+import { jsxs as a, jsx as m } from "react/jsx-runtime";
+import c from "classnames";
+import { Indicator as i } from "../indicator/index.js";
+import { Badge as f } from "../../badge/index.js";
+import o from "./form-label.module.css.js";
+const N = ({
+  badgeText: l,
+  className: e,
+  controlId: t,
+  children: n,
+  isRequired: r,
+  isOptional: s,
+  ...p
+}) => /* @__PURE__ */ a(
+  "label",
+  {
+    className: c(o.label, e),
+    htmlFor: t,
+    ...p,
+    children: [
+      /* @__PURE__ */ m("span", { children: n }),
+      s || r || l ? /* @__PURE__ */ a("span", { className: o.badges, children: [
+        l ? /* @__PURE__ */ m(f, { size: "small", text: l }) : null,
+        /* @__PURE__ */ m(i, { isRequired: r, isOptional: s })
+      ] }) : null
+    ]
+  }
+);
+N.displayName = "Label";
+export {
+  N as Label
+};
+//# sourceMappingURL=index.js.map

package/components/form/label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/label/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { Indicator } from '../indicator'\nimport { Badge } from '../../badge'\nimport type { ReactNode } from 'react'\nimport s from './form-label.module.css'\n\ninterface LabelProps {\n\tbadgeText?: string\n\tclassName?: string\n\tcontrolId: string\n\tchildren: ReactNode\n\tisRequired?: boolean\n\tisOptional?: boolean\n}\n\nconst Label = ({\n\tbadgeText,\n\tclassName,\n\tcontrolId,\n\tchildren,\n\tisRequired,\n\tisOptional,\n\t...rest\n}: LabelProps) => {\n\treturn (\n\t\t<label\n\t\t\tclassName={classNames(s.label, className)}\n\t\t\thtmlFor={controlId}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<span>{children}</span>\n\t\t\t{isOptional || isRequired || badgeText ? (\n\t\t\t\t<span className={s.badges}>\n\t\t\t\t\t{badgeText ? <Badge size=\"small\" text={badgeText} /> : null}\n\t\t\t\t\t<Indicator isRequired={isRequired} isOptional={isOptional} />\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t</label>\n\t)\n}\n\nLabel.displayName = 'Label'\n\nexport { Label }\n"],"names":["Label","badgeText","className","controlId","children","isRequired","isOptional","rest","jsxs","classNames","s","jsx","Badge","Indicator"],"mappings":";;;;;AAeA,MAAMA,IAAQ,CAAC;AAAA,EACd,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC,EAAWC,EAAE,OAAOR,CAAS;AAAA,IACxC,SAASC;AAAA,IACR,GAAGI;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAI,EAAC,UAAM,UAAAP,GAAS;AAAA,MACfE,KAAcD,KAAcJ,sBAC3B,QAAA,EAAK,WAAWS,EAAE,QACjB,UAAA;AAAA,QAAAT,sBAAaW,GAAA,EAAM,MAAK,SAAQ,MAAMX,GAAW,IAAK;AAAA,QACvD,gBAAAU,EAACE,GAAA,EAAU,YAAAR,GAAwB,YAAAC,EAAA,CAAwB;AAAA,MAAA,EAAA,CAC5D,IACG;AAAA,IAAA;AAAA,EAAA;AAAA;AAKPN,EAAM,cAAc;"}

package/components/form/legend/form-legend.module.css.js

@@ -0,0 +1,10 @@
+const e = "legend__O8-rs mds-typography-legacy-body-200 mds-typography-font-weight-semibold", d = "badge__rqzw5", g = {
+  legend: e,
+  badge: d
+};
+export {
+  d as badge,
+  g as default,
+  e as legend
+};
+//# sourceMappingURL=form-legend.module.css.js.map

package/components/form/legend/form-legend.module.css.js.map

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

package/components/form/legend/index.js

@@ -0,0 +1,19 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import d from "classnames";
+import { Indicator as c } from "../indicator/index.js";
+import m from "./form-legend.module.css.js";
+const p = ({
+  className: a,
+  isRequired: r,
+  isOptional: s,
+  children: n,
+  ...o
+}) => /* @__PURE__ */ l("legend", { className: d(m.legend, a), ...o, children: [
+  /* @__PURE__ */ e("span", { children: n }),
+  s || r ? /* @__PURE__ */ e("span", { className: m.badge, children: /* @__PURE__ */ e(c, { isRequired: r, isOptional: s }) }) : null
+] });
+p.displayName = "Legend";
+export {
+  p as Legend
+};
+//# sourceMappingURL=index.js.map

package/components/form/legend/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/legend/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport classNames from 'classnames'\nimport { Indicator } from '../indicator'\nimport s from './form-legend.module.css'\n\ninterface LegendProps {\n\tclassName?: string\n\tisRequired?: boolean\n\tisOptional?: boolean\n\tchildren: ReactNode\n}\n\nconst Legend = ({\n\tclassName,\n\tisRequired,\n\tisOptional,\n\tchildren,\n\t...rest\n}: LegendProps) => {\n\treturn (\n\t\t<legend className={classNames(s.legend, className)} {...rest}>\n\t\t\t<span>{children}</span>\n\t\t\t{isOptional || isRequired ? (\n\t\t\t\t<span className={s.badge}>\n\t\t\t\t\t<Indicator isRequired={isRequired} isOptional={isOptional} />\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t</legend>\n\t)\n}\n\nLegend.displayName = 'Legend'\n\nexport { Legend }\n"],"names":["Legend","className","isRequired","isOptional","children","rest","jsxs","classNames","s","jsx","Indicator"],"mappings":";;;;AAYA,MAAMA,IAAS,CAAC;AAAA,EACf,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC,EAAC,YAAO,WAAWC,EAAWC,EAAE,QAAQP,CAAS,GAAI,GAAGI,GACvD,UAAA;AAAA,EAAA,gBAAAI,EAAC,UAAM,UAAAL,GAAS;AAAA,EACfD,KAAcD,IACd,gBAAAO,EAAC,QAAA,EAAK,WAAWD,EAAE,OAClB,UAAA,gBAAAC,EAACC,GAAA,EAAU,YAAAR,GAAwB,YAAAC,EAAA,CAAwB,EAAA,CAC5D,IACG;AAAA,GACL;AAIFH,EAAO,cAAc;"}

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

@@ -0,0 +1,8 @@
+const o = "radio__oZ3hf", a = {
+  radio: o
+};
+export {
+  a as default,
+  o as radio
+};
+//# sourceMappingURL=form-radio.module.scss.js.map

package/components/form/radio/form-radio.module.scss.js.map

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

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

@@ -1,5 +1,5 @@
-import { ComponentProps, HTMLProps, ReactNode } from 'react';
-import { Fieldset } from '../fieldset';
+import { HTMLProps, ReactNode } from 'react';
+import { FieldsetProps } from '../fieldset';
 interface RadioBaseProps {
     id: string;
     required?: boolean;
@@ -28,9 +28,7 @@ declare const RadioField: {
     ({ isInvalid, isLoading, isRequired, isOptional, id, label, helperText, error, field, className, testingKey, ...rest }: RadioFieldProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-interface RadioGroupProps extends ComponentProps<typeof Fieldset> {
-    children: ReactNode;
-}
+type RadioGroupProps = FieldsetProps;
 declare const RadioGroup: {
     Root: {
         ({ layout, legend, isOptional, isRequired, children, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;

package/components/form/radio/index.js

@@ -0,0 +1,100 @@
+import { jsx as d } from "react/jsx-runtime";
+import { useId as g } from "react";
+import { Field as G } from "../field/index.js";
+import { Fieldset as I } from "../fieldset/index.js";
+import b from "classnames";
+import v from "./form-radio.module.scss.js";
+const s = ({
+  id: o,
+  required: r,
+  field: i,
+  className: e,
+  testingKey: a
+}) => /* @__PURE__ */ d(
+  "input",
+  {
+    id: o,
+    type: "radio",
+    className: b(v.radio, e),
+    required: r,
+    "data-testid": a,
+    ...i
+  }
+);
+s.displayName = "RadioBase";
+const l = ({
+  isInvalid: o,
+  isLoading: r,
+  isRequired: i,
+  isOptional: e,
+  id: a,
+  label: p,
+  helperText: c,
+  error: u,
+  field: R,
+  className: y,
+  testingKey: f,
+  ...N
+}) => {
+  const F = g(), t = a ?? F;
+  return /* @__PURE__ */ d(
+    G,
+    {
+      label: p,
+      helperText: c,
+      error: u,
+      isRequired: i,
+      isOptional: e,
+      id: t,
+      layout: "flag",
+      className: y,
+      children: /* @__PURE__ */ d(
+        s,
+        {
+          id: t,
+          required: i,
+          field: { ...R, "aria-describedby": `error-${a}` },
+          testingKey: f,
+          ...N
+        }
+      )
+    }
+  );
+};
+l.displayName = "RadioField";
+const m = ({
+  layout: o = "vertical",
+  legend: r,
+  isOptional: i,
+  isRequired: e,
+  children: a
+}) => /* @__PURE__ */ d(
+  I,
+  {
+    layout: o,
+    legend: r,
+    isOptional: i,
+    isRequired: e,
+    children: a
+  }
+);
+m.displayName = "RadioGroupRoot";
+const n = (o) => /* @__PURE__ */ d(
+  l,
+  {
+    ...o,
+    testingKey: o.testingKey,
+    className: o.className
+  }
+);
+n.displayName = "RadioGroupField";
+const $ = {
+  Root: m,
+  Field: n
+};
+export {
+  s as RadioBase,
+  l as RadioField,
+  $ as RadioGroup
+};
+//# sourceMappingURL=index.js.map

package/components/form/radio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/radio/index.tsx"],"sourcesContent":["import { useId, type HTMLProps, type ReactNode } from 'react'\nimport { Field } from '../field'\nimport { Fieldset, type FieldsetProps } from '../fieldset'\nimport classNames from 'classnames'\nimport s from './form-radio.module.scss'\n\ninterface RadioBaseProps {\n\tid: string\n\trequired?: boolean\n\tfield: HTMLProps<HTMLInputElement>\n\tclassName?: string\n\ttestingKey?: string\n}\n\nconst RadioBase = ({\n\tid,\n\trequired,\n\tfield,\n\tclassName,\n\ttestingKey,\n}: RadioBaseProps) => {\n\treturn (\n\t\t<input\n\t\t\tid={id}\n\t\t\ttype=\"radio\"\n\t\t\tclassName={classNames(s.radio, className)}\n\t\t\trequired={required}\n\t\t\tdata-testid={testingKey}\n\t\t\t{...field}\n\t\t/>\n\t)\n}\n\nRadioBase.displayName = 'RadioBase'\n\ninterface RadioFieldProps {\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<HTMLInputElement>\n\tclassName?: string\n\ttestingKey?: string\n}\n\nconst RadioField = ({\n\tisInvalid,\n\tisLoading,\n\tisRequired,\n\tisOptional,\n\tid,\n\tlabel,\n\thelperText,\n\terror,\n\tfield,\n\tclassName,\n\ttestingKey,\n\t...rest\n}: RadioFieldProps) => {\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=\"flag\"\n\t\t\tclassName={className}\n\t\t>\n\t\t\t<RadioBase\n\t\t\t\tid={inputId}\n\t\t\t\trequired={isRequired}\n\t\t\t\tfield={{ ...field, 'aria-describedby': `error-${id}` }}\n\t\t\t\ttestingKey={testingKey}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t</Field>\n\t)\n}\n\nRadioField.displayName = 'RadioField'\n\ntype RadioGroupProps = FieldsetProps\n\nconst RadioGroupRoot = ({\n\tlayout = 'vertical',\n\tlegend,\n\tisOptional,\n\tisRequired,\n\tchildren,\n}: RadioGroupProps) => {\n\treturn (\n\t\t<Fieldset\n\t\t\tlayout={layout}\n\t\t\tlegend={legend}\n\t\t\tisOptional={isOptional}\n\t\t\tisRequired={isRequired}\n\t\t>\n\t\t\t{children}\n\t\t</Fieldset>\n\t)\n}\n\nRadioGroupRoot.displayName = 'RadioGroupRoot'\n\nconst RadioGroupField = (props: RadioFieldProps) => {\n\treturn (\n\t\t<RadioField\n\t\t\t{...props}\n\t\t\ttestingKey={props.testingKey}\n\t\t\tclassName={props.className}\n\t\t/>\n\t)\n}\n\nRadioGroupField.displayName = 'RadioGroupField'\n\nconst RadioGroup = {\n\tRoot: RadioGroupRoot,\n\tField: RadioGroupField,\n}\n\nexport { RadioGroup, RadioBase, RadioField }\n"],"names":["RadioBase","id","required","field","className","testingKey","jsx","classNames","s","RadioField","isInvalid","isLoading","isRequired","isOptional","label","helperText","error","rest","generatedId","useId","inputId","Field","RadioGroupRoot","layout","legend","children","Fieldset","RadioGroupField","props","RadioGroup"],"mappings":";;;;;;AAcA,MAAMA,IAAY,CAAC;AAAA,EAClB,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AACD,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,IAAAL;AAAA,IACA,MAAK;AAAA,IACL,WAAWM,EAAWC,EAAE,OAAOJ,CAAS;AAAA,IACxC,UAAAF;AAAA,IACA,eAAaG;AAAA,IACZ,GAAGF;AAAA,EAAA;AAAA;AAKPH,EAAU,cAAc;AAgBxB,MAAMS,IAAa,CAAC;AAAA,EACnB,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,IAAAZ;AAAA,EACA,OAAAa;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAb;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGY;AACJ,MAAuB;AACtB,QAAMC,IAAcC,EAAA,GACdC,IAAUnB,KAAMiB;AAEtB,SACC,gBAAAZ;AAAA,IAACe;AAAA,IAAA;AAAA,MACA,OAAAP;AAAA,MACA,YAAAC;AAAA,MACA,OAAAC;AAAA,MACA,YAAAJ;AAAA,MACA,YAAAC;AAAA,MACA,IAAIO;AAAA,MACJ,QAAO;AAAA,MACP,WAAAhB;AAAA,MAEA,UAAA,gBAAAE;AAAA,QAACN;AAAA,QAAA;AAAA,UACA,IAAIoB;AAAA,UACJ,UAAUR;AAAA,UACV,OAAO,EAAE,GAAGT,GAAO,oBAAoB,SAASF,CAAE,GAAA;AAAA,UAClD,YAAAI;AAAA,UACC,GAAGY;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;AAEAR,EAAW,cAAc;AAIzB,MAAMa,IAAiB,CAAC;AAAA,EACvB,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,YAAAX;AAAA,EACA,YAAAD;AAAA,EACA,UAAAa;AACD,MAEE,gBAAAnB;AAAA,EAACoB;AAAA,EAAA;AAAA,IACA,QAAAH;AAAA,IACA,QAAAC;AAAA,IACA,YAAAX;AAAA,IACA,YAAAD;AAAA,IAEC,UAAAa;AAAA,EAAA;AAAA;AAKJH,EAAe,cAAc;AAE7B,MAAMK,IAAkB,CAACC,MAEvB,gBAAAtB;AAAA,EAACG;AAAA,EAAA;AAAA,IACC,GAAGmB;AAAA,IACJ,YAAYA,EAAM;AAAA,IAClB,WAAWA,EAAM;AAAA,EAAA;AAAA;AAKpBD,EAAgB,cAAc;AAE9B,MAAME,IAAa;AAAA,EAClB,MAAMP;AAAA,EACN,OAAOK;AACR;"}

package/components/form/radio-card/RadioCardStory.css

@@ -0,0 +1,21 @@
+.doc-radio-card-list-demo {
+	margin: 0;
+	padding: 0;
+	color: #3b3d45;
+
+	& li {
+		margin: 0;
+		padding: 8px 0 8px 24px;
+		list-style: none;
+		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.78 5.22a.75.75 0 010 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.97-3.97a.75.75 0 011.06 0z' fill='%233b3d45'/%3E%3Cpath d='M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z' fill='%233b3d45'/%3E%3C/svg%3E");
+		background-repeat: no-repeat;
+		background-position: left 9px;
+		background-size: 16px;
+		border-bottom: 1px solid #ddd;
+		font-family: var(--mds-typography-font-stack-text);
+
+		&:last-child {
+			border-bottom: none;
+		}
+	}
+}

package/components/form/radio-card/description.js

@@ -0,0 +1,10 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Text as i } from "../../text/index.js";
+import t from "./form-radio-card.module.css.js";
+function n({ description: r }) {
+  return /* @__PURE__ */ o(i.HDSBody, { className: t.description, size: "100", children: r });
+}
+export {
+  n as default
+};
+//# sourceMappingURL=description.js.map

package/components/form/radio-card/description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"description.js","sources":["../../../../src/components/form/radio-card/description.tsx"],"sourcesContent":["import { Text } from '../../text'\nimport s from './form-radio-card.module.css'\n\nexport default function Description({ description }: { description: string }) {\n\treturn (\n\t\t<Text.HDSBody className={s.description} size=\"100\">\n\t\t\t{description}\n\t\t</Text.HDSBody>\n\t)\n}\n"],"names":["Description","description","jsx","Text","s"],"mappings":";;;AAGA,SAAwBA,EAAY,EAAE,aAAAC,KAAwC;AAC7E,SACC,gBAAAC,EAACC,EAAK,SAAL,EAAa,WAAWC,EAAE,aAAa,MAAK,OAC3C,UAAAH,EAAA,CACF;AAEF;"}

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

@@ -0,0 +1,30 @@
+const t = "control__0w6N4", o = "checked__v5wfQ", c = "disabled__h7JVb", e = "content__IKiN7", n = "label__UR-sm", _ = "description__s8FwT", d = "badges__klktk", l = {
+  "radio-cards": "radio-cards__C4la-",
+  "has-fluid-width": "has-fluid-width__rKqOq",
+  "has-fixed-width": "has-fixed-width__AAAPW",
+  "radio-card": "radio-card__JyN2Z",
+  control: t,
+  checked: o,
+  "control-wrapper": "control-wrapper__00m5o",
+  disabled: c,
+  "align-left": "align-left__lqD3y",
+  "align-center": "align-center__ZMFAS",
+  "control-bottom": "control-bottom__UIViy",
+  "control-left": "control-left__1tHvm",
+  content: e,
+  label: n,
+  description: _,
+  badges: d,
+  "icon-center": "icon-center__zJMDY"
+};
+export {
+  d as badges,
+  o as checked,
+  e as content,
+  t as control,
+  l as default,
+  _ as description,
+  c as disabled,
+  n as label
+};
+//# sourceMappingURL=form-radio-card.module.css.js.map

package/components/form/radio-card/form-radio-card.module.css.js.map

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

package/components/form/radio-card/group.js

@@ -0,0 +1,31 @@
+import { jsx as p } from "react/jsx-runtime";
+import { Fieldset as e } from "../fieldset/index.js";
+import l from "./form-radio-card.module.css.js";
+const c = ({
+  layout: r = "horizontal",
+  isRequired: o,
+  isOptional: a,
+  error: i,
+  legend: d,
+  helperText: m,
+  children: s,
+  ...t
+}) => /* @__PURE__ */ p(
+  e,
+  {
+    className: l["radio-cards"],
+    layout: r,
+    legend: d,
+    isOptional: a,
+    isRequired: o,
+    helperText: m,
+    error: i,
+    ...t,
+    children: s
+  }
+);
+c.displayName = "RadioCardGroup";
+export {
+  c as RadioCardGroup
+};
+//# sourceMappingURL=group.js.map

package/components/form/radio-card/group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","sources":["../../../../src/components/form/radio-card/group.tsx"],"sourcesContent":["import { Fieldset } from '../fieldset'\nimport type { ComponentProps, ReactNode } from 'react'\nimport s from './form-radio-card.module.css'\n\nexport interface RadioCardGroupProps extends ComponentProps<typeof Fieldset> {\n\tchildren: ReactNode\n\tlegend: ReactNode\n}\n\nconst RadioCardGroup = ({\n\tlayout = 'horizontal',\n\tisRequired,\n\tisOptional,\n\terror,\n\tlegend,\n\thelperText,\n\tchildren,\n\t...rest\n}: RadioCardGroupProps) => {\n\treturn (\n\t\t<Fieldset\n\t\t\tclassName={s['radio-cards']}\n\t\t\tlayout={layout}\n\t\t\tlegend={legend}\n\t\t\tisOptional={isOptional}\n\t\t\tisRequired={isRequired}\n\t\t\thelperText={helperText}\n\t\t\terror={error}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</Fieldset>\n\t)\n}\n\nRadioCardGroup.displayName = 'RadioCardGroup'\n\nexport { RadioCardGroup }\n"],"names":["RadioCardGroup","layout","isRequired","isOptional","error","legend","helperText","children","rest","jsx","Fieldset","s"],"mappings":";;;AASA,MAAMA,IAAiB,CAAC;AAAA,EACvB,QAAAC,IAAS;AAAA,EACT,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,WAAWC,EAAE,aAAa;AAAA,IAC1B,QAAAV;AAAA,IACA,QAAAI;AAAA,IACA,YAAAF;AAAA,IACA,YAAAD;AAAA,IACA,YAAAI;AAAA,IACA,OAAAF;AAAA,IACC,GAAGI;AAAA,IAEH,UAAAD;AAAA,EAAA;AAAA;AAKJP,EAAe,cAAc;"}