@hitachivantara/uikit-react-core 5.24.1 → 5.24.3

package/dist/esm/components/Table/utils/utils.js

@@ -1,46 +1,19 @@
 import { theme } from "@hitachivantara/uikit-styles";
-const getBorderStyles = (type, color, borderRadius) => {
-  const rowBorderRadius = borderRadius || theme.table.rowBorderRadius;
-  if (type === "row") {
-    return {
-      "& td:first-of-type": {
-        borderLeft: `1px solid ${color}`,
-        borderTop: `1px solid ${color}`,
-        borderBottom: `1px solid ${color}`,
-        borderRadius: `${rowBorderRadius} 0 0 ${rowBorderRadius}`
-      },
-      "& td:last-child": {
-        borderRight: `1px solid ${color}`,
-        borderTop: `1px solid ${color}`,
-        borderBottom: `1px solid ${color}`,
-        borderRadius: `0 ${rowBorderRadius} ${rowBorderRadius} 0`
-      },
-      "& td:not(:first-of-type):not(:last-child)": {
-        borderTop: `1px solid ${color}`,
-        borderBottom: `1px solid ${color}`
-      }
-    };
-  }
-  if (type === "cell") {
-    return {
-      ":first-of-type&": {
-        borderLeft: `1px solid ${theme.table.rowBorderColor}`,
-        borderTop: `1px solid ${theme.table.rowBorderColor}`,
-        borderBottom: `1px solid ${theme.table.rowBorderColor}`,
-        borderRadius: `${rowBorderRadius} 0 0 ${rowBorderRadius}`
-      },
-      ":last-child&": {
-        borderRight: `1px solid ${theme.table.rowBorderColor}`,
-        borderTop: `1px solid ${theme.table.rowBorderColor}`,
-        borderBottom: `1px solid ${theme.table.rowBorderColor}`,
-        borderRadius: `0 ${rowBorderRadius} ${rowBorderRadius} 0`
-      },
-      ":not(:first-of-type):not(:last-child)&": {
-        borderTop: `1px solid ${theme.table.rowBorderColor}`,
-        borderBottom: `1px solid ${theme.table.rowBorderColor}`
-      }
-    };
-  }
+const getBorderStyles = (type, color = theme.table.rowBorderColor, rowBorderRadius = theme.table.rowBorderRadius) => {
+  return {
+    "& td": {
+      borderTop: `1px solid ${color}`,
+      borderBottom: `1px solid ${color}`
+    },
+    "& td:first-of-type": {
+      borderLeft: `1px solid ${color}`,
+      borderRadius: `${rowBorderRadius} 0 0 ${rowBorderRadius}`
+    },
+    "& td:last-of-type": {
+      borderRight: `1px solid ${color}`,
+      borderRadius: `0 ${rowBorderRadius} ${rowBorderRadius} 0`
+    }
+  };
 };
 export {
   getBorderStyles

package/dist/esm/components/Table/utils/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../src/components/Table/utils/utils.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const getBorderStyles = (\n  type: string,\n  color: string,\n  borderRadius?: string\n) => {\n  const rowBorderRadius = borderRadius || theme.table.rowBorderRadius;\n  if (type === \"row\") {\n    return {\n      \"& td:first-of-type\": {\n        borderLeft: `1px solid ${color}`,\n        borderTop: `1px solid ${color}`,\n        borderBottom: `1px solid ${color}`,\n        borderRadius: `${rowBorderRadius} 0 0 ${rowBorderRadius}`,\n      },\n      \"& td:last-child\": {\n        borderRight: `1px solid ${color}`,\n        borderTop: `1px solid ${color}`,\n        borderBottom: `1px solid ${color}`,\n        borderRadius: `0 ${rowBorderRadius} ${rowBorderRadius} 0`,\n      },\n      \"& td:not(:first-of-type):not(:last-child)\": {\n        borderTop: `1px solid ${color}`,\n        borderBottom: `1px solid ${color}`,\n      },\n    };\n  }\n  if (type === \"cell\") {\n    return {\n      \":first-of-type&\": {\n        borderLeft: `1px solid ${theme.table.rowBorderColor}`,\n        borderTop: `1px solid ${theme.table.rowBorderColor}`,\n        borderBottom: `1px solid ${theme.table.rowBorderColor}`,\n        borderRadius: `${rowBorderRadius} 0 0 ${rowBorderRadius}`,\n      },\n      \":last-child&\": {\n        borderRight: `1px solid ${theme.table.rowBorderColor}`,\n        borderTop: `1px solid ${theme.table.rowBorderColor}`,\n        borderBottom: `1px solid ${theme.table.rowBorderColor}`,\n        borderRadius: `0 ${rowBorderRadius} ${rowBorderRadius} 0`,\n      },\n      \":not(:first-of-type):not(:last-child)&\": {\n        borderTop: `1px solid ${theme.table.rowBorderColor}`,\n        borderBottom: `1px solid ${theme.table.rowBorderColor}`,\n      },\n    };\n  }\n};\n"],"names":["getBorderStyles","type","color","borderRadius","rowBorderRadius","theme","table","borderLeft","borderTop","borderBottom","borderRight","rowBorderColor"],"mappings":";AAEO,MAAMA,kBAAkBA,CAC7BC,MACAC,OACAC,iBACG;AACGC,QAAAA,kBAAkBD,gBAAgBE,MAAMC,MAAMF;AACpD,MAAIH,SAAS,OAAO;AACX,WAAA;AAAA,MACL,sBAAsB;AAAA,QACpBM,YAAa,aAAYL;AAAAA,QACzBM,WAAY,aAAYN;AAAAA,QACxBO,cAAe,aAAYP;AAAAA,QAC3BC,cAAe,GAAEC,uBAAuBA;AAAAA,MAC1C;AAAA,MACA,mBAAmB;AAAA,QACjBM,aAAc,aAAYR;AAAAA,QAC1BM,WAAY,aAAYN;AAAAA,QACxBO,cAAe,aAAYP;AAAAA,QAC3BC,cAAe,KAAIC,mBAAmBA;AAAAA,MACxC;AAAA,MACA,6CAA6C;AAAA,QAC3CI,WAAY,aAAYN;AAAAA,QACxBO,cAAe,aAAYP;AAAAA,MAC7B;AAAA,IAAA;AAAA,EAEJ;AACA,MAAID,SAAS,QAAQ;AACZ,WAAA;AAAA,MACL,mBAAmB;AAAA,QACjBM,YAAa,aAAYF,MAAMC,MAAMK;AAAAA,QACrCH,WAAY,aAAYH,MAAMC,MAAMK;AAAAA,QACpCF,cAAe,aAAYJ,MAAMC,MAAMK;AAAAA,QACvCR,cAAe,GAAEC,uBAAuBA;AAAAA,MAC1C;AAAA,MACA,gBAAgB;AAAA,QACdM,aAAc,aAAYL,MAAMC,MAAMK;AAAAA,QACtCH,WAAY,aAAYH,MAAMC,MAAMK;AAAAA,QACpCF,cAAe,aAAYJ,MAAMC,MAAMK;AAAAA,QACvCR,cAAe,KAAIC,mBAAmBA;AAAAA,MACxC;AAAA,MACA,0CAA0C;AAAA,QACxCI,WAAY,aAAYH,MAAMC,MAAMK;AAAAA,QACpCF,cAAe,aAAYJ,MAAMC,MAAMK;AAAAA,MACzC;AAAA,IAAA;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"utils.js","sources":["../../../../../src/components/Table/utils/utils.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const getBorderStyles = (\n  type: \"row\",\n  color = theme.table.rowBorderColor,\n  rowBorderRadius = theme.table.rowBorderRadius\n) => {\n  return {\n    \"& td\": {\n      borderTop: `1px solid ${color}`,\n      borderBottom: `1px solid ${color}`,\n    },\n    \"& td:first-of-type\": {\n      borderLeft: `1px solid ${color}`,\n      borderRadius: `${rowBorderRadius} 0 0 ${rowBorderRadius}`,\n    },\n    \"& td:last-of-type\": {\n      borderRight: `1px solid ${color}`,\n      borderRadius: `0 ${rowBorderRadius} ${rowBorderRadius} 0`,\n    },\n  };\n};\n"],"names":["getBorderStyles","type","color","theme","table","rowBorderColor","rowBorderRadius","borderTop","borderBottom","borderLeft","borderRadius","borderRight"],"mappings":";AAEaA,MAAAA,kBAAkBA,CAC7BC,MACAC,QAAQC,MAAMC,MAAMC,gBACpBC,kBAAkBH,MAAMC,MAAME,oBAC3B;AACI,SAAA;AAAA,IACL,QAAQ;AAAA,MACNC,WAAY,aAAYL;AAAAA,MACxBM,cAAe,aAAYN;AAAAA,IAC7B;AAAA,IACA,sBAAsB;AAAA,MACpBO,YAAa,aAAYP;AAAAA,MACzBQ,cAAe,GAAEJ,uBAAuBA;AAAAA,IAC1C;AAAA,IACA,qBAAqB;AAAA,MACnBK,aAAc,aAAYT;AAAAA,MAC1BQ,cAAe,KAAIJ,mBAAmBA;AAAAA,IACxC;AAAA,EAAA;AAEJ;"}

package/dist/esm/components/Tabs/Tabs.js

@@ -1,19 +1,22 @@
+import { Tabs } from "@mui/material";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import { clsx } from "clsx";
-import { StyledTabs } from "./Tabs.styles.js";
-import tabsClasses from "./tabsClasses.js";
+import { useClasses } from "./Tabs.styles.js";
+import { staticClasses } from "./Tabs.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 const HvTabs = (props) => {
   const {
-    classes,
+    classes: classesProp,
     ...others
   } = useDefaultProps("HvTabs", props);
-  return /* @__PURE__ */ jsx(StyledTabs, {
+  const {
+    classes
+  } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(Tabs, {
     classes: {
-      root: clsx(tabsClasses.root, classes == null ? void 0 : classes.root),
-      flexContainer: clsx(tabsClasses.flexContainer, classes == null ? void 0 : classes.flexContainer),
-      indicator: clsx(tabsClasses.indicator, classes == null ? void 0 : classes.indicator),
-      scroller: clsx(tabsClasses.scroller, classes == null ? void 0 : classes.scroller)
+      root: classes.root,
+      flexContainer: classes.flexContainer,
+      indicator: classes.indicator,
+      scroller: classes.scroller
     },
     TabIndicatorProps: {
       children: /* @__PURE__ */ jsx("div", {})
@@ -22,6 +25,7 @@ const HvTabs = (props) => {
   });
 };
 export {
-  HvTabs
+  HvTabs,
+  staticClasses as tabsClasses
 };
 //# sourceMappingURL=Tabs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { TabsProps as MuiTabsProps } from \"@mui/material\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { clsx } from \"clsx\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { StyledTabs } from \"./Tabs.styles\";\nimport tabsClasses, { HvTabsClasses } from \"./tabsClasses\";\n\n// Mui Tabs props: https://mui.com/material-ui/api/tabs/#props\nexport interface HvTabsProps\n  extends MuiTabsProps,\n    HvBaseProps<HTMLButtonElement, \"onChange\"> {\n  /**\n   * The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to `false`.\n   */\n  value?: any;\n  /**\n   * Callback fired when the value changes.\n   */\n  onChange?: (event: React.SyntheticEvent, value: any) => void;\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvTabsClasses;\n}\n\n/**\n * A Tab is a graphical control element that allows multiple documents or panels to be contained within a single window.\n * Tabs can be used as a navigational widget for switching between sets of documents.\n */\nexport const HvTabs = (props: HvTabsProps) => {\n  const { classes, ...others } = useDefaultProps(\"HvTabs\", props);\n\n  return (\n    <StyledTabs\n      classes={{\n        root: clsx(tabsClasses.root, classes?.root),\n        flexContainer: clsx(tabsClasses.flexContainer, classes?.flexContainer),\n        indicator: clsx(tabsClasses.indicator, classes?.indicator),\n        scroller: clsx(tabsClasses.scroller, classes?.scroller),\n      }}\n      TabIndicatorProps={{ children: <div /> }}\n      {...others}\n    />\n  );\n};\n"],"names":["HvTabs","props","classes","others","useDefaultProps","StyledTabs","root","clsx","tabsClasses","flexContainer","indicator","scroller","TabIndicatorProps","children","_jsx"],"mappings":";;;;;AAgCaA,MAAAA,SAASA,CAACC,UAAuB;AACtC,QAAA;AAAA,IAAEC;AAAAA,IAAS,GAAGC;AAAAA,EAAAA,IAAWC,gBAAgB,UAAUH,KAAK;AAE9D,6BACGI,YAAU;AAAA,IACTH,SAAS;AAAA,MACPI,MAAMC,KAAKC,YAAYF,MAAMJ,mCAASI,IAAI;AAAA,MAC1CG,eAAeF,KAAKC,YAAYC,eAAeP,mCAASO,aAAa;AAAA,MACrEC,WAAWH,KAAKC,YAAYE,WAAWR,mCAASQ,SAAS;AAAA,MACzDC,UAAUJ,KAAKC,YAAYG,UAAUT,mCAASS,QAAQ;AAAA,IACxD;AAAA,IACAC,mBAAmB;AAAA,MAAEC,UAAUC,oBAAM,OAAA,EAAA;AAAA,IAAE;AAAA,IAAE,GACrCX;AAAAA,EAAAA,CACL;AAEL;"}
+{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { Tabs, TabsProps as MuiTabsProps } from \"@mui/material\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./Tabs.styles\";\n\nexport { staticClasses as tabsClasses };\n\nexport type HvTabsClasses = ExtractNames<typeof useClasses>;\n\n// Mui Tabs props: https://mui.com/material-ui/api/tabs/#props\nexport interface HvTabsProps\n  extends MuiTabsProps,\n    HvBaseProps<HTMLButtonElement, \"onChange\"> {\n  /**\n   * The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to `false`.\n   */\n  value?: any;\n  /**\n   * Callback fired when the value changes.\n   */\n  onChange?: (event: React.SyntheticEvent, value: any) => void;\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvTabsClasses;\n}\n\n/**\n * A Tab is a graphical control element that allows multiple documents or panels to be contained within a single window.\n * Tabs can be used as a navigational widget for switching between sets of documents.\n */\nexport const HvTabs = (props: HvTabsProps) => {\n  const { classes: classesProp, ...others } = useDefaultProps(\"HvTabs\", props);\n\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <Tabs\n      classes={{\n        root: classes.root,\n        flexContainer: classes.flexContainer,\n        indicator: classes.indicator,\n        scroller: classes.scroller,\n      }}\n      TabIndicatorProps={{ children: <div /> }}\n      {...others}\n    />\n  );\n};\n"],"names":["HvTabs","props","classes","classesProp","others","useDefaultProps","useClasses","Tabs","root","flexContainer","indicator","scroller","TabIndicatorProps","children","_jsx"],"mappings":";;;;;AAgCaA,MAAAA,SAASA,CAACC,UAAuB;AACtC,QAAA;AAAA,IAAEC,SAASC;AAAAA,IAAa,GAAGC;AAAAA,EAAAA,IAAWC,gBAAgB,UAAUJ,KAAK;AAErE,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAYI,WAAWH,WAAW;AAE1C,6BACGI,MAAI;AAAA,IACHL,SAAS;AAAA,MACPM,MAAMN,QAAQM;AAAAA,MACdC,eAAeP,QAAQO;AAAAA,MACvBC,WAAWR,QAAQQ;AAAAA,MACnBC,UAAUT,QAAQS;AAAAA,IACpB;AAAA,IACAC,mBAAmB;AAAA,MAAEC,UAAUC,oBAAM,OAAA,EAAA;AAAA,IAAE;AAAA,IAAE,GACrCV;AAAAA,EAAAA,CACL;AAEL;"}

package/dist/esm/components/Tabs/Tabs.styles.js

@@ -1,36 +1,34 @@
-import _styled from "@emotion/styled/base";
 import { theme } from "@hitachivantara/uikit-styles";
-import { Tabs } from "@mui/material";
-const StyledTabs = /* @__PURE__ */ _styled(Tabs, process.env.NODE_ENV === "production" ? {
-  target: "ex13pr80"
-} : {
-  target: "ex13pr80",
-  label: "StyledTabs"
-})({
-  // Root
-  minHeight: 0,
-  overflow: "visible",
-  // Override Mui styling: https://mui.com/material-ui/api/tabs/#css
-  "& .MuiTabs-indicator": {
+import { createClasses } from "../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvTabs", {
+  root: {
+    minHeight: 0,
+    overflow: "visible"
+  },
+  indicator: {
     display: "flex",
     justifyContent: "center",
     backgroundColor: "transparent",
     "& > div": {
       width: "100%",
-      backgroundColor: theme.colors.secondary
+      backgroundColor: `${theme.colors.secondary}`
     },
     height: 2
   },
-  "& .MuiTabs-scroller": {
+  scroller: {
     overflow: "visible !important"
   },
-  "& .MuiTabs-flexContainer": {
+  flexContainer: {
     "& button:first-of-type": {
       marginLeft: "3px"
     }
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVGFicy9UYWJzLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSTBCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVGFicy9UYWJzLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IFRhYnMgYXMgTXVpVGFicyB9IGZyb20gXCJAbXVpL21hdGVyaWFsXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRUYWJzID0gc3R5bGVkKE11aVRhYnMpKHtcbiAgLy8gUm9vdFxuICBtaW5IZWlnaHQ6IDAsXG4gIG92ZXJmbG93OiBcInZpc2libGVcIixcblxuICAvLyBPdmVycmlkZSBNdWkgc3R5bGluZzogaHR0cHM6Ly9tdWkuY29tL21hdGVyaWFsLXVpL2FwaS90YWJzLyNjc3NcbiAgXCImIC5NdWlUYWJzLWluZGljYXRvclwiOiB7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCIsXG4gICAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gICAgXCImID4gZGl2XCI6IHtcbiAgICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeSxcbiAgICB9LFxuICAgIGhlaWdodDogMixcbiAgfSxcbiAgXCImIC5NdWlUYWJzLXNjcm9sbGVyXCI6IHtcbiAgICBvdmVyZmxvdzogXCJ2aXNpYmxlICFpbXBvcnRhbnRcIixcbiAgfSxcbiAgXCImIC5NdWlUYWJzLWZsZXhDb250YWluZXJcIjoge1xuICAgIFwiJiBidXR0b246Zmlyc3Qtb2YtdHlwZVwiOiB7XG4gICAgICBtYXJnaW5MZWZ0OiBcIjNweFwiLFxuICAgIH0sXG4gIH0sXG59KTtcbiJdfQ== */");
+});
 export {
-  StyledTabs
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=Tabs.styles.js.map

package/dist/esm/components/Tabs/Tabs.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.styles.js","sources":["../../../../src/components/Tabs/Tabs.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { Tabs as MuiTabs } from \"@mui/material\";\n\nexport const StyledTabs = styled(MuiTabs)({\n  // Root\n  minHeight: 0,\n  overflow: \"visible\",\n\n  // Override Mui styling: https://mui.com/material-ui/api/tabs/#css\n  \"& .MuiTabs-indicator\": {\n    display: \"flex\",\n    justifyContent: \"center\",\n    backgroundColor: \"transparent\",\n    \"& > div\": {\n      width: \"100%\",\n      backgroundColor: theme.colors.secondary,\n    },\n    height: 2,\n  },\n  \"& .MuiTabs-scroller\": {\n    overflow: \"visible !important\",\n  },\n  \"& .MuiTabs-flexContainer\": {\n    \"& button:first-of-type\": {\n      marginLeft: \"3px\",\n    },\n  },\n});\n"],"names":["StyledTabs","MuiTabs","process","env","NODE_ENV","target","label","minHeight","overflow","display","justifyContent","backgroundColor","width","theme","colors","secondary","height","marginLeft"],"mappings":";;;AAIO,MAAMA,aAAoBC,wBAAAA,MAAOC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA;AAAA,EAExCC,WAAW;AAAA,EACXC,UAAU;AAAA;AAAA,EAGV,wBAAwB;AAAA,IACtBC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,iBAAiB;AAAA,IACjB,WAAW;AAAA,MACTC,OAAO;AAAA,MACPD,iBAAiBE,MAAMC,OAAOC;AAAAA,IAChC;AAAA,IACAC,QAAQ;AAAA,EACV;AAAA,EACA,uBAAuB;AAAA,IACrBR,UAAU;AAAA,EACZ;AAAA,EACA,4BAA4B;AAAA,IAC1B,0BAA0B;AAAA,MACxBS,YAAY;AAAA,IACd;AAAA,EACF;AACF,GAACf,QAAAC,IAAAC,aAAC,eAAA,KAAA,67CAAA;"}
+{"version":3,"file":"Tabs.styles.js","sources":["../../../../src/components/Tabs/Tabs.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTabs\", {\n  root: {\n    minHeight: 0,\n    overflow: \"visible\",\n  },\n  indicator: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    backgroundColor: \"transparent\",\n    \"& > div\": {\n      width: \"100%\",\n      backgroundColor: `${theme.colors.secondary}`,\n    },\n    height: 2,\n  },\n  scroller: {\n    overflow: \"visible !important\",\n  },\n  flexContainer: {\n    \"& button:first-of-type\": {\n      marginLeft: \"3px\",\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","minHeight","overflow","indicator","display","justifyContent","backgroundColor","width","theme","colors","secondary","height","scroller","flexContainer","marginLeft"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IACJC,WAAW;AAAA,IACXC,UAAU;AAAA,EACZ;AAAA,EACAC,WAAW;AAAA,IACTC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,iBAAiB;AAAA,IACjB,WAAW;AAAA,MACTC,OAAO;AAAA,MACPD,iBAAkB,GAAEE,MAAMC,OAAOC;AAAAA,IACnC;AAAA,IACAC,QAAQ;AAAA,EACV;AAAA,EACAC,UAAU;AAAA,IACRV,UAAU;AAAA,EACZ;AAAA,EACAW,eAAe;AAAA,IACb,0BAA0B;AAAA,MACxBC,YAAY;AAAA,IACd;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/components/TagsInput/TagsInput.styles.js

@@ -5,7 +5,8 @@ import tagsInputClasses from "./tagsInputClasses.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { staticClasses } from "../BaseInput/BaseInput.styles.js";
 import "../BaseInput/BaseInput.js";
-import listItemClasses from "../ListContainer/ListItem/listItemClasses.js";
+import { staticClasses as staticClasses$1 } from "../ListContainer/ListItem/ListItem.styles.js";
+import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
 import { HvTag } from "../Tag/Tag.js";
 import { HvInput } from "../Input/Input.js";
 import { HvFormElement } from "../Forms/FormElement/FormElement.js";
@@ -14,9 +15,8 @@ import { HvInfoMessage } from "../Forms/InfoMessage/InfoMessage.js";
 import { HvCharCounter } from "../Forms/CharCounter/CharCounter.js";
 import { HvListContainer } from "../ListContainer/ListContainer.js";
 import { HvWarningText } from "../Forms/WarningText/WarningText.js";
-import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
 import { HvSuggestions } from "../Forms/Suggestions/Suggestions.js";
-import { staticClasses as staticClasses$1 } from "../Forms/Suggestions/Suggestions.styles.js";
+import { staticClasses as staticClasses$2 } from "../Forms/Suggestions/Suggestions.styles.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).";
 }
@@ -216,7 +216,7 @@ const StyledListItem = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ jsx(Hv
   "&:not(:last-child)": {
     marginBottom: 2
   },
-  [`&.${listItemClasses.gutters}`]: {
+  [`&.${staticClasses$1.gutters}`]: {
     padding: "0 5px"
   },
   ...$singleLine && {
@@ -260,7 +260,7 @@ const StyledInputListItem = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ j
   flexGrow: 1,
   height: 24,
   lineHeight: "24px",
-  [`&.${listItemClasses.gutters}`]: {
+  [`&.${staticClasses$1.gutters}`]: {
     padding: "0 5px"
   },
   ...$singleLine && {
@@ -337,7 +337,7 @@ const StyledSuggestions = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ jsx
   width: "100%",
   position: "relative",
   top: 59,
-  [`& .${staticClasses$1.root} .${staticClasses$1.list} &`]: {
+  [`& .${staticClasses$2.root} .${staticClasses$2.list} &`]: {
     width: "100%"
   }
 }, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVGFnc0lucHV0L1RhZ3NJbnB1dC5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJSaUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9UYWdzSW5wdXQvVGFnc0lucHV0LnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQge1xuICBIdkNoYXJDb3VudGVyLFxuICBIdkZvcm1FbGVtZW50LFxuICBIdkluZm9NZXNzYWdlLFxuICBIdkxhYmVsLFxuICBIdlN1Z2dlc3Rpb25zLFxuICBIdldhcm5pbmdUZXh0LFxuICBIdkZvcm1FbGVtZW50UHJvcHMsXG4gIEh2TGFiZWxQcm9wcyxcbiAgSHZJbmZvTWVzc2FnZVByb3BzLFxuICBIdkNoYXJDb3VudGVyUHJvcHMsXG4gIEh2V2FybmluZ1RleHRQcm9wcyxcbiAgSHZTdWdnZXN0aW9uc1Byb3BzLFxuICBzdWdnZXN0aW9uc0NsYXNzZXMsXG59IGZyb20gXCJAY29yZS9jb21wb25lbnRzL0Zvcm1zXCI7XG5pbXBvcnQgeyBIdklucHV0LCBIdklucHV0UHJvcHMgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9JbnB1dFwiO1xuaW1wb3J0IHsgSHZUYWcsIEh2VGFnUHJvcHMgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UYWdcIjtcbmltcG9ydCB7IGJhc2VJbnB1dENsYXNzZXMgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9CYXNlSW5wdXRcIjtcbmltcG9ydCB7XG4gIEh2TGlzdENvbnRhaW5lcixcbiAgSHZMaXN0SXRlbVByb3BzLFxuICBIdkxpc3RJdGVtLFxuICBsaXN0SXRlbUNsYXNzZXMsXG59IGZyb20gXCJAY29yZS9jb21wb25lbnRzL0xpc3RDb250YWluZXJcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5pbXBvcnQgdGFnc0lucHV0Q2xhc3NlcyBmcm9tIFwiLi90YWdzSW5wdXRDbGFzc2VzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRGb3JtRWxlbWVudCA9IHN0eWxlZCgocHJvcHM6IEh2Rm9ybUVsZW1lbnRQcm9wcykgPT4gKFxuICA8SHZGb3JtRWxlbWVudCB7Li4ucHJvcHN9IC8+XG4pKSh7XG4gIGRpc3BsYXk6IFwiaW5saW5lLWJsb2NrXCIsXG4gIHdpZHRoOiBcIjEwMCVcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkTGFiZWxDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBmbG9hdDogXCJsZWZ0XCIsXG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBhbGlnbkl0ZW1zOiBcImZsZXgtc3RhcnRcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkTGFiZWwgPSBzdHlsZWQoKHByb3BzOiBIdkxhYmVsUHJvcHMpID0+IChcbiAgPEh2TGFiZWwgey4uLnByb3BzfSAvPlxuKSkoe1xuICBkaXNwbGF5OiBcImJsb2NrXCIsXG4gIGZsb2F0OiBcImxlZnRcIixcbiAgcGFkZGluZ0JvdHRvbTogXCI2cHhcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRGVzY3JpcHRpb24gPSBzdHlsZWQoKHByb3BzOiBIdkluZm9NZXNzYWdlUHJvcHMpID0+IChcbiAgPEh2SW5mb01lc3NhZ2Ugey4uLnByb3BzfSAvPlxuKSkoe1xuICBkaXNwbGF5OiBcImJsb2NrXCIsXG4gIGZsb2F0OiBcImxlZnRcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ2hhckNvdW50ZXIgPSBzdHlsZWQoKHByb3BzOiBIdkNoYXJDb3VudGVyUHJvcHMpID0+IChcbiAgPEh2Q2hhckNvdW50ZXIgey4uLnByb3BzfSAvPlxuKSkoKCkgPT4gKHtcbiAgZGlzcGxheTogXCJibG9ja1wiLFxuICBmbG9hdDogXCJyaWdodFwiLFxuICB0ZXh0QWxpZ246IFwicmlnaHRcIixcbiAgbWFyZ2luQm90dG9tOiBcIjZweFwiLFxufSkpO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVGFnc0xpc3QgPSBzdHlsZWQoXG4gIEh2TGlzdENvbnRhaW5lcixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKShcbiAgKHtcbiAgICAkZGlzYWJsZWQsXG4gICAgJHNpbmdsZUxpbmUsXG4gICAgJGVycm9yLFxuICAgICRyZXNpemFibGUsXG4gICAgJGludmFsaWQsXG4gICAgJHJlYWRPbmx5LFxuICB9OiB7XG4gICAgJGRpc2FibGVkOiBib29sZWFuO1xuICAgICRzaW5nbGVMaW5lOiBib29sZWFuO1xuICAgICRlcnJvcjogYm9vbGVhbjtcbiAgICAkcmVzaXphYmxlOiBib29sZWFuO1xuICAgICRpbnZhbGlkOiBib29sZWFuO1xuICAgICRyZWFkT25seTogYm9vbGVhbjtcbiAgfSkgPT4gKHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBhbGlnbkNvbnRlbnQ6IFwiZmxleC1zdGFydFwiLFxuICAgIGZsb2F0OiBcImxlZnRcIixcbiAgICBjbGVhcjogXCJib3RoXCIsXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIG1heFdpZHRoOiBcIjEwMCVcIixcbiAgICBoZWlnaHQ6IFwiMzJweFwiLFxuICAgIHBhZGRpbmc6IDUsXG4gICAgb3ZlcmZsb3c6IFwiYXV0b1wiLFxuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG5cbiAgICBmbGV4RGlyZWN0aW9uOiBcInJvd1wiLFxuICAgIGZsZXhXcmFwOiBcIndyYXBcIixcblxuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8xLFxuICAgIGJvcmRlcjogYDFweCBzb2xpZCAke3RoZW1lLnRhZ3NJbnB1dC5ib3JkZXJDb2xvcn1gLFxuICAgIGJvcmRlclJhZGl1czogdGhlbWUucmFkaWkuYmFzZSxcblxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBjdXJzb3I6IFwidGV4dFwiLFxuICAgICAgYm9yZGVyOiBgMXB4IHNvbGlkICR7dGhlbWUudGFnc0lucHV0LmhvdmVyQ29sb3J9YCxcbiAgICB9LFxuXG4gICAgW2AmIC4ke2Jhc2VJbnB1dENsYXNzZXMuaW5wdXRSb290fWBdOiB7XG4gICAgICBib3JkZXI6IFwibm9uZVwiLFxuICAgIH0sXG5cbiAgICBcIiY6Zm9jdXMsICY6Zm9jdXMtd2l0aGluLCAmOmZvY3VzLXZpc2libGVcIjoge1xuICAgICAgb3V0bGluZUNvbG9yOiBcIiM1MkE4RUNcIixcbiAgICAgIG91dGxpbmVTdHlsZTogXCJzb2xpZFwiLFxuICAgICAgb3V0bGluZVdpZHRoOiBcIjBweFwiLFxuICAgICAgb3V0bGluZU9mZnNldDogXCItMXB4XCIsXG4gICAgICBib3hTaGFkb3c6IFwiMCAwIDAgMXB4ICM1MkE4RUMsIDAgMCAwIDRweCByZ2JhKDI5LDE1NSwyMDksLjMpXCIsXG4gICAgfSxcblxuICAgIC4uLigkZGlzYWJsZWQgJiYge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS50YWdzSW5wdXQuZGlzYWJsZWRCYWNrZ3JvdW5kQ29sb3IsXG4gICAgICBib3JkZXI6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcblxuICAgICAgXCImOmZvY3VzLXdpdGhpbiwgJjpob3ZlclwiOiB7XG4gICAgICAgIGJvcmRlcjogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgICAgfSxcbiAgICB9KSxcblxuICAgIC4uLigkcmVhZE9ubHkgJiYge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS50YWdzSW5wdXQucmVhZE9ubHlCYWNrZ3JvdW5kQ29sb3IsXG4gICAgICBib3JkZXI6IGAxcHggc29saWQgJHt0aGVtZS50YWdzSW5wdXQucmVhZE9ubHlCb3JkZXJDb2xvcn1gLFxuICAgICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgYm9yZGVyOiBgMXB4IHNvbGlkICR7dGhlbWUudGFnc0lucHV0LnJlYWRPbmx5Qm9yZGVyQ29sb3J9YCxcbiAgICAgIH0sXG4gICAgfSksXG5cbiAgICAuLi4oJHNpbmdsZUxpbmUgJiYge1xuICAgICAgb3ZlcmZsb3dYOiBcImhpZGRlblwiLFxuICAgICAgb3ZlcmZsb3dZOiBcImhpZGRlblwiLFxuICAgICAgaGVpZ2h0OiAzMixcbiAgICAgIGRpc3BsYXk6IFwidGFibGUtcm93XCIsXG4gICAgICBwYWRkaW5nVG9wOiAwLFxuICAgIH0pLFxuXG4gICAgLi4uKCRlcnJvciAmJiB7XG4gICAgICBib3JkZXI6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMubmVnYXRpdmV9YCxcbiAgICB9KSxcblxuICAgIC4uLigkcmVzaXphYmxlICYmIHtcbiAgICAgIHdpZHRoOiBcImF1dG9cIixcbiAgICAgIHJlc2l6ZTogXCJib3RoXCIsXG4gICAgICBvdmVyZmxvdzogXCJhdXRvXCIsXG4gICAgfSksXG5cbiAgICAuLi4oJGludmFsaWQgJiYge1xuICAgICAgYm9yZGVyOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLm5lZ2F0aXZlfSFpbXBvcnRhbnRgLFxuICAgIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEVycm9yID0gc3R5bGVkKChwcm9wczogSHZXYXJuaW5nVGV4dFByb3BzKSA9PiAoXG4gIDxIdldhcm5pbmdUZXh0IHsuLi5wcm9wc30gLz5cbikpKHtcbiAgZmxvYXQ6IFwibGVmdFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRMaXN0SXRlbSA9IHN0eWxlZChcbiAgKHByb3BzOiBIdkxpc3RJdGVtUHJvcHMpID0+IDxIdkxpc3RJdGVtIHsuLi5wcm9wc30gLz4sXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJHNpbmdsZUxpbmUgfTogeyAkc2luZ2xlTGluZTogYm9vbGVhbiB9KSA9PiAoe1xuICBtYXJnaW5Cb3R0b206IDIsXG4gIGhlaWdodDogMjQsXG4gIGxpbmVIZWlnaHQ6IFwiMjRweFwiLFxuICBcIiY6bm90KDpsYXN0LWNoaWxkKVwiOiB7XG4gICAgbWFyZ2luQm90dG9tOiAyLFxuICB9LFxuICBbYCYuJHtsaXN0SXRlbUNsYXNzZXMuZ3V0dGVyc31gXToge1xuICAgIHBhZGRpbmc6IFwiMCA1cHhcIixcbiAgfSxcbiAgLi4uKCRzaW5nbGVMaW5lICYmIHtcbiAgICBkaXNwbGF5OiBcInRhYmxlLWNlbGxcIixcbiAgICBwYWRkaW5nVG9wOiBcIjJweCFpbXBvcnRhbnRcIixcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRUYWcgPSBzdHlsZWQoXG4gIChwcm9wczogSHZUYWdQcm9wcykgPT4gPEh2VGFnIHsuLi5wcm9wc30gLz4sXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJHNlbGVjdGVkIH06IHsgJHNlbGVjdGVkOiBib29sZWFuIH0pID0+ICh7XG4gIFtgJiAuJHt0YWdzSW5wdXRDbGFzc2VzLmNoaXBSb290fWBdOiB7XG4gICAgbWF4V2lkdGg6IFwibm9uZVwiLFxuICB9LFxuICAuLi4oJHNlbGVjdGVkICYmIHtcbiAgICBvdXRsaW5lQ29sb3I6IFwiIzUyQThFQ1wiLFxuICAgIG91dGxpbmVTdHlsZTogXCJzb2xpZFwiLFxuICAgIG91dGxpbmVXaWR0aDogXCIwcHhcIixcbiAgICBvdXRsaW5lT2Zmc2V0OiBcIi0xcHhcIixcbiAgICBib3hTaGFkb3c6IFwiMCAwIDAgMXB4ICM1MkE4RUMsIDAgMCAwIDRweCByZ2JhKDI5LDE1NSwyMDksLjMpXCIsXG4gIH0pLFxufSkpO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5wdXRMaXN0SXRlbSA9IHN0eWxlZChcbiAgKHByb3BzOiBIdkxpc3RJdGVtUHJvcHMpID0+IDxIdkxpc3RJdGVtIHsuLi5wcm9wc30gLz4sXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJHNpbmdsZUxpbmUsXG4gICAgJGlzVGFnU2VsZWN0ZWQsXG4gIH06IHtcbiAgICAkc2luZ2xlTGluZTogYm9vbGVhbjtcbiAgICAkaXNUYWdTZWxlY3RlZDogYm9vbGVhbjtcbiAgfSkgPT4gKHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBmbGV4R3JvdzogMSxcbiAgICBoZWlnaHQ6IDI0LFxuICAgIGxpbmVIZWlnaHQ6IFwiMjRweFwiLFxuICAgIFtgJi4ke2xpc3RJdGVtQ2xhc3Nlcy5ndXR0ZXJzfWBdOiB7XG4gICAgICBwYWRkaW5nOiBcIjAgNXB4XCIsXG4gICAgfSxcbiAgICAuLi4oJHNpbmdsZUxpbmUgJiYge1xuICAgICAgZGlzcGxheTogXCJ0YWJsZS1jZWxsXCIsXG4gICAgICBtaW5XaWR0aDogMTAwLFxuICAgICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgICAgcGFkZGluZ1RvcDogXCIzcHghaW1wb3J0YW50XCIsXG4gICAgICB2ZXJ0aWNhbEFsaWduOiBcIm1pZGRsZVwiLFxuICAgIH0pLFxuICAgIC4uLigkaXNUYWdTZWxlY3RlZCAmJiB7XG4gICAgICBbYCYgLiR7YmFzZUlucHV0Q2xhc3Nlcy5pbnB1dFJvb3R9YF06IHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gICAgICB9LFxuICAgIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZElucHV0ID0gc3R5bGVkKFxuICAocHJvcHM6IEh2SW5wdXRQcm9wcykgPT4gPEh2SW5wdXQgey4uLnByb3BzfSAvPixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkc2luZ2xlTGluZSB9OiB7ICRzaW5nbGVMaW5lOiBib29sZWFuIH0pID0+ICh7XG4gIFtgJiAuJHtiYXNlSW5wdXRDbGFzc2VzLnJvb3R9YF06IHtcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgYm9yZGVyOiBcIm5vbmVcIixcbiAgICBbYCY6aG92ZXIgLiR7dGFnc0lucHV0Q2xhc3Nlcy50YWdJbnB1dEJvcmRlckNvbnRhaW5lcn1gXToge1xuICAgICAgYmFja2dyb3VuZDogXCJub25lXCIsXG4gICAgfSxcbiAgICBbYCY6aG92ZXIgLiR7dGFnc0lucHV0Q2xhc3Nlcy50YWdJbnB1dEJvcmRlckNvbnRhaW5lcn1gXToge1xuICAgICAgYmFja2dyb3VuZDogXCJub25lXCIsXG4gICAgfSxcbiAgfSxcbiAgW2AmJiAuJHtiYXNlSW5wdXRDbGFzc2VzLmlucHV0Um9vdH1gXToge1xuICAgIG1hcmdpbkxlZnQ6IDAsXG4gICAgbWFyZ2luUmlnaHQ6IDAsXG4gICAgZmxleDogXCIxIDEgYXV0b1wiLFxuICAgIG1pbldpZHRoOiA0OCxcbiAgICBoZWlnaHQ6IDI0LFxuICAgIGxpbmVIZWlnaHQ6IFwiMjRweFwiLFxuICAgIHBhZGRpbmc6IDAsXG4gICAgYm9yZGVyOiBcIm5vbmVcIixcbiAgfSxcbiAgW2AmIC4ke2Jhc2VJbnB1dENsYXNzZXMuaW5wdXRCb3JkZXJDb250YWluZXJ9YF06IHtcbiAgICBib3JkZXI6IFwibm9uZVwiLFxuICAgIGJhY2tncm91bmQ6IFwibm9uZVwiLFxuICB9LFxuICBbYCYgLiR7YmFzZUlucHV0Q2xhc3Nlcy5pbnB1dFJvb3RGb2N1c2VkfWBdOiB7XG4gICAgb3V0bGluZTogXCJub25lIWltcG9ydGFudFwiLFxuICAgIGJveFNoYWRvdzogXCJub25lIWltcG9ydGFudFwiLFxuICB9LFxuICBbYCYgLiR7YmFzZUlucHV0Q2xhc3Nlcy5yb290fSAuJHtiYXNlSW5wdXRDbGFzc2VzLmlucHV0Um9vdFJlYWRPbmx5fWBdOiB7XG4gICAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50IFwiLFxuICAgIGJvcmRlcjogXCJub25lXCIsXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgIGJvcmRlcjogXCJub25lXCIsXG4gICAgfSxcbiAgfSxcbiAgW2AmJiAuJHtiYXNlSW5wdXRDbGFzc2VzLmlucHV0fWBdOiB7XG4gICAgbWFyZ2luTGVmdDogMCxcbiAgfSxcbiAgLi4uKCRzaW5nbGVMaW5lICYmIHt9KSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFN1Z2dlc3Rpb25zID0gc3R5bGVkKChwcm9wczogSHZTdWdnZXN0aW9uc1Byb3BzKSA9PiAoXG4gIDxIdlN1Z2dlc3Rpb25zIHsuLi5wcm9wc30gLz5cbikpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICB0b3A6IDU5LFxuICBbYCYgLiR7c3VnZ2VzdGlvbnNDbGFzc2VzLnJvb3R9IC4ke3N1Z2dlc3Rpb25zQ2xhc3Nlcy5saXN0fSAmYF06IHtcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gIH0sXG59KTtcbiJdfQ== */");

package/dist/esm/components/TextArea/TextArea.js

@@ -1,4 +1,3 @@
-import { clsx } from "clsx";
 import { forwardRef, useRef, useState, useMemo, useCallback, useEffect } from "react";
 import { useForkRef } from "@mui/material";
 import isNil from "lodash/isNil";
@@ -8,14 +7,20 @@ import { useControlled } from "../../hooks/useControlled.js";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import validationState, { isInvalid } from "../Forms/FormElement/validationStates.js";
 import { DEFAULT_ERROR_MESSAGES, validateInput, validationTypes, computeValidationState, computeValidationMessage, hasBuiltInValidations } from "../BaseInput/validations.js";
-import { StyledFormElement, StyledLabelContainer, StyledLabel, StyledInfoMessage, StyledCharCounter, StyledBaseInput, StyledWarningText } from "./TextArea.styles.js";
-import textAreaClasses from "./textAreaClasses.js";
+import { useClasses } from "./TextArea.styles.js";
+import { staticClasses } from "./TextArea.styles.js";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { HvCharCounter } from "../Forms/CharCounter/CharCounter.js";
+import { HvFormElement } from "../Forms/FormElement/FormElement.js";
+import { HvLabel } from "../Forms/Label/Label.js";
+import { HvInfoMessage } from "../Forms/InfoMessage/InfoMessage.js";
+import { HvBaseInput } from "../BaseInput/BaseInput.js";
+import { HvWarningText } from "../Forms/WarningText/WarningText.js";
 const HvTextArea = forwardRef((props, ref) => {
   const {
     id,
     className,
-    classes,
+    classes: classesProp,
     name,
     label,
     description,
@@ -50,6 +55,10 @@ const HvTextArea = forwardRef((props, ref) => {
     onFocus,
     ...others
   } = useDefaultProps("HvTextArea", props);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const elementId = useUniqueId(id, "hvtextarea");
   const isDirty = useRef(false);
   const inputRef = useRef(null);
@@ -145,40 +154,43 @@ const HvTextArea = forwardRef((props, ref) => {
   if (isStateInvalid) {
     errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
   }
-  return /* @__PURE__ */ jsxs(StyledFormElement, {
+  return /* @__PURE__ */ jsxs(HvFormElement, {
     id,
     name,
     status: validationState$1,
     disabled,
     required,
     readOnly,
-    className: clsx(textAreaClasses.root, classes == null ? void 0 : classes.root, className, resizable && clsx(textAreaClasses.resizable, classes == null ? void 0 : classes.resizable), disabled && clsx(textAreaClasses.disabled, classes == null ? void 0 : classes.disabled), isStateInvalid && clsx(textAreaClasses.invalid, classes == null ? void 0 : classes.invalid)),
-    $resizable: resizable,
+    className: cx(classes.root, {
+      [classes.resizable]: resizable,
+      [classes.disabled]: disabled,
+      [classes.invalid]: isStateInvalid
+    }, className),
     onBlur: onContainerBlurHandler,
-    children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxs(StyledLabelContainer, {
-      className: clsx(textAreaClasses.labelContainer, classes == null ? void 0 : classes.labelContainer),
-      children: [hasLabel && /* @__PURE__ */ jsx(StyledLabel, {
-        className: clsx(textAreaClasses.label, classes == null ? void 0 : classes.label),
+    children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", {
+      className: classes.labelContainer,
+      children: [hasLabel && /* @__PURE__ */ jsx(HvLabel, {
+        className: classes.label,
         id: setId(id, "label"),
         htmlFor: setId(elementId, "input"),
         label
-      }), hasDescription && /* @__PURE__ */ jsx(StyledInfoMessage, {
-        className: clsx(textAreaClasses.description, classes == null ? void 0 : classes.description),
+      }), hasDescription && /* @__PURE__ */ jsx(HvInfoMessage, {
+        className: classes.description,
         id: setId(elementId, "description"),
         children: description
       })]
-    }), hasCounter && /* @__PURE__ */ jsx(StyledCharCounter, {
+    }), hasCounter && /* @__PURE__ */ jsx(HvCharCounter, {
       id: setId(elementId, "charCounter"),
-      className: clsx(textAreaClasses.characterCounter, classes == null ? void 0 : classes.characterCounter),
+      className: classes.characterCounter,
       separator: middleCountLabel,
       currentCharQuantity: value.length,
       maxCharQuantity,
       ...countCharProps
-    }), /* @__PURE__ */ jsx(StyledBaseInput, {
+    }), /* @__PURE__ */ jsx(HvBaseInput, {
       classes: {
-        root: clsx(textAreaClasses.baseInput, classes == null ? void 0 : classes.baseInput),
-        input: clsx(textAreaClasses.input, classes == null ? void 0 : classes.input),
-        inputResizable: clsx(textAreaClasses.inputResizable, classes == null ? void 0 : classes.inputResizable)
+        root: classes.baseInput,
+        input: classes.input,
+        inputResizable: classes.inputResizable
       },
       id: hasLabel ? setId(elementId, "input") : setId(id, "input"),
       name,
@@ -204,17 +216,17 @@ const HvTextArea = forwardRef((props, ref) => {
         ...inputProps
       },
       inputRef: forkedRef,
-      $resizable: resizable,
       ...others
-    }), canShowError && /* @__PURE__ */ jsx(StyledWarningText, {
+    }), canShowError && /* @__PURE__ */ jsx(HvWarningText, {
       id: setId(elementId, "error"),
-      className: clsx(textAreaClasses.error, classes == null ? void 0 : classes.error),
+      className: classes.error,
       disableBorder: true,
       children: validationMessage
     })]
   });
 });
 export {
-  HvTextArea
+  HvTextArea,
+  staticClasses as textAreaClasses
 };
 //# sourceMappingURL=TextArea.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport {\n  useCallback,\n  useRef,\n  useState,\n  useMemo,\n  useEffect,\n  forwardRef,\n} from \"react\";\n\nimport { useForkRef } from \"@mui/material\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport validationStates, {\n  isInvalid,\n} from \"@core/components/Forms/FormElement/validationStates\";\nimport { HvValidationMessages } from \"@core/types/forms\";\nimport {\n  computeValidationMessage,\n  computeValidationState,\n  DEFAULT_ERROR_MESSAGES,\n  hasBuiltInValidations,\n  HvInputValidity,\n  validateInput,\n  validationTypes,\n} from \"@core/components/BaseInput/validations\";\nimport { HvBaseInputProps } from \"@core/components/BaseInput\";\nimport { HvCharCounterProps, HvFormStatus } from \"@core/components/Forms\";\n\nimport {\n  StyledBaseInput,\n  StyledCharCounter,\n  StyledFormElement,\n  StyledInfoMessage,\n  StyledLabel,\n  StyledLabelContainer,\n  StyledWarningText,\n} from \"./TextArea.styles\";\nimport textAreaClasses, { HvTextAreaClasses } from \"./textAreaClasses\";\n\nexport interface HvTextAreaProps\n  extends Omit<\n    HvBaseInputProps,\n    \"onChange\" | \"onBlur\" | \"rows\" | \"classes\" | \"onFocus\"\n  > {\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * Text between the current char counter and max value.\n   */\n  middleCountLabel?: string;\n  /**\n   * An Object containing the various texts associated with the input.\n   */\n  validationMessages?: HvValidationMessages;\n  /**\n   * The custom validation function, it receives the value and must return\n   * either `true` for valid or `false` for invalid, default validations would only\n   * occur if this function is null or undefined\n   */\n  validation?: (value: string) => boolean;\n  /**\n   * The maximum allowed length of the characters, if this value is null no check\n   * will be performed.\n   */\n  maxCharQuantity?: number;\n  /**\n   * The minimum allowed length of the characters, if this value is null no check\n   * will be perform.\n   */\n  minCharQuantity?: number;\n  /**\n   * If `true` it should autofocus.\n   */\n  autoFocus?: boolean;\n  /**\n   * The number of rows of the text area\n   */\n  rows?: number;\n  /**\n   * If `true` the component is resizable.\n   */\n  resizable?: boolean;\n  /**\n   * Auto-scroll: automatically scroll to the end on value changes.\n   * Will stop if the user scrolls up and resume if scrolled to the bottom.\n   */\n  autoScroll?: boolean;\n  /**\n   * If true it isn't possible to pass the `maxCharQuantity`\n   */\n  blockMax?: boolean;\n  /**\n   * If `true` the character counter isn't shown even if maxCharQuantity is set.\n   */\n  hideCounter?: boolean;\n  /**\n   * Props passed to the char count.\n   */\n  countCharProps?: Partial<HvCharCounterProps>;\n  /**\n   * Called back when the value is changed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLTextAreaElement>,\n    value: string\n  ) => void;\n  /**\n   * Called back when the value is changed.\n   */\n  onBlur?: (\n    event: React.FocusEvent<HTMLTextAreaElement>,\n    value: string,\n    validationState: HvInputValidity\n  ) => void;\n  /**\n   * The function that will be executed onBlur, allows checking the value state,\n   * it receives the value.\n   */\n  onFocus?: (\n    event: React.FocusEvent<HTMLTextAreaElement>,\n    value: string\n  ) => void;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvTextAreaClasses;\n}\n\n/**\n * A text area is a multiline text input box, with an optional character counter when there is a length limit.\n */\nexport const HvTextArea = forwardRef<any, HvTextAreaProps>((props, ref) => {\n  const {\n    id,\n    className,\n    classes,\n    name,\n    label,\n    description,\n    placeholder,\n    status,\n    statusMessage,\n    validationMessages,\n    maxCharQuantity,\n    minCharQuantity,\n    value: valueProp,\n    inputRef: inputRefProp,\n    rows = 1,\n    defaultValue = \"\",\n    middleCountLabel = \"/\",\n    countCharProps = {},\n    inputProps = {},\n    required = false,\n    readOnly = false,\n    disabled = false,\n    autoFocus = false,\n    resizable = false,\n    autoScroll = false,\n    hideCounter = false,\n    blockMax = false,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-errormessage\": ariaErrorMessage,\n    validation,\n    onChange,\n    onBlur,\n    onFocus,\n    ...others\n  } = useDefaultProps(\"HvTextArea\", props);\n  const elementId = useUniqueId(id, \"hvtextarea\");\n\n  // Signals that the user has manually edited the input value\n  const isDirty = useRef<boolean>(false);\n\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n  const forkedRef = useForkRef(ref, inputRefProp, inputRef);\n\n  const [focused, setFocused] = useState<boolean>(false);\n\n  const [autoScrolling, setAutoScrolling] = useState(autoScroll);\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    validationStates.standBy\n  );\n\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\"\n  );\n\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n\n  const isStateInvalid = isInvalid(validationState);\n\n  const isEmptyValue = value == null || value === \"\";\n\n  const hasLabel = label != null;\n\n  const hasDescription = description != null;\n\n  const hasCounter = maxCharQuantity != null && !hideCounter;\n\n  // ValidationMessages reference tends to change, as users will not memorize/useState for it;\n  // Dependencies must be more explicit so we set\n  const errorMessages = useMemo(\n    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n    [validationMessages]\n  );\n\n  // Validates the input, sets the status and the statusMessage accordingly (if uncontrolled)\n  // and returns the validity state of the input.\n  const performValidation = useCallback(() => {\n    const inputValidity = validateInput(\n      inputRef.current,\n      value,\n      required,\n      minCharQuantity,\n      maxCharQuantity,\n      validationTypes.none,\n      validation\n    );\n\n    // This will only run if status is uncontrolled\n    setValidationState(computeValidationState(inputValidity, isEmptyValue));\n\n    // This will only run if statusMessage is uncontrolled\n    setValidationMessage(\n      computeValidationMessage(inputValidity, errorMessages)\n    );\n\n    return inputValidity;\n  }, [\n    errorMessages,\n    inputRef,\n    isEmptyValue,\n    maxCharQuantity,\n    minCharQuantity,\n    required,\n    setValidationMessage,\n    setValidationState,\n    validation,\n    value,\n  ]);\n\n  const isOverflow = (currentValue) =>\n    isNil(maxCharQuantity) ? false : currentValue.length > maxCharQuantity;\n\n  /**\n   * Limit the string to the maxCharQuantity length.\n   *\n   * @param value - string to evaluate\n   * @returns {string|*} - string according the limit\n   */\n  const limitValue = (currentValue) => {\n    if (currentValue === undefined || !blockMax) return currentValue;\n    return !isOverflow(currentValue)\n      ? currentValue\n      : currentValue.substring(0, maxCharQuantity);\n  };\n\n  /**\n   * Validates the text area updating the state and modifying the warning text, also executes\n   * the user provided onBlur passing the current validation status and value.\n   *\n   * @returns {undefined}\n   */\n  const onContainerBlurHandler = (event) => {\n    setFocused(false);\n\n    const inputValidity = performValidation();\n\n    onBlur?.(event, value, inputValidity);\n  };\n\n  /**\n   * Updates the length of the string while is being inputted, also executes the user onChange\n   * allowing the customization of the input if required.\n   *\n   * @param {String} value - The value provided by the HvInput\n   */\n  const onChangeHandler = (event, currentValue) => {\n    isDirty.current = true;\n\n    const limitedValue = blockMax ? limitValue(currentValue) : currentValue;\n\n    // Set the input value (only when value is uncontrolled)\n    setValue(limitedValue);\n\n    onChange?.(event, limitedValue);\n  };\n\n  /**\n   * Updates the state putting again the value from the state because the input value is\n   * not automatically manage, it also executes the onFocus function from the user passing the value\n   */\n  const onFocusHandler = (event) => {\n    setFocused(true);\n\n    // Reset validation status to standBy (only when status is uncontrolled)\n    setValidationState(validationStates.standBy);\n\n    onFocus?.(event, value);\n  };\n\n  const isScrolledDown = useCallback(() => {\n    const el = inputRef.current;\n    return el == null || el.offsetHeight + el.scrollTop >= el.scrollHeight;\n  }, [inputRef]);\n\n  const scrollDown = useCallback(() => {\n    const el = inputRef.current;\n    if (el != null) {\n      el.scrollTop = el.scrollHeight - el.clientHeight;\n    }\n  }, [inputRef]);\n\n  const addScrollListener = useCallback(() => {\n    const scrollHandler = {\n      handleEvent: () => {\n        setAutoScrolling(isScrolledDown());\n      },\n    };\n    inputRef.current?.addEventListener(\"scroll\", scrollHandler);\n  }, [inputRef, isScrolledDown]);\n\n  useEffect(() => {\n    if (autoScroll) {\n      addScrollListener();\n    }\n  }, [autoScroll, addScrollListener]);\n\n  useEffect(() => {\n    if (autoScrolling) {\n      scrollDown();\n    }\n  }, [valueProp, autoScrolling, scrollDown]);\n\n  // Run initial validation after first render\n  // and also when any validation condition changes\n  useEffect(() => {\n    if (focused || (!isDirty.current && isEmptyValue)) {\n      // Skip validation if currently focused or if empty and\n      // the user never manually edited the input value\n      return;\n    }\n\n    performValidation();\n  }, [focused, isEmptyValue, performValidation]);\n\n  // The error message area will only be created if:\n  //   - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and any of the built-in validations are active\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined &&\n        hasBuiltInValidations(\n          required,\n          validationTypes.none,\n          minCharQuantity,\n          // If blockMax is true maxCharQuantity will never produce an error\n          // unless the value is controlled, so we can't prevent it to overflow maxCharQuantity\n          maxCharQuantity != null && (blockMax !== true || value != null)\n            ? maxCharQuantity\n            : null,\n          validation,\n          inputProps\n        )));\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  return (\n    <StyledFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={clsx(\n        textAreaClasses.root,\n        classes?.root,\n        className,\n        resizable && clsx(textAreaClasses.resizable, classes?.resizable),\n        disabled && clsx(textAreaClasses.disabled, classes?.disabled),\n        isStateInvalid && clsx(textAreaClasses.invalid, classes?.invalid)\n      )}\n      $resizable={resizable}\n      onBlur={onContainerBlurHandler}\n    >\n      {(hasLabel || hasDescription) && (\n        <StyledLabelContainer\n          className={clsx(\n            textAreaClasses.labelContainer,\n            classes?.labelContainer\n          )}\n        >\n          {hasLabel && (\n            <StyledLabel\n              className={clsx(textAreaClasses.label, classes?.label)}\n              id={setId(id, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n            />\n          )}\n\n          {hasDescription && (\n            <StyledInfoMessage\n              className={clsx(\n                textAreaClasses.description,\n                classes?.description\n              )}\n              id={setId(elementId, \"description\")}\n            >\n              {description}\n            </StyledInfoMessage>\n          )}\n        </StyledLabelContainer>\n      )}\n\n      {hasCounter && (\n        <StyledCharCounter\n          id={setId(elementId, \"charCounter\")}\n          className={clsx(\n            textAreaClasses.characterCounter,\n            classes?.characterCounter\n          )}\n          separator={middleCountLabel}\n          currentCharQuantity={value.length}\n          maxCharQuantity={maxCharQuantity}\n          {...countCharProps}\n        />\n      )}\n\n      <StyledBaseInput\n        classes={{\n          root: clsx(textAreaClasses.baseInput, classes?.baseInput),\n          input: clsx(textAreaClasses.input, classes?.input),\n          inputResizable: clsx(\n            textAreaClasses.inputResizable,\n            classes?.inputResizable\n          ),\n        }}\n        id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n        name={name}\n        value={value}\n        required={required}\n        readOnly={readOnly}\n        disabled={disabled}\n        onChange={onChangeHandler}\n        autoFocus={autoFocus}\n        onFocus={onFocusHandler}\n        placeholder={placeholder}\n        invalid={isStateInvalid}\n        resizable={resizable}\n        multiline\n        rows={rows}\n        inputProps={{\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-describedby\":\n            ariaDescribedBy != null\n              ? ariaDescribedBy\n              : (description && setId(elementId, \"description\")) || undefined,\n          \"aria-controls\": maxCharQuantity\n            ? setId(elementId, \"charCounter\")\n            : undefined,\n          ...inputProps,\n        }}\n        inputRef={forkedRef}\n        $resizable={resizable}\n        {...others}\n      />\n\n      {canShowError && (\n        <StyledWarningText\n          id={setId(elementId, \"error\")}\n          className={clsx(textAreaClasses.error, classes?.error)}\n          disableBorder\n        >\n          {validationMessage}\n        </StyledWarningText>\n      )}\n    </StyledFormElement>\n  );\n});\n"],"names":["HvTextArea","forwardRef","props","ref","id","className","classes","name","label","description","placeholder","status","statusMessage","validationMessages","maxCharQuantity","minCharQuantity","value","valueProp","inputRef","inputRefProp","rows","defaultValue","middleCountLabel","countCharProps","inputProps","required","readOnly","disabled","autoFocus","resizable","autoScroll","hideCounter","blockMax","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","validation","onChange","onBlur","onFocus","others","useDefaultProps","elementId","useUniqueId","isDirty","useRef","forkedRef","useForkRef","focused","setFocused","useState","autoScrolling","setAutoScrolling","validationState","setValidationState","useControlled","validationStates","standBy","validationMessage","setValidationMessage","setValue","isStateInvalid","isInvalid","isEmptyValue","hasLabel","hasDescription","hasCounter","errorMessages","useMemo","DEFAULT_ERROR_MESSAGES","performValidation","useCallback","inputValidity","validateInput","current","validationTypes","none","computeValidationState","computeValidationMessage","isOverflow","currentValue","isNil","length","limitValue","undefined","substring","onContainerBlurHandler","event","onChangeHandler","limitedValue","onFocusHandler","isScrolledDown","el","offsetHeight","scrollTop","scrollHeight","scrollDown","clientHeight","addScrollListener","scrollHandler","handleEvent","addEventListener","useEffect","canShowError","hasBuiltInValidations","errorMessageId","setId","StyledFormElement","clsx","textAreaClasses","root","invalid","$resizable","children","StyledLabelContainer","labelContainer","_jsx","StyledLabel","htmlFor","StyledInfoMessage","StyledCharCounter","characterCounter","separator","currentCharQuantity","StyledBaseInput","baseInput","input","inputResizable","multiline","StyledWarningText","error","disableBorder"],"mappings":"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"}
+{"version":3,"file":"TextArea.js","sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import {\n  useCallback,\n  useRef,\n  useState,\n  useMemo,\n  useEffect,\n  forwardRef,\n} from \"react\";\n\nimport { useForkRef } from \"@mui/material\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport validationStates, {\n  isInvalid,\n} from \"@core/components/Forms/FormElement/validationStates\";\nimport { HvValidationMessages } from \"@core/types/forms\";\nimport {\n  computeValidationMessage,\n  computeValidationState,\n  DEFAULT_ERROR_MESSAGES,\n  hasBuiltInValidations,\n  HvInputValidity,\n  validateInput,\n  validationTypes,\n} from \"@core/components/BaseInput/validations\";\nimport { HvBaseInput, HvBaseInputProps } from \"@core/components/BaseInput\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./TextArea.styles\";\n\nexport { staticClasses as textAreaClasses };\n\nexport type HvTextAreaClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTextAreaProps\n  extends Omit<\n    HvBaseInputProps,\n    \"onChange\" | \"onBlur\" | \"rows\" | \"classes\" | \"onFocus\"\n  > {\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * Text between the current char counter and max value.\n   */\n  middleCountLabel?: string;\n  /**\n   * An Object containing the various texts associated with the input.\n   */\n  validationMessages?: HvValidationMessages;\n  /**\n   * The custom validation function, it receives the value and must return\n   * either `true` for valid or `false` for invalid, default validations would only\n   * occur if this function is null or undefined\n   */\n  validation?: (value: string) => boolean;\n  /**\n   * The maximum allowed length of the characters, if this value is null no check\n   * will be performed.\n   */\n  maxCharQuantity?: number;\n  /**\n   * The minimum allowed length of the characters, if this value is null no check\n   * will be perform.\n   */\n  minCharQuantity?: number;\n  /**\n   * If `true` it should autofocus.\n   */\n  autoFocus?: boolean;\n  /**\n   * The number of rows of the text area\n   */\n  rows?: number;\n  /**\n   * If `true` the component is resizable.\n   */\n  resizable?: boolean;\n  /**\n   * Auto-scroll: automatically scroll to the end on value changes.\n   * Will stop if the user scrolls up and resume if scrolled to the bottom.\n   */\n  autoScroll?: boolean;\n  /**\n   * If true it isn't possible to pass the `maxCharQuantity`\n   */\n  blockMax?: boolean;\n  /**\n   * If `true` the character counter isn't shown even if maxCharQuantity is set.\n   */\n  hideCounter?: boolean;\n  /**\n   * Props passed to the char count.\n   */\n  countCharProps?: Partial<HvCharCounterProps>;\n  /**\n   * Called back when the value is changed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLTextAreaElement>,\n    value: string\n  ) => void;\n  /**\n   * Called back when the value is changed.\n   */\n  onBlur?: (\n    event: React.FocusEvent<HTMLTextAreaElement>,\n    value: string,\n    validationState: HvInputValidity\n  ) => void;\n  /**\n   * The function that will be executed onBlur, allows checking the value state,\n   * it receives the value.\n   */\n  onFocus?: (\n    event: React.FocusEvent<HTMLTextAreaElement>,\n    value: string\n  ) => void;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvTextAreaClasses;\n}\n\n/**\n * A text area is a multiline text input box, with an optional character counter when there is a length limit.\n */\nexport const HvTextArea = forwardRef<any, HvTextAreaProps>((props, ref) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    name,\n    label,\n    description,\n    placeholder,\n    status,\n    statusMessage,\n    validationMessages,\n    maxCharQuantity,\n    minCharQuantity,\n    value: valueProp,\n    inputRef: inputRefProp,\n    rows = 1,\n    defaultValue = \"\",\n    middleCountLabel = \"/\",\n    countCharProps = {},\n    inputProps = {},\n    required = false,\n    readOnly = false,\n    disabled = false,\n    autoFocus = false,\n    resizable = false,\n    autoScroll = false,\n    hideCounter = false,\n    blockMax = false,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-errormessage\": ariaErrorMessage,\n    validation,\n    onChange,\n    onBlur,\n    onFocus,\n    ...others\n  } = useDefaultProps(\"HvTextArea\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvtextarea\");\n\n  // Signals that the user has manually edited the input value\n  const isDirty = useRef<boolean>(false);\n\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n  const forkedRef = useForkRef(ref, inputRefProp, inputRef);\n\n  const [focused, setFocused] = useState<boolean>(false);\n\n  const [autoScrolling, setAutoScrolling] = useState(autoScroll);\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    validationStates.standBy\n  );\n\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\"\n  );\n\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n\n  const isStateInvalid = isInvalid(validationState);\n\n  const isEmptyValue = value == null || value === \"\";\n\n  const hasLabel = label != null;\n\n  const hasDescription = description != null;\n\n  const hasCounter = maxCharQuantity != null && !hideCounter;\n\n  // ValidationMessages reference tends to change, as users will not memorize/useState for it;\n  // Dependencies must be more explicit so we set\n  const errorMessages = useMemo(\n    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n    [validationMessages]\n  );\n\n  // Validates the input, sets the status and the statusMessage accordingly (if uncontrolled)\n  // and returns the validity state of the input.\n  const performValidation = useCallback(() => {\n    const inputValidity = validateInput(\n      inputRef.current,\n      value,\n      required,\n      minCharQuantity,\n      maxCharQuantity,\n      validationTypes.none,\n      validation\n    );\n\n    // This will only run if status is uncontrolled\n    setValidationState(computeValidationState(inputValidity, isEmptyValue));\n\n    // This will only run if statusMessage is uncontrolled\n    setValidationMessage(\n      computeValidationMessage(inputValidity, errorMessages)\n    );\n\n    return inputValidity;\n  }, [\n    errorMessages,\n    inputRef,\n    isEmptyValue,\n    maxCharQuantity,\n    minCharQuantity,\n    required,\n    setValidationMessage,\n    setValidationState,\n    validation,\n    value,\n  ]);\n\n  const isOverflow = (currentValue) =>\n    isNil(maxCharQuantity) ? false : currentValue.length > maxCharQuantity;\n\n  /**\n   * Limit the string to the maxCharQuantity length.\n   *\n   * @param value - string to evaluate\n   * @returns {string|*} - string according the limit\n   */\n  const limitValue = (currentValue) => {\n    if (currentValue === undefined || !blockMax) return currentValue;\n    return !isOverflow(currentValue)\n      ? currentValue\n      : currentValue.substring(0, maxCharQuantity);\n  };\n\n  /**\n   * Validates the text area updating the state and modifying the warning text, also executes\n   * the user provided onBlur passing the current validation status and value.\n   *\n   * @returns {undefined}\n   */\n  const onContainerBlurHandler = (event) => {\n    setFocused(false);\n\n    const inputValidity = performValidation();\n\n    onBlur?.(event, value, inputValidity);\n  };\n\n  /**\n   * Updates the length of the string while is being inputted, also executes the user onChange\n   * allowing the customization of the input if required.\n   *\n   * @param {String} value - The value provided by the HvInput\n   */\n  const onChangeHandler = (event, currentValue) => {\n    isDirty.current = true;\n\n    const limitedValue = blockMax ? limitValue(currentValue) : currentValue;\n\n    // Set the input value (only when value is uncontrolled)\n    setValue(limitedValue);\n\n    onChange?.(event, limitedValue);\n  };\n\n  /**\n   * Updates the state putting again the value from the state because the input value is\n   * not automatically manage, it also executes the onFocus function from the user passing the value\n   */\n  const onFocusHandler = (event) => {\n    setFocused(true);\n\n    // Reset validation status to standBy (only when status is uncontrolled)\n    setValidationState(validationStates.standBy);\n\n    onFocus?.(event, value);\n  };\n\n  const isScrolledDown = useCallback(() => {\n    const el = inputRef.current;\n    return el == null || el.offsetHeight + el.scrollTop >= el.scrollHeight;\n  }, [inputRef]);\n\n  const scrollDown = useCallback(() => {\n    const el = inputRef.current;\n    if (el != null) {\n      el.scrollTop = el.scrollHeight - el.clientHeight;\n    }\n  }, [inputRef]);\n\n  const addScrollListener = useCallback(() => {\n    const scrollHandler = {\n      handleEvent: () => {\n        setAutoScrolling(isScrolledDown());\n      },\n    };\n    inputRef.current?.addEventListener(\"scroll\", scrollHandler);\n  }, [inputRef, isScrolledDown]);\n\n  useEffect(() => {\n    if (autoScroll) {\n      addScrollListener();\n    }\n  }, [autoScroll, addScrollListener]);\n\n  useEffect(() => {\n    if (autoScrolling) {\n      scrollDown();\n    }\n  }, [valueProp, autoScrolling, scrollDown]);\n\n  // Run initial validation after first render\n  // and also when any validation condition changes\n  useEffect(() => {\n    if (focused || (!isDirty.current && isEmptyValue)) {\n      // Skip validation if currently focused or if empty and\n      // the user never manually edited the input value\n      return;\n    }\n\n    performValidation();\n  }, [focused, isEmptyValue, performValidation]);\n\n  // The error message area will only be created if:\n  //   - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and any of the built-in validations are active\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined &&\n        hasBuiltInValidations(\n          required,\n          validationTypes.none,\n          minCharQuantity,\n          // If blockMax is true maxCharQuantity will never produce an error\n          // unless the value is controlled, so we can't prevent it to overflow maxCharQuantity\n          maxCharQuantity != null && (blockMax !== true || value != null)\n            ? maxCharQuantity\n            : null,\n          validation,\n          inputProps\n        )));\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={cx(\n        classes.root,\n        {\n          [classes.resizable]: resizable,\n          [classes.disabled]: disabled,\n          [classes.invalid]: isStateInvalid,\n        },\n        className\n      )}\n      onBlur={onContainerBlurHandler}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              className={classes.label}\n              id={setId(id, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              className={classes.description}\n              id={setId(elementId, \"description\")}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      {hasCounter && (\n        <HvCharCounter\n          id={setId(elementId, \"charCounter\")}\n          className={classes.characterCounter}\n          separator={middleCountLabel}\n          currentCharQuantity={value.length}\n          maxCharQuantity={maxCharQuantity}\n          {...countCharProps}\n        />\n      )}\n\n      <HvBaseInput\n        classes={{\n          root: classes.baseInput,\n          input: classes.input,\n          inputResizable: classes.inputResizable,\n        }}\n        id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n        name={name}\n        value={value}\n        required={required}\n        readOnly={readOnly}\n        disabled={disabled}\n        onChange={onChangeHandler}\n        autoFocus={autoFocus}\n        onFocus={onFocusHandler}\n        placeholder={placeholder}\n        invalid={isStateInvalid}\n        resizable={resizable}\n        multiline\n        rows={rows}\n        inputProps={{\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-describedby\":\n            ariaDescribedBy != null\n              ? ariaDescribedBy\n              : (description && setId(elementId, \"description\")) || undefined,\n          \"aria-controls\": maxCharQuantity\n            ? setId(elementId, \"charCounter\")\n            : undefined,\n          ...inputProps,\n        }}\n        inputRef={forkedRef}\n        {...others}\n      />\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          className={classes.error}\n          disableBorder\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvTextArea","forwardRef","props","ref","id","className","classes","classesProp","name","label","description","placeholder","status","statusMessage","validationMessages","maxCharQuantity","minCharQuantity","value","valueProp","inputRef","inputRefProp","rows","defaultValue","middleCountLabel","countCharProps","inputProps","required","readOnly","disabled","autoFocus","resizable","autoScroll","hideCounter","blockMax","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","validation","onChange","onBlur","onFocus","others","useDefaultProps","cx","useClasses","elementId","useUniqueId","isDirty","useRef","forkedRef","useForkRef","focused","setFocused","useState","autoScrolling","setAutoScrolling","validationState","setValidationState","useControlled","validationStates","standBy","validationMessage","setValidationMessage","setValue","isStateInvalid","isInvalid","isEmptyValue","hasLabel","hasDescription","hasCounter","errorMessages","useMemo","DEFAULT_ERROR_MESSAGES","performValidation","useCallback","inputValidity","validateInput","current","validationTypes","none","computeValidationState","computeValidationMessage","isOverflow","currentValue","isNil","length","limitValue","undefined","substring","onContainerBlurHandler","event","onChangeHandler","limitedValue","onFocusHandler","isScrolledDown","el","offsetHeight","scrollTop","scrollHeight","scrollDown","clientHeight","addScrollListener","scrollHandler","handleEvent","addEventListener","useEffect","canShowError","hasBuiltInValidations","errorMessageId","setId","HvFormElement","root","invalid","children","labelContainer","_jsx","HvLabel","htmlFor","HvInfoMessage","HvCharCounter","characterCounter","separator","currentCharQuantity","HvBaseInput","baseInput","input","inputResizable","multiline","HvWarningText","error","disableBorder"],"mappings":"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"}