@hitachivantara/uikit-react-core 5.0.0-next.11 → 5.0.0-next.14

package/dist/esm/components/Controls/LeftControl/LeftControl.js

@@ -1,8 +1,8 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import clsx from "clsx";
 import { StyledRoot } from "./LeftControl.styles.js";
 import { useContext } from "react";
 import { HvControlsContext } from "../context/ControlsContext.js";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import leftControlClasses from "./leftControlClasses.js";
 import { HvInput } from "../../Input/Input.js";
 import { setId } from "../../../utils/setId.js";
@@ -24,10 +24,18 @@ const HvLeftControl = ({
     onSearch == null ? void 0 : onSearch(e, value);
     onSearchHandler == null ? void 0 : onSearchHandler(value);
   };
-  return /* @__PURE__ */ jsxs(StyledRoot, { id, className: clsx(className, leftControlClasses.root, classes == null ? void 0 : classes.root), ...others, children: [
-    !hideSearch && /* @__PURE__ */ jsx(HvInput, { id: setId(id, "search-input"), type: "search", placeholder, onChange: (e, value) => onChangeFilter(e, value), ...searchProps }),
-    children
-  ] });
+  return /* @__PURE__ */ jsxs(StyledRoot, {
+    id,
+    className: clsx(className, leftControlClasses.root, classes == null ? void 0 : classes.root),
+    ...others,
+    children: [!hideSearch && /* @__PURE__ */ jsx(HvInput, {
+      id: setId(id, "search-input"),
+      type: "search",
+      placeholder,
+      onChange: (e, value) => onChangeFilter(e, value),
+      ...searchProps
+    }), children]
+  });
 };
 export {
   HvLeftControl

package/dist/esm/components/Controls/LeftControl/LeftControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"LeftControl.js","sources":["../../../../../src/components/Controls/LeftControl/LeftControl.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvBaseProps } from \"../../../types\";\nimport { StyledRoot } from \"./LeftControl.styles\";\nimport { leftControlClasses, HvLeftControlClasses } from \".\";\nimport { HvInput, HvInputProps } from \"components\";\nimport { useContext } from \"react\";\nimport { HvControlsContext } from \"../context/ControlsContext\";\nimport { setId } from \"utils\";\n\nexport type HvLeftControlProps = HvBaseProps & {\n  /** if `true` the hide sort by dropdown is not rendered */\n  hideSearch?: boolean;\n  /** placeholder of the input */\n  placeholder?: string;\n  /** Callback called when a search action occurs */\n  onSearch?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: string\n  ) => void;\n  /** Extra props passed to input */\n  searchProps?: HvInputProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLeftControlClasses;\n};\n\nexport const HvLeftControl = ({\n  id,\n  classes,\n  className,\n  children,\n  placeholder = \"Search\",\n  onSearch,\n  hideSearch = false,\n  searchProps,\n  ...others\n}: HvLeftControlProps) => {\n  const { onSearch: onSearchHandler } = useContext(HvControlsContext);\n\n  const onChangeFilter = (e, value) => {\n    onSearch?.(e, value);\n    onSearchHandler?.(value);\n  };\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(className, leftControlClasses.root, classes?.root)}\n      {...others}\n    >\n      {!hideSearch && (\n        <HvInput\n          id={setId(id, \"search-input\")}\n          type=\"search\"\n          placeholder={placeholder}\n          onChange={(e, value) => onChangeFilter(e, value)}\n          {...searchProps}\n        />\n      )}\n      {children}\n    </StyledRoot>\n  );\n};\n"],"names":["HvLeftControl","id","classes","className","children","placeholder","onSearch","hideSearch","searchProps","others","onSearchHandler","useContext","HvControlsContext","onChangeFilter","e","value","clsx","leftControlClasses","root","setId"],"mappings":";;;;;;;;AAyBO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,cAAc;AAAA,EACdC;AAAAA,EACAC,aAAa;AAAA,EACbC;AAAAA,KACGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAEH,UAAUI;AAAAA,EAAAA,IAAoBC,WAAWC,iBAAiB;AAE5DC,QAAAA,iBAAiBA,CAACC,GAAGC,UAAU;AACnCT,yCAAWQ,GAAGC;AACdL,uDAAkBK;AAAAA,EAAK;AAGzB,SACG,qBAAA,YAAA,EACC,IACA,WAAWC,KAAKb,WAAWc,mBAAmBC,MAAMhB,mCAASgB,IAAI,GAC7DT,GAAAA,QAEH,UAAA;AAAA,IAACF,CAAAA,kCACC,SACC,EAAA,IAAIY,MAAMlB,IAAI,cAAc,GAC5B,MAAK,UACL,aACA,UAAU,CAACa,GAAGC,UAAUF,eAAeC,GAAGC,KAAK,GAC/C,GAAIP,aAEP;AAAA,IACAJ;AAAAA,EACH,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"LeftControl.js","sources":["../../../../../src/components/Controls/LeftControl/LeftControl.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvBaseProps } from \"../../../types\";\nimport { StyledRoot } from \"./LeftControl.styles\";\nimport { leftControlClasses, HvLeftControlClasses } from \".\";\nimport { HvInput, HvInputProps } from \"components\";\nimport { useContext } from \"react\";\nimport { HvControlsContext } from \"../context/ControlsContext\";\nimport { setId } from \"utils\";\n\nexport type HvLeftControlProps = HvBaseProps & {\n  /** if `true` the hide sort by dropdown is not rendered */\n  hideSearch?: boolean;\n  /** placeholder of the input */\n  placeholder?: string;\n  /** Callback called when a search action occurs */\n  onSearch?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: string\n  ) => void;\n  /** Extra props passed to input */\n  searchProps?: HvInputProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLeftControlClasses;\n};\n\nexport const HvLeftControl = ({\n  id,\n  classes,\n  className,\n  children,\n  placeholder = \"Search\",\n  onSearch,\n  hideSearch = false,\n  searchProps,\n  ...others\n}: HvLeftControlProps) => {\n  const { onSearch: onSearchHandler } = useContext(HvControlsContext);\n\n  const onChangeFilter = (e, value) => {\n    onSearch?.(e, value);\n    onSearchHandler?.(value);\n  };\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(className, leftControlClasses.root, classes?.root)}\n      {...others}\n    >\n      {!hideSearch && (\n        <HvInput\n          id={setId(id, \"search-input\")}\n          type=\"search\"\n          placeholder={placeholder}\n          onChange={(e, value) => onChangeFilter(e, value)}\n          {...searchProps}\n        />\n      )}\n      {children}\n    </StyledRoot>\n  );\n};\n"],"names":["HvLeftControl","id","classes","className","children","placeholder","onSearch","hideSearch","searchProps","others","onSearchHandler","useContext","HvControlsContext","onChangeFilter","e","value","StyledRoot","clsx","leftControlClasses","root","HvInput","setId","type","onChange"],"mappings":";;;;;;;;AAyBO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,cAAc;AAAA,EACdC;AAAAA,EACAC,aAAa;AAAA,EACbC;AAAAA,EACA,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAEH,UAAUI;AAAAA,EAAAA,IAAoBC,WAAWC,iBAAiB;AAE5DC,QAAAA,iBAAiBA,CAACC,GAAGC,UAAU;AACnCT,yCAAWQ,GAAGC;AACdL,uDAAkBK;AAAAA,EAAK;AAGzB,8BACGC,YAAU;AAAA,IACTf;AAAAA,IACAE,WAAWc,KAAKd,WAAWe,mBAAmBC,MAAMjB,mCAASiB,IAAI;AAAA,IAAE,GAC/DV;AAAAA,IAAML,WAET,CAACG,kCACCa,SAAO;AAAA,MACNnB,IAAIoB,MAAMpB,IAAI,cAAc;AAAA,MAC5BqB,MAAK;AAAA,MACLjB;AAAAA,MACAkB,UAAUA,CAACT,GAAGC,UAAUF,eAAeC,GAAGC,KAAK;AAAA,MAAE,GAC7CP;AAAAA,IAAW,CAAA,GAGlBJ,QAAQ;AAAA,EAAA,CACE;AAEjB;"}

package/dist/esm/components/Controls/RightControl/RightControl.js

@@ -1,8 +1,8 @@
-import { jsx } from "@emotion/react/jsx-runtime";
 import clsx from "clsx";
 import { StyledRoot, StyledDropdown } from "./RightControl.styles.js";
 import { useState, useContext } from "react";
 import { HvControlsContext } from "../context/ControlsContext.js";
+import { jsx } from "@emotion/react/jsx-runtime";
 import rightControlClasses from "./rightControlClasses.js";
 import { setId } from "../../../utils/setId.js";
 const HvRightControl = ({
@@ -28,7 +28,19 @@ const HvRightControl = ({
       selected: prevValue.id === value.id
     })));
   };
-  return /* @__PURE__ */ jsx(StyledRoot, { id, className: clsx(className, rightControlClasses.root, classes == null ? void 0 : classes.root), ...others, children: !hideSortBy && /* @__PURE__ */ jsx(StyledDropdown, { id: setId(id, "sort-by-dropdown"), values: dropDownValues, className: clsx(rightControlClasses.sortDropdown, classes == null ? void 0 : classes.sortDropdown), onChange: handleChangeSort, singleSelectionToggle: false, ...sortProps }) });
+  return /* @__PURE__ */ jsx(StyledRoot, {
+    id,
+    className: clsx(className, rightControlClasses.root, classes == null ? void 0 : classes.root),
+    ...others,
+    children: !hideSortBy && /* @__PURE__ */ jsx(StyledDropdown, {
+      id: setId(id, "sort-by-dropdown"),
+      values: dropDownValues,
+      className: clsx(rightControlClasses.sortDropdown, classes == null ? void 0 : classes.sortDropdown),
+      onChange: handleChangeSort,
+      singleSelectionToggle: false,
+      ...sortProps
+    })
+  });
 };
 export {
   HvRightControl

package/dist/esm/components/Controls/RightControl/RightControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"RightControl.js","sources":["../../../../../src/components/Controls/RightControl/RightControl.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvBaseProps } from \"../../../types\";\nimport { StyledDropdown, StyledRoot } from \"./RightControl.styles\";\nimport { rightControlClasses, HvRightControlClasses } from \".\";\nimport { HvDropdownProps, HvListValue } from \"components\";\nimport { useContext, useState } from \"react\";\nimport { HvControlsContext } from \"../context/ControlsContext\";\nimport { setId } from \"utils\";\n\nexport type HvRightListControls = HvListValue & {\n  accessor: string;\n  desc: boolean;\n};\n\nexport type HvRightControlProps = HvBaseProps & {\n  /** if `true` the hide sort by dropdown is not rendered */\n  hideSortBy?: boolean;\n  /** options for the dropdown to sort */\n  values?: HvRightListControls[];\n  /** Callback called when a sort action occurs */\n  onSort?: (selected: HvRightListControls | undefined) => void;\n  /** Extra props passed to dropdown */\n  sortProps?: HvDropdownProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvRightControlClasses;\n};\n\nexport const HvRightControl = ({\n  id,\n  classes,\n  className,\n  children,\n  values,\n  onSort,\n  hideSortBy = false,\n  sortProps,\n  ...others\n}: HvRightControlProps) => {\n  const [dropDownValues, setDropdownValues] = useState(values);\n\n  const { onSort: onSortHandler } = useContext(HvControlsContext);\n\n  const handleChangeSort = (value) => {\n    onSort?.(value);\n    onSortHandler?.(value);\n    // this should be changed when dropdown changes his \"values\" behavior\n    setDropdownValues((prevValues) =>\n      prevValues?.map((prevValue) => ({\n        ...prevValue,\n        selected: prevValue.id === value.id,\n      }))\n    );\n  };\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(className, rightControlClasses.root, classes?.root)}\n      {...others}\n    >\n      {!hideSortBy && (\n        <StyledDropdown\n          id={setId(id, \"sort-by-dropdown\")}\n          values={dropDownValues}\n          className={clsx(\n            rightControlClasses.sortDropdown,\n            classes?.sortDropdown\n          )}\n          onChange={handleChangeSort}\n          singleSelectionToggle={false}\n          {...sortProps}\n        />\n      )}\n    </StyledRoot>\n  );\n};\n"],"names":["HvRightControl","id","classes","className","children","values","onSort","hideSortBy","sortProps","others","dropDownValues","setDropdownValues","useState","onSortHandler","useContext","HvControlsContext","handleChangeSort","value","prevValues","map","prevValue","selected","clsx","rightControlClasses","root","setId","sortDropdown"],"mappings":";;;;;;;AA2BO,MAAMA,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC;AAAAA,KACGC;AACgB,MAAM;AACzB,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIC,SAASP,MAAM;AAErD,QAAA;AAAA,IAAEC,QAAQO;AAAAA,EAAAA,IAAkBC,WAAWC,iBAAiB;AAE9D,QAAMC,mBAAoBC,CAAU,UAAA;AAClCX,qCAASW;AACTJ,mDAAgBI;AAEGC,sBAAAA,CAAAA,eACjBA,yCAAYC,IAAKC,CAAe,eAAA;AAAA,MAC9B,GAAGA;AAAAA,MACHC,UAAUD,UAAUnB,OAAOgB,MAAMhB;AAAAA,OAChC;AAAA,EAAA;AAIP,6BACG,YACC,EAAA,IACA,WAAWqB,KAAKnB,WAAWoB,oBAAoBC,MAAMtB,mCAASsB,IAAI,GAC9Df,GAAAA,QAEH,UAACF,CAAAA,kCACC,gBACC,EAAA,IAAIkB,MAAMxB,IAAI,kBAAkB,GAChC,QAAQS,gBACR,WAAWY,KACTC,oBAAoBG,cACpBxB,mCAASwB,YAAY,GAEvB,UAAUV,kBACV,uBAAuB,OACvB,GAAIR,WAEP,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"RightControl.js","sources":["../../../../../src/components/Controls/RightControl/RightControl.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvBaseProps } from \"../../../types\";\nimport { StyledDropdown, StyledRoot } from \"./RightControl.styles\";\nimport { rightControlClasses, HvRightControlClasses } from \".\";\nimport { HvDropdownProps, HvListValue } from \"components\";\nimport { useContext, useState } from \"react\";\nimport { HvControlsContext } from \"../context/ControlsContext\";\nimport { setId } from \"utils\";\n\nexport type HvRightListControls = HvListValue & {\n  accessor: string;\n  desc: boolean;\n};\n\nexport type HvRightControlProps = HvBaseProps & {\n  /** if `true` the hide sort by dropdown is not rendered */\n  hideSortBy?: boolean;\n  /** options for the dropdown to sort */\n  values?: HvRightListControls[];\n  /** Callback called when a sort action occurs */\n  onSort?: (selected: HvRightListControls | undefined) => void;\n  /** Extra props passed to dropdown */\n  sortProps?: HvDropdownProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvRightControlClasses;\n};\n\nexport const HvRightControl = ({\n  id,\n  classes,\n  className,\n  children,\n  values,\n  onSort,\n  hideSortBy = false,\n  sortProps,\n  ...others\n}: HvRightControlProps) => {\n  const [dropDownValues, setDropdownValues] = useState(values);\n\n  const { onSort: onSortHandler } = useContext(HvControlsContext);\n\n  const handleChangeSort = (value) => {\n    onSort?.(value);\n    onSortHandler?.(value);\n    // this should be changed when dropdown changes his \"values\" behavior\n    setDropdownValues((prevValues) =>\n      prevValues?.map((prevValue) => ({\n        ...prevValue,\n        selected: prevValue.id === value.id,\n      }))\n    );\n  };\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(className, rightControlClasses.root, classes?.root)}\n      {...others}\n    >\n      {!hideSortBy && (\n        <StyledDropdown\n          id={setId(id, \"sort-by-dropdown\")}\n          values={dropDownValues}\n          className={clsx(\n            rightControlClasses.sortDropdown,\n            classes?.sortDropdown\n          )}\n          onChange={handleChangeSort}\n          singleSelectionToggle={false}\n          {...sortProps}\n        />\n      )}\n    </StyledRoot>\n  );\n};\n"],"names":["HvRightControl","id","classes","className","children","values","onSort","hideSortBy","sortProps","others","dropDownValues","setDropdownValues","useState","onSortHandler","useContext","HvControlsContext","handleChangeSort","value","prevValues","map","prevValue","selected","StyledRoot","clsx","rightControlClasses","root","_jsx","StyledDropdown","setId","sortDropdown","onChange","singleSelectionToggle"],"mappings":";;;;;;;AA2BO,MAAMA,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC;AAAAA,EACA,GAAGC;AACgB,MAAM;AACzB,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIC,SAASP,MAAM;AAErD,QAAA;AAAA,IAAEC,QAAQO;AAAAA,EAAAA,IAAkBC,WAAWC,iBAAiB;AAE9D,QAAMC,mBAAoBC,CAAU,UAAA;AAClCX,qCAASW;AACTJ,mDAAgBI;AAEGC,sBAAAA,CAAAA,eACjBA,yCAAYC,IAAKC,CAAe,eAAA;AAAA,MAC9B,GAAGA;AAAAA,MACHC,UAAUD,UAAUnB,OAAOgB,MAAMhB;AAAAA,OAChC;AAAA,EAAA;AAIP,6BACGqB,YAAU;AAAA,IACTrB;AAAAA,IACAE,WAAWoB,KAAKpB,WAAWqB,oBAAoBC,MAAMvB,mCAASuB,IAAI;AAAA,IAAE,GAChEhB;AAAAA,IAAML,UAET,CAACG,cACAmB,oBAACC,gBAAc;AAAA,MACb1B,IAAI2B,MAAM3B,IAAI,kBAAkB;AAAA,MAChCI,QAAQK;AAAAA,MACRP,WAAWoB,KACTC,oBAAoBK,cACpB3B,mCAAS2B,YAAY;AAAA,MAEvBC,UAAUd;AAAAA,MACVe,uBAAuB;AAAA,MAAM,GACzBvB;AAAAA,IAAAA,CAAS;AAAA,EAAA,CAGN;AAEjB;"}

package/dist/esm/components/Controls/RightControl/RightControl.styles.js

@@ -1,5 +1,5 @@
-import { jsx } from "@emotion/react/jsx-runtime";
 import _styled from "@emotion/styled/base";
+import { jsx } from "@emotion/react/jsx-runtime";
 import { HvDropdown } from "../../Dropdown/Dropdown.js";
 function _EMOTION_STRINGIFIED_CSS_ERROR__() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
@@ -18,7 +18,9 @@ const StyledRoot = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "prod
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ29udHJvbHMvUmlnaHRDb250cm9sL1JpZ2h0Q29udHJvbC5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUcwQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0NvbnRyb2xzL1JpZ2h0Q29udHJvbC9SaWdodENvbnRyb2wuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgSHZEcm9wZG93biB9IGZyb20gXCJjb21wb25lbnRzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJpbmxpbmUtZmxleFwiLFxuICBnYXA6IDEwLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWREcm9wZG93biA9IHN0eWxlZCgocHJvcHMpID0+IDxIdkRyb3Bkb3duIHsuLi5wcm9wc30gLz4pKHtcbiAgbWluV2lkdGg6IDIwMCxcbn0pO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-const StyledDropdown = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ jsx(HvDropdown, { ...props }), process.env.NODE_ENV === "production" ? {
+const StyledDropdown = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ jsx(HvDropdown, {
+  ...props
+}), process.env.NODE_ENV === "production" ? {
   target: "e16dy5r70"
 } : {
   target: "e16dy5r70",

package/dist/esm/components/Controls/RightControl/RightControl.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"RightControl.styles.js","sources":["../../../../../src/components/Controls/RightControl/RightControl.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { HvDropdown } from \"components\";\n\nexport const StyledRoot = styled(\"div\")({\n  display: \"inline-flex\",\n  gap: 10,\n});\n\nexport const StyledDropdown = styled((props) => <HvDropdown {...props} />)({\n  minWidth: 200,\n});\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledDropdown","props"],"mappings":";;;;;;AAGO,MAAMA,aAAoB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAGrC;AAEWC,MAAAA,iBAAyBC,wBAAAA,CAAAA,UAAW,oBAAA,YAAA,EAAeA,GAAAA,MAAAA,CAAS,GAAAX,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAExE;"}
+{"version":3,"file":"RightControl.styles.js","sources":["../../../../../src/components/Controls/RightControl/RightControl.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { HvDropdown } from \"components\";\n\nexport const StyledRoot = styled(\"div\")({\n  display: \"inline-flex\",\n  gap: 10,\n});\n\nexport const StyledDropdown = styled((props) => <HvDropdown {...props} />)({\n  minWidth: 200,\n});\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledDropdown","_styled","props","_jsx","HvDropdown"],"mappings":";;;;;;AAGO,MAAMA,aAAoB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAGrC;AAEK,MAAMC,iBAAiBC,wBAAQC,CAAUC,UAAAA,oBAACC,YAAU;AAAA,EAAA,GAAKF;AAAK,CAAA,GAAIZ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAExE;"}

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

@@ -1,7 +1,7 @@
-import { jsx } from "@emotion/react/jsx-runtime";
 import clsx from "clsx";
 import { StyledActions } from "./Actions.styles.js";
 import dialogActionClasses from "./actionsClasses.js";
+import { jsx } from "@emotion/react/jsx-runtime";
 const HvActions = ({
   classes,
   className,
@@ -9,10 +9,16 @@ const HvActions = ({
   fullscreen = false,
   ...others
 }) => {
-  return /* @__PURE__ */ jsx(StyledActions, { className, classes: {
-    root: clsx(dialogActionClasses.root, classes == null ? void 0 : classes.root, fullscreen && clsx(dialogActionClasses.fullscreen, classes == null ? void 0 : classes.fullscreen)),
-    spacing: clsx(dialogActionClasses.spacing, classes == null ? void 0 : classes.spacing)
-  }, $fullscreen: fullscreen, ...others, children });
+  return /* @__PURE__ */ jsx(StyledActions, {
+    className,
+    classes: {
+      root: clsx(dialogActionClasses.root, classes == null ? void 0 : classes.root, fullscreen && clsx(dialogActionClasses.fullscreen, classes == null ? void 0 : classes.fullscreen)),
+      spacing: clsx(dialogActionClasses.spacing, classes == null ? void 0 : classes.spacing)
+    },
+    $fullscreen: fullscreen,
+    ...others,
+    children
+  });
 };
 export {
   HvActions

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

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sources":["../../../../../src/components/Dialog/Actions/Actions.tsx"],"sourcesContent":["import { DialogActionsProps as MuiDialogActionsProps } from \"@mui/material/DialogActions\";\nimport clsx from \"clsx\";\nimport { HvBaseProps } from \"../../../types\";\nimport { StyledActions } from \"./Actions.styles\";\nimport dialogActionClasses, { HvDialogActionClasses } from \"./actionsClasses\";\n\nexport type HvActionsProps = Omit<MuiDialogActionsProps, \"classes\"> &\n  HvBaseProps & {\n    /** Set the dialog to fullscreen mode. */\n    fullscreen?: boolean;\n    classes?: HvDialogActionClasses;\n  };\n\nexport const HvActions = ({\n  classes,\n  className,\n  children,\n  fullscreen = false,\n  ...others\n}: HvActionsProps) => {\n  return (\n    <StyledActions\n      className={className}\n      classes={{\n        root: clsx(\n          dialogActionClasses.root,\n          classes?.root,\n          fullscreen &&\n            clsx(dialogActionClasses.fullscreen, classes?.fullscreen)\n        ),\n        spacing: clsx(dialogActionClasses.spacing, classes?.spacing),\n      }}\n      $fullscreen={fullscreen}\n      {...others}\n    >\n      {children}\n    </StyledActions>\n  );\n};\n"],"names":["HvActions","classes","className","children","fullscreen","others","root","clsx","dialogActionClasses","spacing"],"mappings":";;;;AAaO,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,KACVC;AACW,MAAM;AAElB,SAAA,oBAAC,eACC,EAAA,WACA,SAAS;AAAA,IACPC,MAAMC,KACJC,oBAAoBF,MACpBL,mCAASK,MACTF,cACEG,KAAKC,oBAAoBJ,YAAYH,mCAASG,UAAU,CAAC;AAAA,IAE7DK,SAASF,KAAKC,oBAAoBC,SAASR,mCAASQ,OAAO;AAAA,EAE7D,GAAA,aAAaL,YACTC,GAAAA,QAEHF,SACH,CAAA;AAEJ;"}
+{"version":3,"file":"Actions.js","sources":["../../../../../src/components/Dialog/Actions/Actions.tsx"],"sourcesContent":["import { DialogActionsProps as MuiDialogActionsProps } from \"@mui/material/DialogActions\";\nimport clsx from \"clsx\";\nimport { HvBaseProps } from \"../../../types\";\nimport { StyledActions } from \"./Actions.styles\";\nimport dialogActionClasses, { HvDialogActionClasses } from \"./actionsClasses\";\n\nexport type HvActionsProps = Omit<MuiDialogActionsProps, \"classes\"> &\n  HvBaseProps & {\n    /** Set the dialog to fullscreen mode. */\n    fullscreen?: boolean;\n    classes?: HvDialogActionClasses;\n  };\n\nexport const HvActions = ({\n  classes,\n  className,\n  children,\n  fullscreen = false,\n  ...others\n}: HvActionsProps) => {\n  return (\n    <StyledActions\n      className={className}\n      classes={{\n        root: clsx(\n          dialogActionClasses.root,\n          classes?.root,\n          fullscreen &&\n            clsx(dialogActionClasses.fullscreen, classes?.fullscreen)\n        ),\n        spacing: clsx(dialogActionClasses.spacing, classes?.spacing),\n      }}\n      $fullscreen={fullscreen}\n      {...others}\n    >\n      {children}\n    </StyledActions>\n  );\n};\n"],"names":["HvActions","classes","className","children","fullscreen","others","StyledActions","root","clsx","dialogActionClasses","spacing","$fullscreen"],"mappings":";;;;AAaO,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACb,GAAGC;AACW,MAAM;AACpB,6BACGC,eAAa;AAAA,IACZJ;AAAAA,IACAD,SAAS;AAAA,MACPM,MAAMC,KACJC,oBAAoBF,MACpBN,mCAASM,MACTH,cACEI,KAAKC,oBAAoBL,YAAYH,mCAASG,UAAU,CAAC;AAAA,MAE7DM,SAASF,KAAKC,oBAAoBC,SAAST,mCAASS,OAAO;AAAA,IAC7D;AAAA,IACAC,aAAaP;AAAAA,IAAW,GACpBC;AAAAA,IAAMF;AAAAA,EAAAA,CAGI;AAEpB;"}

package/dist/esm/components/Dialog/Content/Content.js

@@ -1,15 +1,20 @@
-import { jsx } from "@emotion/react/jsx-runtime";
 import MuiDialogContent from "@mui/material/DialogContent";
 import clsx from "clsx";
 import { StyledTypography } from "./Content.styles.js";
 import dialogContentClasses from "./contentClasses.js";
+import { jsx } from "@emotion/react/jsx-runtime";
 const HvContent = ({
   classes,
   className,
   children,
   indentContent = false
 }) => {
-  return /* @__PURE__ */ jsx(StyledTypography, { component: MuiDialogContent, className: clsx(className, dialogContentClasses.root, classes == null ? void 0 : classes.root, !!indentContent && clsx(dialogContentClasses.textContent, classes == null ? void 0 : classes.textContent)), $indentContent: indentContent, children });
+  return /* @__PURE__ */ jsx(StyledTypography, {
+    component: MuiDialogContent,
+    className: clsx(className, dialogContentClasses.root, classes == null ? void 0 : classes.root, !!indentContent && clsx(dialogContentClasses.textContent, classes == null ? void 0 : classes.textContent)),
+    $indentContent: indentContent,
+    children
+  });
 };
 export {
   HvContent

package/dist/esm/components/Dialog/Content/Content.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../../src/components/Dialog/Content/Content.tsx"],"sourcesContent":["import MuiDialogContent, {\n  DialogContentProps as MuiDialogContentProps,\n} from \"@mui/material/DialogContent\";\nimport clsx from \"clsx\";\nimport { HvBaseProps } from \"../../../types\";\nimport { StyledTypography } from \"./Content.styles\";\nimport dialogContentClasses, { HvDialogContentClasses } from \"./contentClasses\";\n\nexport type HvContentProps = Omit<MuiDialogContentProps, \"classes\"> &\n  HvBaseProps & {\n    /** Content should be indented in relationship to the Dialog title. */\n    indentContent?: boolean;\n    classes?: HvDialogContentClasses;\n  };\n\nexport const HvContent = ({\n  classes,\n  className,\n  children,\n  indentContent = false,\n}: HvContentProps) => {\n  return (\n    <StyledTypography\n      component={MuiDialogContent}\n      className={clsx(\n        className,\n        dialogContentClasses.root,\n        classes?.root,\n        !!indentContent &&\n          clsx(dialogContentClasses.textContent, classes?.textContent)\n      )}\n      $indentContent={indentContent}\n    >\n      {children}\n    </StyledTypography>\n  );\n};\n"],"names":["HvContent","classes","className","children","indentContent","MuiDialogContent","clsx","dialogContentClasses","root","textContent"],"mappings":";;;;;AAeO,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,gBAAgB;AACF,MAAM;AAElB,SAAA,oBAAC,oBACC,WAAWC,kBACX,WAAWC,KACTJ,WACAK,qBAAqBC,MACrBP,mCAASO,MACT,CAAC,CAACJ,iBACAE,KAAKC,qBAAqBE,aAAaR,mCAASQ,WAAW,CAAC,GAEhE,gBAAgBL,eAEfD,SACH,CAAA;AAEJ;"}
+{"version":3,"file":"Content.js","sources":["../../../../../src/components/Dialog/Content/Content.tsx"],"sourcesContent":["import MuiDialogContent, {\n  DialogContentProps as MuiDialogContentProps,\n} from \"@mui/material/DialogContent\";\nimport clsx from \"clsx\";\nimport { HvBaseProps } from \"../../../types\";\nimport { StyledTypography } from \"./Content.styles\";\nimport dialogContentClasses, { HvDialogContentClasses } from \"./contentClasses\";\n\nexport type HvContentProps = Omit<MuiDialogContentProps, \"classes\"> &\n  HvBaseProps & {\n    /** Content should be indented in relationship to the Dialog title. */\n    indentContent?: boolean;\n    classes?: HvDialogContentClasses;\n  };\n\nexport const HvContent = ({\n  classes,\n  className,\n  children,\n  indentContent = false,\n}: HvContentProps) => {\n  return (\n    <StyledTypography\n      component={MuiDialogContent}\n      className={clsx(\n        className,\n        dialogContentClasses.root,\n        classes?.root,\n        !!indentContent &&\n          clsx(dialogContentClasses.textContent, classes?.textContent)\n      )}\n      $indentContent={indentContent}\n    >\n      {children}\n    </StyledTypography>\n  );\n};\n"],"names":["HvContent","classes","className","children","indentContent","StyledTypography","component","MuiDialogContent","clsx","dialogContentClasses","root","textContent","$indentContent"],"mappings":";;;;;AAeO,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,gBAAgB;AACF,MAAM;AACpB,6BACGC,kBAAgB;AAAA,IACfC,WAAWC;AAAAA,IACXL,WAAWM,KACTN,WACAO,qBAAqBC,MACrBT,mCAASS,MACT,CAAC,CAACN,iBACAI,KAAKC,qBAAqBE,aAAaV,mCAASU,WAAW,CAAC;AAAA,IAEhEC,gBAAgBR;AAAAA,IAAcD;AAAAA,EAAAA,CAGb;AAEvB;"}

package/dist/esm/components/Dialog/Dialog.js

@@ -1,5 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import React__default, { useContext, useRef, useCallback } from "react";
+import React__default, { useRef, useCallback } from "react";
 import clsx from "clsx";
 import MuiDialog from "@mui/material/Dialog";
 import { Close } from "@hitachivantara/uikit-react-icons";
@@ -8,9 +7,10 @@ import { isNil } from "lodash";
 import { StyledBackdrop, StyledPaper, StyledClose } from "./Dialog.styles.js";
 import { getFocusableList } from "../../utils/focusableElementFinder.js";
 import dialogClasses from "./dialogClasses.js";
-import { css } from "../../emotion/cache.js";
+import { css } from "../../utils/emotion.js";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import withTooltip from "../../hocs/withTooltip.js";
-import { HvThemeContext } from "../../providers/ThemeProvider.js";
+import { useTheme } from "../../hooks/useTheme.js";
 import { setId } from "../../utils/setId.js";
 import { isKeypress } from "../../utils/keyboardUtils/keyCheck.js";
 import { keyboardCodes } from "../../utils/keyboardUtils/keyboardCodes.js";
@@ -32,7 +32,7 @@ const HvDialog = ({
     activeTheme,
     selectedMode,
     rootId
-  } = useContext(HvThemeContext);
+  } = useTheme();
   const focusableQueue = useRef({
     first: void 0,
     last: void 0
@@ -85,33 +85,66 @@ const HvDialog = ({
       }
     }
   };
-  const closeButtonDisplay = () => /* @__PURE__ */ jsx(Close, { role: "presentation" });
+  const closeButtonDisplay = () => /* @__PURE__ */ jsx(Close, {
+    role: "presentation"
+  });
   const CloseButtonTooltipWrapper = buttonTitle ? withTooltip(closeButtonDisplay, buttonTitle, "top", null, null, null) : closeButtonDisplay;
-  return /* @__PURE__ */ jsxs(MuiDialog, { container: document.getElementById(rootId || "") || document.body, className: clsx(dialogClasses.root, classes == null ? void 0 : classes.root, className), id, ref: measuredRef, open, fullScreen: fullscreen, onClose: (event, reason) => wrappedClose(event, void 0, reason), onKeyDown: keyDownHandler, fullWidth: true, maxWidth: false, slots: {
-    backdrop: (backdropProps) => {
-      var _a;
-      return /* @__PURE__ */ jsx(StyledBackdrop, { open, onClick: (event) => wrappedClose(event), $backColor: ((_a = activeTheme == null ? void 0 : activeTheme.colors) == null ? void 0 : _a.modes[selectedMode].atmo4) || theme.colors.atmo4, ...backdropProps });
-    }
-  }, classes: {
-    container: css({
-      position: "relative"
-    })
-  }, BackdropProps: {
-    classes: {
-      root: clsx(classes == null ? void 0 : classes.background, dialogClasses.background)
-    }
-  }, PaperComponent: (paperProps) => /* @__PURE__ */ jsx(StyledPaper, { $fullscreen: fullscreen, ...paperProps }), PaperProps: {
+  return /* @__PURE__ */ jsxs(MuiDialog, {
+    container: document.getElementById(rootId || "") || document.body,
+    className: clsx(dialogClasses.root, classes == null ? void 0 : classes.root, className),
+    id,
+    ref: measuredRef,
+    open,
+    fullScreen: fullscreen,
+    onClose: (event, reason) => wrappedClose(event, void 0, reason),
+    onKeyDown: keyDownHandler,
+    fullWidth: true,
+    maxWidth: false,
+    slots: {
+      backdrop: (backdropProps) => {
+        var _a;
+        return /* @__PURE__ */ jsx(StyledBackdrop, {
+          open,
+          onClick: (event) => wrappedClose(event),
+          $backColor: ((_a = activeTheme == null ? void 0 : activeTheme.colors) == null ? void 0 : _a.modes[selectedMode].atmo4) || theme.colors.atmo4,
+          ...backdropProps
+        });
+      }
+    },
     classes: {
-      root: clsx(css({
-        position: "absolute"
-      }), classes == null ? void 0 : classes.paper, dialogClasses.paper, fullscreen && clsx(dialogClasses.fullscreen, classes == null ? void 0 : classes.fullscreen))
-    }
-  }, "aria-modal": true, ...others, children: [
-    /* @__PURE__ */ jsx(StyledClose, { id: setId(id, "close"), className: clsx(dialogClasses.closeButton, classes == null ? void 0 : classes.closeButton), variant: "secondaryGhost", onClick: (event) => wrappedClose(event, true, void 0), "aria-label": buttonTitle, children: /* @__PURE__ */ jsx(CloseButtonTooltipWrapper, {}) }),
-    children && typeof children === "object" ? React__default.Children.map(children, (c) => c && React__default.cloneElement(c, {
+      container: css({
+        position: "relative"
+      })
+    },
+    BackdropProps: {
+      classes: {
+        root: clsx(classes == null ? void 0 : classes.background, dialogClasses.background)
+      }
+    },
+    PaperComponent: (paperProps) => /* @__PURE__ */ jsx(StyledPaper, {
+      $fullscreen: fullscreen,
+      ...paperProps
+    }),
+    PaperProps: {
+      classes: {
+        root: clsx(css({
+          position: "absolute"
+        }), classes == null ? void 0 : classes.paper, dialogClasses.paper, fullscreen && clsx(dialogClasses.fullscreen, classes == null ? void 0 : classes.fullscreen))
+      }
+    },
+    "aria-modal": true,
+    ...others,
+    children: [/* @__PURE__ */ jsx(StyledClose, {
+      id: setId(id, "close"),
+      className: clsx(dialogClasses.closeButton, classes == null ? void 0 : classes.closeButton),
+      variant: "secondaryGhost",
+      onClick: (event) => wrappedClose(event, true, void 0),
+      "aria-label": buttonTitle,
+      children: /* @__PURE__ */ jsx(CloseButtonTooltipWrapper, {})
+    }), children && typeof children === "object" ? React__default.Children.map(children, (c) => c && React__default.cloneElement(c, {
       fullscreen
-    })) : children
-  ] });
+    })) : children]
+  });
 };
 export {
   HvDialog

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useContext, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { isNil } from \"lodash\";\nimport { HvBaseProps } from \"../../types\";\nimport { StyledBackdrop, StyledClose, StyledPaper } from \"./Dialog.styles\";\nimport { getFocusableList } from \"utils/focusableElementFinder\";\nimport { isKeypress, keyboardCodes, setId } from \"utils\";\nimport { HvThemeContext } from \"providers\";\nimport { withTooltip } from \"hocs\";\nimport dialogClasses, { HvDialogClasses } from \"./dialogClasses\";\nimport { css } from \"emotion\";\n\nexport type HvDialogProps = Omit<MuiDialogProps, \"fullScreen\" | \"classes\"> &\n  HvBaseProps & {\n    /** Id to be applied to the root node. */\n    id?: string;\n    /** Current state of the Dialog. */\n    open?: boolean;\n    /** Function executed on close. */\n    onClose?: (\n      event: React.SyntheticEvent,\n      reason?: \"escapeKeyDown\" | \"backdropClick\"\n    ) => void;\n    /** Element id that should be focus when the Dialog opens. */\n    firstFocusable?: string;\n    /** Title for the button close. */\n    buttonTitle?: string;\n    /** Set the dialog to fullscreen mode. */\n    fullscreen?: boolean;\n    /** Prevent closing the dialog when clicking on the backdrop. */\n    disableBackdropClick?: boolean;\n    /** A Jss Object used to override or extend the styles applied to the component. */\n    classes?: HvDialogClasses;\n  };\n\nexport const HvDialog = ({\n  classes,\n  className,\n  id,\n  children,\n  open = false,\n  onClose,\n  firstFocusable,\n  buttonTitle = \"Close\",\n  fullscreen = false,\n  disableBackdropClick = false,\n  ...others\n}: HvDialogProps) => {\n  delete (others as any).fullScreen;\n\n  const { activeTheme, selectedMode, rootId } = useContext(HvThemeContext);\n\n  const focusableQueue = useRef<{\n    first?: HTMLElement;\n    last?: HTMLElement;\n  }>({ first: undefined, last: undefined });\n\n  // Because the `disableBackdropClick` property was deprecated in MUI5\n  // and we want to maintain that functionality to the user we're wrapping\n  // the onClose call here to make that check.\n  const wrappedClose = (\n    event,\n    bypassValidation: boolean = false,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => {\n    if (bypassValidation) {\n      onClose?.(event, reason);\n    } else if (!disableBackdropClick) {\n      onClose?.(event, reason);\n    }\n  };\n\n  const measuredRef = useCallback(\n    (node) => {\n      if (node) {\n        const focusableList = getFocusableList(node);\n        focusableQueue.current = {\n          first: focusableList[1],\n          last: focusableList[focusableList.length - 2],\n        };\n        if (isNil(firstFocusable)) focusableList[1].focus();\n        else {\n          const element =\n            firstFocusable && document.getElementById(firstFocusable);\n          if (element) element.focus();\n          else {\n            // eslint-disable-next-line no-console\n            console.warn(`firstFocusable element ${firstFocusable} not found.`);\n            focusableList[1].focus();\n          }\n        }\n      }\n    },\n    [firstFocusable]\n  );\n\n  const keyDownHandler = (event) => {\n    if (\n      isKeypress(event, keyboardCodes.Tab) &&\n      !isNil(event.target) &&\n      !isNil(focusableQueue)\n    ) {\n      if (event.shiftKey && event.target === focusableQueue.current.first) {\n        focusableQueue.current.last?.focus();\n        event.preventDefault();\n      }\n      if (!event.shiftKey && event.target === focusableQueue.current.last) {\n        focusableQueue.current.first?.focus();\n        event.preventDefault();\n      }\n    }\n    // Needed as this handler overrides the one in the material ui Modal.\n    else if (isKeypress(event, keyboardCodes.Esc)) {\n      if (\n        \"onEscapeKeyDown\" in others &&\n        typeof others.onEscapeKeyDown === \"function\"\n      ) {\n        others.onEscapeKeyDown(event);\n      }\n\n      if (!others.disableEscapeKeyDown) {\n        // Swallow the event, in case someone is listening for the escape key on the body.\n        event.stopPropagation();\n\n        wrappedClose(event, true, \"escapeKeyDown\");\n      }\n    }\n  };\n\n  const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\", null, null, null)\n    : closeButtonDisplay;\n\n  return (\n    <MuiDialog\n      container={document.getElementById(rootId || \"\") || document.body}\n      className={clsx(dialogClasses.root, classes?.root, className)}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => wrappedClose(event, undefined, reason)}\n      onKeyDown={keyDownHandler}\n      fullWidth\n      maxWidth={false}\n      slots={{\n        backdrop: (backdropProps) => (\n          <StyledBackdrop\n            open={open}\n            onClick={(event) => wrappedClose(event)}\n            $backColor={\n              activeTheme?.colors?.modes[selectedMode].atmo4 ||\n              theme.colors.atmo4\n            }\n            {...backdropProps}\n          />\n        ),\n      }}\n      classes={{ container: css({ position: \"relative\" }) }}\n      BackdropProps={{\n        classes: {\n          root: clsx(classes?.background, dialogClasses.background),\n        },\n      }}\n      PaperComponent={(paperProps) => (\n        <StyledPaper $fullscreen={fullscreen} {...paperProps} />\n      )}\n      PaperProps={{\n        classes: {\n          root: clsx(\n            css({ position: \"absolute\" }),\n            classes?.paper,\n            dialogClasses.paper,\n            fullscreen && clsx(dialogClasses.fullscreen, classes?.fullscreen)\n          ),\n        },\n      }}\n      aria-modal\n      {...others}\n    >\n      <StyledClose\n        id={setId(id, \"close\")}\n        className={clsx(dialogClasses.closeButton, classes?.closeButton)}\n        variant=\"secondaryGhost\"\n        onClick={(event) => wrappedClose(event, true, undefined)}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </StyledClose>\n      {children && typeof children === \"object\"\n        ? React.Children.map(\n            children,\n            (c: React.ReactNode) =>\n              c && React.cloneElement(c as React.ReactElement, { fullscreen })\n          )\n        : children}\n    </MuiDialog>\n  );\n};\n"],"names":["HvDialog","classes","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","fullScreen","activeTheme","selectedMode","rootId","useContext","HvThemeContext","focusableQueue","useRef","first","undefined","last","wrappedClose","event","bypassValidation","reason","measuredRef","useCallback","node","focusableList","getFocusableList","current","length","isNil","focus","element","document","getElementById","warn","keyDownHandler","isKeypress","keyboardCodes","Tab","target","shiftKey","preventDefault","Esc","onEscapeKeyDown","disableEscapeKeyDown","stopPropagation","closeButtonDisplay","CloseButtonTooltipWrapper","withTooltip","body","clsx","dialogClasses","root","backdrop","backdropProps","colors","modes","atmo4","theme","container","css","position","background","paperProps","paper","setId","closeButton","React","Children","map","c","cloneElement"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { isNil } from \"lodash\";\nimport { HvBaseProps } from \"../../types\";\nimport { StyledBackdrop, StyledClose, StyledPaper } from \"./Dialog.styles\";\nimport { getFocusableList } from \"utils/focusableElementFinder\";\nimport { isKeypress, keyboardCodes, setId } from \"utils\";\nimport { withTooltip } from \"hocs\";\nimport dialogClasses, { HvDialogClasses } from \"./dialogClasses\";\nimport { css } from \"utils/emotion\";\nimport { useTheme } from \"hooks\";\n\nexport type HvDialogProps = Omit<MuiDialogProps, \"fullScreen\" | \"classes\"> &\n  HvBaseProps & {\n    /** Id to be applied to the root node. */\n    id?: string;\n    /** Current state of the Dialog. */\n    open?: boolean;\n    /** Function executed on close. */\n    onClose?: (\n      event: React.SyntheticEvent,\n      reason?: \"escapeKeyDown\" | \"backdropClick\"\n    ) => void;\n    /** Element id that should be focus when the Dialog opens. */\n    firstFocusable?: string;\n    /** Title for the button close. */\n    buttonTitle?: string;\n    /** Set the dialog to fullscreen mode. */\n    fullscreen?: boolean;\n    /** Prevent closing the dialog when clicking on the backdrop. */\n    disableBackdropClick?: boolean;\n    /** A Jss Object used to override or extend the styles applied to the component. */\n    classes?: HvDialogClasses;\n  };\n\nexport const HvDialog = ({\n  classes,\n  className,\n  id,\n  children,\n  open = false,\n  onClose,\n  firstFocusable,\n  buttonTitle = \"Close\",\n  fullscreen = false,\n  disableBackdropClick = false,\n  ...others\n}: HvDialogProps) => {\n  delete (others as any).fullScreen;\n\n  const { activeTheme, selectedMode, rootId } = useTheme();\n\n  const focusableQueue = useRef<{\n    first?: HTMLElement;\n    last?: HTMLElement;\n  }>({ first: undefined, last: undefined });\n\n  // Because the `disableBackdropClick` property was deprecated in MUI5\n  // and we want to maintain that functionality to the user we're wrapping\n  // the onClose call here to make that check.\n  const wrappedClose = (\n    event,\n    bypassValidation: boolean = false,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => {\n    if (bypassValidation) {\n      onClose?.(event, reason);\n    } else if (!disableBackdropClick) {\n      onClose?.(event, reason);\n    }\n  };\n\n  const measuredRef = useCallback(\n    (node) => {\n      if (node) {\n        const focusableList = getFocusableList(node);\n        focusableQueue.current = {\n          first: focusableList[1],\n          last: focusableList[focusableList.length - 2],\n        };\n        if (isNil(firstFocusable)) focusableList[1].focus();\n        else {\n          const element =\n            firstFocusable && document.getElementById(firstFocusable);\n          if (element) element.focus();\n          else {\n            // eslint-disable-next-line no-console\n            console.warn(`firstFocusable element ${firstFocusable} not found.`);\n            focusableList[1].focus();\n          }\n        }\n      }\n    },\n    [firstFocusable]\n  );\n\n  const keyDownHandler = (event) => {\n    if (\n      isKeypress(event, keyboardCodes.Tab) &&\n      !isNil(event.target) &&\n      !isNil(focusableQueue)\n    ) {\n      if (event.shiftKey && event.target === focusableQueue.current.first) {\n        focusableQueue.current.last?.focus();\n        event.preventDefault();\n      }\n      if (!event.shiftKey && event.target === focusableQueue.current.last) {\n        focusableQueue.current.first?.focus();\n        event.preventDefault();\n      }\n    }\n    // Needed as this handler overrides the one in the material ui Modal.\n    else if (isKeypress(event, keyboardCodes.Esc)) {\n      if (\n        \"onEscapeKeyDown\" in others &&\n        typeof others.onEscapeKeyDown === \"function\"\n      ) {\n        others.onEscapeKeyDown(event);\n      }\n\n      if (!others.disableEscapeKeyDown) {\n        // Swallow the event, in case someone is listening for the escape key on the body.\n        event.stopPropagation();\n\n        wrappedClose(event, true, \"escapeKeyDown\");\n      }\n    }\n  };\n\n  const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\", null, null, null)\n    : closeButtonDisplay;\n\n  return (\n    <MuiDialog\n      container={document.getElementById(rootId || \"\") || document.body}\n      className={clsx(dialogClasses.root, classes?.root, className)}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => wrappedClose(event, undefined, reason)}\n      onKeyDown={keyDownHandler}\n      fullWidth\n      maxWidth={false}\n      slots={{\n        backdrop: (backdropProps) => (\n          <StyledBackdrop\n            open={open}\n            onClick={(event) => wrappedClose(event)}\n            $backColor={\n              activeTheme?.colors?.modes[selectedMode].atmo4 ||\n              theme.colors.atmo4\n            }\n            {...backdropProps}\n          />\n        ),\n      }}\n      classes={{ container: css({ position: \"relative\" }) }}\n      BackdropProps={{\n        classes: {\n          root: clsx(classes?.background, dialogClasses.background),\n        },\n      }}\n      PaperComponent={(paperProps) => (\n        <StyledPaper $fullscreen={fullscreen} {...paperProps} />\n      )}\n      PaperProps={{\n        classes: {\n          root: clsx(\n            css({ position: \"absolute\" }),\n            classes?.paper,\n            dialogClasses.paper,\n            fullscreen && clsx(dialogClasses.fullscreen, classes?.fullscreen)\n          ),\n        },\n      }}\n      aria-modal\n      {...others}\n    >\n      <StyledClose\n        id={setId(id, \"close\")}\n        className={clsx(dialogClasses.closeButton, classes?.closeButton)}\n        variant=\"secondaryGhost\"\n        onClick={(event) => wrappedClose(event, true, undefined)}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </StyledClose>\n      {children && typeof children === \"object\"\n        ? React.Children.map(\n            children,\n            (c: React.ReactNode) =>\n              c && React.cloneElement(c as React.ReactElement, { fullscreen })\n          )\n        : children}\n    </MuiDialog>\n  );\n};\n"],"names":["HvDialog","classes","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","fullScreen","activeTheme","selectedMode","rootId","useTheme","focusableQueue","useRef","first","undefined","last","wrappedClose","event","bypassValidation","reason","measuredRef","useCallback","node","focusableList","getFocusableList","current","length","isNil","focus","element","document","getElementById","warn","keyDownHandler","isKeypress","keyboardCodes","Tab","target","shiftKey","preventDefault","Esc","onEscapeKeyDown","disableEscapeKeyDown","stopPropagation","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","MuiDialog","container","body","clsx","dialogClasses","root","ref","onKeyDown","fullWidth","maxWidth","slots","backdrop","backdropProps","StyledBackdrop","onClick","$backColor","colors","modes","atmo4","theme","css","position","BackdropProps","background","PaperComponent","paperProps","StyledPaper","$fullscreen","PaperProps","paper","StyledClose","setId","closeButton","variant","React","Children","map","c","cloneElement"],"mappings":"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"}

package/dist/esm/components/Dialog/Title/Title.js

@@ -1,10 +1,9 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import clsx from "clsx";
 import { StyledTitle, StyledMessageContainer, StyledTextWithIcon } from "./Title.styles.js";
 import dialogTitleClasses from "./titleClasses.js";
-import { useContext } from "react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import iconVariant from "../../../utils/iconVariant.js";
-import { HvThemeContext } from "../../../providers/ThemeProvider.js";
+import { useTheme } from "../../../hooks/useTheme.js";
 import { HvTypography } from "../../Typography/Typography.js";
 const HvTitle = ({
   classes,
@@ -17,20 +16,29 @@ const HvTitle = ({
 }) => {
   const {
     activeTheme
-  } = useContext(HvThemeContext);
+  } = useTheme();
   const isString = typeof children === "string";
   const {
     fullscreen
   } = others;
   delete others.fullscreen;
   const icon = customIcon || showIcon && iconVariant(variant, "", "");
-  return /* @__PURE__ */ jsx(StyledTitle, { className: clsx(dialogTitleClasses.root, classes == null ? void 0 : classes.root, className, fullscreen && clsx(dialogTitleClasses.fullscreen, classes == null ? void 0 : classes.fullscreen)), $fullscreen: fullscreen, ...others, children: /* @__PURE__ */ jsxs(StyledMessageContainer, { className: clsx(dialogTitleClasses.messageContainer, classes == null ? void 0 : classes.messageContainer), children: [
-    icon,
-    /* @__PURE__ */ jsxs(StyledTextWithIcon, { className: !!icon ? clsx(dialogTitleClasses.textWithIcon, classes == null ? void 0 : classes.textWithIcon) : void 0, $hasIcon: !!icon, children: [
-      !isString && children,
-      isString && /* @__PURE__ */ jsx(HvTypography, { variant: activeTheme == null ? void 0 : activeTheme.dialog.titleVariant, children })
-    ] })
-  ] }) });
+  return /* @__PURE__ */ jsx(StyledTitle, {
+    className: clsx(dialogTitleClasses.root, classes == null ? void 0 : classes.root, className, fullscreen && clsx(dialogTitleClasses.fullscreen, classes == null ? void 0 : classes.fullscreen)),
+    $fullscreen: fullscreen,
+    ...others,
+    children: /* @__PURE__ */ jsxs(StyledMessageContainer, {
+      className: clsx(dialogTitleClasses.messageContainer, classes == null ? void 0 : classes.messageContainer),
+      children: [icon, /* @__PURE__ */ jsxs(StyledTextWithIcon, {
+        className: !!icon ? clsx(dialogTitleClasses.textWithIcon, classes == null ? void 0 : classes.textWithIcon) : void 0,
+        $hasIcon: !!icon,
+        children: [!isString && children, isString && /* @__PURE__ */ jsx(HvTypography, {
+          variant: activeTheme == null ? void 0 : activeTheme.dialog.titleVariant,
+          children
+        })]
+      })]
+    })
+  });
 };
 export {
   HvTitle

package/dist/esm/components/Dialog/Title/Title.js.map

@@ -1 +1 @@
-{"version":3,"file":"Title.js","sources":["../../../../../src/components/Dialog/Title/Title.tsx"],"sourcesContent":["import { DialogTitleProps as MuiDialogTitleProps } from \"@mui/material/DialogTitle\";\nimport clsx from \"clsx\";\nimport { HvTypography } from \"components\";\nimport { HvBaseProps } from \"../../../types\";\nimport { iconVariant } from \"utils\";\nimport {\n  StyledTitle,\n  StyledMessageContainer,\n  StyledTextWithIcon,\n} from \"./Title.styles\";\nimport dialogTitleClasses, { HvDialogTitleClasses } from \"./titleClasses\";\nimport { useContext } from \"react\";\nimport { HvThemeContext } from \"providers\";\n\nexport type HvDialogTitleVariant =\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"default\";\n\nexport type HvTitleProps = Omit<MuiDialogTitleProps, \"variant\" | \"classes\"> &\n  HvBaseProps & {\n    /** Variant of the Dialog. */\n    variant?: HvDialogTitleVariant;\n    /** Controls if the associated icon to the variant should be shown. */\n    showIcon?: boolean;\n    /** Custom icon to replace the variant default. */\n    customIcon?: React.ReactNode;\n    classes?: HvDialogTitleClasses;\n  };\n\nexport const HvTitle = ({\n  classes,\n  className,\n  children,\n  variant = \"default\",\n  showIcon = true,\n  customIcon = null,\n  ...others\n}: HvTitleProps) => {\n  const { activeTheme } = useContext(HvThemeContext);\n\n  const isString = typeof children === \"string\";\n\n  const { fullscreen } = others as any;\n  delete (others as any).fullscreen;\n\n  const icon = customIcon || (showIcon && iconVariant(variant, \"\", \"\"));\n\n  return (\n    <StyledTitle\n      className={clsx(\n        dialogTitleClasses.root,\n        classes?.root,\n        className,\n        fullscreen && clsx(dialogTitleClasses.fullscreen, classes?.fullscreen)\n      )}\n      $fullscreen={fullscreen}\n      {...others}\n    >\n      <StyledMessageContainer\n        className={clsx(\n          dialogTitleClasses.messageContainer,\n          classes?.messageContainer\n        )}\n      >\n        {icon}\n        <StyledTextWithIcon\n          className={\n            !!icon\n              ? clsx(dialogTitleClasses.textWithIcon, classes?.textWithIcon)\n              : undefined\n          }\n          $hasIcon={!!icon}\n        >\n          {!isString && children}\n          {isString && (\n            <HvTypography variant={activeTheme?.dialog.titleVariant}>\n              {children}\n            </HvTypography>\n          )}\n        </StyledTextWithIcon>\n      </StyledMessageContainer>\n    </StyledTitle>\n  );\n};\n"],"names":["HvTitle","classes","className","children","variant","showIcon","customIcon","others","activeTheme","useContext","HvThemeContext","isString","fullscreen","icon","iconVariant","clsx","dialogTitleClasses","root","messageContainer","textWithIcon","undefined","dialog","titleVariant"],"mappings":";;;;;;;;AAgCO,MAAMA,UAAUA,CAAC;AAAA,EACtBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,UAAU;AAAA,EACVC,WAAW;AAAA,EACXC,aAAa;AAAA,KACVC;AACS,MAAM;AACZ,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAgBC,WAAWC,cAAc;AAE3CC,QAAAA,WAAW,OAAOR,aAAa;AAE/B,QAAA;AAAA,IAAES;AAAAA,EAAeL,IAAAA;AACvB,SAAQA,OAAeK;AAEvB,QAAMC,OAAOP,cAAeD,YAAYS,YAAYV,SAAS,IAAI,EAAE;AAEnE,SACG,oBAAA,aAAA,EACC,WAAWW,KACTC,mBAAmBC,MACnBhB,mCAASgB,MACTf,WACAU,cAAcG,KAAKC,mBAAmBJ,YAAYX,mCAASW,UAAU,CAAC,GAExE,aAAaA,YACb,GAAIL,QAEJ,UAAA,qBAAC,wBACC,EAAA,WAAWQ,KACTC,mBAAmBE,kBACnBjB,mCAASiB,gBAAgB,GAG1BL,UAAAA;AAAAA,IAAAA;AAAAA,yBACA,oBACC,EAAA,WACE,CAAC,CAACA,OACEE,KAAKC,mBAAmBG,cAAclB,mCAASkB,YAAY,IAC3DC,QAEN,UAAU,CAAC,CAACP,MAEX,UAAA;AAAA,MAAA,CAACF,YAAYR;AAAAA,MACbQ,YACE,oBAAA,cAAA,EAAa,SAASH,2CAAaa,OAAOC,cACxCnB,UACH;AAAA,IAAA,GAEJ;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"Title.js","sources":["../../../../../src/components/Dialog/Title/Title.tsx"],"sourcesContent":["import { DialogTitleProps as MuiDialogTitleProps } from \"@mui/material/DialogTitle\";\nimport clsx from \"clsx\";\nimport { HvTypography } from \"components\";\nimport { HvBaseProps } from \"../../../types\";\nimport { iconVariant } from \"utils\";\nimport {\n  StyledTitle,\n  StyledMessageContainer,\n  StyledTextWithIcon,\n} from \"./Title.styles\";\nimport dialogTitleClasses, { HvDialogTitleClasses } from \"./titleClasses\";\nimport { useTheme } from \"hooks\";\n\nexport type HvDialogTitleVariant =\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"default\";\n\nexport type HvTitleProps = Omit<MuiDialogTitleProps, \"variant\" | \"classes\"> &\n  HvBaseProps & {\n    /** Variant of the Dialog. */\n    variant?: HvDialogTitleVariant;\n    /** Controls if the associated icon to the variant should be shown. */\n    showIcon?: boolean;\n    /** Custom icon to replace the variant default. */\n    customIcon?: React.ReactNode;\n    classes?: HvDialogTitleClasses;\n  };\n\nexport const HvTitle = ({\n  classes,\n  className,\n  children,\n  variant = \"default\",\n  showIcon = true,\n  customIcon = null,\n  ...others\n}: HvTitleProps) => {\n  const { activeTheme } = useTheme();\n\n  const isString = typeof children === \"string\";\n\n  const { fullscreen } = others as any;\n  delete (others as any).fullscreen;\n\n  const icon = customIcon || (showIcon && iconVariant(variant, \"\", \"\"));\n\n  return (\n    <StyledTitle\n      className={clsx(\n        dialogTitleClasses.root,\n        classes?.root,\n        className,\n        fullscreen && clsx(dialogTitleClasses.fullscreen, classes?.fullscreen)\n      )}\n      $fullscreen={fullscreen}\n      {...others}\n    >\n      <StyledMessageContainer\n        className={clsx(\n          dialogTitleClasses.messageContainer,\n          classes?.messageContainer\n        )}\n      >\n        {icon}\n        <StyledTextWithIcon\n          className={\n            !!icon\n              ? clsx(dialogTitleClasses.textWithIcon, classes?.textWithIcon)\n              : undefined\n          }\n          $hasIcon={!!icon}\n        >\n          {!isString && children}\n          {isString && (\n            <HvTypography variant={activeTheme?.dialog.titleVariant}>\n              {children}\n            </HvTypography>\n          )}\n        </StyledTextWithIcon>\n      </StyledMessageContainer>\n    </StyledTitle>\n  );\n};\n"],"names":["HvTitle","classes","className","children","variant","showIcon","customIcon","others","activeTheme","useTheme","isString","fullscreen","icon","iconVariant","StyledTitle","clsx","dialogTitleClasses","root","$fullscreen","StyledMessageContainer","messageContainer","_jsxs","StyledTextWithIcon","textWithIcon","undefined","$hasIcon","HvTypography","dialog","titleVariant"],"mappings":";;;;;;;AA+BO,MAAMA,UAAUA,CAAC;AAAA,EACtBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,UAAU;AAAA,EACVC,WAAW;AAAA,EACXC,aAAa;AAAA,EACb,GAAGC;AACS,MAAM;AACZ,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAU;AAE5BC,QAAAA,WAAW,OAAOP,aAAa;AAE/B,QAAA;AAAA,IAAEQ;AAAAA,EAAeJ,IAAAA;AACvB,SAAQA,OAAeI;AAEvB,QAAMC,OAAON,cAAeD,YAAYQ,YAAYT,SAAS,IAAI,EAAE;AAEnE,6BACGU,aAAW;AAAA,IACVZ,WAAWa,KACTC,mBAAmBC,MACnBhB,mCAASgB,MACTf,WACAS,cAAcI,KAAKC,mBAAmBL,YAAYV,mCAASU,UAAU,CAAC;AAAA,IAExEO,aAAaP;AAAAA,IAAW,GACpBJ;AAAAA,IAAMJ,+BAETgB,wBAAsB;AAAA,MACrBjB,WAAWa,KACTC,mBAAmBI,kBACnBnB,mCAASmB,gBAAgB;AAAA,MACzBjB,UAEDS,CAAAA,MACDS,qBAACC,oBAAkB;AAAA,QACjBpB,WACE,CAAC,CAACU,OACEG,KAAKC,mBAAmBO,cAActB,mCAASsB,YAAY,IAC3DC;AAAAA,QAENC,UAAU,CAAC,CAACb;AAAAA,QAAKT,UAAA,CAEhB,CAACO,YAAYP,UACbO,gCACEgB,cAAY;AAAA,UAACtB,SAASI,2CAAamB,OAAOC;AAAAA,UAAazB;AAAAA,QAAAA,CAGzD,CAAA;AAAA,MAAA,CACkB,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAEX;AAElB;"}

package/dist/esm/components/Dialog/Title/Title.styles.js

@@ -57,6 +57,7 @@ const StyledTextWithIcon = /* @__PURE__ */ _styled("div", process.env.NODE_ENV =
 }) => ({
   ...$hasIcon && {
     marginLeft: theme.space.xs,
+    // 32px is the icon width
     marginRight: `calc(32px + ${theme.space.xs})`
   }
 }), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRGlhbG9nL1RpdGxlL1RpdGxlLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUJrQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0RpYWxvZy9UaXRsZS9UaXRsZS5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgRGlhbG9nVGl0bGUgZnJvbSBcIkBtdWkvbWF0ZXJpYWwvRGlhbG9nVGl0bGVcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwidXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVGl0bGUgPSBzdHlsZWQoXG4gIERpYWxvZ1RpdGxlLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRmdWxsc2NyZWVuIH06IHsgJGZ1bGxzY3JlZW46IGJvb2xlYW4gfSkgPT4gKHtcbiAgcGFkZGluZzogdGhlbWUuc3BhY2Uuc20sXG4gIG1hcmdpbjogMCxcbiAgLi4uKCEkZnVsbHNjcmVlbiAmJiB7XG4gICAgZmxleDogMSxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRNZXNzYWdlQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFRleHRXaXRoSWNvbiA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkaGFzSWNvbiB9OiB7ICRoYXNJY29uOiBib29sZWFuIH0pID0+ICh7XG4gIC4uLigkaGFzSWNvbiAmJiB7XG4gICAgbWFyZ2luTGVmdDogdGhlbWUuc3BhY2UueHMsXG4gICAgLy8gMzJweCBpcyB0aGUgaWNvbiB3aWR0aFxuICAgIG1hcmdpblJpZ2h0OiBgY2FsYygzMnB4ICsgJHt0aGVtZS5zcGFjZS54c30pYCxcbiAgfSksXG59KSk7XG4iXX0= */");

package/dist/esm/components/Dialog/Title/Title.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Title.styles.js","sources":["../../../../../src/components/Dialog/Title/Title.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport DialogTitle from \"@mui/material/DialogTitle\";\nimport { transientOptions } from \"utils/transientOptions\";\n\nexport const StyledTitle = styled(\n  DialogTitle,\n  transientOptions\n)(({ $fullscreen }: { $fullscreen: boolean }) => ({\n  padding: theme.space.sm,\n  margin: 0,\n  ...(!$fullscreen && {\n    flex: 1,\n  }),\n}));\n\nexport const StyledMessageContainer = styled(\"div\")({\n  display: \"flex\",\n  alignItems: \"center\",\n});\n\nexport const StyledTextWithIcon = styled(\n  \"div\",\n  transientOptions\n)(({ $hasIcon }: { $hasIcon: boolean }) => ({\n  ...($hasIcon && {\n    marginLeft: theme.space.xs,\n    // 32px is the icon width\n    marginRight: `calc(32px + ${theme.space.xs})`,\n  }),\n}));\n"],"names":["StyledTitle","DialogTitle","process","env","NODE_ENV","_extends","target","transientOptions","label","$fullscreen","padding","theme","space","sm","margin","flex","StyledMessageContainer","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledTextWithIcon","$hasIcon","marginLeft","xs","marginRight"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAKaA,MAAAA,sCACXC,aAAWC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACXC,gBAAgB,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,gBAAgB,CACjB,EAAC,CAAC;AAAA,EAAEE;AAAsC,OAAO;AAAA,EAChDC,SAASC,MAAMC,MAAMC;AAAAA,EACrBC,QAAQ;AAAA,EACR,GAAI,CAACL,eAAe;AAAA,IAClBM,MAAM;AAAA,EACR;AACF,IAAEb,QAAAC,IAAAC,aAAC,eAAA,KAAA,qiDAAA;AAEI,MAAMY,yBAAgC,wBAAA,OAAKd,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAE,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAE,OAAA;AAAA,CAAA,EAACN,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAa,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAGjD;AAEWC,MAAAA,6CACX,OAAKpB,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACLC,gBAAgB,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,gBAAgB,CACjB,EAAC,CAAC;AAAA,EAAEgB;AAAgC,OAAO;AAAA,EAC1C,GAAIA,YAAY;AAAA,IACdC,YAAYb,MAAMC,MAAMa;AAAAA,IAExBC,aAAc,eAAcf,MAAMC,MAAMa;AAAAA,EAC1C;AACF,IAAEvB,QAAAC,IAAAC,aAAC,eAAA,KAAA,qiDAAA;"}
+{"version":3,"file":"Title.styles.js","sources":["../../../../../src/components/Dialog/Title/Title.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport DialogTitle from \"@mui/material/DialogTitle\";\nimport { transientOptions } from \"utils/transientOptions\";\n\nexport const StyledTitle = styled(\n  DialogTitle,\n  transientOptions\n)(({ $fullscreen }: { $fullscreen: boolean }) => ({\n  padding: theme.space.sm,\n  margin: 0,\n  ...(!$fullscreen && {\n    flex: 1,\n  }),\n}));\n\nexport const StyledMessageContainer = styled(\"div\")({\n  display: \"flex\",\n  alignItems: \"center\",\n});\n\nexport const StyledTextWithIcon = styled(\n  \"div\",\n  transientOptions\n)(({ $hasIcon }: { $hasIcon: boolean }) => ({\n  ...($hasIcon && {\n    marginLeft: theme.space.xs,\n    // 32px is the icon width\n    marginRight: `calc(32px + ${theme.space.xs})`,\n  }),\n}));\n"],"names":["StyledTitle","DialogTitle","process","env","NODE_ENV","_extends","target","transientOptions","label","$fullscreen","padding","theme","space","sm","margin","flex","StyledMessageContainer","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledTextWithIcon","$hasIcon","marginLeft","xs","marginRight"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAKaA,MAAAA,sCACXC,aAAWC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACXC,gBAAgB,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,gBAAgB,CACjB,EAAC,CAAC;AAAA,EAAEE;AAAsC,OAAO;AAAA,EAChDC,SAASC,MAAMC,MAAMC;AAAAA,EACrBC,QAAQ;AAAA,EACR,GAAI,CAACL,eAAe;AAAA,IAClBM,MAAM;AAAA,EACR;AACF,IAAEb,QAAAC,IAAAC,aAAC,eAAA,KAAA,qiDAAA;AAEI,MAAMY,yBAAgC,wBAAA,OAAKd,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAE,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAE,OAAA;AAAA,CAAA,EAACN,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAa,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAGjD;AAEWC,MAAAA,6CACX,OAAKpB,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACLC,gBAAgB,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,gBAAgB,CACjB,EAAC,CAAC;AAAA,EAAEgB;AAAgC,OAAO;AAAA,EAC1C,GAAIA,YAAY;AAAA,IACdC,YAAYb,MAAMC,MAAMa;AAAAA;AAAAA,IAExBC,aAAc,eAAcf,MAAMC,MAAMa;AAAAA,EAC1C;AACF,IAAEvB,QAAAC,IAAAC,aAAC,eAAA,KAAA,qiDAAA;"}

package/dist/esm/components/DotPagination/DotPagination.js

@@ -1,14 +1,20 @@
-import { jsx } from "@emotion/react/jsx-runtime";
 import clsx from "clsx";
 import dotPaginationClasses from "./dotPaginationClasses.js";
 import { StyledRadioGroup, StyledRadio, StyledOtherStep, StyledCurrentStep } from "./DotPagination.styles.js";
 import { cloneElement } from "react";
+import { jsx } from "@emotion/react/jsx-runtime";
 const getSelectorIcons = (radioIcon, radioCheckedIcon, classes) => {
   return {
-    radio: cloneElement(radioIcon || /* @__PURE__ */ jsx(StyledOtherStep, { width: 8, height: 8 }), {
+    radio: cloneElement(radioIcon || /* @__PURE__ */ jsx(StyledOtherStep, {
+      width: 8,
+      height: 8
+    }), {
       className: clsx(classes == null ? void 0 : classes.icon, dotPaginationClasses.icon)
     }),
-    radioChecked: cloneElement(radioCheckedIcon || /* @__PURE__ */ jsx(StyledCurrentStep, { width: 8, height: 8 }), {
+    radioChecked: cloneElement(radioCheckedIcon || /* @__PURE__ */ jsx(StyledCurrentStep, {
+      width: 8,
+      height: 8
+    }), {
       className: clsx(classes == null ? void 0 : classes.icon, dotPaginationClasses.icon)
     })
   };
@@ -26,12 +32,26 @@ const HvDotPagination = ({
 }) => {
   const range = (n) => Array.from(Array(n), (_, i) => i);
   const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);
-  return /* @__PURE__ */ jsx(StyledRadioGroup, { className: clsx(className, classes == null ? void 0 : classes.root, dotPaginationClasses.root), classes: {
-    horizontal: clsx(classes == null ? void 0 : classes.horizontal, dotPaginationClasses.horizontal)
-  }, orientation: "horizontal", ...others, children: range(pages).map((i) => /* @__PURE__ */ jsx(StyledRadio, { classes: {
-    radio: clsx(classes == null ? void 0 : classes.radio, dotPaginationClasses.radio),
-    root: clsx(classes == null ? void 0 : classes.radioRoot, dotPaginationClasses.radioRoot)
-  }, value: i, checked: page === i, onChange: (event) => onPageChange == null ? void 0 : onPageChange(event, i), icon: icons.radio, checkedIcon: icons.radioChecked, "aria-label": getItemAriaLabel == null ? void 0 : getItemAriaLabel(i) }, i)) });
+  return /* @__PURE__ */ jsx(StyledRadioGroup, {
+    className: clsx(className, classes == null ? void 0 : classes.root, dotPaginationClasses.root),
+    classes: {
+      horizontal: clsx(classes == null ? void 0 : classes.horizontal, dotPaginationClasses.horizontal)
+    },
+    orientation: "horizontal",
+    ...others,
+    children: range(pages).map((i) => /* @__PURE__ */ jsx(StyledRadio, {
+      classes: {
+        radio: clsx(classes == null ? void 0 : classes.radio, dotPaginationClasses.radio),
+        root: clsx(classes == null ? void 0 : classes.radioRoot, dotPaginationClasses.radioRoot)
+      },
+      value: i,
+      checked: page === i,
+      onChange: (event) => onPageChange == null ? void 0 : onPageChange(event, i),
+      icon: icons.radio,
+      checkedIcon: icons.radioChecked,
+      "aria-label": getItemAriaLabel == null ? void 0 : getItemAriaLabel(i)
+    }, i))
+  });
 };
 export {
   HvDotPagination

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

@@ -1 +1 @@
-{"version":3,"file":"DotPagination.js","sources":["../../../../src/components/DotPagination/DotPagination.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvRadioGroupProps } from \"../RadioGroup\";\nimport dotPaginationClasses, {\n  HvDotPaginationClasses,\n} from \"./dotPaginationClasses\";\nimport {\n  StyledCurrentStep,\n  StyledOtherStep,\n  StyledRadio,\n  StyledRadioGroup,\n} from \"./DotPagination.styles\";\nimport { cloneElement } from \"react\";\n\nexport type HvDotPaginationProps = Omit<HvRadioGroupProps, \"classes\"> & {\n  /**\n   * Icon to override the default one used for the unselected state.\n   *\n   * The default icon is `OtherStep`.\n   */\n  unselectedIcon?: React.ReactElement;\n  /**\n   * Icon to override the default one used for the selected state.\n   *\n   * The default icon is `CurrentStep`.\n   */\n  selectedIcon?: React.ReactElement;\n  /**\n   *  The number of pages the component has.\n   */\n  pages?: number;\n  /**\n   * The currently selected page.\n   */\n  page?: number;\n  /**\n   * The callback fired when the page value changes.\n   */\n  onPageChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    page: number\n  ) => void;\n  /**\n   * The callback fired to get the page aria label.\n   */\n  getItemAriaLabel?: (page: number) => string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDotPaginationClasses;\n};\n\nconst getSelectorIcons = (\n  radioIcon?: React.ReactElement,\n  radioCheckedIcon?: React.ReactElement,\n  classes?: HvDotPaginationClasses\n) => {\n  return {\n    radio: cloneElement(radioIcon || <StyledOtherStep width={8} height={8} />, {\n      className: clsx(classes?.icon, dotPaginationClasses.icon),\n    }),\n    radioChecked: cloneElement(\n      radioCheckedIcon || <StyledCurrentStep width={8} height={8} />,\n      {\n        className: clsx(classes?.icon, dotPaginationClasses.icon),\n      }\n    ),\n  };\n};\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.\n * This component uses Radio Buttons to represent each page.\n */\nexport const HvDotPagination = ({\n  className,\n  classes,\n  unselectedIcon,\n  selectedIcon,\n  pages = 1,\n  page = 0,\n  onPageChange,\n  getItemAriaLabel,\n  ...others\n}: HvDotPaginationProps) => {\n  const range = (n: number) => Array.from(Array(n), (_, i) => i);\n\n  const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);\n\n  return (\n    <StyledRadioGroup\n      className={clsx(className, classes?.root, dotPaginationClasses.root)}\n      classes={{\n        horizontal: clsx(classes?.horizontal, dotPaginationClasses.horizontal),\n      }}\n      orientation=\"horizontal\"\n      {...others}\n    >\n      {range(pages).map((i) => (\n        <StyledRadio\n          classes={{\n            radio: clsx(classes?.radio, dotPaginationClasses.radio),\n            root: clsx(classes?.radioRoot, dotPaginationClasses.radioRoot),\n          }}\n          key={i}\n          value={i}\n          checked={page === i}\n          onChange={(event) => onPageChange?.(event, i)}\n          icon={icons.radio}\n          checkedIcon={icons.radioChecked}\n          aria-label={getItemAriaLabel?.(i)}\n        />\n      ))}\n    </StyledRadioGroup>\n  );\n};\n"],"names":["getSelectorIcons","radioIcon","radioCheckedIcon","classes","radio","cloneElement","className","clsx","icon","dotPaginationClasses","radioChecked","HvDotPagination","unselectedIcon","selectedIcon","pages","page","onPageChange","getItemAriaLabel","others","range","n","Array","from","_","i","icons","root","horizontal","map","radioRoot","event"],"mappings":";;;;;AAmDA,MAAMA,mBAAmBA,CACvBC,WACAC,kBACAC,YACG;AACI,SAAA;AAAA,IACLC,OAAOC,aAAaJ,aAAa,oBAAC,mBAAgB,OAAO,GAAG,QAAQ,EAAA,IAAO;AAAA,MACzEK,WAAWC,KAAKJ,mCAASK,MAAMC,qBAAqBD,IAAI;AAAA,IAAA,CACzD;AAAA,IACDE,cAAcL,aACZH,oBAAoB,oBAAC,qBAAkB,OAAO,GAAG,QAAQ,EAAA,IACzD;AAAA,MACEI,WAAWC,KAAKJ,mCAASK,MAAMC,qBAAqBD,IAAI;AAAA,IAAA,CACzD;AAAA,EAAA;AAGP;AAMO,MAAMG,kBAAkBA,CAAC;AAAA,EAC9BL;AAAAA,EACAH;AAAAA,EACAS;AAAAA,EACAC;AAAAA,EACAC,QAAQ;AAAA,EACRC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,KACGC;AACiB,MAAM;AACpBC,QAAAA,QAAQA,CAACC,MAAcC,MAAMC,KAAKD,MAAMD,CAAC,GAAG,CAACG,GAAGC,MAAMA,CAAC;AAE7D,QAAMC,QAAQzB,iBAAiBY,gBAAgBC,cAAcV,OAAO;AAGlE,SAAA,oBAAC,kBACC,EAAA,WAAWI,KAAKD,WAAWH,mCAASuB,MAAMjB,qBAAqBiB,IAAI,GACnE,SAAS;AAAA,IACPC,YAAYpB,KAAKJ,mCAASwB,YAAYlB,qBAAqBkB,UAAU;AAAA,EAEvE,GAAA,aAAY,cACZ,GAAIT,QAEHC,UAAAA,MAAML,KAAK,EAAEc,IAAKJ,CAAAA,MAChB,oBAAA,aAAA,EACC,SAAS;AAAA,IACPpB,OAAOG,KAAKJ,mCAASC,OAAOK,qBAAqBL,KAAK;AAAA,IACtDsB,MAAMnB,KAAKJ,mCAAS0B,WAAWpB,qBAAqBoB,SAAS;AAAA,EAC/D,GAEA,OAAOL,GACP,SAAST,SAASS,GAClB,UAAWM,CAAAA,UAAUd,6CAAec,OAAON,IAC3C,MAAMC,MAAMrB,OACZ,aAAaqB,MAAMf,cACnB,cAAYO,qDAAmBO,GAAC,GAN3BA,CAM6B,CAErC,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"DotPagination.js","sources":["../../../../src/components/DotPagination/DotPagination.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvRadioGroupProps } from \"../RadioGroup\";\nimport dotPaginationClasses, {\n  HvDotPaginationClasses,\n} from \"./dotPaginationClasses\";\nimport {\n  StyledCurrentStep,\n  StyledOtherStep,\n  StyledRadio,\n  StyledRadioGroup,\n} from \"./DotPagination.styles\";\nimport { cloneElement } from \"react\";\n\nexport type HvDotPaginationProps = Omit<HvRadioGroupProps, \"classes\"> & {\n  /**\n   * Icon to override the default one used for the unselected state.\n   *\n   * The default icon is `OtherStep`.\n   */\n  unselectedIcon?: React.ReactElement;\n  /**\n   * Icon to override the default one used for the selected state.\n   *\n   * The default icon is `CurrentStep`.\n   */\n  selectedIcon?: React.ReactElement;\n  /**\n   *  The number of pages the component has.\n   */\n  pages?: number;\n  /**\n   * The currently selected page.\n   */\n  page?: number;\n  /**\n   * The callback fired when the page value changes.\n   */\n  onPageChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    page: number\n  ) => void;\n  /**\n   * The callback fired to get the page aria label.\n   */\n  getItemAriaLabel?: (page: number) => string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDotPaginationClasses;\n};\n\nconst getSelectorIcons = (\n  radioIcon?: React.ReactElement,\n  radioCheckedIcon?: React.ReactElement,\n  classes?: HvDotPaginationClasses\n) => {\n  return {\n    radio: cloneElement(radioIcon || <StyledOtherStep width={8} height={8} />, {\n      className: clsx(classes?.icon, dotPaginationClasses.icon),\n    }),\n    radioChecked: cloneElement(\n      radioCheckedIcon || <StyledCurrentStep width={8} height={8} />,\n      {\n        className: clsx(classes?.icon, dotPaginationClasses.icon),\n      }\n    ),\n  };\n};\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.\n * This component uses Radio Buttons to represent each page.\n */\nexport const HvDotPagination = ({\n  className,\n  classes,\n  unselectedIcon,\n  selectedIcon,\n  pages = 1,\n  page = 0,\n  onPageChange,\n  getItemAriaLabel,\n  ...others\n}: HvDotPaginationProps) => {\n  const range = (n: number) => Array.from(Array(n), (_, i) => i);\n\n  const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);\n\n  return (\n    <StyledRadioGroup\n      className={clsx(className, classes?.root, dotPaginationClasses.root)}\n      classes={{\n        horizontal: clsx(classes?.horizontal, dotPaginationClasses.horizontal),\n      }}\n      orientation=\"horizontal\"\n      {...others}\n    >\n      {range(pages).map((i) => (\n        <StyledRadio\n          classes={{\n            radio: clsx(classes?.radio, dotPaginationClasses.radio),\n            root: clsx(classes?.radioRoot, dotPaginationClasses.radioRoot),\n          }}\n          key={i}\n          value={i}\n          checked={page === i}\n          onChange={(event) => onPageChange?.(event, i)}\n          icon={icons.radio}\n          checkedIcon={icons.radioChecked}\n          aria-label={getItemAriaLabel?.(i)}\n        />\n      ))}\n    </StyledRadioGroup>\n  );\n};\n"],"names":["getSelectorIcons","radioIcon","radioCheckedIcon","classes","radio","cloneElement","_jsx","StyledOtherStep","width","height","className","clsx","icon","dotPaginationClasses","radioChecked","StyledCurrentStep","HvDotPagination","unselectedIcon","selectedIcon","pages","page","onPageChange","getItemAriaLabel","others","range","n","Array","from","_","i","icons","StyledRadioGroup","root","horizontal","orientation","children","map","StyledRadio","radioRoot","value","checked","onChange","event","checkedIcon"],"mappings":";;;;;AAmDA,MAAMA,mBAAmBA,CACvBC,WACAC,kBACAC,YACG;AACI,SAAA;AAAA,IACLC,OAAOC,aAAaJ,aAAaK,oBAACC,iBAAe;AAAA,MAACC,OAAO;AAAA,MAAGC,QAAQ;AAAA,IAAA,CAAE,GAAK;AAAA,MACzEC,WAAWC,KAAKR,mCAASS,MAAMC,qBAAqBD,IAAI;AAAA,IAAA,CACzD;AAAA,IACDE,cAAcT,aACZH,oBAAoBI,oBAACS,mBAAiB;AAAA,MAACP,OAAO;AAAA,MAAGC,QAAQ;AAAA,IAAA,CAAE,GAC3D;AAAA,MACEC,WAAWC,KAAKR,mCAASS,MAAMC,qBAAqBD,IAAI;AAAA,IAAA,CACzD;AAAA,EAAA;AAGP;AAMO,MAAMI,kBAAkBA,CAAC;AAAA,EAC9BN;AAAAA,EACAP;AAAAA,EACAc;AAAAA,EACAC;AAAAA,EACAC,QAAQ;AAAA,EACRC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiB,MAAM;AACpBC,QAAAA,QAAQA,CAACC,MAAcC,MAAMC,KAAKD,MAAMD,CAAC,GAAG,CAACG,GAAGC,MAAMA,CAAC;AAE7D,QAAMC,QAAQ9B,iBAAiBiB,gBAAgBC,cAAcf,OAAO;AAEpE,6BACG4B,kBAAgB;AAAA,IACfrB,WAAWC,KAAKD,WAAWP,mCAAS6B,MAAMnB,qBAAqBmB,IAAI;AAAA,IACnE7B,SAAS;AAAA,MACP8B,YAAYtB,KAAKR,mCAAS8B,YAAYpB,qBAAqBoB,UAAU;AAAA,IACvE;AAAA,IACAC,aAAY;AAAA,IAAY,GACpBX;AAAAA,IAAMY,UAETX,MAAML,KAAK,EAAEiB,IAAKP,CAAAA,0BAChBQ,aAAW;AAAA,MACVlC,SAAS;AAAA,QACPC,OAAOO,KAAKR,mCAASC,OAAOS,qBAAqBT,KAAK;AAAA,QACtD4B,MAAMrB,KAAKR,mCAASmC,WAAWzB,qBAAqByB,SAAS;AAAA,MAC/D;AAAA,MAEAC,OAAOV;AAAAA,MACPW,SAASpB,SAASS;AAAAA,MAClBY,UAAWC,CAAAA,UAAUrB,6CAAeqB,OAAOb;AAAAA,MAC3CjB,MAAMkB,MAAM1B;AAAAA,MACZuC,aAAab,MAAMhB;AAAAA,MACnB,cAAYQ,qDAAmBO;AAAAA,IAAG,GAN7BA,CAAC,CAQT;AAAA,EAAA,CACgB;AAEvB;"}