@hitachivantara/uikit-react-core 5.82.1 → 5.82.3

package/dist/esm/{Forms → FormElement}/CharCounter/CharCounter.js

@@ -2,9 +2,9 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { setId } from "../../utils/setId.js";
+import { HvFormElementContext } from "../context.js";
 import { useClasses } from "./CharCounter.styles.js";
 import { staticClasses } from "./CharCounter.styles.js";
-import { HvFormElementContext } from "../FormElement/context/FormElementContext.js";
 import { HvTypography } from "../../Typography/Typography.js";
 const HvCharCounter = (props) => {
   const {
@@ -13,32 +13,32 @@ const HvCharCounter = (props) => {
     currentCharQuantity = 0,
     classes: classesProp,
     className,
-    id,
-    disabled,
+    id: idProp,
+    disabled: disabledProp,
     disableGutter = false,
     ...others
   } = useDefaultProps("HvCharCounter", props);
   const { classes, cx } = useClasses(classesProp);
-  const { elementId, elementDisabled } = useContext(HvFormElementContext);
-  const localDisabled = disabled || elementDisabled;
-  const localId = id ?? setId(elementId, "counter");
-  const currentId = setId(localId, "currentQuantity");
-  const maxQuantityId = setId(localId, "maxQuantity");
+  const context = useContext(HvFormElementContext);
+  const disabled = disabledProp ?? context.disabled;
+  const id = idProp ?? setId(context.id, "counter");
+  const currentId = setId(id, "currentQuantity");
+  const maxQuantityId = setId(id, "maxQuantity");
   const isOverloaded = currentCharQuantity > maxCharQuantity;
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      id: localId,
+      id,
       className: cx(
         classes.root,
         {
-          [classes.counterDisabled]: !!localDisabled,
+          [classes.counterDisabled]: disabled,
           [classes.gutter]: !disableGutter
         },
         className
       ),
       "aria-live": "polite",
-      "aria-disabled": localDisabled,
+      "aria-disabled": disabled,
       ...others,
       children: [
         /* @__PURE__ */ jsx(
@@ -46,8 +46,8 @@ const HvCharCounter = (props) => {
           {
             id: currentId,
             className: cx({
-              [classes.overloaded]: isOverloaded && !localDisabled,
-              [classes.counterDisabled]: !!localDisabled
+              [classes.overloaded]: isOverloaded && !disabled,
+              [classes.counterDisabled]: disabled
             }),
             variant: "label",
             component: "label",
@@ -59,8 +59,8 @@ const HvCharCounter = (props) => {
           {
             id: maxQuantityId,
             className: cx({
-              [classes.overloaded]: isOverloaded && !localDisabled,
-              [classes.counterDisabled]: !!localDisabled
+              [classes.overloaded]: isOverloaded && !disabled,
+              [classes.counterDisabled]: disabled
             }),
             variant: "body",
             component: "label",

package/dist/esm/FormElement/CharCounter/CharCounter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CharCounter.js","sources":["../../../../src/FormElement/CharCounter/CharCounter.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvTypography } from \"../../Typography\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../context\";\nimport { staticClasses, useClasses } from \"./CharCounter.styles\";\n\nexport { staticClasses as charCounterClasses };\n\nexport type HvCharCounterClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCharCounterProps extends HvBaseProps {\n  /** The string that separates the current char quantity from the max quantity. */\n  separator?: string;\n  /** The maximum allowed length of the characters. */\n  maxCharQuantity: number;\n  /** The current char quantity to be rendered. */\n  currentCharQuantity?: number;\n  /** If `true` the counter is disabled. */\n  disabled?: boolean;\n  /** If `true` the info message won't have margins. */\n  disableGutter?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCharCounterClasses;\n}\n\n/**\n * Displays the capacity and current usage of a text input box (character count by default).\n *\n * Use the character counter when there is a character or word limit.\n * By itself it doesn't block the user from going above the limit.\n */\nexport const HvCharCounter = (props: HvCharCounterProps) => {\n  const {\n    separator = \"/\",\n    maxCharQuantity,\n    currentCharQuantity = 0,\n    classes: classesProp,\n    className,\n    id: idProp,\n    disabled: disabledProp,\n    disableGutter = false,\n    ...others\n  } = useDefaultProps(\"HvCharCounter\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const context = useContext(HvFormElementContext);\n  const disabled = disabledProp ?? context.disabled;\n  const id = idProp ?? setId(context.id, \"counter\");\n  const currentId = setId(id, \"currentQuantity\");\n  const maxQuantityId = setId(id, \"maxQuantity\");\n  const isOverloaded = currentCharQuantity > maxCharQuantity;\n\n  return (\n    <div\n      id={id}\n      className={cx(\n        classes.root,\n        {\n          [classes.counterDisabled]: disabled,\n          [classes.gutter]: !disableGutter,\n        },\n        className,\n      )}\n      aria-live=\"polite\"\n      aria-disabled={disabled}\n      {...others}\n    >\n      <HvTypography\n        id={currentId}\n        className={cx({\n          [classes.overloaded]: isOverloaded && !disabled,\n          [classes.counterDisabled]: disabled,\n        })}\n        variant=\"label\"\n        component=\"label\"\n      >\n        {currentCharQuantity}\n      </HvTypography>\n      <HvTypography\n        id={maxQuantityId}\n        className={cx({\n          [classes.overloaded]: isOverloaded && !disabled,\n          [classes.counterDisabled]: disabled,\n        })}\n        variant=\"body\"\n        component=\"label\"\n      >\n        {` ${separator} ${maxCharQuantity}`}\n      </HvTypography>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAqCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA,sBAAsB;AAAA,IACtB,SAAS;AAAA,IACT;AAAA,IACA,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,UAAU,WAAW,oBAAoB;AACzC,QAAA,WAAW,gBAAgB,QAAQ;AACzC,QAAM,KAAK,UAAU,MAAM,QAAQ,IAAI,SAAS;AAC1C,QAAA,YAAY,MAAM,IAAI,iBAAiB;AACvC,QAAA,gBAAgB,MAAM,IAAI,aAAa;AAC7C,QAAM,eAAe,sBAAsB;AAGzC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,eAAe,GAAG;AAAA,UAC3B,CAAC,QAAQ,MAAM,GAAG,CAAC;AAAA,QACrB;AAAA,QACA;AAAA,MACF;AAAA,MACA,aAAU;AAAA,MACV,iBAAe;AAAA,MACd,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,WAAW,GAAG;AAAA,cACZ,CAAC,QAAQ,UAAU,GAAG,gBAAgB,CAAC;AAAA,cACvC,CAAC,QAAQ,eAAe,GAAG;AAAA,YAAA,CAC5B;AAAA,YACD,SAAQ;AAAA,YACR,WAAU;AAAA,YAET,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,WAAW,GAAG;AAAA,cACZ,CAAC,QAAQ,UAAU,GAAG,gBAAgB,CAAC;AAAA,cACvC,CAAC,QAAQ,eAAe,GAAG;AAAA,YAAA,CAC5B;AAAA,YACD,SAAQ;AAAA,YACR,WAAU;AAAA,YAET,UAAA,IAAI,SAAS,IAAI,eAAe;AAAA,UAAA;AAAA,QAAA;AAAA,MACnC;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/esm/FormElement/CharCounter/CharCounter.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CharCounter.styles.js","sources":["../../../../src/FormElement/CharCounter/CharCounter.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCharCounter\", {\n  root: { display: \"inline-block\", float: \"right\" },\n  counterDisabled: { color: theme.colors.secondary_60 },\n  gutter: { paddingLeft: \"6px\" },\n  overloaded: { color: theme.colors.negative },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,EAAE,SAAS,gBAAgB,OAAO,QAAQ;AAAA,EAChD,iBAAiB,EAAE,OAAO,MAAM,OAAO,aAAa;AAAA,EACpD,QAAQ,EAAE,aAAa,MAAM;AAAA,EAC7B,YAAY,EAAE,OAAO,MAAM,OAAO,SAAS;AAC7C,CAAC;"}

package/dist/esm/FormElement/FormElement.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useUniqueId } from "../hooks/useUniqueId.js";
+import { HvFormElementContext, HvFormElementValueContext, HvFormElementDescriptorsContext } from "./context.js";
+import { useClasses } from "./FormElement.styles.js";
+import { staticClasses } from "./FormElement.styles.js";
+import { findDescriptors } from "./utils.js";
+const HvFormElement = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    children,
+    id: idProp,
+    name,
+    value,
+    disabled,
+    required,
+    readOnly,
+    status = "standBy",
+    ...others
+  } = useDefaultProps("HvFormElement", props);
+  const { classes, cx } = useClasses(classesProp);
+  const id = useUniqueId(idProp);
+  const contextValue = useMemo(
+    () => ({ id, name, status, disabled, required, readOnly }),
+    [id, name, status, disabled, required, readOnly]
+  );
+  const descriptors = useMemo(() => findDescriptors(children), [children]);
+  return /* @__PURE__ */ jsx("div", { id, className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsx(HvFormElementContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(HvFormElementValueContext.Provider, { value, children: /* @__PURE__ */ jsx(HvFormElementDescriptorsContext.Provider, { value: descriptors, children }) }) }) });
+};
+HvFormElement.formElementType = "formelement";
+export {
+  HvFormElement,
+  staticClasses as formElementClasses
+};

package/dist/esm/FormElement/FormElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormElement.js","sources":["../../../src/FormElement/FormElement.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport {\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n  HvFormElementValueContext,\n  type HvFormElementContextValue,\n} from \"./context\";\nimport { staticClasses, useClasses } from \"./FormElement.styles\";\nimport { findDescriptors } from \"./utils\";\n\nexport { staticClasses as formElementClasses };\n\nexport type HvFormElementClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFormStatus = \"standBy\" | \"valid\" | \"invalid\" | \"empty\";\n\nexport interface HvFormElementProps\n  extends HvFormElementContextValue,\n    HvBaseProps<HTMLDivElement, \"onChange\" | \"onToggle\"> {\n  /**\n   * Current value of the form element.\n   *\n   * Part of a name/value pair, should be the value property of the underling native input.\n   */\n  value?: any;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: string;\n  /** The callback fired when the value changes. */\n  onChange?: (event: React.FormEvent<HTMLDivElement>) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFormElementClasses;\n}\n\n/**\n * Provides form-related context (ie. required/disabled/readOnly) for building form components,\n * analogous to MUI's [`FormControl`](https://mui.com/material-ui/api/form-control/) component.\n *\n * It is used internally to build UI Kit's form components (eg. `HvInput`, `HvDatePicker`), and can be used to build custom form components.\n */\nexport const HvFormElement = (props: HvFormElementProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    id: idProp,\n    name,\n    value,\n    disabled,\n    required,\n    readOnly,\n    status = \"standBy\",\n    ...others\n  } = useDefaultProps(\"HvFormElement\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const id = useUniqueId(idProp);\n\n  const contextValue = useMemo<HvFormElementContextValue>(\n    () => ({ id, name, status, disabled, required, readOnly }),\n    [id, name, status, disabled, required, readOnly],\n  );\n\n  const descriptors = useMemo(() => findDescriptors(children), [children]);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      <HvFormElementContext.Provider value={contextValue}>\n        <HvFormElementValueContext.Provider value={value}>\n          <HvFormElementDescriptorsContext.Provider value={descriptors}>\n            {children}\n          </HvFormElementDescriptorsContext.Provider>\n        </HvFormElementValueContext.Provider>\n      </HvFormElementContext.Provider>\n    </div>\n  );\n};\n\nHvFormElement.formElementType = \"formelement\";\n"],"names":[],"mappings":";;;;;;;;AAuDa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,KAAK,YAAY,MAAM;AAE7B,QAAM,eAAe;AAAA,IACnB,OAAO,EAAE,IAAI,MAAM,QAAQ,UAAU,UAAU;IAC/C,CAAC,IAAI,MAAM,QAAQ,UAAU,UAAU,QAAQ;AAAA,EACjD;AAEM,QAAA,cAAc,QAAQ,MAAM,gBAAgB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAEvE,SACG,oBAAA,OAAA,EAAI,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACvD,UAAA,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,cACpC,UAAC,oBAAA,0BAA0B,UAA1B,EAAmC,OAClC,UAAC,oBAAA,gCAAgC,UAAhC,EAAyC,OAAO,aAC9C,SACH,CAAA,EACF,CAAA,EACF,CAAA,GACF;AAEJ;AAEA,cAAc,kBAAkB;"}

package/dist/esm/FormElement/FormElement.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormElement.styles.js","sources":["../../../src/FormElement/FormElement.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFormElement\", {\n  root: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,CAAA;AACR,CAAC;"}

package/dist/esm/{Forms → FormElement}/InfoMessage/InfoMessage.js

@@ -2,32 +2,32 @@ import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { setId } from "../../utils/setId.js";
+import { HvFormElementContext } from "../context.js";
 import { useClasses } from "./InfoMessage.styles.js";
 import { staticClasses } from "./InfoMessage.styles.js";
-import { HvFormElementContext } from "../FormElement/context/FormElementContext.js";
 import { HvTypography } from "../../Typography/Typography.js";
 const HvInfoMessage = (props) => {
   const {
-    id,
+    id: idProp,
     classes: classesProp,
     className,
     children,
-    disabled,
+    disabled: disabledProp,
     disableGutter = false,
     ...others
   } = useDefaultProps("HvInfoMessage", props);
   const { classes, cx } = useClasses(classesProp);
-  const { elementId, elementDisabled } = useContext(HvFormElementContext);
-  const localDisabled = disabled || elementDisabled;
-  const localId = id ?? setId(elementId, "description");
+  const context = useContext(HvFormElementContext);
+  const disabled = disabledProp ?? context.disabled;
+  const id = idProp ?? setId(context.id, "description");
   return /* @__PURE__ */ jsx(
     HvTypography,
     {
-      id: localId,
+      id,
       className: cx(
         classes.root,
         {
-          [classes.infoDisabled]: !!localDisabled,
+          [classes.infoDisabled]: !!disabled,
           [classes.gutter]: !disableGutter
         },
         className

package/dist/esm/FormElement/InfoMessage/InfoMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoMessage.js","sources":["../../../../src/FormElement/InfoMessage/InfoMessage.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvTypography, HvTypographyProps } from \"../../Typography\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../context\";\nimport { staticClasses, useClasses } from \"./InfoMessage.styles\";\n\nexport { staticClasses as infoMessageClasses };\n\nexport type HvInfoMessageClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvInfoMessageProps extends HvTypographyProps<\"label\"> {\n  /** If `true` the label is disabled. */\n  disabled?: boolean;\n  /** If `true` the info message won't have margins. */\n  disableGutter?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvInfoMessageClasses;\n}\n\n/**\n * Provides the user with additional descriptive text for the form element.\n */\nexport const HvInfoMessage = (props: HvInfoMessageProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    children,\n    disabled: disabledProp,\n    disableGutter = false,\n    ...others\n  } = useDefaultProps(\"HvInfoMessage\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const context = useContext(HvFormElementContext);\n  const disabled = disabledProp ?? context.disabled;\n  const id = idProp ?? setId(context.id, \"description\");\n\n  return (\n    <HvTypography\n      id={id}\n      className={cx(\n        classes.root,\n        {\n          [classes.infoDisabled]: !!disabled,\n          [classes.gutter]: !disableGutter,\n        },\n        className,\n      )}\n      variant=\"body\"\n      component=\"label\"\n      {...others}\n    >\n      {children}\n    </HvTypography>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AA2Ba,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,UAAU,WAAW,oBAAoB;AACzC,QAAA,WAAW,gBAAgB,QAAQ;AACzC,QAAM,KAAK,UAAU,MAAM,QAAQ,IAAI,aAAa;AAGlD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,YAAY,GAAG,CAAC,CAAC;AAAA,UAC1B,CAAC,QAAQ,MAAM,GAAG,CAAC;AAAA,QACrB;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAQ;AAAA,MACR,WAAU;AAAA,MACT,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/esm/FormElement/InfoMessage/InfoMessage.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoMessage.styles.js","sources":["../../../../src/FormElement/InfoMessage/InfoMessage.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInfoMessage\", {\n  root: { color: theme.colors.secondary_80, display: \"inline-block\" },\n  infoDisabled: { color: theme.colors.secondary_60 },\n  gutter: { padding: `0 0 6px ${theme.space.xs}` },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,EAAE,OAAO,MAAM,OAAO,cAAc,SAAS,eAAe;AAAA,EAClE,cAAc,EAAE,OAAO,MAAM,OAAO,aAAa;AAAA,EACjD,QAAQ,EAAE,SAAS,WAAW,MAAM,MAAM,EAAE,GAAG;AACjD,CAAC;"}

package/dist/esm/{Forms → FormElement}/Label/Label.js

@@ -2,38 +2,38 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { setId } from "../../utils/setId.js";
-import { findDescriptors } from "../FormElement/utils/FormUtils.js";
+import { HvFormElementContext } from "../context.js";
+import { findDescriptors } from "../utils.js";
 import { useClasses } from "./Label.styles.js";
 import { staticClasses } from "./Label.styles.js";
-import { HvFormElementContext } from "../FormElement/context/FormElementContext.js";
 import { HvTypography } from "../../Typography/Typography.js";
 const HvLabel = (props) => {
   const {
-    id,
+    id: idProp,
     classes: classesProp,
     className,
     children,
     label,
-    disabled,
-    required,
+    disabled: disabledProp,
+    required: requiredProp,
     htmlFor: htmlForProp,
     ...others
   } = useDefaultProps("HvLabel", props);
   const { classes, cx } = useClasses(classesProp);
-  const { elementId, elementDisabled, elementRequired } = useContext(HvFormElementContext);
-  const localDisabled = disabled || elementDisabled;
-  const localRequired = required || elementRequired;
-  const localId = id ?? setId(elementId, "label");
+  const context = useContext(HvFormElementContext);
+  const disabled = disabledProp ?? context.disabled;
+  const required = requiredProp ?? context.required;
+  const id = idProp ?? setId(context.id, "label");
   const forId = htmlForProp || findDescriptors(children)?.input?.[0]?.id;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       HvTypography,
       {
-        id: localId,
+        id,
         className: cx(
           classes.root,
           {
-            [classes.labelDisabled]: !!localDisabled,
+            [classes.labelDisabled]: !!disabled,
             [classes.childGutter]: !!(children && label)
           },
           className
@@ -44,7 +44,7 @@ const HvLabel = (props) => {
         ...others,
         children: [
           label,
-          localRequired && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "*" })
+          required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "*" })
         ]
       }
     ),

package/dist/esm/FormElement/Label/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sources":["../../../../src/FormElement/Label/Label.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvTypography, HvTypographyProps } from \"../../Typography\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../context\";\nimport { findDescriptors } from \"../utils\";\nimport { staticClasses, useClasses } from \"./Label.styles\";\n\nexport { staticClasses as labelClasses };\n\nexport type HvLabelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLabelProps extends HvTypographyProps<\"label\"> {\n  /** Id to be applied to the root node */\n  id?: string;\n  /** The text to be shown by the label. */\n  label?: React.ReactNode;\n  /** The id of the form element the label is bound to. */\n  htmlFor?: string;\n  /** If `true` the label is displayed with a disabled style. */\n  disabled?: boolean;\n  /** If `true`, the label will indicate that the form element is required (an `*` after the label text). */\n  required?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLabelClasses;\n}\n\n/**\n * Provides the user with a recognizable name for a given form element.\n */\nexport const HvLabel = (props: HvLabelProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    children,\n    label,\n    disabled: disabledProp,\n    required: requiredProp,\n    htmlFor: htmlForProp,\n    ...others\n  } = useDefaultProps(\"HvLabel\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const context = useContext(HvFormElementContext);\n\n  const disabled = disabledProp ?? context.disabled;\n  const required = requiredProp ?? context.required;\n  const id = idProp ?? setId(context.id, \"label\");\n\n  const forId = htmlForProp || findDescriptors(children)?.input?.[0]?.id;\n\n  return (\n    <>\n      <HvTypography\n        id={id}\n        className={cx(\n          classes.root,\n          {\n            [classes.labelDisabled]: !!disabled,\n            [classes.childGutter]: !!(children && label),\n          },\n          className,\n        )}\n        variant=\"label\"\n        component=\"label\"\n        htmlFor={forId}\n        {...others}\n      >\n        {label}\n        {required && <span aria-hidden=\"true\">*</span>}\n      </HvTypography>\n      {children}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAkCa,MAAA,UAAU,CAAC,UAAwB;AACxC,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AAEpC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,UAAU,WAAW,oBAAoB;AAEzC,QAAA,WAAW,gBAAgB,QAAQ;AACnC,QAAA,WAAW,gBAAgB,QAAQ;AACzC,QAAM,KAAK,UAAU,MAAM,QAAQ,IAAI,OAAO;AAE9C,QAAM,QAAQ,eAAe,gBAAgB,QAAQ,GAAG,QAAQ,CAAC,GAAG;AAEpE,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,aAAa,GAAG,CAAC,CAAC;AAAA,YAC3B,CAAC,QAAQ,WAAW,GAAG,CAAC,EAAE,YAAY;AAAA,UACxC;AAAA,UACA;AAAA,QACF;AAAA,QACA,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,SAAS;AAAA,QACR,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UACA,YAAY,oBAAC,QAAK,EAAA,eAAY,QAAO,UAAC,IAAA,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACzC;AAAA,IACC;AAAA,EAAA,GACH;AAEJ;"}

package/dist/esm/FormElement/Label/Label.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.styles.js","sources":["../../../../src/FormElement/Label/Label.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLabel\", {\n  root: { fontWeight: theme.fontWeights.normal, display: \"inline-block\" },\n  labelDisabled: { color: theme.colors.secondary_60 },\n  childGutter: { paddingBottom: \"6px\" },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,YAAY,MAAM,YAAY,QAAQ,SAAS,eAAe;AAAA,EACtE,eAAe,EAAE,OAAO,MAAM,OAAO,aAAa;AAAA,EAClD,aAAa,EAAE,eAAe,MAAM;AACtC,CAAC;"}

package/dist/esm/{Forms → FormElement}/Suggestions/Suggestions.js

@@ -6,14 +6,14 @@ import { useForkRef } from "@mui/material/utils";
 import { useTheme } from "@hitachivantara/uikit-react-utils";
 import { getContainerElement } from "../../utils/document.js";
 import { setId } from "../../utils/setId.js";
+import { HvFormElementContext } from "../context.js";
 import { useClasses } from "./Suggestions.styles.js";
 import { staticClasses } from "./Suggestions.styles.js";
 import { HvSelectionList } from "../../SelectionList/SelectionList.js";
 import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
-import { HvFormElementContext } from "../FormElement/context/FormElementContext.js";
 const HvSuggestions = forwardRef((props, extRef) => {
   const {
-    id,
+    id: idProp,
     className,
     classes: classesProp,
     expanded = false,
@@ -28,8 +28,8 @@ const HvSuggestions = forwardRef((props, extRef) => {
   } = props;
   const { classes, cx } = useClasses(classesProp);
   const { rootId } = useTheme();
-  const { elementId } = useContext(HvFormElementContext);
-  const localId = id ?? setId(elementId, "suggestions");
+  const context = useContext(HvFormElementContext);
+  const id = idProp ?? setId(context.id, "suggestions");
   const ref = useRef(null);
   const forkedRef = useForkRef(ref, extRef);
   const [isOpen, setIsOpen] = useState(expanded);
@@ -39,7 +39,7 @@ const HvSuggestions = forwardRef((props, extRef) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      id: localId,
+      id,
       ref: forkedRef,
       className: cx(classes.root, className),
       ...others,
@@ -69,7 +69,7 @@ const HvSuggestions = forwardRef((props, extRef) => {
                 HvSelectionList,
                 {
                   className: classes.list,
-                  id: setId(localId, "list"),
+                  id: setId(id, "list"),
                   onChange: onSuggestionSelected,
                   children: suggestionValues?.map((item) => /* @__PURE__ */ jsx(HvListItem, { value: item, disabled: item.disabled, children: item.label }, item.id))
                 }

package/dist/esm/FormElement/Suggestions/Suggestions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Suggestions.js","sources":["../../../../src/FormElement/Suggestions/Suggestions.tsx"],"sourcesContent":["import { forwardRef, useContext, useEffect, useRef, useState } from \"react\";\nimport {\n  ClickAwayListener,\n  ClickAwayListenerProps,\n} from \"@mui/base/ClickAwayListener\";\nimport { Popper, PopperProps } from \"@mui/base/Popper\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { useTheme, type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvSelectionList } from \"../../SelectionList\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { getContainerElement } from \"../../utils/document\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../context\";\nimport { staticClasses, useClasses } from \"./Suggestions.styles\";\n\nexport { staticClasses as suggestionsClasses };\n\nexport type HvSuggestionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSuggestion {\n  id?: string;\n  label: React.ReactNode;\n  value?: string;\n  disabled?: boolean;\n}\n\nexport interface HvSuggestionsProps extends HvBaseProps {\n  /** Whether suggestions is visible */\n  open?: boolean;\n  /**\n   * Whether suggestions is visible.\n   * @deprecated use `open` instead.\n   * */\n  expanded?: boolean;\n  /** The HTML element Suggestions attaches to. */\n  anchorEl?: HTMLElement | null;\n  /** Array of { id, label, ...others } values to display in the suggestion list */\n  suggestionValues?: HvSuggestion[] | null;\n  /** Function called when a suggestion is selected */\n  onSuggestionSelected?: (event: React.MouseEvent, value: HvSuggestion) => void;\n  /** Function called when suggestion list is closed */\n  onClose?: ClickAwayListenerProps[\"onClickAway\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSuggestionsClasses;\n  /**\n   * If enabled, the suggestions list will be rendered using a portal.\n   * If disabled, it will be under the DOM hierarchy of the parent component.\n   * @default false\n   * */\n  enablePortal?: boolean;\n  /** Props passed to the underlying MUI Popper component */\n  popperProps?: Partial<PopperProps>;\n}\n\nexport const HvSuggestions = forwardRef<\n  // no-indent\n  unknown,\n  HvSuggestionsProps\n>((props, extRef) => {\n  const {\n    id: idProp,\n    className,\n    classes: classesProp,\n    expanded = false,\n    enablePortal = false,\n    open: openProp,\n    anchorEl,\n    suggestionValues = [],\n    onClose,\n    onSuggestionSelected,\n    popperProps,\n    ...others\n  } = props;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { rootId } = useTheme();\n\n  const context = useContext(HvFormElementContext);\n  const id = idProp ?? setId(context.id, \"suggestions\");\n\n  const ref = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef(ref, extRef);\n\n  // TODO: remove controlled+uncontrolled `expanded` prop in v6\n  const [isOpen, setIsOpen] = useState(expanded);\n  useEffect(() => {\n    setIsOpen(expanded);\n  }, [expanded]);\n\n  return (\n    <div\n      id={id}\n      ref={forkedRef}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      <ClickAwayListener\n        onClickAway={(event) => {\n          setIsOpen(false);\n          onClose?.(event);\n        }}\n      >\n        <Popper\n          style={{\n            // @ts-ignore\n            \"--popper-width\": enablePortal\n              ? `${anchorEl?.clientWidth}px`\n              : \"100%\",\n          }}\n          open={openProp ?? isOpen}\n          disablePortal={!enablePortal}\n          container={enablePortal ? getContainerElement(rootId) : undefined}\n          anchorEl={anchorEl}\n          className={cx(classes.popper, {\n            [classes.portal]: enablePortal,\n          })}\n          {...popperProps}\n        >\n          <HvSelectionList\n            className={classes.list}\n            id={setId(id, \"list\")}\n            onChange={onSuggestionSelected}\n          >\n            {suggestionValues?.map((item) => (\n              <HvListItem key={item.id} value={item} disabled={item.disabled}>\n                {item.label}\n              </HvListItem>\n            ))}\n          </HvSelectionList>\n        </Popper>\n      </ClickAwayListener>\n    </div>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;AAwDO,MAAM,gBAAgB,WAI3B,CAAC,OAAO,WAAW;AACb,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA,IACN;AAAA,IACA,mBAAmB,CAAC;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEJ,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,EAAE,OAAO,IAAI,SAAS;AAEtB,QAAA,UAAU,WAAW,oBAAoB;AAC/C,QAAM,KAAK,UAAU,MAAM,QAAQ,IAAI,aAAa;AAE9C,QAAA,MAAM,OAAuB,IAAI;AACjC,QAAA,YAAY,WAAW,KAAK,MAAM;AAGxC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,QAAQ;AAC7C,YAAU,MAAM;AACd,cAAU,QAAQ;AAAA,EAAA,GACjB,CAAC,QAAQ,CAAC;AAGX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAa,CAAC,UAAU;AACtB,sBAAU,KAAK;AACf,sBAAU,KAAK;AAAA,UACjB;AAAA,UAEA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA;AAAA,gBAEL,kBAAkB,eACd,GAAG,UAAU,WAAW,OACxB;AAAA,cACN;AAAA,cACA,MAAM,YAAY;AAAA,cAClB,eAAe,CAAC;AAAA,cAChB,WAAW,eAAe,oBAAoB,MAAM,IAAI;AAAA,cACxD;AAAA,cACA,WAAW,GAAG,QAAQ,QAAQ;AAAA,gBAC5B,CAAC,QAAQ,MAAM,GAAG;AAAA,cAAA,CACnB;AAAA,cACA,GAAG;AAAA,cAEJ,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,QAAQ;AAAA,kBACnB,IAAI,MAAM,IAAI,MAAM;AAAA,kBACpB,UAAU;AAAA,kBAET,UAAkB,kBAAA,IAAI,CAAC,6BACrB,YAAyB,EAAA,OAAO,MAAM,UAAU,KAAK,UACnD,UAAA,KAAK,MADS,GAAA,KAAK,EAEtB,CACD;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ,CAAC;"}

package/dist/esm/FormElement/Suggestions/Suggestions.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Suggestions.styles.js","sources":["../../../../src/FormElement/Suggestions/Suggestions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSuggestions\", {\n  root: { position: \"relative\" },\n  list: {\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n    padding: theme.space.xs,\n    width: \"100%\",\n  },\n  popper: {\n    width: \"var(--popper-width)\",\n    position: \"absolute\",\n    zIndex: theme.zIndices.tooltip,\n    \":not($portal)\": {\n      transform: \"translate3d(0, -1px, 0) !important\",\n    },\n  },\n  portal: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,EAAE,UAAU,WAAW;AAAA,EAC7B,MAAM;AAAA,IACJ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,MAAM,OAAO;AAAA,IACxB,SAAS,MAAM,MAAM;AAAA,IACrB,OAAO;AAAA,EACT;AAAA,EACA,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ,MAAM,SAAS;AAAA,IACvB,iBAAiB;AAAA,MACf,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,QAAQ,CAAA;AACV,CAAC;"}

package/dist/esm/{Forms → FormElement}/WarningText/WarningText.js

@@ -3,9 +3,9 @@ import { useContext } from "react";
 import { Fail } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { setId } from "../../utils/setId.js";
+import { HvFormElementContext } from "../context.js";
 import { useClasses } from "./WarningText.styles.js";
 import { staticClasses } from "./WarningText.styles.js";
-import { HvFormElementContext } from "../FormElement/context/FormElementContext.js";
 const HvWarningText = (props) => {
   const {
     children,
@@ -22,10 +22,10 @@ const HvWarningText = (props) => {
     ...others
   } = useDefaultProps("HvWarningText", props);
   const { classes, cx } = useClasses(classesProp);
-  const { elementId, elementStatus, elementDisabled } = useContext(HvFormElementContext);
-  const disabled = disabledProp || elementDisabled;
-  const visible = isVisibleProp ?? elementStatus === "invalid";
-  const id = idProp ?? setId(elementId, "error");
+  const context = useContext(HvFormElementContext);
+  const disabled = disabledProp ?? context.disabled;
+  const visible = isVisibleProp ?? context.status === "invalid";
+  const id = idProp ?? setId(context.id, "error");
   const showWarning = visible && !disabled;
   const adornment = adornmentProp || /* @__PURE__ */ jsx(Fail, { size: "xs", className: classes.defaultIcon });
   return /* @__PURE__ */ jsxs(

package/dist/esm/FormElement/WarningText/WarningText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WarningText.js","sources":["../../../../src/FormElement/WarningText/WarningText.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { Fail } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../context\";\nimport { staticClasses, useClasses } from \"./WarningText.styles\";\n\nexport { staticClasses as warningTextClasses };\n\nexport type HvWarningTextClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWarningTextProps extends HvBaseProps {\n  /** Icon to be rendered alongside the warning text. */\n  adornment?: React.ReactNode;\n  /** If `true` the text is not rendered. */\n  isVisible?: boolean;\n  /** If `true` the text is disabled. */\n  disabled?: boolean;\n  /** If `true` the text won't include a gutter. */\n  disableGutter?: boolean;\n  /** If `true` the text won't include the top border. */\n  disableBorder?: boolean;\n  /** If `true` the adornment icon isn't shown. */\n  disableAdornment?: boolean;\n  /** If `true` the text isn't shown. */\n  hideText?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvWarningTextClasses;\n}\n\n/**\n * Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.\n */\nexport const HvWarningText = (props: HvWarningTextProps) => {\n  const {\n    children,\n    adornment: adornmentProp,\n    isVisible: isVisibleProp,\n    classes: classesProp,\n    className,\n    id: idProp,\n    disabled: disabledProp,\n    disableGutter = false,\n    disableBorder = false,\n    disableAdornment = false,\n    hideText = false,\n    ...others\n  } = useDefaultProps(\"HvWarningText\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const context = useContext(HvFormElementContext);\n  const disabled = disabledProp ?? context.disabled;\n  const visible = isVisibleProp ?? context.status === \"invalid\";\n  const id = idProp ?? setId(context.id, \"error\");\n  const showWarning = visible && !disabled;\n  const adornment = adornmentProp || (\n    <Fail size=\"xs\" className={classes.defaultIcon} />\n  );\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.show]: showWarning,\n          [classes.topBorder]: !disableBorder,\n        },\n        className,\n      )}\n    >\n      {!disableAdornment && adornment}\n      <span\n        id={id}\n        className={cx(classes.warningText, {\n          [classes.topGutter]: !disableGutter,\n          [classes.hideText]: hideText,\n        })}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-relevant=\"additions text\"\n        {...others}\n      >\n        {showWarning && children}\n      </span>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAsCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT;AAAA,IACA,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,UAAU,WAAW,oBAAoB;AACzC,QAAA,WAAW,gBAAgB,QAAQ;AACnC,QAAA,UAAU,iBAAiB,QAAQ,WAAW;AACpD,QAAM,KAAK,UAAU,MAAM,QAAQ,IAAI,OAAO;AACxC,QAAA,cAAc,WAAW,CAAC;AAC1B,QAAA,YAAY,iBACf,oBAAA,MAAA,EAAK,MAAK,MAAK,WAAW,QAAQ,aAAa;AAIhD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AAAA,MAEC,UAAA;AAAA,QAAA,CAAC,oBAAoB;AAAA,QACtB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,WAAW,GAAG,QAAQ,aAAa;AAAA,cACjC,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,cACtB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YAAA,CACrB;AAAA,YACD,MAAK;AAAA,YACL,aAAU;AAAA,YACV,iBAAc;AAAA,YACb,GAAG;AAAA,YAEH,UAAe,eAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/esm/FormElement/WarningText/WarningText.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WarningText.styles.js","sources":["../../../../src/FormElement/WarningText/WarningText.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWarningText\", {\n  root: {\n    display: \"none\",\n    color: theme.colors.negative_120,\n  },\n  defaultIcon: { minWidth: \"24px\", width: \"24px\", height: \"24px\" },\n  warningText: {\n    ...theme.typography.caption1,\n    color: \"inherit\",\n    paddingRight: theme.space.xs,\n  },\n  show: { display: \"flex\" },\n  topGutter: { paddingTop: \"3px\" },\n  hideText: {\n    // display none or visibility hidden prevents\n    // browser to trigger the aria-alert\n    width: 0,\n    height: 0,\n    padding: 0,\n    margin: 0,\n    overflow: \"hidden\",\n  },\n  topBorder: { borderTop: \"1px solid currentcolor\" },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,aAAa,EAAE,UAAU,QAAQ,OAAO,QAAQ,QAAQ,OAAO;AAAA,EAC/D,aAAa;AAAA,IACX,GAAG,MAAM,WAAW;AAAA,IACpB,OAAO;AAAA,IACP,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,MAAM,EAAE,SAAS,OAAO;AAAA,EACxB,WAAW,EAAE,YAAY,MAAM;AAAA,EAC/B,UAAU;AAAA;AAAA;AAAA,IAGR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,WAAW,EAAE,WAAW,yBAAyB;AACnD,CAAC;"}

package/dist/esm/FormElement/context.js

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+const HvFormElementContext = createContext(
+  {}
+);
+const HvFormElementDescriptorsContext = createContext({});
+const HvFormElementValueContext = createContext(void 0);
+export {
+  HvFormElementContext,
+  HvFormElementDescriptorsContext,
+  HvFormElementValueContext
+};

package/dist/esm/FormElement/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../src/FormElement/context.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nimport type { HvFormStatus } from \"./FormElement\";\n\nexport interface HvFormElementContextValue {\n  /** id to be applied to the form element root node. */\n  id?: string;\n  /**\n   * Name of the form element.\n   *\n   * Part of a name/value pair, should be the name property of the underling native input.\n   */\n  name?: string;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /** Whether the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n}\n\nexport const HvFormElementContext = createContext<HvFormElementContextValue>(\n  {},\n);\n\nexport interface HvFormElementDescriptorsContextValue {\n  input?: any;\n  label?: any;\n  descriptors?: any;\n}\n\nexport const HvFormElementDescriptorsContext =\n  createContext<HvFormElementDescriptorsContextValue>({});\n\nexport const HvFormElementValueContext = createContext<any>(undefined);\n"],"names":[],"mappings":";AA8BO,MAAM,uBAAuB;AAAA,EAClC,CAAA;AACF;AAQa,MAAA,kCACX,cAAoD,CAAE,CAAA;AAE3C,MAAA,4BAA4B,cAAmB,MAAS;"}

package/dist/esm/{Forms/FormElement/utils/FormUtils.js → FormElement/utils.js}

@@ -1,4 +1,4 @@
-import React__default from "react";
+import { Children } from "react";
 const findDescriptors = (children, descriptors = {
   input: [],
   label: [],
@@ -8,7 +8,7 @@ const findDescriptors = (children, descriptors = {
   // TODO: refactor this out
   HvCalendarHeader: []
 }) => {
-  React__default.Children.forEach(children, (child) => {
+  Children.forEach(children, (child) => {
     if (child?.type?.formElementType && child.props?.id) {
       descriptors[child.type.formElementType]?.push(
         {
@@ -33,29 +33,39 @@ const getIdReferenceFor = (formElementType, descriptors, filterFor = null) => {
 };
 const buildFormElementPropsFromContext = (name, disabled, readOnly, required, context) => {
   return {
-    name: name || context?.elementName,
-    disabled: disabled !== void 0 ? disabled : context?.elementDisabled,
-    readOnly: readOnly !== void 0 ? readOnly : context?.elementReadOnly,
-    required: required !== void 0 ? required : context?.elementRequired,
-    status: context?.elementStatus
+    name: name || context?.name,
+    disabled: disabled ?? context?.disabled,
+    readOnly: readOnly ?? context?.readOnly,
+    required: required ?? context?.required,
+    status: context?.status
   };
 };
-const buildAriaPropsFromContext = (props, context, isInvalid, inputId) => {
+const buildAriaPropsFromContext = (props, context, isInvalid2, inputId) => {
   const arias = {
     "aria-labelledby": props?.["aria-labelledby"] !== void 0 ? props?.["aria-labelledby"] : getIdReferenceListFor("label", context?.descriptors, inputId),
     "aria-describedby": props?.["aria-describedby"] !== void 0 ? props?.["aria-describedby"] : getIdReferenceListFor("description", context?.descriptors),
     "aria-controls": props?.["aria-controls"] !== void 0 ? props?.["aria-controls"] : getIdReferenceListFor("controlled", context?.descriptors)
   };
-  if (isInvalid) {
-    arias["aria-invalid"] = isInvalid;
+  if (isInvalid2) {
+    arias["aria-invalid"] = isInvalid2;
     arias["aria-errormessage"] = props?.["aria-errormessage"] !== void 0 ? props?.["aria-errormessage"] : getIdReferenceFor("errormessage", context?.descriptors);
   }
   return arias;
 };
+const validationStates = Object.freeze({
+  standBy: "standBy",
+  valid: "valid",
+  invalid: "invalid"
+});
+const isValid = (state) => state === validationStates.valid;
+const isInvalid = (state) => state === validationStates.invalid;
 export {
   buildAriaPropsFromContext,
   buildFormElementPropsFromContext,
   findDescriptors,
   getIdReferenceFor,
-  getIdReferenceListFor
+  getIdReferenceListFor,
+  isInvalid,
+  isValid,
+  validationStates
 };

package/dist/esm/FormElement/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/FormElement/utils.ts"],"sourcesContent":["import { Children } from \"react\";\nimport type { InputBaseComponentProps } from \"@mui/material/InputBase\";\n\nimport type {\n  HvFormElementContextValue,\n  HvFormElementDescriptorsContextValue,\n} from \"./context\";\nimport type { HvFormStatus } from \"./FormElement\";\n\ninterface Descriptor {\n  id?: string;\n  htmlFor?: string;\n}\n/**\n * Scans the element's children looking for the children IDs that match the different form element types.\n * This function will produce an object that has a key for each provided name\n * Inside each key there will be an array with each id of the found descriptor.\n *\n * @param {Array} children - The children inside the form element to scan.\n * @param {Object} descriptors - Initial descriptors map (used for recursion).\n *\n */\nexport const findDescriptors = (\n  children: React.ReactNode,\n  descriptors: {\n    input: Descriptor[];\n    label: Descriptor[];\n    description: Descriptor[];\n    controlled: Descriptor[];\n    errormessage: Descriptor[];\n    HvCalendarHeader?: Descriptor[];\n  } = {\n    input: [],\n    label: [],\n    description: [],\n    controlled: [],\n    errormessage: [],\n\n    // TODO: refactor this out\n    HvCalendarHeader: [],\n  },\n) => {\n  Children.forEach(children, (child: any) => {\n    if (child?.type?.formElementType && child.props?.id) {\n      descriptors[child.type.formElementType as keyof typeof descriptors]?.push(\n        {\n          id: child.props?.id,\n          htmlFor: child.props?.htmlFor,\n        },\n      );\n    }\n\n    if (child?.type?.formElementType !== \"formelement\") {\n      findDescriptors(child?.props?.children, descriptors);\n    }\n  });\n\n  return descriptors;\n};\n\nexport const getIdReferenceListFor = (\n  formElementType: string,\n  descriptors: any,\n  filterFor: string | null = null,\n) => {\n  const referenceList = descriptors?.[formElementType]\n    ?.filter((d: any) => d.htmlFor !== filterFor)\n    ?.map((d: any) => d.id)\n    .join(\" \")\n    .trim();\n\n  return referenceList !== \"\" ? referenceList : undefined;\n};\n\nexport const getIdReferenceFor = (\n  formElementType: string,\n  descriptors: any,\n  filterFor = null,\n) => {\n  const referenceList = descriptors?.[formElementType]\n    ?.filter((d: any) => d.htmlFor !== filterFor)\n    ?.map((d: any) => d.id)?.[0];\n\n  return referenceList !== \"\" ? referenceList : undefined;\n};\n\nexport const buildFormElementPropsFromContext = (\n  name?: string,\n  disabled?: boolean,\n  readOnly?: boolean,\n  required?: boolean,\n  context?: HvFormElementContextValue,\n) => {\n  return {\n    name: name || context?.name,\n    disabled: disabled ?? context?.disabled,\n    readOnly: readOnly ?? context?.readOnly,\n    required: required ?? context?.required,\n    status: context?.status,\n  };\n};\n\nexport const buildAriaPropsFromContext = (\n  props: InputBaseComponentProps,\n  context: HvFormElementDescriptorsContextValue,\n  isInvalid: boolean,\n  inputId?: string,\n) => {\n  const arias: React.AriaAttributes = {\n    \"aria-labelledby\":\n      props?.[\"aria-labelledby\"] !== undefined\n        ? props?.[\"aria-labelledby\"]\n        : getIdReferenceListFor(\"label\", context?.descriptors, inputId),\n    \"aria-describedby\":\n      props?.[\"aria-describedby\"] !== undefined\n        ? props?.[\"aria-describedby\"]\n        : getIdReferenceListFor(\"description\", context?.descriptors),\n    \"aria-controls\":\n      props?.[\"aria-controls\"] !== undefined\n        ? props?.[\"aria-controls\"]\n        : getIdReferenceListFor(\"controlled\", context?.descriptors),\n  };\n\n  if (isInvalid) {\n    arias[\"aria-invalid\"] = isInvalid;\n    arias[\"aria-errormessage\"] =\n      props?.[\"aria-errormessage\"] !== undefined\n        ? props?.[\"aria-errormessage\"]\n        : getIdReferenceFor(\"errormessage\", context?.descriptors);\n  }\n\n  return arias;\n};\n\nexport const validationStates = Object.freeze({\n  standBy: \"standBy\",\n  valid: \"valid\",\n  invalid: \"invalid\",\n});\n\nexport const isValid = (state: HvFormStatus) =>\n  state === validationStates.valid;\nexport const isInvalid = (state: HvFormStatus) =>\n  state === validationStates.invalid;\n"],"names":["isInvalid"],"mappings":";AAsBa,MAAA,kBAAkB,CAC7B,UACA,cAOI;AAAA,EACF,OAAO,CAAC;AAAA,EACR,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,YAAY,CAAC;AAAA,EACb,cAAc,CAAC;AAAA;AAAA,EAGf,kBAAkB,CAAA;AACpB,MACG;AACM,WAAA,QAAQ,UAAU,CAAC,UAAe;AACzC,QAAI,OAAO,MAAM,mBAAmB,MAAM,OAAO,IAAI;AACvC,kBAAA,MAAM,KAAK,eAA2C,GAAG;AAAA,QACnE;AAAA,UACE,IAAI,MAAM,OAAO;AAAA,UACjB,SAAS,MAAM,OAAO;AAAA,QAAA;AAAA,MAE1B;AAAA,IAAA;AAGE,QAAA,OAAO,MAAM,oBAAoB,eAAe;AAClC,sBAAA,OAAO,OAAO,UAAU,WAAW;AAAA,IAAA;AAAA,EACrD,CACD;AAEM,SAAA;AACT;AAEO,MAAM,wBAAwB,CACnC,iBACA,aACA,YAA2B,SACxB;AACG,QAAA,gBAAgB,cAAc,eAAe,GAC/C,OAAO,CAAC,MAAW,EAAE,YAAY,SAAS,GAC1C,IAAI,CAAC,MAAW,EAAE,EAAE,EACrB,KAAK,GAAG,EACR,KAAK;AAED,SAAA,kBAAkB,KAAK,gBAAgB;AAChD;AAEO,MAAM,oBAAoB,CAC/B,iBACA,aACA,YAAY,SACT;AACH,QAAM,gBAAgB,cAAc,eAAe,GAC/C,OAAO,CAAC,MAAW,EAAE,YAAY,SAAS,GAC1C,IAAI,CAAC,MAAW,EAAE,EAAE,IAAI,CAAC;AAEtB,SAAA,kBAAkB,KAAK,gBAAgB;AAChD;AAEO,MAAM,mCAAmC,CAC9C,MACA,UACA,UACA,UACA,YACG;AACI,SAAA;AAAA,IACL,MAAM,QAAQ,SAAS;AAAA,IACvB,UAAU,YAAY,SAAS;AAAA,IAC/B,UAAU,YAAY,SAAS;AAAA,IAC/B,UAAU,YAAY,SAAS;AAAA,IAC/B,QAAQ,SAAS;AAAA,EACnB;AACF;AAEO,MAAM,4BAA4B,CACvC,OACA,SACAA,YACA,YACG;AACH,QAAM,QAA8B;AAAA,IAClC,mBACE,QAAQ,iBAAiB,MAAM,SAC3B,QAAQ,iBAAiB,IACzB,sBAAsB,SAAS,SAAS,aAAa,OAAO;AAAA,IAClE,oBACE,QAAQ,kBAAkB,MAAM,SAC5B,QAAQ,kBAAkB,IAC1B,sBAAsB,eAAe,SAAS,WAAW;AAAA,IAC/D,iBACE,QAAQ,eAAe,MAAM,SACzB,QAAQ,eAAe,IACvB,sBAAsB,cAAc,SAAS,WAAW;AAAA,EAChE;AAEA,MAAIA,YAAW;AACb,UAAM,cAAc,IAAIA;AACxB,UAAM,mBAAmB,IACvB,QAAQ,mBAAmB,MAAM,SAC7B,QAAQ,mBAAmB,IAC3B,kBAAkB,gBAAgB,SAAS,WAAW;AAAA,EAAA;AAGvD,SAAA;AACT;AAEa,MAAA,mBAAmB,OAAO,OAAO;AAAA,EAC5C,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AACX,CAAC;AAEM,MAAM,UAAU,CAAC,UACtB,UAAU,iBAAiB;AACtB,MAAM,YAAY,CAAC,UACxB,UAAU,iBAAiB;"}

package/dist/esm/Input/Input.js

@@ -4,7 +4,7 @@ import { useForkRef } from "@mui/material/utils";
 import { CloseXS, Search, PreviewOff, Preview, Success } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { DEFAULT_ERROR_MESSAGES, computeValidationType, validateInput, computeValidationState, computeValidationMessage, hasBuiltInValidations } from "../BaseInput/validations.js";
-import validationState, { isInvalid, isValid } from "../Forms/FormElement/validationStates.js";
+import { HvSuggestions } from "../FormElement/Suggestions/Suggestions.js";
 import { useControlled } from "../hooks/useControlled.js";
 import { useIsMounted } from "../hooks/useIsMounted.js";
 import { useLabels } from "../hooks/useLabels.js";
@@ -13,14 +13,14 @@ import { isKey } from "../utils/keyboardUtils.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./Input.styles.js";
 import { staticClasses } from "./Input.styles.js";
-import { HvAdornment } from "../Forms/Adornment/Adornment.js";
+import { HvAdornment } from "../FormElement/Adornment/Adornment.js";
+import { validationStates, isInvalid, isValid } from "../FormElement/utils.js";
 import { HvBaseInput } from "../BaseInput/BaseInput.js";
-import { HvSuggestions } from "../Forms/Suggestions/Suggestions.js";
 import { HvTooltip } from "../Tooltip/Tooltip.js";
-import { HvFormElement } from "../Forms/FormElement/FormElement.js";
-import { HvLabel } from "../Forms/Label/Label.js";
-import { HvInfoMessage } from "../Forms/InfoMessage/InfoMessage.js";
-import { HvWarningText } from "../Forms/WarningText/WarningText.js";
+import { HvFormElement } from "../FormElement/FormElement.js";
+import { HvLabel } from "../FormElement/Label/Label.js";
+import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
+import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const DEFAULT_LABELS = {
   /** The label of the clear button. */
   clearButtonLabel: "Clear the text",
@@ -53,9 +53,9 @@ const HvInput = forwardRef(function HvInput2(props, ref) {
     name,
     value: valueProp,
     defaultValue = "",
-    required = false,
-    readOnly = false,
-    disabled = false,
+    required,
+    readOnly,
+    disabled,
     enablePortal = false,
     suggestOnFocus = false,
     label,
@@ -99,9 +99,9 @@ const HvInput = forwardRef(function HvInput2(props, ref) {
   const isDirty = useRef(false);
   const [value, setValue] = useControlled(valueProp, defaultValue);
   const isEmptyValue = value == null || value === "";
-  const [validationState$1, setValidationState] = useControlled(
+  const [validationState, setValidationState] = useControlled(
     status,
-    validationState.standBy
+    validationStates.standBy
   );
   const [validationMessage, setValidationMessage] = useControlled(
     statusMessage,
@@ -154,7 +154,7 @@ const HvInput = forwardRef(function HvInput2(props, ref) {
     validation,
     inputProps
   ));
-  const isStateInvalid = isInvalid(validationState$1);
+  const isStateInvalid = isInvalid(validationState);
   const [revealPassword, setRevealPassword] = useState(false);
   const realType = useMemo(() => {
     if (type === "password") {
@@ -212,7 +212,7 @@ const HvInput = forwardRef(function HvInput2(props, ref) {
   };
   const onFocusHandler = (event) => {
     setFocused(true);
-    setValidationState(validationState.standBy);
+    setValidationState(validationStates.standBy);
     onFocus?.(event, value);
   };
   const getSuggestions = (li) => {
@@ -247,12 +247,12 @@ const HvInput = forwardRef(function HvInput2(props, ref) {
     }
   };
   const hasOnEnter = onEnter != null;
-  const showClear = !disabled && !readOnly && !disableClear && !isEmptyValue && (!hasOnEnter || type !== "search" || disableSearchButton || validationState$1 !== validationState.standBy);
+  const showClear = !disabled && !readOnly && !disableClear && !isEmptyValue && (!hasOnEnter || type !== "search" || disableSearchButton || validationState !== validationStates.standBy);
   const showSearchIcon = type === "search" && !disableSearchButton;
   const showRevealPasswordButton = type === "password" && !disableRevealPassword;
   const handleClear = useCallback(
     (event) => {
-      setValidationState(validationState.standBy);
+      setValidationState(validationStates.standBy);
       changeInputValue(inputRef.current, "");
       if (canShowSuggestions && suggestOnFocus) event.stopPropagation();
       else {
@@ -294,7 +294,7 @@ const HvInput = forwardRef(function HvInput2(props, ref) {
     [onEnter, value]
   );
   const searchButton = useMemo(() => {
-    const reallyShowIt = showSearchIcon && (isEmptyValue || hasOnEnter && validationState$1 === validationState.standBy);
+    const reallyShowIt = showSearchIcon && (isEmptyValue || hasOnEnter && validationState === validationStates.standBy);
     if (!reallyShowIt) {
       return null;
     }
@@ -311,7 +311,7 @@ const HvInput = forwardRef(function HvInput2(props, ref) {
     showSearchIcon,
     isEmptyValue,
     hasOnEnter,
-    validationState$1,
+    validationState,
     classes.adornmentButton,
     handleSearch,
     labels?.searchButtonLabel
@@ -355,11 +355,11 @@ const HvInput = forwardRef(function HvInput2(props, ref) {
     if (!showValidationIcon) {
       return null;
     }
-    if (!isValid(validationState$1)) {
+    if (!isValid(validationState)) {
       return null;
     }
     return /* @__PURE__ */ jsx(Success, { color: "positive", className: classes.icon });
-  }, [showValidationIcon, validationState$1, classes.icon]);
+  }, [showValidationIcon, validationState, classes.icon]);
   const customIconEl = useMemo(
     () => isValidElement(endAdornment) && cloneElement(endAdornment, {
       className: cx(endAdornment.props.className, classes.icon)
@@ -395,7 +395,7 @@ const HvInput = forwardRef(function HvInput2(props, ref) {
     {
       id,
       name,
-      status: validationState$1,
+      status: validationState,
       disabled,
       required,
       readOnly,