@canonical/react-ds-core-form 0.9.0-experimental.5 → 0.9.0

package/README.md

@@ -6,3 +6,6 @@ The collection of Form Components in the DS25.
 
 This package uses the same build as `ds-core` in the same folder. All comments made on the README.md file apply here.
 
+## Notes
+
++ This package uses MSW to mock back-end requests - in particular related to field-level middleware. For that purpose, this package exposes a unique command, `init:msw` which populates the public folder with the service worker necessary to intercept requests with our mock API. This script only has to be run once, but is nevertheless kept on the package.json for reference.

package/dist/esm/ui/Field/Field.js

@@ -1,17 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Checkbox, Text, Textarea } from "./inputs/index.js";
-import { InputType } from "./types.js";
+import { Checkbox, Combobox, Hidden, Range, Select, SimpleChoices, Text, Textarea, } from "./inputs/index.js";
 /**
  * description of the Field component
  * @returns {React.ReactElement} - Rendered Field
  */
 const Field = ({ inputType, CustomComponent, ...props }) => {
     switch (inputType) {
-        case InputType.Textarea:
+        case "textarea":
             return _jsx(Textarea, { ...props });
-        case InputType.Checkbox:
+        case "checkbox":
             return _jsx(Checkbox, { ...props });
-        case InputType.Custom:
+        case "range":
+            return _jsx(Range, { ...props });
+        case "select":
+            return _jsx(Select, { ...props });
+        case "simple-choices":
+            return _jsx(SimpleChoices, { ...props });
+        case "combobox":
+            return _jsx(Combobox, { ...props });
+        case "hidden":
+            return _jsx(Hidden, { ...props });
+        case "custom":
             // @ts-ignore // TODO Add special type for both or none
             return _jsx(CustomComponent, { ...props });
         default:
@@ -19,5 +28,4 @@ const Field = ({ inputType, CustomComponent, ...props }) => {
     }
 };
 export default Field;
-Field.types = InputType;
 //# sourceMappingURL=Field.js.map

package/dist/esm/ui/Field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../../src/ui/Field/Field.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAGvC;;;GAGG;AACH,MAAM,KAAK,GAAG,CAAC,EACb,SAAS,EACT,eAAe,EACf,GAAG,KAAK,EACG,EAAsB,EAAE;IACnC,QAAQ,SAAS,EAAE,CAAC;QAClB,KAAK,SAAS,CAAC,QAAQ;YACrB,OAAO,KAAC,QAAQ,OAAK,KAAK,GAAI,CAAC;QACjC,KAAK,SAAS,CAAC,QAAQ;YACrB,OAAO,KAAC,QAAQ,OAAK,KAAK,GAAI,CAAC;QACjC,KAAK,SAAS,CAAC,MAAM;YACnB,uDAAuD;YACvD,OAAO,KAAC,eAAe,OAAK,KAAK,GAAI,CAAC;QACxC;YACE,OAAO,KAAC,IAAI,IAAC,SAAS,EAAE,SAAS,KAAM,KAAK,GAAI,CAAC;IACrD,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC;AACrB,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC"}
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../../src/ui/Field/Field.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,KAAK,EACL,MAAM,EACN,aAAa,EACb,IAAI,EACJ,QAAQ,GACT,MAAM,mBAAmB,CAAC;AAG3B;;;GAGG;AACH,MAAM,KAAK,GAAG,CAAC,EACb,SAAS,EACT,eAAe,EACf,GAAG,KAAK,EACG,EAAsB,EAAE;IACnC,QAAQ,SAAS,EAAE,CAAC;QAClB,KAAK,UAAU;YACb,OAAO,KAAC,QAAQ,OAAK,KAAK,GAAI,CAAC;QACjC,KAAK,UAAU;YACb,OAAO,KAAC,QAAQ,OAAK,KAAK,GAAI,CAAC;QACjC,KAAK,OAAO;YACV,OAAO,KAAC,KAAK,OAAK,KAAK,GAAI,CAAC;QAC9B,KAAK,QAAQ;YACX,OAAO,KAAC,MAAM,OAAK,KAAK,GAAI,CAAC;QAC/B,KAAK,gBAAgB;YACnB,OAAO,KAAC,aAAa,OAAK,KAAK,GAAI,CAAC;QACtC,KAAK,UAAU;YACb,OAAO,KAAC,QAAQ,OAAK,KAAK,GAAI,CAAC;QACjC,KAAK,QAAQ;YACX,OAAO,KAAC,MAAM,OAAK,KAAK,GAAI,CAAC;QAC/B,KAAK,QAAQ;YACX,uDAAuD;YACvD,OAAO,KAAC,eAAe,OAAK,KAAK,GAAI,CAAC;QACxC;YACE,OAAO,KAAC,IAAI,IAAC,SAAS,EAAE,SAAS,KAAM,KAAK,GAAI,CAAC;IACrD,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/esm/ui/Field/common/Description/Description.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "./styles.css";
-const componentCssClassName = "ds description";
+const componentCssClassName = "ds form-field-description";
 /**
  * description of the Description component
  * @returns {React.ReactElement} - Rendered Description
  */
 const Description = ({ id, children, className, style, }) => {
-    return (_jsx("div", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), children: children }));
+    return (_jsx("p", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), children: children }));
 };
 export default Description;
 //# sourceMappingURL=Description.js.map

package/dist/esm/ui/Field/common/Description/Description.js.map

@@ -1 +1 @@
-{"version":3,"file":"Description.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Description/Description.tsx"],"names":[],"mappings":";AAGA,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,gBAAgB,CAAC;AAE/C;;;GAGG;AACH,MAAM,WAAW,GAAG,CAAC,EACnB,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,GACY,EAAsB,EAAE;IACzC,OAAO,CACL,cACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,YAEtE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"Description.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Description/Description.tsx"],"names":[],"mappings":";AAGA,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AAE1D;;;GAGG;AACH,MAAM,WAAW,GAAG,CAAC,EACnB,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,GACY,EAAsB,EAAE;IACzC,OAAO,CACL,YACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,YAEtE,QAAQ,GACP,CACL,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/esm/ui/Field/common/Description/styles.css

@@ -1,7 +1,7 @@
 /* @canonical/generator-ds 0.9.0-experimental.4 */
 
 /*
-.ds.description {
+.ds.form-field-description {
 
 }
 */

package/dist/esm/ui/Field/common/Error/Error.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+const componentCssClassName = "ds form-field-error";
+/**
+ * description of the Error component
+ * @returns {React.ReactElement} - Rendered Error
+ */
+const FieldError = ({ id, children, className, style, }) => {
+    return (_jsx("p", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), role: "alert", children: children }));
+};
+export default FieldError;
+//# sourceMappingURL=Error.js.map

package/dist/esm/ui/Field/common/Error/Error.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Error.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Error/Error.tsx"],"names":[],"mappings":";AAGA,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,qBAAqB,CAAC;AAEpD;;;GAGG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,GACM,EAAsB,EAAE;IACnC,OAAO,CACL,YACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACvE,IAAI,EAAC,OAAO,YAEX,QAAQ,GACP,CACL,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/esm/ui/Field/common/Error/index.js

@@ -0,0 +1,4 @@
+/* @canonical/generator-ds 0.9.0-experimental.9 */
+export { default as Error } from "./Error.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/Field/common/Error/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Error/index.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,cAAc,YAAY,CAAC"}

package/dist/esm/ui/Field/common/Error/styles.css

@@ -0,0 +1,5 @@
+/* @canonical/generator-ds 0.9.0-experimental.9 */
+
+.ds.form-field-error {
+  color: var(--state-danger-color-default);
+}

package/dist/esm/ui/Field/common/Error/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/Field/common/Error/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Error/types.ts"],"names":[],"mappings":""}

package/dist/esm/ui/Field/common/Label/Label.js

@@ -1,12 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import "./styles.css";
-const componentCssClassName = "ds label";
+const componentCssClassName = "ds form-label";
+/** Placeholder for internationalized messages */
+const defaultMessages = {
+    optional: () => "optional",
+};
 /**
  * description of the Label component
  * @returns {React.ReactElement} - Rendered Label
  */
-const Label = ({ id, children, className, style, }) => {
-    return (_jsx("div", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), children: children }));
+const Label = ({ id, children, className, style, name, isOptional, messages = defaultMessages, htmlFor, tag: Element = "label", }) => {
+    return (_jsxs(Element, { id: id, style: style, htmlFor: Element === "label" ? htmlFor : undefined, className: [componentCssClassName, className].filter(Boolean).join(" "), children: [children || name, isOptional && _jsxs("span", { children: [" (", messages.optional(), ")"] })] }));
 };
 export default Label;
 //# sourceMappingURL=Label.js.map

package/dist/esm/ui/Field/common/Label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Label/Label.tsx"],"names":[],"mappings":";AAGA,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,UAAU,CAAC;AAEzC;;;GAGG;AACH,MAAM,KAAK,GAAG,CAAC,EACb,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,GACM,EAAsB,EAAE;IACnC,OAAO,CACL,cACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,YAEtE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Label/Label.tsx"],"names":[],"mappings":";AAGA,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,eAAe,CAAC;AAE9C,iDAAiD;AACjD,MAAM,eAAe,GAAG;IACtB,QAAQ,EAAE,GAAG,EAAE,CAAC,UAAU;CAC3B,CAAC;AAEF;;;GAGG;AACH,MAAM,KAAK,GAAG,CAAC,EACb,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,EACL,IAAI,EACJ,UAAU,EACV,QAAQ,GAAG,eAAe,EAC1B,OAAO,EACP,GAAG,EAAE,OAAO,GAAG,OAAO,GACX,EAAsB,EAAE;IACnC,OAAO,CACL,MAAC,OAAO,IACN,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAClD,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAEtE,QAAQ,IAAI,IAAI,EAChB,UAAU,IAAI,iCAAS,QAAQ,CAAC,QAAQ,EAAE,SAAS,IAC5C,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/esm/ui/Field/common/Label/styles.css

@@ -1,7 +1,5 @@
 /* @canonical/generator-ds 0.9.0-experimental.4 */
 
-/*
-.ds.label {
-
+.ds.form-label {
+  font-weight: bold;
 }
-*/

package/dist/esm/ui/Field/common/Wrapper/InvisibleWrapper.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFieldWrapper } from "./hooks/index.js";
+/**
+ * InvisibleWrapper component for hidden form inputs.
+ * It wraps the specified input component and handles form registration
+ * without rendering visible elements like labels or error messages.
+ *
+ * @param {WrapperProps<ComponentProps>} props - Component props including the Component to wrap and form-related props.
+ * @returns {React.ReactElement} - Rendered wrapped component.
+ */
+const InvisibleWrapper = ({ name, Component, registerProps: userRegisterProps, nestedRegisterProps, unregisterOnUnmount, ...otherProps }) => {
+    const { registerProps, ariaProps } = useFieldWrapper(name, {
+        userRegisterProps,
+        nestedRegisterProps,
+        unregisterOnUnmount,
+    });
+    const componentProps = {
+        name,
+        registerProps,
+        ...ariaProps.input,
+        ...otherProps,
+    };
+    return _jsx(Component, { ...componentProps });
+};
+export default InvisibleWrapper;
+//# sourceMappingURL=InvisibleWrapper.js.map

package/dist/esm/ui/Field/common/Wrapper/InvisibleWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InvisibleWrapper.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Wrapper/InvisibleWrapper.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,gBAAgB,GAAG,CAAwC,EAC/D,IAAI,EACJ,SAAS,EACT,aAAa,EAAE,iBAAiB,EAChC,mBAAmB,EACnB,mBAAmB,EACnB,GAAG,UAAU,EACgB,EAAsB,EAAE;IACrD,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,eAAe,CAAC,IAAI,EAAE;QACzD,iBAAiB;QACjB,mBAAmB;QACnB,mBAAmB;KACpB,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG;QACrB,IAAI;QACJ,aAAa;QACb,GAAG,SAAS,CAAC,KAAK;QAClB,GAAG,UAAU;KACI,CAAC;IAEpB,OAAO,KAAC,SAAS,OAAK,cAAc,GAAI,CAAC;AAC3C,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/esm/ui/Field/common/Wrapper/Wrapper.js

@@ -1,12 +1,32 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 import "./styles.css";
-const componentCssClassName = "ds wrapper";
+import { states } from "../../../constants.js";
+import { Description, Error as FieldError, Label } from "../index.js";
+import { useFieldWrapper } from "./hooks/index.js";
+const componentCssClassName = "ds form-wrapper";
 /**
  * description of the Wrapper component
  * @returns {React.ReactElement} - Rendered Wrapper
  */
-const Wrapper = ({ id, children, className, style, }) => {
-    return (_jsx("div", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), children: children }));
+const Wrapper = ({ id, className, style, name, Component, description, label, isOptional, registerProps: userRegisterProps, nestedRegisterProps, unregisterOnUnmount, mockLabel = false, ...otherProps }) => {
+    const { fieldError, isError, ariaProps, registerProps } = useFieldWrapper(name, {
+        label,
+        isOptional,
+        userRegisterProps,
+        nestedRegisterProps,
+        unregisterOnUnmount,
+    });
+    // biome-ignore lint/correctness/useExhaustiveDependencies: -
+    const componentProps = useMemo(() => ({
+        name,
+        registerProps,
+        ...ariaProps.input,
+        ...otherProps,
+    }), [name, registerProps, ariaProps.input]);
+    return (_jsxs("div", { id: id, style: style, className: [componentCssClassName, className, isError && states.Danger]
+            .filter(Boolean)
+            .join(" "), children: [_jsx(Label, { name: name, isOptional: isOptional, tag: mockLabel ? "legend" : undefined, ...ariaProps.label, children: label }), _jsxs("div", { className: "payload", children: [_jsx(Description, { ...ariaProps.description, children: description }), _jsx(Component, { ...componentProps }), isError && (_jsx(FieldError, { ...ariaProps.error, children: fieldError?.message?.toString() }))] })] }));
 };
 export default Wrapper;
 //# sourceMappingURL=Wrapper.js.map

package/dist/esm/ui/Field/common/Wrapper/Wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Wrapper.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Wrapper/Wrapper.tsx"],"names":[],"mappings":";AAGA,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,YAAY,CAAC;AAE3C;;;GAGG;AACH,MAAM,OAAO,GAAG,CAAC,EACf,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,GACQ,EAAsB,EAAE;IACrC,OAAO,CACL,cACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,YAEtE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Wrapper.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Wrapper/Wrapper.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,KAAK,IAAI,UAAU,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;AAEhD;;;GAGG;AACH,MAAM,OAAO,GAAG,CAAwC,EACtD,EAAE,EACF,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,SAAS,EACT,WAAW,EACX,KAAK,EACL,UAAU,EACV,aAAa,EAAE,iBAAiB,EAChC,mBAAmB,EACnB,mBAAmB,EAEnB,SAAS,GAAG,KAAK,EACjB,GAAG,UAAU,EACgB,EAAsB,EAAE;IACrD,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,eAAe,CACvE,IAAI,EACJ;QACE,KAAK;QACL,UAAU;QACV,iBAAiB;QACjB,mBAAmB;QACnB,mBAAmB;KACpB,CACF,CAAC;IAEF,6DAA6D;IAC7D,MAAM,cAAc,GAAG,OAAO,CAC5B,GAAG,EAAE,CAAC,CAAC;QACL,IAAI;QACJ,aAAa;QACb,GAAG,SAAS,CAAC,KAAK;QAClB,GAAG,UAAU;KACd,CAAC,EACF,CAAC,IAAI,EAAE,aAAa,EAAE,SAAS,CAAC,KAAK,CAAC,CACV,CAAC;IAE/B,OAAO,CACL,eACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,OAAO,IAAI,MAAM,CAAC,MAAM,CAAC;aACpE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,aAEZ,KAAC,KAAK,IACJ,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,KACjC,SAAS,CAAC,KAAK,YAElB,KAAK,GACA,EACR,eAAK,SAAS,EAAC,SAAS,aACtB,KAAC,WAAW,OAAK,SAAS,CAAC,WAAW,YAAG,WAAW,GAAe,EACnE,KAAC,SAAS,OAAK,cAAc,GAAI,EAChC,OAAO,IAAI,CACV,KAAC,UAAU,OAAK,SAAS,CAAC,KAAK,YAC5B,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,GACrB,CACd,IACG,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/esm/ui/Field/common/Wrapper/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as useFieldWrapper } from "./useFieldWrapper.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/Field/common/Wrapper/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/ui/Field/common/Wrapper/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/esm/ui/Field/common/Wrapper/hooks/useFieldWrapper.js

@@ -0,0 +1,42 @@
+import { useEffect, useMemo } from "react";
+import { useFormContext } from "react-hook-form";
+import { useFieldAriaProperties, useFieldError } from "../../../hooks/index.js";
+import messages from "../messages.js";
+/**
+ * Hook to provide field wrapper utilities
+ * @param name - The name of the field
+ * @param options - Additional options
+ */
+const useFieldWrapper = (name, options = {}) => {
+    const { label, isOptional = false, userRegisterProps = {}, nestedRegisterProps = {}, unregisterOnUnmount = true, } = options;
+    const fieldError = useFieldError(name);
+    const isError = !!fieldError;
+    const ariaProps = useFieldAriaProperties(name, isError);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Comparing the `name` suffices
+    const registerProps = useMemo(() => {
+        const props = {};
+        // We take advantage of the declaration of optionality to map to the required prop
+        if (!isOptional) {
+            props.required = {
+                value: true,
+                message: messages.required(label || name),
+            };
+        }
+        return {
+            ...nestedRegisterProps,
+            ...props,
+            ...userRegisterProps,
+        };
+    }, [name]);
+    const { unregister } = useFormContext();
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Comparing the `name` suffices
+    useEffect(() => () => (unregisterOnUnmount ? unregister(name) : undefined), [name]);
+    return {
+        fieldError,
+        isError,
+        ariaProps,
+        registerProps,
+    };
+};
+export default useFieldWrapper;
+//# sourceMappingURL=useFieldWrapper.js.map

package/dist/esm/ui/Field/common/Wrapper/hooks/useFieldWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFieldWrapper.js","sourceRoot":"","sources":["../../../../../../../src/ui/Field/common/Wrapper/hooks/useFieldWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAwB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEvE,OAAO,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAChF,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAUtC;;;;GAIG;AACH,MAAM,eAAe,GAAG,CACtB,IAAY,EACZ,UAAkC,EAAE,EACpC,EAAE;IACF,MAAM,EACJ,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,iBAAiB,GAAG,EAAE,EACtB,mBAAmB,GAAG,EAAE,EACxB,mBAAmB,GAAG,IAAI,GAC3B,GAAG,OAAO,CAAC;IAEZ,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAEvC,MAAM,OAAO,GAAG,CAAC,CAAC,UAAU,CAAC;IAE7B,MAAM,SAAS,GAAG,sBAAsB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAExD,yFAAyF;IACzF,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,KAAK,GAAoB,EAAE,CAAC;QAClC,kFAAkF;QAClF,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,KAAK,CAAC,QAAQ,GAAG;gBACf,KAAK,EAAE,IAAI;gBACX,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,KAAK,IAAI,IAAI,CAAC;aAC1C,CAAC;QACJ,CAAC;QACD,OAAO;YACL,GAAG,mBAAmB;YACtB,GAAG,KAAK;YACR,GAAG,iBAAiB;SACrB,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,EAAE,UAAU,EAAE,GAAG,cAAc,EAAE,CAAC;IAExC,yFAAyF;IACzF,SAAS,CACP,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EAChE,CAAC,IAAI,CAAC,CACP,CAAC;IAEF,OAAO;QACL,UAAU;QACV,OAAO;QACP,SAAS;QACT,aAAa;KACd,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,eAAe,CAAC"}

package/dist/esm/ui/Field/common/Wrapper/index.js

@@ -1,4 +1,6 @@
 /* @canonical/generator-ds 0.9.0-experimental.4 */
 export { default as Wrapper } from "./Wrapper.js";
+export { default as InvisibleWrapper } from "./InvisibleWrapper.js";
+export { default as withWrapper } from "./withWrapper.js";
 export * from "./types.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/ui/Field/common/Wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Wrapper/index.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Wrapper/index.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC1D,cAAc,YAAY,CAAC"}

package/dist/esm/ui/Field/common/Wrapper/messages.js

@@ -0,0 +1,4 @@
+export default {
+    required: (name) => `${name} is required`,
+};
+//# sourceMappingURL=messages.js.map

package/dist/esm/ui/Field/common/Wrapper/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Wrapper/messages.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,QAAQ,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,GAAG,IAAI,cAAc;CAClD,CAAC"}

package/dist/esm/ui/Field/common/Wrapper/styles.css

@@ -1,7 +1,15 @@
 /* @canonical/generator-ds 0.9.0-experimental.4 */
 
-/*
-.ds.wrapper {
+.ds.form-wrapper {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: var(--wrapper-columns, 1 / -1);
 
+  .ds.form-label {
+    grid-column: var(--form-label-columns, 1 / -1);
+  }
+
+  > .payload {
+    grid-column: var(--form-payload-columns, 1 / -1);
+  }
 }
-*/

package/dist/esm/ui/Field/common/Wrapper/withConditionalDisplay.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { useFormContext } from "react-hook-form";
+// TODO improve typing of P
+const withConditionalDisplay = (WrappedComponent) => {
+    const ConditionalComponent = (props) => {
+        const { condition, ...otherProps } = props;
+        if (!condition)
+            return React.createElement(WrappedComponent, props);
+        const [dependencies, conditionFunction] = condition;
+        const { watch } = useFormContext();
+        const depValues = watch(dependencies);
+        const shouldRender = conditionFunction(depValues);
+        if (!shouldRender)
+            return null;
+        return React.createElement(WrappedComponent, otherProps);
+    };
+    return ConditionalComponent;
+};
+export default withConditionalDisplay;
+//# sourceMappingURL=withConditionalDisplay.js.map

package/dist/esm/ui/Field/common/Wrapper/withConditionalDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withConditionalDisplay.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Wrapper/withConditionalDisplay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAMjD,2BAA2B;AAC3B,MAAM,sBAAsB,GAAG,CAC7B,gBAAqD,EACrD,EAAE;IACF,MAAM,oBAAoB,GAAG,CAC3B,KAAoD,EACpD,EAAE;QACF,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;QAC3C,IAAI,CAAC,SAAS;YACZ,OAAO,KAAK,CAAC,aAAa,CAAC,gBAAgB,EAAE,KAAuB,CAAC,CAAC;QACxE,MAAM,CAAC,YAAY,EAAE,iBAAiB,CAAC,GAAG,SAAS,CAAC;QAEpD,MAAM,EAAE,KAAK,EAAE,GAAG,cAAc,EAAE,CAAC;QACnC,MAAM,SAAS,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;QACtC,MAAM,YAAY,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;QAClD,IAAI,CAAC,YAAY;YAAE,OAAO,IAAI,CAAC;QAC/B,OAAO,KAAK,CAAC,aAAa,CAAC,gBAAgB,EAAE,UAA4B,CAAC,CAAC;IAC7E,CAAC,CAAC;IACF,OAAO,oBAAoB,CAAC;AAC9B,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/esm/ui/Field/common/Wrapper/withWrapper.js

@@ -1,2 +1,29 @@
-export {};
+import * as React from "react";
+import { useMemo } from "react";
+import DefaultWrapper from "./Wrapper.js";
+import withConditionalDisplay from "./withConditionalDisplay.js";
+const withWrapper = (Component, options, Wrapper = DefaultWrapper) => {
+    const MemoizedComponent = React.memo(Component);
+    function WrappedComponent({ middleware = [], WrapperComponent = Wrapper, ...props }) {
+        // We apply the middleware to the component in reverse orderso
+        // so that the first middleware in the array is the first to be applied to the component
+        const ExtendedComponent = useMemo(() => 
+        // The middleware happens between the Wrapper and the Component,
+        // hence the return type of P
+        middleware
+            .reverse()
+            .reduce((AccumulatedComponent, hoc) => hoc(AccumulatedComponent), MemoizedComponent), [middleware]);
+        // Type casting to avoid hard to read overloads.
+        const finalProps = {
+            // Component: MemoizedComponent,
+            Component: ExtendedComponent,
+            ...props,
+            ...options,
+        };
+        // } as WrapperProps<ComponentProps>; // The typing should be ComponentWrapperProps, but it would require an overload
+        return React.createElement(WrapperComponent, finalProps);
+    }
+    return withConditionalDisplay(WrappedComponent);
+};
+export default withWrapper;
 //# sourceMappingURL=withWrapper.js.map

package/dist/esm/ui/Field/common/Wrapper/withWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"withWrapper.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Wrapper/withWrapper.ts"],"names":[],"mappings":""}
+{"version":3,"file":"withWrapper.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Wrapper/withWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAQhC,OAAO,cAAc,MAAM,cAAc,CAAC;AAC1C,OAAO,sBAAsB,MAAM,6BAA6B,CAAC;AAOjE,MAAM,WAAW,GAAG,CAKlB,SAA8C,EAC9C,OAAwC,EACxC,UAA6D,cAAc,EAG3E,EAAE;IACF,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEhD,SAAS,gBAAgB,CAAC,EACxB,UAAU,GAAG,EAAE,EACf,gBAAgB,GAAG,OAAO,EAC1B,GAAG,KAAK,EACsC;QAC9C,8DAA8D;QAC9D,wFAAwF;QAExF,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE;QACH,gEAAgE;QAChE,6BAA6B;QAC7B,UAAU;aACP,OAAO,EAAE;aACT,MAAM,CACL,CAAC,oBAAoB,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,oBAAoB,CAAC,EACxD,iBAAiB,CAClB,EACL,CAAC,UAAU,CAAC,CACb,CAAC;QAEF,gDAAgD;QAChD,MAAM,UAAU,GAAG;YACjB,gCAAgC;YAChC,SAAS,EAAE,iBAAiB;YAC5B,GAAG,KAAK;YACR,GAAG,OAAO;SACX,CAAC;QACF,qHAAqH;QAErH,OAAO,KAAK,CAAC,aAAa,CACxB,gBAAgB,EAChB,UAA0C,CAC3C,CAAC;IACJ,CAAC;IACD,OAAO,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;AAClD,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/esm/ui/Field/common/index.js

@@ -1,4 +1,5 @@
 export * from "./Label/index.js";
 export * from "./Description/index.js";
 export * from "./Wrapper/index.js";
+export * from "./Error/index.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/ui/Field/common/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/Field/common/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AAEjC,cAAc,wBAAwB,CAAC;AAEvC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/Field/common/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AAEjC,cAAc,wBAAwB,CAAC;AAEvC,cAAc,oBAAoB,CAAC;AAEnC,cAAc,kBAAkB,CAAC"}

package/dist/esm/ui/Field/constants.js

@@ -0,0 +1,2 @@
+export const ID_PREFIX = "form-";
+//# sourceMappingURL=constants.js.map

package/dist/esm/ui/Field/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../src/ui/Field/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG,OAAO,CAAC"}

package/dist/esm/ui/Field/hooks/index.js

@@ -0,0 +1,4 @@
+export { default as useFieldError } from "./useFieldError.js";
+export { default as useFieldAriaProperties } from "./useFieldAriaProperties.js";
+export { default as useOptionAriaProperties } from "./useOptionAriaProperties.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/Field/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/Field/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/esm/ui/Field/hooks/useFieldAriaProperties.js

@@ -0,0 +1,37 @@
+import { useId, useMemo } from "react";
+/**
+ * Generates common ARIA properties for form field elements including input, label, description, and error state.
+ * @param {string} name - The name of the field.
+ * @param {boolean} isError - Indicates if the field is in an error state.
+ * @returns An object containing ARIA attributes for input, label, description, and error state.
+ */
+const useFieldAriaProps = (name, isError) => {
+    const uniqueId = useId();
+    const props = useMemo(() => {
+        const baseId = `${uniqueId}-${name}`;
+        const labelId = `${baseId}-label`;
+        const descriptionId = `${baseId}-description`;
+        const errorId = `${baseId}-error`;
+        return {
+            input: {
+                id: baseId,
+                "aria-labelledby": labelId,
+                "aria-describedby": `${descriptionId}${isError}` ? ` ${labelId}` : "",
+                "aria-errormessage": isError ? errorId : undefined,
+                "aria-invalid": isError,
+            },
+            label: {
+                id: labelId,
+                htmlFor: baseId,
+            },
+            description: { id: descriptionId },
+            error: {
+                id: errorId,
+                // role: "alert",
+            },
+        };
+    }, [name, isError, uniqueId]);
+    return props;
+};
+export default useFieldAriaProps;
+//# sourceMappingURL=useFieldAriaProperties.js.map

package/dist/esm/ui/Field/hooks/useFieldAriaProperties.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFieldAriaProperties.js","sourceRoot":"","sources":["../../../../../src/ui/Field/hooks/useFieldAriaProperties.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;GAKG;AACH,MAAM,iBAAiB,GAAG,CAAC,IAAY,EAAE,OAAgB,EAAE,EAAE;IAC3D,MAAM,QAAQ,GAAG,KAAK,EAAE,CAAC;IACzB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,MAAM,GAAG,GAAG,QAAQ,IAAI,IAAI,EAAE,CAAC;QACrC,MAAM,OAAO,GAAG,GAAG,MAAM,QAAQ,CAAC;QAClC,MAAM,aAAa,GAAG,GAAG,MAAM,cAAc,CAAC;QAC9C,MAAM,OAAO,GAAG,GAAG,MAAM,QAAQ,CAAC;QAElC,OAAO;YACL,KAAK,EAAE;gBACL,EAAE,EAAE,MAAM;gBACV,iBAAiB,EAAE,OAAO;gBAC1B,kBAAkB,EAAE,GAAG,aAAa,GAAG,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE;gBACrE,mBAAmB,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;gBAClD,cAAc,EAAE,OAAO;aACxB;YACD,KAAK,EAAE;gBACL,EAAE,EAAE,OAAO;gBACX,OAAO,EAAE,MAAM;aAChB;YACD,WAAW,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE;YAClC,KAAK,EAAE;gBACL,EAAE,EAAE,OAAO;gBACX,iBAAiB;aAClB;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC9B,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/esm/ui/Field/hooks/useFieldError.js

@@ -0,0 +1,28 @@
+import { useMemo } from "react";
+import { useFormState, } from "react-hook-form";
+function useFieldError(name) {
+    const { errors } = useFormState({ name });
+    const fieldTree = name.split(".");
+    // biome-ignore lint/correctness/useExhaustiveDependencies: using a proxy
+    const fieldError = useMemo(() => 
+    // @ts-ignore TODO
+    fieldTree.reduce((acc, key) => {
+        if (acc) {
+            return acc[key];
+        }
+        return undefined;
+    }, errors), [
+        name, //proxy for errors
+        // Below, those dependencies are lazily referenced, hence the need to explicitly evaluate them
+        // We assume that three levels of nesting is enough for most use cases
+        // @ts-ignore TODO
+        errors[fieldTree[0]],
+        // @ts-ignore TODO
+        errors[fieldTree[0]]?.[fieldTree[1]],
+        // @ts-ignore TODO
+        errors[fieldTree[0]]?.[fieldTree[1]]?.[fieldTree[2]],
+    ]);
+    return fieldError;
+}
+export default useFieldError;
+//# sourceMappingURL=useFieldError.js.map

package/dist/esm/ui/Field/hooks/useFieldError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFieldError.js","sourceRoot":"","sources":["../../../../../src/ui/Field/hooks/useFieldError.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAML,YAAY,GACb,MAAM,iBAAiB,CAAC;AAEzB,SAAS,aAAa,CACpB,IAAY;IAIZ,MAAM,EAAE,MAAM,EAAE,GAAG,YAAY,CAAC,EAAE,IAAI,EAAE,CAAkC,CAAC;IAE3E,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAElC,yEAAyE;IACzE,MAAM,UAAU,GAAG,OAAO,CACxB,GAA2B,EAAE;IAC3B,kBAAkB;IAClB,SAAS,CAAC,MAAM,CAAY,CAAC,GAA8B,EAAE,GAAG,EAAE,EAAE;QAClE,IAAI,GAAG,EAAE,CAAC;YACR,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC;QAClB,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC,EACZ;QACE,IAAI,EAAE,kBAAkB;QACxB,8FAA8F;QAC9F,sEAAsE;QACtE,kBAAkB;QAClB,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QACpB,kBAAkB;QAClB,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QACpC,kBAAkB;QAClB,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;KACrD,CACF,CAAC;IACF,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,eAAe,aAAa,CAAC"}

package/dist/esm/ui/Field/hooks/useOptionAriaProperties.js

@@ -0,0 +1,30 @@
+import { useId, useMemo } from "react";
+/**
+ * Generates ARIA properties for a specific option in a field.
+ * @param {string} name - The base name of the input field.
+ * @param {string} optionValue - The value of the specific option.
+ * @returns An object containing ARIA attributes for the option.
+ */
+const useOptionAriaProps = (name, optionValue) => {
+    const uniqueId = useId();
+    const props = useMemo(() => {
+        const baseId = `${uniqueId}-${name}`;
+        const descriptionId = `${baseId}-description`;
+        const optionBaseId = `${baseId}-${optionValue}`;
+        const optionLabelId = `${optionBaseId}-label`;
+        return {
+            input: {
+                id: optionBaseId,
+                "aria-labelledby": optionLabelId,
+                "aria-describedby": descriptionId,
+            },
+            label: {
+                id: optionLabelId,
+                htmlFor: optionBaseId,
+            },
+        };
+    }, [name, optionValue, uniqueId]);
+    return props;
+};
+export default useOptionAriaProps;
+//# sourceMappingURL=useOptionAriaProperties.js.map

package/dist/esm/ui/Field/hooks/useOptionAriaProperties.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOptionAriaProperties.js","sourceRoot":"","sources":["../../../../../src/ui/Field/hooks/useOptionAriaProperties.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;;GAKG;AACH,MAAM,kBAAkB,GAAG,CAAC,IAAY,EAAE,WAAmB,EAAE,EAAE;IAC/D,MAAM,QAAQ,GAAG,KAAK,EAAE,CAAC;IACzB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,MAAM,GAAG,GAAG,QAAQ,IAAI,IAAI,EAAE,CAAC;QACrC,MAAM,aAAa,GAAG,GAAG,MAAM,cAAc,CAAC;QAE9C,MAAM,YAAY,GAAG,GAAG,MAAM,IAAI,WAAW,EAAE,CAAC;QAChD,MAAM,aAAa,GAAG,GAAG,YAAY,QAAQ,CAAC;QAE9C,OAAO;YACL,KAAK,EAAE;gBACL,EAAE,EAAE,YAAY;gBAChB,iBAAiB,EAAE,aAAa;gBAChC,kBAAkB,EAAE,aAAa;aAClC;YACD,KAAK,EAAE;gBACL,EAAE,EAAE,aAAa;gBACjB,OAAO,EAAE,YAAY;aACtB;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAClC,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/esm/ui/Field/inputs/Checkbox/Checkbox.js

@@ -1,14 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useFormContext } from "react-hook-form";
 import "./styles.css";
-const componentCssClassName = "ds checkbox";
+import withWrapper from "../../common/Wrapper/withWrapper.js";
+const componentCssClassName = "ds form-checkbox";
 /**
  * description of the Checkbox component
  * @returns {React.ReactElement} - Rendered Checkbox
  */
-const Checkbox = ({ id, className, style, name, registerProps, }) => {
+const Checkbox = ({ id, className, style, name, registerProps, ...otherProps // Should only be native input props
+ }) => {
     const { register } = useFormContext();
-    return (_jsx("input", { id: id, style: style, type: "checkbox", className: [componentCssClassName, className].filter(Boolean).join(" "), ...register(name, registerProps) }));
+    return (_jsx("input", { id: id, style: style, type: "checkbox", className: [componentCssClassName, className].filter(Boolean).join(" "), ...otherProps, ...register(name, registerProps) }));
 };
-export default Checkbox;
+// export default Checkbox;
+export default withWrapper(Checkbox);
 //# sourceMappingURL=Checkbox.js.map

package/dist/esm/ui/Field/inputs/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/inputs/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,aAAa,CAAC;AAE5C;;;GAGG;AACH,MAAM,QAAQ,GAAG,CAAC,EAChB,EAAE,EACF,SAAS,EACT,KAAK,EACL,IAAI,EACJ,aAAa,GACC,EAAsB,EAAE;IACtC,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,OAAO,CACL,gBACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KACnE,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC,GACjC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/inputs/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,cAAc,CAAC;AACtB,OAAO,WAAW,MAAM,qCAAqC,CAAC;AAE9D,MAAM,qBAAqB,GAAG,kBAAkB,CAAC;AAEjD;;;GAGG;AACH,MAAM,QAAQ,GAAG,CAAC,EAChB,EAAE,EACF,SAAS,EACT,KAAK,EACL,IAAI,EACJ,aAAa,EACb,GAAG,UAAU,CAAC,oCAAoC;EACpC,EAAsB,EAAE;IACtC,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,OAAO,CACL,gBACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KACnE,UAAU,KACV,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC,GACjC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,2BAA2B;AAC3B,eAAe,WAAW,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/ui/Field/inputs/Checkbox/styles.css

@@ -1,7 +1,7 @@
 /* @canonical/generator-ds 0.9.0-experimental.4 */
 
 /*
-.ds.checkbox {
+.ds.form-checkbox {
 
 }
 */