@hitachivantara/uikit-react-core 5.28.1 → 5.30.0

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

@@ -26,8 +26,8 @@ const {
     lineHeight: "11px",
     letterSpacing: 0,
     height: "32px",
-    borderRadius: theme.button.borderRadius,
-    padding: theme.button.padding
+    borderRadius: theme.radii.base,
+    padding: theme.spacing("xs", "sm")
   },
   startIcon: {
     marginLeft: `calc(-1 * ${theme.space.xs})`
@@ -48,68 +48,63 @@ const {
     padding: 0,
     height: "fit-content",
     minWidth: "unset"
-  }
-});
-const getVariantStyles = (variant) => {
-  const variantStyles = {
-    primary: {
-      color: theme.colors.atmo1,
-      backgroundColor: theme.colors.primary,
-      "&:hover, &:focus-visible": {
-        backgroundColor: theme.colors.primary_80
-      }
-    },
-    primarySubtle: {
-      color: theme.colors.primary,
-      backgroundColor: "transparent",
-      border: `1px solid ${theme.colors.primary}`,
-      "&:hover, &:focus-visible": {
-        backgroundColor: theme.button.hoverColor
-      }
-    },
-    primaryGhost: {
-      color: theme.colors.primary,
-      backgroundColor: "transparent",
-      "&:hover, &:focus-visible": {
-        backgroundColor: theme.button.hoverColor
-      },
-      "&:disabled": {
-        backgroundColor: "transparent"
-      }
-    },
-    secondarySubtle: {
-      color: theme.colors.secondary,
-      backgroundColor: theme.button.secondaryBackgroundColor,
-      border: `1px solid ${theme.button.secondarySubtleBorderColor}`,
-      "&:hover, &:focus-visible": {
-        backgroundColor: theme.button.hoverColor
-      }
+  },
+  primary: {
+    color: theme.colors.atmo1,
+    backgroundColor: theme.colors.primary,
+    "&:hover, &:focus-visible": {
+      backgroundColor: theme.colors.primary_80
+    }
+  },
+  primarySubtle: {
+    color: theme.colors.primary,
+    backgroundColor: "transparent",
+    border: `1px solid ${theme.colors.primary}`,
+    "&:hover, &:focus-visible": {
+      backgroundColor: theme.colors.containerBackgroundHover
+    }
+  },
+  primaryGhost: {
+    color: theme.colors.primary,
+    backgroundColor: "transparent",
+    "&:hover, &:focus-visible": {
+      backgroundColor: theme.colors.containerBackgroundHover
     },
-    secondaryGhost: {
-      color: theme.colors.secondary,
-      backgroundColor: "transparent",
-      "&:hover, &:focus-visible": {
-        backgroundColor: theme.button.hoverColor
-      },
-      "&:disabled": {
-        backgroundColor: "transparent"
-      }
+    "&:disabled": {
+      backgroundColor: "transparent"
+    }
+  },
+  secondarySubtle: {
+    color: theme.colors.secondary,
+    backgroundColor: "transparent",
+    border: `1px solid ${theme.colors.secondary}`,
+    "&:hover, &:focus-visible": {
+      backgroundColor: theme.colors.containerBackgroundHover
+    }
+  },
+  secondaryGhost: {
+    color: theme.colors.secondary,
+    backgroundColor: "transparent",
+    "&:hover, &:focus-visible": {
+      backgroundColor: theme.colors.containerBackgroundHover
     },
-    semantic: {
-      color: theme.colors.base_dark,
-      backgroundColor: "transparent",
-      "&:hover, &:focus-visible": {
-        backgroundColor: theme.button.semanticColor
-      },
-      "&:disabled": {
-        backgroundColor: theme.button.semanticColorDisabled
-      }
+    "&:disabled": {
+      backgroundColor: "transparent"
+    }
+  },
+  semantic: {
+    color: theme.colors.base_dark,
+    backgroundColor: "transparent",
+    "&:hover, &:focus-visible": {
+      backgroundColor: "rgba(251, 252, 252, 0.3)"
     },
-    secondary: void 0,
-    ghost: void 0
-  };
-  return variantStyles[variant];
-};
+    "&:disabled": {
+      backgroundColor: "rgba(251, 252, 252, 0.1)"
+    }
+  },
+  secondary: {},
+  ghost: {}
+});
 const getRadiusStyles = (radius) => ({
   borderRadius: theme.radii[radius]
 });
@@ -128,7 +123,6 @@ export {
   getOverrideColors,
   getRadiusStyles,
   getSizeStyles,
-  getVariantStyles,
   staticClasses,
   useClasses
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.js","sources":["../../../../src/components/Button/Button.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    textTransform: \"none\",\n    cursor: \"pointer\",\n    minWidth: \"70px\",\n\n    whiteSpace: \"nowrap\",\n\n    \"&:hover\": {},\n    \"&:focus\": {},\n    \"&:focus-visible\": { ...outlineStyles },\n    \"&:active\": {},\n\n    // default button - no size specified\n    fontFamily: theme.fontFamily.body,\n    fontSize: theme.fontSizes.base,\n    fontWeight: theme.fontWeights.semibold,\n    lineHeight: \"11px\",\n    letterSpacing: 0,\n    height: \"32px\",\n    borderRadius: theme.button.borderRadius,\n    padding: theme.button.padding,\n  },\n  startIcon: {\n    marginLeft: `calc(-1 * ${theme.space.xs})`,\n  },\n  endIcon: {\n    marginRight: `calc(-1 * ${theme.space.xs})`,\n  },\n  focusVisible: {},\n\n  disabled: {\n    color: theme.colors.secondary_60,\n    borderColor: theme.colors.atmo4,\n    backgroundColor: theme.colors.atmo3,\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n  },\n\n  icon: {\n    margin: 0,\n    padding: 0,\n    height: \"fit-content\",\n    minWidth: \"unset\",\n  },\n});\n\nexport const getVariantStyles = (variant: HvButtonVariant) => {\n  const variantStyles: Record<HvButtonVariant, CSSInterpolation> = {\n    primary: {\n      color: theme.colors.atmo1,\n      backgroundColor: theme.colors.primary,\n      \"&:hover, &:focus-visible\": {\n        backgroundColor: theme.colors.primary_80,\n      },\n    },\n    primarySubtle: {\n      color: theme.colors.primary,\n      backgroundColor: \"transparent\",\n      border: `1px solid ${theme.colors.primary}`,\n      \"&:hover, &:focus-visible\": {\n        backgroundColor: theme.button.hoverColor,\n      },\n    },\n    primaryGhost: {\n      color: theme.colors.primary,\n      backgroundColor: \"transparent\",\n      \"&:hover, &:focus-visible\": {\n        backgroundColor: theme.button.hoverColor,\n      },\n      \"&:disabled\": {\n        backgroundColor: \"transparent\",\n      },\n    },\n    secondarySubtle: {\n      color: theme.colors.secondary,\n      backgroundColor: theme.button.secondaryBackgroundColor,\n      border: `1px solid ${theme.button.secondarySubtleBorderColor}`,\n      \"&:hover, &:focus-visible\": {\n        backgroundColor: theme.button.hoverColor,\n      },\n    },\n    secondaryGhost: {\n      color: theme.colors.secondary,\n      backgroundColor: \"transparent\",\n      \"&:hover, &:focus-visible\": {\n        backgroundColor: theme.button.hoverColor,\n      },\n      \"&:disabled\": {\n        backgroundColor: \"transparent\",\n      },\n    },\n    semantic: {\n      color: theme.colors.base_dark,\n      backgroundColor: \"transparent\",\n      \"&:hover, &:focus-visible\": {\n        backgroundColor: theme.button.semanticColor,\n      },\n      \"&:disabled\": {\n        backgroundColor: theme.button.semanticColorDisabled,\n      },\n    },\n    secondary: undefined,\n    ghost: undefined,\n  };\n\n  return variantStyles[variant];\n};\n\nexport const getRadiusStyles = (radius: HvButtonRadius): CSSInterpolation => ({\n  borderRadius: theme.radii[radius],\n});\n\nexport const getSizeStyles = (size: HvButtonSize): CSSInterpolation => ({\n  height: theme.sizes[size],\n  paddingLeft: theme.space[size],\n  paddingRight: theme.space[size],\n  fontSize: theme.fontSizes[size],\n});\n\nexport const getOverrideColors = (): CSSInterpolation => ({\n  \"& svg .color0\": {\n    fill: \"currentcolor\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","justifyContent","textTransform","cursor","minWidth","whiteSpace","outlineStyles","fontFamily","theme","body","fontSize","fontSizes","base","fontWeight","fontWeights","semibold","lineHeight","letterSpacing","height","borderRadius","button","padding","startIcon","marginLeft","space","xs","endIcon","marginRight","focusVisible","disabled","color","colors","secondary_60","borderColor","atmo4","backgroundColor","atmo3","pointerEvents","icon","margin","getVariantStyles","variant","variantStyles","primary","atmo1","primary_80","primarySubtle","border","hoverColor","primaryGhost","secondarySubtle","secondary","secondaryBackgroundColor","secondarySubtleBorderColor","secondaryGhost","semantic","base_dark","semanticColor","semanticColorDisabled","undefined","ghost","getRadiusStyles","radius","radii","getSizeStyles","size","sizes","paddingLeft","paddingRight","getOverrideColors","fill"],"mappings":"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"}
+{"version":3,"file":"Button.styles.js","sources":["../../../../src/components/Button/Button.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { HvButtonRadius, HvButtonSize } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    textTransform: \"none\",\n    cursor: \"pointer\",\n    minWidth: \"70px\",\n\n    whiteSpace: \"nowrap\",\n\n    \"&:hover\": {},\n    \"&:focus\": {},\n    \"&:focus-visible\": { ...outlineStyles },\n    \"&:active\": {},\n\n    // default button - no size specified\n    fontFamily: theme.fontFamily.body,\n    fontSize: theme.fontSizes.base,\n    fontWeight: theme.fontWeights.semibold,\n    lineHeight: \"11px\",\n    letterSpacing: 0,\n    height: \"32px\",\n    borderRadius: theme.radii.base,\n    padding: theme.spacing(\"xs\", \"sm\"),\n  },\n  startIcon: {\n    marginLeft: `calc(-1 * ${theme.space.xs})`,\n  },\n  endIcon: {\n    marginRight: `calc(-1 * ${theme.space.xs})`,\n  },\n  focusVisible: {},\n\n  disabled: {\n    color: theme.colors.secondary_60,\n    borderColor: theme.colors.atmo4,\n    backgroundColor: theme.colors.atmo3,\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n  },\n\n  icon: {\n    margin: 0,\n    padding: 0,\n    height: \"fit-content\",\n    minWidth: \"unset\",\n  },\n\n  primary: {\n    color: theme.colors.atmo1,\n    backgroundColor: theme.colors.primary,\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: theme.colors.primary_80,\n    },\n  },\n  primarySubtle: {\n    color: theme.colors.primary,\n    backgroundColor: \"transparent\",\n    border: `1px solid ${theme.colors.primary}`,\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n  },\n  primaryGhost: {\n    color: theme.colors.primary,\n    backgroundColor: \"transparent\",\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n    \"&:disabled\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  secondarySubtle: {\n    color: theme.colors.secondary,\n    backgroundColor: \"transparent\",\n    border: `1px solid ${theme.colors.secondary}`,\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n  },\n  secondaryGhost: {\n    color: theme.colors.secondary,\n    backgroundColor: \"transparent\",\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n    \"&:disabled\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  semantic: {\n    color: theme.colors.base_dark,\n    backgroundColor: \"transparent\",\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.3)\",\n    },\n    \"&:disabled\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.1)\",\n    },\n  },\n  secondary: {},\n  ghost: {},\n});\n\nexport const getRadiusStyles = (radius: HvButtonRadius): CSSInterpolation => ({\n  borderRadius: theme.radii[radius],\n});\n\nexport const getSizeStyles = (size: HvButtonSize): CSSInterpolation => ({\n  height: theme.sizes[size],\n  paddingLeft: theme.space[size],\n  paddingRight: theme.space[size],\n  fontSize: theme.fontSizes[size],\n});\n\nexport const getOverrideColors = (): CSSInterpolation => ({\n  \"& svg .color0\": {\n    fill: \"currentcolor\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","justifyContent","textTransform","cursor","minWidth","whiteSpace","outlineStyles","fontFamily","theme","body","fontSize","fontSizes","base","fontWeight","fontWeights","semibold","lineHeight","letterSpacing","height","borderRadius","radii","padding","spacing","startIcon","marginLeft","space","xs","endIcon","marginRight","focusVisible","disabled","color","colors","secondary_60","borderColor","atmo4","backgroundColor","atmo3","pointerEvents","icon","margin","primary","atmo1","primary_80","primarySubtle","border","containerBackgroundHover","primaryGhost","secondarySubtle","secondary","secondaryGhost","semantic","base_dark","ghost","getRadiusStyles","radius","getSizeStyles","size","sizes","paddingLeft","paddingRight","getOverrideColors","fill"],"mappings":";;;AASa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,YAAY;AAAA,EACrEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,gBAAgB;AAAA,IAChBC,eAAe;AAAA,IACfC,QAAQ;AAAA,IACRC,UAAU;AAAA,IAEVC,YAAY;AAAA,IAEZ,WAAW,CAAC;AAAA,IACZ,WAAW,CAAC;AAAA,IACZ,mBAAmB;AAAA,MAAE,GAAGC;AAAAA,IAAc;AAAA,IACtC,YAAY,CAAC;AAAA;AAAA,IAGbC,YAAYC,MAAMD,WAAWE;AAAAA,IAC7BC,UAAUF,MAAMG,UAAUC;AAAAA,IAC1BC,YAAYL,MAAMM,YAAYC;AAAAA,IAC9BC,YAAY;AAAA,IACZC,eAAe;AAAA,IACfC,QAAQ;AAAA,IACRC,cAAcX,MAAMY,MAAMR;AAAAA,IAC1BS,SAASb,MAAMc,QAAQ,MAAM,IAAI;AAAA,EACnC;AAAA,EACAC,WAAW;AAAA,IACTC,YAAa,aAAYhB,MAAMiB,MAAMC,EAAG;AAAA,EAC1C;AAAA,EACAC,SAAS;AAAA,IACPC,aAAc,aAAYpB,MAAMiB,MAAMC,EAAG;AAAA,EAC3C;AAAA,EACAG,cAAc,CAAC;AAAA,EAEfC,UAAU;AAAA,IACRC,OAAOvB,MAAMwB,OAAOC;AAAAA,IACpBC,aAAa1B,MAAMwB,OAAOG;AAAAA,IAC1BC,iBAAiB5B,MAAMwB,OAAOK;AAAAA,IAC9BlC,QAAQ;AAAA,IACRmC,eAAe;AAAA,EACjB;AAAA,EAEAC,MAAM;AAAA,IACJC,QAAQ;AAAA,IACRnB,SAAS;AAAA,IACTH,QAAQ;AAAA,IACRd,UAAU;AAAA,EACZ;AAAA,EAEAqC,SAAS;AAAA,IACPV,OAAOvB,MAAMwB,OAAOU;AAAAA,IACpBN,iBAAiB5B,MAAMwB,OAAOS;AAAAA,IAC9B,4BAA4B;AAAA,MAC1BL,iBAAiB5B,MAAMwB,OAAOW;AAAAA,IAChC;AAAA,EACF;AAAA,EACAC,eAAe;AAAA,IACbb,OAAOvB,MAAMwB,OAAOS;AAAAA,IACpBL,iBAAiB;AAAA,IACjBS,QAAS,aAAYrC,MAAMwB,OAAOS,OAAQ;AAAA,IAC1C,4BAA4B;AAAA,MAC1BL,iBAAiB5B,MAAMwB,OAAOc;AAAAA,IAChC;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZhB,OAAOvB,MAAMwB,OAAOS;AAAAA,IACpBL,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,MAC1BA,iBAAiB5B,MAAMwB,OAAOc;AAAAA,IAChC;AAAA,IACA,cAAc;AAAA,MACZV,iBAAiB;AAAA,IACnB;AAAA,EACF;AAAA,EACAY,iBAAiB;AAAA,IACfjB,OAAOvB,MAAMwB,OAAOiB;AAAAA,IACpBb,iBAAiB;AAAA,IACjBS,QAAS,aAAYrC,MAAMwB,OAAOiB,SAAU;AAAA,IAC5C,4BAA4B;AAAA,MAC1Bb,iBAAiB5B,MAAMwB,OAAOc;AAAAA,IAChC;AAAA,EACF;AAAA,EACAI,gBAAgB;AAAA,IACdnB,OAAOvB,MAAMwB,OAAOiB;AAAAA,IACpBb,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,MAC1BA,iBAAiB5B,MAAMwB,OAAOc;AAAAA,IAChC;AAAA,IACA,cAAc;AAAA,MACZV,iBAAiB;AAAA,IACnB;AAAA,EACF;AAAA,EACAe,UAAU;AAAA,IACRpB,OAAOvB,MAAMwB,OAAOoB;AAAAA,IACpBhB,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,MAC1BA,iBAAiB;AAAA,IACnB;AAAA,IACA,cAAc;AAAA,MACZA,iBAAiB;AAAA,IACnB;AAAA,EACF;AAAA,EACAa,WAAW,CAAC;AAAA,EACZI,OAAO,CAAC;AACV,CAAC;AAEYC,MAAAA,kBAAkBA,CAACC,YAA8C;AAAA,EAC5EpC,cAAcX,MAAMY,MAAMmC,MAAM;AAClC;AAEaC,MAAAA,gBAAgBA,CAACC,UAA0C;AAAA,EACtEvC,QAAQV,MAAMkD,MAAMD,IAAI;AAAA,EACxBE,aAAanD,MAAMiB,MAAMgC,IAAI;AAAA,EAC7BG,cAAcpD,MAAMiB,MAAMgC,IAAI;AAAA,EAC9B/C,UAAUF,MAAMG,UAAU8C,IAAI;AAChC;AAEO,MAAMI,oBAAoBA,OAAyB;AAAA,EACxD,iBAAiB;AAAA,IACfC,MAAM;AAAA,EACR;AACF;"}

package/dist/esm/components/Calendar/CalendarHeader/CalendarHeader.js

@@ -12,25 +12,27 @@ import { isRange, isDate, formatToLocale, isSameDay } from "../utils.js";
 import { useClasses } from "./CalendarHeader.styles.js";
 import { staticClasses } from "./CalendarHeader.styles.js";
 import { HvFormElementValueContext } from "../../Forms/FormElement/context/FormElementValueContext.js";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { HvFormElementContext } from "../../Forms/FormElement/context/FormElementContext.js";
 import { HvFormElementDescriptorsContext } from "../../Forms/FormElement/context/FormElementDescriptorsContext.js";
 import { HvTypography } from "../../Typography/Typography.js";
 dayjs.extend(localeData);
 dayjs.extend(localizedFormat);
 dayjs.extend(customParseFormat);
-const HvCalendarHeader = ({
-  id,
-  value,
-  locale = "en-US",
-  classes: classesProp,
-  onChange,
-  showEndDate,
-  showDayOfWeek = false,
-  onFocus,
-  invalidDateLabel = "Invalid Date",
-  ...others
-}) => {
+const HvCalendarHeader = (props) => {
   var _a;
+  const {
+    id,
+    value,
+    locale = "en-US",
+    classes: classesProp,
+    onChange,
+    showEndDate,
+    showDayOfWeek = false,
+    onFocus,
+    invalidDateLabel = "Invalid Date",
+    ...others
+  } = useDefaultProps("HvCalendarHeader", props);
   const {
     classes,
     cx

package/dist/esm/components/Calendar/CalendarHeader/CalendarHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.js","sources":["../../../../../src/components/Calendar/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import { useState, useEffect, useContext } from \"react\";\n\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport dayjs from \"dayjs\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\n\nimport isNil from \"lodash/isNil\";\n\nimport {\n  HvFormElementContext,\n  HvFormElementValueContext,\n  HvFormElementDescriptorsContext,\n} from \"@core/components/Forms\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isRange, isSameDay, formatToLocale, isDate } from \"../utils\";\nimport { DateRangeProp } from \"../types\";\nimport { staticClasses, useClasses } from \"./CalendarHeader.styles\";\n\nexport { staticClasses as calendarHeaderClasses };\n\nexport type HvCalendarHeaderClasses = ExtractNames<typeof useClasses>;\n\ndayjs.extend(localeData);\ndayjs.extend(localizedFormat);\ndayjs.extend(customParseFormat);\n\nexport const HvCalendarHeader = ({\n  id,\n  value,\n  locale = \"en-US\",\n  classes: classesProp,\n  onChange,\n  showEndDate,\n  showDayOfWeek = false,\n  onFocus,\n  invalidDateLabel = \"Invalid Date\",\n  ...others\n}: HvCalendarHeaderProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { elementId } = useContext(HvFormElementContext);\n  const elementValue = useContext(HvFormElementValueContext);\n  const { label } = useContext(HvFormElementDescriptorsContext);\n\n  let localValue: string | Date | DateRangeProp | undefined =\n    value ?? elementValue ?? \"\";\n  if (isRange(localValue)) {\n    localValue = showEndDate ? localValue.endDate : localValue.startDate;\n  }\n  const [dateValue, setDateValue] = useState<\n    string | Date | DateRangeProp | undefined\n  >(localValue);\n  const [editedValue, setEditedValue] = useState<string | null>(null);\n  const [displayValue, setDisplayValue] = useState(\"\");\n  const [weekdayDisplay, setWeekdayDisplay] = useState(\"\");\n\n  const localId = id ?? setId(elementId, \"calendarHeader\");\n\n  const inputValue = editedValue ?? displayValue;\n  const localeFormat = dayjs().locale(locale).localeData().longDateFormat(\"L\");\n\n  const [isValidValue, setIsValidValue] = useState(\n    inputValue.length === 0 || (!!inputValue && dayjs(localValue).isValid())\n  );\n\n  const validateInput = (incomingValid) =>\n    incomingValid === undefined || dayjs(incomingValid).isValid();\n  useEffect(() => {\n    const valid = validateInput(localValue);\n    setIsValidValue(valid);\n    if (valid) {\n      if (!localValue) {\n        setDisplayValue(\"\");\n        setEditedValue(null);\n        setWeekdayDisplay(\"\");\n        return;\n      }\n      const weekday = new Intl.DateTimeFormat(locale, {\n        weekday: \"short\",\n      }).format(isDate(localValue) ? localValue : 0);\n      setDisplayValue(formatToLocale(localValue, locale));\n      setEditedValue(null);\n      setWeekdayDisplay(weekday);\n    }\n  }, [localValue, locale]);\n\n  const handleNewDate = (event, date) => {\n    // attempt to format in locale data, or fallback to default\n    const localeParsedDate = dayjs(date, localeFormat);\n\n    const isValidInput = localeParsedDate.isValid();\n    const dateParsed = isValidInput\n      ? localeParsedDate.toDate()\n      : dayjs(date).toDate();\n    // prevent extra updates\n    if (!isSameDay(dateParsed, dateValue)) {\n      setDateValue(dateParsed);\n      onChange?.(event, dateParsed);\n    }\n\n    setIsValidValue(isValidInput);\n    if (isValidInput) {\n      setEditedValue(null);\n    }\n  };\n\n  const onBlurHandler = (event) => {\n    if (isNil(editedValue)) return;\n    if (editedValue === \"\") {\n      setIsValidValue(true);\n      setEditedValue(null);\n      return;\n    }\n    handleNewDate(event, editedValue);\n  };\n\n  const keyDownHandler = (event) => {\n    if (!isKey(event, \"Enter\") || isNil(editedValue) || editedValue === \"\")\n      return;\n    event.preventDefault();\n\n    handleNewDate(event, editedValue);\n  };\n\n  const onFocusHandler = (event) => {\n    if (!localValue) return;\n    const formattedDate =\n      isValidValue && isDate(localValue)\n        ? dayjs(localValue).locale(locale).format(\"L\")\n        : editedValue;\n    setEditedValue(formattedDate);\n    onFocus?.(event, formattedDate);\n  };\n\n  const onChangeHandler = (event) => {\n    setEditedValue(event.target.value);\n  };\n  return (\n    <>\n      <div\n        id={localId}\n        className={cx(classes.root, {\n          [classes.invalid]: !isValidValue && inputValue !== \"\",\n        })}\n      >\n        {showDayOfWeek && (\n          <HvTypography className={classes.headerDayOfWeek}>\n            {weekdayDisplay || \"\\u00A0\"}\n          </HvTypography>\n        )}\n\n        <div className={classes.headerDate}>\n          <input\n            type=\"text\"\n            id={setId(localId, \"header-input\")}\n            placeholder={localeFormat}\n            value={inputValue}\n            className={classes.input}\n            onBlur={onBlurHandler}\n            onFocus={onFocusHandler}\n            onChange={onChangeHandler}\n            onKeyDown={keyDownHandler}\n            aria-labelledby={label?.[0]?.id}\n            {...others}\n          />\n        </div>\n      </div>\n      {!isValidValue && inputValue !== \"\" && (\n        <div role=\"presentation\" className={classes.inputBorderContainer} />\n      )}\n      <div style={{ height: 32 }}>\n        {!isValidValue && inputValue !== \"\" && (\n          <HvTypography\n            component=\"span\"\n            variant=\"body\"\n            className={classes?.invalidMessageStyling}\n          >\n            <Info color=\"brand\" iconSize=\"S\" />\n            {invalidDateLabel}\n          </HvTypography>\n        )}\n      </div>\n    </>\n  );\n};\n\n// TODO: refactor this out\nHvCalendarHeader.formElementType = \"HvCalendarHeader\";\n\nexport interface HvCalendarHeaderProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvCalendarHeaderClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  value?: string | Date | DateRangeProp;\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale?: string;\n  /**\n   * Callback to define the input date.\n   */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    value: Date | DateRangeProp\n  ) => void;\n  /**\n   * Callback to handle input onFocus.\n   */\n  onFocus?: (\n    event: React.FocusEventHandler<any>,\n    formattedDate: string | null\n  ) => void;\n  /**\n   * Indicates if header should display end date in a date range.\n   */\n  showEndDate?: boolean;\n  /**\n   * Indicates if header should display the day of week.\n   */\n  showDayOfWeek?: boolean;\n  /**\n   * Label shown when date is invalid.\n   */\n  invalidDateLabel?: string;\n}\n"],"names":["dayjs","extend","localeData","localizedFormat","customParseFormat","HvCalendarHeader","id","value","locale","classes","classesProp","onChange","showEndDate","showDayOfWeek","onFocus","invalidDateLabel","others","cx","useClasses","elementId","useContext","HvFormElementContext","elementValue","HvFormElementValueContext","label","HvFormElementDescriptorsContext","localValue","isRange","endDate","startDate","dateValue","setDateValue","useState","editedValue","setEditedValue","displayValue","setDisplayValue","weekdayDisplay","setWeekdayDisplay","localId","setId","inputValue","localeFormat","longDateFormat","isValidValue","setIsValidValue","length","isValid","validateInput","incomingValid","undefined","useEffect","valid","weekday","Intl","DateTimeFormat","format","isDate","formatToLocale","handleNewDate","event","date","localeParsedDate","isValidInput","dateParsed","toDate","isSameDay","onBlurHandler","isNil","keyDownHandler","isKey","preventDefault","onFocusHandler","formattedDate","onChangeHandler","target","root","invalid","headerDayOfWeek","headerDate","input","inputBorderContainer","height","invalidMessageStyling","formElementType"],"mappings":"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"}
+{"version":3,"file":"CalendarHeader.js","sources":["../../../../../src/components/Calendar/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import { useState, useEffect, useContext } from \"react\";\n\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport dayjs from \"dayjs\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\n\nimport isNil from \"lodash/isNil\";\n\nimport {\n  HvFormElementContext,\n  HvFormElementValueContext,\n  HvFormElementDescriptorsContext,\n} from \"@core/components/Forms\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks\";\nimport { isRange, isSameDay, formatToLocale, isDate } from \"../utils\";\nimport { DateRangeProp } from \"../types\";\nimport { staticClasses, useClasses } from \"./CalendarHeader.styles\";\n\nexport { staticClasses as calendarHeaderClasses };\n\nexport type HvCalendarHeaderClasses = ExtractNames<typeof useClasses>;\n\ndayjs.extend(localeData);\ndayjs.extend(localizedFormat);\ndayjs.extend(customParseFormat);\n\nexport const HvCalendarHeader = (props: HvCalendarHeaderProps) => {\n  const {\n    id,\n    value,\n    locale = \"en-US\",\n    classes: classesProp,\n    onChange,\n    showEndDate,\n    showDayOfWeek = false,\n    onFocus,\n    invalidDateLabel = \"Invalid Date\",\n    ...others\n  } = useDefaultProps(\"HvCalendarHeader\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { elementId } = useContext(HvFormElementContext);\n  const elementValue = useContext(HvFormElementValueContext);\n  const { label } = useContext(HvFormElementDescriptorsContext);\n\n  let localValue: string | Date | DateRangeProp | undefined =\n    value ?? elementValue ?? \"\";\n  if (isRange(localValue)) {\n    localValue = showEndDate ? localValue.endDate : localValue.startDate;\n  }\n  const [dateValue, setDateValue] = useState<\n    string | Date | DateRangeProp | undefined\n  >(localValue);\n  const [editedValue, setEditedValue] = useState<string | null>(null);\n  const [displayValue, setDisplayValue] = useState(\"\");\n  const [weekdayDisplay, setWeekdayDisplay] = useState(\"\");\n\n  const localId = id ?? setId(elementId, \"calendarHeader\");\n\n  const inputValue = editedValue ?? displayValue;\n  const localeFormat = dayjs().locale(locale).localeData().longDateFormat(\"L\");\n\n  const [isValidValue, setIsValidValue] = useState(\n    inputValue.length === 0 || (!!inputValue && dayjs(localValue).isValid())\n  );\n\n  const validateInput = (incomingValid) =>\n    incomingValid === undefined || dayjs(incomingValid).isValid();\n  useEffect(() => {\n    const valid = validateInput(localValue);\n    setIsValidValue(valid);\n    if (valid) {\n      if (!localValue) {\n        setDisplayValue(\"\");\n        setEditedValue(null);\n        setWeekdayDisplay(\"\");\n        return;\n      }\n      const weekday = new Intl.DateTimeFormat(locale, {\n        weekday: \"short\",\n      }).format(isDate(localValue) ? localValue : 0);\n      setDisplayValue(formatToLocale(localValue, locale));\n      setEditedValue(null);\n      setWeekdayDisplay(weekday);\n    }\n  }, [localValue, locale]);\n\n  const handleNewDate = (event, date) => {\n    // attempt to format in locale data, or fallback to default\n    const localeParsedDate = dayjs(date, localeFormat);\n\n    const isValidInput = localeParsedDate.isValid();\n    const dateParsed = isValidInput\n      ? localeParsedDate.toDate()\n      : dayjs(date).toDate();\n    // prevent extra updates\n    if (!isSameDay(dateParsed, dateValue)) {\n      setDateValue(dateParsed);\n      onChange?.(event, dateParsed);\n    }\n\n    setIsValidValue(isValidInput);\n    if (isValidInput) {\n      setEditedValue(null);\n    }\n  };\n\n  const onBlurHandler = (event) => {\n    if (isNil(editedValue)) return;\n    if (editedValue === \"\") {\n      setIsValidValue(true);\n      setEditedValue(null);\n      return;\n    }\n    handleNewDate(event, editedValue);\n  };\n\n  const keyDownHandler = (event) => {\n    if (!isKey(event, \"Enter\") || isNil(editedValue) || editedValue === \"\")\n      return;\n    event.preventDefault();\n\n    handleNewDate(event, editedValue);\n  };\n\n  const onFocusHandler = (event) => {\n    if (!localValue) return;\n    const formattedDate =\n      isValidValue && isDate(localValue)\n        ? dayjs(localValue).locale(locale).format(\"L\")\n        : editedValue;\n    setEditedValue(formattedDate);\n    onFocus?.(event, formattedDate);\n  };\n\n  const onChangeHandler = (event) => {\n    setEditedValue(event.target.value);\n  };\n  return (\n    <>\n      <div\n        id={localId}\n        className={cx(classes.root, {\n          [classes.invalid]: !isValidValue && inputValue !== \"\",\n        })}\n      >\n        {showDayOfWeek && (\n          <HvTypography className={classes.headerDayOfWeek}>\n            {weekdayDisplay || \"\\u00A0\"}\n          </HvTypography>\n        )}\n\n        <div className={classes.headerDate}>\n          <input\n            type=\"text\"\n            id={setId(localId, \"header-input\")}\n            placeholder={localeFormat}\n            value={inputValue}\n            className={classes.input}\n            onBlur={onBlurHandler}\n            onFocus={onFocusHandler}\n            onChange={onChangeHandler}\n            onKeyDown={keyDownHandler}\n            aria-labelledby={label?.[0]?.id}\n            {...others}\n          />\n        </div>\n      </div>\n      {!isValidValue && inputValue !== \"\" && (\n        <div role=\"presentation\" className={classes.inputBorderContainer} />\n      )}\n      <div style={{ height: 32 }}>\n        {!isValidValue && inputValue !== \"\" && (\n          <HvTypography\n            component=\"span\"\n            variant=\"body\"\n            className={classes?.invalidMessageStyling}\n          >\n            <Info color=\"brand\" iconSize=\"S\" />\n            {invalidDateLabel}\n          </HvTypography>\n        )}\n      </div>\n    </>\n  );\n};\n\n// TODO: refactor this out\nHvCalendarHeader.formElementType = \"HvCalendarHeader\";\n\nexport interface HvCalendarHeaderProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvCalendarHeaderClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  value?: string | Date | DateRangeProp;\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale?: string;\n  /**\n   * Callback to define the input date.\n   */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    value: Date | DateRangeProp\n  ) => void;\n  /**\n   * Callback to handle input onFocus.\n   */\n  onFocus?: (\n    event: React.FocusEventHandler<any>,\n    formattedDate: string | null\n  ) => void;\n  /**\n   * Indicates if header should display end date in a date range.\n   */\n  showEndDate?: boolean;\n  /**\n   * Indicates if header should display the day of week.\n   */\n  showDayOfWeek?: boolean;\n  /**\n   * Label shown when date is invalid.\n   */\n  invalidDateLabel?: string;\n}\n"],"names":["dayjs","extend","localeData","localizedFormat","customParseFormat","HvCalendarHeader","props","id","value","locale","classes","classesProp","onChange","showEndDate","showDayOfWeek","onFocus","invalidDateLabel","others","useDefaultProps","cx","useClasses","elementId","useContext","HvFormElementContext","elementValue","HvFormElementValueContext","label","HvFormElementDescriptorsContext","localValue","isRange","endDate","startDate","dateValue","setDateValue","useState","editedValue","setEditedValue","displayValue","setDisplayValue","weekdayDisplay","setWeekdayDisplay","localId","setId","inputValue","localeFormat","longDateFormat","isValidValue","setIsValidValue","length","isValid","validateInput","incomingValid","undefined","useEffect","valid","weekday","Intl","DateTimeFormat","format","isDate","formatToLocale","handleNewDate","event","date","localeParsedDate","isValidInput","dateParsed","toDate","isSameDay","onBlurHandler","isNil","keyDownHandler","isKey","preventDefault","onFocusHandler","formattedDate","onChangeHandler","target","root","invalid","headerDayOfWeek","headerDate","input","inputBorderContainer","height","invalidMessageStyling","formElementType"],"mappings":"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"}

package/dist/esm/components/Calendar/CalendarHeader/CalendarHeader.styles.js

@@ -8,18 +8,14 @@ const {
   root: {
     marginTop: theme.spacing("xs"),
     backgroundColor: theme.colors.atmo1,
-    borderBottom: theme.calendar.headerInputBorderBottom,
-    borderTop: theme.calendar.headerInputBorderTop,
-    borderLeft: theme.calendar.headerInputBorderLeft,
-    borderRight: theme.calendar.headerInputBorderRight,
-    borderRadius: theme.calendar.borderRadius,
+    border: `1px solid ${theme.colors.secondary_80}`,
     "&:hover, &:focus": {
       borderBottom: `1px solid ${theme.colors.secondary}`
     }
   },
   invalid: {},
   headerDayOfWeek: {
-    color: theme.calendar.headerInputFontColor,
+    color: theme.colors.secondary_80,
     paddingLeft: theme.spacing("xs")
   },
   headerDate: {},
@@ -28,11 +24,10 @@ const {
     backgroundColor: "transparent",
     padding: `5px ${theme.spacing("xs")}`,
     fontFamily: theme.fontFamily.body,
-    color: theme.calendar.headerInputFontColor,
-    fontSize: theme.calendar.headerInputFontSize,
-    letterSpacing: theme.calendar.headerInputFontLetterSpacing,
-    lineHeight: theme.calendar.headerInputFontLineHeight,
-    fontWeight: theme.calendar.headerInputFontWeight,
+    color: theme.colors.secondary_80,
+    fontSize: theme.fontSizes.base,
+    lineHeight: theme.lineHeights.base,
+    fontWeight: theme.fontWeights.normal,
     width: "100%",
     "&::placeholder": {
       color: theme.colors.secondary_60

package/dist/esm/components/Calendar/CalendarHeader/CalendarHeader.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.styles.js","sources":["../../../../../src/components/Calendar/CalendarHeader/CalendarHeader.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarHeader\", {\n  root: {\n    marginTop: theme.spacing(\"xs\"),\n    backgroundColor: theme.colors.atmo1,\n    borderBottom: theme.calendar.headerInputBorderBottom,\n    borderTop: theme.calendar.headerInputBorderTop,\n    borderLeft: theme.calendar.headerInputBorderLeft,\n    borderRight: theme.calendar.headerInputBorderRight,\n    borderRadius: theme.calendar.borderRadius,\n    \"&:hover, &:focus\": {\n      borderBottom: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  invalid: {},\n  headerDayOfWeek: {\n    color: theme.calendar.headerInputFontColor,\n    paddingLeft: theme.spacing(\"xs\"),\n  },\n  headerDate: {},\n  input: {\n    border: \"none\",\n    backgroundColor: \"transparent\",\n    padding: `5px ${theme.spacing(\"xs\")}`,\n    fontFamily: theme.fontFamily.body,\n\n    color: theme.calendar.headerInputFontColor,\n    fontSize: theme.calendar.headerInputFontSize,\n    letterSpacing: theme.calendar.headerInputFontLetterSpacing,\n    lineHeight: theme.calendar.headerInputFontLineHeight,\n    fontWeight: theme.calendar.headerInputFontWeight,\n    width: \"100%\",\n    \"&::placeholder\": {\n      color: theme.colors.secondary_60,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  inputBorderContainer: {\n    backgroundColor: theme.colors.negative,\n    height: 1,\n    marginTop: -1,\n  },\n  invalidMessageStyling: {\n    display: \"flex\",\n    alignItems: \"center\",\n    color: theme.colors.negative,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","marginTop","theme","spacing","backgroundColor","colors","atmo1","borderBottom","calendar","headerInputBorderBottom","borderTop","headerInputBorderTop","borderLeft","headerInputBorderLeft","borderRight","headerInputBorderRight","borderRadius","secondary","invalid","headerDayOfWeek","color","headerInputFontColor","paddingLeft","headerDate","input","border","padding","fontFamily","body","fontSize","headerInputFontSize","letterSpacing","headerInputFontLetterSpacing","lineHeight","headerInputFontLineHeight","fontWeight","headerInputFontWeight","width","secondary_60","outline","outlineStyles","inputBorderContainer","negative","height","invalidMessageStyling","display","alignItems"],"mappings":";;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,oBAAoB;AAAA,EAC7EC,MAAM;AAAA,IACJC,WAAWC,MAAMC,QAAQ,IAAI;AAAA,IAC7BC,iBAAiBF,MAAMG,OAAOC;AAAAA,IAC9BC,cAAcL,MAAMM,SAASC;AAAAA,IAC7BC,WAAWR,MAAMM,SAASG;AAAAA,IAC1BC,YAAYV,MAAMM,SAASK;AAAAA,IAC3BC,aAAaZ,MAAMM,SAASO;AAAAA,IAC5BC,cAAcd,MAAMM,SAASQ;AAAAA,IAC7B,oBAAoB;AAAA,MAClBT,cAAe,aAAYL,MAAMG,OAAOY,SAAU;AAAA,IACpD;AAAA,EACF;AAAA,EACAC,SAAS,CAAC;AAAA,EACVC,iBAAiB;AAAA,IACfC,OAAOlB,MAAMM,SAASa;AAAAA,IACtBC,aAAapB,MAAMC,QAAQ,IAAI;AAAA,EACjC;AAAA,EACAoB,YAAY,CAAC;AAAA,EACbC,OAAO;AAAA,IACLC,QAAQ;AAAA,IACRrB,iBAAiB;AAAA,IACjBsB,SAAU,OAAMxB,MAAMC,QAAQ,IAAI,CAAE;AAAA,IACpCwB,YAAYzB,MAAMyB,WAAWC;AAAAA,IAE7BR,OAAOlB,MAAMM,SAASa;AAAAA,IACtBQ,UAAU3B,MAAMM,SAASsB;AAAAA,IACzBC,eAAe7B,MAAMM,SAASwB;AAAAA,IAC9BC,YAAY/B,MAAMM,SAAS0B;AAAAA,IAC3BC,YAAYjC,MAAMM,SAAS4B;AAAAA,IAC3BC,OAAO;AAAA,IACP,kBAAkB;AAAA,MAChBjB,OAAOlB,MAAMG,OAAOiC;AAAAA,IACtB;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,sBAAsB;AAAA,IACpBrC,iBAAiBF,MAAMG,OAAOqC;AAAAA,IAC9BC,QAAQ;AAAA,IACR1C,WAAW;AAAA,EACb;AAAA,EACA2C,uBAAuB;AAAA,IACrBC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZ1B,OAAOlB,MAAMG,OAAOqC;AAAAA,EACtB;AACF,CAAC;"}
+{"version":3,"file":"CalendarHeader.styles.js","sources":["../../../../../src/components/Calendar/CalendarHeader/CalendarHeader.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarHeader\", {\n  root: {\n    marginTop: theme.spacing(\"xs\"),\n    backgroundColor: theme.colors.atmo1,\n    border: `1px solid ${theme.colors.secondary_80}`,\n    \"&:hover, &:focus\": {\n      borderBottom: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  invalid: {},\n  headerDayOfWeek: {\n    color: theme.colors.secondary_80,\n    paddingLeft: theme.spacing(\"xs\"),\n  },\n  headerDate: {},\n  input: {\n    border: \"none\",\n    backgroundColor: \"transparent\",\n    padding: `5px ${theme.spacing(\"xs\")}`,\n    fontFamily: theme.fontFamily.body,\n\n    color: theme.colors.secondary_80,\n    fontSize: theme.fontSizes.base,\n    lineHeight: theme.lineHeights.base,\n    fontWeight: theme.fontWeights.normal,\n    width: \"100%\",\n    \"&::placeholder\": {\n      color: theme.colors.secondary_60,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  inputBorderContainer: {\n    backgroundColor: theme.colors.negative,\n    height: 1,\n    marginTop: -1,\n  },\n  invalidMessageStyling: {\n    display: \"flex\",\n    alignItems: \"center\",\n    color: theme.colors.negative,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","marginTop","theme","spacing","backgroundColor","colors","atmo1","border","secondary_80","borderBottom","secondary","invalid","headerDayOfWeek","color","paddingLeft","headerDate","input","padding","fontFamily","body","fontSize","fontSizes","base","lineHeight","lineHeights","fontWeight","fontWeights","normal","width","secondary_60","outline","outlineStyles","inputBorderContainer","negative","height","invalidMessageStyling","display","alignItems"],"mappings":";;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,oBAAoB;AAAA,EAC7EC,MAAM;AAAA,IACJC,WAAWC,MAAMC,QAAQ,IAAI;AAAA,IAC7BC,iBAAiBF,MAAMG,OAAOC;AAAAA,IAC9BC,QAAS,aAAYL,MAAMG,OAAOG,YAAa;AAAA,IAC/C,oBAAoB;AAAA,MAClBC,cAAe,aAAYP,MAAMG,OAAOK,SAAU;AAAA,IACpD;AAAA,EACF;AAAA,EACAC,SAAS,CAAC;AAAA,EACVC,iBAAiB;AAAA,IACfC,OAAOX,MAAMG,OAAOG;AAAAA,IACpBM,aAAaZ,MAAMC,QAAQ,IAAI;AAAA,EACjC;AAAA,EACAY,YAAY,CAAC;AAAA,EACbC,OAAO;AAAA,IACLT,QAAQ;AAAA,IACRH,iBAAiB;AAAA,IACjBa,SAAU,OAAMf,MAAMC,QAAQ,IAAI,CAAE;AAAA,IACpCe,YAAYhB,MAAMgB,WAAWC;AAAAA,IAE7BN,OAAOX,MAAMG,OAAOG;AAAAA,IACpBY,UAAUlB,MAAMmB,UAAUC;AAAAA,IAC1BC,YAAYrB,MAAMsB,YAAYF;AAAAA,IAC9BG,YAAYvB,MAAMwB,YAAYC;AAAAA,IAC9BC,OAAO;AAAA,IACP,kBAAkB;AAAA,MAChBf,OAAOX,MAAMG,OAAOwB;AAAAA,IACtB;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,sBAAsB;AAAA,IACpB5B,iBAAiBF,MAAMG,OAAO4B;AAAAA,IAC9BC,QAAQ;AAAA,IACRjC,WAAW;AAAA,EACb;AAAA,EACAkC,uBAAuB;AAAA,IACrBC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZxB,OAAOX,MAAMG,OAAO4B;AAAAA,EACtB;AACF,CAAC;"}

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

@@ -3,22 +3,24 @@ import { useRef } from "react";
 import { isDateRangeProp, isSameDay, isSameMonth, dateInProvidedValueRange, checkIfDateIsDisabled } from "../utils.js";
 import { useClasses } from "./CalendarCell.styles.js";
 import { staticClasses } from "./CalendarCell.styles.js";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { HvTypography } from "../../Typography/Typography.js";
-const HvCalendarCell = ({
-  classes: classesProp,
-  onChange,
-  onKeyDown,
-  calendarValue,
-  firstDayOfCurrentMonth,
-  value,
-  isDateSelectionMode,
-  today,
-  locale,
-  minimumDate,
-  maximumDate,
-  rangeMode = false,
-  ...others
-}) => {
+const HvCalendarCell = (props) => {
+  const {
+    classes: classesProp,
+    onChange,
+    onKeyDown,
+    calendarValue,
+    firstDayOfCurrentMonth,
+    value,
+    isDateSelectionMode,
+    today,
+    locale,
+    minimumDate,
+    maximumDate,
+    rangeMode = false,
+    ...others
+  } = useDefaultProps("HvCalendarCell", props);
   const {
     classes,
     cx

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarCell.js","sources":["../../../../../src/components/Calendar/SingleCalendar/CalendarCell.tsx"],"sourcesContent":["import { SyntheticEvent, useRef } from \"react\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n  isSameDay,\n  isSameMonth,\n  dateInProvidedValueRange,\n  checkIfDateIsDisabled,\n  isDateRangeProp,\n} from \"../utils\";\nimport { DateRangeProp } from \"../types\";\nimport CalendarModel from \"../model\";\n\nimport { staticClasses, useClasses } from \"./CalendarCell.styles\";\n\nexport { staticClasses as calendarCellClasses };\n\nexport type HvCalendarCellClasses = ExtractNames<typeof useClasses>;\n\nexport const HvCalendarCell = ({\n  classes: classesProp,\n  onChange,\n  onKeyDown,\n  calendarValue,\n  firstDayOfCurrentMonth,\n  value,\n  isDateSelectionMode,\n  today,\n  locale,\n  minimumDate,\n  maximumDate,\n  rangeMode = false,\n  ...others\n}: HvCalendarCellProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const buttonEl = useRef<HTMLButtonElement>(null);\n\n  const startDate = isDateRangeProp(calendarValue)\n    ? calendarValue.startDate\n    : undefined;\n  const endDate = isDateRangeProp(calendarValue)\n    ? calendarValue.endDate\n    : undefined;\n  const isCellToday = isSameDay(value, today);\n  const isCellSelected = isSameDay(calendarValue, value);\n  const inMonth = isSameMonth(value, firstDayOfCurrentMonth);\n  const isCellAfterStartingDate =\n    rangeMode && value && startDate ? value >= startDate : false;\n  const isCellStartingDate = rangeMode ? isSameDay(value, startDate) : false;\n  const isDateInSelectionRange =\n    calendarValue && rangeMode\n      ? dateInProvidedValueRange(value, calendarValue)\n      : false;\n  const isDateDisabled = checkIfDateIsDisabled(value, minimumDate, maximumDate);\n  const startBookend = isSameDay(startDate, value);\n  const endBookend = isSameDay(endDate, value);\n  const isSelecting = isDateSelectionMode && isCellAfterStartingDate;\n\n  const handleClick = (event: SyntheticEvent) => {\n    if (value) {\n      onChange?.(event, value);\n      if (buttonEl.current) setTimeout(() => buttonEl?.current?.focus());\n    }\n  };\n\n  const handleKeyDown = (event) => {\n    onKeyDown?.(event);\n  };\n\n  const renderDate = () => (\n    <button\n      ref={buttonEl}\n      type=\"button\"\n      className={cx(classes.cellContainer, {\n        [classes.focusSelection]: inMonth,\n      })}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      disabled={isDateDisabled || !inMonth}\n      data-in-month={inMonth}\n      {...others}\n    >\n      <HvTypography\n        variant={isCellToday ? \"label\" : \"body\"}\n        className={cx(classes.calendarDate, {\n          [classes.calendarDateSelected]: inMonth && isCellSelected,\n          [classes.calendarDateNotInMonth]: !inMonth,\n          [classes.calendarDateInSelectionRange]:\n            inMonth && rangeMode && isDateInSelectionRange,\n          [classes.calendarDateDisabled]: isDateDisabled,\n          [classes.startBookend]:\n            inMonth &&\n            ((startBookend && rangeMode) ||\n              (isCellStartingDate && isDateSelectionMode)),\n          [classes.endBookend]: inMonth && endBookend && rangeMode,\n        })}\n      >\n        {value && value.getDate()}\n      </HvTypography>\n    </button>\n  );\n\n  return (\n    <div\n      className={cx(classes.dateWrapper, {\n        [classes.cellsInRange]: inMonth && rangeMode && isSelecting,\n        [classes.cellsOutsideRange]: rangeMode && !isSelecting,\n      })}\n      data-calendar-cell=\"calendarCell\"\n    >\n      {renderDate()}\n    </div>\n  );\n};\n\nexport interface HvCalendarCellProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvCalendarCellClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  calendarValue?: string | Date | DateRangeProp;\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  value?: Date;\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale?: string;\n  /**\n   * Callback to define the input date.\n   */\n  onChange?: (event: SyntheticEvent, value: Date | DateRangeProp) => void;\n  /**\n   * Callback to handle input onFocus.\n   */\n  onFocus?: React.FocusEventHandler<any>;\n\n  calendarModel?: CalendarModel;\n  onKeyDown?: (event: KeyboardEvent) => void;\n\n  today?: Date;\n  minimumDate?: Date;\n  maximumDate?: Date;\n  firstDayOfCurrentMonth?: Date;\n  isDateSelectionMode?: boolean;\n  rangeMode?: boolean;\n  tabIndex?: number;\n}\n\nexport default HvCalendarCell;\n"],"names":["HvCalendarCell","classes","classesProp","onChange","onKeyDown","calendarValue","firstDayOfCurrentMonth","value","isDateSelectionMode","today","locale","minimumDate","maximumDate","rangeMode","others","cx","useClasses","buttonEl","useRef","startDate","isDateRangeProp","undefined","endDate","isCellToday","isSameDay","isCellSelected","inMonth","isSameMonth","isCellAfterStartingDate","isCellStartingDate","isDateInSelectionRange","dateInProvidedValueRange","isDateDisabled","checkIfDateIsDisabled","startBookend","endBookend","isSelecting","handleClick","event","current","setTimeout","focus","handleKeyDown","renderDate","cellContainer","focusSelection","calendarDate","calendarDateSelected","calendarDateNotInMonth","calendarDateInSelectionRange","calendarDateDisabled","getDate","dateWrapper","cellsInRange","cellsOutsideRange"],"mappings":";;;;;;AAoBO,MAAMA,iBAAiBA,CAAC;AAAA,EAC7BC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,YAAY;AAAA,EACZ,GAAGC;AACgB,MAAM;AACnB,QAAA;AAAA,IAAEb;AAAAA,IAASc;AAAAA,EAAAA,IAAOC,WAAWd,WAAW;AAExCe,QAAAA,WAAWC,OAA0B,IAAI;AAE/C,QAAMC,YAAYC,gBAAgBf,aAAa,IAC3CA,cAAcc,YACdE;AACJ,QAAMC,UAAUF,gBAAgBf,aAAa,IACzCA,cAAciB,UACdD;AACEE,QAAAA,cAAcC,UAAUjB,OAAOE,KAAK;AACpCgB,QAAAA,iBAAiBD,UAAUnB,eAAeE,KAAK;AAC/CmB,QAAAA,UAAUC,YAAYpB,OAAOD,sBAAsB;AACzD,QAAMsB,0BACJf,aAAaN,SAASY,YAAYZ,SAASY,YAAY;AACzD,QAAMU,qBAAqBhB,YAAYW,UAAUjB,OAAOY,SAAS,IAAI;AACrE,QAAMW,yBACJzB,iBAAiBQ,YACbkB,yBAAyBxB,OAAOF,aAAa,IAC7C;AACN,QAAM2B,iBAAiBC,sBAAsB1B,OAAOI,aAAaC,WAAW;AACtEsB,QAAAA,eAAeV,UAAUL,WAAWZ,KAAK;AACzC4B,QAAAA,aAAaX,UAAUF,SAASf,KAAK;AAC3C,QAAM6B,cAAc5B,uBAAuBoB;AAErCS,QAAAA,cAAcA,CAACC,UAA0B;AAC7C,QAAI/B,OAAO;AACTJ,2CAAWmC,OAAO/B;AAClB,UAAIU,SAASsB;AAASC,mBAAW,MAAA;;AAAMvB,4DAAUsB,YAAVtB,mBAAmBwB;AAAAA,SAAO;AAAA,IACnE;AAAA,EAAA;AAGF,QAAMC,gBAAiBJ,CAAU,UAAA;AAC/BlC,2CAAYkC;AAAAA,EAAK;AAGbK,QAAAA,aAAaA,MACjB,oBAAC,UACC,EAAA,KAAK1B,UACL,MAAK,UACL,WAAWF,GAAGd,QAAQ2C,eAAe;AAAA,IACnC,CAAC3C,QAAQ4C,cAAc,GAAGnB;AAAAA,EAC3B,CAAA,GACD,SAASW,aACT,WAAWK,eACX,UAAUV,kBAAkB,CAACN,SAC7B,iBAAeA,SACf,GAAIZ,QAEJ,UAAC,oBAAA,cAAA,EACC,SAASS,cAAc,UAAU,QACjC,WAAWR,GAAGd,QAAQ6C,cAAc;AAAA,IAClC,CAAC7C,QAAQ8C,oBAAoB,GAAGrB,WAAWD;AAAAA,IAC3C,CAACxB,QAAQ+C,sBAAsB,GAAG,CAACtB;AAAAA,IACnC,CAACzB,QAAQgD,4BAA4B,GACnCvB,WAAWb,aAAaiB;AAAAA,IAC1B,CAAC7B,QAAQiD,oBAAoB,GAAGlB;AAAAA,IAChC,CAAC/B,QAAQiC,YAAY,GACnBR,YACEQ,gBAAgBrB,aACfgB,sBAAsBrB;AAAAA,IAC3B,CAACP,QAAQkC,UAAU,GAAGT,WAAWS,cAActB;AAAAA,EAAAA,CAChD,GAEAN,UAAAA,SAASA,MAAM4C,WAClB,EACF,CAAA;AAGF,SACG,oBAAA,OAAA,EACC,WAAWpC,GAAGd,QAAQmD,aAAa;AAAA,IACjC,CAACnD,QAAQoD,YAAY,GAAG3B,WAAWb,aAAauB;AAAAA,IAChD,CAACnC,QAAQqD,iBAAiB,GAAGzC,aAAa,CAACuB;AAAAA,EAAAA,CAC5C,GACD,sBAAmB,gBAElBO,uBACH,CAAA;AAEJ;"}
+{"version":3,"file":"CalendarCell.js","sources":["../../../../../src/components/Calendar/SingleCalendar/CalendarCell.tsx"],"sourcesContent":["import { SyntheticEvent, useRef } from \"react\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks\";\nimport {\n  isSameDay,\n  isSameMonth,\n  dateInProvidedValueRange,\n  checkIfDateIsDisabled,\n  isDateRangeProp,\n} from \"../utils\";\nimport { DateRangeProp } from \"../types\";\nimport CalendarModel from \"../model\";\n\nimport { staticClasses, useClasses } from \"./CalendarCell.styles\";\n\nexport { staticClasses as calendarCellClasses };\n\nexport type HvCalendarCellClasses = ExtractNames<typeof useClasses>;\n\nexport const HvCalendarCell = (props: HvCalendarCellProps) => {\n  const {\n    classes: classesProp,\n    onChange,\n    onKeyDown,\n    calendarValue,\n    firstDayOfCurrentMonth,\n    value,\n    isDateSelectionMode,\n    today,\n    locale,\n    minimumDate,\n    maximumDate,\n    rangeMode = false,\n    ...others\n  } = useDefaultProps(\"HvCalendarCell\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const buttonEl = useRef<HTMLButtonElement>(null);\n\n  const startDate = isDateRangeProp(calendarValue)\n    ? calendarValue.startDate\n    : undefined;\n  const endDate = isDateRangeProp(calendarValue)\n    ? calendarValue.endDate\n    : undefined;\n  const isCellToday = isSameDay(value, today);\n  const isCellSelected = isSameDay(calendarValue, value);\n  const inMonth = isSameMonth(value, firstDayOfCurrentMonth);\n  const isCellAfterStartingDate =\n    rangeMode && value && startDate ? value >= startDate : false;\n  const isCellStartingDate = rangeMode ? isSameDay(value, startDate) : false;\n  const isDateInSelectionRange =\n    calendarValue && rangeMode\n      ? dateInProvidedValueRange(value, calendarValue)\n      : false;\n  const isDateDisabled = checkIfDateIsDisabled(value, minimumDate, maximumDate);\n  const startBookend = isSameDay(startDate, value);\n  const endBookend = isSameDay(endDate, value);\n  const isSelecting = isDateSelectionMode && isCellAfterStartingDate;\n\n  const handleClick = (event: SyntheticEvent) => {\n    if (value) {\n      onChange?.(event, value);\n      if (buttonEl.current) setTimeout(() => buttonEl?.current?.focus());\n    }\n  };\n\n  const handleKeyDown = (event) => {\n    onKeyDown?.(event);\n  };\n\n  const renderDate = () => (\n    <button\n      ref={buttonEl}\n      type=\"button\"\n      className={cx(classes.cellContainer, {\n        [classes.focusSelection]: inMonth,\n      })}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      disabled={isDateDisabled || !inMonth}\n      data-in-month={inMonth}\n      {...others}\n    >\n      <HvTypography\n        variant={isCellToday ? \"label\" : \"body\"}\n        className={cx(classes.calendarDate, {\n          [classes.calendarDateSelected]: inMonth && isCellSelected,\n          [classes.calendarDateNotInMonth]: !inMonth,\n          [classes.calendarDateInSelectionRange]:\n            inMonth && rangeMode && isDateInSelectionRange,\n          [classes.calendarDateDisabled]: isDateDisabled,\n          [classes.startBookend]:\n            inMonth &&\n            ((startBookend && rangeMode) ||\n              (isCellStartingDate && isDateSelectionMode)),\n          [classes.endBookend]: inMonth && endBookend && rangeMode,\n        })}\n      >\n        {value && value.getDate()}\n      </HvTypography>\n    </button>\n  );\n\n  return (\n    <div\n      className={cx(classes.dateWrapper, {\n        [classes.cellsInRange]: inMonth && rangeMode && isSelecting,\n        [classes.cellsOutsideRange]: rangeMode && !isSelecting,\n      })}\n      data-calendar-cell=\"calendarCell\"\n    >\n      {renderDate()}\n    </div>\n  );\n};\n\nexport interface HvCalendarCellProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvCalendarCellClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  calendarValue?: string | Date | DateRangeProp;\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  value?: Date;\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale?: string;\n  /**\n   * Callback to define the input date.\n   */\n  onChange?: (event: SyntheticEvent, value: Date | DateRangeProp) => void;\n  /**\n   * Callback to handle input onFocus.\n   */\n  onFocus?: React.FocusEventHandler<any>;\n\n  calendarModel?: CalendarModel;\n  onKeyDown?: (event: KeyboardEvent) => void;\n\n  today?: Date;\n  minimumDate?: Date;\n  maximumDate?: Date;\n  firstDayOfCurrentMonth?: Date;\n  isDateSelectionMode?: boolean;\n  rangeMode?: boolean;\n  tabIndex?: number;\n}\n\nexport default HvCalendarCell;\n"],"names":["HvCalendarCell","props","classes","classesProp","onChange","onKeyDown","calendarValue","firstDayOfCurrentMonth","value","isDateSelectionMode","today","locale","minimumDate","maximumDate","rangeMode","others","useDefaultProps","cx","useClasses","buttonEl","useRef","startDate","isDateRangeProp","undefined","endDate","isCellToday","isSameDay","isCellSelected","inMonth","isSameMonth","isCellAfterStartingDate","isCellStartingDate","isDateInSelectionRange","dateInProvidedValueRange","isDateDisabled","checkIfDateIsDisabled","startBookend","endBookend","isSelecting","handleClick","event","current","setTimeout","focus","handleKeyDown","renderDate","cellContainer","focusSelection","calendarDate","calendarDateSelected","calendarDateNotInMonth","calendarDateInSelectionRange","calendarDateDisabled","getDate","dateWrapper","cellsInRange","cellsOutsideRange"],"mappings":";;;;;;;AAqBaA,MAAAA,iBAAiBA,CAACC,UAA+B;AACtD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,YAAY;AAAA,IACZ,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,kBAAkBf,KAAK;AAErC,QAAA;AAAA,IAAEC;AAAAA,IAASe;AAAAA,EAAAA,IAAOC,WAAWf,WAAW;AAExCgB,QAAAA,WAAWC,OAA0B,IAAI;AAE/C,QAAMC,YAAYC,gBAAgBhB,aAAa,IAC3CA,cAAce,YACdE;AACJ,QAAMC,UAAUF,gBAAgBhB,aAAa,IACzCA,cAAckB,UACdD;AACEE,QAAAA,cAAcC,UAAUlB,OAAOE,KAAK;AACpCiB,QAAAA,iBAAiBD,UAAUpB,eAAeE,KAAK;AAC/CoB,QAAAA,UAAUC,YAAYrB,OAAOD,sBAAsB;AACzD,QAAMuB,0BACJhB,aAAaN,SAASa,YAAYb,SAASa,YAAY;AACzD,QAAMU,qBAAqBjB,YAAYY,UAAUlB,OAAOa,SAAS,IAAI;AACrE,QAAMW,yBACJ1B,iBAAiBQ,YACbmB,yBAAyBzB,OAAOF,aAAa,IAC7C;AACN,QAAM4B,iBAAiBC,sBAAsB3B,OAAOI,aAAaC,WAAW;AACtEuB,QAAAA,eAAeV,UAAUL,WAAWb,KAAK;AACzC6B,QAAAA,aAAaX,UAAUF,SAAShB,KAAK;AAC3C,QAAM8B,cAAc7B,uBAAuBqB;AAErCS,QAAAA,cAAcA,CAACC,UAA0B;AAC7C,QAAIhC,OAAO;AACTJ,2CAAWoC,OAAOhC;AAClB,UAAIW,SAASsB;AAASC,mBAAW,MAAA;;AAAMvB,4DAAUsB,YAAVtB,mBAAmBwB;AAAAA,SAAO;AAAA,IACnE;AAAA,EAAA;AAGF,QAAMC,gBAAiBJ,CAAU,UAAA;AAC/BnC,2CAAYmC;AAAAA,EAAK;AAGbK,QAAAA,aAAaA,MACjB,oBAAC,UACC,EAAA,KAAK1B,UACL,MAAK,UACL,WAAWF,GAAGf,QAAQ4C,eAAe;AAAA,IACnC,CAAC5C,QAAQ6C,cAAc,GAAGnB;AAAAA,EAC3B,CAAA,GACD,SAASW,aACT,WAAWK,eACX,UAAUV,kBAAkB,CAACN,SAC7B,iBAAeA,SACf,GAAIb,QAEJ,UAAC,oBAAA,cAAA,EACC,SAASU,cAAc,UAAU,QACjC,WAAWR,GAAGf,QAAQ8C,cAAc;AAAA,IAClC,CAAC9C,QAAQ+C,oBAAoB,GAAGrB,WAAWD;AAAAA,IAC3C,CAACzB,QAAQgD,sBAAsB,GAAG,CAACtB;AAAAA,IACnC,CAAC1B,QAAQiD,4BAA4B,GACnCvB,WAAWd,aAAakB;AAAAA,IAC1B,CAAC9B,QAAQkD,oBAAoB,GAAGlB;AAAAA,IAChC,CAAChC,QAAQkC,YAAY,GACnBR,YACEQ,gBAAgBtB,aACfiB,sBAAsBtB;AAAAA,IAC3B,CAACP,QAAQmC,UAAU,GAAGT,WAAWS,cAAcvB;AAAAA,EAAAA,CAChD,GAEAN,UAAAA,SAASA,MAAM6C,WAClB,EACF,CAAA;AAGF,SACG,oBAAA,OAAA,EACC,WAAWpC,GAAGf,QAAQoD,aAAa;AAAA,IACjC,CAACpD,QAAQqD,YAAY,GAAG3B,WAAWd,aAAawB;AAAAA,IAChD,CAACpC,QAAQsD,iBAAiB,GAAG1C,aAAa,CAACwB;AAAAA,EAAAA,CAC5C,GACD,sBAAmB,gBAElBO,uBACH,CAAA;AAEJ;"}

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

@@ -2,7 +2,7 @@ import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../../../utils/focusUtils.js";
 import { createClasses } from "../../../utils/classes.js";
 const hover = {
-  backgroundColor: theme.calendar.cellHoverColor,
+  backgroundColor: theme.colors.containerBackgroundHover,
   cursor: "pointer"
 };
 const {

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarCell.styles.js","sources":["../../../../../src/components/Calendar/SingleCalendar/CalendarCell.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst hover = {\n  backgroundColor: theme.calendar.cellHoverColor,\n  cursor: \"pointer\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarCell\", {\n  cellContainer: {\n    cursor: \"pointer\",\n    border: 0,\n    padding: 0,\n    margin: 0,\n    backgroundColor: \"transparent\",\n  },\n  focusSelection: {\n    \"&:hover\": {\n      ...hover,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...hover,\n      ...outlineStyles,\n    },\n  },\n  calendarDate: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    flexDirection: \"column\",\n    textAlign: \"center\",\n    height: \"40px\",\n    width: \"40px\",\n  },\n  calendarDateSelected: {\n    backgroundColor: theme.colors.atmo3,\n    color: theme.colors.secondary,\n    \"&:hover\": {\n      ...hover,\n    },\n  },\n  calendarDateNotInMonth: {\n    color: theme.colors.secondary_60,\n    cursor: \"not-allowed\",\n  },\n  calendarDateInSelectionRange: {\n    backgroundColor: theme.colors.atmo3,\n  },\n  calendarDateDisabled: {\n    color: theme.colors.secondary_60,\n    cursor: \"no-drop\",\n  },\n  startBookend: {\n    borderLeft: `1px solid ${theme.colors.secondary}`,\n  },\n  endBookend: {\n    borderRight: `1px solid ${theme.colors.secondary}`,\n  },\n  dateWrapper: {\n    width: \"40px\",\n    height: \"40px\",\n  },\n  cellsInRange: {\n    \"&:focus\": {\n      outside: \"none\",\n    },\n  },\n  cellsOutsideRange: {\n    \"&:focus\": {\n      outside: \"none\",\n    },\n  },\n});\n"],"names":["hover","backgroundColor","theme","calendar","cellHoverColor","cursor","staticClasses","useClasses","createClasses","cellContainer","border","padding","margin","focusSelection","outline","outlineStyles","calendarDate","display","justifyContent","flexDirection","textAlign","height","width","calendarDateSelected","colors","atmo3","color","secondary","calendarDateNotInMonth","secondary_60","calendarDateInSelectionRange","calendarDateDisabled","startBookend","borderLeft","endBookend","borderRight","dateWrapper","cellsInRange","outside","cellsOutsideRange"],"mappings":";;;AAMA,MAAMA,QAAQ;AAAA,EACZC,iBAAiBC,MAAMC,SAASC;AAAAA,EAChCC,QAAQ;AACV;AAEa,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAc,kBAAkB;AAAA,EAC3EC,eAAe;AAAA,IACbJ,QAAQ;AAAA,IACRK,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRX,iBAAiB;AAAA,EACnB;AAAA,EACAY,gBAAgB;AAAA,IACd,WAAW;AAAA,MACT,GAAGb;AAAAA,IACL;AAAA,IACA,WAAW;AAAA,MACTc,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGd;AAAAA,MACH,GAAGe;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,eAAe;AAAA,IACfC,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRC,OAAO;AAAA,EACT;AAAA,EACAC,sBAAsB;AAAA,IACpBtB,iBAAiBC,MAAMsB,OAAOC;AAAAA,IAC9BC,OAAOxB,MAAMsB,OAAOG;AAAAA,IACpB,WAAW;AAAA,MACT,GAAG3B;AAAAA,IACL;AAAA,EACF;AAAA,EACA4B,wBAAwB;AAAA,IACtBF,OAAOxB,MAAMsB,OAAOK;AAAAA,IACpBxB,QAAQ;AAAA,EACV;AAAA,EACAyB,8BAA8B;AAAA,IAC5B7B,iBAAiBC,MAAMsB,OAAOC;AAAAA,EAChC;AAAA,EACAM,sBAAsB;AAAA,IACpBL,OAAOxB,MAAMsB,OAAOK;AAAAA,IACpBxB,QAAQ;AAAA,EACV;AAAA,EACA2B,cAAc;AAAA,IACZC,YAAa,aAAY/B,MAAMsB,OAAOG,SAAU;AAAA,EAClD;AAAA,EACAO,YAAY;AAAA,IACVC,aAAc,aAAYjC,MAAMsB,OAAOG,SAAU;AAAA,EACnD;AAAA,EACAS,aAAa;AAAA,IACXd,OAAO;AAAA,IACPD,QAAQ;AAAA,EACV;AAAA,EACAgB,cAAc;AAAA,IACZ,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACTD,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"CalendarCell.styles.js","sources":["../../../../../src/components/Calendar/SingleCalendar/CalendarCell.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst hover = {\n  backgroundColor: theme.colors.containerBackgroundHover,\n  cursor: \"pointer\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarCell\", {\n  cellContainer: {\n    cursor: \"pointer\",\n    border: 0,\n    padding: 0,\n    margin: 0,\n    backgroundColor: \"transparent\",\n  },\n  focusSelection: {\n    \"&:hover\": {\n      ...hover,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...hover,\n      ...outlineStyles,\n    },\n  },\n  calendarDate: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    flexDirection: \"column\",\n    textAlign: \"center\",\n    height: \"40px\",\n    width: \"40px\",\n  },\n  calendarDateSelected: {\n    backgroundColor: theme.colors.atmo3,\n    color: theme.colors.secondary,\n    \"&:hover\": {\n      ...hover,\n    },\n  },\n  calendarDateNotInMonth: {\n    color: theme.colors.secondary_60,\n    cursor: \"not-allowed\",\n  },\n  calendarDateInSelectionRange: {\n    backgroundColor: theme.colors.atmo3,\n  },\n  calendarDateDisabled: {\n    color: theme.colors.secondary_60,\n    cursor: \"no-drop\",\n  },\n  startBookend: {\n    borderLeft: `1px solid ${theme.colors.secondary}`,\n  },\n  endBookend: {\n    borderRight: `1px solid ${theme.colors.secondary}`,\n  },\n  dateWrapper: {\n    width: \"40px\",\n    height: \"40px\",\n  },\n  cellsInRange: {\n    \"&:focus\": {\n      outside: \"none\",\n    },\n  },\n  cellsOutsideRange: {\n    \"&:focus\": {\n      outside: \"none\",\n    },\n  },\n});\n"],"names":["hover","backgroundColor","theme","colors","containerBackgroundHover","cursor","staticClasses","useClasses","createClasses","cellContainer","border","padding","margin","focusSelection","outline","outlineStyles","calendarDate","display","justifyContent","flexDirection","textAlign","height","width","calendarDateSelected","atmo3","color","secondary","calendarDateNotInMonth","secondary_60","calendarDateInSelectionRange","calendarDateDisabled","startBookend","borderLeft","endBookend","borderRight","dateWrapper","cellsInRange","outside","cellsOutsideRange"],"mappings":";;;AAMA,MAAMA,QAAQ;AAAA,EACZC,iBAAiBC,MAAMC,OAAOC;AAAAA,EAC9BC,QAAQ;AACV;AAEa,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAc,kBAAkB;AAAA,EAC3EC,eAAe;AAAA,IACbJ,QAAQ;AAAA,IACRK,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRX,iBAAiB;AAAA,EACnB;AAAA,EACAY,gBAAgB;AAAA,IACd,WAAW;AAAA,MACT,GAAGb;AAAAA,IACL;AAAA,IACA,WAAW;AAAA,MACTc,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGd;AAAAA,MACH,GAAGe;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,eAAe;AAAA,IACfC,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRC,OAAO;AAAA,EACT;AAAA,EACAC,sBAAsB;AAAA,IACpBtB,iBAAiBC,MAAMC,OAAOqB;AAAAA,IAC9BC,OAAOvB,MAAMC,OAAOuB;AAAAA,IACpB,WAAW;AAAA,MACT,GAAG1B;AAAAA,IACL;AAAA,EACF;AAAA,EACA2B,wBAAwB;AAAA,IACtBF,OAAOvB,MAAMC,OAAOyB;AAAAA,IACpBvB,QAAQ;AAAA,EACV;AAAA,EACAwB,8BAA8B;AAAA,IAC5B5B,iBAAiBC,MAAMC,OAAOqB;AAAAA,EAChC;AAAA,EACAM,sBAAsB;AAAA,IACpBL,OAAOvB,MAAMC,OAAOyB;AAAAA,IACpBvB,QAAQ;AAAA,EACV;AAAA,EACA0B,cAAc;AAAA,IACZC,YAAa,aAAY9B,MAAMC,OAAOuB,SAAU;AAAA,EAClD;AAAA,EACAO,YAAY;AAAA,IACVC,aAAc,aAAYhC,MAAMC,OAAOuB,SAAU;AAAA,EACnD;AAAA,EACAS,aAAa;AAAA,IACXb,OAAO;AAAA,IACPD,QAAQ;AAAA,EACV;AAAA,EACAe,cAAc;AAAA,IACZ,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACTD,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/components/Card/Card.js

@@ -22,7 +22,7 @@ const HvCard = (props) => {
     cx
   } = useClasses(classesProp);
   return /* @__PURE__ */ jsxs(HvBox, { className: cx("HvIsCardGridElement", classes.root, css({
-    backgroundColor: bgcolor && theme.colors[bgcolor] || theme.card.backgroundColor
+    backgroundColor: bgcolor && theme.colors[bgcolor]
   }), {
     [classes.selectable]: selectable,
     [classes.selected]: selected

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBox } from \"@core/components/Box\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvAtmosphereColorKeys, HvSemanticColorKeys } from \"@core/types/tokens\";\n\nimport { staticClasses, useClasses } from \"./Card.styles\";\n\nexport { staticClasses as cardClasses };\n\nexport type HvCardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardProps extends HvBaseProps {\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** Whether the card is selectable. */\n  selectable?: boolean;\n  /** Whether the card is currently selected. */\n  selected?: boolean;\n  /** The background color of the card. */\n  bgcolor?:\n    | \"sema0\"\n    | HvSemanticColorKeys\n    | HvAtmosphereColorKeys\n    | \"transparent\";\n  /**\n   *  The border color at the top of the card. Must be one of palette semantic or atmosphere colors.\n   *  To set another color, the borderTop should be override.\n   */\n  statusColor?: \"sema0\" | HvSemanticColorKeys | HvAtmosphereColorKeys;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardClasses;\n}\n\n/**\n * A card is a container for a few short and related pieces of content.\n * It roughly resembles a playing card in size and shape and is intended as a\n * linked short representation of a conceptual unit. For that reason,\n * this pattern must be used as an entry-point for further information.\n */\nexport const HvCard = (props: HvCardProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    icon,\n    selectable = false,\n    selected = false,\n    statusColor = \"sema0\",\n    bgcolor,\n    ...others\n  } = useDefaultProps(\"HvCard\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n\n  return (\n    <HvBox\n      className={cx(\n        \"HvIsCardGridElement\",\n        classes.root,\n        css({\n          backgroundColor:\n            (bgcolor && theme.colors[bgcolor]) || theme.card.backgroundColor,\n        }),\n        {\n          [classes.selectable]: selectable,\n          [classes.selected]: selected,\n        },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.semanticContainer}>\n        <div\n          className={cx(\n            css({\n              height: selected ? 4 : 2,\n              backgroundColor:\n                statusColor === \"sema0\"\n                  ? selected\n                    ? theme.colors.secondary\n                    : theme.colors.atmo4\n                  : theme.colors[statusColor],\n            }),\n            classes.semanticBar\n          )}\n        />\n        <div className={classes.icon}>{icon}</div>\n      </div>\n      {children}\n    </HvBox>\n  );\n};\n"],"names":["HvCard","props","classes","classesProp","className","children","icon","selectable","selected","statusColor","bgcolor","others","useDefaultProps","css","cx","useClasses","root","backgroundColor","theme","colors","card","semanticContainer","height","secondary","atmo4","semanticBar"],"mappings":";;;;;;AA0CaA,MAAAA,SAASA,CAACC,UAAuB;AACtC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,aAAa;AAAA,IACbC,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,UAAUX,KAAK;AAE7B,QAAA;AAAA,IAAEC;AAAAA,IAASW;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWZ,WAAW;AAEnD,8BACG,OACC,EAAA,WAAWW,GACT,uBACAZ,QAAQc,MACRH,IAAI;AAAA,IACFI,iBACGP,WAAWQ,MAAMC,OAAOT,OAAO,KAAMQ,MAAME,KAAKH;AAAAA,EAAAA,CACpD,GACD;AAAA,IACE,CAACf,QAAQK,UAAU,GAAGA;AAAAA,IACtB,CAACL,QAAQM,QAAQ,GAAGA;AAAAA,EAEtBJ,GAAAA,SACF,GACA,GAAIO,QAEJ,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAWT,QAAQmB,mBACtB,UAAA;AAAA,MAAC,oBAAA,OAAA,EACC,WAAWP,GACTD,IAAI;AAAA,QACFS,QAAQd,WAAW,IAAI;AAAA,QACvBS,iBACER,gBAAgB,UACZD,WACEU,MAAMC,OAAOI,YACbL,MAAMC,OAAOK,QACfN,MAAMC,OAAOV,WAAW;AAAA,MAAA,CAC/B,GACDP,QAAQuB,WACV,GAAE;AAAA,MAEH,oBAAA,OAAA,EAAI,WAAWvB,QAAQI,MAAOA,UAAK,MAAA;AAAA,IAAA,GACtC;AAAA,IACCD;AAAAA,EACH,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBox } from \"@core/components/Box\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvAtmosphereColorKeys, HvSemanticColorKeys } from \"@core/types/tokens\";\n\nimport { staticClasses, useClasses } from \"./Card.styles\";\n\nexport { staticClasses as cardClasses };\n\nexport type HvCardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardProps extends HvBaseProps {\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** Whether the card is selectable. */\n  selectable?: boolean;\n  /** Whether the card is currently selected. */\n  selected?: boolean;\n  /** The background color of the card. */\n  bgcolor?:\n    | \"sema0\"\n    | HvSemanticColorKeys\n    | HvAtmosphereColorKeys\n    | \"transparent\";\n  /**\n   *  The border color at the top of the card. Must be one of palette semantic or atmosphere colors.\n   *  To set another color, the borderTop should be override.\n   */\n  statusColor?: \"sema0\" | HvSemanticColorKeys | HvAtmosphereColorKeys;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardClasses;\n}\n\n/**\n * A card is a container for a few short and related pieces of content.\n * It roughly resembles a playing card in size and shape and is intended as a\n * linked short representation of a conceptual unit. For that reason,\n * this pattern must be used as an entry-point for further information.\n */\nexport const HvCard = (props: HvCardProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    icon,\n    selectable = false,\n    selected = false,\n    statusColor = \"sema0\",\n    bgcolor,\n    ...others\n  } = useDefaultProps(\"HvCard\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n\n  return (\n    <HvBox\n      className={cx(\n        \"HvIsCardGridElement\",\n        classes.root,\n        css({\n          backgroundColor: bgcolor && theme.colors[bgcolor],\n        }),\n        {\n          [classes.selectable]: selectable,\n          [classes.selected]: selected,\n        },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.semanticContainer}>\n        <div\n          className={cx(\n            css({\n              height: selected ? 4 : 2,\n              backgroundColor:\n                statusColor === \"sema0\"\n                  ? selected\n                    ? theme.colors.secondary\n                    : theme.colors.atmo4\n                  : theme.colors[statusColor],\n            }),\n            classes.semanticBar\n          )}\n        />\n        <div className={classes.icon}>{icon}</div>\n      </div>\n      {children}\n    </HvBox>\n  );\n};\n"],"names":["HvCard","props","classes","classesProp","className","children","icon","selectable","selected","statusColor","bgcolor","others","useDefaultProps","css","cx","useClasses","root","backgroundColor","theme","colors","semanticContainer","height","secondary","atmo4","semanticBar"],"mappings":";;;;;;AA0CaA,MAAAA,SAASA,CAACC,UAAuB;AACtC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,aAAa;AAAA,IACbC,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,UAAUX,KAAK;AAE7B,QAAA;AAAA,IAAEC;AAAAA,IAASW;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWZ,WAAW;AAEnD,8BACG,OACC,EAAA,WAAWW,GACT,uBACAZ,QAAQc,MACRH,IAAI;AAAA,IACFI,iBAAiBP,WAAWQ,MAAMC,OAAOT,OAAO;AAAA,EAAA,CACjD,GACD;AAAA,IACE,CAACR,QAAQK,UAAU,GAAGA;AAAAA,IACtB,CAACL,QAAQM,QAAQ,GAAGA;AAAAA,EAEtBJ,GAAAA,SACF,GACA,GAAIO,QAEJ,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAWT,QAAQkB,mBACtB,UAAA;AAAA,MAAC,oBAAA,OAAA,EACC,WAAWN,GACTD,IAAI;AAAA,QACFQ,QAAQb,WAAW,IAAI;AAAA,QACvBS,iBACER,gBAAgB,UACZD,WACEU,MAAMC,OAAOG,YACbJ,MAAMC,OAAOI,QACfL,MAAMC,OAAOV,WAAW;AAAA,MAAA,CAC/B,GACDP,QAAQsB,WACV,GAAE;AAAA,MAEH,oBAAA,OAAA,EAAI,WAAWtB,QAAQI,MAAOA,UAAK,MAAA;AAAA,IAAA,GACtC;AAAA,IACCD;AAAAA,EACH,EAAA,CAAA;AAEJ;"}

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

@@ -8,8 +8,8 @@ const {
   root: {
     overflow: "visible",
     position: "relative",
-    outline: theme.card.outline,
-    borderRadius: theme.card.borderRadius,
+    outline: `1px solid ${theme.colors.atmo4}`,
+    borderRadius: `0px 0px ${theme.radii.round} ${theme.radii.round}`,
     "&:focus-visible": {
       ...outlineStyles
     },
@@ -28,7 +28,7 @@ const {
   },
   selectable: {
     "&:hover": {
-      outline: `1px solid ${theme.card.hoverColor}`
+      outline: `1px solid ${theme.colors.primary}`
     }
   },
   semanticContainer: {
@@ -39,8 +39,8 @@ const {
     }
   },
   icon: {
-    top: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,
-    right: `calc(${theme.card.iconMargin} + ${theme.space.xs})`
+    top: theme.space.xs,
+    right: theme.space.xs
   },
   semanticBar: {
     width: "100%",

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

@@ -1 +1 @@
-{"version":3,"file":"Card.styles.js","sources":["../../../../src/components/Card/Card.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCard\", {\n  root: {\n    overflow: \"visible\",\n    position: \"relative\",\n    outline: theme.card.outline,\n    borderRadius: theme.card.borderRadius,\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  },\n  selected: {\n    outline: `1px solid ${theme.colors.secondary}`,\n    \"&:hover\": {\n      outline: `1px solid ${theme.colors.secondary}`,\n    },\n    \"&:focus\": {\n      outline: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  selectable: {\n    \"&:hover\": {\n      outline: `1px solid ${theme.card.hoverColor}`,\n    },\n  },\n  semanticContainer: {\n    position: \"relative\",\n    \"& > *\": {\n      position: \"absolute\",\n      zIndex: 1,\n    },\n  },\n  icon: {\n    top: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,\n    right: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,\n  },\n  semanticBar: {\n    width: \"100%\",\n    top: -1,\n    right: 0,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","overflow","position","outline","theme","card","borderRadius","outlineStyles","selected","colors","secondary","selectable","hoverColor","semanticContainer","zIndex","icon","top","iconMargin","space","xs","right","semanticBar","width"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,SAASC,MAAMC,KAAKF;AAAAA,IACpBG,cAAcF,MAAMC,KAAKC;AAAAA,IACzB,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,IACA,WAAW;AAAA,MACTJ,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACAK,UAAU;AAAA,IACRL,SAAU,aAAYC,MAAMK,OAAOC,SAAU;AAAA,IAC7C,WAAW;AAAA,MACTP,SAAU,aAAYC,MAAMK,OAAOC,SAAU;AAAA,IAC/C;AAAA,IACA,WAAW;AAAA,MACTP,SAAU,aAAYC,MAAMK,OAAOC,SAAU;AAAA,IAC/C;AAAA,EACF;AAAA,EACAC,YAAY;AAAA,IACV,WAAW;AAAA,MACTR,SAAU,aAAYC,MAAMC,KAAKO,UAAW;AAAA,IAC9C;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjBX,UAAU;AAAA,IACV,SAAS;AAAA,MACPA,UAAU;AAAA,MACVY,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJC,KAAM,QAAOZ,MAAMC,KAAKY,UAAW,MAAKb,MAAMc,MAAMC,EAAG;AAAA,IACvDC,OAAQ,QAAOhB,MAAMC,KAAKY,UAAW,MAAKb,MAAMc,MAAMC,EAAG;AAAA,EAC3D;AAAA,EACAE,aAAa;AAAA,IACXC,OAAO;AAAA,IACPN,KAAK;AAAA,IACLI,OAAO;AAAA,EACT;AACF,CAAC;"}
+{"version":3,"file":"Card.styles.js","sources":["../../../../src/components/Card/Card.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCard\", {\n  root: {\n    overflow: \"visible\",\n    position: \"relative\",\n    outline: `1px solid ${theme.colors.atmo4}`,\n    borderRadius: `0px 0px ${theme.radii.round} ${theme.radii.round}`,\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  },\n  selected: {\n    outline: `1px solid ${theme.colors.secondary}`,\n    \"&:hover\": {\n      outline: `1px solid ${theme.colors.secondary}`,\n    },\n    \"&:focus\": {\n      outline: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  selectable: {\n    \"&:hover\": {\n      outline: `1px solid ${theme.colors.primary}`,\n    },\n  },\n  semanticContainer: {\n    position: \"relative\",\n    \"& > *\": {\n      position: \"absolute\",\n      zIndex: 1,\n    },\n  },\n  icon: {\n    top: theme.space.xs,\n    right: theme.space.xs,\n  },\n  semanticBar: {\n    width: \"100%\",\n    top: -1,\n    right: 0,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","overflow","position","outline","theme","colors","atmo4","borderRadius","radii","round","outlineStyles","selected","secondary","selectable","primary","semanticContainer","zIndex","icon","top","space","xs","right","semanticBar","width"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,SAAU,aAAYC,MAAMC,OAAOC,KAAM;AAAA,IACzCC,cAAe,WAAUH,MAAMI,MAAMC,KAAM,IAAGL,MAAMI,MAAMC,KAAM;AAAA,IAChE,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,IACA,WAAW;AAAA,MACTP,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACAQ,UAAU;AAAA,IACRR,SAAU,aAAYC,MAAMC,OAAOO,SAAU;AAAA,IAC7C,WAAW;AAAA,MACTT,SAAU,aAAYC,MAAMC,OAAOO,SAAU;AAAA,IAC/C;AAAA,IACA,WAAW;AAAA,MACTT,SAAU,aAAYC,MAAMC,OAAOO,SAAU;AAAA,IAC/C;AAAA,EACF;AAAA,EACAC,YAAY;AAAA,IACV,WAAW;AAAA,MACTV,SAAU,aAAYC,MAAMC,OAAOS,OAAQ;AAAA,IAC7C;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjBb,UAAU;AAAA,IACV,SAAS;AAAA,MACPA,UAAU;AAAA,MACVc,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJC,KAAKd,MAAMe,MAAMC;AAAAA,IACjBC,OAAOjB,MAAMe,MAAMC;AAAAA,EACrB;AAAA,EACAE,aAAa;AAAA,IACXC,OAAO;AAAA,IACPL,KAAK;AAAA,IACLG,OAAO;AAAA,EACT;AACF,CAAC;"}