@hitachivantara/uikit-react-core 5.89.0 → 5.91.0

package/dist/esm/Calendar/CalendarNavigation/Navigation/Navigation.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.styles.js","sources":["../../../../../src/Calendar/CalendarNavigation/Navigation/Navigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvNavigation\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    gap: theme.space.xs,\n  },\n  icon: {},\n  disabled: {},\n  text: {\n    minWidth: \"unset\",\n    flex: 1,\n    color: theme.colors.secondary,\n    fontWeight: theme.typography.body.fontWeight,\n    padding: 0,\n  },\n  textWithoutHover: {\n    pointerEvents: \"none\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,MAAM,CAAC;AAAA,EACP,UAAU,CAAC;AAAA,EACX,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO,MAAM,OAAO;AAAA,IACpB,YAAY,MAAM,WAAW,KAAK;AAAA,IAClC,SAAS;AAAA,EACX;AAAA,EACA,kBAAkB;AAAA,IAChB,eAAe;AAAA,EAAA;AAEnB,CAAC;"}
+{"version":3,"file":"Navigation.styles.js","sources":["../../../../../src/Calendar/CalendarNavigation/Navigation/Navigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvNavigation\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    gap: theme.space.xs,\n  },\n  icon: {},\n  disabled: {},\n  text: {\n    minWidth: \"unset\",\n    flex: 1,\n    color: theme.colors.text,\n    fontWeight: theme.typography.body.fontWeight,\n    padding: 0,\n  },\n  textWithoutHover: {\n    pointerEvents: \"none\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,MAAM,CAAC;AAAA,EACP,UAAU,CAAC;AAAA,EACX,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO,MAAM,OAAO;AAAA,IACpB,YAAY,MAAM,WAAW,KAAK;AAAA,IAClC,SAAS;AAAA,EACX;AAAA,EACA,kBAAkB;AAAA,IAChB,eAAe;AAAA,EAAA;AAEnB,CAAC;"}

package/dist/esm/Calendar/SingleCalendar/CalendarCell.styles.js

@@ -1,7 +1,7 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const hover = {
-  backgroundColor: theme.colors.containerBackgroundHover,
+  backgroundColor: theme.colors.bgHover,
   cursor: "pointer"
 };
 const { staticClasses, useClasses } = createClasses("HvCalendarCell", {
@@ -15,28 +15,28 @@ const { staticClasses, useClasses } = createClasses("HvCalendarCell", {
     width: "40px"
   },
   calendarDateSelected: {
-    backgroundColor: theme.colors.atmo3,
-    color: theme.colors.secondary,
+    backgroundColor: theme.colors.bgPageSecondary,
+    color: theme.colors.text,
     "&:hover": {
       ...hover
     }
   },
   calendarDateNotInMonth: {
-    color: theme.colors.secondary_60,
+    color: theme.colors.textDisabled,
     cursor: "not-allowed"
   },
   calendarDateInSelectionRange: {
-    backgroundColor: theme.colors.atmo3
+    backgroundColor: theme.colors.bgPageSecondary
   },
   calendarDateDisabled: {
-    color: theme.colors.secondary_60,
+    color: theme.colors.textDisabled,
     cursor: "no-drop"
   },
   startBookend: {
-    borderLeft: `1px solid ${theme.colors.secondary}`
+    borderLeft: `1px solid ${theme.colors.text}`
   },
   endBookend: {
-    borderRight: `1px solid ${theme.colors.secondary}`
+    borderRight: `1px solid ${theme.colors.text}`
   },
   dateWrapper: {
     width: "40px",

package/dist/esm/Calendar/SingleCalendar/CalendarCell.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarCell.styles.js","sources":["../../../../src/Calendar/SingleCalendar/CalendarCell.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst hover = {\n  backgroundColor: theme.colors.containerBackgroundHover,\n  cursor: \"pointer\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarCell\", {\n  cellContainer: {},\n  calendarDate: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    flexDirection: \"column\",\n    textAlign: \"center\",\n    height: \"40px\",\n    width: \"40px\",\n  },\n  calendarDateSelected: {\n    backgroundColor: theme.colors.atmo3,\n    color: theme.colors.secondary,\n    \"&:hover\": {\n      ...hover,\n    },\n  },\n  calendarDateNotInMonth: {\n    color: theme.colors.secondary_60,\n    cursor: \"not-allowed\",\n  },\n  calendarDateInSelectionRange: {\n    backgroundColor: theme.colors.atmo3,\n  },\n  calendarDateDisabled: {\n    color: theme.colors.secondary_60,\n    cursor: \"no-drop\",\n  },\n  startBookend: {\n    borderLeft: `1px solid ${theme.colors.secondary}`,\n  },\n  endBookend: {\n    borderRight: `1px solid ${theme.colors.secondary}`,\n  },\n  dateWrapper: {\n    width: \"40px\",\n    height: \"40px\",\n  },\n  cellsInRange: {\n    \"&:focus\": {\n      outside: \"none\",\n    },\n  },\n  cellsOutsideRange: {\n    \"&:focus\": {\n      outside: \"none\",\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,QAAQ;AAAA,EACZ,iBAAiB,MAAM,OAAO;AAAA,EAC9B,QAAQ;AACV;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,eAAe,CAAC;AAAA,EAChB,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,sBAAsB;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,IACpB,WAAW;AAAA,MACT,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,wBAAwB;AAAA,IACtB,OAAO,MAAM,OAAO;AAAA,IACpB,QAAQ;AAAA,EACV;AAAA,EACA,8BAA8B;AAAA,IAC5B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,sBAAsB;AAAA,IACpB,OAAO,MAAM,OAAO;AAAA,IACpB,QAAQ;AAAA,EACV;AAAA,EACA,cAAc;AAAA,IACZ,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,EACjD;AAAA,EACA,YAAY;AAAA,IACV,aAAa,aAAa,MAAM,OAAO,SAAS;AAAA,EAClD;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,cAAc;AAAA,IACZ,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,CAAC;"}
+{"version":3,"file":"CalendarCell.styles.js","sources":["../../../../src/Calendar/SingleCalendar/CalendarCell.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst hover = {\n  backgroundColor: theme.colors.bgHover,\n  cursor: \"pointer\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarCell\", {\n  cellContainer: {},\n  calendarDate: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    flexDirection: \"column\",\n    textAlign: \"center\",\n    height: \"40px\",\n    width: \"40px\",\n  },\n  calendarDateSelected: {\n    backgroundColor: theme.colors.bgPageSecondary,\n    color: theme.colors.text,\n    \"&:hover\": {\n      ...hover,\n    },\n  },\n  calendarDateNotInMonth: {\n    color: theme.colors.textDisabled,\n    cursor: \"not-allowed\",\n  },\n  calendarDateInSelectionRange: {\n    backgroundColor: theme.colors.bgPageSecondary,\n  },\n  calendarDateDisabled: {\n    color: theme.colors.textDisabled,\n    cursor: \"no-drop\",\n  },\n  startBookend: {\n    borderLeft: `1px solid ${theme.colors.text}`,\n  },\n  endBookend: {\n    borderRight: `1px solid ${theme.colors.text}`,\n  },\n  dateWrapper: {\n    width: \"40px\",\n    height: \"40px\",\n  },\n  cellsInRange: {\n    \"&:focus\": {\n      outside: \"none\",\n    },\n  },\n  cellsOutsideRange: {\n    \"&:focus\": {\n      outside: \"none\",\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,QAAQ;AAAA,EACZ,iBAAiB,MAAM,OAAO;AAAA,EAC9B,QAAQ;AACV;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,eAAe,CAAC;AAAA,EAChB,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,sBAAsB;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,IACpB,WAAW;AAAA,MACT,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,wBAAwB;AAAA,IACtB,OAAO,MAAM,OAAO;AAAA,IACpB,QAAQ;AAAA,EACV;AAAA,EACA,8BAA8B;AAAA,IAC5B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,sBAAsB;AAAA,IACpB,OAAO,MAAM,OAAO;AAAA,IACpB,QAAQ;AAAA,EACV;AAAA,EACA,cAAc;AAAA,IACZ,YAAY,aAAa,MAAM,OAAO,IAAI;AAAA,EAC5C;AAAA,EACA,YAAY;AAAA,IACV,aAAa,aAAa,MAAM,OAAO,IAAI;AAAA,EAC7C;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,cAAc;AAAA,IACZ,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,CAAC;"}

package/dist/esm/Calendar/SingleCalendar/SingleCalendar.styles.js

@@ -8,34 +8,34 @@ const { staticClasses, useClasses } = createClasses("HvSingleCalendar", {
     display: "grid",
     gridTemplateColumns: "repeat(7, 1fr)",
     "& $cellsInRange": {
-      backgroundColor: theme.colors.atmo3,
+      backgroundColor: theme.colors.bgPageSecondary,
       "& $startBookend": {
-        borderLeft: `1px solid ${theme.colors.secondary}`,
-        backgroundColor: theme.colors.atmo3,
+        borderLeft: `1px solid ${theme.colors.text}`,
+        backgroundColor: theme.colors.bgPageSecondary,
         "&:hover": {
-          borderRight: `1px solid ${theme.colors.secondary}`
+          borderRight: `1px solid ${theme.colors.text}`
         }
       }
     },
     "&:hover $cellsInRange": {
-      backgroundColor: theme.colors.atmo3,
+      backgroundColor: theme.colors.bgPageSecondary,
       "& $startBookend": {
-        borderLeft: `1px solid ${theme.colors.secondary}`,
+        borderLeft: `1px solid ${theme.colors.text}`,
         borderRight: "inherit"
       }
     },
     "& $cellsInRange:hover": {
-      backgroundColor: theme.colors.atmo3,
+      backgroundColor: theme.colors.bgPageSecondary,
       "& $calendarDate": {
-        borderRight: `1px solid ${theme.colors.secondary}`
+        borderRight: `1px solid ${theme.colors.text}`
       }
     },
     "& $cellsInRange:hover ~ $cellsInRange": {
-      backgroundColor: theme.colors.atmo1
+      backgroundColor: theme.colors.bgContainer
       // controls the right side of the hovered range
     },
     "& $cellsOutsideRange:hover ~ $cellsInRange": {
-      backgroundColor: theme.colors.atmo1
+      backgroundColor: theme.colors.bgContainer
       // control the right side when hovering outside of the range
     }
   },
@@ -58,7 +58,7 @@ const { staticClasses, useClasses } = createClasses("HvSingleCalendar", {
   startBookend: {},
   endBookend: {},
   cellsInRange: {
-    backgroundColor: theme.colors.atmo3
+    backgroundColor: theme.colors.bgPageSecondary
   },
   cellsOutsideRange: {},
   cellContainer: {}

package/dist/esm/Calendar/SingleCalendar/SingleCalendar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleCalendar.styles.js","sources":["../../../../src/Calendar/SingleCalendar/SingleCalendar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSingleCalendar\", {\n  root: {\n    overflow: \"hidden\",\n  },\n  calendarGrid: {\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(7, 1fr)\",\n    \"& $cellsInRange\": {\n      backgroundColor: theme.colors.atmo3,\n      \"& $startBookend\": {\n        borderLeft: `1px solid ${theme.colors.secondary}`,\n        backgroundColor: theme.colors.atmo3,\n        \"&:hover\": {\n          borderRight: `1px solid ${theme.colors.secondary}`,\n        },\n      },\n    },\n    \"&:hover $cellsInRange\": {\n      backgroundColor: theme.colors.atmo3,\n      \"& $startBookend\": {\n        borderLeft: `1px solid ${theme.colors.secondary}`,\n        borderRight: \"inherit\",\n      },\n    },\n    \"& $cellsInRange:hover\": {\n      backgroundColor: theme.colors.atmo3,\n      \"& $calendarDate\": {\n        borderRight: `1px solid ${theme.colors.secondary}`,\n      },\n    },\n    \"& $cellsInRange:hover ~ $cellsInRange\": {\n      backgroundColor: theme.colors.atmo1, // controls the right side of the hovered range\n    },\n    \"& $cellsOutsideRange:hover ~ $cellsInRange\": {\n      backgroundColor: theme.colors.atmo1, // control the right side when hovering outside of the range\n    },\n  },\n  calendarDay: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    flexDirection: \"column\",\n    textAlign: \"center\",\n    height: \"40px\",\n    width: \"40px\",\n  },\n  navigationContainer: {},\n  focusSelection: {},\n  navigationMonth: {},\n  calendarDate: {},\n  calendarDateNotInMonth: {},\n  calendarDateSelected: {},\n  calendarDateInvalid: {},\n  calendarDateInSelectionRange: {},\n  startBookend: {},\n  endBookend: {},\n  cellsInRange: {\n    backgroundColor: theme.colors.atmo3,\n  },\n  cellsOutsideRange: {},\n  cellContainer: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,MACjB,iBAAiB,MAAM,OAAO;AAAA,MAC9B,mBAAmB;AAAA,QACjB,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,QAC/C,iBAAiB,MAAM,OAAO;AAAA,QAC9B,WAAW;AAAA,UACT,aAAa,aAAa,MAAM,OAAO,SAAS;AAAA,QAAA;AAAA,MAClD;AAAA,IAEJ;AAAA,IACA,yBAAyB;AAAA,MACvB,iBAAiB,MAAM,OAAO;AAAA,MAC9B,mBAAmB;AAAA,QACjB,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,QAC/C,aAAa;AAAA,MAAA;AAAA,IAEjB;AAAA,IACA,yBAAyB;AAAA,MACvB,iBAAiB,MAAM,OAAO;AAAA,MAC9B,mBAAmB;AAAA,QACjB,aAAa,aAAa,MAAM,OAAO,SAAS;AAAA,MAAA;AAAA,IAEpD;AAAA,IACA,yCAAyC;AAAA,MACvC,iBAAiB,MAAM,OAAO;AAAA;AAAA,IAChC;AAAA,IACA,8CAA8C;AAAA,MAC5C,iBAAiB,MAAM,OAAO;AAAA;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,aAAa;AAAA,IACX,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,qBAAqB,CAAC;AAAA,EACtB,gBAAgB,CAAC;AAAA,EACjB,iBAAiB,CAAC;AAAA,EAClB,cAAc,CAAC;AAAA,EACf,wBAAwB,CAAC;AAAA,EACzB,sBAAsB,CAAC;AAAA,EACvB,qBAAqB,CAAC;AAAA,EACtB,8BAA8B,CAAC;AAAA,EAC/B,cAAc,CAAC;AAAA,EACf,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,IACZ,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,mBAAmB,CAAC;AAAA,EACpB,eAAe,CAAA;AACjB,CAAC;"}
+{"version":3,"file":"SingleCalendar.styles.js","sources":["../../../../src/Calendar/SingleCalendar/SingleCalendar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSingleCalendar\", {\n  root: {\n    overflow: \"hidden\",\n  },\n  calendarGrid: {\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(7, 1fr)\",\n    \"& $cellsInRange\": {\n      backgroundColor: theme.colors.bgPageSecondary,\n      \"& $startBookend\": {\n        borderLeft: `1px solid ${theme.colors.text}`,\n        backgroundColor: theme.colors.bgPageSecondary,\n        \"&:hover\": {\n          borderRight: `1px solid ${theme.colors.text}`,\n        },\n      },\n    },\n    \"&:hover $cellsInRange\": {\n      backgroundColor: theme.colors.bgPageSecondary,\n      \"& $startBookend\": {\n        borderLeft: `1px solid ${theme.colors.text}`,\n        borderRight: \"inherit\",\n      },\n    },\n    \"& $cellsInRange:hover\": {\n      backgroundColor: theme.colors.bgPageSecondary,\n      \"& $calendarDate\": {\n        borderRight: `1px solid ${theme.colors.text}`,\n      },\n    },\n    \"& $cellsInRange:hover ~ $cellsInRange\": {\n      backgroundColor: theme.colors.bgContainer, // controls the right side of the hovered range\n    },\n    \"& $cellsOutsideRange:hover ~ $cellsInRange\": {\n      backgroundColor: theme.colors.bgContainer, // control the right side when hovering outside of the range\n    },\n  },\n  calendarDay: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    flexDirection: \"column\",\n    textAlign: \"center\",\n    height: \"40px\",\n    width: \"40px\",\n  },\n  navigationContainer: {},\n  focusSelection: {},\n  navigationMonth: {},\n  calendarDate: {},\n  calendarDateNotInMonth: {},\n  calendarDateSelected: {},\n  calendarDateInvalid: {},\n  calendarDateInSelectionRange: {},\n  startBookend: {},\n  endBookend: {},\n  cellsInRange: {\n    backgroundColor: theme.colors.bgPageSecondary,\n  },\n  cellsOutsideRange: {},\n  cellContainer: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,MACjB,iBAAiB,MAAM,OAAO;AAAA,MAC9B,mBAAmB;AAAA,QACjB,YAAY,aAAa,MAAM,OAAO,IAAI;AAAA,QAC1C,iBAAiB,MAAM,OAAO;AAAA,QAC9B,WAAW;AAAA,UACT,aAAa,aAAa,MAAM,OAAO,IAAI;AAAA,QAAA;AAAA,MAC7C;AAAA,IAEJ;AAAA,IACA,yBAAyB;AAAA,MACvB,iBAAiB,MAAM,OAAO;AAAA,MAC9B,mBAAmB;AAAA,QACjB,YAAY,aAAa,MAAM,OAAO,IAAI;AAAA,QAC1C,aAAa;AAAA,MAAA;AAAA,IAEjB;AAAA,IACA,yBAAyB;AAAA,MACvB,iBAAiB,MAAM,OAAO;AAAA,MAC9B,mBAAmB;AAAA,QACjB,aAAa,aAAa,MAAM,OAAO,IAAI;AAAA,MAAA;AAAA,IAE/C;AAAA,IACA,yCAAyC;AAAA,MACvC,iBAAiB,MAAM,OAAO;AAAA;AAAA,IAChC;AAAA,IACA,8CAA8C;AAAA,MAC5C,iBAAiB,MAAM,OAAO;AAAA;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,aAAa;AAAA,IACX,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,qBAAqB,CAAC;AAAA,EACtB,gBAAgB,CAAC;AAAA,EACjB,iBAAiB,CAAC;AAAA,EAClB,cAAc,CAAC;AAAA,EACf,wBAAwB,CAAC;AAAA,EACzB,sBAAsB,CAAC;AAAA,EACvB,qBAAqB,CAAC;AAAA,EACtB,8BAA8B,CAAC;AAAA,EAC/B,cAAc,CAAC;AAAA,EACf,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,IACZ,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,mBAAmB,CAAC;AAAA,EACpB,eAAe,CAAA;AACjB,CAAC;"}

package/dist/esm/Card/Card.js

@@ -18,7 +18,7 @@ const HvCard = forwardRef(function HvCard2(props, ref) {
     ...others
   } = useDefaultProps("HvCard", props);
   const { classes, cx } = useClasses(classesProp);
-  const barColor = statusColor !== "sema0" && statusColor || selected && "secondary" || "atmo4";
+  const barColor = statusColor !== "sema0" && statusColor || selected && "text" || "border";
   return /* @__PURE__ */ jsxs(
     "div",
     {

package/dist/esm/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/Card/Card.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 { staticClasses, useClasses } from \"./Card.styles\";\n\nexport { staticClasses as cardClasses };\n\nexport type HvCardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardProps extends HvBaseProps {\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** Whether the card is selectable. */\n  selectable?: boolean;\n  /** Whether the card is currently selected. */\n  selected?: boolean;\n  /** The background color of the card. */\n  bgcolor?: \"sema0\" | HvColorAny;\n  /**\n   *  The border color at the top of the card. Must be one of palette semantic or atmosphere colors.\n   *  To set another color, the borderTop should be override.\n   */\n  statusColor?: \"sema0\" | HvColorAny;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardClasses;\n}\n\n/**\n * A card is a container for a few short and related pieces of content.\n * It roughly resembles a playing card in size and shape and is intended as a\n * linked short representation of a conceptual unit. For that reason,\n * this pattern must be used as an entry-point for further information.\n */\nexport const HvCard = forwardRef<\n  // no-indent\n  React.ComponentRef<\"div\">,\n  HvCardProps\n>(function HvCard(props, ref) {\n  const {\n    classes: classesProp,\n    style,\n    className,\n    children,\n    icon,\n    selectable = false,\n    selected = false,\n    statusColor = \"sema0\",\n    bgcolor,\n    ...others\n  } = useDefaultProps(\"HvCard\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const barColor =\n    (statusColor !== \"sema0\" && statusColor) ||\n    (selected && \"secondary\") ||\n    \"atmo4\";\n\n  return (\n    <div\n      ref={ref}\n      style={mergeStyles(style, {\n        \"--bg-color\": getColor(bgcolor),\n        \"--bar-height\": `${selected ? 4 : 2}px`,\n        \"--bar-color\": getColor(barColor),\n      })}\n      className={cx(\n        \"HvIsCardGridElement\",\n        classes.root,\n        {\n          [classes.selectable]: selectable,\n          [classes.selected]: selected,\n        },\n        className,\n      )}\n      {...others}\n    >\n      <div className={classes.semanticContainer}>\n        <div className={classes.semanticBar} />\n        <div className={classes.icon}>{icon}</div>\n      </div>\n      {children}\n    </div>\n  );\n});\n"],"names":["HvCard"],"mappings":";;;;;;AAuCO,MAAM,SAAS,WAIpB,SAASA,QAAO,OAAO,KAAK;AACtB,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,WACH,gBAAgB,WAAW,eAC3B,YAAY,eACb;AAGA,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO,YAAY,OAAO;AAAA,QACxB,cAAc,SAAS,OAAO;AAAA,QAC9B,gBAAgB,GAAG,WAAW,IAAI,CAAC;AAAA,QACnC,eAAe,SAAS,QAAQ;AAAA,MAAA,CACjC;AAAA,MACD,WAAW;AAAA,QACT;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,mBACtB,UAAA;AAAA,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,YAAa,CAAA;AAAA,UACpC,oBAAA,OAAA,EAAI,WAAW,QAAQ,MAAO,UAAK,KAAA,CAAA;AAAA,QAAA,GACtC;AAAA,QACC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAEJ,CAAC;"}
+{"version":3,"file":"Card.js","sources":["../../../src/Card/Card.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 { staticClasses, useClasses } from \"./Card.styles\";\n\nexport { staticClasses as cardClasses };\n\nexport type HvCardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardProps extends HvBaseProps {\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** Whether the card is selectable. */\n  selectable?: boolean;\n  /** Whether the card is currently selected. */\n  selected?: boolean;\n  /** The background color of the card. */\n  bgcolor?: \"sema0\" | HvColorAny;\n  /**\n   *  The border color at the top of the card. Must be one of palette semantic or atmosphere colors.\n   *  To set another color, the borderTop should be override.\n   */\n  statusColor?: \"sema0\" | HvColorAny;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardClasses;\n}\n\n/**\n * A card is a container for a few short and related pieces of content.\n * It roughly resembles a playing card in size and shape and is intended as a\n * linked short representation of a conceptual unit. For that reason,\n * this pattern must be used as an entry-point for further information.\n */\nexport const HvCard = forwardRef<\n  // no-indent\n  React.ComponentRef<\"div\">,\n  HvCardProps\n>(function HvCard(props, ref) {\n  const {\n    classes: classesProp,\n    style,\n    className,\n    children,\n    icon,\n    selectable = false,\n    selected = false,\n    statusColor = \"sema0\",\n    bgcolor,\n    ...others\n  } = useDefaultProps(\"HvCard\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const barColor =\n    (statusColor !== \"sema0\" && statusColor) ||\n    (selected && \"text\") ||\n    \"border\";\n\n  return (\n    <div\n      ref={ref}\n      style={mergeStyles(style, {\n        \"--bg-color\": getColor(bgcolor),\n        \"--bar-height\": `${selected ? 4 : 2}px`,\n        \"--bar-color\": getColor(barColor),\n      })}\n      className={cx(\n        \"HvIsCardGridElement\",\n        classes.root,\n        {\n          [classes.selectable]: selectable,\n          [classes.selected]: selected,\n        },\n        className,\n      )}\n      {...others}\n    >\n      <div className={classes.semanticContainer}>\n        <div className={classes.semanticBar} />\n        <div className={classes.icon}>{icon}</div>\n      </div>\n      {children}\n    </div>\n  );\n});\n"],"names":["HvCard"],"mappings":";;;;;;AAuCO,MAAM,SAAS,WAIpB,SAASA,QAAO,OAAO,KAAK;AACtB,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,WACH,gBAAgB,WAAW,eAC3B,YAAY,UACb;AAGA,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO,YAAY,OAAO;AAAA,QACxB,cAAc,SAAS,OAAO;AAAA,QAC9B,gBAAgB,GAAG,WAAW,IAAI,CAAC;AAAA,QACnC,eAAe,SAAS,QAAQ;AAAA,MAAA,CACjC;AAAA,MACD,WAAW;AAAA,QACT;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,mBACtB,UAAA;AAAA,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,YAAa,CAAA;AAAA,UACpC,oBAAA,OAAA,EAAI,WAAW,QAAQ,MAAO,UAAK,KAAA,CAAA;AAAA,QAAA,GACtC;AAAA,QACC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAEJ,CAAC;"}

package/dist/esm/Card/Card.styles.js

@@ -5,7 +5,7 @@ const { staticClasses, useClasses } = createClasses("HvCard", {
   root: {
     overflow: "visible",
     position: "relative",
-    outline: `1px solid ${theme.colors.atmo4}`,
+    outline: `1px solid ${theme.colors.border}`,
     borderRadius: `0px 0px ${theme.radii.round} ${theme.radii.round}`,
     backgroundColor: "var(--bg-color)",
     "&:focus-visible": {
@@ -16,17 +16,13 @@ const { staticClasses, useClasses } = createClasses("HvCard", {
     }
   },
   selected: {
-    outline: `1px solid ${theme.colors.secondary}`,
-    "&:hover": {
-      outline: `1px solid ${theme.colors.secondary}`
-    },
-    "&:focus": {
-      outline: `1px solid ${theme.colors.secondary}`
+    "&,&:hover,&:focus": {
+      outlineColor: theme.colors.text
     }
   },
   selectable: {
     "&:hover": {
-      outline: `1px solid ${theme.colors.primary}`
+      outlineColor: theme.colors.primary
     }
   },
   semanticContainer: {

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

@@ -1 +1 @@
-{"version":3,"file":"Card.styles.js","sources":["../../../src/Card/Card.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(\"HvCard\", {\n  root: {\n    overflow: \"visible\",\n    position: \"relative\",\n    outline: `1px solid ${theme.colors.atmo4}`,\n    borderRadius: `0px 0px ${theme.radii.round} ${theme.radii.round}`,\n    backgroundColor: \"var(--bg-color)\",\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  },\n  selected: {\n    outline: `1px solid ${theme.colors.secondary}`,\n    \"&:hover\": {\n      outline: `1px solid ${theme.colors.secondary}`,\n    },\n    \"&:focus\": {\n      outline: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  selectable: {\n    \"&:hover\": {\n      outline: `1px solid ${theme.colors.primary}`,\n    },\n  },\n  semanticContainer: {\n    position: \"relative\",\n    \"& > *\": {\n      position: \"absolute\",\n      zIndex: 1,\n    },\n  },\n  icon: {\n    top: theme.space.xs,\n    right: theme.space.xs,\n  },\n  semanticBar: {\n    backgroundColor: \"var(--bar-color)\",\n    height: \"var(--bar-height)\",\n    width: \"100%\",\n    top: -1,\n    right: 0,\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS,aAAa,MAAM,OAAO,KAAK;AAAA,IACxC,cAAc,WAAW,MAAM,MAAM,KAAK,IAAI,MAAM,MAAM,KAAK;AAAA,IAC/D,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,UAAU;AAAA,IACR,SAAS,aAAa,MAAM,OAAO,SAAS;AAAA,IAC5C,WAAW;AAAA,MACT,SAAS,aAAa,MAAM,OAAO,SAAS;AAAA,IAC9C;AAAA,IACA,WAAW;AAAA,MACT,SAAS,aAAa,MAAM,OAAO,SAAS;AAAA,IAAA;AAAA,EAEhD;AAAA,EACA,YAAY;AAAA,IACV,WAAW;AAAA,MACT,SAAS,aAAa,MAAM,OAAO,OAAO;AAAA,IAAA;AAAA,EAE9C;AAAA,EACA,mBAAmB;AAAA,IACjB,UAAU;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,MAAM;AAAA,IACJ,KAAK,MAAM,MAAM;AAAA,IACjB,OAAO,MAAM,MAAM;AAAA,EACrB;AAAA,EACA,aAAa;AAAA,IACX,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,KAAK;AAAA,IACL,OAAO;AAAA,EAAA;AAEX,CAAC;"}
+{"version":3,"file":"Card.styles.js","sources":["../../../src/Card/Card.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(\"HvCard\", {\n  root: {\n    overflow: \"visible\",\n    position: \"relative\",\n    outline: `1px solid ${theme.colors.border}`,\n    borderRadius: `0px 0px ${theme.radii.round} ${theme.radii.round}`,\n    backgroundColor: \"var(--bg-color)\",\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  },\n  selected: {\n    \"&,&:hover,&:focus\": {\n      outlineColor: theme.colors.text,\n    },\n  },\n  selectable: {\n    \"&:hover\": {\n      outlineColor: theme.colors.primary,\n    },\n  },\n  semanticContainer: {\n    position: \"relative\",\n    \"& > *\": {\n      position: \"absolute\",\n      zIndex: 1,\n    },\n  },\n  icon: {\n    top: theme.space.xs,\n    right: theme.space.xs,\n  },\n  semanticBar: {\n    backgroundColor: \"var(--bar-color)\",\n    height: \"var(--bar-height)\",\n    width: \"100%\",\n    top: -1,\n    right: 0,\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS,aAAa,MAAM,OAAO,MAAM;AAAA,IACzC,cAAc,WAAW,MAAM,MAAM,KAAK,IAAI,MAAM,MAAM,KAAK;AAAA,IAC/D,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,UAAU;AAAA,IACR,qBAAqB;AAAA,MACnB,cAAc,MAAM,OAAO;AAAA,IAAA;AAAA,EAE/B;AAAA,EACA,YAAY;AAAA,IACV,WAAW;AAAA,MACT,cAAc,MAAM,OAAO;AAAA,IAAA;AAAA,EAE/B;AAAA,EACA,mBAAmB;AAAA,IACjB,UAAU;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,MAAM;AAAA,IACJ,KAAK,MAAM,MAAM;AAAA,IACjB,OAAO,MAAM,MAAM;AAAA,EACrB;AAAA,EACA,aAAa;AAAA,IACX,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,KAAK;AAAA,IACL,OAAO;AAAA,EAAA;AAEX,CAAC;"}

package/dist/esm/Carousel/Carousel.styles.js

@@ -6,7 +6,7 @@ const { staticClasses, useClasses } = createClasses("HvCarousel", {
     display: "flex",
     alignItems: "stretch",
     flexDirection: "column",
-    backgroundColor: theme.colors.atmo1,
+    backgroundColor: theme.colors.bgContainer,
     margin: 0,
     paddingTop: theme.spacing(2),
     paddingBottom: theme.spacing(2)
@@ -56,8 +56,8 @@ const { staticClasses, useClasses } = createClasses("HvCarousel", {
     position: "relative",
     height: 32,
     justifyContent: "center",
-    backgroundColor: theme.colors.atmo2,
-    border: `1px solid ${theme.colors.atmo4}`,
+    backgroundColor: theme.colors.bgPage,
+    border: `1px solid ${theme.colors.border}`,
     gap: theme.space.xs,
     "&:has($dots)": {
       justifyContent: "center"
@@ -85,8 +85,8 @@ const { staticClasses, useClasses } = createClasses("HvCarousel", {
     display: "none"
   },
   counter: {
-    color: theme.colors.base_light,
-    backgroundColor: theme.colors.base_dark,
+    color: theme.colors.textLight,
+    backgroundColor: theme.colors.textDark,
     padding: theme.spacing(0, "sm")
   },
   slideControls: {
@@ -127,13 +127,13 @@ const { staticClasses, useClasses } = createClasses("HvCarousel", {
     width: 5,
     height: 5,
     margin: theme.space.xs,
-    borderRadius: "50%",
-    backgroundColor: theme.colors.atmo4
+    borderRadius: theme.radii.full,
+    backgroundColor: theme.colors.border
   },
   dotSelected: {
     width: 10,
     height: 10,
-    backgroundColor: theme.colors.secondary_80
+    backgroundColor: theme.colors.textSubtle
   },
   panel: {
     display: "flex",

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.styles.js","sources":["../../../src/Carousel/Carousel.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCarousel\", {\n  /** Styles applied to the component root class. */\n  root: {\n    display: \"flex\",\n    alignItems: \"stretch\",\n    flexDirection: \"column\",\n    backgroundColor: theme.colors.atmo1,\n    margin: 0,\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n  },\n  xs: {\n    \"&:not(._)\": {\n      padding: 0,\n    },\n    // put dots on top of Slide\n    \"& $dots\": {\n      position: \"relative\",\n      top: \"-40px\",\n    },\n    \"& $actions\": {\n      top: 0,\n    },\n    \"& $controls\": {\n      display: \"flex\",\n    },\n  },\n  fullscreen: {\n    width: \"100vw\",\n    height: \"100vh\",\n    position: \"fixed\",\n    inset: 0,\n    zIndex: theme.zIndices.modal,\n    \"&:not(._)\": {\n      padding: theme.spacing(\"xs\", \"xl\"),\n    },\n  },\n  title: {\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    marginBottom: theme.space.xs,\n  },\n  actions: {\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    right: 0,\n\n    position: \"relative\",\n  },\n  closeButton: {},\n\n  mainContainer: {},\n\n  controls: {\n    display: \"flex\",\n    alignItems: \"center\",\n    position: \"relative\",\n    height: 32,\n    justifyContent: \"center\",\n    backgroundColor: theme.colors.atmo2,\n    border: `1px solid ${theme.colors.atmo4}`,\n    gap: theme.space.xs,\n    \"&:has($dots)\": {\n      justifyContent: \"center\",\n    },\n  },\n  pageCounter: {},\n\n  main: {\n    padding: 0,\n    display: \"flex\",\n    flexDirection: \"column\",\n    position: \"relative\",\n    \"&:hover $slideControls\": {\n      opacity: 1,\n    },\n  },\n  mainXs: {},\n  mainFullscreen: {\n    maxHeight: \"80vh\",\n  },\n  counterContainer: {\n    position: \"absolute\",\n    top: theme.space.xs,\n    right: theme.space.md,\n    zIndex: 1,\n    display: \"none\",\n  },\n  counter: {\n    color: theme.colors.base_light,\n    backgroundColor: theme.colors.base_dark,\n    padding: theme.spacing(0, \"sm\"),\n  },\n  slideControls: {\n    position: \"absolute\",\n    left: 0,\n    right: 0,\n    top: `calc(50% - (32px / 2))`,\n    padding: theme.spacing(0, \"sm\"),\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    opacity: 0,\n    \"& button\": {\n      zIndex: 1,\n    },\n    \"&:focus-within\": {\n      opacity: 1,\n    },\n  },\n  slidesViewport: {\n    overflow: \"hidden\",\n  },\n  slidesContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    height: \"100%\",\n  },\n\n  dots: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: theme.space.xs,\n    height: theme.space.md,\n  },\n  dotsXs: {},\n  dot: {\n    width: 5,\n    height: 5,\n    margin: theme.space.xs,\n    borderRadius: \"50%\",\n    backgroundColor: theme.colors.atmo4,\n  },\n  dotSelected: {\n    width: 10,\n    height: 10,\n    backgroundColor: theme.colors.secondary_80,\n  },\n\n  panel: {\n    display: \"flex\",\n    width: \"100%\",\n    overflowX: \"auto\", // \"hidden\",\n    overflowY: \"hidden\",\n    padding: theme.spacing(\"xs\", \"2px\", \"2px\"),\n  },\n  thumbnail: {\n    height: \"unset\",\n    padding: 0,\n    \"& img\": {\n      width: \"100%\",\n      height: \"100%\",\n      textAlign: \"center\",\n      aspectRatio: \"16/9\",\n      opacity: \"50%\",\n      borderRadius: theme.radii.round,\n    },\n  },\n  thumbnailSelected: {\n    \"& img\": {\n      border: \"none\",\n      opacity: \"100%\",\n    },\n  },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Carousel.styles.js","sources":["../../../src/Carousel/Carousel.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCarousel\", {\n  /** Styles applied to the component root class. */\n  root: {\n    display: \"flex\",\n    alignItems: \"stretch\",\n    flexDirection: \"column\",\n    backgroundColor: theme.colors.bgContainer,\n    margin: 0,\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n  },\n  xs: {\n    \"&:not(._)\": {\n      padding: 0,\n    },\n    // put dots on top of Slide\n    \"& $dots\": {\n      position: \"relative\",\n      top: \"-40px\",\n    },\n    \"& $actions\": {\n      top: 0,\n    },\n    \"& $controls\": {\n      display: \"flex\",\n    },\n  },\n  fullscreen: {\n    width: \"100vw\",\n    height: \"100vh\",\n    position: \"fixed\",\n    inset: 0,\n    zIndex: theme.zIndices.modal,\n    \"&:not(._)\": {\n      padding: theme.spacing(\"xs\", \"xl\"),\n    },\n  },\n  title: {\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    marginBottom: theme.space.xs,\n  },\n  actions: {\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    right: 0,\n\n    position: \"relative\",\n  },\n  closeButton: {},\n\n  mainContainer: {},\n\n  controls: {\n    display: \"flex\",\n    alignItems: \"center\",\n    position: \"relative\",\n    height: 32,\n    justifyContent: \"center\",\n    backgroundColor: theme.colors.bgPage,\n    border: `1px solid ${theme.colors.border}`,\n    gap: theme.space.xs,\n    \"&:has($dots)\": {\n      justifyContent: \"center\",\n    },\n  },\n  pageCounter: {},\n\n  main: {\n    padding: 0,\n    display: \"flex\",\n    flexDirection: \"column\",\n    position: \"relative\",\n    \"&:hover $slideControls\": {\n      opacity: 1,\n    },\n  },\n  mainXs: {},\n  mainFullscreen: {\n    maxHeight: \"80vh\",\n  },\n  counterContainer: {\n    position: \"absolute\",\n    top: theme.space.xs,\n    right: theme.space.md,\n    zIndex: 1,\n    display: \"none\",\n  },\n  counter: {\n    color: theme.colors.textLight,\n    backgroundColor: theme.colors.textDark,\n    padding: theme.spacing(0, \"sm\"),\n  },\n  slideControls: {\n    position: \"absolute\",\n    left: 0,\n    right: 0,\n    top: `calc(50% - (32px / 2))`,\n    padding: theme.spacing(0, \"sm\"),\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    opacity: 0,\n    \"& button\": {\n      zIndex: 1,\n    },\n    \"&:focus-within\": {\n      opacity: 1,\n    },\n  },\n  slidesViewport: {\n    overflow: \"hidden\",\n  },\n  slidesContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    height: \"100%\",\n  },\n\n  dots: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: theme.space.xs,\n    height: theme.space.md,\n  },\n  dotsXs: {},\n  dot: {\n    width: 5,\n    height: 5,\n    margin: theme.space.xs,\n    borderRadius: theme.radii.full,\n    backgroundColor: theme.colors.border,\n  },\n  dotSelected: {\n    width: 10,\n    height: 10,\n    backgroundColor: theme.colors.textSubtle,\n  },\n\n  panel: {\n    display: \"flex\",\n    width: \"100%\",\n    overflowX: \"auto\", // \"hidden\",\n    overflowY: \"hidden\",\n    padding: theme.spacing(\"xs\", \"2px\", \"2px\"),\n  },\n  thumbnail: {\n    height: \"unset\",\n    padding: 0,\n    \"& img\": {\n      width: \"100%\",\n      height: \"100%\",\n      textAlign: \"center\",\n      aspectRatio: \"16/9\",\n      opacity: \"50%\",\n      borderRadius: theme.radii.round,\n    },\n  },\n  thumbnailSelected: {\n    \"& img\": {\n      border: \"none\",\n      opacity: \"100%\",\n    },\n  },\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/CheckBox/CheckBox.js

@@ -100,7 +100,7 @@ const HvCheckBox = forwardRef(
         id: hasLabel ? setId(elementId, "input") : setId(id, "input"),
         name,
         className: cx(classes.checkbox, {
-          [classes.invalidCheckbox]: isStateInvalid,
+          [classes.invalidCheckbox]: !label && isStateInvalid,
           [classes.checked]: isChecked,
           [classes.indeterminate]: isIndeterminate,
           [classes.semantic]: semantic

package/dist/esm/CheckBox/CheckBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.js","sources":["../../../src/CheckBox/CheckBox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseCheckBox, HvBaseCheckBoxProps } from \"../BaseCheckBox\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvLabel,\n  HvLabelProps,\n  HvWarningText,\n  isInvalid,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./CheckBox.styles\";\n\nexport { staticClasses as checkBoxClasses };\n\nexport type HvCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxProps extends Omit<HvBaseCheckBoxProps, \"classes\"> {\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 inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\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 the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvCheckBoxClasses;\n}\n\n/**\n * A Checkbox is a mechanism that allows the user to select one or more options.\n *\n * Usually used in a Checkbox Group to present the user with a range of options from\n * which the user **may select any number of options** to complete their task.\n *\n * It can also be used individually to represent the toggle of a single option, when\n * the Toggle Switch and Toggle Button aren't more appropriate.\n */\nexport const HvCheckBox = forwardRef<HTMLButtonElement, HvCheckBoxProps>(\n  function HvCheckBox(props, ref) {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      name,\n      checked,\n      status,\n      indeterminate,\n      statusMessage,\n      label,\n      labelProps,\n      inputProps,\n      value = \"on\",\n      required,\n      readOnly,\n      disabled,\n      semantic,\n      defaultChecked,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": ariaErrorMessage,\n      onChange,\n      onFocusVisible,\n      onBlur,\n      ...others\n    } = useDefaultProps(\"HvCheckBox\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id);\n\n    const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n    const [validationState, setValidationState] = useControlled<HvFormStatus>(\n      status,\n      \"standBy\",\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const [isChecked, setIsChecked] = useControlled(\n      checked,\n      Boolean(defaultChecked),\n    );\n\n    const [isIndeterminate, setIsIndeterminate] = useControlled(\n      checked !== undefined ? indeterminate : undefined,\n      Boolean(indeterminate),\n    );\n\n    const isStateInvalid = isInvalid(validationState);\n\n    const onChangeCallback = useCallback<\n      NonNullable<HvBaseCheckBoxProps[\"onChange\"]>\n    >(\n      (event, newChecked) => {\n        setIsChecked(() => {\n          // This will only run if uncontrolled\n          setIsIndeterminate(false);\n\n          if (required && !newChecked) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newChecked;\n        });\n\n        onChange?.(event, newChecked, value);\n      },\n      [\n        onChange,\n        required,\n        setIsChecked,\n        setIsIndeterminate,\n        setValidationState,\n        value,\n      ],\n    );\n\n    const onFocusVisibleCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    };\n\n    const onBlurCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    };\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 required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const hasLabel = label != null;\n\n    let errorMessageId;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    const checkbox = (\n      <HvBaseCheckBox\n        ref={ref}\n        id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n        name={name}\n        className={cx(classes.checkbox, {\n          [classes.invalidCheckbox]: isStateInvalid,\n          [classes.checked]: isChecked,\n          [classes.indeterminate]: isIndeterminate,\n          [classes.semantic]: semantic,\n        })}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        onChange={onChangeCallback}\n        value={value}\n        checked={isChecked}\n        indeterminate={isIndeterminate}\n        semantic={semantic}\n        inputProps={{\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-describedby\": ariaDescribedBy,\n          ...inputProps,\n        }}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\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          { [classes.focusVisible]: !!(focusVisible && label) },\n          className,\n        )}\n      >\n        {hasLabel ? (\n          <div\n            className={cx(classes.container, {\n              [classes.disabled]: disabled,\n              [classes.invalidContainer]: isStateInvalid,\n            })}\n          >\n            {checkbox}\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n              className={classes.label}\n              {...labelProps}\n            />\n          </div>\n        ) : (\n          checkbox\n        )}\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableAdornment={!hasLabel}\n            hideText={!hasLabel}\n            disableBorder\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvCheckBox"],"mappings":";;;;;;;;;;;;;AAkEO,MAAM,aAAa;AAAA,EACxB,SAASA,YAAW,OAAO,KAAK;AACxB,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,qBAAqB;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,cAAc,KAAK;AAEvC,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,UAAA,YAAY,YAAY,EAAE;AAEhC,UAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAEzD,UAAA,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,MAC5C;AAAA,MACA;AAAA,IACF;AAEA,UAAM,CAAC,iBAAiB,IAAI,cAAc,eAAe,UAAU;AAE7D,UAAA,CAAC,WAAW,YAAY,IAAI;AAAA,MAChC;AAAA,MACA,QAAQ,cAAc;AAAA,IACxB;AAEM,UAAA,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,MAC5C,YAAY,SAAY,gBAAgB;AAAA,MACxC,QAAQ,aAAa;AAAA,IACvB;AAEM,UAAA,iBAAiB,UAAU,eAAe;AAEhD,UAAM,mBAAmB;AAAA,MAGvB,CAAC,OAAO,eAAe;AACrB,qBAAa,MAAM;AAEjB,6BAAmB,KAAK;AAEpB,cAAA,YAAY,CAAC,YAAY;AAC3B,+BAAmB,SAAS;AAAA,UAAA,OACvB;AACL,+BAAmB,OAAO;AAAA,UAAA;AAGrB,iBAAA;AAAA,QAAA,CACR;AAEU,mBAAA,OAAO,YAAY,KAAK;AAAA,MACrC;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAEM,UAAA,yBAAwD,CAAC,UAAU;AACvE,sBAAgB,IAAI;AACpB,uBAAiB,KAAK;AAAA,IACxB;AAEM,UAAA,iBAAgD,CAAC,UAAU;AAC/D,sBAAgB,KAAK;AACrB,eAAS,KAAK;AAAA,IAChB;AAMM,UAAA,eACJ,oBAAoB,SAClB,WAAW,UAAa,kBAAkB,UACzC,WAAW,UAAa;AAE7B,UAAM,WAAW,SAAS;AAEtB,QAAA;AACJ,QAAI,gBAAgB;AAClB,uBAAiB,eACb,MAAM,WAAW,OAAO,IACxB;AAAA,IAAA;AAGN,UAAM,WACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI,WAAW,MAAM,WAAW,OAAO,IAAI,MAAM,IAAI,OAAO;AAAA,QAC5D;AAAA,QACA,WAAW,GAAG,QAAQ,UAAU;AAAA,UAC9B,CAAC,QAAQ,eAAe,GAAG;AAAA,UAC3B,CAAC,QAAQ,OAAO,GAAG;AAAA,UACnB,CAAC,QAAQ,aAAa,GAAG;AAAA,UACzB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QAAA,CACrB;AAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA,SAAS;AAAA,QACT,eAAe;AAAA,QACf;AAAA,QACA,YAAY;AAAA,UACV,gBAAgB,iBAAiB,OAAO;AAAA,UACxC,qBAAqB;AAAA,UACrB,cAAc;AAAA,UACd,mBAAmB;AAAA,UACnB,oBAAoB;AAAA,UACpB,GAAG;AAAA,QACL;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IACN;AAIA,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,EAAE,CAAC,QAAQ,YAAY,GAAG,CAAC,EAAE,gBAAgB,OAAO;AAAA,UACpD;AAAA,QACF;AAAA,QAEC,UAAA;AAAA,UACC,WAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,QAAQ,WAAW;AAAA,gBAC/B,CAAC,QAAQ,QAAQ,GAAG;AAAA,gBACpB,CAAC,QAAQ,gBAAgB,GAAG;AAAA,cAAA,CAC7B;AAAA,cAEA,UAAA;AAAA,gBAAA;AAAA,gBACD;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAI,MAAM,WAAW,OAAO;AAAA,oBAC5B,SAAS,MAAM,WAAW,OAAO;AAAA,oBACjC;AAAA,oBACA,WAAW,QAAQ;AAAA,oBAClB,GAAG;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACN;AAAA,YAAA;AAAA,UAAA,IAGF;AAAA,UAED,gBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,WAAW,OAAO;AAAA,cAC5B,kBAAkB,CAAC;AAAA,cACnB,UAAU,CAAC;AAAA,cACX,eAAa;AAAA,cAEZ,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"CheckBox.js","sources":["../../../src/CheckBox/CheckBox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseCheckBox, HvBaseCheckBoxProps } from \"../BaseCheckBox\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvLabel,\n  HvLabelProps,\n  HvWarningText,\n  isInvalid,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./CheckBox.styles\";\n\nexport { staticClasses as checkBoxClasses };\n\nexport type HvCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxProps extends Omit<HvBaseCheckBoxProps, \"classes\"> {\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 inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\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 the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvCheckBoxClasses;\n}\n\n/**\n * A Checkbox is a mechanism that allows the user to select one or more options.\n *\n * Usually used in a Checkbox Group to present the user with a range of options from\n * which the user **may select any number of options** to complete their task.\n *\n * It can also be used individually to represent the toggle of a single option, when\n * the Toggle Switch and Toggle Button aren't more appropriate.\n */\nexport const HvCheckBox = forwardRef<HTMLButtonElement, HvCheckBoxProps>(\n  function HvCheckBox(props, ref) {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      name,\n      checked,\n      status,\n      indeterminate,\n      statusMessage,\n      label,\n      labelProps,\n      inputProps,\n      value = \"on\",\n      required,\n      readOnly,\n      disabled,\n      semantic,\n      defaultChecked,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": ariaErrorMessage,\n      onChange,\n      onFocusVisible,\n      onBlur,\n      ...others\n    } = useDefaultProps(\"HvCheckBox\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id);\n\n    const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n    const [validationState, setValidationState] = useControlled<HvFormStatus>(\n      status,\n      \"standBy\",\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const [isChecked, setIsChecked] = useControlled(\n      checked,\n      Boolean(defaultChecked),\n    );\n\n    const [isIndeterminate, setIsIndeterminate] = useControlled(\n      checked !== undefined ? indeterminate : undefined,\n      Boolean(indeterminate),\n    );\n\n    const isStateInvalid = isInvalid(validationState);\n\n    const onChangeCallback = useCallback<\n      NonNullable<HvBaseCheckBoxProps[\"onChange\"]>\n    >(\n      (event, newChecked) => {\n        setIsChecked(() => {\n          // This will only run if uncontrolled\n          setIsIndeterminate(false);\n\n          if (required && !newChecked) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newChecked;\n        });\n\n        onChange?.(event, newChecked, value);\n      },\n      [\n        onChange,\n        required,\n        setIsChecked,\n        setIsIndeterminate,\n        setValidationState,\n        value,\n      ],\n    );\n\n    const onFocusVisibleCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    };\n\n    const onBlurCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    };\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 required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const hasLabel = label != null;\n\n    let errorMessageId;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    const checkbox = (\n      <HvBaseCheckBox\n        ref={ref}\n        id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n        name={name}\n        className={cx(classes.checkbox, {\n          [classes.invalidCheckbox]: !label && isStateInvalid,\n          [classes.checked]: isChecked,\n          [classes.indeterminate]: isIndeterminate,\n          [classes.semantic]: semantic,\n        })}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        onChange={onChangeCallback}\n        value={value}\n        checked={isChecked}\n        indeterminate={isIndeterminate}\n        semantic={semantic}\n        inputProps={{\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-describedby\": ariaDescribedBy,\n          ...inputProps,\n        }}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\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          { [classes.focusVisible]: !!(focusVisible && label) },\n          className,\n        )}\n      >\n        {hasLabel ? (\n          <div\n            className={cx(classes.container, {\n              [classes.disabled]: disabled,\n              [classes.invalidContainer]: isStateInvalid,\n            })}\n          >\n            {checkbox}\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n              className={classes.label}\n              {...labelProps}\n            />\n          </div>\n        ) : (\n          checkbox\n        )}\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableAdornment={!hasLabel}\n            hideText={!hasLabel}\n            disableBorder\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvCheckBox"],"mappings":";;;;;;;;;;;;;AAkEO,MAAM,aAAa;AAAA,EACxB,SAASA,YAAW,OAAO,KAAK;AACxB,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,qBAAqB;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,cAAc,KAAK;AAEvC,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,UAAA,YAAY,YAAY,EAAE;AAEhC,UAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAEzD,UAAA,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,MAC5C;AAAA,MACA;AAAA,IACF;AAEA,UAAM,CAAC,iBAAiB,IAAI,cAAc,eAAe,UAAU;AAE7D,UAAA,CAAC,WAAW,YAAY,IAAI;AAAA,MAChC;AAAA,MACA,QAAQ,cAAc;AAAA,IACxB;AAEM,UAAA,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,MAC5C,YAAY,SAAY,gBAAgB;AAAA,MACxC,QAAQ,aAAa;AAAA,IACvB;AAEM,UAAA,iBAAiB,UAAU,eAAe;AAEhD,UAAM,mBAAmB;AAAA,MAGvB,CAAC,OAAO,eAAe;AACrB,qBAAa,MAAM;AAEjB,6BAAmB,KAAK;AAEpB,cAAA,YAAY,CAAC,YAAY;AAC3B,+BAAmB,SAAS;AAAA,UAAA,OACvB;AACL,+BAAmB,OAAO;AAAA,UAAA;AAGrB,iBAAA;AAAA,QAAA,CACR;AAEU,mBAAA,OAAO,YAAY,KAAK;AAAA,MACrC;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAEM,UAAA,yBAAwD,CAAC,UAAU;AACvE,sBAAgB,IAAI;AACpB,uBAAiB,KAAK;AAAA,IACxB;AAEM,UAAA,iBAAgD,CAAC,UAAU;AAC/D,sBAAgB,KAAK;AACrB,eAAS,KAAK;AAAA,IAChB;AAMM,UAAA,eACJ,oBAAoB,SAClB,WAAW,UAAa,kBAAkB,UACzC,WAAW,UAAa;AAE7B,UAAM,WAAW,SAAS;AAEtB,QAAA;AACJ,QAAI,gBAAgB;AAClB,uBAAiB,eACb,MAAM,WAAW,OAAO,IACxB;AAAA,IAAA;AAGN,UAAM,WACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI,WAAW,MAAM,WAAW,OAAO,IAAI,MAAM,IAAI,OAAO;AAAA,QAC5D;AAAA,QACA,WAAW,GAAG,QAAQ,UAAU;AAAA,UAC9B,CAAC,QAAQ,eAAe,GAAG,CAAC,SAAS;AAAA,UACrC,CAAC,QAAQ,OAAO,GAAG;AAAA,UACnB,CAAC,QAAQ,aAAa,GAAG;AAAA,UACzB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QAAA,CACrB;AAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA,SAAS;AAAA,QACT,eAAe;AAAA,QACf;AAAA,QACA,YAAY;AAAA,UACV,gBAAgB,iBAAiB,OAAO;AAAA,UACxC,qBAAqB;AAAA,UACrB,cAAc;AAAA,UACd,mBAAmB;AAAA,UACnB,oBAAoB;AAAA,UACpB,GAAG;AAAA,QACL;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IACN;AAIA,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,EAAE,CAAC,QAAQ,YAAY,GAAG,CAAC,EAAE,gBAAgB,OAAO;AAAA,UACpD;AAAA,QACF;AAAA,QAEC,UAAA;AAAA,UACC,WAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,QAAQ,WAAW;AAAA,gBAC/B,CAAC,QAAQ,QAAQ,GAAG;AAAA,gBACpB,CAAC,QAAQ,gBAAgB,GAAG;AAAA,cAAA,CAC7B;AAAA,cAEA,UAAA;AAAA,gBAAA;AAAA,gBACD;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAI,MAAM,WAAW,OAAO;AAAA,oBAC5B,SAAS,MAAM,WAAW,OAAO;AAAA,oBACjC;AAAA,oBACA,WAAW,QAAQ;AAAA,oBAClB,GAAG;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACN;AAAA,YAAA;AAAA,UAAA,IAGF;AAAA,UAED,gBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,WAAW,OAAO;AAAA,cAC5B,kBAAkB,CAAC;AAAA,cACnB,UAAU,CAAC;AAAA,cACX,eAAa;AAAA,cAEZ,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGN;"}

package/dist/esm/CheckBox/CheckBox.styles.js

@@ -9,18 +9,21 @@ const { staticClasses, useClasses } = createClasses("HvCheckBox", {
     height: "32px",
     transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
     "&:hover": {
-      backgroundColor: theme.colors.containerBackgroundHover,
+      backgroundColor: theme.colors.bgHover,
       borderRadius: theme.radii.base
     }
   },
   disabled: {
     cursor: "not-allowed",
-    "& $label": { color: theme.colors.secondary_60, cursor: "not-allowed" }
+    "& $label": { color: theme.colors.textDisabled, cursor: "not-allowed" },
+    "&:hover": {
+      backgroundColor: "transparent"
+    }
   },
   focusVisible: {
     ...outlineStyles,
     "& div": {
-      backgroundColor: theme.colors.atmo3
+      backgroundColor: theme.colors.bgPageSecondary
     },
     [`& $checkbox div > svg`]: {
       outline: "none",
@@ -28,7 +31,7 @@ const { staticClasses, useClasses } = createClasses("HvCheckBox", {
     }
   },
   invalidContainer: {
-    borderBottom: `1px solid ${theme.colors.negative_120}`,
+    borderBottom: `1px solid ${theme.form.errorColor}`,
     "&:hover": {
       borderBottomLeftRadius: "0px",
       borderBottomRightRadius: "0px"
@@ -36,9 +39,15 @@ const { staticClasses, useClasses } = createClasses("HvCheckBox", {
   },
   checkbox: { height: "32px" },
   invalidCheckbox: {
-    borderBottom: `1px solid ${theme.colors.negative_120}`,
-    borderBottomLeftRadius: "0px",
-    borderBottomRightRadius: "0px"
+    "::after": {
+      content: '""',
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      width: "100%",
+      height: 1,
+      backgroundColor: theme.form.errorColor
+    }
   },
   label: {
     overflow: "hidden",

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

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.styles.js","sources":["../../../src/CheckBox/CheckBox.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(\"HvCheckBox\", {\n  root: { display: \"inline-block\" },\n  container: {\n    cursor: \"pointer\",\n    display: \"flex\",\n    height: \"32px\",\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n  },\n  focusVisible: {\n    ...outlineStyles,\n\n    \"& div\": {\n      backgroundColor: theme.colors.atmo3,\n    },\n\n    [`& $checkbox div > svg`]: {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  invalidContainer: {\n    borderBottom: `1px solid ${theme.colors.negative_120}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  checkbox: { height: \"32px\" },\n  invalidCheckbox: {\n    borderBottom: `1px solid ${theme.colors.negative_120}`,\n    borderBottomLeftRadius: \"0px\",\n    borderBottomRightRadius: \"0px\",\n  },\n  label: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    verticalAlign: \"middle\",\n    paddingRight: theme.space.xs,\n    whiteSpace: \"nowrap\",\n    ...theme.typography.body,\n    cursor: \"pointer\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    width: \"100%\",\n  },\n  checked: {},\n  indeterminate: {},\n  semantic: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM,EAAE,SAAS,eAAe;AAAA,EAChC,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IAEZ,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,YAAY,EAAE,OAAO,MAAM,OAAO,cAAc,QAAQ,cAAc;AAAA,EACxE;AAAA,EACA,cAAc;AAAA,IACZ,GAAG;AAAA,IAEH,SAAS;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IAEA,CAAC,uBAAuB,GAAG;AAAA,MACzB,SAAS;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,kBAAkB;AAAA,IAChB,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,IAEpD,WAAW;AAAA,MACT,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,UAAU,EAAE,QAAQ,OAAO;AAAA,EAC3B,iBAAiB;AAAA,IACf,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,IACpD,wBAAwB;AAAA,IACxB,yBAAyB;AAAA,EAC3B;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe;AAAA,IACf,cAAc,MAAM,MAAM;AAAA,IAC1B,YAAY;AAAA,IACZ,GAAG,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACA,SAAS,CAAC;AAAA,EACV,eAAe,CAAC;AAAA,EAChB,UAAU,CAAA;AACZ,CAAC;"}
+{"version":3,"file":"CheckBox.styles.js","sources":["../../../src/CheckBox/CheckBox.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(\"HvCheckBox\", {\n  root: { display: \"inline-block\" },\n  container: {\n    cursor: \"pointer\",\n    display: \"flex\",\n    height: \"32px\",\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.bgHover,\n      borderRadius: theme.radii.base,\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    \"& $label\": { color: theme.colors.textDisabled, cursor: \"not-allowed\" },\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  focusVisible: {\n    ...outlineStyles,\n\n    \"& div\": {\n      backgroundColor: theme.colors.bgPageSecondary,\n    },\n\n    [`& $checkbox div > svg`]: {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  invalidContainer: {\n    borderBottom: `1px solid ${theme.form.errorColor}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  checkbox: { height: \"32px\" },\n  invalidCheckbox: {\n    \"::after\": {\n      content: '\"\"',\n      position: \"absolute\",\n      bottom: 0,\n      left: 0,\n      width: \"100%\",\n      height: 1,\n      backgroundColor: theme.form.errorColor,\n    },\n  },\n  label: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    verticalAlign: \"middle\",\n    paddingRight: theme.space.xs,\n    whiteSpace: \"nowrap\",\n    ...theme.typography.body,\n    cursor: \"pointer\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    width: \"100%\",\n  },\n  checked: {},\n  indeterminate: {},\n  semantic: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM,EAAE,SAAS,eAAe;AAAA,EAChC,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IAEZ,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,YAAY,EAAE,OAAO,MAAM,OAAO,cAAc,QAAQ,cAAc;AAAA,IACtE,WAAW;AAAA,MACT,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA,EACA,cAAc;AAAA,IACZ,GAAG;AAAA,IAEH,SAAS;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IAEA,CAAC,uBAAuB,GAAG;AAAA,MACzB,SAAS;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,kBAAkB;AAAA,IAChB,cAAc,aAAa,MAAM,KAAK,UAAU;AAAA,IAEhD,WAAW;AAAA,MACT,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,UAAU,EAAE,QAAQ,OAAO;AAAA,EAC3B,iBAAiB;AAAA,IACf,WAAW;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,iBAAiB,MAAM,KAAK;AAAA,IAAA;AAAA,EAEhC;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe;AAAA,IACf,cAAc,MAAM,MAAM;AAAA,IAC1B,YAAY;AAAA,IACZ,GAAG,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACA,SAAS,CAAC;AAAA,EACV,eAAe,CAAC;AAAA,EAChB,UAAU,CAAA;AACZ,CAAC;"}

package/dist/esm/CheckBoxGroup/CheckBoxGroup.styles.js

@@ -26,7 +26,7 @@ const { staticClasses, useClasses } = createClasses("HvCheckBoxGroup", {
   },
   invalid: {
     paddingBottom: theme.space.xs,
-    borderBottom: `1px solid ${theme.colors.negative_120}`
+    borderBottom: `1px solid ${theme.form.errorColor}`
   },
   selectAll: {},
   error: {}

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

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxGroup.styles.js","sources":["../../../src/CheckBoxGroup/CheckBoxGroup.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCheckBoxGroup\", {\n  root: {\n    display: \"inline-block\",\n    overflow: \"clip\",\n    overflowClipMargin: 4,\n    verticalAlign: \"top\",\n  },\n  label: {},\n  group: { display: \"flex\" },\n  vertical: {\n    flexDirection: \"column\",\n\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&>*\": {\n      zIndex: 0,\n    },\n    \"&>*:focus-within\": {\n      zIndex: 1,\n    },\n  },\n  horizontal: {\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n    gap: theme.space.sm,\n  },\n  invalid: {\n    paddingBottom: theme.space.xs,\n    borderBottom: `1px solid ${theme.colors.negative_120}`,\n  },\n  selectAll: {},\n  error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,eAAe;AAAA,EACjB;AAAA,EACA,OAAO,CAAC;AAAA,EACR,OAAO,EAAE,SAAS,OAAO;AAAA,EACzB,UAAU;AAAA,IACR,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,YAAY;AAAA,IACV,eAAe;AAAA,IACf,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACP,eAAe,MAAM,MAAM;AAAA,IAC3B,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,EACtD;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,OAAO,CAAA;AACT,CAAC;"}
+{"version":3,"file":"CheckBoxGroup.styles.js","sources":["../../../src/CheckBoxGroup/CheckBoxGroup.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCheckBoxGroup\", {\n  root: {\n    display: \"inline-block\",\n    overflow: \"clip\",\n    overflowClipMargin: 4,\n    verticalAlign: \"top\",\n  },\n  label: {},\n  group: { display: \"flex\" },\n  vertical: {\n    flexDirection: \"column\",\n\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&>*\": {\n      zIndex: 0,\n    },\n    \"&>*:focus-within\": {\n      zIndex: 1,\n    },\n  },\n  horizontal: {\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n    gap: theme.space.sm,\n  },\n  invalid: {\n    paddingBottom: theme.space.xs,\n    borderBottom: `1px solid ${theme.form.errorColor}`,\n  },\n  selectAll: {},\n  error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,eAAe;AAAA,EACjB;AAAA,EACA,OAAO,CAAC;AAAA,EACR,OAAO,EAAE,SAAS,OAAO;AAAA,EACzB,UAAU;AAAA,IACR,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,YAAY;AAAA,IACV,eAAe;AAAA,IACf,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACP,eAAe,MAAM,MAAM;AAAA,IAC3B,cAAc,aAAa,MAAM,KAAK,UAAU;AAAA,EAClD;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,OAAO,CAAA;AACT,CAAC;"}

package/dist/esm/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sources":["../../../src/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { ColorState } from \"react-color\";\nimport { ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseDropdown } from \"../BaseDropdown\";\nimport { HvDropdownProps } from \"../Dropdown\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvPanel } from \"../Panel\";\nimport { HvTypography } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { Picker } from \"./Picker\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\n\nexport { staticClasses as colorPickerClasses };\n\nexport type HvColorPickerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvColorPickerProps {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  /** Class names to be applied. */\n  className?: string;\n  /** Id to be applied to the form element root node. */\n  id?: string;\n  /** The form element name. */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /** The value color, in HEX format. */\n  value?: string;\n  /** The default value color, in HEX format. */\n  defaultValue?: string;\n  /** If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. */\n  disabled?: boolean;\n  /** If `true` the dropdown starts opened if `false` it starts closed. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** A function to be executed whenever the color changes. */\n  onChange?: (color: string) => void;\n  /** A function to be executed whenever the color change is complete. */\n  onChangeComplete?: (color: string) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvColorPickerClasses;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** Recommended colors. The colors are HEX values. */\n  recommendedColors?: string[];\n  /** Recommended colors position. */\n  recommendedColorsPosition?: \"top\" | \"bottom\";\n  /** If `true`, the labels are shown. If `false`, they are not shown. */\n  showLabels?: boolean;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** Icon type for the input's end adornment. */\n  dropdownIcon?: \"arrow\" | \"colorPicker\";\n  /** If `true`, the input only shows an icon. If `false`, the input shows text and icons. */\n  iconOnly?: boolean;\n  /** If `true`, the saved colors area is shown. If `false`, it is not shown. */\n  showSavedColors?: boolean;\n  /** If `true`, the custom colors area is shown. If `false`, it is not shown. */\n  showCustomColors?: boolean;\n  /** The saved colors. The colors are HEX values. */\n  savedColorsValue?: string[];\n  /** The default saved colors. The colors are HEX values. */\n  defaultSavedColorsValue?: string[];\n  /** Callback fired when a new saved color is added. */\n  onSavedColorAdded?: (color?: string) => void;\n  /** Callback fired when a new saved color is removed. */\n  onSavedColorRemoved?: (color?: string) => void;\n  /** Aria label to apply to delete saved color button. */\n  deleteSavedColorButtonArialLabel?: string; // TODO: fix typo \"ArialLabel\" in next version\n  /** Aria label to apply to add saved color button. */\n  addSavedColorButtonAriaLabel?: string;\n}\n\nconst DEFAULT_LABELS = {\n  recommendedColorsLabel: \"Recommended colors:\",\n  customColorsLabel: \"Custom colors:\",\n};\n\n/**\n * A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.\n * It receives a color string in HEX format and outputs an HEX formatted color.\n */\nexport const HvColorPicker = forwardRef<HTMLDivElement, HvColorPickerProps>(\n  function HvColorPicker(props, ref) {\n    const {\n      id,\n      name,\n      required,\n      disabled,\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      className,\n      classes: classesProp,\n      value,\n      onChange,\n      onChangeComplete,\n      defaultValue = \"\",\n      expanded,\n      defaultExpanded = false,\n      recommendedColorsPosition = \"top\",\n      recommendedColors = [\n        \"#95AFE8\",\n        \"#E89E5D\",\n        \"#83B8A6\",\n        \"#70759C\",\n        \"#C57E7E\",\n        \"#FADA95\",\n        \"#ADBFE8\",\n        \"#E3B386\",\n        \"#9AC6B7\",\n        \"#8B90AF\",\n        \"#CF9797\",\n        \"#FAE1AA\",\n      ],\n      showLabels = true,\n      labels: labelsProp,\n      dropdownIcon = \"colorPicker\",\n      placeholder = \"Select color...\",\n      iconOnly = false,\n      showSavedColors = true,\n      showCustomColors = true,\n      savedColorsValue,\n      defaultSavedColorsValue = [],\n      onSavedColorAdded,\n      onSavedColorRemoved,\n      deleteSavedColorButtonArialLabel = \"Delete saved color\",\n      addSavedColorButtonAriaLabel = \"Add current color to saved colors\",\n    } = useDefaultProps(\"HvColorPicker\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const [isOpen, setIsOpen] = useControlled(expanded, defaultExpanded);\n    const [color, setColor] = useControlled(value, defaultValue);\n    const [savedColors, setSavedColors] = useControlled(\n      savedColorsValue,\n      defaultSavedColorsValue,\n    );\n    const elementId = useUniqueId(id);\n    const hasLabel = label != null;\n    const hasDescription = description != null;\n\n    const handleToggle: HvDropdownProps[\"onToggle\"] = (_, open) => {\n      setIsOpen(open);\n    };\n\n    const handleSelect = (\n      val: ColorState | { hex: string; source: string },\n    ) => {\n      onChange?.(val.hex);\n      onChangeComplete?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleOnChange = (\n      val: ColorState | { hex: string; source: string },\n    ) => {\n      onChange?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleOnChangeComplete = (\n      val: ColorState | { hex: string; source: string },\n    ) => {\n      onChangeComplete?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleAddColor = () => {\n      // When no color is provided, react-color sets the picker to #000000.\n      // This is the color that should be added in this case.\n      const colorToAdd = color || \"#000000\";\n\n      onSavedColorAdded?.(colorToAdd);\n      setSavedColors([...savedColors, colorToAdd]);\n    };\n\n    const handleRemoveColor = (val: string, position: number) => {\n      if (savedColors[position] === val) {\n        const sColors = [...savedColors];\n        sColors.splice(position, 1);\n        onSavedColorRemoved?.(val);\n        setSavedColors(sColors);\n      }\n    };\n\n    const setFocusToContent = (containerRef: HTMLElement | null) => {\n      const inputs = containerRef?.getElementsByTagName(\"input\");\n      if (inputs && inputs.length > 0) {\n        inputs[0].focus();\n      }\n    };\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                showGutter\n                id={setId(elementId, \"label\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvBaseDropdown\n          ref={ref}\n          variableWidth\n          className={className}\n          expanded={isOpen}\n          onToggle={handleToggle}\n          onContainerCreation={setFocusToContent}\n          classes={{\n            root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),\n          }}\n          adornment={\n            iconOnly && color ? (\n              <div\n                style={{ backgroundColor: color }}\n                className={cx(\n                  classes.headerColorIcon,\n                  classes.headerColorIconOnly,\n                )}\n              />\n            ) : dropdownIcon === \"colorPicker\" ? (\n              <ColorPicker className={classes.colorPickerIcon} />\n            ) : undefined\n          }\n          placeholder={\n            iconOnly ? undefined : color ? (\n              <>\n                <div\n                  style={{ backgroundColor: color }}\n                  className={classes.headerColorIcon}\n                />\n                <HvTypography\n                  className={classes.headerColorValue}\n                  variant=\"label\"\n                >\n                  {color}\n                </HvTypography>\n              </>\n            ) : (\n              placeholder\n            )\n          }\n          aria-label={ariaLabel}\n          aria-labelledby={\n            [label && setId(elementId, \"label\"), ariaLabelledBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n        >\n          <HvPanel className={classes.panel}>\n            <div className={classes.colorPicker}>\n              {recommendedColorsPosition === \"top\" && (\n                <PresetColors\n                  className={classes.recommendedColorsRoot}\n                  colors={recommendedColors}\n                  onClick={handleSelect}\n                  title={showLabels ? labels.recommendedColorsLabel : undefined}\n                />\n              )}\n              {showCustomColors && (\n                <Picker\n                  classes={{\n                    fields: cx({\n                      [classes.pickerFields]:\n                        recommendedColorsPosition === \"bottom\" ||\n                        showSavedColors,\n                    }),\n                  }}\n                  title={showLabels ? labels.customColorsLabel : undefined}\n                  color={color}\n                  onChange={handleOnChange}\n                  onChangeComplete={handleOnChangeComplete}\n                />\n              )}\n              {showSavedColors && (\n                <SavedColors\n                  colors={savedColors}\n                  onAddColor={handleAddColor}\n                  onClickColor={handleSelect}\n                  onRemoveColor={handleRemoveColor}\n                  deleteButtonAriaLabel={deleteSavedColorButtonArialLabel}\n                  addButtonAriaLabel={addSavedColorButtonAriaLabel}\n                />\n              )}\n              {recommendedColorsPosition === \"bottom\" && (\n                <PresetColors\n                  colors={recommendedColors}\n                  onClick={handleSelect}\n                  title={showLabels ? labels.recommendedColorsLabel : undefined}\n                />\n              )}\n            </div>\n          </HvPanel>\n        </HvBaseDropdown>\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvColorPicker"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.js","sources":["../../../src/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { ColorState } from \"react-color\";\nimport { ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseDropdown } from \"../BaseDropdown\";\nimport { HvDropdownProps } from \"../Dropdown\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvPanel } from \"../Panel\";\nimport { HvTypography } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { Picker } from \"./Picker\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\n\nexport { staticClasses as colorPickerClasses };\n\nexport type HvColorPickerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvColorPickerProps {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  /** Class names to be applied. */\n  className?: string;\n  /** Id to be applied to the form element root node. */\n  id?: string;\n  /** The form element name. */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /** The value color, in HEX format. */\n  value?: string;\n  /** The default value color, in HEX format. */\n  defaultValue?: string;\n  /** If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. */\n  disabled?: boolean;\n  /** If `true` the dropdown starts opened if `false` it starts closed. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** A function to be executed whenever the color changes. */\n  onChange?: (color: string) => void;\n  /** A function to be executed whenever the color change is complete. */\n  onChangeComplete?: (color: string) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvColorPickerClasses;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** Recommended colors. The colors are HEX values. */\n  recommendedColors?: HvColorAny[];\n  /** Recommended colors position. */\n  recommendedColorsPosition?: \"top\" | \"bottom\";\n  /** If `true`, the labels are shown. If `false`, they are not shown. */\n  showLabels?: boolean;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** Icon type for the input's end adornment. */\n  dropdownIcon?: \"arrow\" | \"colorPicker\";\n  /** If `true`, the input only shows an icon. If `false`, the input shows text and icons. */\n  iconOnly?: boolean;\n  /** If `true`, the saved colors area is shown. If `false`, it is not shown. */\n  showSavedColors?: boolean;\n  /** If `true`, the custom colors area is shown. If `false`, it is not shown. */\n  showCustomColors?: boolean;\n  /** The saved colors. The colors are HEX values. */\n  savedColorsValue?: string[];\n  /** The default saved colors. The colors are HEX values. */\n  defaultSavedColorsValue?: string[];\n  /** Callback fired when a new saved color is added. */\n  onSavedColorAdded?: (color?: string) => void;\n  /** Callback fired when a new saved color is removed. */\n  onSavedColorRemoved?: (color?: string) => void;\n  /** Aria label to apply to delete saved color button. */\n  deleteSavedColorButtonArialLabel?: string; // TODO: fix typo \"ArialLabel\" in next version\n  /** Aria label to apply to add saved color button. */\n  addSavedColorButtonAriaLabel?: string;\n}\n\nconst DEFAULT_LABELS = {\n  recommendedColorsLabel: \"Recommended colors:\",\n  customColorsLabel: \"Custom colors:\",\n};\n\n/**\n * A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.\n * It receives a color string in HEX format and outputs an HEX formatted color.\n */\nexport const HvColorPicker = forwardRef<HTMLDivElement, HvColorPickerProps>(\n  function HvColorPicker(props, ref) {\n    const {\n      id,\n      name,\n      required,\n      disabled,\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      className,\n      classes: classesProp,\n      value,\n      onChange,\n      onChangeComplete,\n      defaultValue = \"\",\n      expanded,\n      defaultExpanded = false,\n      recommendedColorsPosition = \"top\",\n      recommendedColors = [\n        \"#95AFE8\",\n        \"#E89E5D\",\n        \"#83B8A6\",\n        \"#70759C\",\n        \"#C57E7E\",\n        \"#FADA95\",\n        \"#ADBFE8\",\n        \"#E3B386\",\n        \"#9AC6B7\",\n        \"#8B90AF\",\n        \"#CF9797\",\n        \"#FAE1AA\",\n      ],\n      showLabels = true,\n      labels: labelsProp,\n      dropdownIcon = \"colorPicker\",\n      placeholder = \"Select color...\",\n      iconOnly = false,\n      showSavedColors = true,\n      showCustomColors = true,\n      savedColorsValue,\n      defaultSavedColorsValue = [],\n      onSavedColorAdded,\n      onSavedColorRemoved,\n      deleteSavedColorButtonArialLabel = \"Delete saved color\",\n      addSavedColorButtonAriaLabel = \"Add current color to saved colors\",\n    } = useDefaultProps(\"HvColorPicker\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const [isOpen, setIsOpen] = useControlled(expanded, defaultExpanded);\n    const [color, setColor] = useControlled(value, defaultValue);\n    const [savedColors, setSavedColors] = useControlled(\n      savedColorsValue,\n      defaultSavedColorsValue,\n    );\n    const elementId = useUniqueId(id);\n    const hasLabel = label != null;\n    const hasDescription = description != null;\n\n    const handleToggle: HvDropdownProps[\"onToggle\"] = (_, open) => {\n      setIsOpen(open);\n    };\n\n    const handleSelect = (\n      val: ColorState | { hex: string; source: string },\n    ) => {\n      onChange?.(val.hex);\n      onChangeComplete?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleOnChange = (\n      val: ColorState | { hex: string; source: string },\n    ) => {\n      onChange?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleOnChangeComplete = (\n      val: ColorState | { hex: string; source: string },\n    ) => {\n      onChangeComplete?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleAddColor = () => {\n      // When no color is provided, react-color sets the picker to #000000.\n      // This is the color that should be added in this case.\n      const colorToAdd = color || \"#000000\";\n\n      onSavedColorAdded?.(colorToAdd);\n      setSavedColors([...savedColors, colorToAdd]);\n    };\n\n    const handleRemoveColor = (val: string, position: number) => {\n      if (savedColors[position] === val) {\n        const sColors = [...savedColors];\n        sColors.splice(position, 1);\n        onSavedColorRemoved?.(val);\n        setSavedColors(sColors);\n      }\n    };\n\n    const setFocusToContent = (containerRef: HTMLElement | null) => {\n      const inputs = containerRef?.getElementsByTagName(\"input\");\n      if (inputs && inputs.length > 0) {\n        inputs[0].focus();\n      }\n    };\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                showGutter\n                id={setId(elementId, \"label\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvBaseDropdown\n          ref={ref}\n          variableWidth\n          className={className}\n          expanded={isOpen}\n          onToggle={handleToggle}\n          onContainerCreation={setFocusToContent}\n          classes={{\n            root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),\n          }}\n          adornment={\n            iconOnly && color ? (\n              <div\n                style={{ backgroundColor: color }}\n                className={cx(\n                  classes.headerColorIcon,\n                  classes.headerColorIconOnly,\n                )}\n              />\n            ) : dropdownIcon === \"colorPicker\" ? (\n              <ColorPicker className={classes.colorPickerIcon} />\n            ) : undefined\n          }\n          placeholder={\n            iconOnly ? undefined : color ? (\n              <>\n                <div\n                  style={{ backgroundColor: color }}\n                  className={classes.headerColorIcon}\n                />\n                <HvTypography\n                  className={classes.headerColorValue}\n                  variant=\"label\"\n                >\n                  {color}\n                </HvTypography>\n              </>\n            ) : (\n              placeholder\n            )\n          }\n          aria-label={ariaLabel}\n          aria-labelledby={\n            [label && setId(elementId, \"label\"), ariaLabelledBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n        >\n          <HvPanel className={classes.panel}>\n            <div className={classes.colorPicker}>\n              {recommendedColorsPosition === \"top\" && (\n                <PresetColors\n                  className={classes.recommendedColorsRoot}\n                  colors={recommendedColors}\n                  onClick={handleSelect}\n                  title={showLabels ? labels.recommendedColorsLabel : undefined}\n                />\n              )}\n              {showCustomColors && (\n                <Picker\n                  classes={{\n                    fields: cx({\n                      [classes.pickerFields]:\n                        recommendedColorsPosition === \"bottom\" ||\n                        showSavedColors,\n                    }),\n                  }}\n                  title={showLabels ? labels.customColorsLabel : undefined}\n                  color={color}\n                  onChange={handleOnChange}\n                  onChangeComplete={handleOnChangeComplete}\n                />\n              )}\n              {showSavedColors && (\n                <SavedColors\n                  colors={savedColors}\n                  onAddColor={handleAddColor}\n                  onClickColor={handleSelect}\n                  onRemoveColor={handleRemoveColor}\n                  deleteButtonAriaLabel={deleteSavedColorButtonArialLabel}\n                  addButtonAriaLabel={addSavedColorButtonAriaLabel}\n                />\n              )}\n              {recommendedColorsPosition === \"bottom\" && (\n                <PresetColors\n                  colors={recommendedColors}\n                  onClick={handleSelect}\n                  title={showLabels ? labels.recommendedColorsLabel : undefined}\n                />\n              )}\n            </div>\n          </HvPanel>\n        </HvBaseDropdown>\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvColorPicker"],"mappings":"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"}

package/dist/esm/ColorPicker/Picker/Picker.styles.js

@@ -27,7 +27,7 @@ const { staticClasses, useClasses } = createClasses(name, {
     height: "8px",
     boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),
             0 0 1px 2px rgba(0,0,0,.4)`,
-    borderRadius: "50%",
+    borderRadius: theme.radii.full,
     transform: "translate(-3px, -3px)"
   },
   hue: {
@@ -47,7 +47,7 @@ const { staticClasses, useClasses } = createClasses(name, {
     boxShadow: "0 0 2px rgb(0 0 0 / 60%)",
     marginLeft: "0px",
     border: "2px solid #fff",
-    borderRadius: theme.radii.circle,
+    borderRadius: theme.radii.full,
     "&.vertical": {
       transform: "translate(0px, -2px)"
     },

package/dist/esm/ColorPicker/Picker/Picker.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.styles.js","sources":["../../../../src/ColorPicker/Picker/Picker.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvColorPicker-Picker\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  pickers: {\n    display: \"flex\",\n    flexDirection: \"column\",\n  },\n  saturation: {\n    width: \"232px\",\n    height: \"140px\",\n    marginRight: \"0px\",\n    position: \"relative\",\n    overflow: \"visible\",\n\n    \"& > div\": {\n      borderRadius: theme.radii.base,\n\n      \"& .saturation-white\": {\n        borderRadius: theme.radii.base,\n\n        \"& .saturation-black\": {\n          borderRadius: theme.radii.base,\n        },\n      },\n    },\n  },\n  saturationPointer: {\n    width: \"8px\",\n    height: \"8px\",\n    boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),\n            0 0 1px 2px rgba(0,0,0,.4)`,\n    borderRadius: \"50%\",\n    transform: \"translate(-3px, -3px)\",\n  },\n  hue: {\n    height: \"8px\",\n    width: \"232px\",\n    position: \"relative\",\n    overflow: \"visible\",\n    marginTop: \"18px\",\n\n    \"& .hue-horizontal\": {\n      borderRadius: `calc(2*${theme.radii.base})`,\n    },\n  },\n  hueSlider: {\n    width: \"12px\",\n    height: \"12px\",\n    background: \"transparent\",\n    boxShadow: \"0 0 2px rgb(0 0 0 / 60%)\",\n    marginLeft: \"0px\",\n    border: \"2px solid #fff\",\n    borderRadius: theme.radii.circle,\n    \"&.vertical\": {\n      transform: \"translate(0px, -2px)\",\n    },\n    \"&.horizontal\": {\n      transform: \"translate(-6px, -2px)\",\n    },\n  },\n  title: {\n    fontWeight: theme.fontWeights.semibold,\n    marginBottom: 8,\n  },\n  fields: {},\n});\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,SAAS;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IAEV,WAAW;AAAA,MACT,cAAc,MAAM,MAAM;AAAA,MAE1B,uBAAuB;AAAA,QACrB,cAAc,MAAM,MAAM;AAAA,QAE1B,uBAAuB;AAAA,UACrB,cAAc,MAAM,MAAM;AAAA,QAAA;AAAA,MAC5B;AAAA,IACF;AAAA,EAEJ;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA;AAAA,IAEX,cAAc;AAAA,IACd,WAAW;AAAA,EACb;AAAA,EACA,KAAK;AAAA,IACH,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,IAEX,qBAAqB;AAAA,MACnB,cAAc,UAAU,MAAM,MAAM,IAAI;AAAA,IAAA;AAAA,EAE5C;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,cAAc;AAAA,MACZ,WAAW;AAAA,IACb;AAAA,IACA,gBAAgB;AAAA,MACd,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,OAAO;AAAA,IACL,YAAY,MAAM,YAAY;AAAA,IAC9B,cAAc;AAAA,EAChB;AAAA,EACA,QAAQ,CAAA;AACV,CAAC;"}
+{"version":3,"file":"Picker.styles.js","sources":["../../../../src/ColorPicker/Picker/Picker.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvColorPicker-Picker\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  pickers: {\n    display: \"flex\",\n    flexDirection: \"column\",\n  },\n  saturation: {\n    width: \"232px\",\n    height: \"140px\",\n    marginRight: \"0px\",\n    position: \"relative\",\n    overflow: \"visible\",\n\n    \"& > div\": {\n      borderRadius: theme.radii.base,\n\n      \"& .saturation-white\": {\n        borderRadius: theme.radii.base,\n\n        \"& .saturation-black\": {\n          borderRadius: theme.radii.base,\n        },\n      },\n    },\n  },\n  saturationPointer: {\n    width: \"8px\",\n    height: \"8px\",\n    boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),\n            0 0 1px 2px rgba(0,0,0,.4)`,\n    borderRadius: theme.radii.full,\n    transform: \"translate(-3px, -3px)\",\n  },\n  hue: {\n    height: \"8px\",\n    width: \"232px\",\n    position: \"relative\",\n    overflow: \"visible\",\n    marginTop: \"18px\",\n\n    \"& .hue-horizontal\": {\n      borderRadius: `calc(2*${theme.radii.base})`,\n    },\n  },\n  hueSlider: {\n    width: \"12px\",\n    height: \"12px\",\n    background: \"transparent\",\n    boxShadow: \"0 0 2px rgb(0 0 0 / 60%)\",\n    marginLeft: \"0px\",\n    border: \"2px solid #fff\",\n    borderRadius: theme.radii.full,\n    \"&.vertical\": {\n      transform: \"translate(0px, -2px)\",\n    },\n    \"&.horizontal\": {\n      transform: \"translate(-6px, -2px)\",\n    },\n  },\n  title: {\n    fontWeight: theme.fontWeights.semibold,\n    marginBottom: 8,\n  },\n  fields: {},\n});\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,SAAS;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IAEV,WAAW;AAAA,MACT,cAAc,MAAM,MAAM;AAAA,MAE1B,uBAAuB;AAAA,QACrB,cAAc,MAAM,MAAM;AAAA,QAE1B,uBAAuB;AAAA,UACrB,cAAc,MAAM,MAAM;AAAA,QAAA;AAAA,MAC5B;AAAA,IACF;AAAA,EAEJ;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA;AAAA,IAEX,cAAc,MAAM,MAAM;AAAA,IAC1B,WAAW;AAAA,EACb;AAAA,EACA,KAAK;AAAA,IACH,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,IAEX,qBAAqB;AAAA,MACnB,cAAc,UAAU,MAAM,MAAM,IAAI;AAAA,IAAA;AAAA,EAE5C;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,cAAc;AAAA,MACZ,WAAW;AAAA,IACb;AAAA,IACA,gBAAgB;AAAA,MACd,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,OAAO;AAAA,IACL,YAAY,MAAM,YAAY;AAAA,IAC9B,cAAc;AAAA,EAChB;AAAA,EACA,QAAQ,CAAA;AACV,CAAC;"}

package/dist/esm/ColorPicker/PresetColors/PresetColors.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Swatch } from "react-color/lib/components/common";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { getColor } from "@hitachivantara/uikit-styles";
 import { useClasses } from "./PresetColors.styles.js";
 import { staticClasses } from "./PresetColors.styles.js";
 import { HvTypography } from "../../Typography/Typography.js";
@@ -29,6 +30,7 @@ const PresetColors = (props) => {
           Swatch,
           {
             color,
+            style: { backgroundColor: getColor(color) },
             onClick: handleClick,
             focusStyle: {
               boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`