@hitachivantara/uikit-react-core 5.88.0 → 5.90.0

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.styles.js","sources":["../../../src/Skeleton/Skeleton.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSkeleton\", {\n  root: {\n    backgroundColor: theme.colors.atmo3,\n    width: \"fit-content\",\n    \"& > *\": {\n      visibility: \"hidden\",\n    },\n  },\n  content: {\n    opacity: 0,\n    animation: \"fadeIn 0.5s ease forwards\",\n\n    \"@keyframes fadeIn\": {\n      to: {\n        opacity: 1,\n      },\n    },\n  },\n  circle: {\n    borderRadius: theme.radii.circle,\n  },\n  square: {\n    borderRadius: theme.radii.base,\n  },\n  text: {\n    borderRadius: theme.radii.full,\n    width: \"100%\",\n    height: \"1.5em\",\n  },\n  pulse: {\n    animation: \"pulse 2s infinite\",\n\n    \"@keyframes pulse\": {\n      \"50%\": {\n        opacity: \"0.5\",\n      },\n    },\n  },\n  wave: {\n    overflow: \"hidden\",\n    position: \"relative\",\n    \"&::after\": {\n      animation: \"wave 2s linear 0.5s infinite\",\n      background: `linear-gradient(\n            90deg,\n            transparent,\n            ${theme.colors.atmo4},\n            transparent\n          )`,\n      content: \"''\",\n      position: \"absolute\",\n      transform: \"translateX(-100%)\",\n      inset: 0,\n\n      // Animation taken from Material UI:\n      // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Skeleton/Skeleton.js\n      \"@keyframes wave\": {\n        \"0%\": {\n          transform: \"translateX(-100%)\",\n        },\n        \"50%\": {\n          transform: \"translateX(100%)\",\n        },\n        \"100%\": {\n          transform: \"translateX(100%)\",\n        },\n      },\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,SAAS;AAAA,MACP,YAAY;AAAA,IAAA;AAAA,EAEhB;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,WAAW;AAAA,IAEX,qBAAqB;AAAA,MACnB,IAAI;AAAA,QACF,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,QAAQ;AAAA,IACN,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,QAAQ;AAAA,IACN,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,MAAM;AAAA,IACJ,cAAc,MAAM,MAAM;AAAA,IAC1B,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACL,WAAW;AAAA,IAEX,oBAAoB;AAAA,MAClB,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,MACV,WAAW;AAAA,MACX,YAAY;AAAA;AAAA;AAAA,cAGJ,MAAM,OAAO,KAAK;AAAA;AAAA;AAAA,MAG1B,SAAS;AAAA,MACT,UAAU;AAAA,MACV,WAAW;AAAA,MACX,OAAO;AAAA;AAAA;AAAA,MAIP,mBAAmB;AAAA,QACjB,MAAM;AAAA,UACJ,WAAW;AAAA,QACb;AAAA,QACA,OAAO;AAAA,UACL,WAAW;AAAA,QACb;AAAA,QACA,QAAQ;AAAA,UACN,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAEJ,CAAC;"}
+{"version":3,"file":"Skeleton.styles.js","sources":["../../../src/Skeleton/Skeleton.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSkeleton\", {\n  root: {\n    backgroundColor: theme.colors.bgPageSecondary,\n    width: \"fit-content\",\n    \"& > *\": {\n      visibility: \"hidden\",\n    },\n  },\n  content: {\n    opacity: 0,\n    animation: \"fadeIn 0.5s ease forwards\",\n\n    \"@keyframes fadeIn\": {\n      to: {\n        opacity: 1,\n      },\n    },\n  },\n  circle: {\n    borderRadius: theme.radii.full,\n  },\n  square: {\n    borderRadius: theme.radii.base,\n  },\n  text: {\n    borderRadius: theme.radii.full,\n    width: \"100%\",\n    height: \"1.5em\",\n  },\n  pulse: {\n    animation: \"pulse 2s infinite\",\n\n    \"@keyframes pulse\": {\n      \"50%\": {\n        opacity: \"0.5\",\n      },\n    },\n  },\n  wave: {\n    overflow: \"hidden\",\n    position: \"relative\",\n    \"&::after\": {\n      animation: \"wave 2s linear 0.5s infinite\",\n      background: `linear-gradient(\n            90deg,\n            transparent,\n            ${theme.colors.border},\n            transparent\n          )`,\n      content: \"''\",\n      position: \"absolute\",\n      transform: \"translateX(-100%)\",\n      inset: 0,\n\n      // Animation taken from Material UI:\n      // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Skeleton/Skeleton.js\n      \"@keyframes wave\": {\n        \"0%\": {\n          transform: \"translateX(-100%)\",\n        },\n        \"50%\": {\n          transform: \"translateX(100%)\",\n        },\n        \"100%\": {\n          transform: \"translateX(100%)\",\n        },\n      },\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,SAAS;AAAA,MACP,YAAY;AAAA,IAAA;AAAA,EAEhB;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,WAAW;AAAA,IAEX,qBAAqB;AAAA,MACnB,IAAI;AAAA,QACF,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,QAAQ;AAAA,IACN,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,QAAQ;AAAA,IACN,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,MAAM;AAAA,IACJ,cAAc,MAAM,MAAM;AAAA,IAC1B,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACL,WAAW;AAAA,IAEX,oBAAoB;AAAA,MAClB,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,MACV,WAAW;AAAA,MACX,YAAY;AAAA;AAAA;AAAA,cAGJ,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,MAG3B,SAAS;AAAA,MACT,UAAU;AAAA,MACV,WAAW;AAAA,MACX,OAAO;AAAA;AAAA;AAAA,MAIP,mBAAmB;AAAA,QACjB,MAAM;AAAA,UACJ,WAAW;AAAA,QACb;AAAA,QACA,OAAO;AAAA,UACL,WAAW;AAAA,QACb;AAAA,QACA,QAAQ;AAAA,UACN,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAEJ,CAAC;"}

package/dist/esm/Slider/Slider.styles.js

@@ -9,8 +9,7 @@ const dot = {
   width: "1px",
   height: "4px",
   border: "none",
-  borderRadius: "0%",
-  backgroundColor: theme.colors.atmo4,
+  backgroundColor: theme.colors.border,
   cursor: "pointer",
   verticalAlign: "middle",
   zIndex: "-3"
@@ -24,15 +23,15 @@ const dragSquare = {
   top: "-12px",
   content: "''",
   background: "transparent",
-  borderTop: `12px solid ${theme.colors.primary_20}`,
-  borderBottom: `12px solid ${theme.colors.primary_20}`,
+  borderTop: `12px solid ${theme.colors.primaryDimmed}`,
+  borderBottom: `12px solid ${theme.colors.primaryDimmed}`,
   zIndex: "-2"
 };
 const ring = {
   width: "32px",
   height: "32px",
-  borderRadius: "50%",
-  border: `9px solid ${theme.colors.primary_20}`,
+  borderRadius: theme.radii.circle,
+  border: `9px solid ${theme.colors.primaryDimmed}`,
   opacity: "100%",
   content: "''",
   position: "absolute",
@@ -42,8 +41,8 @@ const ring = {
 const border = {
   width: "20px",
   height: "20px",
-  borderRadius: "50%",
-  border: `2px solid ${theme.colors.atmo1}`,
+  borderRadius: theme.radii.circle,
+  border: `2px solid ${theme.colors.textDimmed}`,
   content: "''",
   position: "absolute",
   top: "-4px",
@@ -59,7 +58,7 @@ const sliderStyles = {
   disabledMark: {
     ...theme.typography.caption1,
     fontFamily: theme.fontFamily.body,
-    color: `${theme.colors.secondary_60}`,
+    color: theme.colors.textDisabled,
     cursor: "not-allowed",
     top: "-2px"
   },
@@ -77,7 +76,6 @@ const sliderStyles = {
     width: "2px",
     marginLeft: "-1px",
     border: "none",
-    borderRadius: "0",
     marginTop: "0px",
     left: "100%",
     touchAction: "none",
@@ -86,16 +84,16 @@ const sliderStyles = {
   knobInner: {
     borderColor: "transparent",
     boxShadow: "none",
-    backgroundColor: theme.colors.secondary,
+    backgroundColor: theme.colors.text,
     width: "16px",
     height: "16px"
   },
   knobOuter: {
     position: "relative",
     borderColor: "transparent",
-    borderRadius: "50%",
+    borderRadius: theme.radii.circle,
     boxShadow: "none",
-    backgroundColor: theme.colors.atmo4,
+    backgroundColor: theme.colors.border,
     width: "32px",
     height: "32px",
     top: "-80%",
@@ -103,12 +101,12 @@ const sliderStyles = {
     zIndex: "-1"
   },
   track: {
-    backgroundColor: theme.colors.secondary,
+    backgroundColor: theme.colors.text,
     height: "3px",
     zIndex: "-1",
     marginTop: "-1px"
   },
-  rail: { backgroundColor: theme.colors.atmo4, height: "1px", zIndex: "-3" }
+  rail: { backgroundColor: theme.colors.border, height: "1px", zIndex: "-3" }
 };
 const { staticClasses, useClasses } = createClasses("HvSlider", {
   sliderBase: { ...base },
@@ -204,7 +202,7 @@ const { staticClasses, useClasses } = createClasses("HvSlider", {
   root: {},
   sliderTooltip: {
     "&& .rc-slider-tooltip-inner": {
-      background: theme.colors.atmo1,
+      background: theme.colors.bgContainer,
       borderRadius: 0,
       maxWidth: "532px",
       height: "100%",

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.styles.js","sources":["../../../src/Slider/Slider.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport base from \"./base\";\n\nconst dot: React.CSSProperties = {\n  position: \"absolute\",\n  bottom: \"-1px\",\n  marginLeft: \"0px\",\n  width: \"1px\",\n  height: \"4px\",\n  border: \"none\",\n  borderRadius: \"0%\",\n  backgroundColor: theme.colors.atmo4,\n  cursor: \"pointer\",\n  verticalAlign: \"middle\",\n  zIndex: \"-3\",\n};\n\nconst dragSquare: React.CSSProperties = {\n  cursor: \"grab\",\n  width: \"calc(100% - 40px)\",\n  left: \"20px\",\n  height: \"27px\",\n  position: \"absolute\",\n  top: \"-12px\",\n  content: \"''\",\n  background: \"transparent\",\n  borderTop: `12px solid ${theme.colors.primary_20}`,\n  borderBottom: `12px solid ${theme.colors.primary_20}`,\n  zIndex: \"-2\",\n};\n\nconst ring: React.CSSProperties = {\n  width: \"32px\",\n  height: \"32px\",\n  borderRadius: \"50%\",\n  border: `9px solid ${theme.colors.primary_20}`,\n  opacity: \"100%\",\n  content: \"''\",\n  position: \"absolute\",\n  top: \"-10px\",\n  left: \"-10px\",\n};\n\nconst border: React.CSSProperties = {\n  width: \"20px\",\n  height: \"20px\",\n  borderRadius: \"50%\",\n  border: `2px solid ${theme.colors.atmo1}`,\n  content: \"''\",\n  position: \"absolute\",\n  top: \"-4px\",\n  left: \"-4px\",\n};\n\nexport const sliderStyles = {\n  mark: {\n    ...theme.typography.caption1,\n    fontFamily: theme.fontFamily.body,\n    top: \"-2px\",\n    zIndex: -1,\n  },\n  disabledMark: {\n    ...theme.typography.caption1,\n    fontFamily: theme.fontFamily.body,\n    color: `${theme.colors.secondary_60}`,\n    cursor: \"not-allowed\",\n    top: \"-2px\",\n  },\n  dot: {\n    ...dot,\n  },\n  dotDisabled: {\n    ...dot,\n    cursor: \"not-allowed\",\n  },\n  knobHidden: { display: \"none\" },\n  knobHiddenLast: {\n    borderColor: \"transparent\",\n    height: \"3px\",\n    width: \"2px\",\n    marginLeft: \"-1px\",\n    border: \"none\",\n    borderRadius: \"0\",\n    marginTop: \"0px\",\n    left: \"100%\",\n    touchAction: \"none\",\n    cursor: \"default\",\n  },\n  knobInner: {\n    borderColor: \"transparent\",\n    boxShadow: \"none\",\n    backgroundColor: theme.colors.secondary,\n    width: \"16px\",\n    height: \"16px\",\n  },\n  knobOuter: {\n    position: \"relative\",\n    borderColor: \"transparent\",\n    borderRadius: \"50%\",\n    boxShadow: \"none\",\n    backgroundColor: theme.colors.atmo4,\n    width: \"32px\",\n    height: \"32px\",\n    top: \"-80%\",\n    left: \"-80%\",\n    zIndex: \"-1\",\n  },\n  track: {\n    backgroundColor: theme.colors.secondary,\n    height: \"3px\",\n    zIndex: \"-1\",\n    marginTop: \"-1px\",\n  },\n  rail: { backgroundColor: theme.colors.atmo4, height: \"1px\", zIndex: \"-3\" },\n} satisfies Record<string, React.CSSProperties>;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSlider\", {\n  sliderBase: { ...base },\n  rootDisabled: {\n    cursor: \"not-allowed\",\n    \"&& .rc-slider-disabled\": {\n      background: \"transparent\",\n    },\n  },\n  sliderContainer: { marginBottom: \"18px\", padding: \"0 23px\" },\n  error: { padding: \"0 8px\" },\n  trackDragging: {\n    cursor: \"grabbing\",\n\n    \"&& .rc-slider-track\": {\n      \"&::before\": {\n        ...dragSquare,\n        cursor: \"grabbing\",\n      },\n    },\n  },\n  trackStandBy: {\n    \"&& .rc-slider-track\": {\n      \"&:hover\": {\n        \"&::before\": {\n          ...dragSquare,\n        },\n      },\n    },\n  },\n  sliderRoot: { zIndex: 0 },\n  rootRange: {},\n  handleContainer: {\n    \"&& .rc-slider-handle\": {\n      cursor: \"pointer\",\n      marginTop: \"-8px\",\n      opacity: 1,\n      \"&:active\": {\n        cursor: \"grab\",\n        \"&::before\": {\n          ...ring,\n        },\n        \"&::after\": {\n          ...border,\n        },\n      },\n      \"&:hover\": {\n        \"&::before\": {\n          ...ring,\n        },\n        \"&::after\": {\n          ...border,\n        },\n      },\n\n      // Note about the usage of `!important below`: the way the rc-slider allows us to\n      // style the knobs is through inline styles. This means that the `box-shadow`, which\n      // is an inline style and is set to `none` to prevent the default rc-slider style to\n      // show, can't be overridden for the focus scenario unless we use the `!important` flag.\n      \"&:focus-visible\": {\n        ...outlineStyles,\n        boxShadow: \"0 0 0 3px #52A8EC, 0 0 0 7px rgba(29,155,209,.3)!important\",\n        \"&::after\": {\n          ...border,\n        },\n      },\n    },\n  },\n  handle: {},\n  handleContainerDisabled: {\n    \"&& .rc-slider-handle\": {\n      cursor: \"not-allowed\",\n      marginTop: \"-8px\",\n      opacity: 1,\n      \"&:active\": {\n        cursor: \"not-allowed\",\n      },\n      \"&:hover\": {\n        cursor: \"not-allowed\",\n      },\n    },\n  },\n  handleHiddenContainer: { display: \"none\" },\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    marginBottom: \"12px\",\n    marginLeft: \"20px\",\n    marginRight: \"20px\",\n  },\n  labelIncluded: { justifyContent: \"space-between\" },\n  onlyInput: { justifyContent: \"flex-end\" },\n  label: {},\n  root: {},\n  sliderTooltip: {\n    \"&& .rc-slider-tooltip-inner\": {\n      background: theme.colors.atmo1,\n      borderRadius: 0,\n      maxWidth: \"532px\",\n      height: \"100%\",\n      padding: theme.space.sm,\n      ...theme.typography.body,\n      fontFamily: theme.fontFamily.body,\n      boxShadow: \"none\",\n    },\n\n    \"&& .rc-slider-tooltip-arrow\": {\n      visibility: \"hidden\",\n    },\n  },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Slider.styles.js","sources":["../../../src/Slider/Slider.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport base from \"./base\";\n\nconst dot: React.CSSProperties = {\n  position: \"absolute\",\n  bottom: \"-1px\",\n  marginLeft: \"0px\",\n  width: \"1px\",\n  height: \"4px\",\n  border: \"none\",\n  backgroundColor: theme.colors.border,\n  cursor: \"pointer\",\n  verticalAlign: \"middle\",\n  zIndex: \"-3\",\n};\n\nconst dragSquare: React.CSSProperties = {\n  cursor: \"grab\",\n  width: \"calc(100% - 40px)\",\n  left: \"20px\",\n  height: \"27px\",\n  position: \"absolute\",\n  top: \"-12px\",\n  content: \"''\",\n  background: \"transparent\",\n  borderTop: `12px solid ${theme.colors.primaryDimmed}`,\n  borderBottom: `12px solid ${theme.colors.primaryDimmed}`,\n  zIndex: \"-2\",\n};\n\nconst ring: React.CSSProperties = {\n  width: \"32px\",\n  height: \"32px\",\n  borderRadius: theme.radii.circle,\n  border: `9px solid ${theme.colors.primaryDimmed}`,\n  opacity: \"100%\",\n  content: \"''\",\n  position: \"absolute\",\n  top: \"-10px\",\n  left: \"-10px\",\n};\n\nconst border: React.CSSProperties = {\n  width: \"20px\",\n  height: \"20px\",\n  borderRadius: theme.radii.circle,\n  border: `2px solid ${theme.colors.textDimmed}`,\n  content: \"''\",\n  position: \"absolute\",\n  top: \"-4px\",\n  left: \"-4px\",\n};\n\nexport const sliderStyles = {\n  mark: {\n    ...theme.typography.caption1,\n    fontFamily: theme.fontFamily.body,\n    top: \"-2px\",\n    zIndex: -1,\n  },\n  disabledMark: {\n    ...theme.typography.caption1,\n    fontFamily: theme.fontFamily.body,\n    color: theme.colors.textDisabled,\n    cursor: \"not-allowed\",\n    top: \"-2px\",\n  },\n  dot: {\n    ...dot,\n  },\n  dotDisabled: {\n    ...dot,\n    cursor: \"not-allowed\",\n  },\n  knobHidden: { display: \"none\" },\n  knobHiddenLast: {\n    borderColor: \"transparent\",\n    height: \"3px\",\n    width: \"2px\",\n    marginLeft: \"-1px\",\n    border: \"none\",\n    marginTop: \"0px\",\n    left: \"100%\",\n    touchAction: \"none\",\n    cursor: \"default\",\n  },\n  knobInner: {\n    borderColor: \"transparent\",\n    boxShadow: \"none\",\n    backgroundColor: theme.colors.text,\n    width: \"16px\",\n    height: \"16px\",\n  },\n  knobOuter: {\n    position: \"relative\",\n    borderColor: \"transparent\",\n    borderRadius: theme.radii.circle,\n    boxShadow: \"none\",\n    backgroundColor: theme.colors.border,\n    width: \"32px\",\n    height: \"32px\",\n    top: \"-80%\",\n    left: \"-80%\",\n    zIndex: \"-1\",\n  },\n  track: {\n    backgroundColor: theme.colors.text,\n    height: \"3px\",\n    zIndex: \"-1\",\n    marginTop: \"-1px\",\n  },\n  rail: { backgroundColor: theme.colors.border, height: \"1px\", zIndex: \"-3\" },\n} satisfies Record<string, React.CSSProperties>;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSlider\", {\n  sliderBase: { ...base },\n  rootDisabled: {\n    cursor: \"not-allowed\",\n    \"&& .rc-slider-disabled\": {\n      background: \"transparent\",\n    },\n  },\n  sliderContainer: { marginBottom: \"18px\", padding: \"0 23px\" },\n  error: { padding: \"0 8px\" },\n  trackDragging: {\n    cursor: \"grabbing\",\n\n    \"&& .rc-slider-track\": {\n      \"&::before\": {\n        ...dragSquare,\n        cursor: \"grabbing\",\n      },\n    },\n  },\n  trackStandBy: {\n    \"&& .rc-slider-track\": {\n      \"&:hover\": {\n        \"&::before\": {\n          ...dragSquare,\n        },\n      },\n    },\n  },\n  sliderRoot: { zIndex: 0 },\n  rootRange: {},\n  handleContainer: {\n    \"&& .rc-slider-handle\": {\n      cursor: \"pointer\",\n      marginTop: \"-8px\",\n      opacity: 1,\n      \"&:active\": {\n        cursor: \"grab\",\n        \"&::before\": {\n          ...ring,\n        },\n        \"&::after\": {\n          ...border,\n        },\n      },\n      \"&:hover\": {\n        \"&::before\": {\n          ...ring,\n        },\n        \"&::after\": {\n          ...border,\n        },\n      },\n\n      // Note about the usage of `!important below`: the way the rc-slider allows us to\n      // style the knobs is through inline styles. This means that the `box-shadow`, which\n      // is an inline style and is set to `none` to prevent the default rc-slider style to\n      // show, can't be overridden for the focus scenario unless we use the `!important` flag.\n      \"&:focus-visible\": {\n        ...outlineStyles,\n        boxShadow: \"0 0 0 3px #52A8EC, 0 0 0 7px rgba(29,155,209,.3)!important\",\n        \"&::after\": {\n          ...border,\n        },\n      },\n    },\n  },\n  handle: {},\n  handleContainerDisabled: {\n    \"&& .rc-slider-handle\": {\n      cursor: \"not-allowed\",\n      marginTop: \"-8px\",\n      opacity: 1,\n      \"&:active\": {\n        cursor: \"not-allowed\",\n      },\n      \"&:hover\": {\n        cursor: \"not-allowed\",\n      },\n    },\n  },\n  handleHiddenContainer: { display: \"none\" },\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    marginBottom: \"12px\",\n    marginLeft: \"20px\",\n    marginRight: \"20px\",\n  },\n  labelIncluded: { justifyContent: \"space-between\" },\n  onlyInput: { justifyContent: \"flex-end\" },\n  label: {},\n  root: {},\n  sliderTooltip: {\n    \"&& .rc-slider-tooltip-inner\": {\n      background: theme.colors.bgContainer,\n      borderRadius: 0,\n      maxWidth: \"532px\",\n      height: \"100%\",\n      padding: theme.space.sm,\n      ...theme.typography.body,\n      fontFamily: theme.fontFamily.body,\n      boxShadow: \"none\",\n    },\n\n    \"&& .rc-slider-tooltip-arrow\": {\n      visibility: \"hidden\",\n    },\n  },\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/Slider/SliderInput/SliderInput.js

@@ -32,7 +32,7 @@ const HvSliderInput = ({
     setInputValues(knobsValuesToString(valuesProp, markDigits));
   }, [markDigits, valuesProp]);
   return /* @__PURE__ */ jsx("div", { className: cx(classes.inputRoot, className), ...others, children: inputValues.map((value, index) => /* @__PURE__ */ jsxs("div", { className: classes.inputContainer, children: [
-    index !== 0 && /* @__PURE__ */ jsx(Remove, { color: disabled ? "secondary_60" : void 0 }),
+    index !== 0 && /* @__PURE__ */ jsx(Remove, { color: disabled ? "textDisabled" : void 0 }),
     /* @__PURE__ */ jsx(
       HvInput,
       {

package/dist/esm/Slider/SliderInput/SliderInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderInput.js","sources":["../../../../src/Slider/SliderInput/SliderInput.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { Remove } from \"@hitachivantara/uikit-react-icons\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvFormStatus } from \"../../FormElement\";\nimport { HvInput, HvInputProps } from \"../../Input\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { setId } from \"../../utils/setId\";\nimport { knobsValuesToString, stringValuesToKnobs } from \"../utils\";\nimport { staticClasses, useClasses } from \"./SliderInput.styles\";\n\nexport { staticClasses as sliderInputClasses };\n\nexport type HvSliderInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderInputProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Used to generate the aria-label for the inputs.\n   */\n  label?: React.ReactNode;\n  /**\n   * Input status.\n   */\n  status?: HvFormStatus[];\n  /**\n   * The values array to apply to the component\n   */\n  values?: number[];\n  /**\n   * Callback function to be triggered when the selected date has changed.\n   */\n  onChange?: (values: number[], index: number) => void;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: HvInputProps[];\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates how many decimals to use.\n   */\n  markDigits?: number;\n  /**\n   * Styles applied from the theme.\n   */\n  classes?: HvSliderInputClasses;\n}\n\nexport const HvSliderInput = ({\n  classes: classesProp,\n  className,\n  id,\n  label,\n  status,\n  values: valuesProp = [],\n  inputProps = [],\n  readOnly = false,\n  disabled = false,\n  markDigits = 0,\n  onChange,\n  ...others\n}: HvSliderInputProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const [inputValues, setInputValues] = useState<string[]>(\n    knobsValuesToString(valuesProp, markDigits),\n  );\n\n  const handleChange = (index: number) => {\n    if (disabled) return;\n\n    onChange?.(stringValuesToKnobs(inputValues), index);\n  };\n\n  useEffect(() => {\n    setInputValues(knobsValuesToString(valuesProp, markDigits));\n  }, [markDigits, valuesProp]);\n\n  return (\n    <div className={cx(classes.inputRoot, className)} {...others}>\n      {inputValues.map((value, index) => (\n        <div key={setId(id, index)} className={classes.inputContainer}>\n          {index !== 0 && (\n            <Remove color={disabled ? \"secondary_60\" : undefined} />\n          )}\n          <HvInput\n            id={setId(id, index)}\n            aria-label={`${label}-${index}`}\n            className={classes.input}\n            disabled={disabled}\n            type=\"number\"\n            value={Number.isNaN(value) || value == null ? \"\" : value.toString()}\n            onEnter={() => handleChange(index)}\n            onBlur={() => handleChange(index)}\n            onChange={(_, inputValue) => {\n              const newValues = [...inputValues];\n              newValues[index] = inputValue;\n              setInputValues(newValues);\n            }}\n            status={status?.[index] || \"standBy\"}\n            readOnly={readOnly}\n            disableClear\n            {...inputProps[index]}\n          />\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAuDO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ,aAAa,CAAC;AAAA,EACtB,aAAa,CAAC;AAAA,EACd,WAAW;AAAA,EACX,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC,oBAAoB,YAAY,UAAU;AAAA,EAC5C;AAEM,QAAA,eAAe,CAAC,UAAkB;AACtC,QAAI,SAAU;AAEH,eAAA,oBAAoB,WAAW,GAAG,KAAK;AAAA,EACpD;AAEA,YAAU,MAAM;AACC,mBAAA,oBAAoB,YAAY,UAAU,CAAC;AAAA,EAAA,GACzD,CAAC,YAAY,UAAU,CAAC;AAE3B,6BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,WAAW,SAAS,GAAI,GAAG,QACnD,UAAY,YAAA,IAAI,CAAC,OAAO,+BACtB,OAA2B,EAAA,WAAW,QAAQ,gBAC5C,UAAA;AAAA,IAAA,UAAU,KACR,oBAAA,QAAA,EAAO,OAAO,WAAW,iBAAiB,QAAW;AAAA,IAExD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,KAAK;AAAA,QACnB,cAAY,GAAG,KAAK,IAAI,KAAK;AAAA,QAC7B,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA,MAAK;AAAA,QACL,OAAO,OAAO,MAAM,KAAK,KAAK,SAAS,OAAO,KAAK,MAAM,SAAS;AAAA,QAClE,SAAS,MAAM,aAAa,KAAK;AAAA,QACjC,QAAQ,MAAM,aAAa,KAAK;AAAA,QAChC,UAAU,CAAC,GAAG,eAAe;AACrB,gBAAA,YAAY,CAAC,GAAG,WAAW;AACjC,oBAAU,KAAK,IAAI;AACnB,yBAAe,SAAS;AAAA,QAC1B;AAAA,QACA,QAAQ,SAAS,KAAK,KAAK;AAAA,QAC3B;AAAA,QACA,cAAY;AAAA,QACX,GAAG,WAAW,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACtB,EAAA,GAtBQ,MAAM,IAAI,KAAK,CAuBzB,CACD,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"SliderInput.js","sources":["../../../../src/Slider/SliderInput/SliderInput.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { Remove } from \"@hitachivantara/uikit-react-icons\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvFormStatus } from \"../../FormElement\";\nimport { HvInput, HvInputProps } from \"../../Input\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { setId } from \"../../utils/setId\";\nimport { knobsValuesToString, stringValuesToKnobs } from \"../utils\";\nimport { staticClasses, useClasses } from \"./SliderInput.styles\";\n\nexport { staticClasses as sliderInputClasses };\n\nexport type HvSliderInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderInputProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Used to generate the aria-label for the inputs.\n   */\n  label?: React.ReactNode;\n  /**\n   * Input status.\n   */\n  status?: HvFormStatus[];\n  /**\n   * The values array to apply to the component\n   */\n  values?: number[];\n  /**\n   * Callback function to be triggered when the selected date has changed.\n   */\n  onChange?: (values: number[], index: number) => void;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: HvInputProps[];\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates how many decimals to use.\n   */\n  markDigits?: number;\n  /**\n   * Styles applied from the theme.\n   */\n  classes?: HvSliderInputClasses;\n}\n\nexport const HvSliderInput = ({\n  classes: classesProp,\n  className,\n  id,\n  label,\n  status,\n  values: valuesProp = [],\n  inputProps = [],\n  readOnly = false,\n  disabled = false,\n  markDigits = 0,\n  onChange,\n  ...others\n}: HvSliderInputProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const [inputValues, setInputValues] = useState<string[]>(\n    knobsValuesToString(valuesProp, markDigits),\n  );\n\n  const handleChange = (index: number) => {\n    if (disabled) return;\n\n    onChange?.(stringValuesToKnobs(inputValues), index);\n  };\n\n  useEffect(() => {\n    setInputValues(knobsValuesToString(valuesProp, markDigits));\n  }, [markDigits, valuesProp]);\n\n  return (\n    <div className={cx(classes.inputRoot, className)} {...others}>\n      {inputValues.map((value, index) => (\n        <div key={setId(id, index)} className={classes.inputContainer}>\n          {index !== 0 && (\n            <Remove color={disabled ? \"textDisabled\" : undefined} />\n          )}\n          <HvInput\n            id={setId(id, index)}\n            aria-label={`${label}-${index}`}\n            className={classes.input}\n            disabled={disabled}\n            type=\"number\"\n            value={Number.isNaN(value) || value == null ? \"\" : value.toString()}\n            onEnter={() => handleChange(index)}\n            onBlur={() => handleChange(index)}\n            onChange={(_, inputValue) => {\n              const newValues = [...inputValues];\n              newValues[index] = inputValue;\n              setInputValues(newValues);\n            }}\n            status={status?.[index] || \"standBy\"}\n            readOnly={readOnly}\n            disableClear\n            {...inputProps[index]}\n          />\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAuDO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ,aAAa,CAAC;AAAA,EACtB,aAAa,CAAC;AAAA,EACd,WAAW;AAAA,EACX,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC,oBAAoB,YAAY,UAAU;AAAA,EAC5C;AAEM,QAAA,eAAe,CAAC,UAAkB;AACtC,QAAI,SAAU;AAEH,eAAA,oBAAoB,WAAW,GAAG,KAAK;AAAA,EACpD;AAEA,YAAU,MAAM;AACC,mBAAA,oBAAoB,YAAY,UAAU,CAAC;AAAA,EAAA,GACzD,CAAC,YAAY,UAAU,CAAC;AAE3B,6BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,WAAW,SAAS,GAAI,GAAG,QACnD,UAAY,YAAA,IAAI,CAAC,OAAO,+BACtB,OAA2B,EAAA,WAAW,QAAQ,gBAC5C,UAAA;AAAA,IAAA,UAAU,KACR,oBAAA,QAAA,EAAO,OAAO,WAAW,iBAAiB,QAAW;AAAA,IAExD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,KAAK;AAAA,QACnB,cAAY,GAAG,KAAK,IAAI,KAAK;AAAA,QAC7B,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA,MAAK;AAAA,QACL,OAAO,OAAO,MAAM,KAAK,KAAK,SAAS,OAAO,KAAK,MAAM,SAAS;AAAA,QAClE,SAAS,MAAM,aAAa,KAAK;AAAA,QACjC,QAAQ,MAAM,aAAa,KAAK;AAAA,QAChC,UAAU,CAAC,GAAG,eAAe;AACrB,gBAAA,YAAY,CAAC,GAAG,WAAW;AACjC,oBAAU,KAAK,IAAI;AACnB,yBAAe,SAAS;AAAA,QAC1B;AAAA,QACA,QAAQ,SAAS,KAAK,KAAK;AAAA,QAC3B;AAAA,QACA,cAAY;AAAA,QACX,GAAG,WAAW,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACtB,EAAA,GAtBQ,MAAM,IAAI,KAAK,CAuBzB,CACD,EACH,CAAA;AAEJ;"}

package/dist/esm/Slider/base.js

@@ -1,10 +1,10 @@
+import { theme } from "@hitachivantara/uikit-styles";
 const base = {
   "& .rc-slider": {
     position: "relative",
     width: "100%",
     height: "14px",
     padding: " 5px 0",
-    borderRadius: "6px",
     touchAction: "none",
     boxSizing: "border-box",
     WebkitTapHighlightColor: "rgba(0, 0, 0, 0)"
@@ -17,14 +17,12 @@ const base = {
     position: "absolute",
     width: "100%",
     height: "4px",
-    backgroundColor: "#e9e9e9",
-    borderRadius: "6px"
+    backgroundColor: "#e9e9e9"
   },
   "& .rc-slider-track": {
     position: "absolute",
     height: "4px",
-    backgroundColor: "#abe2fb",
-    borderRadius: "6px"
+    backgroundColor: "#abe2fb"
   },
   "& .rc-slider-handle": {
     position: "absolute",
@@ -33,7 +31,7 @@ const base = {
     marginTop: "-5px",
     backgroundColor: "#fff",
     border: "solid 2px #96dbfa",
-    borderRadius: "50%",
+    borderRadius: theme.radii.full,
     cursor: "grab",
     opacity: 0.8,
     touchAction: "pan-x"
@@ -95,7 +93,7 @@ const base = {
     verticalAlign: "middle",
     backgroundColor: "#fff",
     border: "2px solid #e9e9e9",
-    borderRadius: "50%",
+    borderRadius: theme.radii.full,
     cursor: "pointer"
   },
   "& .rc-slider-dot-active": {
@@ -224,7 +222,7 @@ const base = {
     textAlign: "center",
     textDecoration: "none",
     backgroundColor: "#6c6c6c",
-    borderRadius: "6px",
+    borderRadius: theme.radii.round,
     boxShadow: "0 0 4px #d9d9d9"
   },
   "& .rc-slider-tooltip-arrow": {

package/dist/esm/Slider/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../src/Slider/base.ts"],"sourcesContent":["import type { CSSInterpolation } from \"@emotion/serialize\";\n\nexport default {\n  \"& .rc-slider\": {\n    position: \"relative\",\n    width: \"100%\",\n    height: \"14px\",\n    padding: \" 5px 0\",\n    borderRadius: \"6px\",\n    touchAction: \"none\",\n    boxSizing: \"border-box\",\n    WebkitTapHighlightColor: \"rgba(0, 0, 0, 0)\",\n  },\n  \"& .rc-slider *\": {\n    boxSizing: \"border-box\",\n    WebkitTapHighlightColor: \"rgba(0, 0, 0, 0)\",\n  },\n  \"& .rc-slider-rail\": {\n    position: \"absolute\",\n    width: \"100%\",\n    height: \"4px\",\n    backgroundColor: \"#e9e9e9\",\n    borderRadius: \"6px\",\n  },\n  \"& .rc-slider-track\": {\n    position: \"absolute\",\n    height: \"4px\",\n    backgroundColor: \"#abe2fb\",\n    borderRadius: \"6px\",\n  },\n  \"& .rc-slider-handle\": {\n    position: \"absolute\",\n    width: \"14px\",\n    height: \"14px\",\n    marginTop: \"-5px\",\n    backgroundColor: \"#fff\",\n    border: \"solid 2px #96dbfa\",\n    borderRadius: \"50%\",\n    cursor: \"grab\",\n    opacity: 0.8,\n    touchAction: \"pan-x\",\n  },\n  \"& .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging\":\n    {\n      borderColor: \"#57c5f7\",\n      boxShadow: \"0 0 0 5px #96dbfa\",\n    },\n  \"& .rc-slider-handle:focus\": {\n    outline: \"none\",\n    boxShadow: \"none\",\n  },\n  \"& .rc-slider-handle:focus-visible\": {\n    borderColor: \"#2db7f5\",\n    boxShadow: \"0 0 0 3px #96dbfa\",\n  },\n  \"& .rc-slider-handle-click-focused:focus\": {\n    borderColor: \"#96dbfa\",\n    boxShadow: \"unset\",\n  },\n  \"& .rc-slider-handle:hover\": {\n    borderColor: \"#57c5f7\",\n  },\n  \"& .rc-slider-handle:active\": {\n    borderColor: \"#57c5f7\",\n    boxShadow: \"0 0 5px #57c5f7\",\n    cursor: \"grabbing\",\n  },\n  \"& .rc-slider-mark\": {\n    position: \"absolute\",\n    top: \"18px\",\n    left: 0,\n    width: \"100%\",\n    fontSize: \"12px\",\n  },\n  \"& .rc-slider-mark-text\": {\n    position: \"absolute\",\n    display: \"inline-block\",\n    color: \"#999\",\n    textAlign: \"center\",\n    verticalAlign: \"middle\",\n    cursor: \"pointer\",\n  },\n  \"& .rc-slider-mark-text-active\": {\n    color: \"#666\",\n  },\n  \"& .rc-slider-step\": {\n    position: \"absolute\",\n    width: \"100%\",\n    height: \"4px\",\n    background: \"transparent\",\n    pointerEvents: \"none\",\n  },\n  \"& .rc-slider-dot\": {\n    position: \"absolute\",\n    bottom: \"-2px\",\n    width: \"8px\",\n    height: \"8px\",\n    verticalAlign: \"middle\",\n    backgroundColor: \"#fff\",\n    border: \"2px solid #e9e9e9\",\n    borderRadius: \"50%\",\n    cursor: \"pointer\",\n  },\n  \"& .rc-slider-dot-active\": {\n    borderColor: \"#96dbfa\",\n  },\n  \"& .rc-slider-dot-reverse\": {\n    marginRight: \"-4px\",\n  },\n  \"& .rc-slider-disabled\": {\n    backgroundColor: \"#e9e9e9\",\n  },\n  \"& .rc-slider-disabled .rc-slider-track\": {\n    backgroundColor: \"#ccc\",\n  },\n  \"& .rc-slider-disabled .rc-slider-handle\": {\n    backgroundColor: \"#fff\",\n    borderColor: \"#ccc\",\n    boxShadow: \"none\",\n    cursor: \"not-allowed\",\n  },\n  \"&.rc-slider-disabled .rc-slider-dot\": {\n    backgroundColor: \"#fff\",\n    borderColor: \"#ccc\",\n    boxShadow: \"none\",\n    cursor: \"not-allowed\",\n  },\n  \"& .rc-slider-disabled .rc-slider-mark-text\": {\n    cursor: \"not-allowed !important\",\n  },\n  \"& .rc-slider-disabled .rc-slider-dot\": {\n    cursor: \"not-allowed !important\",\n  },\n  \"& .rc-slider-vertical\": {\n    width: \"14px\",\n    height: \"100%\",\n    padding: \"0 5px\",\n  },\n  \"& .rc-slider-vertical .rc-slider-rail\": {\n    width: \"4px\",\n    height: \"100%\",\n  },\n  \"& .rc-slider-vertical .rc-slider-track\": {\n    bottom: 0,\n    left: \"5px\",\n    width: \"4px\",\n  },\n  \"& .rc-slider-vertical .rc-slider-handle\": {\n    marginTop: 0,\n    marginLeft: \"-5px\",\n    touchAction: \"pan-y\",\n  },\n  \"& .rc-slider-vertical .rc-slider-mark\": {\n    top: 0,\n    left: \"18px\",\n    height: \"100%\",\n  },\n  \"& .rc-slider-vertical .rc-slider-step\": {\n    width: \"4px\",\n    height: \"100%\",\n  },\n  \"& .rc-slider-vertical .rc-slider-dot\": {\n    marginLeft: \"-2px\",\n  },\n  \"& .rc-slider-tooltip-zoom-down-enter\": {\n    display: \"block !important\",\n    animationDuration: \"0.3s\",\n    animationFillMode: \"both\",\n    animationPlayState: \"paused\",\n    transform: \"scale(0, 0)\",\n    animationTimingFunction: \"cubic-bezier(0.23, 1, 0.32, 1)\",\n  },\n  \"& .rc-slider-tooltip-zoom-down-appear\": {\n    display: \"block !important\",\n    animationDuration: \"0.3s\",\n    animationFillMode: \"both\",\n    animationPlayState: \"paused\",\n  },\n  \"& .rc-slider-tooltip-zoom-down-leave\": {\n    display: \"block !important\",\n    animationDuration: \"0.3s\",\n    animationFillMode: \"both\",\n    animationPlayState: \"paused\",\n    animationTimingFunction: \"cubic-bezier(0.755, 0.05, 0.855, 0.06)\",\n  },\n  \"& .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active\":\n    {\n      animationName: \"rcSliderTooltipZoomDownIn\",\n      animationPlayState: \"running\",\n    },\n  \"& .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active\":\n    {\n      animationName: \"rcSliderTooltipZoomDownIn\",\n      animationPlayState: \"running\",\n    },\n  \"& .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active\":\n    {\n      animationName: \"rcSliderTooltipZoomDownOut\",\n      animationPlayState: \"running\",\n    },\n  \"&. .rc-slider-tooltip-zoom-down-appear\": {\n    transform: \"scale(0, 0)\",\n    animationTimingFunction: \"cubic-bezier(0.23, 1, 0.32, 1)\",\n  },\n  \"& .rc-slider-tooltip\": {\n    position: \"absolute\",\n    top: \"-9999px\",\n    left: \"-9999px\",\n    visibility: \"visible\",\n    boxSizing: \"border-box\",\n    WebkitTapHighlightColor: \"rgba(0, 0, 0, 0)\",\n  },\n  \"& .rc-slider-tooltip *\": {\n    boxSizing: \"border-box\",\n    WebkitTapHighlightColor: \"rgba(0, 0, 0, 0)\",\n  },\n  \"& .rc-slider-tooltip-hidden\": {\n    display: \"none\",\n  },\n  \"& .rc-slider-tooltip-placement-top\": {\n    padding: \"4px 0 8px 0\",\n  },\n  \"& .rc-slider-tooltip-inner\": {\n    minWidth: \"24px\",\n    height: \"24px\",\n    padding: \"6px 2px\",\n    color: \"#fff\",\n    fontSize: \"12px\",\n    lineHeight: 1,\n    textAlign: \"center\",\n    textDecoration: \"none\",\n    backgroundColor: \"#6c6c6c\",\n    borderRadius: \"6px\",\n    boxShadow: \"0 0 4px #d9d9d9\",\n  },\n  \"& .rc-slider-tooltip-arrow\": {\n    position: \"absolute\",\n    width: 0,\n    height: 0,\n    borderColor: \"transparent\",\n    borderStyle: \"solid\",\n  },\n  \"& .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow\": {\n    bottom: \"4px\",\n    left: \"50%\",\n    marginLeft: \"-4px\",\n    borderWidth: \"4px 4px 0\",\n    borderTopColor: \"#6c6c6c\",\n  },\n} satisfies CSSInterpolation;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"base.js","sources":["../../../src/Slider/base.ts"],"sourcesContent":["import type { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport default {\n  \"& .rc-slider\": {\n    position: \"relative\",\n    width: \"100%\",\n    height: \"14px\",\n    padding: \" 5px 0\",\n    touchAction: \"none\",\n    boxSizing: \"border-box\",\n    WebkitTapHighlightColor: \"rgba(0, 0, 0, 0)\",\n  },\n  \"& .rc-slider *\": {\n    boxSizing: \"border-box\",\n    WebkitTapHighlightColor: \"rgba(0, 0, 0, 0)\",\n  },\n  \"& .rc-slider-rail\": {\n    position: \"absolute\",\n    width: \"100%\",\n    height: \"4px\",\n    backgroundColor: \"#e9e9e9\",\n  },\n  \"& .rc-slider-track\": {\n    position: \"absolute\",\n    height: \"4px\",\n    backgroundColor: \"#abe2fb\",\n  },\n  \"& .rc-slider-handle\": {\n    position: \"absolute\",\n    width: \"14px\",\n    height: \"14px\",\n    marginTop: \"-5px\",\n    backgroundColor: \"#fff\",\n    border: \"solid 2px #96dbfa\",\n    borderRadius: theme.radii.full,\n    cursor: \"grab\",\n    opacity: 0.8,\n    touchAction: \"pan-x\",\n  },\n  \"& .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging\":\n    {\n      borderColor: \"#57c5f7\",\n      boxShadow: \"0 0 0 5px #96dbfa\",\n    },\n  \"& .rc-slider-handle:focus\": {\n    outline: \"none\",\n    boxShadow: \"none\",\n  },\n  \"& .rc-slider-handle:focus-visible\": {\n    borderColor: \"#2db7f5\",\n    boxShadow: \"0 0 0 3px #96dbfa\",\n  },\n  \"& .rc-slider-handle-click-focused:focus\": {\n    borderColor: \"#96dbfa\",\n    boxShadow: \"unset\",\n  },\n  \"& .rc-slider-handle:hover\": {\n    borderColor: \"#57c5f7\",\n  },\n  \"& .rc-slider-handle:active\": {\n    borderColor: \"#57c5f7\",\n    boxShadow: \"0 0 5px #57c5f7\",\n    cursor: \"grabbing\",\n  },\n  \"& .rc-slider-mark\": {\n    position: \"absolute\",\n    top: \"18px\",\n    left: 0,\n    width: \"100%\",\n    fontSize: \"12px\",\n  },\n  \"& .rc-slider-mark-text\": {\n    position: \"absolute\",\n    display: \"inline-block\",\n    color: \"#999\",\n    textAlign: \"center\",\n    verticalAlign: \"middle\",\n    cursor: \"pointer\",\n  },\n  \"& .rc-slider-mark-text-active\": {\n    color: \"#666\",\n  },\n  \"& .rc-slider-step\": {\n    position: \"absolute\",\n    width: \"100%\",\n    height: \"4px\",\n    background: \"transparent\",\n    pointerEvents: \"none\",\n  },\n  \"& .rc-slider-dot\": {\n    position: \"absolute\",\n    bottom: \"-2px\",\n    width: \"8px\",\n    height: \"8px\",\n    verticalAlign: \"middle\",\n    backgroundColor: \"#fff\",\n    border: \"2px solid #e9e9e9\",\n    borderRadius: theme.radii.full,\n    cursor: \"pointer\",\n  },\n  \"& .rc-slider-dot-active\": {\n    borderColor: \"#96dbfa\",\n  },\n  \"& .rc-slider-dot-reverse\": {\n    marginRight: \"-4px\",\n  },\n  \"& .rc-slider-disabled\": {\n    backgroundColor: \"#e9e9e9\",\n  },\n  \"& .rc-slider-disabled .rc-slider-track\": {\n    backgroundColor: \"#ccc\",\n  },\n  \"& .rc-slider-disabled .rc-slider-handle\": {\n    backgroundColor: \"#fff\",\n    borderColor: \"#ccc\",\n    boxShadow: \"none\",\n    cursor: \"not-allowed\",\n  },\n  \"&.rc-slider-disabled .rc-slider-dot\": {\n    backgroundColor: \"#fff\",\n    borderColor: \"#ccc\",\n    boxShadow: \"none\",\n    cursor: \"not-allowed\",\n  },\n  \"& .rc-slider-disabled .rc-slider-mark-text\": {\n    cursor: \"not-allowed !important\",\n  },\n  \"& .rc-slider-disabled .rc-slider-dot\": {\n    cursor: \"not-allowed !important\",\n  },\n  \"& .rc-slider-vertical\": {\n    width: \"14px\",\n    height: \"100%\",\n    padding: \"0 5px\",\n  },\n  \"& .rc-slider-vertical .rc-slider-rail\": {\n    width: \"4px\",\n    height: \"100%\",\n  },\n  \"& .rc-slider-vertical .rc-slider-track\": {\n    bottom: 0,\n    left: \"5px\",\n    width: \"4px\",\n  },\n  \"& .rc-slider-vertical .rc-slider-handle\": {\n    marginTop: 0,\n    marginLeft: \"-5px\",\n    touchAction: \"pan-y\",\n  },\n  \"& .rc-slider-vertical .rc-slider-mark\": {\n    top: 0,\n    left: \"18px\",\n    height: \"100%\",\n  },\n  \"& .rc-slider-vertical .rc-slider-step\": {\n    width: \"4px\",\n    height: \"100%\",\n  },\n  \"& .rc-slider-vertical .rc-slider-dot\": {\n    marginLeft: \"-2px\",\n  },\n  \"& .rc-slider-tooltip-zoom-down-enter\": {\n    display: \"block !important\",\n    animationDuration: \"0.3s\",\n    animationFillMode: \"both\",\n    animationPlayState: \"paused\",\n    transform: \"scale(0, 0)\",\n    animationTimingFunction: \"cubic-bezier(0.23, 1, 0.32, 1)\",\n  },\n  \"& .rc-slider-tooltip-zoom-down-appear\": {\n    display: \"block !important\",\n    animationDuration: \"0.3s\",\n    animationFillMode: \"both\",\n    animationPlayState: \"paused\",\n  },\n  \"& .rc-slider-tooltip-zoom-down-leave\": {\n    display: \"block !important\",\n    animationDuration: \"0.3s\",\n    animationFillMode: \"both\",\n    animationPlayState: \"paused\",\n    animationTimingFunction: \"cubic-bezier(0.755, 0.05, 0.855, 0.06)\",\n  },\n  \"& .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active\":\n    {\n      animationName: \"rcSliderTooltipZoomDownIn\",\n      animationPlayState: \"running\",\n    },\n  \"& .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active\":\n    {\n      animationName: \"rcSliderTooltipZoomDownIn\",\n      animationPlayState: \"running\",\n    },\n  \"& .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active\":\n    {\n      animationName: \"rcSliderTooltipZoomDownOut\",\n      animationPlayState: \"running\",\n    },\n  \"&. .rc-slider-tooltip-zoom-down-appear\": {\n    transform: \"scale(0, 0)\",\n    animationTimingFunction: \"cubic-bezier(0.23, 1, 0.32, 1)\",\n  },\n  \"& .rc-slider-tooltip\": {\n    position: \"absolute\",\n    top: \"-9999px\",\n    left: \"-9999px\",\n    visibility: \"visible\",\n    boxSizing: \"border-box\",\n    WebkitTapHighlightColor: \"rgba(0, 0, 0, 0)\",\n  },\n  \"& .rc-slider-tooltip *\": {\n    boxSizing: \"border-box\",\n    WebkitTapHighlightColor: \"rgba(0, 0, 0, 0)\",\n  },\n  \"& .rc-slider-tooltip-hidden\": {\n    display: \"none\",\n  },\n  \"& .rc-slider-tooltip-placement-top\": {\n    padding: \"4px 0 8px 0\",\n  },\n  \"& .rc-slider-tooltip-inner\": {\n    minWidth: \"24px\",\n    height: \"24px\",\n    padding: \"6px 2px\",\n    color: \"#fff\",\n    fontSize: \"12px\",\n    lineHeight: 1,\n    textAlign: \"center\",\n    textDecoration: \"none\",\n    backgroundColor: \"#6c6c6c\",\n    borderRadius: theme.radii.round,\n    boxShadow: \"0 0 4px #d9d9d9\",\n  },\n  \"& .rc-slider-tooltip-arrow\": {\n    position: \"absolute\",\n    width: 0,\n    height: 0,\n    borderColor: \"transparent\",\n    borderStyle: \"solid\",\n  },\n  \"& .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow\": {\n    bottom: \"4px\",\n    left: \"50%\",\n    marginLeft: \"-4px\",\n    borderWidth: \"4px 4px 0\",\n    borderTopColor: \"#6c6c6c\",\n  },\n} satisfies CSSInterpolation;\n"],"names":[],"mappings":"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"}

package/dist/esm/Slider/utils.js

@@ -138,18 +138,18 @@ const isSingleSlider = (values, defaultValues) => {
 const generateDefaultKnobProperties = (numberOfKnobs = 1, disabled = false, knobPropertiesProp) => {
   let knobProperties = knobPropertiesProp || [];
   const defaultKnobStyles = {
-    color: theme.colors.secondary,
-    hoverColor: theme.colors.secondary,
-    trackColor: theme.colors.secondary,
-    dragColor: theme.colors.secondary,
-    knobRingColor: theme.colors.atmo1
+    color: theme.colors.text,
+    hoverColor: theme.colors.text,
+    trackColor: theme.colors.text,
+    dragColor: theme.colors.text,
+    knobRingColor: theme.colors.textDimmed
   };
   const disabledKnobStyles = {
-    color: theme.colors.secondary_60,
-    hoverColor: theme.colors.secondary_60,
-    trackColor: theme.colors.secondary_60,
-    dragColor: theme.colors.secondary_60,
-    knobRingColor: theme.colors.secondary_60
+    color: theme.colors.textDisabled,
+    hoverColor: theme.colors.textDisabled,
+    trackColor: theme.colors.textDisabled,
+    dragColor: theme.colors.textDisabled,
+    knobRingColor: theme.colors.textDisabled
   };
   if (knobProperties.length > 0) {
     knobProperties = knobProperties.slice(0, numberOfKnobs);

package/dist/esm/Slider/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/Slider/utils.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvFormStatus, validationStates } from \"../FormElement\";\nimport { sliderStyles as styles } from \"./Slider.styles\";\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\n\n/**\n * Transform the scaled values into knobs positions.\n *\n * @param {*} sliderValue - he value of the slider to be scaled\n * @param {*} minPointVlue - The value of the first point in the slider from left to right.\n * @param {*} stepVlue - The calculated separation between the values of the slider.\n */\nexport const knobsPositionToScaledValue = (\n  sliderValue: number,\n  minPointValue: number,\n  stepValue: number,\n): number => minPointValue + stepValue * sliderValue;\n\n/**\n * Transform the scaled values into knobs positions.\n *\n * @param {*} scaledValue - The value of the slider to be scaled\n * @param {*} minPointValue - The value of the first point in\n * the slider from left to right.\n * @param {*} inverseStepValue - The inverse of calculated separation between\n * the value of the points that compose the slider.\n */\nexport const scaledValueToKnobsPositionValue = (\n  scaledValue: number | undefined,\n  minPointValue: number,\n  inverseStepValue: number,\n): number =>\n  typeof scaledValue === \"number\"\n    ? Math.floor((scaledValue - minPointValue) * inverseStepValue)\n    : NaN;\n\n/**\n * Transform the received knobs values into knob positions\n *\n * @param {Object} values - The values of the slider.\n * @param {Number} inverseStepValue - The inverse of calculated separation between\n * the value of the points that compose the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @returns {Array} - The position of the knobs.\n */\nexport const knobsValuesToKnobsPositions = (\n  values: (number | undefined)[],\n  inverseStepValue: number,\n  minPointValue: number,\n): number[] => {\n  const knobsPositions: number[] = [];\n\n  values.forEach((value, index) => {\n    knobsPositions[index] = scaledValueToKnobsPositionValue(\n      value,\n      minPointValue,\n      inverseStepValue,\n    );\n  });\n\n  return knobsPositions;\n};\n\n/**\n * Transform the received knobs positions into knob values\n *\n * @param {Object} knobPositions - The values of the slider.\n * @param {Number} stepValue - The calculated separation between\n * the value of the points that compose the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @returns {Array} - The position of the knobs.\n */\nexport const knobsPositionsToKnobsValues = (\n  knobPositions: number[],\n  stepValue: number,\n  minPointValue: number,\n): number[] => {\n  const knobsValues: number[] = [];\n\n  knobPositions.forEach((value, index) => {\n    knobsValues[index] = knobsPositionToScaledValue(\n      value,\n      minPointValue,\n      stepValue,\n    );\n  });\n\n  return knobsValues;\n};\n\n/**\n * Calculates the separation between each value in the slider.\n *\n * @param {*} maxPointValue - The value of the last point in the slider from left to right.\n * @param {*} minPointValue - The value of the first point in the slider from left to right.\n * @param {*} divisionQuantity - How many subdivisions there are in the slider.\n */\nexport const calculateStepValue = (\n  maxPointValue: number,\n  minPointValue: number,\n  divisionQuantity: number,\n): number => Math.abs(maxPointValue - minPointValue) / divisionQuantity;\n\n/**\n * Generates the inline styles used for the track of each knob, applying colors if necessary.\n *\n * @param {Object} markProperties - The object provided by the user with\n * the desired configuration for the marks.\n * @param {Integer} markStep - The separation between marks.\n * @param {Integer} divisionQuantity - How many subdivisions there are in the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @param {Integer} stepValue - The calculated separation between the values of the slider.\n * @param {Integer} markDigits - How many decimals the mark will show.\n * @param {Function} formatMark - A function provided by the user that is going to\n * be executed to format the mark text.\n * @param {Object} styles - the default styles for the marks.\n * @returns {Object} - An object with the for the marks.\n * @memberof HvSlider\n */\nexport const createMark = (\n  markProperties: HvMarkProperty[],\n  markStep: number,\n  divisionQuantity: number,\n  minPointValue: number,\n  maxPointValue: number,\n  stepValue: number,\n  markDigits: number,\n  disabled: boolean,\n  formatMark: (label: React.ReactNode) => React.ReactNode = (mark) => mark,\n): Record<number, { label: string; style: React.CSSProperties }> => {\n  const marks: Record<number, { label: string; style: React.CSSProperties }> =\n    {};\n\n  const values: string[] = [];\n\n  if (markProperties.length > 0) {\n    markProperties.forEach((markProperty) => {\n      if (typeof markProperty.position === \"number\") {\n        marks[markProperty.position] = disabled\n          ? {\n              label: `${markProperty.label}`,\n              style: {\n                ...styles.disabledMark,\n              },\n            }\n          : {\n              label: `${markProperty.label}`,\n              style: {\n                ...styles.mark,\n              },\n            };\n      }\n    });\n  } else {\n    const roundedMarkStep = Math.max(1, Math.floor(markStep));\n\n    for (let index = 0; index <= divisionQuantity; index += roundedMarkStep) {\n      let labelValue: React.ReactNode = knobsPositionToScaledValue(\n        index,\n        minPointValue,\n        stepValue,\n      ).toFixed(Math.max(0, Math.min(8, markDigits)));\n\n      values.push(labelValue as string);\n      labelValue = formatMark?.(labelValue) || labelValue;\n\n      marks[index] = disabled\n        ? {\n            label: `${labelValue}`,\n            style: {\n              ...styles.disabledMark,\n            },\n          }\n        : {\n            label: `${labelValue}`,\n            style: {\n              ...styles.mark,\n            },\n          };\n    }\n\n    if (!values.includes(maxPointValue.toString())) {\n      const lastMarkPosition = knobsValuesToKnobsPositions(\n        [maxPointValue],\n        1 / stepValue,\n        minPointValue,\n      );\n\n      const lastMarkLabel = formatMark?.(maxPointValue.toFixed(markDigits));\n      marks[lastMarkPosition[0]] = disabled\n        ? {\n            label: `${lastMarkLabel}`,\n            style: {\n              ...styles.disabledMark,\n            },\n          }\n        : {\n            label: `${lastMarkLabel}`,\n            style: {\n              ...styles.mark,\n            },\n          };\n    }\n  }\n\n  return marks;\n};\n\n/**\n * Generates the inline styles used for the track of each knob, applying colors if necessary.\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Object} styles - the default styles for the tracks.\n * @returns {Object} - An object with the style for each track.\n * @memberof HvSlider\n */\nexport const createTrackStyles = (\n  knobProperties: HvKnobProperty[],\n): React.CSSProperties[] => {\n  const trackStyles: React.CSSProperties[] = [];\n\n  if (knobProperties.length > 0) {\n    knobProperties.forEach((knobProperty, index) => {\n      trackStyles[index] = { ...styles.track };\n      if (knobProperty.color) {\n        trackStyles[index].backgroundColor = knobProperty.trackColor;\n      }\n    });\n  }\n\n  return trackStyles;\n};\n\n/**\n * Generates the inline styles used for each knob, applying colors if specified.\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Object} styles - the default styles for the knobs.\n * @returns {Object} - An object with both the inner and outer styles for the knob.\n * @memberof HvSlider\n */\nexport const createKnobStyles = (\n  knobProperties: HvKnobProperty[],\n): {\n  knobInner: React.CSSProperties[];\n  knobOuterStyle: React.CSSProperties[];\n} => {\n  const knobInner: React.CSSProperties[] = [];\n  const knobOuterStyle: React.CSSProperties[] = [];\n\n  const lastItem = knobProperties.length - 1;\n  if (knobProperties.length > 0) {\n    knobProperties.forEach((knobProperty, index) => {\n      knobInner[index] = { ...styles.knobInner };\n      knobOuterStyle[index] = { ...styles.knobOuter };\n\n      if (knobProperty.color) {\n        knobInner[index].backgroundColor = knobProperty.color;\n        knobOuterStyle[index].backgroundColor = \"transparent\";\n      }\n\n      if (knobProperty.hidden) {\n        knobInner[index] = styles.knobHidden;\n        if (index === lastItem) {\n          knobInner[index] = { ...styles.knobHiddenLast };\n          knobInner[index].backgroundColor = knobProperty.color;\n          knobOuterStyle[index] = { ...styles.knobHidden };\n          knobOuterStyle[index].backgroundColor = knobProperty.color;\n        }\n      }\n    });\n  }\n\n  return {\n    knobInner,\n    knobOuterStyle,\n  };\n};\n\n/**\n * Analyzes both the values and the default values to determine whether the slider is working in single mode.\n *\n * @param {Array} values - the values where the knobs are positioned when controlled.\n * @param {Array} defaultValues - the values where the knobs start when uncontrolled.\n * @returns {Boolean} - if true the slider should work as single slider\n */\nexport const isSingleSlider = (\n  values: number[],\n  defaultValues: (number | undefined)[],\n): boolean => {\n  if (!(values?.length > 1)) {\n    return defaultValues.length === 1;\n  }\n  return values.length === 1;\n};\n\n/**\n * Generates the default knob styles for each knob\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Integer} numberOfKnobs - the default styles for the knobs.\n * @param {Object} theme - The theme to extract the colors.\n *\n * @returns {Object} - An object with both the inner and outer styles for the knob.\n * @memberof HvSlider\n */\nexport const generateDefaultKnobProperties = (\n  numberOfKnobs = 1,\n  disabled = false,\n  knobPropertiesProp?: HvKnobProperty[],\n): HvKnobProperty[] => {\n  let knobProperties = knobPropertiesProp || [];\n\n  const defaultKnobStyles = {\n    color: theme.colors.secondary,\n    hoverColor: theme.colors.secondary,\n    trackColor: theme.colors.secondary,\n    dragColor: theme.colors.secondary,\n    knobRingColor: theme.colors.atmo1,\n  };\n\n  const disabledKnobStyles = {\n    color: theme.colors.secondary_60,\n    hoverColor: theme.colors.secondary_60,\n    trackColor: theme.colors.secondary_60,\n    dragColor: theme.colors.secondary_60,\n    knobRingColor: theme.colors.secondary_60,\n  };\n\n  if (knobProperties.length > 0) {\n    knobProperties = knobProperties.slice(0, numberOfKnobs);\n    knobProperties = knobProperties.map((knobProperty) => {\n      if (!disabled) {\n        return {\n          ...disabledKnobStyles,\n          ...knobProperty,\n        };\n      }\n      return {\n        ...defaultKnobStyles,\n        ...knobProperty,\n      };\n    });\n  } else {\n    for (let i = 0; i < numberOfKnobs; i += 1) {\n      if (!disabled) knobProperties.push(defaultKnobStyles);\n      if (disabled) knobProperties.push(disabledKnobStyles);\n    }\n  }\n\n  return knobProperties;\n};\n\nconst pushSlider = (\n  index: number,\n  inputIndex: number,\n  inputValue: number,\n): number => {\n  const difference = index - inputIndex;\n\n  return inputValue + difference;\n};\n\nexport const ensureValuesConsistency = (\n  knobPositions: number[],\n  inputIndex: number,\n): number[] => {\n  const newKnobsPosition: number[] = [...knobPositions];\n\n  newKnobsPosition.forEach((value, index) => {\n    if (Number.isNaN(value) || value == null) {\n      newKnobsPosition[index] = pushSlider(\n        index,\n        inputIndex,\n        newKnobsPosition[inputIndex],\n      );\n    } else if (index < inputIndex && value > newKnobsPosition[inputIndex]) {\n      newKnobsPosition[index] = pushSlider(\n        index,\n        inputIndex,\n        newKnobsPosition[inputIndex],\n      );\n    } else if (index > inputIndex && value < newKnobsPosition[inputIndex]) {\n      newKnobsPosition[index] = pushSlider(\n        index,\n        inputIndex,\n        newKnobsPosition[inputIndex],\n      );\n    }\n  });\n\n  return newKnobsPosition;\n};\n\nexport const convertStatusToArray = (\n  length: number,\n  status?: HvFormStatus | HvFormStatus[],\n): {\n  arrayStatus?: HvFormStatus[];\n  arrayDefaultStatus: (keyof typeof validationStates)[];\n} => {\n  const result: {\n    arrayStatus?: HvFormStatus[];\n    arrayDefaultStatus: (keyof typeof validationStates)[];\n  } = {\n    arrayDefaultStatus: Array.from({ length }, () => validationStates.standBy),\n  };\n\n  if (status == null) {\n    return result;\n  }\n  if (!Array.isArray(status)) {\n    result.arrayStatus = Array.from({ length }, () => status);\n    return result;\n  }\n  result.arrayStatus = status;\n\n  return result;\n};\n\nexport const statusArrayToFormStatus = (\n  arrayStatus: HvFormStatus[],\n): keyof typeof validationStates => {\n  const invalid = arrayStatus.some(\n    (status) => status === validationStates.invalid,\n  );\n\n  if (invalid) return validationStates.invalid;\n\n  const valid = arrayStatus.some((status) => status === validationStates.valid);\n\n  if (valid) return validationStates.valid;\n\n  return validationStates.standBy;\n};\n\nexport const knobsValuesToString = (\n  knobsValues: number[],\n  markDigits: number,\n): string[] =>\n  knobsValues.map((knobValue) =>\n    Number.isNaN(knobValue) ? \"\" : knobValue.toFixed(markDigits),\n  );\n\nexport const stringValuesToKnobs = (inputsValues: string[]): number[] =>\n  inputsValues.map((inputValue) => parseFloat(inputValue));\n"],"names":["styles"],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../../src/Slider/utils.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvFormStatus, validationStates } from \"../FormElement\";\nimport { sliderStyles as styles } from \"./Slider.styles\";\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\n\n/**\n * Transform the scaled values into knobs positions.\n *\n * @param {*} sliderValue - he value of the slider to be scaled\n * @param {*} minPointVlue - The value of the first point in the slider from left to right.\n * @param {*} stepVlue - The calculated separation between the values of the slider.\n */\nexport const knobsPositionToScaledValue = (\n  sliderValue: number,\n  minPointValue: number,\n  stepValue: number,\n): number => minPointValue + stepValue * sliderValue;\n\n/**\n * Transform the scaled values into knobs positions.\n *\n * @param {*} scaledValue - The value of the slider to be scaled\n * @param {*} minPointValue - The value of the first point in\n * the slider from left to right.\n * @param {*} inverseStepValue - The inverse of calculated separation between\n * the value of the points that compose the slider.\n */\nexport const scaledValueToKnobsPositionValue = (\n  scaledValue: number | undefined,\n  minPointValue: number,\n  inverseStepValue: number,\n): number =>\n  typeof scaledValue === \"number\"\n    ? Math.floor((scaledValue - minPointValue) * inverseStepValue)\n    : NaN;\n\n/**\n * Transform the received knobs values into knob positions\n *\n * @param {Object} values - The values of the slider.\n * @param {Number} inverseStepValue - The inverse of calculated separation between\n * the value of the points that compose the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @returns {Array} - The position of the knobs.\n */\nexport const knobsValuesToKnobsPositions = (\n  values: (number | undefined)[],\n  inverseStepValue: number,\n  minPointValue: number,\n): number[] => {\n  const knobsPositions: number[] = [];\n\n  values.forEach((value, index) => {\n    knobsPositions[index] = scaledValueToKnobsPositionValue(\n      value,\n      minPointValue,\n      inverseStepValue,\n    );\n  });\n\n  return knobsPositions;\n};\n\n/**\n * Transform the received knobs positions into knob values\n *\n * @param {Object} knobPositions - The values of the slider.\n * @param {Number} stepValue - The calculated separation between\n * the value of the points that compose the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @returns {Array} - The position of the knobs.\n */\nexport const knobsPositionsToKnobsValues = (\n  knobPositions: number[],\n  stepValue: number,\n  minPointValue: number,\n): number[] => {\n  const knobsValues: number[] = [];\n\n  knobPositions.forEach((value, index) => {\n    knobsValues[index] = knobsPositionToScaledValue(\n      value,\n      minPointValue,\n      stepValue,\n    );\n  });\n\n  return knobsValues;\n};\n\n/**\n * Calculates the separation between each value in the slider.\n *\n * @param {*} maxPointValue - The value of the last point in the slider from left to right.\n * @param {*} minPointValue - The value of the first point in the slider from left to right.\n * @param {*} divisionQuantity - How many subdivisions there are in the slider.\n */\nexport const calculateStepValue = (\n  maxPointValue: number,\n  minPointValue: number,\n  divisionQuantity: number,\n): number => Math.abs(maxPointValue - minPointValue) / divisionQuantity;\n\n/**\n * Generates the inline styles used for the track of each knob, applying colors if necessary.\n *\n * @param {Object} markProperties - The object provided by the user with\n * the desired configuration for the marks.\n * @param {Integer} markStep - The separation between marks.\n * @param {Integer} divisionQuantity - How many subdivisions there are in the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @param {Integer} stepValue - The calculated separation between the values of the slider.\n * @param {Integer} markDigits - How many decimals the mark will show.\n * @param {Function} formatMark - A function provided by the user that is going to\n * be executed to format the mark text.\n * @param {Object} styles - the default styles for the marks.\n * @returns {Object} - An object with the for the marks.\n * @memberof HvSlider\n */\nexport const createMark = (\n  markProperties: HvMarkProperty[],\n  markStep: number,\n  divisionQuantity: number,\n  minPointValue: number,\n  maxPointValue: number,\n  stepValue: number,\n  markDigits: number,\n  disabled: boolean,\n  formatMark: (label: React.ReactNode) => React.ReactNode = (mark) => mark,\n): Record<number, { label: string; style: React.CSSProperties }> => {\n  const marks: Record<number, { label: string; style: React.CSSProperties }> =\n    {};\n\n  const values: string[] = [];\n\n  if (markProperties.length > 0) {\n    markProperties.forEach((markProperty) => {\n      if (typeof markProperty.position === \"number\") {\n        marks[markProperty.position] = disabled\n          ? {\n              label: `${markProperty.label}`,\n              style: {\n                ...styles.disabledMark,\n              },\n            }\n          : {\n              label: `${markProperty.label}`,\n              style: {\n                ...styles.mark,\n              },\n            };\n      }\n    });\n  } else {\n    const roundedMarkStep = Math.max(1, Math.floor(markStep));\n\n    for (let index = 0; index <= divisionQuantity; index += roundedMarkStep) {\n      let labelValue: React.ReactNode = knobsPositionToScaledValue(\n        index,\n        minPointValue,\n        stepValue,\n      ).toFixed(Math.max(0, Math.min(8, markDigits)));\n\n      values.push(labelValue as string);\n      labelValue = formatMark?.(labelValue) || labelValue;\n\n      marks[index] = disabled\n        ? {\n            label: `${labelValue}`,\n            style: {\n              ...styles.disabledMark,\n            },\n          }\n        : {\n            label: `${labelValue}`,\n            style: {\n              ...styles.mark,\n            },\n          };\n    }\n\n    if (!values.includes(maxPointValue.toString())) {\n      const lastMarkPosition = knobsValuesToKnobsPositions(\n        [maxPointValue],\n        1 / stepValue,\n        minPointValue,\n      );\n\n      const lastMarkLabel = formatMark?.(maxPointValue.toFixed(markDigits));\n      marks[lastMarkPosition[0]] = disabled\n        ? {\n            label: `${lastMarkLabel}`,\n            style: {\n              ...styles.disabledMark,\n            },\n          }\n        : {\n            label: `${lastMarkLabel}`,\n            style: {\n              ...styles.mark,\n            },\n          };\n    }\n  }\n\n  return marks;\n};\n\n/**\n * Generates the inline styles used for the track of each knob, applying colors if necessary.\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Object} styles - the default styles for the tracks.\n * @returns {Object} - An object with the style for each track.\n * @memberof HvSlider\n */\nexport const createTrackStyles = (\n  knobProperties: HvKnobProperty[],\n): React.CSSProperties[] => {\n  const trackStyles: React.CSSProperties[] = [];\n\n  if (knobProperties.length > 0) {\n    knobProperties.forEach((knobProperty, index) => {\n      trackStyles[index] = { ...styles.track };\n      if (knobProperty.color) {\n        trackStyles[index].backgroundColor = knobProperty.trackColor;\n      }\n    });\n  }\n\n  return trackStyles;\n};\n\n/**\n * Generates the inline styles used for each knob, applying colors if specified.\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Object} styles - the default styles for the knobs.\n * @returns {Object} - An object with both the inner and outer styles for the knob.\n * @memberof HvSlider\n */\nexport const createKnobStyles = (\n  knobProperties: HvKnobProperty[],\n): {\n  knobInner: React.CSSProperties[];\n  knobOuterStyle: React.CSSProperties[];\n} => {\n  const knobInner: React.CSSProperties[] = [];\n  const knobOuterStyle: React.CSSProperties[] = [];\n\n  const lastItem = knobProperties.length - 1;\n  if (knobProperties.length > 0) {\n    knobProperties.forEach((knobProperty, index) => {\n      knobInner[index] = { ...styles.knobInner };\n      knobOuterStyle[index] = { ...styles.knobOuter };\n\n      if (knobProperty.color) {\n        knobInner[index].backgroundColor = knobProperty.color;\n        knobOuterStyle[index].backgroundColor = \"transparent\";\n      }\n\n      if (knobProperty.hidden) {\n        knobInner[index] = styles.knobHidden;\n        if (index === lastItem) {\n          knobInner[index] = { ...styles.knobHiddenLast };\n          knobInner[index].backgroundColor = knobProperty.color;\n          knobOuterStyle[index] = { ...styles.knobHidden };\n          knobOuterStyle[index].backgroundColor = knobProperty.color;\n        }\n      }\n    });\n  }\n\n  return {\n    knobInner,\n    knobOuterStyle,\n  };\n};\n\n/**\n * Analyzes both the values and the default values to determine whether the slider is working in single mode.\n *\n * @param {Array} values - the values where the knobs are positioned when controlled.\n * @param {Array} defaultValues - the values where the knobs start when uncontrolled.\n * @returns {Boolean} - if true the slider should work as single slider\n */\nexport const isSingleSlider = (\n  values: number[],\n  defaultValues: (number | undefined)[],\n): boolean => {\n  if (!(values?.length > 1)) {\n    return defaultValues.length === 1;\n  }\n  return values.length === 1;\n};\n\n/**\n * Generates the default knob styles for each knob\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Integer} numberOfKnobs - the default styles for the knobs.\n * @param {Object} theme - The theme to extract the colors.\n *\n * @returns {Object} - An object with both the inner and outer styles for the knob.\n * @memberof HvSlider\n */\nexport const generateDefaultKnobProperties = (\n  numberOfKnobs = 1,\n  disabled = false,\n  knobPropertiesProp?: HvKnobProperty[],\n): HvKnobProperty[] => {\n  let knobProperties = knobPropertiesProp || [];\n\n  const defaultKnobStyles = {\n    color: theme.colors.text,\n    hoverColor: theme.colors.text,\n    trackColor: theme.colors.text,\n    dragColor: theme.colors.text,\n    knobRingColor: theme.colors.textDimmed,\n  };\n\n  const disabledKnobStyles = {\n    color: theme.colors.textDisabled,\n    hoverColor: theme.colors.textDisabled,\n    trackColor: theme.colors.textDisabled,\n    dragColor: theme.colors.textDisabled,\n    knobRingColor: theme.colors.textDisabled,\n  };\n\n  if (knobProperties.length > 0) {\n    knobProperties = knobProperties.slice(0, numberOfKnobs);\n    knobProperties = knobProperties.map((knobProperty) => {\n      if (!disabled) {\n        return {\n          ...disabledKnobStyles,\n          ...knobProperty,\n        };\n      }\n      return {\n        ...defaultKnobStyles,\n        ...knobProperty,\n      };\n    });\n  } else {\n    for (let i = 0; i < numberOfKnobs; i += 1) {\n      if (!disabled) knobProperties.push(defaultKnobStyles);\n      if (disabled) knobProperties.push(disabledKnobStyles);\n    }\n  }\n\n  return knobProperties;\n};\n\nconst pushSlider = (\n  index: number,\n  inputIndex: number,\n  inputValue: number,\n): number => {\n  const difference = index - inputIndex;\n\n  return inputValue + difference;\n};\n\nexport const ensureValuesConsistency = (\n  knobPositions: number[],\n  inputIndex: number,\n): number[] => {\n  const newKnobsPosition: number[] = [...knobPositions];\n\n  newKnobsPosition.forEach((value, index) => {\n    if (Number.isNaN(value) || value == null) {\n      newKnobsPosition[index] = pushSlider(\n        index,\n        inputIndex,\n        newKnobsPosition[inputIndex],\n      );\n    } else if (index < inputIndex && value > newKnobsPosition[inputIndex]) {\n      newKnobsPosition[index] = pushSlider(\n        index,\n        inputIndex,\n        newKnobsPosition[inputIndex],\n      );\n    } else if (index > inputIndex && value < newKnobsPosition[inputIndex]) {\n      newKnobsPosition[index] = pushSlider(\n        index,\n        inputIndex,\n        newKnobsPosition[inputIndex],\n      );\n    }\n  });\n\n  return newKnobsPosition;\n};\n\nexport const convertStatusToArray = (\n  length: number,\n  status?: HvFormStatus | HvFormStatus[],\n): {\n  arrayStatus?: HvFormStatus[];\n  arrayDefaultStatus: (keyof typeof validationStates)[];\n} => {\n  const result: {\n    arrayStatus?: HvFormStatus[];\n    arrayDefaultStatus: (keyof typeof validationStates)[];\n  } = {\n    arrayDefaultStatus: Array.from({ length }, () => validationStates.standBy),\n  };\n\n  if (status == null) {\n    return result;\n  }\n  if (!Array.isArray(status)) {\n    result.arrayStatus = Array.from({ length }, () => status);\n    return result;\n  }\n  result.arrayStatus = status;\n\n  return result;\n};\n\nexport const statusArrayToFormStatus = (\n  arrayStatus: HvFormStatus[],\n): keyof typeof validationStates => {\n  const invalid = arrayStatus.some(\n    (status) => status === validationStates.invalid,\n  );\n\n  if (invalid) return validationStates.invalid;\n\n  const valid = arrayStatus.some((status) => status === validationStates.valid);\n\n  if (valid) return validationStates.valid;\n\n  return validationStates.standBy;\n};\n\nexport const knobsValuesToString = (\n  knobsValues: number[],\n  markDigits: number,\n): string[] =>\n  knobsValues.map((knobValue) =>\n    Number.isNaN(knobValue) ? \"\" : knobValue.toFixed(markDigits),\n  );\n\nexport const stringValuesToKnobs = (inputsValues: string[]): number[] =>\n  inputsValues.map((inputValue) => parseFloat(inputValue));\n"],"names":["styles"],"mappings":"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"}

package/dist/esm/Snackbar/Snackbar.js

@@ -13,15 +13,16 @@ const HvSnackbar = forwardRef(function HvSnackbar2(props, ref) {
     classes: classesProp,
     className,
     id,
+    title,
     open = false,
     onClose,
-    label = "",
+    label,
     anchorOrigin = { vertical: "top", horizontal: "right" },
     autoHideDuration = 5e3,
-    variant = "default",
-    showIcon = false,
-    customIcon = null,
-    action = null,
+    variant,
+    showIcon,
+    customIcon,
+    action,
     actionCallback,
     // TODO - remove in v6
     onAction,
@@ -71,6 +72,7 @@ const HvSnackbar = forwardRef(function HvSnackbar2(props, ref) {
         HvSnackbarContent,
         {
           id: setId(id, "content"),
+          title,
           label,
           variant,
           customIcon,
@@ -78,6 +80,7 @@ const HvSnackbar = forwardRef(function HvSnackbar2(props, ref) {
           action,
           actionCallback,
           onAction,
+          onClose,
           ...snackbarContentProps
         }
       )

package/dist/esm/Snackbar/Snackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.js","sources":["../../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport Slide, { SlideProps } from \"@mui/material/Slide\";\nimport MuiSnackbar, {\n  SnackbarProps as MuiSnackbarProps,\n  SnackbarCloseReason,\n  SnackbarOrigin,\n} from \"@mui/material/Snackbar\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { capitalize } from \"../utils/helpers\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Snackbar.styles\";\nimport { HvSnackbarContent, HvSnackbarContentProps } from \"./SnackbarContent\";\nimport { HvSnackbarVariant } from \"./types\";\n\nexport { staticClasses as snackbarClasses };\n\nexport type HvSnackbarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarProps\n  extends Omit<MuiSnackbarProps, \"action\" | \"classes\" | \"children\"> {\n  /** If true, Snackbar is open. */\n  open?: boolean;\n  /**\n   * Callback fired when the component requests to be closed.\n   * Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop.\n   * The reason parameter can optionally be used to control the response to onClose, for example ignoring click away.\n   * */\n  onClose?: (\n    event: Event | React.SyntheticEvent<any, Event>,\n    reason: SnackbarCloseReason,\n  ) => void;\n  /** The message to display. */\n  label?: React.ReactNode;\n  /**\n   * The anchor of the Snackbar. vertical: \"top\", \"bottom\" | horizontal: \"left\", \"center\", \"right\".\n   * It defines where the snackbar will end his animation */\n  anchorOrigin?: SnackbarOrigin;\n  /** The number of milliseconds to wait before automatically calling the onClose function. onClose should then set the state of the open prop to hide the Snackbar */\n  autoHideDuration?: number;\n  /** Variant of the snackbar. */\n  variant?: HvSnackbarVariant;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Action to display. */\n  action?: React.ReactNode | HvActionGeneric;\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** Duration of transition in milliseconds. */\n  transitionDuration?: number;\n  /** Direction of slide transition. */\n  transitionDirection?: \"up\" | \"down\" | \"left\" | \"right\";\n  /** The container the snackbar should slide from. */\n  container?: SlideProps[\"container\"];\n  /** Custom offset from top/bottom of the page, in px. */\n  offset?: number;\n  /** Others applied to the content of the snackbar. */\n  snackbarContentProps?: HvSnackbarContentProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSnackbarClasses;\n  /** @ignore */\n  ref?: MuiSnackbarProps[\"ref\"];\n}\n\n/**\n * A Snackbar provides brief messages about app processes.\n * It is dismissed automatically after a given interval.\n *\n * Snackbar can be built with two different components:\n * - `HvSnackbar`, which wraps all the positioning, transition, auto hide, etc.\n * - `HvSnackbarContent`, which allows a finer control and customization of the content of the Snackbar.\n */\nexport const HvSnackbar = forwardRef<\n  React.ComponentRef<typeof MuiSnackbar>,\n  HvSnackbarProps\n>(function HvSnackbar(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    open = false,\n    onClose,\n    label = \"\",\n    anchorOrigin = { vertical: \"top\", horizontal: \"right\" },\n    autoHideDuration = 5000,\n    variant = \"default\",\n    showIcon = false,\n    customIcon = null,\n    action = null,\n    actionCallback, // TODO - remove in v6\n    onAction,\n    transitionDuration = 300,\n    transitionDirection = \"left\",\n    container,\n    offset = 60,\n    snackbarContentProps,\n    ...others\n  } = useDefaultProps(\"HvSnackbar\", props);\n  const { classes } = useClasses(classesProp);\n\n  const anchorOriginOffset = {\n    anchorOriginTop: {\n      top: `${offset}px`,\n    },\n    anchorOriginBottom: {\n      bottom: `${offset}px`,\n    },\n  };\n\n  const SlideTransition = useCallback<\n    NonNullable<MuiSnackbarProps[\"TransitionComponent\"]>\n  >(\n    (properties) => (\n      <Slide\n        {...properties}\n        container={container}\n        direction={transitionDirection}\n      />\n    ),\n    [container, transitionDirection],\n  );\n\n  return (\n    <MuiSnackbar\n      ref={ref}\n      style={\n        anchorOriginOffset[`anchorOrigin${capitalize(anchorOrigin.vertical)}`]\n      }\n      classes={classes}\n      className={className}\n      id={id}\n      anchorOrigin={anchorOrigin}\n      open={open}\n      onClose={onClose}\n      autoHideDuration={autoHideDuration}\n      transitionDuration={transitionDuration}\n      TransitionComponent={SlideTransition}\n      {...others}\n    >\n      <HvSnackbarContent\n        id={setId(id, \"content\")}\n        label={label}\n        variant={variant}\n        customIcon={customIcon}\n        showIcon={showIcon}\n        action={action}\n        actionCallback={actionCallback}\n        onAction={onAction}\n        {...snackbarContentProps}\n      />\n    </MuiSnackbar>\n  );\n});\n"],"names":["HvSnackbar","MuiSnackbar"],"mappings":";;;;;;;;;;AAoFO,MAAM,aAAa,WAGxB,SAASA,YAAW,OAAO,KAAK;AAC1B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,QAAQ;AAAA,IACR,eAAe,EAAE,UAAU,OAAO,YAAY,QAAQ;AAAA,IACtD,mBAAmB;AAAA,IACnB,UAAU;AAAA,IACV,WAAW;AAAA,IACX,aAAa;AAAA,IACb,SAAS;AAAA,IACT;AAAA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,qBAAqB;AAAA,IACzB,iBAAiB;AAAA,MACf,KAAK,GAAG,MAAM;AAAA,IAChB;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ,GAAG,MAAM;AAAA,IAAA;AAAA,EAErB;AAEA,QAAM,kBAAkB;AAAA,IAGtB,CAAC,eACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,CAAC,WAAW,mBAAmB;AAAA,EACjC;AAGE,SAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,OACE,mBAAmB,eAAe,WAAW,aAAa,QAAQ,CAAC,EAAE;AAAA,MAEvE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACpB,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,SAAS;AAAA,UACvB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ,CAAC;"}
+{"version":3,"file":"Snackbar.js","sources":["../../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport Slide, { SlideProps } from \"@mui/material/Slide\";\nimport MuiSnackbar, {\n  SnackbarProps as MuiSnackbarProps,\n  SnackbarCloseReason,\n  SnackbarOrigin,\n} from \"@mui/material/Snackbar\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { capitalize } from \"../utils/helpers\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Snackbar.styles\";\nimport {\n  HvSnackbarContent,\n  HvSnackbarContentProps,\n  HvSnackbarVariant,\n} from \"./SnackbarContent\";\n\nexport { staticClasses as snackbarClasses };\n\nexport type HvSnackbarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarProps\n  extends Omit<MuiSnackbarProps, \"action\" | \"classes\" | \"children\"> {\n  /** If true, Snackbar is open. */\n  open?: boolean;\n  /**\n   * Callback fired when the component requests to be closed.\n   * Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop.\n   * The reason parameter can optionally be used to control the response to onClose, for example ignoring click away.\n   * */\n  onClose?: (\n    event: Event | React.SyntheticEvent<any, Event>,\n    reason: SnackbarCloseReason,\n  ) => void;\n  /** The message to display. */\n  label?: React.ReactNode;\n  /**\n   * The anchor of the Snackbar. vertical: \"top\", \"bottom\" | horizontal: \"left\", \"center\", \"right\".\n   * It defines where the snackbar will end his animation */\n  anchorOrigin?: SnackbarOrigin;\n  /** The number of milliseconds to wait before automatically calling the onClose function. onClose should then set the state of the open prop to hide the Snackbar */\n  autoHideDuration?: number;\n  /** Variant of the snackbar. */\n  variant?: HvSnackbarVariant;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Action to display. */\n  action?: React.ReactNode | HvActionGeneric;\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** Duration of transition in milliseconds. */\n  transitionDuration?: number;\n  /** Direction of slide transition. */\n  transitionDirection?: \"up\" | \"down\" | \"left\" | \"right\";\n  /** The container the snackbar should slide from. */\n  container?: SlideProps[\"container\"];\n  /** Custom offset from top/bottom of the page, in px. */\n  offset?: number;\n  /** Others applied to the content of the snackbar. */\n  snackbarContentProps?: HvSnackbarContentProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSnackbarClasses;\n  /** @ignore */\n  ref?: MuiSnackbarProps[\"ref\"];\n}\n\n/**\n * A Snackbar provides brief messages about app processes.\n * It is dismissed automatically after a given interval.\n *\n * Snackbar can be built with two different components:\n * - `HvSnackbar`, which wraps all the positioning, transition, auto hide, etc.\n * - `HvSnackbarContent`, which allows a finer control and customization of the content of the Snackbar.\n */\nexport const HvSnackbar = forwardRef<\n  React.ComponentRef<typeof MuiSnackbar>,\n  HvSnackbarProps\n>(function HvSnackbar(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    title,\n    open = false,\n    onClose,\n    label,\n    anchorOrigin = { vertical: \"top\", horizontal: \"right\" },\n    autoHideDuration = 5000,\n    variant,\n    showIcon,\n    customIcon,\n    action,\n    actionCallback, // TODO - remove in v6\n    onAction,\n    transitionDuration = 300,\n    transitionDirection = \"left\",\n    container,\n    offset = 60,\n    snackbarContentProps,\n    ...others\n  } = useDefaultProps(\"HvSnackbar\", props);\n  const { classes } = useClasses(classesProp);\n\n  const anchorOriginOffset = {\n    anchorOriginTop: {\n      top: `${offset}px`,\n    },\n    anchorOriginBottom: {\n      bottom: `${offset}px`,\n    },\n  };\n\n  const SlideTransition = useCallback<\n    NonNullable<MuiSnackbarProps[\"TransitionComponent\"]>\n  >(\n    (properties) => (\n      <Slide\n        {...properties}\n        container={container}\n        direction={transitionDirection}\n      />\n    ),\n    [container, transitionDirection],\n  );\n\n  return (\n    <MuiSnackbar\n      ref={ref}\n      style={\n        anchorOriginOffset[`anchorOrigin${capitalize(anchorOrigin.vertical)}`]\n      }\n      classes={classes}\n      className={className}\n      id={id}\n      anchorOrigin={anchorOrigin}\n      open={open}\n      onClose={onClose}\n      autoHideDuration={autoHideDuration}\n      transitionDuration={transitionDuration}\n      TransitionComponent={SlideTransition}\n      {...others}\n    >\n      <HvSnackbarContent\n        id={setId(id, \"content\")}\n        title={title}\n        label={label}\n        variant={variant}\n        customIcon={customIcon}\n        showIcon={showIcon}\n        action={action}\n        actionCallback={actionCallback}\n        onAction={onAction}\n        onClose={onClose}\n        {...snackbarContentProps}\n      />\n    </MuiSnackbar>\n  );\n});\n"],"names":["HvSnackbar","MuiSnackbar"],"mappings":";;;;;;;;;;AAuFO,MAAM,aAAa,WAGxB,SAASA,YAAW,OAAO,KAAK;AAC1B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,eAAe,EAAE,UAAU,OAAO,YAAY,QAAQ;AAAA,IACtD,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,qBAAqB;AAAA,IACzB,iBAAiB;AAAA,MACf,KAAK,GAAG,MAAM;AAAA,IAChB;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ,GAAG,MAAM;AAAA,IAAA;AAAA,EAErB;AAEA,QAAM,kBAAkB;AAAA,IAGtB,CAAC,eACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,CAAC,WAAW,mBAAmB;AAAA,EACjC;AAGE,SAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,OACE,mBAAmB,eAAe,WAAW,aAAa,QAAQ,CAAC,EAAE;AAAA,MAEvE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACpB,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,SAAS;AAAA,UACvB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ,CAAC;"}

package/dist/esm/Snackbar/SnackbarContent/SnackbarContent.js

@@ -1,12 +1,10 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, isValidElement } from "react";
-import SnackbarContent from "@mui/material/SnackbarContent";
-import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
-import { iconVariant } from "../../utils/iconVariant.js";
-import { setId } from "../../utils/setId.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvCallout } from "../../utils/Callout.js";
 import { useClasses } from "./SnackbarContent.styles.js";
 import { staticClasses } from "./SnackbarContent.styles.js";
-import { HvActionsGeneric } from "../../ActionsGeneric/ActionsGeneric.js";
+const isActionGeneric = (action) => action && typeof action === "object" && "id" in action && "label" in action;
 const HvSnackbarContent = forwardRef(function HvSnackbarContent2(props, ref) {
   const {
     className,
@@ -20,37 +18,33 @@ const HvSnackbarContent = forwardRef(function HvSnackbarContent2(props, ref) {
     actionCallback,
     // TODO - remove in v6
     onAction,
+    onClose,
     ...others
   } = useDefaultProps("HvSnackbarContent", props);
-  const icon = customIcon || showIcon && iconVariant(variant, "base_dark");
-  const innerAction = isValidElement(action) ? action : [action];
   const { classes, cx } = useClasses(classesProp);
-  const { activeTheme } = useTheme();
   return /* @__PURE__ */ jsx(
-    SnackbarContent,
+    HvCallout,
     {
       ref,
       id,
+      variant,
       classes: {
-        root: classes.root,
-        message: classes.message
+        root: cx(classes.root, classes[variant], className),
+        message: cx(classes.message, classes.messageSpan),
+        messageIcon: classes.iconVariant,
+        messageContent: classes.messageText,
+        action: classes.action
       },
-      className: cx(classes?.[variant], className),
-      message: /* @__PURE__ */ jsxs("div", { id: setId(id, "message"), className: classes.messageSpan, children: [
-        icon && /* @__PURE__ */ jsx("div", { className: classes.iconVariant, children: icon }),
-        /* @__PURE__ */ jsx("div", { className: classes.messageText, children: label }),
-        action && /* @__PURE__ */ jsx("div", { id: setId(id, "action"), className: classes.action, children: /* @__PURE__ */ jsx(
-          HvActionsGeneric,
-          {
-            id,
-            variant: activeTheme?.snackbar.actionButtonVariant,
-            actions: innerAction,
-            actionsCallback: actionCallback,
-            onAction
-          }
-        ) })
-      ] }),
-      ...others
+      showIcon,
+      customIcon,
+      actions: isActionGeneric(action) ? [action] : action,
+      onClose,
+      onAction: (evt, action2) => {
+        onAction?.(evt, action2);
+        actionCallback?.(evt, id, action2);
+      },
+      ...others,
+      children: label
     }
   );
 });