@hitachivantara/uikit-react-core 5.22.1 → 5.24.0

package/dist/esm/components/Forms/Label/Label.js

@@ -1,4 +1,5 @@
 import { useContext } from "react";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { clsx } from "clsx";
 import { setId } from "../../../utils/setId.js";
 import { findDescriptors } from "../FormElement/utils/FormUtils.js";
@@ -6,18 +7,19 @@ import { StyledTypography } from "./Label.styles.js";
 import labelClasses from "./labelClasses.js";
 import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
 import { HvFormElementContext } from "../FormElement/context/FormElementContext.js";
-const HvLabel = ({
-  id,
-  classes,
-  className,
-  children,
-  label,
-  disabled,
-  required,
-  htmlFor: htmlForProp,
-  ...others
-}) => {
+const HvLabel = (props) => {
   var _a, _b, _c;
+  const {
+    id,
+    classes,
+    className,
+    children,
+    label,
+    disabled,
+    required,
+    htmlFor: htmlForProp,
+    ...others
+  } = useDefaultProps("HvLabel", props);
   const {
     elementId,
     elementDisabled,

package/dist/esm/components/Forms/Label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../../../../../src/components/Forms/Label/Label.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { clsx } from \"clsx\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { HvFormElementContext } from \"../FormElement\";\nimport { findDescriptors } from \"../FormElement/utils/FormUtils\";\nimport { StyledTypography } from \"./Label.styles\";\nimport labelClasses, { HvLabelClasses } from \"./labelClasses\";\n\nexport interface HvLabelProps extends HvBaseProps {\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 = ({\n  id,\n  classes,\n  className,\n  children,\n  label,\n  disabled,\n  required,\n  htmlFor: htmlForProp,\n  ...others\n}: HvLabelProps) => {\n  const { elementId, elementDisabled, elementRequired } =\n    useContext(HvFormElementContext);\n\n  const localDisabled = disabled || elementDisabled;\n  const localRequired = required || elementRequired;\n\n  const localId = id ?? setId(elementId, \"label\");\n\n  const forId = htmlForProp || findDescriptors(children)?.input?.[0]?.id;\n\n  return (\n    <>\n      <StyledTypography\n        id={localId}\n        className={clsx(\n          className,\n          labelClasses.root,\n          classes?.root,\n          localDisabled &&\n            clsx(labelClasses.labelDisabled, classes?.labelDisabled),\n          children &&\n            label &&\n            clsx(labelClasses.childGutter, classes?.childGutter)\n        )}\n        variant=\"label\"\n        component=\"label\"\n        htmlFor={forId}\n        $labelDisabled={!!localDisabled}\n        $childGutter={!!(children && label)}\n        {...others}\n      >\n        {label}\n        {localRequired && <span aria-hidden=\"true\">*</span>}\n      </StyledTypography>\n      {children}\n    </>\n  );\n};\n"],"names":["HvLabel","id","classes","className","children","label","disabled","required","htmlFor","htmlForProp","others","elementId","elementDisabled","elementRequired","useContext","HvFormElementContext","localDisabled","localRequired","localId","setId","forId","findDescriptors","input","_Fragment","_jsxs","StyledTypography","clsx","labelClasses","root","labelDisabled","childGutter","variant","component","$labelDisabled","$childGutter"],"mappings":";;;;;;;;AA8BO,MAAMA,UAAUA,CAAC;AAAA,EACtBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACT,GAAGC;AACS,MAAM;;AACZ,QAAA;AAAA,IAAEC;AAAAA,IAAWC;AAAAA,IAAiBC;AAAAA,EAAAA,IAClCC,WAAWC,oBAAoB;AAEjC,QAAMC,gBAAgBV,YAAYM;AAClC,QAAMK,gBAAgBV,YAAYM;AAElC,QAAMK,UAAUjB,MAAMkB,MAAMR,WAAW,OAAO;AAE9C,QAAMS,QAAQX,iBAAeY,iCAAgBjB,QAAQ,MAAxBiB,mBAA2BC,UAA3BD,mBAAmC,OAAnCA,mBAAuCpB;AAEpE,8BACEsB,UAAA;AAAA,IAAAnB,UAAA,CACEoB,qBAACC,kBAAgB;AAAA,MACfxB,IAAIiB;AAAAA,MACJf,WAAWuB,KACTvB,WACAwB,aAAaC,MACb1B,mCAAS0B,MACTZ,iBACEU,KAAKC,aAAaE,eAAe3B,mCAAS2B,aAAa,GACzDzB,YACEC,SACAqB,KAAKC,aAAaG,aAAa5B,mCAAS4B,WAAW,CACvD;AAAA,MACAC,SAAQ;AAAA,MACRC,WAAU;AAAA,MACVxB,SAASY;AAAAA,MACTa,gBAAgB,CAAC,CAACjB;AAAAA,MAClBkB,cAAc,CAAC,EAAE9B,YAAYC;AAAAA,MAAO,GAChCK;AAAAA,MAAMN,UAETC,CAAAA,OACAY,qCAAiB,QAAA;AAAA,QAAM,eAAY;AAAA,QAAMb,UAAC;AAAA,MAAA,CAAO,CAAC;AAAA,IACnC,CAAA,GACjBA,QAAQ;AAAA,EAAA,CACT;AAEN;"}
+{"version":3,"file":"Label.js","sources":["../../../../../src/components/Forms/Label/Label.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { clsx } from \"clsx\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { HvFormElementContext } from \"../FormElement\";\nimport { findDescriptors } from \"../FormElement/utils/FormUtils\";\nimport { StyledTypography } from \"./Label.styles\";\nimport labelClasses, { HvLabelClasses } from \"./labelClasses\";\n\nexport interface HvLabelProps extends HvBaseProps {\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,\n    classes,\n    className,\n    children,\n    label,\n    disabled,\n    required,\n    htmlFor: htmlForProp,\n    ...others\n  } = useDefaultProps(\"HvLabel\", props);\n\n  const { elementId, elementDisabled, elementRequired } =\n    useContext(HvFormElementContext);\n\n  const localDisabled = disabled || elementDisabled;\n  const localRequired = required || elementRequired;\n\n  const localId = id ?? setId(elementId, \"label\");\n\n  const forId = htmlForProp || findDescriptors(children)?.input?.[0]?.id;\n\n  return (\n    <>\n      <StyledTypography\n        id={localId}\n        className={clsx(\n          className,\n          labelClasses.root,\n          classes?.root,\n          localDisabled &&\n            clsx(labelClasses.labelDisabled, classes?.labelDisabled),\n          children &&\n            label &&\n            clsx(labelClasses.childGutter, classes?.childGutter)\n        )}\n        variant=\"label\"\n        component=\"label\"\n        htmlFor={forId}\n        $labelDisabled={!!localDisabled}\n        $childGutter={!!(children && label)}\n        {...others}\n      >\n        {label}\n        {localRequired && <span aria-hidden=\"true\">*</span>}\n      </StyledTypography>\n      {children}\n    </>\n  );\n};\n"],"names":["HvLabel","props","id","classes","className","children","label","disabled","required","htmlFor","htmlForProp","others","useDefaultProps","elementId","elementDisabled","elementRequired","useContext","HvFormElementContext","localDisabled","localRequired","localId","setId","forId","findDescriptors","input","_Fragment","_jsxs","StyledTypography","clsx","labelClasses","root","labelDisabled","childGutter","variant","component","$labelDisabled","$childGutter"],"mappings":";;;;;;;;;AA+BaA,MAAAA,UAAUA,CAACC,UAAwB;;AACxC,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,WAAWX,KAAK;AAE9B,QAAA;AAAA,IAAEY;AAAAA,IAAWC;AAAAA,IAAiBC;AAAAA,EAAAA,IAClCC,WAAWC,oBAAoB;AAEjC,QAAMC,gBAAgBX,YAAYO;AAClC,QAAMK,gBAAgBX,YAAYO;AAElC,QAAMK,UAAUlB,MAAMmB,MAAMR,WAAW,OAAO;AAE9C,QAAMS,QAAQZ,iBAAea,iCAAgBlB,QAAQ,MAAxBkB,mBAA2BC,UAA3BD,mBAAmC,OAAnCA,mBAAuCrB;AAEpE,8BACEuB,UAAA;AAAA,IAAApB,UAAA,CACEqB,qBAACC,kBAAgB;AAAA,MACfzB,IAAIkB;AAAAA,MACJhB,WAAWwB,KACTxB,WACAyB,aAAaC,MACb3B,mCAAS2B,MACTZ,iBACEU,KAAKC,aAAaE,eAAe5B,mCAAS4B,aAAa,GACzD1B,YACEC,SACAsB,KAAKC,aAAaG,aAAa7B,mCAAS6B,WAAW,CACvD;AAAA,MACAC,SAAQ;AAAA,MACRC,WAAU;AAAA,MACVzB,SAASa;AAAAA,MACTa,gBAAgB,CAAC,CAACjB;AAAAA,MAClBkB,cAAc,CAAC,EAAE/B,YAAYC;AAAAA,MAAO,GAChCK;AAAAA,MAAMN,UAETC,CAAAA,OACAa,qCAAiB,QAAA;AAAA,QAAM,eAAY;AAAA,QAAMd,UAAC;AAAA,MAAA,CAAO,CAAC;AAAA,IACnC,CAAA,GACjBA,QAAQ;AAAA,EAAA,CACT;AAEN;"}

package/dist/esm/components/Forms/WarningText/WarningText.js

@@ -1,4 +1,5 @@
 import { useContext } from "react";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { clsx } from "clsx";
 import isNil from "lodash/isNil";
 import { setId } from "../../../utils/setId.js";
@@ -6,20 +7,21 @@ import { StyledIcon, StyledRoot, StyledTypography } from "./WarningText.styles.j
 import warningTextClasses from "./warningTextClasses.js";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { HvFormElementContext } from "../FormElement/context/FormElementContext.js";
-const HvWarningText = ({
-  children,
-  adornment,
-  isVisible,
-  classes,
-  className,
-  id,
-  disabled,
-  disableGutter = false,
-  disableBorder = false,
-  disableAdornment = false,
-  hideText = false,
-  ...others
-}) => {
+const HvWarningText = (props) => {
+  const {
+    children,
+    adornment,
+    isVisible,
+    classes,
+    className,
+    id,
+    disabled,
+    disableGutter = false,
+    disableBorder = false,
+    disableAdornment = false,
+    hideText = false,
+    ...others
+  } = useDefaultProps("HvWarningText", props);
   const {
     elementId,
     elementStatus,

package/dist/esm/components/Forms/WarningText/WarningText.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningText.js","sources":["../../../../../src/components/Forms/WarningText/WarningText.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { clsx } from \"clsx\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { StyledRoot, StyledTypography, StyledIcon } from \"./WarningText.styles\";\nimport warningTextClasses, { HvWarningTextClasses } from \"./warningTextClasses\";\nimport { HvFormElementContext } from \"../FormElement\";\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 = ({\n  children,\n  adornment,\n  isVisible,\n  classes,\n  className,\n  id,\n  disabled,\n  disableGutter = false,\n  disableBorder = false,\n  disableAdornment = false,\n  hideText = false,\n  ...others\n}: HvWarningTextProps) => {\n  const { elementId, elementStatus, elementDisabled } =\n    useContext(HvFormElementContext);\n  const localDisabled = disabled || elementDisabled;\n  const localVisible = !isNil(isVisible)\n    ? isVisible\n    : elementStatus === \"invalid\";\n  const localId = id ?? setId(elementId, \"error\");\n  const showWarning = localVisible && !localDisabled;\n  const content = showWarning ? children : \"\";\n  const localAdornment = adornment || (\n    <StyledIcon\n      className={clsx(warningTextClasses.defaultIcon, classes?.defaultIcon)}\n      semantic=\"negative\"\n    />\n  );\n\n  return (\n    <StyledRoot\n      className={clsx(\n        className,\n        warningTextClasses.root,\n        classes?.root,\n        showWarning && clsx(warningTextClasses.show, classes?.show),\n        !disableBorder && clsx(warningTextClasses.topBorder, classes?.topBorder)\n      )}\n      $show={showWarning}\n      $topBorder={!disableBorder}\n    >\n      {!disableAdornment && localAdornment}\n      <StyledTypography\n        id={localId}\n        className={clsx(\n          warningTextClasses.warningText,\n          classes?.warningText,\n          !disableGutter &&\n            clsx(warningTextClasses.topGutter, classes?.topGutter),\n          hideText && clsx(warningTextClasses.hideText, classes?.hideText)\n        )}\n        $topGutter={!disableGutter}\n        $hideText={hideText}\n        role=\"status\"\n        aria-relevant=\"additions text\"\n        {...others}\n      >\n        {showWarning && content}\n      </StyledTypography>\n    </StyledRoot>\n  );\n};\n"],"names":["HvWarningText","children","adornment","isVisible","classes","className","id","disabled","disableGutter","disableBorder","disableAdornment","hideText","others","elementId","elementStatus","elementDisabled","useContext","HvFormElementContext","localDisabled","localVisible","isNil","localId","setId","showWarning","content","localAdornment","_jsx","StyledIcon","clsx","warningTextClasses","defaultIcon","semantic","StyledRoot","root","show","topBorder","$show","$topBorder","StyledTypography","warningText","topGutter","$topGutter","$hideText","role"],"mappings":";;;;;;;;AAmCO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,gBAAgB;AAAA,EAChBC,gBAAgB;AAAA,EAChBC,mBAAmB;AAAA,EACnBC,WAAW;AAAA,EACX,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAEC;AAAAA,IAAWC;AAAAA,IAAeC;AAAAA,EAAAA,IAChCC,WAAWC,oBAAoB;AACjC,QAAMC,gBAAgBX,YAAYQ;AAClC,QAAMI,eAAe,CAACC,MAAMjB,SAAS,IACjCA,YACAW,kBAAkB;AACtB,QAAMO,UAAUf,MAAMgB,MAAMT,WAAW,OAAO;AACxCU,QAAAA,cAAcJ,gBAAgB,CAACD;AAC/BM,QAAAA,UAAUD,cAActB,WAAW;AACnCwB,QAAAA,iBAAiBvB,aACrBwB,oBAACC,YAAU;AAAA,IACTtB,WAAWuB,KAAKC,mBAAmBC,aAAa1B,mCAAS0B,WAAW;AAAA,IACpEC,UAAS;AAAA,EAAA,CACV;AAGH,8BACGC,YAAU;AAAA,IACT3B,WAAWuB,KACTvB,WACAwB,mBAAmBI,MACnB7B,mCAAS6B,MACTV,eAAeK,KAAKC,mBAAmBK,MAAM9B,mCAAS8B,IAAI,GAC1D,CAACzB,iBAAiBmB,KAAKC,mBAAmBM,WAAW/B,mCAAS+B,SAAS,CACzE;AAAA,IACAC,OAAOb;AAAAA,IACPc,YAAY,CAAC5B;AAAAA,IAAcR,UAAA,CAE1B,CAACS,oBAAoBe,oCACrBa,kBAAgB;AAAA,MACfhC,IAAIe;AAAAA,MACJhB,WAAWuB,KACTC,mBAAmBU,aACnBnC,mCAASmC,aACT,CAAC/B,iBACCoB,KAAKC,mBAAmBW,WAAWpC,mCAASoC,SAAS,GACvD7B,YAAYiB,KAAKC,mBAAmBlB,UAAUP,mCAASO,QAAQ,CACjE;AAAA,MACA8B,YAAY,CAACjC;AAAAA,MACbkC,WAAW/B;AAAAA,MACXgC,MAAK;AAAA,MACL,iBAAc;AAAA,MAAgB,GAC1B/B;AAAAA,MAAMX,UAETsB,eAAeC;AAAAA,IAAAA,CACA,CAAC;AAAA,EAAA,CACT;AAEhB;"}
+{"version":3,"file":"WarningText.js","sources":["../../../../../src/components/Forms/WarningText/WarningText.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { clsx } from \"clsx\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { StyledRoot, StyledTypography, StyledIcon } from \"./WarningText.styles\";\nimport warningTextClasses, { HvWarningTextClasses } from \"./warningTextClasses\";\nimport { HvFormElementContext } from \"../FormElement\";\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,\n    isVisible,\n    classes,\n    className,\n    id,\n    disabled,\n    disableGutter = false,\n    disableBorder = false,\n    disableAdornment = false,\n    hideText = false,\n    ...others\n  } = useDefaultProps(\"HvWarningText\", props);\n\n  const { elementId, elementStatus, elementDisabled } =\n    useContext(HvFormElementContext);\n  const localDisabled = disabled || elementDisabled;\n  const localVisible = !isNil(isVisible)\n    ? isVisible\n    : elementStatus === \"invalid\";\n  const localId = id ?? setId(elementId, \"error\");\n  const showWarning = localVisible && !localDisabled;\n  const content = showWarning ? children : \"\";\n  const localAdornment = adornment || (\n    <StyledIcon\n      className={clsx(warningTextClasses.defaultIcon, classes?.defaultIcon)}\n      semantic=\"negative\"\n    />\n  );\n\n  return (\n    <StyledRoot\n      className={clsx(\n        className,\n        warningTextClasses.root,\n        classes?.root,\n        showWarning && clsx(warningTextClasses.show, classes?.show),\n        !disableBorder && clsx(warningTextClasses.topBorder, classes?.topBorder)\n      )}\n      $show={showWarning}\n      $topBorder={!disableBorder}\n    >\n      {!disableAdornment && localAdornment}\n      <StyledTypography\n        id={localId}\n        className={clsx(\n          warningTextClasses.warningText,\n          classes?.warningText,\n          !disableGutter &&\n            clsx(warningTextClasses.topGutter, classes?.topGutter),\n          hideText && clsx(warningTextClasses.hideText, classes?.hideText)\n        )}\n        $topGutter={!disableGutter}\n        $hideText={hideText}\n        role=\"status\"\n        aria-relevant=\"additions text\"\n        {...others}\n      >\n        {showWarning && content}\n      </StyledTypography>\n    </StyledRoot>\n  );\n};\n"],"names":["HvWarningText","props","children","adornment","isVisible","classes","className","id","disabled","disableGutter","disableBorder","disableAdornment","hideText","others","useDefaultProps","elementId","elementStatus","elementDisabled","useContext","HvFormElementContext","localDisabled","localVisible","isNil","localId","setId","showWarning","content","localAdornment","_jsx","StyledIcon","clsx","warningTextClasses","defaultIcon","semantic","StyledRoot","root","show","topBorder","$show","$topBorder","StyledTypography","warningText","topGutter","$topGutter","$hideText","role"],"mappings":";;;;;;;;;AAoCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,gBAAgB;AAAA,IAChBC,gBAAgB;AAAA,IAChBC,mBAAmB;AAAA,IACnBC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBb,KAAK;AAEpC,QAAA;AAAA,IAAEc;AAAAA,IAAWC;AAAAA,IAAeC;AAAAA,EAAAA,IAChCC,WAAWC,oBAAoB;AACjC,QAAMC,gBAAgBZ,YAAYS;AAClC,QAAMI,eAAe,CAACC,MAAMlB,SAAS,IACjCA,YACAY,kBAAkB;AACtB,QAAMO,UAAUhB,MAAMiB,MAAMT,WAAW,OAAO;AACxCU,QAAAA,cAAcJ,gBAAgB,CAACD;AAC/BM,QAAAA,UAAUD,cAAcvB,WAAW;AACnCyB,QAAAA,iBAAiBxB,aACrByB,oBAACC,YAAU;AAAA,IACTvB,WAAWwB,KAAKC,mBAAmBC,aAAa3B,mCAAS2B,WAAW;AAAA,IACpEC,UAAS;AAAA,EAAA,CACV;AAGH,8BACGC,YAAU;AAAA,IACT5B,WAAWwB,KACTxB,WACAyB,mBAAmBI,MACnB9B,mCAAS8B,MACTV,eAAeK,KAAKC,mBAAmBK,MAAM/B,mCAAS+B,IAAI,GAC1D,CAAC1B,iBAAiBoB,KAAKC,mBAAmBM,WAAWhC,mCAASgC,SAAS,CACzE;AAAA,IACAC,OAAOb;AAAAA,IACPc,YAAY,CAAC7B;AAAAA,IAAcR,UAAA,CAE1B,CAACS,oBAAoBgB,oCACrBa,kBAAgB;AAAA,MACfjC,IAAIgB;AAAAA,MACJjB,WAAWwB,KACTC,mBAAmBU,aACnBpC,mCAASoC,aACT,CAAChC,iBACCqB,KAAKC,mBAAmBW,WAAWrC,mCAASqC,SAAS,GACvD9B,YAAYkB,KAAKC,mBAAmBnB,UAAUP,mCAASO,QAAQ,CACjE;AAAA,MACA+B,YAAY,CAAClC;AAAAA,MACbmC,WAAWhC;AAAAA,MACXiC,MAAK;AAAA,MACL,iBAAc;AAAA,MAAgB,GAC1BhC;AAAAA,MAAMX,UAETuB,eAAeC;AAAAA,IAAAA,CACA,CAAC;AAAA,EAAA,CACT;AAEhB;"}

package/dist/esm/components/GlobalActions/GlobalActions.js

@@ -1,4 +1,5 @@
 import { clsx } from "clsx";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useTheme as useTheme$1 } from "@mui/material/styles";
 import isString from "lodash/isString";
 import { useTheme } from "../../hooks/useTheme.js";
@@ -6,17 +7,18 @@ import { StyledRoot, StyledWrapper, StyledActions, StyledBackButton } from "./Gl
 import globalActionsClasses from "./globalActionsClasses.js";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { HvTypography } from "../Typography/Typography.js";
-const HvGlobalActions = ({
-  children,
-  classes,
-  className,
-  title,
-  variant = "global",
-  backButton,
-  headingLevel,
-  position: positionProp,
-  ...others
-}) => {
+const HvGlobalActions = (props) => {
+  const {
+    children,
+    classes,
+    className,
+    title,
+    variant = "global",
+    backButton,
+    headingLevel,
+    position: positionProp,
+    ...others
+  } = useDefaultProps("HvGlobalActions", props);
   const {
     activeTheme
   } = useTheme();

package/dist/esm/components/GlobalActions/GlobalActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalActions.js","sources":["../../../../src/components/GlobalActions/GlobalActions.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport { useTheme } from \"@mui/material/styles\";\n\nimport isString from \"lodash/isString\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { useTheme as useHvTheme } from \"@core/hooks/useTheme\";\n\nimport {\n  StyledActions,\n  StyledBackButton,\n  StyledRoot,\n  StyledWrapper,\n} from \"./GlobalActions.styles\";\nimport globalActionsClasses, {\n  HvGlobalActionsClasses,\n} from \"./globalActionsClasses\";\n\nexport type HvGlobalActionsVariant = \"global\" | \"section\";\n\nexport type HvGlobalActionsPosition = \"sticky\" | \"fixed\" | \"relative\";\n\nexport type HvGlobalActionsHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport interface HvGlobalActionsProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Text to display in the component. */\n  title?: React.ReactNode;\n  /** Denotes if this is a global or section component. */\n  variant?: HvGlobalActionsVariant;\n  /** User can pass in a fully customized button or false for when the back button should not be rendered. */\n  backButton?: React.ReactNode;\n  /** Heading Level to apply to Title Area. */\n  headingLevel?: HvGlobalActionsHeadingLevel;\n  /**\n   * Position of the Global Actions.\n   * Defaults to `sticky` when it is a global title and `relative` when it's a section title.\n   */\n  position?: HvGlobalActionsPosition;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGlobalActionsClasses;\n}\n\n/**\n * Global Actions are actions that affect the entire page they live in.\n * They should persist while scrolling down the screen.\n */\nexport const HvGlobalActions = ({\n  children,\n  classes,\n  className,\n  title,\n  variant = \"global\",\n  backButton,\n  headingLevel,\n  position: positionProp,\n  ...others\n}: HvGlobalActionsProps) => {\n  const { activeTheme } = useHvTheme();\n\n  const muiTheme = useTheme();\n\n  const headingLevelToApply = headingLevel || (variant === \"global\" ? 1 : 2);\n\n  const backButtonRenderer = () => {\n    if (backButton) {\n      return (\n        <StyledBackButton\n          className={clsx(globalActionsClasses.backButton, classes?.backButton)}\n        >\n          {backButton}\n        </StyledBackButton>\n      );\n    }\n  };\n\n  const position =\n    positionProp || (variant === \"global\" ? \"sticky\" : \"relative\");\n\n  return (\n    <StyledRoot\n      $variant={variant}\n      $position={position}\n      className={clsx(\n        className,\n        globalActionsClasses.root,\n        classes?.root,\n        position === \"sticky\" &&\n          clsx(classes?.positionSticky, globalActionsClasses.positionSticky),\n        position === \"fixed\" &&\n          clsx(classes?.positionFixed, globalActionsClasses.positionFixed),\n        variant === \"global\" &&\n          clsx(classes?.global, globalActionsClasses.global)\n      )}\n      $breakpoints={muiTheme.breakpoints}\n      {...others}\n    >\n      <StyledWrapper\n        className={clsx(\n          globalActionsClasses.wrapper,\n          classes?.wrapper,\n          variant === \"global\" &&\n            clsx(\n              classes?.globalWrapperComplement,\n              globalActionsClasses.globalWrapperComplement\n            ),\n          variant === \"section\" &&\n            clsx(\n              classes?.globalSectionArea,\n              globalActionsClasses.globalSectionArea\n            )\n        )}\n        $variant={variant}\n      >\n        {variant === \"global\" && backButtonRenderer()}\n        {!isString(title) ? (\n          title\n        ) : (\n          <HvTypography\n            variant={\n              variant === \"global\"\n                ? \"title3\"\n                : activeTheme?.globalActions.sectionVariant\n            }\n            component={`h${headingLevelToApply}`}\n            className={clsx(globalActionsClasses.name, classes?.name)}\n          >\n            {title}\n          </HvTypography>\n        )}\n        {children && (\n          <StyledActions\n            className={clsx(globalActionsClasses.actions, classes?.actions)}\n          >\n            {children}\n          </StyledActions>\n        )}\n      </StyledWrapper>\n    </StyledRoot>\n  );\n};\n"],"names":["HvGlobalActions","children","classes","className","title","variant","backButton","headingLevel","position","positionProp","others","activeTheme","useHvTheme","muiTheme","useTheme","headingLevelToApply","backButtonRenderer","StyledBackButton","clsx","globalActionsClasses","StyledRoot","$variant","$position","root","positionSticky","positionFixed","global","$breakpoints","breakpoints","StyledWrapper","wrapper","globalWrapperComplement","globalSectionArea","isString","_jsx","HvTypography","globalActions","sectionVariant","component","name","StyledActions","actions"],"mappings":";;;;;;;;AAiDO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,UAAU;AAAA,EACVC;AAAAA,EACAC;AAAAA,EACAC,UAAUC;AAAAA,EACV,GAAGC;AACiB,MAAM;AACpB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAW;AAEnC,QAAMC,WAAWC;AAEjB,QAAMC,sBAAsBR,iBAAiBF,YAAY,WAAW,IAAI;AAExE,QAAMW,qBAAqBA,MAAM;AAC/B,QAAIV,YAAY;AACd,iCACGW,kBAAgB;AAAA,QACfd,WAAWe,KAAKC,qBAAqBb,YAAYJ,mCAASI,UAAU;AAAA,QAAEL,UAErEK;AAAAA,MAAAA,CACe;AAAA,IAEtB;AAAA,EAAA;AAGF,QAAME,WACJC,iBAAiBJ,YAAY,WAAW,WAAW;AAErD,6BACGe,YAAU;AAAA,IACTC,UAAUhB;AAAAA,IACViB,WAAWd;AAAAA,IACXL,WAAWe,KACTf,WACAgB,qBAAqBI,MACrBrB,mCAASqB,MACTf,aAAa,YACXU,KAAKhB,mCAASsB,gBAAgBL,qBAAqBK,cAAc,GACnEhB,aAAa,WACXU,KAAKhB,mCAASuB,eAAeN,qBAAqBM,aAAa,GACjEpB,YAAY,YACVa,KAAKhB,mCAASwB,QAAQP,qBAAqBO,MAAM,CACrD;AAAA,IACAC,cAAcd,SAASe;AAAAA,IAAY,GAC/BlB;AAAAA,IAAMT,+BAET4B,eAAa;AAAA,MACZ1B,WAAWe,KACTC,qBAAqBW,SACrB5B,mCAAS4B,SACTzB,YAAY,YACVa,KACEhB,mCAAS6B,yBACTZ,qBAAqBY,uBACvB,GACF1B,YAAY,aACVa,KACEhB,mCAAS8B,mBACTb,qBAAqBa,iBACvB,CACJ;AAAA,MACAX,UAAUhB;AAAAA,MAAQJ,WAEjBI,YAAY,YAAYW,mBAAmB,GAC3C,CAACiB,SAAS7B,KAAK,IACdA,QAEA8B,oBAACC,cAAY;AAAA,QACX9B,SACEA,YAAY,WACR,WACAM,2CAAayB,cAAcC;AAAAA,QAEjCC,WAAY,IAAGvB;AAAAA,QACfZ,WAAWe,KAAKC,qBAAqBoB,MAAMrC,mCAASqC,IAAI;AAAA,QAAEtC,UAEzDG;AAAAA,MAAAA,CACW,GAEfH,YACCiC,oBAACM,eAAa;AAAA,QACZrC,WAAWe,KAAKC,qBAAqBsB,SAASvC,mCAASuC,OAAO;AAAA,QAAExC;AAAAA,MAAAA,CAGnD,CAChB;AAAA,IAAA,CACY;AAAA,EAAA,CACL;AAEhB;"}
+{"version":3,"file":"GlobalActions.js","sources":["../../../../src/components/GlobalActions/GlobalActions.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useTheme } from \"@mui/material/styles\";\n\nimport isString from \"lodash/isString\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { useTheme as useHvTheme } from \"@core/hooks/useTheme\";\n\nimport {\n  StyledActions,\n  StyledBackButton,\n  StyledRoot,\n  StyledWrapper,\n} from \"./GlobalActions.styles\";\nimport globalActionsClasses, {\n  HvGlobalActionsClasses,\n} from \"./globalActionsClasses\";\n\nexport type HvGlobalActionsVariant = \"global\" | \"section\";\n\nexport type HvGlobalActionsPosition = \"sticky\" | \"fixed\" | \"relative\";\n\nexport type HvGlobalActionsHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport interface HvGlobalActionsProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Text to display in the component. */\n  title?: React.ReactNode;\n  /** Denotes if this is a global or section component. */\n  variant?: HvGlobalActionsVariant;\n  /** User can pass in a fully customized button or false for when the back button should not be rendered. */\n  backButton?: React.ReactNode;\n  /** Heading Level to apply to Title Area. */\n  headingLevel?: HvGlobalActionsHeadingLevel;\n  /**\n   * Position of the Global Actions.\n   * Defaults to `sticky` when it is a global title and `relative` when it's a section title.\n   */\n  position?: HvGlobalActionsPosition;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGlobalActionsClasses;\n}\n\n/**\n * Global Actions are actions that affect the entire page they live in.\n * They should persist while scrolling down the screen.\n */\nexport const HvGlobalActions = (props: HvGlobalActionsProps) => {\n  const {\n    children,\n    classes,\n    className,\n    title,\n    variant = \"global\",\n    backButton,\n    headingLevel,\n    position: positionProp,\n    ...others\n  } = useDefaultProps(\"HvGlobalActions\", props);\n\n  const { activeTheme } = useHvTheme();\n\n  const muiTheme = useTheme();\n\n  const headingLevelToApply = headingLevel || (variant === \"global\" ? 1 : 2);\n\n  const backButtonRenderer = () => {\n    if (backButton) {\n      return (\n        <StyledBackButton\n          className={clsx(globalActionsClasses.backButton, classes?.backButton)}\n        >\n          {backButton}\n        </StyledBackButton>\n      );\n    }\n  };\n\n  const position =\n    positionProp || (variant === \"global\" ? \"sticky\" : \"relative\");\n\n  return (\n    <StyledRoot\n      $variant={variant}\n      $position={position}\n      className={clsx(\n        className,\n        globalActionsClasses.root,\n        classes?.root,\n        position === \"sticky\" &&\n          clsx(classes?.positionSticky, globalActionsClasses.positionSticky),\n        position === \"fixed\" &&\n          clsx(classes?.positionFixed, globalActionsClasses.positionFixed),\n        variant === \"global\" &&\n          clsx(classes?.global, globalActionsClasses.global)\n      )}\n      $breakpoints={muiTheme.breakpoints}\n      {...others}\n    >\n      <StyledWrapper\n        className={clsx(\n          globalActionsClasses.wrapper,\n          classes?.wrapper,\n          variant === \"global\" &&\n            clsx(\n              classes?.globalWrapperComplement,\n              globalActionsClasses.globalWrapperComplement\n            ),\n          variant === \"section\" &&\n            clsx(\n              classes?.globalSectionArea,\n              globalActionsClasses.globalSectionArea\n            )\n        )}\n        $variant={variant}\n      >\n        {variant === \"global\" && backButtonRenderer()}\n        {!isString(title) ? (\n          title\n        ) : (\n          <HvTypography\n            variant={\n              variant === \"global\"\n                ? \"title3\"\n                : activeTheme?.globalActions.sectionVariant\n            }\n            component={`h${headingLevelToApply}`}\n            className={clsx(globalActionsClasses.name, classes?.name)}\n          >\n            {title}\n          </HvTypography>\n        )}\n        {children && (\n          <StyledActions\n            className={clsx(globalActionsClasses.actions, classes?.actions)}\n          >\n            {children}\n          </StyledActions>\n        )}\n      </StyledWrapper>\n    </StyledRoot>\n  );\n};\n"],"names":["HvGlobalActions","props","children","classes","className","title","variant","backButton","headingLevel","position","positionProp","others","useDefaultProps","activeTheme","useHvTheme","muiTheme","useTheme","headingLevelToApply","backButtonRenderer","StyledBackButton","clsx","globalActionsClasses","StyledRoot","$variant","$position","root","positionSticky","positionFixed","global","$breakpoints","breakpoints","StyledWrapper","wrapper","globalWrapperComplement","globalSectionArea","isString","_jsx","HvTypography","globalActions","sectionVariant","component","name","StyledActions","actions"],"mappings":";;;;;;;;;AAkDaA,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC;AAAAA,IACAC;AAAAA,IACAC,UAAUC;AAAAA,IACV,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,mBAAmBX,KAAK;AAEtC,QAAA;AAAA,IAAEY;AAAAA,MAAgBC,SAAW;AAEnC,QAAMC,WAAWC;AAEjB,QAAMC,sBAAsBT,iBAAiBF,YAAY,WAAW,IAAI;AAExE,QAAMY,qBAAqBA,MAAM;AAC/B,QAAIX,YAAY;AACd,iCACGY,kBAAgB;AAAA,QACff,WAAWgB,KAAKC,qBAAqBd,YAAYJ,mCAASI,UAAU;AAAA,QAAEL,UAErEK;AAAAA,MAAAA,CACe;AAAA,IAEtB;AAAA,EAAA;AAGF,QAAME,WACJC,iBAAiBJ,YAAY,WAAW,WAAW;AAErD,6BACGgB,YAAU;AAAA,IACTC,UAAUjB;AAAAA,IACVkB,WAAWf;AAAAA,IACXL,WAAWgB,KACThB,WACAiB,qBAAqBI,MACrBtB,mCAASsB,MACThB,aAAa,YACXW,KAAKjB,mCAASuB,gBAAgBL,qBAAqBK,cAAc,GACnEjB,aAAa,WACXW,KAAKjB,mCAASwB,eAAeN,qBAAqBM,aAAa,GACjErB,YAAY,YACVc,KAAKjB,mCAASyB,QAAQP,qBAAqBO,MAAM,CACrD;AAAA,IACAC,cAAcd,SAASe;AAAAA,IAAY,GAC/BnB;AAAAA,IAAMT,+BAET6B,eAAa;AAAA,MACZ3B,WAAWgB,KACTC,qBAAqBW,SACrB7B,mCAAS6B,SACT1B,YAAY,YACVc,KACEjB,mCAAS8B,yBACTZ,qBAAqBY,uBACvB,GACF3B,YAAY,aACVc,KACEjB,mCAAS+B,mBACTb,qBAAqBa,iBACvB,CACJ;AAAA,MACAX,UAAUjB;AAAAA,MAAQJ,WAEjBI,YAAY,YAAYY,mBAAmB,GAC3C,CAACiB,SAAS9B,KAAK,IACdA,QAEA+B,oBAACC,cAAY;AAAA,QACX/B,SACEA,YAAY,WACR,WACAO,2CAAayB,cAAcC;AAAAA,QAEjCC,WAAY,IAAGvB;AAAAA,QACfb,WAAWgB,KAAKC,qBAAqBoB,MAAMtC,mCAASsC,IAAI;AAAA,QAAEvC,UAEzDG;AAAAA,MAAAA,CACW,GAEfH,YACCkC,oBAACM,eAAa;AAAA,QACZtC,WAAWgB,KAAKC,qBAAqBsB,SAASxC,mCAASwC,OAAO;AAAA,QAAEzC;AAAAA,MAAAA,CAGnD,CAChB;AAAA,IAAA,CACY;AAAA,EAAA,CACL;AAEhB;"}

package/dist/esm/components/Grid/Grid.js

@@ -1,6 +1,7 @@
 import { Grid } from "@mui/material";
 import isString from "lodash/isString";
 import { forwardRef } from "react";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 const BREAKPOINT_GUTTERS = {
   xs: 2,
@@ -47,14 +48,15 @@ function getNumberOfColumns(columns) {
   }
   return numberOfColumns;
 }
-const HvGrid = forwardRef(({
-  container,
-  spacing = "auto",
-  rowSpacing,
-  columnSpacing,
-  columns,
-  ...others
-}, ref) => {
+const HvGrid = forwardRef((props, ref) => {
+  const {
+    container,
+    spacing = "auto",
+    rowSpacing,
+    columnSpacing,
+    columns,
+    ...others
+  } = useDefaultProps("HvGrid", props);
   const containerProps = {};
   if (container) {
     containerProps.container = true;

package/dist/esm/components/Grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { Grid as MuiGrid, GridProps as MuiGridProps } from \"@mui/material\";\n\nimport isString from \"lodash/isString\";\n\nimport { forwardRef } from \"react\";\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { HvGridClasses } from \"./gridClasses\";\n\nconst BREAKPOINT_GUTTERS = {\n  xs: 2,\n  sm: 2,\n  md: 4,\n  lg: 4,\n  xl: 4,\n};\n\nconst BREAKPOINT_COLUMNS = {\n  xs: 4,\n  sm: 8,\n  md: 12,\n  lg: 12,\n  xl: 12,\n};\n\nexport type HvGridDirection =\n  | \"row\"\n  | \"row-reverse\"\n  | \"column\"\n  | \"column-reverse\";\n\nexport type HvGridSpacing =\n  | \"xs\"\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"auto\"\n  | 1\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10;\n\nexport interface HvGridProps\n  extends Omit<MuiGridProps, \"classes\" | \"columns\">,\n    HvBaseProps<HTMLDivElement, \"color\"> {\n  /**\n   * If `true`, the component will have the flex *container* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  container?: boolean;\n  /**\n   * If `true`, the component will have the flex *item* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  item?: boolean;\n  /**\n   * Defines the space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   */\n  spacing?: HvGridSpacing | number;\n  /**\n   * Defines the vertical space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  rowSpacing?: HvGridSpacing | number;\n  /**\n   * Defines the horizontal space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  columnSpacing?: HvGridSpacing | number;\n  /**\n   * The number of columns.\n   * Defaults to a 12-column grid.\n   * The value \"auto\" implements the Design System directives in terms of variable number of columns.\n   * @default 12\n   */\n  columns?: \"auto\" | MuiGridProps[\"columns\"];\n  /**\n   * Defines the `flex-direction` style property.\n   * It is applied for all screen sizes.\n   */\n  direction?: HvGridDirection;\n  /**\n   * Defines the `justify-content` style property.\n   * It is applied for all screen sizes.\n   */\n  justify?:\n    | \"flex-start\"\n    | \"center\"\n    | \"flex-end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\";\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for all the screen sizes with the lowest priority.\n   */\n  xs?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `sm` breakpoint and wider screens if not overridden.\n   */\n  sm?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `md` breakpoint and wider screens if not overridden.\n   */\n  md?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `lg` breakpoint and wider screens if not overridden.\n   */\n  lg?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `xl` breakpoint and wider screens.\n   */\n  xl?: number | boolean;\n  /**\n   * Defines the `flex-wrap` style property.\n   * It's applied for all screen sizes.\n   */\n  wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\";\n  /**\n   * If `true`, it sets `min-width: 0` on the item.\n   * Refer to the limitations section of the documentation to better understand the use case.\n   */\n  zeroMinWidth?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGridClasses;\n}\n\nfunction getGridSpacing(spacing: HvGridProps[\"spacing\"]) {\n  let gridSpacing: MuiGridProps[\"spacing\"];\n\n  if (isString(spacing)) {\n    if (spacing === \"auto\") {\n      gridSpacing = BREAKPOINT_GUTTERS;\n    } else {\n      gridSpacing = BREAKPOINT_GUTTERS[spacing];\n    }\n  } else if (typeof spacing === \"object\") {\n    gridSpacing = Object.keys(spacing).reduce(\n      (acc, breakpoint) => ({\n        ...acc,\n        [breakpoint]:\n          BREAKPOINT_GUTTERS[spacing[breakpoint]] ?? spacing[breakpoint],\n      }),\n      {}\n    );\n  } else if (spacing === 0) {\n    gridSpacing = { xs: 0 };\n  } else {\n    gridSpacing = spacing;\n  }\n\n  return gridSpacing;\n}\n\nfunction getNumberOfColumns(columns: HvGridProps[\"columns\"]) {\n  let numberOfColumns: MuiGridProps[\"columns\"];\n\n  if (columns === \"auto\") {\n    numberOfColumns = BREAKPOINT_COLUMNS;\n  } else {\n    numberOfColumns = columns;\n  }\n\n  return numberOfColumns;\n}\n\n/**\n * The grid creates visual consistency between layouts while allowing flexibility\n * across a wide variety of designs. This component is based in a 12-column grid layout.\n *\n * It is is based in the [Material UI Grid](https://mui.com/material-ui/react-grid/).\n *\n * The definitions were set following the Design System directives:\n *\n * | Breakpoint | Width (in px) | Gutters (in px) | Number of columns |\n * | ---------- | ------------- | --------------- | ----------------- |\n * | xs         | [0-575[       | 16              | 4                 |\n * | sm         | [576-767[     | 16              | 8                 |\n * | md         | [768-991[     | 32              | 12                |\n * | lg         | [992-1199[    | 32              | 12                |\n * | xl         | [1200-...[    | 32              | 12                |\n *\n * However, the number of columns is set to 12 for all breakpoints, as it serves most\n * of the use cases and simplifies the implementation.\n * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.\n *\n * Also, the Design System specifications are omissive about the horizontal gutters.\n * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.\n * It can be overridden by setting the `rowSpacing` prop.\n */\nexport const HvGrid = forwardRef<HTMLDivElement, HvGridProps>(\n  (\n    {\n      container,\n      spacing = \"auto\",\n      rowSpacing,\n      columnSpacing,\n      columns,\n      ...others\n    },\n    ref\n  ) => {\n    const containerProps: Pick<\n      MuiGridProps,\n      \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n    > = {};\n\n    if (container) {\n      containerProps.container = true;\n\n      if (spacing != null) {\n        containerProps.spacing = getGridSpacing(spacing);\n      }\n      if (rowSpacing != null) {\n        containerProps.rowSpacing = getGridSpacing(rowSpacing);\n      }\n      if (columnSpacing != null) {\n        containerProps.columnSpacing = getGridSpacing(columnSpacing);\n      }\n      if (columns != null) {\n        containerProps.columns = getNumberOfColumns(columns);\n      }\n    }\n\n    return <MuiGrid ref={ref} {...containerProps} {...others} />;\n  }\n);\n"],"names":["BREAKPOINT_GUTTERS","xs","sm","md","lg","xl","BREAKPOINT_COLUMNS","getGridSpacing","spacing","gridSpacing","isString","Object","keys","reduce","acc","breakpoint","getNumberOfColumns","columns","numberOfColumns","HvGrid","forwardRef","container","rowSpacing","columnSpacing","others","ref","containerProps","MuiGrid"],"mappings":";;;;AASA,MAAMA,qBAAqB;AAAA,EACzBC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAEA,MAAMC,qBAAqB;AAAA,EACzBL,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAyHA,SAASE,eAAeC,SAAiC;AACnDC,MAAAA;AAEAC,MAAAA,SAASF,OAAO,GAAG;AACrB,QAAIA,YAAY,QAAQ;AACRR,oBAAAA;AAAAA,IAAAA,OACT;AACLS,oBAAcT,mBAAmBQ,OAAO;AAAA,IAC1C;AAAA,EAAA,WACS,OAAOA,YAAY,UAAU;AACtCC,kBAAcE,OAAOC,KAAKJ,OAAO,EAAEK,OACjC,CAACC,KAAKC,gBAAgB;AAAA,MACpB,GAAGD;AAAAA,MACH,CAACC,UAAU,GACTf,mBAAmBQ,QAAQO,UAAU,CAAC,KAAKP,QAAQO,UAAU;AAAA,IAAA,IAEjE,CACF,CAAA;AAAA,EAAA,WACSP,YAAY,GAAG;AACV,kBAAA;AAAA,MAAEP,IAAI;AAAA,IAAA;AAAA,EAAE,OACjB;AACSO,kBAAAA;AAAAA,EAChB;AAEOC,SAAAA;AACT;AAEA,SAASO,mBAAmBC,SAAiC;AACvDC,MAAAA;AAEJ,MAAID,YAAY,QAAQ;AACJX,sBAAAA;AAAAA,EAAAA,OACb;AACaW,sBAAAA;AAAAA,EACpB;AAEOC,SAAAA;AACT;AA0BaC,MAAAA,SAASC,WACpB,CACE;AAAA,EACEC;AAAAA,EACAb,UAAU;AAAA,EACVc;AAAAA,EACAC;AAAAA,EACAN;AAAAA,EACA,GAAGO;AACL,GACAC,QACG;AACH,QAAMC,iBAGF,CAAA;AAEJ,MAAIL,WAAW;AACbK,mBAAeL,YAAY;AAE3B,QAAIb,WAAW,MAAM;AACJA,qBAAAA,UAAUD,eAAeC,OAAO;AAAA,IACjD;AACA,QAAIc,cAAc,MAAM;AACPA,qBAAAA,aAAaf,eAAee,UAAU;AAAA,IACvD;AACA,QAAIC,iBAAiB,MAAM;AACVA,qBAAAA,gBAAgBhB,eAAegB,aAAa;AAAA,IAC7D;AACA,QAAIN,WAAW,MAAM;AACJA,qBAAAA,UAAUD,mBAAmBC,OAAO;AAAA,IACrD;AAAA,EACF;AAEA,6BAAQU,MAAO;AAAA,IAACF;AAAAA,IAAS,GAAKC;AAAAA,IAAc,GAAMF;AAAAA,EAAAA,CAAS;AAC7D,CACF;"}
+{"version":3,"file":"Grid.js","sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { Grid as MuiGrid, GridProps as MuiGridProps } from \"@mui/material\";\n\nimport isString from \"lodash/isString\";\n\nimport { forwardRef } from \"react\";\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvGridClasses } from \"./gridClasses\";\n\nconst BREAKPOINT_GUTTERS = {\n  xs: 2,\n  sm: 2,\n  md: 4,\n  lg: 4,\n  xl: 4,\n};\n\nconst BREAKPOINT_COLUMNS = {\n  xs: 4,\n  sm: 8,\n  md: 12,\n  lg: 12,\n  xl: 12,\n};\n\nexport type HvGridDirection =\n  | \"row\"\n  | \"row-reverse\"\n  | \"column\"\n  | \"column-reverse\";\n\nexport type HvGridSpacing =\n  | \"xs\"\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"auto\"\n  | 1\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10;\n\nexport interface HvGridProps\n  extends Omit<MuiGridProps, \"classes\" | \"columns\">,\n    HvBaseProps<HTMLDivElement, \"color\"> {\n  /**\n   * If `true`, the component will have the flex *container* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  container?: boolean;\n  /**\n   * If `true`, the component will have the flex *item* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  item?: boolean;\n  /**\n   * Defines the space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   */\n  spacing?: HvGridSpacing | number;\n  /**\n   * Defines the vertical space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  rowSpacing?: HvGridSpacing | number;\n  /**\n   * Defines the horizontal space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  columnSpacing?: HvGridSpacing | number;\n  /**\n   * The number of columns.\n   * Defaults to a 12-column grid.\n   * The value \"auto\" implements the Design System directives in terms of variable number of columns.\n   * @default 12\n   */\n  columns?: \"auto\" | MuiGridProps[\"columns\"];\n  /**\n   * Defines the `flex-direction` style property.\n   * It is applied for all screen sizes.\n   */\n  direction?: HvGridDirection;\n  /**\n   * Defines the `justify-content` style property.\n   * It is applied for all screen sizes.\n   */\n  justify?:\n    | \"flex-start\"\n    | \"center\"\n    | \"flex-end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\";\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for all the screen sizes with the lowest priority.\n   */\n  xs?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `sm` breakpoint and wider screens if not overridden.\n   */\n  sm?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `md` breakpoint and wider screens if not overridden.\n   */\n  md?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `lg` breakpoint and wider screens if not overridden.\n   */\n  lg?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `xl` breakpoint and wider screens.\n   */\n  xl?: number | boolean;\n  /**\n   * Defines the `flex-wrap` style property.\n   * It's applied for all screen sizes.\n   */\n  wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\";\n  /**\n   * If `true`, it sets `min-width: 0` on the item.\n   * Refer to the limitations section of the documentation to better understand the use case.\n   */\n  zeroMinWidth?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGridClasses;\n}\n\nfunction getGridSpacing(spacing: HvGridProps[\"spacing\"]) {\n  let gridSpacing: MuiGridProps[\"spacing\"];\n\n  if (isString(spacing)) {\n    if (spacing === \"auto\") {\n      gridSpacing = BREAKPOINT_GUTTERS;\n    } else {\n      gridSpacing = BREAKPOINT_GUTTERS[spacing];\n    }\n  } else if (typeof spacing === \"object\") {\n    gridSpacing = Object.keys(spacing).reduce(\n      (acc, breakpoint) => ({\n        ...acc,\n        [breakpoint]:\n          BREAKPOINT_GUTTERS[spacing[breakpoint]] ?? spacing[breakpoint],\n      }),\n      {}\n    );\n  } else if (spacing === 0) {\n    gridSpacing = { xs: 0 };\n  } else {\n    gridSpacing = spacing;\n  }\n\n  return gridSpacing;\n}\n\nfunction getNumberOfColumns(columns: HvGridProps[\"columns\"]) {\n  let numberOfColumns: MuiGridProps[\"columns\"];\n\n  if (columns === \"auto\") {\n    numberOfColumns = BREAKPOINT_COLUMNS;\n  } else {\n    numberOfColumns = columns;\n  }\n\n  return numberOfColumns;\n}\n\n/**\n * The grid creates visual consistency between layouts while allowing flexibility\n * across a wide variety of designs. This component is based in a 12-column grid layout.\n *\n * It is is based in the [Material UI Grid](https://mui.com/material-ui/react-grid/).\n *\n * The definitions were set following the Design System directives:\n *\n * | Breakpoint | Width (in px) | Gutters (in px) | Number of columns |\n * | ---------- | ------------- | --------------- | ----------------- |\n * | xs         | [0-575[       | 16              | 4                 |\n * | sm         | [576-767[     | 16              | 8                 |\n * | md         | [768-991[     | 32              | 12                |\n * | lg         | [992-1199[    | 32              | 12                |\n * | xl         | [1200-...[    | 32              | 12                |\n *\n * However, the number of columns is set to 12 for all breakpoints, as it serves most\n * of the use cases and simplifies the implementation.\n * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.\n *\n * Also, the Design System specifications are omissive about the horizontal gutters.\n * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.\n * It can be overridden by setting the `rowSpacing` prop.\n */\nexport const HvGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n  const {\n    container,\n    spacing = \"auto\",\n    rowSpacing,\n    columnSpacing,\n    columns,\n    ...others\n  } = useDefaultProps(\"HvGrid\", props);\n  const containerProps: Pick<\n    MuiGridProps,\n    \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n  > = {};\n\n  if (container) {\n    containerProps.container = true;\n\n    if (spacing != null) {\n      containerProps.spacing = getGridSpacing(spacing);\n    }\n    if (rowSpacing != null) {\n      containerProps.rowSpacing = getGridSpacing(rowSpacing);\n    }\n    if (columnSpacing != null) {\n      containerProps.columnSpacing = getGridSpacing(columnSpacing);\n    }\n    if (columns != null) {\n      containerProps.columns = getNumberOfColumns(columns);\n    }\n  }\n\n  return <MuiGrid ref={ref} {...containerProps} {...others} />;\n});\n"],"names":["BREAKPOINT_GUTTERS","xs","sm","md","lg","xl","BREAKPOINT_COLUMNS","getGridSpacing","spacing","gridSpacing","isString","Object","keys","reduce","acc","breakpoint","getNumberOfColumns","columns","numberOfColumns","HvGrid","forwardRef","props","ref","container","rowSpacing","columnSpacing","others","useDefaultProps","containerProps","MuiGrid"],"mappings":";;;;;AAUA,MAAMA,qBAAqB;AAAA,EACzBC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAEA,MAAMC,qBAAqB;AAAA,EACzBL,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAyHA,SAASE,eAAeC,SAAiC;AACnDC,MAAAA;AAEAC,MAAAA,SAASF,OAAO,GAAG;AACrB,QAAIA,YAAY,QAAQ;AACRR,oBAAAA;AAAAA,IAAAA,OACT;AACLS,oBAAcT,mBAAmBQ,OAAO;AAAA,IAC1C;AAAA,EAAA,WACS,OAAOA,YAAY,UAAU;AACtCC,kBAAcE,OAAOC,KAAKJ,OAAO,EAAEK,OACjC,CAACC,KAAKC,gBAAgB;AAAA,MACpB,GAAGD;AAAAA,MACH,CAACC,UAAU,GACTf,mBAAmBQ,QAAQO,UAAU,CAAC,KAAKP,QAAQO,UAAU;AAAA,IAAA,IAEjE,CACF,CAAA;AAAA,EAAA,WACSP,YAAY,GAAG;AACV,kBAAA;AAAA,MAAEP,IAAI;AAAA,IAAA;AAAA,EAAE,OACjB;AACSO,kBAAAA;AAAAA,EAChB;AAEOC,SAAAA;AACT;AAEA,SAASO,mBAAmBC,SAAiC;AACvDC,MAAAA;AAEJ,MAAID,YAAY,QAAQ;AACJX,sBAAAA;AAAAA,EAAAA,OACb;AACaW,sBAAAA;AAAAA,EACpB;AAEOC,SAAAA;AACT;AA0BO,MAAMC,SAASC,WAAwC,CAACC,OAAOC,QAAQ;AACtE,QAAA;AAAA,IACJC;AAAAA,IACAf,UAAU;AAAA,IACVgB;AAAAA,IACAC;AAAAA,IACAR;AAAAA,IACA,GAAGS;AAAAA,EAAAA,IACDC,gBAAgB,UAAUN,KAAK;AACnC,QAAMO,iBAGF,CAAA;AAEJ,MAAIL,WAAW;AACbK,mBAAeL,YAAY;AAE3B,QAAIf,WAAW,MAAM;AACJA,qBAAAA,UAAUD,eAAeC,OAAO;AAAA,IACjD;AACA,QAAIgB,cAAc,MAAM;AACPA,qBAAAA,aAAajB,eAAeiB,UAAU;AAAA,IACvD;AACA,QAAIC,iBAAiB,MAAM;AACVA,qBAAAA,gBAAgBlB,eAAekB,aAAa;AAAA,IAC7D;AACA,QAAIR,WAAW,MAAM;AACJA,qBAAAA,UAAUD,mBAAmBC,OAAO;AAAA,IACrD;AAAA,EACF;AAEA,6BAAQY,MAAO;AAAA,IAACP;AAAAA,IAAS,GAAKM;AAAAA,IAAc,GAAMF;AAAAA,EAAAA,CAAS;AAC7D,CAAC;"}

package/dist/esm/components/Header/Actions/Actions.js

@@ -1,13 +1,15 @@
 import { clsx } from "clsx";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { StyledDiv } from "./Actions.styles.js";
 import headerActionsClasses from "./actionsClasses.js";
 import { jsx } from "@emotion/react/jsx-runtime";
-const HvHeaderActions = ({
-  classes,
-  className,
-  children,
-  ...others
-}) => {
+const HvHeaderActions = (props) => {
+  const {
+    classes,
+    className,
+    children,
+    ...others
+  } = useDefaultProps("HvHeaderActions", props);
   return /* @__PURE__ */ jsx(StyledDiv, {
     className: clsx(className, headerActionsClasses.root, classes == null ? void 0 : classes.root),
     ...others,

package/dist/esm/components/Header/Actions/Actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sources":["../../../../../src/components/Header/Actions/Actions.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { StyledDiv } from \"./Actions.styles\";\nimport headerActionsClasses, { HvHeaderActionsClasses } from \"./actionsClasses\";\n\nexport interface HvHeaderActionsProps extends HvBaseProps {\n  classes?: HvHeaderActionsClasses;\n}\n\nexport const HvHeaderActions = ({\n  classes,\n  className,\n  children,\n  ...others\n}: HvHeaderActionsProps) => {\n  return (\n    <StyledDiv\n      className={clsx(className, headerActionsClasses.root, classes?.root)}\n      {...others}\n    >\n      {children}\n    </StyledDiv>\n  );\n};\n"],"names":["HvHeaderActions","classes","className","children","others","StyledDiv","clsx","headerActionsClasses","root"],"mappings":";;;;AAWO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiB,MAAM;AAC1B,6BACGC,WAAS;AAAA,IACRH,WAAWI,KAAKJ,WAAWK,qBAAqBC,MAAMP,mCAASO,IAAI;AAAA,IAAE,GACjEJ;AAAAA,IAAMD;AAAAA,EAAAA,CAGD;AAEf;"}
+{"version":3,"file":"Actions.js","sources":["../../../../../src/components/Header/Actions/Actions.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { StyledDiv } from \"./Actions.styles\";\nimport headerActionsClasses, { HvHeaderActionsClasses } from \"./actionsClasses\";\n\nexport interface HvHeaderActionsProps extends HvBaseProps {\n  classes?: HvHeaderActionsClasses;\n}\n\nexport const HvHeaderActions = (props: HvHeaderActionsProps) => {\n  const { classes, className, children, ...others } = useDefaultProps(\n    \"HvHeaderActions\",\n    props\n  );\n\n  return (\n    <StyledDiv\n      className={clsx(className, headerActionsClasses.root, classes?.root)}\n      {...others}\n    >\n      {children}\n    </StyledDiv>\n  );\n};\n"],"names":["HvHeaderActions","props","classes","className","children","others","useDefaultProps","StyledDiv","clsx","headerActionsClasses","root"],"mappings":";;;;;AAYaA,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAWC;AAAAA,IAAU,GAAGC;AAAAA,EAAAA,IAAWC,gBAClD,mBACAL,KACF;AAEA,6BACGM,WAAS;AAAA,IACRJ,WAAWK,KAAKL,WAAWM,qBAAqBC,MAAMR,mCAASQ,IAAI;AAAA,IAAE,GACjEL;AAAAA,IAAMD;AAAAA,EAAAA,CAGD;AAEf;"}

package/dist/esm/components/Header/Brand/Brand.js

@@ -1,14 +1,16 @@
 import { clsx } from "clsx";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { BrandRoot, BrandSeparator, BrandName } from "./Brand.styles.js";
 import headerBrandClasses from "./brandClasses.js";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-const HvHeaderBrand = ({
-  classes,
-  logo,
-  name,
-  className,
-  ...others
-}) => {
+const HvHeaderBrand = (props) => {
+  const {
+    classes,
+    logo,
+    name,
+    className,
+    ...others
+  } = useDefaultProps("HvHeaderBrand", props);
   return /* @__PURE__ */ jsxs(BrandRoot, {
     className: clsx(classes == null ? void 0 : classes.root, headerBrandClasses.root, className),
     ...others,

package/dist/esm/components/Header/Brand/Brand.js.map

@@ -1 +1 @@
-{"version":3,"file":"Brand.js","sources":["../../../../../src/components/Header/Brand/Brand.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { BrandRoot, BrandSeparator, BrandName } from \"./Brand.styles\";\nimport headerBrandClasses, { HvHeaderBrandClasses } from \"./brandClasses\";\n\nexport interface HvHeaderBrandProps extends HvBaseProps {\n  logo?: React.ReactNode;\n  name?: string;\n  classes?: HvHeaderBrandClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeaderBrand = ({\n  classes,\n  logo,\n  name,\n  className,\n  ...others\n}: HvHeaderBrandProps) => {\n  return (\n    <BrandRoot\n      className={clsx(classes?.root, headerBrandClasses.root, className)}\n      {...others}\n    >\n      {logo}\n      {logo && name && (\n        <BrandSeparator\n          className={clsx(classes?.separator, headerBrandClasses.separator)}\n        />\n      )}\n      {name && <BrandName variant=\"label\">{name}</BrandName>}\n    </BrandRoot>\n  );\n};\n"],"names":["HvHeaderBrand","classes","logo","name","className","others","BrandRoot","clsx","root","headerBrandClasses","children","BrandSeparator","separator","_jsx","BrandName","variant"],"mappings":";;;;AAgBO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACe,MAAM;AACxB,8BACGC,WAAS;AAAA,IACRF,WAAWG,KAAKN,mCAASO,MAAMC,mBAAmBD,MAAMJ,SAAS;AAAA,IAAE,GAC/DC;AAAAA,IAAMK,UAAA,CAETR,MACAA,QAAQC,4BACNQ,gBAAc;AAAA,MACbP,WAAWG,KAAKN,mCAASW,WAAWH,mBAAmBG,SAAS;AAAA,IAAA,CACjE,GAEFT,QAAQU,oBAACC,WAAS;AAAA,MAACC,SAAQ;AAAA,MAAOL,UAAEP;AAAAA,IAAAA,CAAgB,CAAC;AAAA,EAAA,CAC7C;AAEf;"}
+{"version":3,"file":"Brand.js","sources":["../../../../../src/components/Header/Brand/Brand.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { BrandRoot, BrandSeparator, BrandName } from \"./Brand.styles\";\nimport headerBrandClasses, { HvHeaderBrandClasses } from \"./brandClasses\";\n\nexport interface HvHeaderBrandProps extends HvBaseProps {\n  logo?: React.ReactNode;\n  name?: string;\n  classes?: HvHeaderBrandClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeaderBrand = (props: HvHeaderBrandProps) => {\n  const { classes, logo, name, className, ...others } = useDefaultProps(\n    \"HvHeaderBrand\",\n    props\n  );\n\n  return (\n    <BrandRoot\n      className={clsx(classes?.root, headerBrandClasses.root, className)}\n      {...others}\n    >\n      {logo}\n      {logo && name && (\n        <BrandSeparator\n          className={clsx(classes?.separator, headerBrandClasses.separator)}\n        />\n      )}\n      {name && <BrandName variant=\"label\">{name}</BrandName>}\n    </BrandRoot>\n  );\n};\n"],"names":["HvHeaderBrand","props","classes","logo","name","className","others","useDefaultProps","BrandRoot","clsx","root","headerBrandClasses","children","BrandSeparator","separator","_jsx","BrandName","variant"],"mappings":";;;;;AAiBaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAMC;AAAAA,IAAMC;AAAAA,IAAW,GAAGC;AAAAA,EAAAA,IAAWC,gBACpD,iBACAN,KACF;AAEA,8BACGO,WAAS;AAAA,IACRH,WAAWI,KAAKP,mCAASQ,MAAMC,mBAAmBD,MAAML,SAAS;AAAA,IAAE,GAC/DC;AAAAA,IAAMM,UAAA,CAETT,MACAA,QAAQC,4BACNS,gBAAc;AAAA,MACbR,WAAWI,KAAKP,mCAASY,WAAWH,mBAAmBG,SAAS;AAAA,IAAA,CACjE,GAEFV,QAAQW,oBAACC,WAAS;AAAA,MAACC,SAAQ;AAAA,MAAOL,UAAER;AAAAA,IAAAA,CAAgB,CAAC;AAAA,EAAA,CAC7C;AAEf;"}

package/dist/esm/components/Header/Header.js

@@ -1,4 +1,5 @@
 import { clsx } from "clsx";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { StyledAppBar, StyledHeaderRoot } from "./Header.styles.js";
 import headerClasses from "./headerClasses.js";
 import { jsx } from "@emotion/react/jsx-runtime";
@@ -9,7 +10,7 @@ const HvHeader = (props) => {
     children,
     position = "fixed",
     ...others
-  } = props;
+  } = useDefaultProps("HvHeader", props);
   return /* @__PURE__ */ jsx(StyledAppBar, {
     className: clsx(className, classes == null ? void 0 : classes.root, headerClasses.root, classes == null ? void 0 : classes.backgroundColor, headerClasses.backgroundColor),
     $position: position,

package/dist/esm/components/Header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { StyledHeaderRoot, StyledAppBar } from \"./Header.styles\";\nimport headerClasses, { HvHeaderClasses } from \"./headerClasses\";\n\nexport type HvHeaderPosition =\n  | \"fixed\"\n  | \"absolute\"\n  | \"sticky\"\n  | \"static\"\n  | \"relative\";\n\nexport interface HvHeaderProps extends HvBaseProps {\n  /** The position of the header bar */\n  position?: HvHeaderPosition;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvHeaderClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeader = (props: HvHeaderProps) => {\n  const { className, classes, children, position = \"fixed\", ...others } = props;\n\n  return (\n    <StyledAppBar\n      className={clsx(\n        className,\n        classes?.root,\n        headerClasses.root,\n        classes?.backgroundColor,\n        headerClasses.backgroundColor\n      )}\n      $position={position}\n      {...others}\n    >\n      <StyledHeaderRoot className={clsx(classes?.header, headerClasses.header)}>\n        {children}\n      </StyledHeaderRoot>\n    </StyledAppBar>\n  );\n};\n"],"names":["HvHeader","props","className","classes","children","position","others","StyledAppBar","clsx","root","headerClasses","backgroundColor","$position","StyledHeaderRoot","header"],"mappings":";;;;AAwBaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IAAEC;AAAAA,IAAWC;AAAAA,IAASC;AAAAA,IAAUC,WAAW;AAAA,IAAS,GAAGC;AAAAA,EAAWL,IAAAA;AAExE,6BACGM,cAAY;AAAA,IACXL,WAAWM,KACTN,WACAC,mCAASM,MACTC,cAAcD,MACdN,mCAASQ,iBACTD,cAAcC,eAChB;AAAA,IACAC,WAAWP;AAAAA,IAAS,GAChBC;AAAAA,IAAMF,8BAETS,kBAAgB;AAAA,MAACX,WAAWM,KAAKL,mCAASW,QAAQJ,cAAcI,MAAM;AAAA,MAAEV;AAAAA,IAAAA,CAEvD;AAAA,EAAA,CACN;AAElB;"}
+{"version":3,"file":"Header.js","sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { StyledHeaderRoot, StyledAppBar } from \"./Header.styles\";\nimport headerClasses, { HvHeaderClasses } from \"./headerClasses\";\n\nexport type HvHeaderPosition =\n  | \"fixed\"\n  | \"absolute\"\n  | \"sticky\"\n  | \"static\"\n  | \"relative\";\n\nexport interface HvHeaderProps extends HvBaseProps {\n  /** The position of the header bar */\n  position?: HvHeaderPosition;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvHeaderClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeader = (props: HvHeaderProps) => {\n  const {\n    className,\n    classes,\n    children,\n    position = \"fixed\",\n    ...others\n  } = useDefaultProps(\"HvHeader\", props);\n\n  return (\n    <StyledAppBar\n      className={clsx(\n        className,\n        classes?.root,\n        headerClasses.root,\n        classes?.backgroundColor,\n        headerClasses.backgroundColor\n      )}\n      $position={position}\n      {...others}\n    >\n      <StyledHeaderRoot className={clsx(classes?.header, headerClasses.header)}>\n        {children}\n      </StyledHeaderRoot>\n    </StyledAppBar>\n  );\n};\n"],"names":["HvHeader","props","className","classes","children","position","others","useDefaultProps","StyledAppBar","clsx","root","headerClasses","backgroundColor","$position","StyledHeaderRoot","header"],"mappings":";;;;;AAyBaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYN,KAAK;AAErC,6BACGO,cAAY;AAAA,IACXN,WAAWO,KACTP,WACAC,mCAASO,MACTC,cAAcD,MACdP,mCAASS,iBACTD,cAAcC,eAChB;AAAA,IACAC,WAAWR;AAAAA,IAAS,GAChBC;AAAAA,IAAMF,8BAETU,kBAAgB;AAAA,MAACZ,WAAWO,KAAKN,mCAASY,QAAQJ,cAAcI,MAAM;AAAA,MAAEX;AAAAA,IAAAA,CAEvD;AAAA,EAAA,CACN;AAElB;"}

package/dist/esm/components/Header/Navigation/Navigation.js

@@ -1,4 +1,5 @@
 import { clsx } from "clsx";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { StyledNav } from "./Navigation.styles.js";
 import { FocusProvider } from "./utils/FocusContext.js";
 import { SelectionContext } from "./utils/SelectionContext.js";
@@ -6,15 +7,16 @@ import headerNavigationClasses from "./navigationClasses.js";
 import { useSelectionPath } from "./useSelectionPath.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { HvHeaderMenuBar } from "./MenuBar/MenuBar.js";
-const HvHeaderNavigation = ({
-  data,
-  selected,
-  onClick,
-  className,
-  classes,
-  levels = 2,
-  ...others
-}) => {
+const HvHeaderNavigation = (props) => {
+  const {
+    data,
+    selected,
+    onClick,
+    className,
+    classes,
+    levels = 2,
+    ...others
+  } = useDefaultProps("HvHeaderNavigation", props);
   const selectionPath = useSelectionPath(data, selected);
   const handleClick = (event, selection) => {
     event.preventDefault();

package/dist/esm/components/Header/Navigation/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../../../../../src/components/Header/Navigation/Navigation.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport { MouseEvent } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { HvHeaderMenuBar, HvHeaderMenuBarProps } from \"./MenuBar\";\nimport { StyledNav } from \"./Navigation.styles\";\nimport { FocusProvider } from \"./utils/FocusContext\";\nimport { SelectionContext } from \"./utils/SelectionContext\";\nimport headerNavigationClasses, {\n  HvHeaderNavigationClasses,\n} from \"./navigationClasses\";\nimport {\n  HvHeaderNavigationItemProp,\n  useSelectionPath,\n} from \"./useSelectionPath\";\n\nexport interface HvHeaderNavigationProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  data: HvHeaderNavigationItemProp[];\n  selected?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  classes?: HvHeaderNavigationClasses;\n  levels?: 1 | 2;\n}\n\nexport const HvHeaderNavigation = ({\n  data,\n  selected,\n  onClick,\n  className,\n  classes,\n  levels = 2,\n  ...others\n}: HvHeaderNavigationProps) => {\n  const selectionPath = useSelectionPath(data, selected);\n\n  const handleClick: HvHeaderMenuBarProps[\"onClick\"] = (event, selection) => {\n    event.preventDefault();\n\n    onClick?.(event, selection);\n  };\n\n  return (\n    <SelectionContext.Provider value={selectionPath}>\n      <FocusProvider>\n        <StyledNav\n          className={clsx(\n            className,\n            headerNavigationClasses.root,\n            classes?.root\n          )}\n          {...others}\n        >\n          <HvHeaderMenuBar\n            data={data}\n            type=\"menubar\"\n            onClick={handleClick}\n            levels={levels}\n            currentLevel={1}\n          />\n        </StyledNav>\n      </FocusProvider>\n    </SelectionContext.Provider>\n  );\n};\n"],"names":["HvHeaderNavigation","data","selected","onClick","className","classes","levels","others","selectionPath","useSelectionPath","handleClick","event","selection","preventDefault","_jsx","SelectionContext","Provider","value","children","FocusProvider","StyledNav","clsx","headerNavigationClasses","root","HvHeaderMenuBar","type","currentLevel"],"mappings":";;;;;;;;AA2BO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,EACT,GAAGC;AACoB,MAAM;AACvBC,QAAAA,gBAAgBC,iBAAiBR,MAAMC,QAAQ;AAE/CQ,QAAAA,cAA+CA,CAACC,OAAOC,cAAc;AACzED,UAAME,eAAe;AAErBV,uCAAUQ,OAAOC;AAAAA,EAAS;AAI1BE,SAAAA,oBAACC,iBAAiBC,UAAQ;AAAA,IAACC,OAAOT;AAAAA,IAAcU,8BAC7CC,eAAa;AAAA,MAAAD,8BACXE,WAAS;AAAA,QACRhB,WAAWiB,KACTjB,WACAkB,wBAAwBC,MACxBlB,mCAASkB,IACX;AAAA,QAAE,GACEhB;AAAAA,QAAMW,8BAETM,iBAAe;AAAA,UACdvB;AAAAA,UACAwB,MAAK;AAAA,UACLtB,SAASO;AAAAA,UACTJ;AAAAA,UACAoB,cAAc;AAAA,QAAA,CACf;AAAA,MAAA,CACQ;AAAA,IAAA,CACE;AAAA,EAAA,CACU;AAE/B;"}
+{"version":3,"file":"Navigation.js","sources":["../../../../../src/components/Header/Navigation/Navigation.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { MouseEvent } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { HvHeaderMenuBar, HvHeaderMenuBarProps } from \"./MenuBar\";\nimport { StyledNav } from \"./Navigation.styles\";\nimport { FocusProvider } from \"./utils/FocusContext\";\nimport { SelectionContext } from \"./utils/SelectionContext\";\nimport headerNavigationClasses, {\n  HvHeaderNavigationClasses,\n} from \"./navigationClasses\";\nimport {\n  HvHeaderNavigationItemProp,\n  useSelectionPath,\n} from \"./useSelectionPath\";\n\nexport interface HvHeaderNavigationProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  data: HvHeaderNavigationItemProp[];\n  selected?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  classes?: HvHeaderNavigationClasses;\n  levels?: 1 | 2;\n}\n\nexport const HvHeaderNavigation = (props: HvHeaderNavigationProps) => {\n  const {\n    data,\n    selected,\n    onClick,\n    className,\n    classes,\n    levels = 2,\n    ...others\n  } = useDefaultProps(\"HvHeaderNavigation\", props);\n\n  const selectionPath = useSelectionPath(data, selected);\n\n  const handleClick: HvHeaderMenuBarProps[\"onClick\"] = (event, selection) => {\n    event.preventDefault();\n\n    onClick?.(event, selection);\n  };\n\n  return (\n    <SelectionContext.Provider value={selectionPath}>\n      <FocusProvider>\n        <StyledNav\n          className={clsx(\n            className,\n            headerNavigationClasses.root,\n            classes?.root\n          )}\n          {...others}\n        >\n          <HvHeaderMenuBar\n            data={data}\n            type=\"menubar\"\n            onClick={handleClick}\n            levels={levels}\n            currentLevel={1}\n          />\n        </StyledNav>\n      </FocusProvider>\n    </SelectionContext.Provider>\n  );\n};\n"],"names":["HvHeaderNavigation","props","data","selected","onClick","className","classes","levels","others","useDefaultProps","selectionPath","useSelectionPath","handleClick","event","selection","preventDefault","_jsx","SelectionContext","Provider","value","children","FocusProvider","StyledNav","clsx","headerNavigationClasses","root","HvHeaderMenuBar","type","currentLevel"],"mappings":";;;;;;;;;AA4BaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,sBAAsBR,KAAK;AAEzCS,QAAAA,gBAAgBC,iBAAiBT,MAAMC,QAAQ;AAE/CS,QAAAA,cAA+CA,CAACC,OAAOC,cAAc;AACzED,UAAME,eAAe;AAErBX,uCAAUS,OAAOC;AAAAA,EAAS;AAI1BE,SAAAA,oBAACC,iBAAiBC,UAAQ;AAAA,IAACC,OAAOT;AAAAA,IAAcU,8BAC7CC,eAAa;AAAA,MAAAD,8BACXE,WAAS;AAAA,QACRjB,WAAWkB,KACTlB,WACAmB,wBAAwBC,MACxBnB,mCAASmB,IACX;AAAA,QAAE,GACEjB;AAAAA,QAAMY,8BAETM,iBAAe;AAAA,UACdxB;AAAAA,UACAyB,MAAK;AAAA,UACLvB,SAASQ;AAAAA,UACTL;AAAAA,UACAqB,cAAc;AAAA,QAAA,CACf;AAAA,MAAA,CACQ;AAAA,IAAA,CACE;AAAA,EAAA,CACU;AAE/B;"}

package/dist/esm/components/InlineEditor/InlineEditor.js

@@ -1,4 +1,5 @@
 import { useState, useRef, useLayoutEffect } from "react";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { Edit } from "@hitachivantara/uikit-react-icons";
 import { useControlled } from "../../hooks/useControlled.js";
 import { useTheme } from "../../hooks/useTheme.js";
@@ -9,22 +10,23 @@ import { jsx } from "@emotion/react/jsx-runtime";
 import { HvButton } from "../Button/Button.js";
 import { HvInput } from "../Input/Input.js";
 import { HvTypography } from "../Typography/Typography.js";
-const HvInlineEditor = ({
-  className,
-  classes: classesProp,
-  value: valueProp,
-  defaultValue,
-  showIcon,
-  component: InputComponent = HvInput,
-  variant = "body",
-  placeholder = "Enter text",
-  onBlur,
-  onChange,
-  onKeyDown,
-  buttonProps,
-  typographyProps,
-  ...others
-}) => {
+const HvInlineEditor = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    value: valueProp,
+    defaultValue,
+    showIcon,
+    component: InputComponent = HvInput,
+    variant = "body",
+    placeholder = "Enter text",
+    onBlur,
+    onChange,
+    onKeyDown,
+    buttonProps,
+    typographyProps,
+    ...others
+  } = useDefaultProps("HvInlineEditor", props);
   const {
     classes,
     cx

package/dist/esm/components/InlineEditor/InlineEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEditor.js","sources":["../../../../src/components/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from \"react\";\n\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { HvButtonProps, HvButton } from \"@core/components/Button\";\nimport {\n  HvTypographyVariants,\n  HvTypographyProps,\n  HvTypography,\n} from \"@core/components/Typography\";\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\n\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvInlineEditorProps\n  extends HvBaseProps<HTMLDivElement, \"onBlur\" | \"onChange\"> {\n  /** The value of the form element. */\n  value?: string;\n  /** Whether the Edit icon should always be visible */\n  showIcon?: boolean;\n  /** Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) */\n  component?: React.ElementType;\n  /** Variant of the HvTypography to display */\n  variant?: HvTypographyVariants;\n  /** Called when the input is blurred. */\n  onBlur?: (\n    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n    value: string\n  ) => void;\n  /** Called when the input value changes. */\n  onChange?: (event: React.SyntheticEvent, value: string) => void;\n  /** Props passed to the HvButton component */\n  buttonProps?: HvButtonProps;\n  /** Props passed to the HvTypography text component */\n  typographyProps?: HvTypographyProps;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvInlineEditorClasses;\n}\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = ({\n  className,\n  classes: classesProp,\n  value: valueProp,\n  defaultValue,\n  showIcon,\n  component: InputComponent = HvInput,\n  variant = \"body\",\n  placeholder = \"Enter text\",\n  onBlur,\n  onChange,\n  onKeyDown,\n  buttonProps,\n  typographyProps,\n  ...others\n}: HvInlineEditorProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement>();\n  const { activeTheme } = useTheme();\n\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Esc\")) {\n      setEditMode(false);\n      setValue(cachedValue);\n    }\n    onKeyDown?.(event as any);\n  };\n\n  const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={cx(className, classes.root)}>\n      {editMode ? (\n        <InputComponent\n          inputRef={inputRef}\n          classes={{\n            root: classes.inputRoot,\n            input: classes.input,\n            inputBorderContainer: classes.inputBorderContainer,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          variant=\"secondaryGhost\"\n          overrideIconColors={false}\n          endIcon={\n            <Edit\n              color=\"secondary_60\"\n              role=\"presentation\"\n              className={cx(classes.icon, { [classes.iconVisible]: showIcon })}\n            />\n          }\n          className={cx(classes.button, {\n            [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n          })}\n          onClick={handleClick}\n          {...buttonProps}\n        >\n          <HvTypography\n            variant={variant}\n            noWrap\n            className={cx(classes.text, { [classes.textEmpty]: !value })}\n            {...typographyProps}\n          >\n            {value || placeholder}\n          </HvTypography>\n        </HvButton>\n      )}\n    </div>\n  );\n};\n"],"names":["HvInlineEditor","className","classes","classesProp","value","valueProp","defaultValue","showIcon","component","InputComponent","HvInput","variant","placeholder","onBlur","onChange","onKeyDown","buttonProps","typographyProps","others","cx","useClasses","setValue","useControlled","editMode","setEditMode","useState","cachedValue","setCachedValue","inputRef","useRef","activeTheme","useTheme","typographyStyles","typography","lineHeight","useLayoutEffect","input","current","focus","select","handleClick","handleBlur","event","newValue","handleKeyDown","isKey","handleChange","val","root","children","_jsx","inputRoot","inputBorderContainer","inputProps","style","height","undefined","HvButton","overrideIconColors","endIcon","Edit","color","role","icon","iconVisible","button","largeText","parseInt","onClick","HvTypography","noWrap","text","textEmpty"],"mappings":"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"}
+{"version":3,"file":"InlineEditor.js","sources":["../../../../src/components/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { HvButtonProps, HvButton } from \"@core/components/Button\";\nimport {\n  HvTypographyVariants,\n  HvTypographyProps,\n  HvTypography,\n} from \"@core/components/Typography\";\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\n\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvInlineEditorProps\n  extends HvBaseProps<HTMLDivElement, \"onBlur\" | \"onChange\"> {\n  /** The value of the form element. */\n  value?: string;\n  /** Whether the Edit icon should always be visible */\n  showIcon?: boolean;\n  /** Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) */\n  component?: React.ElementType;\n  /** Variant of the HvTypography to display */\n  variant?: HvTypographyVariants;\n  /** Called when the input is blurred. */\n  onBlur?: (\n    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n    value: string\n  ) => void;\n  /** Called when the input value changes. */\n  onChange?: (event: React.SyntheticEvent, value: string) => void;\n  /** Props passed to the HvButton component */\n  buttonProps?: HvButtonProps;\n  /** Props passed to the HvTypography text component */\n  typographyProps?: HvTypographyProps;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvInlineEditorClasses;\n}\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = (props: HvInlineEditorProps) => {\n  const {\n    className,\n    classes: classesProp,\n    value: valueProp,\n    defaultValue,\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"body\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    ...others\n  } = useDefaultProps(\"HvInlineEditor\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement>();\n  const { activeTheme } = useTheme();\n\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Esc\")) {\n      setEditMode(false);\n      setValue(cachedValue);\n    }\n    onKeyDown?.(event as any);\n  };\n\n  const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={cx(className, classes.root)}>\n      {editMode ? (\n        <InputComponent\n          inputRef={inputRef}\n          classes={{\n            root: classes.inputRoot,\n            input: classes.input,\n            inputBorderContainer: classes.inputBorderContainer,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          variant=\"secondaryGhost\"\n          overrideIconColors={false}\n          endIcon={\n            <Edit\n              color=\"secondary_60\"\n              role=\"presentation\"\n              className={cx(classes.icon, { [classes.iconVisible]: showIcon })}\n            />\n          }\n          className={cx(classes.button, {\n            [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n          })}\n          onClick={handleClick}\n          {...buttonProps}\n        >\n          <HvTypography\n            variant={variant}\n            noWrap\n            className={cx(classes.text, { [classes.textEmpty]: !value })}\n            {...typographyProps}\n          >\n            {value || placeholder}\n          </HvTypography>\n        </HvButton>\n      )}\n    </div>\n  );\n};\n"],"names":["HvInlineEditor","props","className","classes","classesProp","value","valueProp","defaultValue","showIcon","component","InputComponent","HvInput","variant","placeholder","onBlur","onChange","onKeyDown","buttonProps","typographyProps","others","useDefaultProps","cx","useClasses","setValue","useControlled","editMode","setEditMode","useState","cachedValue","setCachedValue","inputRef","useRef","activeTheme","useTheme","typographyStyles","typography","lineHeight","useLayoutEffect","input","current","focus","select","handleClick","handleBlur","event","newValue","handleKeyDown","isKey","handleChange","val","root","children","_jsx","inputRoot","inputBorderContainer","inputProps","style","height","undefined","HvButton","overrideIconColors","endIcon","Edit","color","role","icon","iconVisible","button","largeText","parseInt","onClick","HvTypography","noWrap","text","textEmpty"],"mappings":"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"}

package/dist/esm/components/Input/Input.js

@@ -10,6 +10,7 @@ import { useControlled } from "../../hooks/useControlled.js";
 import { useIsMounted } from "../../hooks/useIsMounted.js";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
 import { useLabels } from "../../hooks/useLabels.js";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useClasses } from "./Input.styles.js";
 import { staticClasses } from "./Input.styles.js";
 import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
@@ -84,7 +85,7 @@ const HvInput = forwardRef((props, ref) => {
     onKeyDown,
     inputProps = {},
     ...others
-  } = props;
+  } = useDefaultProps("HvInput", props);
   const {
     classes,
     cx