@hitachivantara/uikit-react-core 5.89.0 → 5.91.0

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

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

package/dist/esm/GlobalActions/GlobalActions.styles.js

@@ -23,13 +23,13 @@ const { staticClasses, useClasses } = createClasses("HvGlobalActions", {
       display: "flex",
       position: "absolute",
       inset: 0,
-      background: theme.colors.atmo2,
+      background: theme.colors.bgPage,
       opacity: "75%"
     },
     "& $wrapper": {
       top: 0,
       left: 0,
-      backgroundColor: theme.colors.atmo1,
+      backgroundColor: theme.colors.bgContainer,
       width: "100%",
       borderWidth: 1,
       borderRadius: theme.radii.round
@@ -48,7 +48,7 @@ const { staticClasses, useClasses } = createClasses("HvGlobalActions", {
     justifyContent: "flex-start",
     alignItems: "center",
     gap: theme.space.xs,
-    borderColor: theme.colors.atmo4,
+    borderColor: theme.colors.border,
     paddingLeft: theme.space.sm
   },
   /** @deprecated use classes.global $wrapper */

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

@@ -1 +1 @@
-{"version":3,"file":"GlobalActions.styles.js","sources":["../../../src/GlobalActions/GlobalActions.styles.tsx"],"sourcesContent":["import type { CSSInterpolation } from \"@emotion/serialize\";\nimport { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvGlobalActions\", {\n  root: {\n    position: \"relative\",\n  },\n  positionSticky: {\n    width: \"100%\",\n    position: \"sticky\",\n  },\n  positionFixed: {\n    width: \"100%\",\n    position: \"fixed\",\n  },\n  global: {\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    top: 0,\n    left: 0,\n    padding: theme.spacing(1, 0),\n    backdropFilter: \"blur(1px)\",\n\n    \"&:before\": {\n      content: \"''\",\n      display: \"flex\",\n      position: \"absolute\",\n      inset: 0,\n      background: theme.colors.atmo2,\n      opacity: \"75%\",\n    },\n\n    \"& $wrapper\": {\n      top: 0,\n      left: 0,\n      backgroundColor: theme.colors.atmo1,\n      width: \"100%\",\n      borderWidth: 1,\n      borderRadius: theme.radii.round,\n    },\n  },\n  section: {\n    \"& $wrapper\": {\n      borderTopWidth: 1,\n      paddingLeft: 0,\n    },\n  },\n  wrapper: {\n    padding: theme.space.xs,\n    position: \"relative\",\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    gap: theme.space.xs,\n    borderColor: theme.colors.atmo4,\n    paddingLeft: theme.space.sm,\n  },\n\n  /** @deprecated use classes.global $wrapper */\n  globalSectionArea: {},\n  /** @deprecated use classes.section $wrapper */\n  globalWrapperComplement: {},\n  backButton: {},\n  name: {\n    flexGrow: 1,\n  },\n  /** @deprecated use classes.name */\n  sectionName: {},\n  actions: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: theme.space.xs,\n    // TODO: remove in v6 in favour of consistently setting `flexGrow: 1` in a title \"wrapper\"\n    marginLeft: \"auto\",\n  },\n});\n\nexport const getBreakpointStyles = (\n  isUpMd: boolean,\n  isSmDown: boolean,\n): CSSInterpolation => {\n  const unit = isUpMd ? 4 : isSmDown ? 2 : 0;\n  if (!unit) return {};\n\n  return {\n    width: `calc(100% - 2 * ${theme.spacing(unit)})`,\n    marginLeft: theme.spacing(unit),\n    marginRight: theme.spacing(unit),\n  };\n};\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EACA,gBAAgB;AAAA,IACd,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AAAA,EACA,eAAe;AAAA,IACb,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ,QAAQ,MAAM,SAAS,MAAM;AAAA,IACrC,KAAK;AAAA,IACL,MAAM;AAAA,IACN,SAAS,MAAM,QAAQ,GAAG,CAAC;AAAA,IAC3B,gBAAgB;AAAA,IAEhB,YAAY;AAAA,MACV,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,MACP,YAAY,MAAM,OAAO;AAAA,MACzB,SAAS;AAAA,IACX;AAAA,IAEA,cAAc;AAAA,MACZ,KAAK;AAAA,MACL,MAAM;AAAA,MACN,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO;AAAA,MACP,aAAa;AAAA,MACb,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,SAAS;AAAA,IACP,cAAc;AAAA,MACZ,gBAAgB;AAAA,MAChB,aAAa;AAAA,IAAA;AAAA,EAEjB;AAAA,EACA,SAAS;AAAA,IACP,SAAS,MAAM,MAAM;AAAA,IACrB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,KAAK,MAAM,MAAM;AAAA,IACjB,aAAa,MAAM,OAAO;AAAA,IAC1B,aAAa,MAAM,MAAM;AAAA,EAC3B;AAAA;AAAA,EAGA,mBAAmB,CAAC;AAAA;AAAA,EAEpB,yBAAyB,CAAC;AAAA,EAC1B,YAAY,CAAC;AAAA,EACb,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA;AAAA,EAEA,aAAa,CAAC;AAAA,EACd,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK,MAAM,MAAM;AAAA;AAAA,IAEjB,YAAY;AAAA,EAAA;AAEhB,CAAC;AAEY,MAAA,sBAAsB,CACjC,QACA,aACqB;AACrB,QAAM,OAAO,SAAS,IAAI,WAAW,IAAI;AACrC,MAAA,CAAC,KAAM,QAAO,CAAC;AAEZ,SAAA;AAAA,IACL,OAAO,mBAAmB,MAAM,QAAQ,IAAI,CAAC;AAAA,IAC7C,YAAY,MAAM,QAAQ,IAAI;AAAA,IAC9B,aAAa,MAAM,QAAQ,IAAI;AAAA,EACjC;AACF;"}
+{"version":3,"file":"GlobalActions.styles.js","sources":["../../../src/GlobalActions/GlobalActions.styles.tsx"],"sourcesContent":["import type { CSSInterpolation } from \"@emotion/serialize\";\nimport { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvGlobalActions\", {\n  root: {\n    position: \"relative\",\n  },\n  positionSticky: {\n    width: \"100%\",\n    position: \"sticky\",\n  },\n  positionFixed: {\n    width: \"100%\",\n    position: \"fixed\",\n  },\n  global: {\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    top: 0,\n    left: 0,\n    padding: theme.spacing(1, 0),\n    backdropFilter: \"blur(1px)\",\n\n    \"&:before\": {\n      content: \"''\",\n      display: \"flex\",\n      position: \"absolute\",\n      inset: 0,\n      background: theme.colors.bgPage,\n      opacity: \"75%\",\n    },\n\n    \"& $wrapper\": {\n      top: 0,\n      left: 0,\n      backgroundColor: theme.colors.bgContainer,\n      width: \"100%\",\n      borderWidth: 1,\n      borderRadius: theme.radii.round,\n    },\n  },\n  section: {\n    \"& $wrapper\": {\n      borderTopWidth: 1,\n      paddingLeft: 0,\n    },\n  },\n  wrapper: {\n    padding: theme.space.xs,\n    position: \"relative\",\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    gap: theme.space.xs,\n    borderColor: theme.colors.border,\n    paddingLeft: theme.space.sm,\n  },\n\n  /** @deprecated use classes.global $wrapper */\n  globalSectionArea: {},\n  /** @deprecated use classes.section $wrapper */\n  globalWrapperComplement: {},\n  backButton: {},\n  name: {\n    flexGrow: 1,\n  },\n  /** @deprecated use classes.name */\n  sectionName: {},\n  actions: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: theme.space.xs,\n    // TODO: remove in v6 in favour of consistently setting `flexGrow: 1` in a title \"wrapper\"\n    marginLeft: \"auto\",\n  },\n});\n\nexport const getBreakpointStyles = (\n  isUpMd: boolean,\n  isSmDown: boolean,\n): CSSInterpolation => {\n  const unit = isUpMd ? 4 : isSmDown ? 2 : 0;\n  if (!unit) return {};\n\n  return {\n    width: `calc(100% - 2 * ${theme.spacing(unit)})`,\n    marginLeft: theme.spacing(unit),\n    marginRight: theme.spacing(unit),\n  };\n};\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EACA,gBAAgB;AAAA,IACd,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AAAA,EACA,eAAe;AAAA,IACb,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ,QAAQ,MAAM,SAAS,MAAM;AAAA,IACrC,KAAK;AAAA,IACL,MAAM;AAAA,IACN,SAAS,MAAM,QAAQ,GAAG,CAAC;AAAA,IAC3B,gBAAgB;AAAA,IAEhB,YAAY;AAAA,MACV,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,MACP,YAAY,MAAM,OAAO;AAAA,MACzB,SAAS;AAAA,IACX;AAAA,IAEA,cAAc;AAAA,MACZ,KAAK;AAAA,MACL,MAAM;AAAA,MACN,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO;AAAA,MACP,aAAa;AAAA,MACb,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,SAAS;AAAA,IACP,cAAc;AAAA,MACZ,gBAAgB;AAAA,MAChB,aAAa;AAAA,IAAA;AAAA,EAEjB;AAAA,EACA,SAAS;AAAA,IACP,SAAS,MAAM,MAAM;AAAA,IACrB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,KAAK,MAAM,MAAM;AAAA,IACjB,aAAa,MAAM,OAAO;AAAA,IAC1B,aAAa,MAAM,MAAM;AAAA,EAC3B;AAAA;AAAA,EAGA,mBAAmB,CAAC;AAAA;AAAA,EAEpB,yBAAyB,CAAC;AAAA,EAC1B,YAAY,CAAC;AAAA,EACb,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA;AAAA,EAEA,aAAa,CAAC;AAAA,EACd,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK,MAAM,MAAM;AAAA;AAAA,IAEjB,YAAY;AAAA,EAAA;AAEhB,CAAC;AAEY,MAAA,sBAAsB,CACjC,QACA,aACqB;AACrB,QAAM,OAAO,SAAS,IAAI,WAAW,IAAI;AACrC,MAAA,CAAC,KAAM,QAAO,CAAC;AAEZ,SAAA;AAAA,IACL,OAAO,mBAAmB,MAAM,QAAQ,IAAI,CAAC;AAAA,IAC7C,YAAY,MAAM,QAAQ,IAAI;AAAA,IAC9B,aAAa,MAAM,QAAQ,IAAI;AAAA,EACjC;AACF;"}

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

@@ -10,7 +10,7 @@ const { staticClasses, useClasses } = createClasses("HvHeader-Actions", {
     alignItems: "center",
     marginLeft: "auto",
     [`& .${staticClasses$1?.root}`]: {
-      "&:hover": { backgroundColor: theme.colors.containerBackgroundHover }
+      "&:hover": { backgroundColor: theme.colors.bgHover }
     }
   }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Actions.styles.js","sources":["../../../../src/Header/Actions/Actions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { buttonClasses } from \"../../Button\";\n\n// TODO - rename to HvHeaderActions (the actual component's name) in v6\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader-Actions\", {\n  root: {\n    backgroundColor: \"transparent\",\n    display: \"flex\",\n    gap: theme.space.xs,\n    alignItems: \"center\",\n    marginLeft: \"auto\",\n    [`& .${buttonClasses?.root}`]: {\n      \"&:hover\": { backgroundColor: theme.colors.containerBackgroundHover },\n    },\n  },\n});\n"],"names":["buttonClasses"],"mappings":";;;;AAMO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,KAAK,MAAM,MAAM;AAAA,IACjB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,CAAC,MAAMA,iBAAe,IAAI,EAAE,GAAG;AAAA,MAC7B,WAAW,EAAE,iBAAiB,MAAM,OAAO,yBAAyB;AAAA,IAAA;AAAA,EACtE;AAEJ,CAAC;"}
+{"version":3,"file":"Actions.styles.js","sources":["../../../../src/Header/Actions/Actions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { buttonClasses } from \"../../Button\";\n\n// TODO - rename to HvHeaderActions (the actual component's name) in v6\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader-Actions\", {\n  root: {\n    backgroundColor: \"transparent\",\n    display: \"flex\",\n    gap: theme.space.xs,\n    alignItems: \"center\",\n    marginLeft: \"auto\",\n    [`& .${buttonClasses?.root}`]: {\n      \"&:hover\": { backgroundColor: theme.colors.bgHover },\n    },\n  },\n});\n"],"names":["buttonClasses"],"mappings":";;;;AAMO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,KAAK,MAAM,MAAM;AAAA,IACjB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,CAAC,MAAMA,iBAAe,IAAI,EAAE,GAAG;AAAA,MAC7B,WAAW,EAAE,iBAAiB,MAAM,OAAO,QAAQ;AAAA,IAAA;AAAA,EACrD;AAEJ,CAAC;"}

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

@@ -6,7 +6,7 @@ const { staticClasses, useClasses } = createClasses("HvHeader-Brand", {
     width: 1,
     height: theme.space.sm,
     margin: theme.space.xs,
-    backgroundColor: theme.colors.secondary
+    backgroundColor: theme.colors.text
   },
   brandName: {}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Brand.styles.js","sources":["../../../../src/Header/Brand/Brand.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\n// TODO - rename to HvHeaderBrand (the actual component's name) in v6\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader-Brand\", {\n  root: { display: \"flex\", alignItems: \"center\" },\n  separator: {\n    width: 1,\n    height: theme.space.sm,\n    margin: theme.space.xs,\n    backgroundColor: theme.colors.secondary,\n  },\n  brandName: {},\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM,EAAE,SAAS,QAAQ,YAAY,SAAS;AAAA,EAC9C,WAAW;AAAA,IACT,OAAO;AAAA,IACP,QAAQ,MAAM,MAAM;AAAA,IACpB,QAAQ,MAAM,MAAM;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,WAAW,CAAA;AACb,CAAC;"}
+{"version":3,"file":"Brand.styles.js","sources":["../../../../src/Header/Brand/Brand.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\n// TODO - rename to HvHeaderBrand (the actual component's name) in v6\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader-Brand\", {\n  root: { display: \"flex\", alignItems: \"center\" },\n  separator: {\n    width: 1,\n    height: theme.space.sm,\n    margin: theme.space.xs,\n    backgroundColor: theme.colors.text,\n  },\n  brandName: {},\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM,EAAE,SAAS,QAAQ,YAAY,SAAS;AAAA,EAC9C,WAAW;AAAA,IACT,OAAO;AAAA,IACP,QAAQ,MAAM,MAAM;AAAA,IACpB,QAAQ,MAAM,MAAM;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,WAAW,CAAA;AACb,CAAC;"}

package/dist/esm/Header/Header.styles.js

@@ -3,7 +3,7 @@ import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvHeader", {
   root: {
     height: theme.header.height,
-    backgroundColor: theme.colors.atmo1,
+    backgroundColor: theme.colors.bgContainer,
     display: "flex",
     flexDirection: "column",
     width: "100%",
@@ -18,7 +18,7 @@ const { staticClasses, useClasses } = createClasses("HvHeader", {
     alignItems: "center",
     width: "100%",
     height: "100%",
-    padding: `0 ${theme.space.sm}`,
+    padding: theme.spacing(0, "sm"),
     "& > *:not(nav)": {
       zIndex: 2
     }

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

@@ -1 +1 @@
-{"version":3,"file":"Header.styles.js","sources":["../../../src/Header/Header.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader\", {\n  root: {\n    height: theme.header.height,\n    backgroundColor: theme.colors.atmo1,\n    display: \"flex\",\n    flexDirection: \"column\",\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    flexShrink: 0,\n    zIndex: theme.zIndices.banner,\n    borderTop: \"none\",\n    boxShadow: theme.colors.shadow,\n  },\n  header: {\n    display: \"flex\",\n    alignItems: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: `0 ${theme.space.sm}`,\n    \"& > *:not(nav)\": {\n      zIndex: 2,\n    },\n  },\n  fixed: { position: \"fixed\", top: 0, left: \"auto\", right: 0 },\n  backgroundColor: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,QAAQ,MAAM,OAAO;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,QAAQ,MAAM,SAAS;AAAA,IACvB,WAAW;AAAA,IACX,WAAW,MAAM,OAAO;AAAA,EAC1B;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,KAAK,MAAM,MAAM,EAAE;AAAA,IAC5B,kBAAkB;AAAA,MAChB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,OAAO,EAAE,UAAU,SAAS,KAAK,GAAG,MAAM,QAAQ,OAAO,EAAE;AAAA,EAC3D,iBAAiB,CAAA;AACnB,CAAC;"}
+{"version":3,"file":"Header.styles.js","sources":["../../../src/Header/Header.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader\", {\n  root: {\n    height: theme.header.height,\n    backgroundColor: theme.colors.bgContainer,\n    display: \"flex\",\n    flexDirection: \"column\",\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    flexShrink: 0,\n    zIndex: theme.zIndices.banner,\n    borderTop: \"none\",\n    boxShadow: theme.colors.shadow,\n  },\n  header: {\n    display: \"flex\",\n    alignItems: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: theme.spacing(0, \"sm\"),\n    \"& > *:not(nav)\": {\n      zIndex: 2,\n    },\n  },\n  fixed: { position: \"fixed\", top: 0, left: \"auto\", right: 0 },\n  backgroundColor: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,QAAQ,MAAM,OAAO;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,QAAQ,MAAM,SAAS;AAAA,IACvB,WAAW;AAAA,IACX,WAAW,MAAM,OAAO;AAAA,EAC1B;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,MAAM,QAAQ,GAAG,IAAI;AAAA,IAC9B,kBAAkB;AAAA,MAChB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,OAAO,EAAE,UAAU,SAAS,KAAK,GAAG,MAAM,QAAQ,OAAO,EAAE;AAAA,EAC3D,iBAAiB,CAAA;AACnB,CAAC;"}

package/dist/esm/Header/Navigation/MenuBar/Bar.styles.js

@@ -5,7 +5,7 @@ const show = {
   transition: ["top"],
   boxShadow: theme.colors.shadow,
   transitionDuration: "500ms",
-  backgroundColor: theme.colors.atmo2
+  backgroundColor: theme.colors.bgPage
 };
 const hide = {
   top: 0,
@@ -26,14 +26,14 @@ const { staticClasses, useClasses } = createClasses("HvHeader-MenuBar", {
     position: "absolute",
     zIndex: -2,
     height: theme.header.secondLevelHeight,
-    backgroundColor: theme.colors.atmo2,
+    backgroundColor: theme.colors.bgPage,
     "& li > div": {
       marginTop: 0
     }
   },
   menubar: {
     position: "relative",
-    backgroundColor: theme.colors.atmo1
+    backgroundColor: theme.colors.bgContainer
   },
   hidden: { ...hide },
   active: { ...show },

package/dist/esm/Header/Navigation/MenuBar/Bar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bar.styles.js","sources":["../../../../../src/Header/Navigation/MenuBar/Bar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst show = {\n  top: theme.header.height,\n  transition: [\"top\"],\n  boxShadow: theme.colors.shadow,\n  transitionDuration: \"500ms\",\n  backgroundColor: theme.colors.atmo2,\n};\n\nconst hide = {\n  top: 0,\n  transition: [\"top\"],\n  boxShadow: \"none\",\n  transitionDuration: \"300ms\",\n};\n\n// TODO - rename to HvHeaderMenuBar (the actual component's name) in v6\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader-MenuBar\", {\n  root: {\n    left: 0,\n    width: \"100%\",\n    height: \"100%\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  menu: {\n    position: \"absolute\",\n    zIndex: -2,\n    height: theme.header.secondLevelHeight,\n    backgroundColor: theme.colors.atmo2,\n    \"& li > div\": {\n      marginTop: 0,\n    },\n  },\n  menubar: {\n    position: \"relative\",\n    backgroundColor: theme.colors.atmo1,\n  },\n  hidden: { ...hide },\n  active: { ...show },\n  list: {\n    margin: 0,\n    padding: 0,\n    display: \"inherit\",\n    alignItems: \"center\",\n    height: \"100%\",\n    \"&:hover $active\": {\n      ...hide,\n    },\n    \"& li:hover > $hidden\": {\n      ...show,\n    },\n\n    \"&:focus-within $active\": {\n      ...hide,\n      zIndex: -2,\n    },\n    \"& li:focus-within > $hidden\": {\n      ...show,\n      zIndex: -1,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAAA,EACX,KAAK,MAAM,OAAO;AAAA,EAClB,YAAY,CAAC,KAAK;AAAA,EAClB,WAAW,MAAM,OAAO;AAAA,EACxB,oBAAoB;AAAA,EACpB,iBAAiB,MAAM,OAAO;AAChC;AAEA,MAAM,OAAO;AAAA,EACX,KAAK;AAAA,EACL,YAAY,CAAC,KAAK;AAAA,EAClB,WAAW;AAAA,EACX,oBAAoB;AACtB;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,QAAQ,MAAM,OAAO;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,cAAc;AAAA,MACZ,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,QAAQ,EAAE,GAAG,KAAK;AAAA,EAClB,QAAQ,EAAE,GAAG,KAAK;AAAA,EAClB,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,IACA,wBAAwB;AAAA,MACtB,GAAG;AAAA,IACL;AAAA,IAEA,0BAA0B;AAAA,MACxB,GAAG;AAAA,MACH,QAAQ;AAAA,IACV;AAAA,IACA,+BAA+B;AAAA,MAC7B,GAAG;AAAA,MACH,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,CAAC;"}
+{"version":3,"file":"Bar.styles.js","sources":["../../../../../src/Header/Navigation/MenuBar/Bar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst show = {\n  top: theme.header.height,\n  transition: [\"top\"],\n  boxShadow: theme.colors.shadow,\n  transitionDuration: \"500ms\",\n  backgroundColor: theme.colors.bgPage,\n};\n\nconst hide = {\n  top: 0,\n  transition: [\"top\"],\n  boxShadow: \"none\",\n  transitionDuration: \"300ms\",\n};\n\n// TODO - rename to HvHeaderMenuBar (the actual component's name) in v6\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader-MenuBar\", {\n  root: {\n    left: 0,\n    width: \"100%\",\n    height: \"100%\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  menu: {\n    position: \"absolute\",\n    zIndex: -2,\n    height: theme.header.secondLevelHeight,\n    backgroundColor: theme.colors.bgPage,\n    \"& li > div\": {\n      marginTop: 0,\n    },\n  },\n  menubar: {\n    position: \"relative\",\n    backgroundColor: theme.colors.bgContainer,\n  },\n  hidden: { ...hide },\n  active: { ...show },\n  list: {\n    margin: 0,\n    padding: 0,\n    display: \"inherit\",\n    alignItems: \"center\",\n    height: \"100%\",\n    \"&:hover $active\": {\n      ...hide,\n    },\n    \"& li:hover > $hidden\": {\n      ...show,\n    },\n\n    \"&:focus-within $active\": {\n      ...hide,\n      zIndex: -2,\n    },\n    \"& li:focus-within > $hidden\": {\n      ...show,\n      zIndex: -1,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAAA,EACX,KAAK,MAAM,OAAO;AAAA,EAClB,YAAY,CAAC,KAAK;AAAA,EAClB,WAAW,MAAM,OAAO;AAAA,EACxB,oBAAoB;AAAA,EACpB,iBAAiB,MAAM,OAAO;AAChC;AAEA,MAAM,OAAO;AAAA,EACX,KAAK;AAAA,EACL,YAAY,CAAC,KAAK;AAAA,EAClB,WAAW;AAAA,EACX,oBAAoB;AACtB;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,QAAQ,MAAM,OAAO;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,cAAc;AAAA,MACZ,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,QAAQ,EAAE,GAAG,KAAK;AAAA,EAClB,QAAQ,EAAE,GAAG,KAAK;AAAA,EAClB,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,IACA,wBAAwB;AAAA,MACtB,GAAG;AAAA,IACL;AAAA,IAEA,0BAA0B;AAAA,MACxB,GAAG;AAAA,MACH,QAAQ;AAAA,IACV;AAAA,IACA,+BAA+B;AAAA,MAC7B,GAAG;AAAA,MACH,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,CAAC;"}

package/dist/esm/Header/Navigation/MenuItem/MenuItem.styles.js

@@ -45,14 +45,14 @@ const { staticClasses, useClasses } = createClasses(
       height: "100%",
       borderBottom: "4px solid transparent",
       ":hover, :focus-within": {
-        backgroundColor: theme.colors.containerBackgroundHover
+        backgroundColor: theme.colors.bgHover
       }
     },
     menu: {},
     menubar: {},
     selected: {
-      borderColor: theme.colors.secondary,
-      color: theme.colors.secondary
+      color: theme.colors.text,
+      borderColor: "currentcolor"
     },
     item,
     link: {

package/dist/esm/Header/Navigation/MenuItem/MenuItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.styles.js","sources":["../../../../../src/Header/Navigation/MenuItem/MenuItem.styles.tsx"],"sourcesContent":["import type { CSSInterpolation } from \"@emotion/serialize\";\nimport { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../../utils/focusUtils\";\n\nconst item: CSSInterpolation = {\n  border: \"none\",\n  cursor: \"pointer\",\n  padding: `${theme.space.xs} ${theme.space.sm}`,\n  height: \"100%\",\n  display: \"flex\",\n  alignItems: \"center\",\n  \"&:active\": {\n    outline: \"none\",\n  },\n  \"&:focus\": {\n    outline: \"none\",\n  },\n  \"&:focus-visible\": {\n    ...outlineStyles,\n  },\n  \"& span\": {\n    display: \"inline-flex\",\n    color: \"inherit\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n  \"& span::after\": {\n    content: \"attr(data-text)\",\n    height: 0,\n    visibility: \"hidden\",\n    overflow: \"hidden\",\n    userSelect: \"none\",\n    pointerEvents: \"none\",\n    fontWeight: theme.fontWeights.semibold,\n\n    \"@media speech\": {\n      display: \"none\",\n    },\n  },\n};\n\n// TODO - rename to HvHeaderMenuItem (the actual component's name) in v6\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvHeader-MenuItem\",\n  {\n    root: {\n      display: \"inline\",\n      height: \"100%\",\n      borderBottom: \"4px solid transparent\",\n\n      \":hover, :focus-within\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n    menu: {},\n    menubar: {},\n    selected: {\n      borderColor: theme.colors.secondary,\n      color: theme.colors.secondary,\n    },\n    item,\n    link: {\n      textDecoration: \"none\",\n    },\n    button: {\n      color: \"inherit\",\n    },\n  },\n);\n"],"names":[],"mappings":";;;AAMA,MAAM,OAAyB;AAAA,EAC7B,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS,GAAG,MAAM,MAAM,EAAE,IAAI,MAAM,MAAM,EAAE;AAAA,EAC5C,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,EACX;AAAA,EACA,mBAAmB;AAAA,IACjB,GAAG;AAAA,EACL;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,OAAO;AAAA,IACP,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAY,MAAM,YAAY;AAAA,IAE9B,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,cAAc;AAAA,MAEd,yBAAyB;AAAA,QACvB,iBAAiB,MAAM,OAAO;AAAA,MAAA;AAAA,IAElC;AAAA,IACA,MAAM,CAAC;AAAA,IACP,SAAS,CAAC;AAAA,IACV,UAAU;AAAA,MACR,aAAa,MAAM,OAAO;AAAA,MAC1B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA;AAAA,IACA,MAAM;AAAA,MACJ,gBAAgB;AAAA,IAClB;AAAA,IACA,QAAQ;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;"}
+{"version":3,"file":"MenuItem.styles.js","sources":["../../../../../src/Header/Navigation/MenuItem/MenuItem.styles.tsx"],"sourcesContent":["import type { CSSInterpolation } from \"@emotion/serialize\";\nimport { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../../utils/focusUtils\";\n\nconst item: CSSInterpolation = {\n  border: \"none\",\n  cursor: \"pointer\",\n  padding: `${theme.space.xs} ${theme.space.sm}`,\n  height: \"100%\",\n  display: \"flex\",\n  alignItems: \"center\",\n  \"&:active\": {\n    outline: \"none\",\n  },\n  \"&:focus\": {\n    outline: \"none\",\n  },\n  \"&:focus-visible\": {\n    ...outlineStyles,\n  },\n  \"& span\": {\n    display: \"inline-flex\",\n    color: \"inherit\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n  \"& span::after\": {\n    content: \"attr(data-text)\",\n    height: 0,\n    visibility: \"hidden\",\n    overflow: \"hidden\",\n    userSelect: \"none\",\n    pointerEvents: \"none\",\n    fontWeight: theme.fontWeights.semibold,\n\n    \"@media speech\": {\n      display: \"none\",\n    },\n  },\n};\n\n// TODO - rename to HvHeaderMenuItem (the actual component's name) in v6\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvHeader-MenuItem\",\n  {\n    root: {\n      display: \"inline\",\n      height: \"100%\",\n      borderBottom: \"4px solid transparent\",\n\n      \":hover, :focus-within\": {\n        backgroundColor: theme.colors.bgHover,\n      },\n    },\n    menu: {},\n    menubar: {},\n    selected: {\n      color: theme.colors.text,\n      borderColor: \"currentcolor\",\n    },\n    item,\n    link: {\n      textDecoration: \"none\",\n    },\n    button: {\n      color: \"inherit\",\n    },\n  },\n);\n"],"names":[],"mappings":";;;AAMA,MAAM,OAAyB;AAAA,EAC7B,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS,GAAG,MAAM,MAAM,EAAE,IAAI,MAAM,MAAM,EAAE;AAAA,EAC5C,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,EACX;AAAA,EACA,mBAAmB;AAAA,IACjB,GAAG;AAAA,EACL;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,OAAO;AAAA,IACP,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAY,MAAM,YAAY;AAAA,IAE9B,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,cAAc;AAAA,MAEd,yBAAyB;AAAA,QACvB,iBAAiB,MAAM,OAAO;AAAA,MAAA;AAAA,IAElC;AAAA,IACA,MAAM,CAAC;AAAA,IACP,SAAS,CAAC;AAAA,IACV,UAAU;AAAA,MACR,OAAO,MAAM,OAAO;AAAA,MACpB,aAAa;AAAA,IACf;AAAA,IACA;AAAA,IACA,MAAM;AAAA,MACJ,gBAAgB;AAAA,IAClB;AAAA,IACA,QAAQ;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;"}

package/dist/esm/InlineEditor/InlineEditor.js

@@ -98,11 +98,10 @@ const HvInlineEditor = fixedForwardRef(function HvInlineEditor2(props, ref) {
     HvButton,
     {
       variant: "secondaryGhost",
-      overrideIconColors: false,
       endIcon: /* @__PURE__ */ jsx(
         Edit,
         {
-          color: "secondary_60",
+          color: "textDisabled",
           className: cx(classes.icon, {
             [classes.iconVisible]: showIcon
           })

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

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

package/dist/esm/InlineEditor/InlineEditor.styles.js

@@ -12,10 +12,10 @@ const { staticClasses, useClasses } = createClasses("HvInlineEditor", {
   text: {},
   largeText: {},
   textEmpty: {
-    color: theme.colors.secondary_60
+    color: theme.colors.textDisabled
   },
   button: {
-    padding: theme.spacing("6px", "8px", "5px", "8px"),
+    padding: theme.spacing(0, "xs"),
     minHeight: "32px",
     boxSizing: "border-box",
     cursor: "text",
@@ -25,17 +25,17 @@ const { staticClasses, useClasses } = createClasses("HvInlineEditor", {
     justifyContent: "start",
     textAlign: "start",
     alignItems: "center",
-    backgroundColor: theme.colors.atmo1,
+    backgroundColor: theme.colors.bgContainer,
     borderColor: "transparent",
     "&:hover, &:focus": {
       borderColor: theme.colors.primary,
-      backgroundColor: theme.colors.atmo1,
+      backgroundColor: theme.colors.bgContainer,
       "& $icon": {
         visibility: "visible"
       }
     },
     "&:active": {
-      borderColor: theme.colors.secondary,
+      borderColor: theme.colors.text,
       backgroundColor: "transparent",
       "& $icon": {
         visibility: "visible"

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

@@ -1 +1 @@
-{"version":3,"file":"InlineEditor.styles.js","sources":["../../../src/InlineEditor/InlineEditor.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInlineEditor\", {\n  root: {},\n  /** @deprecated unused. use `classes.root::after` instead */\n  inputBorderContainer: {},\n  input: {},\n  inputRoot: {\n    height: \"100%\",\n    minHeight: \"32px\",\n  },\n  text: {},\n  largeText: {},\n  textEmpty: {\n    color: theme.colors.secondary_60,\n  },\n  button: {\n    padding: theme.spacing(\"6px\", \"8px\", \"5px\", \"8px\"),\n    minHeight: \"32px\",\n\n    boxSizing: \"border-box\",\n    cursor: \"text\",\n    height: \"100%\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    justifyContent: \"start\",\n    textAlign: \"start\",\n    alignItems: \"center\",\n\n    backgroundColor: theme.colors.atmo1,\n    borderColor: \"transparent\",\n\n    \"&:hover, &:focus\": {\n      borderColor: theme.colors.primary,\n      backgroundColor: theme.colors.atmo1,\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n\n    \"&:active\": {\n      borderColor: theme.colors.secondary,\n      backgroundColor: \"transparent\",\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n  },\n  icon: {\n    cursor: \"pointer\",\n    visibility: \"hidden\",\n    alignSelf: \"center\",\n    height: 16,\n  },\n  iconVisible: {\n    visibility: \"visible\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM,CAAC;AAAA;AAAA,EAEP,sBAAsB,CAAC;AAAA,EACvB,OAAO,CAAC;AAAA,EACR,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,EACb;AAAA,EACA,MAAM,CAAC;AAAA,EACP,WAAW,CAAC;AAAA,EACZ,WAAW;AAAA,IACT,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,SAAS,MAAM,QAAQ,OAAO,OAAO,OAAO,KAAK;AAAA,IACjD,WAAW;AAAA,IAEX,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,YAAY;AAAA,IAEZ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa;AAAA,IAEb,oBAAoB;AAAA,MAClB,aAAa,MAAM,OAAO;AAAA,MAC1B,iBAAiB,MAAM,OAAO;AAAA,MAE9B,WAAW;AAAA,QACT,YAAY;AAAA,MAAA;AAAA,IAEhB;AAAA,IAEA,YAAY;AAAA,MACV,aAAa,MAAM,OAAO;AAAA,MAC1B,iBAAiB;AAAA,MAEjB,WAAW;AAAA,QACT,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EAEJ;AAAA,EACA,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,QAAQ;AAAA,EACV;AAAA,EACA,aAAa;AAAA,IACX,YAAY;AAAA,EAAA;AAEhB,CAAC;"}
+{"version":3,"file":"InlineEditor.styles.js","sources":["../../../src/InlineEditor/InlineEditor.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInlineEditor\", {\n  root: {},\n  /** @deprecated unused. use `classes.root::after` instead */\n  inputBorderContainer: {},\n  input: {},\n  inputRoot: {\n    height: \"100%\",\n    minHeight: \"32px\",\n  },\n  text: {},\n  largeText: {},\n  textEmpty: {\n    color: theme.colors.textDisabled,\n  },\n  button: {\n    padding: theme.spacing(0, \"xs\"),\n    minHeight: \"32px\",\n\n    boxSizing: \"border-box\",\n    cursor: \"text\",\n    height: \"100%\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    justifyContent: \"start\",\n    textAlign: \"start\",\n    alignItems: \"center\",\n\n    backgroundColor: theme.colors.bgContainer,\n    borderColor: \"transparent\",\n\n    \"&:hover, &:focus\": {\n      borderColor: theme.colors.primary,\n      backgroundColor: theme.colors.bgContainer,\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n\n    \"&:active\": {\n      borderColor: theme.colors.text,\n      backgroundColor: \"transparent\",\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n  },\n  icon: {\n    cursor: \"pointer\",\n    visibility: \"hidden\",\n    alignSelf: \"center\",\n    height: 16,\n  },\n  iconVisible: {\n    visibility: \"visible\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM,CAAC;AAAA;AAAA,EAEP,sBAAsB,CAAC;AAAA,EACvB,OAAO,CAAC;AAAA,EACR,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,EACb;AAAA,EACA,MAAM,CAAC;AAAA,EACP,WAAW,CAAC;AAAA,EACZ,WAAW;AAAA,IACT,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,SAAS,MAAM,QAAQ,GAAG,IAAI;AAAA,IAC9B,WAAW;AAAA,IAEX,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,YAAY;AAAA,IAEZ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa;AAAA,IAEb,oBAAoB;AAAA,MAClB,aAAa,MAAM,OAAO;AAAA,MAC1B,iBAAiB,MAAM,OAAO;AAAA,MAE9B,WAAW;AAAA,QACT,YAAY;AAAA,MAAA;AAAA,IAEhB;AAAA,IAEA,YAAY;AAAA,MACV,aAAa,MAAM,OAAO;AAAA,MAC1B,iBAAiB;AAAA,MAEjB,WAAW;AAAA,QACT,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EAEJ;AAAA,EACA,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,QAAQ;AAAA,EACV;AAAA,EACA,aAAa;AAAA,IACX,YAAY;AAAA,EAAA;AAEhB,CAAC;"}

package/dist/esm/Input/Input.styles.js

@@ -31,8 +31,8 @@ const { staticClasses, useClasses } = createClasses("HvInput", {
   },
   inputExtension: {
     height: theme.space.xs,
-    backgroundColor: theme.colors.atmo1,
-    boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`
+    backgroundColor: theme.colors.bgContainer,
+    boxShadow: `0px 8px 0px ${theme.colors.bgContainer}, 0px 0px 9px 0px rgba(65,65,65,.12)`
   },
   input: {},
   inputRoot: {

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

@@ -1 +1 @@
-{"version":3,"file":"Input.styles.js","sources":["../../../src/Input/Input.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { suggestionsClasses } from \"../FormElement/Suggestions\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInput\", {\n  root: { display: \"block\" },\n  labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n  label: {},\n  description: {},\n  adornmentsBox: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    height: \"30px\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    marginRight: 1,\n  },\n  icon: { width: \"30px\", height: \"30px\" },\n  adornmentButton: {\n    \":focus-visible,:hover\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  iconClear: { display: \"none\" },\n  hasSuggestions: {},\n  suggestionsContainer: { width: \"100%\", position: \"relative\" },\n  suggestionList: {\n    [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n      width: \"100%\",\n    },\n  },\n  inputExtension: {\n    height: theme.space.xs,\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n  },\n  input: {},\n  inputRoot: {\n    \":is(:hover,:focus-within) $iconClear\": {\n      display: \"block\",\n    },\n  },\n  inputRootFocused: {\n    \"& $iconClear\": {\n      display: \"block\",\n    },\n  },\n  inputRootDisabled: {},\n  inputRootMultiline: { padding: 0 },\n  /** @deprecated unused. use `::after` instead */\n  inputBorderContainer: {},\n  error: {},\n});\n"],"names":["suggestionsClasses"],"mappings":";;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,SAAS,QAAQ;AAAA,EACzB,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,eAAe;AAAA,IACb,SAAS;AAAA,IACT,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf;AAAA,EACA,MAAM,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,EACtC,iBAAiB;AAAA,IACf,yBAAyB;AAAA,MACvB,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA,EACA,WAAW,EAAE,SAAS,OAAO;AAAA,EAC7B,gBAAgB,CAAC;AAAA,EACjB,sBAAsB,EAAE,OAAO,QAAQ,UAAU,WAAW;AAAA,EAC5D,gBAAgB;AAAA,IACd,CAAC,MAAMA,gBAAmB,IAAI,KAAKA,gBAAmB,IAAI,IAAI,GAAG;AAAA,MAC/D,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ,MAAM,MAAM;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,eAAe,MAAM,OAAO,KAAK;AAAA,EAC9C;AAAA,EACA,OAAO,CAAC;AAAA,EACR,WAAW;AAAA,IACT,wCAAwC;AAAA,MACtC,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,kBAAkB;AAAA,IAChB,gBAAgB;AAAA,MACd,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,mBAAmB,CAAC;AAAA,EACpB,oBAAoB,EAAE,SAAS,EAAE;AAAA;AAAA,EAEjC,sBAAsB,CAAC;AAAA,EACvB,OAAO,CAAA;AACT,CAAC;"}
+{"version":3,"file":"Input.styles.js","sources":["../../../src/Input/Input.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { suggestionsClasses } from \"../FormElement/Suggestions\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInput\", {\n  root: { display: \"block\" },\n  labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n  label: {},\n  description: {},\n  adornmentsBox: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    height: \"30px\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    marginRight: 1,\n  },\n  icon: { width: \"30px\", height: \"30px\" },\n  adornmentButton: {\n    \":focus-visible,:hover\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  iconClear: { display: \"none\" },\n  hasSuggestions: {},\n  suggestionsContainer: { width: \"100%\", position: \"relative\" },\n  suggestionList: {\n    [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n      width: \"100%\",\n    },\n  },\n  inputExtension: {\n    height: theme.space.xs,\n    backgroundColor: theme.colors.bgContainer,\n    boxShadow: `0px 8px 0px ${theme.colors.bgContainer}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n  },\n  input: {},\n  inputRoot: {\n    \":is(:hover,:focus-within) $iconClear\": {\n      display: \"block\",\n    },\n  },\n  inputRootFocused: {\n    \"& $iconClear\": {\n      display: \"block\",\n    },\n  },\n  inputRootDisabled: {},\n  inputRootMultiline: { padding: 0 },\n  /** @deprecated unused. use `::after` instead */\n  inputBorderContainer: {},\n  error: {},\n});\n"],"names":["suggestionsClasses"],"mappings":";;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,SAAS,QAAQ;AAAA,EACzB,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,eAAe;AAAA,IACb,SAAS;AAAA,IACT,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf;AAAA,EACA,MAAM,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,EACtC,iBAAiB;AAAA,IACf,yBAAyB;AAAA,MACvB,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA,EACA,WAAW,EAAE,SAAS,OAAO;AAAA,EAC7B,gBAAgB,CAAC;AAAA,EACjB,sBAAsB,EAAE,OAAO,QAAQ,UAAU,WAAW;AAAA,EAC5D,gBAAgB;AAAA,IACd,CAAC,MAAMA,gBAAmB,IAAI,KAAKA,gBAAmB,IAAI,IAAI,GAAG;AAAA,MAC/D,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ,MAAM,MAAM;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,eAAe,MAAM,OAAO,WAAW;AAAA,EACpD;AAAA,EACA,OAAO,CAAC;AAAA,EACR,WAAW;AAAA,IACT,wCAAwC;AAAA,MACtC,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,kBAAkB;AAAA,IAChB,gBAAgB;AAAA,MACd,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,mBAAmB,CAAC;AAAA,EACpB,oBAAoB,EAAE,SAAS,EAAE;AAAA;AAAA,EAEjC,sBAAsB,CAAC;AAAA,EACvB,OAAO,CAAA;AACT,CAAC;"}

package/dist/esm/List/List.styles.js

@@ -24,7 +24,7 @@ const { staticClasses, useClasses } = createClasses("HvList", {
   item: {},
   itemSelector: {
     "&:not(:hover):not(.HvIsFocused):not(:focus-within)": {
-      backgroundColor: theme.colors.containerBackgroundHover
+      backgroundColor: theme.colors.bgHover
     }
   },
   link: {

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

@@ -1 +1 @@
-{"version":3,"file":"List.styles.js","sources":["../../../src/List/List.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvList\", {\n  root: {},\n  virtualizedRoot: { marginBottom: 5 },\n  selectorRoot: { width: \"100%\", zIndex: 0 },\n  selectorContainer: {\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:focus-within\": {\n      backgroundColor: \"transparent\",\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  box: { width: \"32px\", height: \"32px\", marginLeft: \"auto\" },\n  truncate: {\n    display: \"inline-block\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  item: {},\n  itemSelector: {\n    \"&:not(:hover):not(.HvIsFocused):not(:focus-within)\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n  },\n  link: {\n    ...theme.typography.body,\n    textDecoration: \"none\",\n\n    \"&:focus\": {\n      boxShadow: \"unset !important\",\n    },\n  },\n  selectAllSelector: {\n    width: \"100%\",\n    margin: \"0 0 2px 0\",\n\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&:focus-within\": {\n      zIndex: 1,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM,CAAC;AAAA,EACP,iBAAiB,EAAE,cAAc,EAAE;AAAA,EACnC,cAAc,EAAE,OAAO,QAAQ,QAAQ,EAAE;AAAA,EACzC,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACT,iBAAiB;AAAA,IACnB;AAAA,IAEA,kBAAkB;AAAA,MAChB,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,KAAK,EAAE,OAAO,QAAQ,QAAQ,QAAQ,YAAY,OAAO;AAAA,EACzD,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,MAAM,CAAC;AAAA,EACP,cAAc;AAAA,IACZ,sDAAsD;AAAA,MACpD,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,MAAM;AAAA,IACJ,GAAG,MAAM,WAAW;AAAA,IACpB,gBAAgB;AAAA,IAEhB,WAAW;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,QAAQ;AAAA,IAER,UAAU;AAAA,IACV,QAAQ;AAAA;AAAA,IAGR,kBAAkB;AAAA,MAChB,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,CAAC;"}
+{"version":3,"file":"List.styles.js","sources":["../../../src/List/List.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvList\", {\n  root: {},\n  virtualizedRoot: { marginBottom: 5 },\n  selectorRoot: { width: \"100%\", zIndex: 0 },\n  selectorContainer: {\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:focus-within\": {\n      backgroundColor: \"transparent\",\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  box: { width: \"32px\", height: \"32px\", marginLeft: \"auto\" },\n  truncate: {\n    display: \"inline-block\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  item: {},\n  itemSelector: {\n    \"&:not(:hover):not(.HvIsFocused):not(:focus-within)\": {\n      backgroundColor: theme.colors.bgHover,\n    },\n  },\n  link: {\n    ...theme.typography.body,\n    textDecoration: \"none\",\n\n    \"&:focus\": {\n      boxShadow: \"unset !important\",\n    },\n  },\n  selectAllSelector: {\n    width: \"100%\",\n    margin: \"0 0 2px 0\",\n\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&:focus-within\": {\n      zIndex: 1,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM,CAAC;AAAA,EACP,iBAAiB,EAAE,cAAc,EAAE;AAAA,EACnC,cAAc,EAAE,OAAO,QAAQ,QAAQ,EAAE;AAAA,EACzC,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACT,iBAAiB;AAAA,IACnB;AAAA,IAEA,kBAAkB;AAAA,MAChB,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,KAAK,EAAE,OAAO,QAAQ,QAAQ,QAAQ,YAAY,OAAO;AAAA,EACzD,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,MAAM,CAAC;AAAA,EACP,cAAc;AAAA,IACZ,sDAAsD;AAAA,MACpD,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,MAAM;AAAA,IACJ,GAAG,MAAM,WAAW;AAAA,IACpB,gBAAgB;AAAA,IAEhB,WAAW;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,QAAQ;AAAA,IAER,UAAU;AAAA,IACV,QAAQ;AAAA;AAAA,IAGR,kBAAkB;AAAA,MAChB,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,CAAC;"}

package/dist/esm/ListContainer/ListItem/ListItem.styles.js

@@ -22,11 +22,11 @@ const { staticClasses, useClasses } = createClasses("HvListItem", {
     },
     "&.HvIsFocused": {
       ...outlineStyles,
-      backgroundColor: theme.colors.atmo3,
+      backgroundColor: theme.colors.bgPageSecondary,
       zIndex: 2
     }
   },
-  focus: { backgroundColor: theme.colors.atmo3, zIndex: 2 },
+  focus: { backgroundColor: theme.colors.bgPageSecondary, zIndex: 2 },
   startAdornment: {},
   endAdornment: {},
   gutters: {
@@ -42,16 +42,16 @@ const { staticClasses, useClasses } = createClasses("HvListItem", {
   interactive: {
     cursor: "pointer",
     "&:not($disabled):not($selected):hover": {
-      backgroundColor: theme.colors.containerBackgroundHover
+      backgroundColor: theme.colors.bgHover
     },
     "&$disabled": {
       cursor: "not-allowed"
     }
   },
-  selected: { backgroundColor: theme.colors.containerBackgroundHover },
+  selected: { backgroundColor: theme.colors.bgHover },
   disabled: {
-    color: theme.colors.secondary_60,
-    backgroundColor: theme.colors.atmo3
+    color: theme.colors.textDisabled,
+    backgroundColor: theme.colors.bgDisabled
   },
   withStartAdornment: {
     "& > div": {

package/dist/esm/ListContainer/ListItem/ListItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.js","sources":["../../../../src/ListContainer/ListItem/ListItem.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListItem\", {\n  root: {\n    ...theme.typography.body,\n    padding: 0,\n    display: \"block\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    listStyleType: \"none\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    position: \"relative\",\n    alignContent: \"center\",\n\n    \"&:not(:last-child)\": {\n      marginBottom: \"8px\",\n    },\n\n    \"&$condensed\": {\n      marginBottom: 0,\n    },\n\n    \"&.HvIsFocused\": {\n      ...outlineStyles,\n      backgroundColor: theme.colors.atmo3,\n      zIndex: 2,\n    },\n  },\n  focus: { backgroundColor: theme.colors.atmo3, zIndex: 2 },\n  startAdornment: {},\n  endAdornment: {},\n  gutters: {\n    padding: `0 ${theme.space.xs}`,\n\n    \"&$withStartAdornment\": {\n      paddingLeft: 0,\n    },\n    \"&$withEndAdornment\": {\n      paddingRight: 0,\n    },\n  },\n  condensed: {},\n  interactive: {\n    cursor: \"pointer\",\n    \"&:not($disabled):not($selected):hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n    \"&$disabled\": {\n      cursor: \"not-allowed\",\n    },\n  },\n  selected: { backgroundColor: theme.colors.containerBackgroundHover },\n  disabled: {\n    color: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo3,\n  },\n  withStartAdornment: {\n    \"& > div\": {\n      float: \"left\",\n    },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n  },\n  withEndAdornment: {\n    \"& > div\": { float: \"right\" },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,GAAG,MAAM,WAAW;AAAA,IACpB,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,cAAc;AAAA,IAEd,sBAAsB;AAAA,MACpB,cAAc;AAAA,IAChB;AAAA,IAEA,eAAe;AAAA,MACb,cAAc;AAAA,IAChB;AAAA,IAEA,iBAAiB;AAAA,MACf,GAAG;AAAA,MACH,iBAAiB,MAAM,OAAO;AAAA,MAC9B,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,OAAO,EAAE,iBAAiB,MAAM,OAAO,OAAO,QAAQ,EAAE;AAAA,EACxD,gBAAgB,CAAC;AAAA,EACjB,cAAc,CAAC;AAAA,EACf,SAAS;AAAA,IACP,SAAS,KAAK,MAAM,MAAM,EAAE;AAAA,IAE5B,wBAAwB;AAAA,MACtB,aAAa;AAAA,IACf;AAAA,IACA,sBAAsB;AAAA,MACpB,cAAc;AAAA,IAAA;AAAA,EAElB;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,yCAAyC;AAAA,MACvC,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,cAAc;AAAA,MACZ,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,UAAU,EAAE,iBAAiB,MAAM,OAAO,yBAAyB;AAAA,EACnE,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,oBAAoB;AAAA,IAClB,WAAW;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IAEA,SAAS;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,kBAAkB;AAAA,IAChB,WAAW,EAAE,OAAO,QAAQ;AAAA,IAE5B,SAAS;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,CAAC;"}
+{"version":3,"file":"ListItem.styles.js","sources":["../../../../src/ListContainer/ListItem/ListItem.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListItem\", {\n  root: {\n    ...theme.typography.body,\n    padding: 0,\n    display: \"block\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    listStyleType: \"none\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    position: \"relative\",\n    alignContent: \"center\",\n\n    \"&:not(:last-child)\": {\n      marginBottom: \"8px\",\n    },\n\n    \"&$condensed\": {\n      marginBottom: 0,\n    },\n\n    \"&.HvIsFocused\": {\n      ...outlineStyles,\n      backgroundColor: theme.colors.bgPageSecondary,\n      zIndex: 2,\n    },\n  },\n  focus: { backgroundColor: theme.colors.bgPageSecondary, zIndex: 2 },\n  startAdornment: {},\n  endAdornment: {},\n  gutters: {\n    padding: `0 ${theme.space.xs}`,\n\n    \"&$withStartAdornment\": {\n      paddingLeft: 0,\n    },\n    \"&$withEndAdornment\": {\n      paddingRight: 0,\n    },\n  },\n  condensed: {},\n  interactive: {\n    cursor: \"pointer\",\n    \"&:not($disabled):not($selected):hover\": {\n      backgroundColor: theme.colors.bgHover,\n    },\n    \"&$disabled\": {\n      cursor: \"not-allowed\",\n    },\n  },\n  selected: { backgroundColor: theme.colors.bgHover },\n  disabled: {\n    color: theme.colors.textDisabled,\n    backgroundColor: theme.colors.bgDisabled,\n  },\n  withStartAdornment: {\n    \"& > div\": {\n      float: \"left\",\n    },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n  },\n  withEndAdornment: {\n    \"& > div\": { float: \"right\" },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,GAAG,MAAM,WAAW;AAAA,IACpB,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,cAAc;AAAA,IAEd,sBAAsB;AAAA,MACpB,cAAc;AAAA,IAChB;AAAA,IAEA,eAAe;AAAA,MACb,cAAc;AAAA,IAChB;AAAA,IAEA,iBAAiB;AAAA,MACf,GAAG;AAAA,MACH,iBAAiB,MAAM,OAAO;AAAA,MAC9B,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,OAAO,EAAE,iBAAiB,MAAM,OAAO,iBAAiB,QAAQ,EAAE;AAAA,EAClE,gBAAgB,CAAC;AAAA,EACjB,cAAc,CAAC;AAAA,EACf,SAAS;AAAA,IACP,SAAS,KAAK,MAAM,MAAM,EAAE;AAAA,IAE5B,wBAAwB;AAAA,MACtB,aAAa;AAAA,IACf;AAAA,IACA,sBAAsB;AAAA,MACpB,cAAc;AAAA,IAAA;AAAA,EAElB;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,yCAAyC;AAAA,MACvC,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,cAAc;AAAA,MACZ,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,UAAU,EAAE,iBAAiB,MAAM,OAAO,QAAQ;AAAA,EAClD,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,oBAAoB;AAAA,IAClB,WAAW;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IAEA,SAAS;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,kBAAkB;AAAA,IAChB,WAAW,EAAE,OAAO,QAAQ;AAAA,IAE5B,SAAS;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,CAAC;"}

package/dist/esm/Loading/Loading.js

@@ -25,7 +25,7 @@ const HvLoading = forwardRef(function HvLoading2(props, ref) {
       ref,
       hidden: !!hidden,
       style: mergeStyles(style, {
-        color: getColor(color, small ? "secondary" : "brand"),
+        color: getColor(color, small ? "text" : "brand"),
         "--customColor": getColor(color)
       }),
       className: cx(

package/dist/esm/Loading/Loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loading.js","sources":["../../../src/Loading/Loading.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { range } from \"../utils/helpers\";\nimport { staticClasses, useClasses } from \"./Loading.styles\";\n\nexport { staticClasses as loadingClasses };\n\nexport type HvLoadingClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoadingProps extends HvBaseProps {\n  /** Indicates if the component should be render in a small size. */\n  small?: boolean;\n  /** The label to be displayed.  */\n  label?: React.ReactNode;\n  /** Whether the loading animation is hidden. */\n  hidden?: boolean;\n  /** Color applied to the bars. */\n  color?: HvColorAny;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLoadingClasses;\n}\n\n/**\n * Loading provides feedback about a process that is taking place in the application.\n */\nexport const HvLoading = forwardRef<\n  // no-indent\n  React.ComponentRef<\"div\">,\n  HvLoadingProps\n>(function HvLoading(props, ref) {\n  const {\n    color,\n    hidden,\n    small,\n    label,\n    classes: classesProp,\n    style,\n    className,\n    ...others\n  } = useDefaultProps(\"HvLoading\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const size = small ? \"small\" : \"regular\";\n  const colorVariant = color && (`${size}Color` as const);\n\n  return (\n    <div\n      ref={ref}\n      hidden={!!hidden}\n      style={mergeStyles(style, {\n        color: getColor(color, small ? \"secondary\" : \"brand\"),\n        \"--customColor\": getColor(color),\n      })}\n      className={cx(\n        classes.root,\n        {\n          [classes.hidden]: hidden,\n        },\n        className,\n      )}\n      {...others}\n    >\n      <div className={classes.barContainer}>\n        {range(3).map((e) => (\n          <div\n            key={e}\n            className={cx(\n              classes.loadingBar,\n              // TODO: hoist to parent & remove unused `colorVariant` in v6\n              classes[size],\n              classes[colorVariant!],\n            )}\n          />\n        ))}\n      </div>\n      {label && <div className={classes.label}>{label}</div>}\n    </div>\n  );\n});\n"],"names":["HvLoading"],"mappings":";;;;;;;AAgCO,MAAM,YAAY,WAIvB,SAASA,WAAU,OAAO,KAAK;AACzB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEtC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,OAAO,QAAQ,UAAU;AACzB,QAAA,eAAe,SAAU,GAAG,IAAI;AAGpC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,QAAQ,CAAC,CAAC;AAAA,MACV,OAAO,YAAY,OAAO;AAAA,QACxB,OAAO,SAAS,OAAO,QAAQ,cAAc,OAAO;AAAA,QACpD,iBAAiB,SAAS,KAAK;AAAA,MAAA,CAChC;AAAA,MACD,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG;AAAA,QACpB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,cACrB,gBAAM,CAAC,EAAE,IAAI,CAAC,MACb;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAW;AAAA,cACT,QAAQ;AAAA;AAAA,cAER,QAAQ,IAAI;AAAA,cACZ,QAAQ,YAAa;AAAA,YAAA;AAAA,UACvB;AAAA,UANK;AAAA,QAQR,CAAA,GACH;AAAA,QACC,SAAU,oBAAA,OAAA,EAAI,WAAW,QAAQ,OAAQ,UAAM,MAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAClD;AAEJ,CAAC;"}
+{"version":3,"file":"Loading.js","sources":["../../../src/Loading/Loading.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { range } from \"../utils/helpers\";\nimport { staticClasses, useClasses } from \"./Loading.styles\";\n\nexport { staticClasses as loadingClasses };\n\nexport type HvLoadingClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoadingProps extends HvBaseProps {\n  /** Indicates if the component should be render in a small size. */\n  small?: boolean;\n  /** The label to be displayed.  */\n  label?: React.ReactNode;\n  /** Whether the loading animation is hidden. */\n  hidden?: boolean;\n  /** Color applied to the bars. */\n  color?: HvColorAny;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLoadingClasses;\n}\n\n/**\n * Loading provides feedback about a process that is taking place in the application.\n */\nexport const HvLoading = forwardRef<\n  // no-indent\n  React.ComponentRef<\"div\">,\n  HvLoadingProps\n>(function HvLoading(props, ref) {\n  const {\n    color,\n    hidden,\n    small,\n    label,\n    classes: classesProp,\n    style,\n    className,\n    ...others\n  } = useDefaultProps(\"HvLoading\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const size = small ? \"small\" : \"regular\";\n  const colorVariant = color && (`${size}Color` as const);\n\n  return (\n    <div\n      ref={ref}\n      hidden={!!hidden}\n      style={mergeStyles(style, {\n        color: getColor(color, small ? \"text\" : \"brand\"),\n        \"--customColor\": getColor(color),\n      })}\n      className={cx(\n        classes.root,\n        {\n          [classes.hidden]: hidden,\n        },\n        className,\n      )}\n      {...others}\n    >\n      <div className={classes.barContainer}>\n        {range(3).map((e) => (\n          <div\n            key={e}\n            className={cx(\n              classes.loadingBar,\n              // TODO: hoist to parent & remove unused `colorVariant` in v6\n              classes[size],\n              classes[colorVariant!],\n            )}\n          />\n        ))}\n      </div>\n      {label && <div className={classes.label}>{label}</div>}\n    </div>\n  );\n});\n"],"names":["HvLoading"],"mappings":";;;;;;;AAgCO,MAAM,YAAY,WAIvB,SAASA,WAAU,OAAO,KAAK;AACzB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEtC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,OAAO,QAAQ,UAAU;AACzB,QAAA,eAAe,SAAU,GAAG,IAAI;AAGpC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,QAAQ,CAAC,CAAC;AAAA,MACV,OAAO,YAAY,OAAO;AAAA,QACxB,OAAO,SAAS,OAAO,QAAQ,SAAS,OAAO;AAAA,QAC/C,iBAAiB,SAAS,KAAK;AAAA,MAAA,CAChC;AAAA,MACD,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG;AAAA,QACpB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,cACrB,gBAAM,CAAC,EAAE,IAAI,CAAC,MACb;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAW;AAAA,cACT,QAAQ;AAAA;AAAA,cAER,QAAQ,IAAI;AAAA,cACZ,QAAQ,YAAa;AAAA,YAAA;AAAA,UACvB;AAAA,UANK;AAAA,QAQR,CAAA,GACH;AAAA,QACC,SAAU,oBAAA,OAAA,EAAI,WAAW,QAAQ,OAAQ,UAAM,MAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAClD;AAEJ,CAAC;"}

package/dist/esm/Loading/Loading.styles.js

@@ -32,7 +32,7 @@ const { staticClasses, useClasses } = createClasses("HvLoading", {
     "@keyframes loading": {
       "50%": {
         height: "var(--height, 60%)",
-        backgroundColor: `var(--customColor, ${theme.colors.secondary})`
+        backgroundColor: `var(--customColor, ${theme.colors.text})`
       }
     },
     ":nth-of-type(2)": { animationDelay: "0.22s" },

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

@@ -1 +1 @@
-{"version":3,"file":"Loading.styles.js","sources":["../../../src/Loading/Loading.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLoading\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: theme.space.xs,\n  },\n  barContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n\n    \":has($regular)\": {\n      width: 30,\n      height: 30,\n    },\n\n    \":has($small)\": {\n      \"--height\": \"40%\",\n      width: 18,\n      height: 18,\n    },\n  },\n  loadingBar: {\n    backgroundColor: \"currentcolor\",\n    display: \"inline-block\",\n    animation: \"loading 1s ease-in-out infinite\",\n    // TODO: make this the default when it has better support\n    width: \"round(up, 0.11em, 2px)\",\n    height: \"100%\",\n\n    \"@keyframes loading\": {\n      \"50%\": {\n        height: \"var(--height, 60%)\",\n        backgroundColor: `var(--customColor, ${theme.colors.secondary})`,\n      },\n    },\n\n    \":nth-of-type(2)\": { animationDelay: \"0.22s\" },\n    \":nth-of-type(3)\": { animationDelay: \"0.44s\" },\n  },\n  label: {\n    ...theme.typography.caption1,\n  },\n  overlay: {},\n  blur: {},\n  hidden: { display: \"none\" },\n  small: {\n    width: 2,\n  },\n  regular: {\n    width: 4,\n  },\n  smallColor: {},\n  regularColor: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,aAAa;AAAA,EACtE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAEhB,kBAAkB;AAAA,MAChB,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IAEA,gBAAgB;AAAA,MACd,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,YAAY;AAAA,IACV,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,WAAW;AAAA;AAAA,IAEX,OAAO;AAAA,IACP,QAAQ;AAAA,IAER,sBAAsB;AAAA,MACpB,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,iBAAiB,sBAAsB,MAAM,OAAO,SAAS;AAAA,MAAA;AAAA,IAEjE;AAAA,IAEA,mBAAmB,EAAE,gBAAgB,QAAQ;AAAA,IAC7C,mBAAmB,EAAE,gBAAgB,QAAQ;AAAA,EAC/C;AAAA,EACA,OAAO;AAAA,IACL,GAAG,MAAM,WAAW;AAAA,EACtB;AAAA,EACA,SAAS,CAAC;AAAA,EACV,MAAM,CAAC;AAAA,EACP,QAAQ,EAAE,SAAS,OAAO;AAAA,EAC1B,OAAO;AAAA,IACL,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,YAAY,CAAC;AAAA,EACb,cAAc,CAAA;AAChB,CAAC;"}
+{"version":3,"file":"Loading.styles.js","sources":["../../../src/Loading/Loading.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLoading\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: theme.space.xs,\n  },\n  barContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n\n    \":has($regular)\": {\n      width: 30,\n      height: 30,\n    },\n\n    \":has($small)\": {\n      \"--height\": \"40%\",\n      width: 18,\n      height: 18,\n    },\n  },\n  loadingBar: {\n    backgroundColor: \"currentcolor\",\n    display: \"inline-block\",\n    animation: \"loading 1s ease-in-out infinite\",\n    // TODO: make this the default when it has better support\n    width: \"round(up, 0.11em, 2px)\",\n    height: \"100%\",\n\n    \"@keyframes loading\": {\n      \"50%\": {\n        height: \"var(--height, 60%)\",\n        backgroundColor: `var(--customColor, ${theme.colors.text})`,\n      },\n    },\n\n    \":nth-of-type(2)\": { animationDelay: \"0.22s\" },\n    \":nth-of-type(3)\": { animationDelay: \"0.44s\" },\n  },\n  label: {\n    ...theme.typography.caption1,\n  },\n  overlay: {},\n  blur: {},\n  hidden: { display: \"none\" },\n  small: {\n    width: 2,\n  },\n  regular: {\n    width: 4,\n  },\n  smallColor: {},\n  regularColor: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,aAAa;AAAA,EACtE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAEhB,kBAAkB;AAAA,MAChB,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IAEA,gBAAgB;AAAA,MACd,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,YAAY;AAAA,IACV,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,WAAW;AAAA;AAAA,IAEX,OAAO;AAAA,IACP,QAAQ;AAAA,IAER,sBAAsB;AAAA,MACpB,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,iBAAiB,sBAAsB,MAAM,OAAO,IAAI;AAAA,MAAA;AAAA,IAE5D;AAAA,IAEA,mBAAmB,EAAE,gBAAgB,QAAQ;AAAA,IAC7C,mBAAmB,EAAE,gBAAgB,QAAQ;AAAA,EAC/C;AAAA,EACA,OAAO;AAAA,IACL,GAAG,MAAM,WAAW;AAAA,EACtB;AAAA,EACA,SAAS,CAAC;AAAA,EACV,MAAM,CAAC;AAAA,EACP,QAAQ,EAAE,SAAS,OAAO;AAAA,EAC1B,OAAO;AAAA,IACL,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,YAAY,CAAC;AAAA,EACb,cAAc,CAAA;AAChB,CAAC;"}

package/dist/esm/LoadingContainer/LoadingContainer.styles.js

@@ -11,7 +11,7 @@ const { staticClasses, useClasses } = createClasses("HvLoadingContainer", {
     inset: 0,
     zIndex: theme.zIndices.overlay,
     transition: "background-color .2s ease",
-    backgroundColor: theme.alpha("atmo1", "var(--opacity, 80%)")
+    backgroundColor: theme.alpha("bgContainer", "var(--opacity, 80%)")
   }
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingContainer.styles.js","sources":["../../../src/LoadingContainer/LoadingContainer.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst { staticClasses, useClasses } = createClasses(\"HvLoadingContainer\", {\n  root: {\n    position: \"relative\",\n    height: \"inherit\",\n  },\n  loading: {\n    position: \"absolute\",\n    userSelect: \"none\",\n    inset: 0,\n    zIndex: theme.zIndices.overlay,\n    transition: \"background-color .2s ease\",\n    backgroundColor: theme.alpha(\"atmo1\", \"var(--opacity, 80%)\"),\n  },\n});\n\nexport { staticClasses, useClasses };\n"],"names":[],"mappings":";;AAGA,MAAM,EAAE,eAAe,eAAe,cAAc,sBAAsB;AAAA,EACxE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ,MAAM,SAAS;AAAA,IACvB,YAAY;AAAA,IACZ,iBAAiB,MAAM,MAAM,SAAS,qBAAqB;AAAA,EAAA;AAE/D,CAAC;"}
+{"version":3,"file":"LoadingContainer.styles.js","sources":["../../../src/LoadingContainer/LoadingContainer.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst { staticClasses, useClasses } = createClasses(\"HvLoadingContainer\", {\n  root: {\n    position: \"relative\",\n    height: \"inherit\",\n  },\n  loading: {\n    position: \"absolute\",\n    userSelect: \"none\",\n    inset: 0,\n    zIndex: theme.zIndices.overlay,\n    transition: \"background-color .2s ease\",\n    backgroundColor: theme.alpha(\"bgContainer\", \"var(--opacity, 80%)\"),\n  },\n});\n\nexport { staticClasses, useClasses };\n"],"names":[],"mappings":";;AAGA,MAAM,EAAE,eAAe,eAAe,cAAc,sBAAsB;AAAA,EACxE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ,MAAM,SAAS;AAAA,IACvB,YAAY;AAAA,IACZ,iBAAiB,MAAM,MAAM,eAAe,qBAAqB;AAAA,EAAA;AAErE,CAAC;"}

package/dist/esm/Login/Login.styles.js

@@ -11,7 +11,7 @@ const { staticClasses, useClasses } = createClasses("HvLogin", {
     margin: "-1px 0 0 0"
   },
   formContainer: {
-    background: theme.colors.atmo2,
+    background: theme.colors.bgPage,
     marginLeft: "auto",
     maxWidth: 500,
     height: "100%"

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

@@ -1 +1 @@
-{"version":3,"file":"Login.styles.js","sources":["../../../src/Login/Login.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLogin\", {\n  root: {\n    backgroundRepeat: \"no-repeat\",\n    backgroundPosition: \"bottom\",\n    backgroundSize: \"cover\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: 0,\n    margin: \"-1px 0 0 0\",\n  },\n  formContainer: {\n    background: theme.colors.atmo2,\n    marginLeft: \"auto\",\n    maxWidth: 500,\n    height: \"100%\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,eAAe;AAAA,IACb,YAAY,MAAM,OAAO;AAAA,IACzB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,EAAA;AAEZ,CAAC;"}
+{"version":3,"file":"Login.styles.js","sources":["../../../src/Login/Login.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLogin\", {\n  root: {\n    backgroundRepeat: \"no-repeat\",\n    backgroundPosition: \"bottom\",\n    backgroundSize: \"cover\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: 0,\n    margin: \"-1px 0 0 0\",\n  },\n  formContainer: {\n    background: theme.colors.bgPage,\n    marginLeft: \"auto\",\n    maxWidth: 500,\n    height: \"100%\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,eAAe;AAAA,IACb,YAAY,MAAM,OAAO;AAAA,IACzB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,EAAA;AAEZ,CAAC;"}