@hashicorp/mds-react 0.9.0

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

@@ -0,0 +1,109 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { useId as l } from "react";
+import { Field as C } from "../field/index.js";
+import { Fieldset as N } from "../fieldset/index.js";
+import f from "./form-checkbox.module.css.js";
+const m = ({
+  id: e,
+  required: c,
+  field: o,
+  testingKey: t,
+  error: r
+}) => {
+  const n = l();
+  return /* @__PURE__ */ i(
+    "input",
+    {
+      id: e ?? n,
+      type: "checkbox",
+      className: f.checkbox,
+      required: c,
+      "aria-describedby": `${r ? "error" : "helper-text"}-${e}`,
+      "data-testid": t,
+      ...o
+    }
+  );
+};
+m.displayName = "CheckboxBase";
+const p = ({
+  isInvalid: e,
+  isLoading: c,
+  isRequired: o,
+  isOptional: t,
+  id: r,
+  label: n,
+  helperText: s,
+  error: a,
+  field: b,
+  className: h,
+  testingKey: k,
+  ...I
+}) => {
+  const y = l(), d = r ?? y;
+  return /* @__PURE__ */ i(
+    C,
+    {
+      label: n,
+      helperText: s,
+      error: a,
+      isRequired: o,
+      isOptional: t,
+      id: d,
+      layout: "flag",
+      className: h,
+      children: /* @__PURE__ */ i(
+        m,
+        {
+          id: d,
+          required: o,
+          field: b,
+          testingKey: k,
+          error: a,
+          ...I
+        }
+      )
+    }
+  );
+};
+p.displayName = "CheckboxField";
+const u = ({
+  layout: e = "vertical",
+  legend: c,
+  helperText: o,
+  error: t,
+  isOptional: r,
+  isRequired: n,
+  children: s
+}) => /* @__PURE__ */ i(
+  N,
+  {
+    layout: e,
+    legend: c,
+    helperText: o,
+    error: t,
+    isOptional: r,
+    isRequired: n,
+    children: s
+  }
+);
+u.displayName = "CheckboxGroupRoot";
+const x = (e) => /* @__PURE__ */ i(
+  p,
+  {
+    className: e.className,
+    testingKey: e.testingKey,
+    ...e
+  }
+);
+x.displayName = "CheckboxGroupInner";
+const K = {
+  Root: u,
+  Inner: x
+};
+export {
+  m as CheckboxBase,
+  p as CheckboxField,
+  K as CheckboxGroup
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/checkbox/index.tsx"],"sourcesContent":["'use client'\n\nimport {\n\tuseId,\n\ttype ComponentProps,\n\ttype HTMLProps,\n\ttype ReactNode,\n} from 'react'\nimport { Field } from '../field'\nimport { Fieldset } from '../fieldset'\nimport s from './form-checkbox.module.css'\n\ninterface CheckboxBaseProps {\n\tid?: string\n\trequired?: boolean\n\tfield: HTMLProps<HTMLInputElement>\n\ttestingKey?: string\n\terror?: ReactNode\n}\n\nconst CheckboxBase = ({\n\tid,\n\trequired,\n\tfield,\n\ttestingKey,\n\terror,\n}: CheckboxBaseProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\n\treturn (\n\t\t<input\n\t\t\tid={inputId}\n\t\t\ttype=\"checkbox\"\n\t\t\tclassName={s.checkbox}\n\t\t\trequired={required}\n\t\t\taria-describedby={`${error ? 'error' : 'helper-text'}-${id}`}\n\t\t\tdata-testid={testingKey}\n\t\t\t{...field}\n\t\t/>\n\t)\n}\n\nCheckboxBase.displayName = 'CheckboxBase'\n\ninterface CheckboxFieldProps {\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\tdisabled?: boolean\n}\n\nconst CheckboxField = ({\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}: CheckboxFieldProps) => {\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<CheckboxBase\n\t\t\t\tid={inputId}\n\t\t\t\trequired={isRequired}\n\t\t\t\tfield={field}\n\t\t\t\ttestingKey={testingKey}\n\t\t\t\terror={error}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t</Field>\n\t)\n}\n\nCheckboxField.displayName = 'CheckboxField'\n\ninterface CheckboxGroupRootProps extends ComponentProps<typeof Fieldset> {\n\tchildren: ReactNode\n}\n\nconst CheckboxGroupRoot = ({\n\tlayout = 'vertical',\n\tlegend,\n\thelperText,\n\terror,\n\tisOptional,\n\tisRequired,\n\tchildren,\n}: CheckboxGroupRootProps) => {\n\treturn (\n\t\t<Fieldset\n\t\t\tlayout={layout}\n\t\t\tlegend={legend}\n\t\t\thelperText={helperText}\n\t\t\terror={error}\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\nCheckboxGroupRoot.displayName = 'CheckboxGroupRoot'\n\nconst CheckboxGroupInner = (props: CheckboxFieldProps) => {\n\treturn (\n\t\t<CheckboxField\n\t\t\tclassName={props.className}\n\t\t\ttestingKey={props.testingKey}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nCheckboxGroupInner.displayName = 'CheckboxGroupInner'\n\nconst CheckboxGroup = {\n\tRoot: CheckboxGroupRoot,\n\tInner: CheckboxGroupInner,\n}\n\nexport { CheckboxGroup, CheckboxBase, CheckboxField }\n"],"names":["CheckboxBase","id","required","field","testingKey","error","generatedId","jsx","s","CheckboxField","isInvalid","isLoading","isRequired","isOptional","label","helperText","className","rest","Field","inputId","CheckboxGroupRoot","layout","legend","children","Fieldset","props","CheckboxGroupInner","CheckboxGroup"],"mappings":";;;;;;AAoBsB,MACrBA,IAAA,CAAA;AAAA,EACA,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACD,OAAAC;AACC,MAAA;AACA,QAAMC,MAAgB;AAGrB,SAAC,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA;MACA,MAAA;AAAA,MACA,WAAAC,EAAA;AAAA,MACA,UAAAN;AAAA,MACA,oBAAa,GAAAG,IAAA,UAAA,aAAA,IAAAJ,CAAA;AAAA,MACZ,eAAGG;AAAA,MAAA,GAAAD;AAAA,IACL;AAAA,EAEF;AAEA;AAiBAH,EAAM,cAAiB;AAAA,MACtBS,IAAA,CAAA;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,IAAAZ;AAAA,EACA,OAAAa;AAAA,EACA,YAAAC;AAAA,EACA,OAAAV;AAAA,EACA,OAAAF;AAAA,EACA,WAAAa;AAAA,EACA,YAAAZ;AAAA,EACD,GAAAa;AACC,MAAA;AACA,QAAMX,MAAgB;AAGrB,SAAC,gBAAAC;AAAA,IAAAW;AAAA,IAAA;AAAA,MAEA,OAAAJ;AAAA,MACA,YAAAC;AAAA,MACA,OAAAV;AAAA,MACA,YAAAO;AAAA,MACA,YAAAC;AAAA,MACA,IAAAM;AAAA,MACA,QAAA;AAAA,MAEA,WAAAH;AAAA,MAAA,UAAC,gBAAAT;AAAA,QAAAP;AAAA,QAAA;AAAA,UAEA,IAAAmB;AAAA,UACA,UAAAP;AAAA,UACA,OAAAT;AAAA,UACA,YAAAC;AAAA,UACC,OAAAC;AAAA,UAAG,GAAAY;AAAA,QAAA;AAAA,MACL;AAAA,IACD;AAAA,EAEF;AAEA;AAMAR,EAAM,cAAqB;AAAA,MAC1BW,IAAS,CAAA;AAAA,EACT,QAAAC,IAAA;AAAA,EACA,QAAAC;AAAA,EACA,YAAAP;AAAA,EACA,OAAAV;AAAA,EACA,YAAAQ;AAAA,EACA,YAAAD;AAAA,EACD,UAAAW;AACC,MACE,gBAAAhB;AAAA,EAAAiB;AAAA,EAAA;AAAA,IAEA,QAAAH;AAAA,IACA,QAAAC;AAAA,IACA,YAAAP;AAAA,IACA,OAAAV;AAAA,IACA,YAAAQ;AAAA,IAEC,YAAAD;AAAA,IAAA,UAAAW;AAAA,EACF;AAEF;AAIAH,EAAM,cAAsB;AAC3B,UACC,CAAAK,MAAC,gBAAAlB;AAAA,EAAAE;AAAA,EAAA;AAAA,IAEA,aAAY;AAAA,IACX,YAAGgB,EAAA;AAAA,IAAA,GAAAA;AAAA,EACL;AAEF;AAIAC,EAAM,cAAgB;AAAA,MACrBC,IAAM;AAAA,EACN,MAAAP;AAAA,EACD,OAAAM;;"}

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

@@ -0,0 +1,23 @@
+.error {
+	display: flex;
+	gap: 8px;
+	align-items: flex-start;
+	color: var(--mds-form-error-color);
+	composes: mds-typography-legacy-body-100 from global;
+	composes: mds-typography-font-weight-medium from global;
+}
+
+.icon {
+	flex: none;
+	width: var(--mds-form-error-icon-size);
+	height: var(--mds-form-error-icon-size);
+	margin: 2px 0 2px 0;
+}
+
+.content {
+	flex: 1 1 auto;
+}
+
+.message {
+	margin: 0;
+}

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

@@ -0,0 +1,14 @@
+const o = "error__UVBmH mds-typography-legacy-body-100 mds-typography-font-weight-medium", t = "icon__KOCmk", e = "content__tbSUM", n = "message__-Ljv-", s = {
+  error: o,
+  icon: t,
+  content: e,
+  message: n
+};
+export {
+  e as content,
+  s as default,
+  o as error,
+  t as icon,
+  n as message
+};
+//# sourceMappingURL=form-error.module.css.js.map

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

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

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

@@ -0,0 +1,16 @@
+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/dist/components/form/error/index.js

@@ -0,0 +1,22 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import c from "classnames";
+import { IconAlertDiamondFill16 as t } from "@hashicorp/flight-icons/svg-react/alert-diamond-fill-16";
+import s from "./form-error.module.css.js";
+const l = ({ children: e, ...o }) => /* @__PURE__ */ r("p", { className: s.message, ...o, children: e }), n = ({ children: e, className: o, controlId: m, ...a }) => /* @__PURE__ */ i(
+  "div",
+  {
+    className: c(s.error, o),
+    id: m ? `error-${m}` : void 0,
+    ...a,
+    children: [
+      /* @__PURE__ */ r(t, { className: s.icon }),
+      /* @__PURE__ */ r("div", { className: s.content, children: /* @__PURE__ */ r(l, { children: e }) })
+    ]
+  }
+);
+n.displayName = "Error";
+export {
+  n as Error,
+  l as ErrorMessage
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/error/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { ReactNode } from 'react'\nimport { IconAlertDiamondFill16 } from '@hashicorp/flight-icons/svg-react/alert-diamond-fill-16'\nimport s from './form-error.module.css'\n\ninterface ErrorMessageProps {\n\tchildren: ReactNode\n}\n\nconst ErrorMessage = ({ children, ...rest }: ErrorMessageProps) => {\n\treturn (\n\t\t<p className={s.message} {...rest}>\n\t\t\t{children}\n\t\t</p>\n\t)\n}\n\ninterface ErrorProps {\n\tchildren: ReactNode\n\tclassName?: string\n\tcontrolId?: string\n}\n\nconst Error = ({ children, className, controlId, ...rest }: ErrorProps) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(s.error, className)}\n\t\t\tid={controlId ? `error-${controlId}` : undefined}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<IconAlertDiamondFill16 className={s.icon} />\n\t\t\t<div className={s.content}>\n\t\t\t\t<ErrorMessage>{children}</ErrorMessage>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\nError.displayName = 'Error'\n\nexport type { ErrorProps, ErrorMessageProps }\nexport { Error, ErrorMessage }\n"],"names":["ErrorMessage","children","rest","Error","className","controlId","jsxs","classNames","jsx","IconAlertDiamondFill16"],"mappings":";;;;AASA,MAAMA,IAAe,CAAC,EAAE,UAAAC,GAAU,GAAGC,0BAElC,KAAA,EAAE,WAAW,EAAE,SAAU,GAAGA,GAC3B,UAAAD,GACF,GAUIE,IAAQ,CAAC,EAAE,UAAAF,GAAU,WAAAG,GAAW,WAAAC,GAAW,GAAGH,QAElD,gBAAAI;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC,EAAW,EAAE,OAAOH,CAAS;AAAA,IACxC,IAAIC,IAAY,SAASA,CAAS,KAAK;AAAA,IACtC,GAAGH;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAM,EAACC,GAAA,EAAuB,WAAW,EAAE,KAAA,CAAM;AAAA,MAC3C,gBAAAD,EAAC,SAAI,WAAW,EAAE,SACjB,UAAA,gBAAAA,EAACR,GAAA,EAAc,UAAAC,GAAS,EAAA,CACzB;AAAA,IAAA;AAAA,EAAA;AAAA;AAKHE,EAAM,cAAc;"}

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

@@ -0,0 +1,79 @@
+/* FORM > FIELD */
+
+/* "VERTICAL" LAYOUT
+ * used for text-input, textarea, select
+ */
+
+.vertical {
+	display: grid;
+	justify-items: start;
+	width: 100%; /* we want the input element to fill the parent container */
+
+	& .label {
+		width: fit-content; /* needed to avoid extra invisible space since the <label> is interactive */
+	}
+
+	& .control {
+		display: flex; /* to avoid extra whitespace when the content is an <input>, <select>, or <textarea> (inline elements) */
+		justify-self: stretch; /* allows <input> and <textarea> to go full-width */
+
+		&:not(:first-child) {
+			margin-top: 8px;
+		}
+
+		&:not(:last-child) {
+			margin-bottom: 8px;
+		}
+	}
+
+	& .helper-text:not(:first-child) {
+		margin-top: 4px;
+	}
+
+	& .helper-text + .helper-text {
+		margin-top: 2px;
+	}
+}
+
+/* 
+* "FLAG" LAYOUT
+* used for checkbox, radio, toggle
+* see https://codepen.io/didoo/pen/xxYPNeY
+*/
+
+.flag {
+	display: grid;
+	grid-auto-flow: row;
+	grid-template-areas:
+		'control label'
+		'control helper-text'
+		'control error';
+	grid-template-rows: auto auto auto;
+	grid-template-columns: auto 1fr;
+	justify-items: start;
+
+	& .label {
+		grid-area: label;
+		width: fit-content; /* needed to avoid extra invisible space since the <label> is interactive */
+	}
+
+	& .helper-text {
+		grid-area: helper-text;
+		margin-top: 4px;
+	}
+
+	& .control {
+		display: flex; /* to avoid extra whitespace when the content is an <input>, <select>, or <textarea> (inline elements) */
+		grid-area: control;
+
+		&:not(:only-child) {
+			margin-top: 2px; /* the line height of the label is bigger than the control size */
+			margin-right: 8px;
+		}
+	}
+
+	& .error {
+		grid-area: error;
+		margin-top: 4px;
+	}
+}

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

@@ -0,0 +1,17 @@
+const l = "vertical__Ond75", t = "label__yNHVo", r = "control__fiVMP", e = "flag__9bLjU", o = "error__xwHck", c = {
+  vertical: l,
+  label: t,
+  control: r,
+  "helper-text": "helper-text__4l6Tt",
+  flag: e,
+  error: o
+};
+export {
+  r as control,
+  c as default,
+  o as error,
+  e as flag,
+  t as label,
+  l as vertical
+};
+//# sourceMappingURL=form-field.module.css.js.map

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

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

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

@@ -0,0 +1,19 @@
+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/dist/components/form/field/index.js

@@ -0,0 +1,46 @@
+import { jsxs as N, jsx as o } from "react/jsx-runtime";
+import f from "classnames";
+import { Label as h } from "../label/index.js";
+import { HelperText as x } from "../helper-text/index.js";
+import { Error as I } from "../error/index.js";
+import r from "./form-field.module.css.js";
+const j = ({
+  badgeText: a,
+  id: e,
+  isRequired: t,
+  isOptional: i,
+  label: m,
+  helperText: s,
+  error: l,
+  className: d,
+  layout: c,
+  children: n,
+  ...p
+}) => /* @__PURE__ */ N(
+  "div",
+  {
+    className: f({ [r[`${c}`]]: c }, d),
+    ...p,
+    children: [
+      m && /* @__PURE__ */ o(
+        h,
+        {
+          badgeText: a,
+          controlId: e,
+          isOptional: i,
+          isRequired: t,
+          className: r.label,
+          children: m
+        }
+      ),
+      s && /* @__PURE__ */ o(x, { controlId: e, className: r["helper-text"], children: s }),
+      /* @__PURE__ */ o("div", { className: r.control, children: n }),
+      l && /* @__PURE__ */ o(I, { controlId: e, className: r.error, children: l })
+    ]
+  }
+);
+j.displayName = "Field";
+export {
+  j as Field
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/field/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { Label } from '../label'\nimport { HelperText } from '../helper-text'\nimport { Error } from '../error'\nimport type { ReactNode } from 'react'\nimport s from './form-field.module.css'\n\ninterface FieldProps {\n\tbadgeText?: string\n\tid: string\n\tisRequired?: boolean\n\tisOptional?: boolean\n\tlabel?: ReactNode\n\thelperText?: ReactNode\n\terror?: ReactNode\n\tclassName?: string\n\tlayout?: 'vertical' | 'flag'\n\tchildren: ReactNode\n}\n\nconst Field = ({\n\tbadgeText,\n\tid,\n\tisRequired,\n\tisOptional,\n\tlabel,\n\thelperText,\n\terror,\n\tclassName,\n\tlayout,\n\tchildren,\n\t...rest\n}: FieldProps) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames({ [s[`${layout}`]]: layout }, className)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{label && (\n\t\t\t\t<Label\n\t\t\t\t\tbadgeText={badgeText}\n\t\t\t\t\tcontrolId={id}\n\t\t\t\t\tisOptional={isOptional}\n\t\t\t\t\tisRequired={isRequired}\n\t\t\t\t\tclassName={s.label}\n\t\t\t\t>\n\t\t\t\t\t{label}\n\t\t\t\t</Label>\n\t\t\t)}\n\t\t\t{helperText && (\n\t\t\t\t<HelperText controlId={id} className={s['helper-text']}>\n\t\t\t\t\t{helperText}\n\t\t\t\t</HelperText>\n\t\t\t)}\n\t\t\t<div className={s.control}>{children}</div>\n\t\t\t{error && (\n\t\t\t\t<Error controlId={id} className={s.error}>\n\t\t\t\t\t{error}\n\t\t\t\t</Error>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nField.displayName = 'Field'\n\nexport type { FieldProps }\nexport { Field }\n"],"names":["Field","badgeText","id","isRequired","isOptional","label","helperText","error","className","layout","children","rest","jsxs","classNames","s","jsx","Label","HelperText","Error"],"mappings":";;;;;;AAoBA,MAAMA,IAAQ,CAAC;AAAA,EACd,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC,EAAW,EAAE,CAACC,EAAE,GAAGL,CAAM,EAAE,CAAC,GAAGA,EAAA,GAAUD,CAAS;AAAA,IAC5D,GAAGG;AAAA,IAEH,UAAA;AAAA,MAAAN,KACA,gBAAAU;AAAA,QAACC;AAAA,QAAA;AAAA,UACA,WAAAf;AAAA,UACA,WAAWC;AAAA,UACX,YAAAE;AAAA,UACA,YAAAD;AAAA,UACA,WAAWW,EAAE;AAAA,UAEZ,UAAAT;AAAA,QAAA;AAAA,MAAA;AAAA,MAGFC,uBACCW,GAAA,EAAW,WAAWf,GAAI,WAAWY,EAAE,aAAa,GACnD,UAAAR,EAAA,CACF;AAAA,MAED,gBAAAS,EAAC,OAAA,EAAI,WAAWD,EAAE,SAAU,UAAAJ,GAAS;AAAA,MACpCH,uBACCW,GAAA,EAAM,WAAWhB,GAAI,WAAWY,EAAE,OACjC,UAAAP,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAAA;AAMJP,EAAM,cAAc;"}

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

@@ -0,0 +1,48 @@
+/**
+* FORM > GROUP
+*/
+
+.group {
+	/* notice: this is a <fieldset> element */
+	display: block;
+	margin: 0;
+	padding: 0;
+	border: none;
+}
+
+.legend {
+	/* notice: this is a <legend> element */
+	margin: 0 0 8px 0;
+	padding: 0;
+}
+
+/* when the group contains a "legend", we reduce the visual weight of the "label" */
+.has-legend {
+	& label {
+		font-weight: var(--mds-typography-font-weight-regular);
+	}
+}
+
+.vertical {
+	& .control-fields-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
+}
+
+.horizontal {
+	& .control-fields-wrapper {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 4px 16px;
+	}
+}
+
+.helper-text {
+	margin-bottom: 8px;
+}
+
+.error {
+	margin-top: 8px;
+}

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

@@ -0,0 +1,19 @@
+const r = "group__4-G8T", e = "legend__Psn00", o = "vertical__nU8G5", n = "horizontal__nzPrB", t = "error__oiFxc", l = {
+  group: r,
+  legend: e,
+  "has-legend": "has-legend__CnvEd",
+  vertical: o,
+  "control-fields-wrapper": "control-fields-wrapper__ODpmr",
+  horizontal: n,
+  "helper-text": "helper-text__rPBCK",
+  error: t
+};
+export {
+  l as default,
+  t as error,
+  r as group,
+  n as horizontal,
+  e as legend,
+  o as vertical
+};
+//# sourceMappingURL=form-fieldset.module.css.js.map

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

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

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

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+interface FieldsetProps {
+    isRequired?: boolean;
+    isOptional?: boolean;
+    legend?: ReactNode;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    className?: string;
+    layout?: 'vertical' | 'horizontal';
+    children: ReactNode;
+    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/dist/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/dist/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 {\n\tisRequired?: boolean\n\tisOptional?: boolean\n\tlegend?: ReactNode\n\thelperText?: ReactNode\n\terror?: ReactNode\n\tclassName?: string\n\tlayout?: 'vertical' | 'horizontal'\n\tchildren: ReactNode\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":";;;;;;;AAqBA,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/dist/components/form/file-input/form-file-input.module.scss

@@ -0,0 +1,81 @@
+@import '../../../styles/mixins/button.scss';
+@import '../../../../../mds-tokens/src/helper-classes/typography';
+
+.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/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/dist/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":";;;"}