@hitachivantara/uikit-react-core 5.24.3 → 5.24.5

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

@@ -1,11 +1,11 @@
 import { useRef } from "react";
-import { clsx } from "clsx";
 import { isDateRangeProp, isSameDay, isSameMonth, dateInProvidedValueRange, checkIfDateIsDisabled } from "../utils.js";
-import calendarCellClasses from "./calendarCellClasses.js";
-import { StyledDateWrapper, StyledCellContainer, StyledCalendarDate } from "./CalendarCell.styles.js";
+import { useClasses } from "./CalendarCell.styles.js";
+import { staticClasses } from "./CalendarCell.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { HvTypography } from "../../Typography/Typography.js";
 const HvCalendarCell = ({
-  classes,
+  classes: classesProp,
   onChange,
   onKeyDown,
   calendarValue,
@@ -19,6 +19,10 @@ const HvCalendarCell = ({
   rangeMode = false,
   ...others
 }) => {
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const buttonEl = useRef(null);
   const startDate = isDateRangeProp(calendarValue) ? calendarValue.startDate : void 0;
   const endDate = isDateRangeProp(calendarValue) ? calendarValue.endDate : void 0;
@@ -45,29 +49,42 @@ const HvCalendarCell = ({
   const handleKeyDown = (event) => {
     onKeyDown == null ? void 0 : onKeyDown(event);
   };
-  const renderDate = () => /* @__PURE__ */ jsx(StyledCellContainer, {
+  const renderDate = () => /* @__PURE__ */ jsx("button", {
     ref: buttonEl,
     type: "button",
-    className: clsx(calendarCellClasses.cellContainer, classes == null ? void 0 : classes.cellContainer, inMonth && clsx(calendarCellClasses.focusSelection, classes == null ? void 0 : classes.focusSelection)),
+    className: cx(classes.cellContainer, {
+      [classes.focusSelection]: inMonth
+    }),
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     disabled: isDateDisabled || !inMonth,
     "data-in-month": inMonth,
     ...others,
-    children: /* @__PURE__ */ jsx(StyledCalendarDate, {
+    children: /* @__PURE__ */ jsx(HvTypography, {
       variant: isCellToday ? "label" : "body",
-      className: clsx(calendarCellClasses.calendarDate, classes == null ? void 0 : classes.calendarDate, inMonth && isCellSelected && clsx(calendarCellClasses.calendarDateSelected, classes == null ? void 0 : classes.calendarDateSelected), !inMonth && clsx(calendarCellClasses.calendarDateNotInMonth, classes == null ? void 0 : classes.calendarDateNotInMonth), inMonth && rangeMode && isDateInSelectionRange && clsx(calendarCellClasses.calendarDateInSelectionRange, classes == null ? void 0 : classes.calendarDateInSelectionRange), isDateDisabled && clsx(calendarCellClasses.calendarDateDisabled, classes == null ? void 0 : classes.calendarDateDisabled), inMonth && (startBookend && rangeMode || isCellStartingDate && isDateSelectionMode) && clsx(calendarCellClasses.startBookend, classes == null ? void 0 : classes.startBookend), inMonth && endBookend && rangeMode && clsx(calendarCellClasses.endBookend, classes == null ? void 0 : classes.endBookend)),
+      className: cx(classes.calendarDate, {
+        [classes.calendarDateSelected]: inMonth && isCellSelected,
+        [classes.calendarDateNotInMonth]: !inMonth,
+        [classes.calendarDateInSelectionRange]: inMonth && rangeMode && isDateInSelectionRange,
+        [classes.calendarDateDisabled]: isDateDisabled,
+        [classes.startBookend]: inMonth && (startBookend && rangeMode || isCellStartingDate && isDateSelectionMode),
+        [classes.endBookend]: inMonth && endBookend && rangeMode
+      }),
       children: value && value.getDate()
     })
   });
-  return /* @__PURE__ */ jsx(StyledDateWrapper, {
-    className: clsx(calendarCellClasses.dateWrapper, classes == null ? void 0 : classes.dateWrapper, inMonth && rangeMode && isSelecting && clsx(calendarCellClasses.cellsInRange, classes == null ? void 0 : classes.cellsInRange), rangeMode && !isSelecting && clsx(calendarCellClasses.cellsOutsideRange, classes == null ? void 0 : classes.cellsOutsideRange)),
+  return /* @__PURE__ */ jsx("div", {
+    className: cx(classes.dateWrapper, {
+      [classes.cellsInRange]: inMonth && rangeMode && isSelecting,
+      [classes.cellsOutsideRange]: rangeMode && !isSelecting
+    }),
     "data-calendar-cell": "calendarCell",
     children: renderDate()
   });
 };
 export {
   HvCalendarCell,
+  staticClasses as calendarCellClasses,
   HvCalendarCell as default
 };
 //# sourceMappingURL=CalendarCell.js.map

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 { clsx } from \"clsx\";\n\nimport {\n  isSameDay,\n  isSameMonth,\n  dateInProvidedValueRange,\n  checkIfDateIsDisabled,\n  isDateRangeProp,\n} from \"../utils\";\nimport { DateRangeProp } from \"../types\";\nimport calendarCellClasses, {\n  HvCalendarCellClasses,\n} from \"./calendarCellClasses\";\nimport {\n  StyledCalendarDate,\n  StyledCellContainer,\n  StyledDateWrapper,\n} from \"./CalendarCell.styles\";\nimport CalendarModel from \"../model\";\n\nexport const HvCalendarCell = ({\n  classes,\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 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    <StyledCellContainer\n      ref={buttonEl}\n      type=\"button\"\n      className={clsx(\n        calendarCellClasses.cellContainer,\n        classes?.cellContainer,\n        inMonth &&\n          clsx(calendarCellClasses.focusSelection, classes?.focusSelection)\n      )}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      disabled={isDateDisabled || !inMonth}\n      data-in-month={inMonth}\n      {...others}\n    >\n      <StyledCalendarDate\n        variant={isCellToday ? \"label\" : \"body\"}\n        className={clsx(\n          calendarCellClasses.calendarDate,\n          classes?.calendarDate,\n          inMonth &&\n            isCellSelected &&\n            clsx(\n              calendarCellClasses.calendarDateSelected,\n              classes?.calendarDateSelected\n            ),\n          !inMonth &&\n            clsx(\n              calendarCellClasses.calendarDateNotInMonth,\n              classes?.calendarDateNotInMonth\n            ),\n          inMonth &&\n            rangeMode &&\n            isDateInSelectionRange &&\n            clsx(\n              calendarCellClasses.calendarDateInSelectionRange,\n              classes?.calendarDateInSelectionRange\n            ),\n          isDateDisabled &&\n            clsx(\n              calendarCellClasses.calendarDateDisabled,\n              classes?.calendarDateDisabled\n            ),\n          inMonth &&\n            ((startBookend && rangeMode) ||\n              (isCellStartingDate && isDateSelectionMode)) &&\n            clsx(calendarCellClasses.startBookend, classes?.startBookend),\n          inMonth &&\n            endBookend &&\n            rangeMode &&\n            clsx(calendarCellClasses.endBookend, classes?.endBookend)\n        )}\n      >\n        {value && value.getDate()}\n      </StyledCalendarDate>\n    </StyledCellContainer>\n  );\n\n  return (\n    <StyledDateWrapper\n      className={clsx(\n        calendarCellClasses.dateWrapper,\n        classes?.dateWrapper,\n        inMonth &&\n          rangeMode &&\n          isSelecting &&\n          clsx(calendarCellClasses.cellsInRange, classes?.cellsInRange),\n        rangeMode &&\n          !isSelecting &&\n          clsx(\n            calendarCellClasses.cellsOutsideRange,\n            classes?.cellsOutsideRange\n          )\n      )}\n      data-calendar-cell=\"calendarCell\"\n    >\n      {renderDate()}\n    </StyledDateWrapper>\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","onChange","onKeyDown","calendarValue","firstDayOfCurrentMonth","value","isDateSelectionMode","today","locale","minimumDate","maximumDate","rangeMode","others","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","_jsx","StyledCellContainer","ref","type","className","clsx","calendarCellClasses","cellContainer","focusSelection","onClick","disabled","children","StyledCalendarDate","variant","calendarDate","calendarDateSelected","calendarDateNotInMonth","calendarDateInSelectionRange","calendarDateDisabled","getDate","StyledDateWrapper","dateWrapper","cellsInRange","cellsOutsideRange"],"mappings":"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"}
+{"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","_jsx","ref","type","className","cellContainer","focusSelection","onClick","disabled","children","HvTypography","variant","calendarDate","calendarDateSelected","calendarDateNotInMonth","calendarDateInSelectionRange","calendarDateDisabled","getDate","dateWrapper","cellsInRange","cellsOutsideRange"],"mappings":"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"}

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

@@ -1,24 +1,22 @@
-import _styled from "@emotion/styled/base";
 import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../../../utils/focusUtils.js";
-import calendarCellClasses from "./calendarCellClasses.js";
-import { HvTypography } from "../../Typography/Typography.js";
+import { createClasses } from "../../../utils/classes.js";
 const hover = {
   backgroundColor: theme.calendar.cellHoverColor,
   cursor: "pointer"
 };
-const StyledCellContainer = /* @__PURE__ */ _styled("button", process.env.NODE_ENV === "production" ? {
-  target: "eulxq3n2"
-} : {
-  target: "eulxq3n2",
-  label: "StyledCellContainer"
-})({
-  cursor: "pointer",
-  border: 0,
-  padding: 0,
-  margin: 0,
-  backgroundColor: "transparent",
-  [`&.${calendarCellClasses.focusSelection}`]: {
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvCalendarCell", {
+  cellContainer: {
+    cursor: "pointer",
+    border: 0,
+    padding: 0,
+    margin: 0,
+    backgroundColor: "transparent"
+  },
+  focusSelection: {
     "&:hover": {
       ...hover
     },
@@ -29,67 +27,56 @@ const StyledCellContainer = /* @__PURE__ */ _styled("button", process.env.NODE_E
       ...hover,
       ...outlineStyles
     }
-  }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvU2luZ2xlQ2FsZW5kYXIvQ2FsZW5kYXJDZWxsLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBY21DIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvU2luZ2xlQ2FsZW5kYXIvQ2FsZW5kYXJDZWxsLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBIdlR5cG9ncmFwaHkgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UeXBvZ3JhcGh5XCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2ZvY3VzVXRpbHNcIjtcblxuaW1wb3J0IGNhbGVuZGFyQ2VsbENsYXNzZXMgZnJvbSBcIi4vY2FsZW5kYXJDZWxsQ2xhc3Nlc1wiO1xuXG5jb25zdCBob3ZlciA9IHtcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jYWxlbmRhci5jZWxsSG92ZXJDb2xvcixcbiAgY3Vyc29yOiBcInBvaW50ZXJcIixcbn07XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDZWxsQ29udGFpbmVyID0gc3R5bGVkKFwiYnV0dG9uXCIpKHtcbiAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgYm9yZGVyOiAwLFxuICBwYWRkaW5nOiAwLFxuICBtYXJnaW46IDAsXG4gIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICBbYCYuJHtjYWxlbmRhckNlbGxDbGFzc2VzLmZvY3VzU2VsZWN0aW9ufWBdOiB7XG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgIC4uLmhvdmVyLFxuICAgIH0sXG4gICAgXCImOmZvY3VzXCI6IHtcbiAgICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICAgIH0sXG4gICAgXCImOmZvY3VzLXZpc2libGVcIjoge1xuICAgICAgLi4uaG92ZXIsXG4gICAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICAgIH0sXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENhbGVuZGFyRGF0ZSA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcImNlbnRlclwiLFxuICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICB0ZXh0QWxpZ246IFwiY2VudGVyXCIsXG4gIGhlaWdodDogXCI0MHB4XCIsXG4gIHdpZHRoOiBcIjQwcHhcIixcbiAgW2AmLiR7Y2FsZW5kYXJDZWxsQ2xhc3Nlcy5jYWxlbmRhckRhdGVTZWxlY3RlZH1gXToge1xuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5LFxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICAuLi5ob3ZlcixcbiAgICB9LFxuICB9LFxuICBbYCYuJHtjYWxlbmRhckNlbGxDbGFzc2VzLmNhbGVuZGFyRGF0ZU5vdEluTW9udGh9YF06IHtcbiAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeV82MCxcbiAgICBjdXJzb3I6IFwibm90LWFsbG93ZWRcIixcbiAgfSxcbiAgW2AmLiR7Y2FsZW5kYXJDZWxsQ2xhc3Nlcy5jYWxlbmRhckRhdGVJblNlbGVjdGlvblJhbmdlfWBdOiB7XG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gIH0sXG4gIFtgJi4ke2NhbGVuZGFyQ2VsbENsYXNzZXMuY2FsZW5kYXJEYXRlRGlzYWJsZWR9YF06IHtcbiAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeV82MCxcbiAgICBjdXJzb3I6IFwibm8tZHJvcFwiLFxuICB9LFxuICBbYCYuJHtjYWxlbmRhckNlbGxDbGFzc2VzLnN0YXJ0Qm9va2VuZH1gXToge1xuICAgIGJvcmRlckxlZnQ6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5fWAsXG4gIH0sXG4gIFtgJi4ke2NhbGVuZGFyQ2VsbENsYXNzZXMuZW5kQm9va2VuZH1gXToge1xuICAgIGJvcmRlclJpZ2h0OiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeX1gLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWREYXRlV3JhcHBlciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHdpZHRoOiBcIjQwcHhcIixcbiAgaGVpZ2h0OiBcIjQwcHhcIixcbiAgW2AmIC4ke2NhbGVuZGFyQ2VsbENsYXNzZXMuY2VsbHNJblJhbmdlfWBdOiB7XG4gICAgXCImOmZvY3VzXCI6IHtcbiAgICAgIG91dHNpZGU6IFwibm9uZVwiLFxuICAgIH0sXG4gIH0sXG4gIFtgJiAuJHtjYWxlbmRhckNlbGxDbGFzc2VzLmNlbGxzT3V0c2lkZVJhbmdlfWBdOiB7XG4gICAgXCImOmZvY3VzXCI6IHtcbiAgICAgIG91dHNpZGU6IFwibm9uZVwiLFxuICAgIH0sXG4gIH0sXG59KTtcbiJdfQ== */");
-const StyledCalendarDate = /* @__PURE__ */ _styled(HvTypography, process.env.NODE_ENV === "production" ? {
-  target: "eulxq3n1"
-} : {
-  target: "eulxq3n1",
-  label: "StyledCalendarDate"
-})({
-  display: "flex",
-  justifyContent: "center",
-  flexDirection: "column",
-  textAlign: "center",
-  height: "40px",
-  width: "40px",
-  [`&.${calendarCellClasses.calendarDateSelected}`]: {
+  },
+  calendarDate: {
+    display: "flex",
+    justifyContent: "center",
+    flexDirection: "column",
+    textAlign: "center",
+    height: "40px",
+    width: "40px"
+  },
+  calendarDateSelected: {
     backgroundColor: theme.colors.atmo3,
     color: theme.colors.secondary,
     "&:hover": {
       ...hover
     }
   },
-  [`&.${calendarCellClasses.calendarDateNotInMonth}`]: {
+  calendarDateNotInMonth: {
     color: theme.colors.secondary_60,
     cursor: "not-allowed"
   },
-  [`&.${calendarCellClasses.calendarDateInSelectionRange}`]: {
+  calendarDateInSelectionRange: {
     backgroundColor: theme.colors.atmo3
   },
-  [`&.${calendarCellClasses.calendarDateDisabled}`]: {
+  calendarDateDisabled: {
     color: theme.colors.secondary_60,
     cursor: "no-drop"
   },
-  [`&.${calendarCellClasses.startBookend}`]: {
+  startBookend: {
     borderLeft: `1px solid ${theme.colors.secondary}`
   },
-  [`&.${calendarCellClasses.endBookend}`]: {
+  endBookend: {
     borderRight: `1px solid ${theme.colors.secondary}`
-  }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvU2luZ2xlQ2FsZW5kYXIvQ2FsZW5kYXJDZWxsLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0NrQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0NhbGVuZGFyL1NpbmdsZUNhbGVuZGFyL0NhbGVuZGFyQ2VsbC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHsgSHZUeXBvZ3JhcGh5IH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvVHlwb2dyYXBoeVwiO1xuaW1wb3J0IHsgb3V0bGluZVN0eWxlcyB9IGZyb20gXCJAY29yZS91dGlscy9mb2N1c1V0aWxzXCI7XG5cbmltcG9ydCBjYWxlbmRhckNlbGxDbGFzc2VzIGZyb20gXCIuL2NhbGVuZGFyQ2VsbENsYXNzZXNcIjtcblxuY29uc3QgaG92ZXIgPSB7XG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY2FsZW5kYXIuY2VsbEhvdmVyQ29sb3IsXG4gIGN1cnNvcjogXCJwb2ludGVyXCIsXG59O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ2VsbENvbnRhaW5lciA9IHN0eWxlZChcImJ1dHRvblwiKSh7XG4gIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gIGJvcmRlcjogMCxcbiAgcGFkZGluZzogMCxcbiAgbWFyZ2luOiAwLFxuICBiYWNrZ3JvdW5kQ29sb3I6IFwidHJhbnNwYXJlbnRcIixcbiAgW2AmLiR7Y2FsZW5kYXJDZWxsQ2xhc3Nlcy5mb2N1c1NlbGVjdGlvbn1gXToge1xuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICAuLi5ob3ZlcixcbiAgICB9LFxuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICB9LFxuICAgIFwiJjpmb2N1cy12aXNpYmxlXCI6IHtcbiAgICAgIC4uLmhvdmVyLFxuICAgICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgICB9LFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDYWxlbmRhckRhdGUgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgZmxleERpcmVjdGlvbjogXCJjb2x1bW5cIixcbiAgdGV4dEFsaWduOiBcImNlbnRlclwiLFxuICBoZWlnaHQ6IFwiNDBweFwiLFxuICB3aWR0aDogXCI0MHB4XCIsXG4gIFtgJi4ke2NhbGVuZGFyQ2VsbENsYXNzZXMuY2FsZW5kYXJEYXRlU2VsZWN0ZWR9YF06IHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeSxcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgLi4uaG92ZXIsXG4gICAgfSxcbiAgfSxcbiAgW2AmLiR7Y2FsZW5kYXJDZWxsQ2xhc3Nlcy5jYWxlbmRhckRhdGVOb3RJbk1vbnRofWBdOiB7XG4gICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnlfNjAsXG4gICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gIH0sXG4gIFtgJi4ke2NhbGVuZGFyQ2VsbENsYXNzZXMuY2FsZW5kYXJEYXRlSW5TZWxlY3Rpb25SYW5nZX1gXToge1xuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICB9LFxuICBbYCYuJHtjYWxlbmRhckNlbGxDbGFzc2VzLmNhbGVuZGFyRGF0ZURpc2FibGVkfWBdOiB7XG4gICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnlfNjAsXG4gICAgY3Vyc29yOiBcIm5vLWRyb3BcIixcbiAgfSxcbiAgW2AmLiR7Y2FsZW5kYXJDZWxsQ2xhc3Nlcy5zdGFydEJvb2tlbmR9YF06IHtcbiAgICBib3JkZXJMZWZ0OiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeX1gLFxuICB9LFxuICBbYCYuJHtjYWxlbmRhckNlbGxDbGFzc2VzLmVuZEJvb2tlbmR9YF06IHtcbiAgICBib3JkZXJSaWdodDogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnl9YCxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRGF0ZVdyYXBwZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICB3aWR0aDogXCI0MHB4XCIsXG4gIGhlaWdodDogXCI0MHB4XCIsXG4gIFtgJiAuJHtjYWxlbmRhckNlbGxDbGFzc2VzLmNlbGxzSW5SYW5nZX1gXToge1xuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRzaWRlOiBcIm5vbmVcIixcbiAgICB9LFxuICB9LFxuICBbYCYgLiR7Y2FsZW5kYXJDZWxsQ2xhc3Nlcy5jZWxsc091dHNpZGVSYW5nZX1gXToge1xuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRzaWRlOiBcIm5vbmVcIixcbiAgICB9LFxuICB9LFxufSk7XG4iXX0= */");
-const StyledDateWrapper = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "eulxq3n0"
-} : {
-  target: "eulxq3n0",
-  label: "StyledDateWrapper"
-})({
-  width: "40px",
-  height: "40px",
-  [`& .${calendarCellClasses.cellsInRange}`]: {
+  },
+  dateWrapper: {
+    width: "40px",
+    height: "40px"
+  },
+  cellsInRange: {
     "&:focus": {
       outside: "none"
     }
   },
-  [`& .${calendarCellClasses.cellsOutsideRange}`]: {
+  cellsOutsideRange: {
     "&:focus": {
       outside: "none"
     }
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvU2luZ2xlQ2FsZW5kYXIvQ2FsZW5kYXJDZWxsLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUVpQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0NhbGVuZGFyL1NpbmdsZUNhbGVuZGFyL0NhbGVuZGFyQ2VsbC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHsgSHZUeXBvZ3JhcGh5IH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvVHlwb2dyYXBoeVwiO1xuaW1wb3J0IHsgb3V0bGluZVN0eWxlcyB9IGZyb20gXCJAY29yZS91dGlscy9mb2N1c1V0aWxzXCI7XG5cbmltcG9ydCBjYWxlbmRhckNlbGxDbGFzc2VzIGZyb20gXCIuL2NhbGVuZGFyQ2VsbENsYXNzZXNcIjtcblxuY29uc3QgaG92ZXIgPSB7XG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY2FsZW5kYXIuY2VsbEhvdmVyQ29sb3IsXG4gIGN1cnNvcjogXCJwb2ludGVyXCIsXG59O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ2VsbENvbnRhaW5lciA9IHN0eWxlZChcImJ1dHRvblwiKSh7XG4gIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gIGJvcmRlcjogMCxcbiAgcGFkZGluZzogMCxcbiAgbWFyZ2luOiAwLFxuICBiYWNrZ3JvdW5kQ29sb3I6IFwidHJhbnNwYXJlbnRcIixcbiAgW2AmLiR7Y2FsZW5kYXJDZWxsQ2xhc3Nlcy5mb2N1c1NlbGVjdGlvbn1gXToge1xuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICAuLi5ob3ZlcixcbiAgICB9LFxuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICB9LFxuICAgIFwiJjpmb2N1cy12aXNpYmxlXCI6IHtcbiAgICAgIC4uLmhvdmVyLFxuICAgICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgICB9LFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDYWxlbmRhckRhdGUgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgZmxleERpcmVjdGlvbjogXCJjb2x1bW5cIixcbiAgdGV4dEFsaWduOiBcImNlbnRlclwiLFxuICBoZWlnaHQ6IFwiNDBweFwiLFxuICB3aWR0aDogXCI0MHB4XCIsXG4gIFtgJi4ke2NhbGVuZGFyQ2VsbENsYXNzZXMuY2FsZW5kYXJEYXRlU2VsZWN0ZWR9YF06IHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeSxcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgLi4uaG92ZXIsXG4gICAgfSxcbiAgfSxcbiAgW2AmLiR7Y2FsZW5kYXJDZWxsQ2xhc3Nlcy5jYWxlbmRhckRhdGVOb3RJbk1vbnRofWBdOiB7XG4gICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnlfNjAsXG4gICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gIH0sXG4gIFtgJi4ke2NhbGVuZGFyQ2VsbENsYXNzZXMuY2FsZW5kYXJEYXRlSW5TZWxlY3Rpb25SYW5nZX1gXToge1xuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICB9LFxuICBbYCYuJHtjYWxlbmRhckNlbGxDbGFzc2VzLmNhbGVuZGFyRGF0ZURpc2FibGVkfWBdOiB7XG4gICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnlfNjAsXG4gICAgY3Vyc29yOiBcIm5vLWRyb3BcIixcbiAgfSxcbiAgW2AmLiR7Y2FsZW5kYXJDZWxsQ2xhc3Nlcy5zdGFydEJvb2tlbmR9YF06IHtcbiAgICBib3JkZXJMZWZ0OiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeX1gLFxuICB9LFxuICBbYCYuJHtjYWxlbmRhckNlbGxDbGFzc2VzLmVuZEJvb2tlbmR9YF06IHtcbiAgICBib3JkZXJSaWdodDogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnl9YCxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRGF0ZVdyYXBwZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICB3aWR0aDogXCI0MHB4XCIsXG4gIGhlaWdodDogXCI0MHB4XCIsXG4gIFtgJiAuJHtjYWxlbmRhckNlbGxDbGFzc2VzLmNlbGxzSW5SYW5nZX1gXToge1xuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRzaWRlOiBcIm5vbmVcIixcbiAgICB9LFxuICB9LFxuICBbYCYgLiR7Y2FsZW5kYXJDZWxsQ2xhc3Nlcy5jZWxsc091dHNpZGVSYW5nZX1gXToge1xuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRzaWRlOiBcIm5vbmVcIixcbiAgICB9LFxuICB9LFxufSk7XG4iXX0= */");
+});
 export {
-  StyledCalendarDate,
-  StyledCellContainer,
-  StyledDateWrapper
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=CalendarCell.styles.js.map

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 styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nimport calendarCellClasses from \"./calendarCellClasses\";\n\nconst hover = {\n  backgroundColor: theme.calendar.cellHoverColor,\n  cursor: \"pointer\",\n};\n\nexport const StyledCellContainer = styled(\"button\")({\n  cursor: \"pointer\",\n  border: 0,\n  padding: 0,\n  margin: 0,\n  backgroundColor: \"transparent\",\n  [`&.${calendarCellClasses.focusSelection}`]: {\n    \"&:hover\": {\n      ...hover,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...hover,\n      ...outlineStyles,\n    },\n  },\n});\n\nexport const StyledCalendarDate = styled(HvTypography)({\n  display: \"flex\",\n  justifyContent: \"center\",\n  flexDirection: \"column\",\n  textAlign: \"center\",\n  height: \"40px\",\n  width: \"40px\",\n  [`&.${calendarCellClasses.calendarDateSelected}`]: {\n    backgroundColor: theme.colors.atmo3,\n    color: theme.colors.secondary,\n    \"&:hover\": {\n      ...hover,\n    },\n  },\n  [`&.${calendarCellClasses.calendarDateNotInMonth}`]: {\n    color: theme.colors.secondary_60,\n    cursor: \"not-allowed\",\n  },\n  [`&.${calendarCellClasses.calendarDateInSelectionRange}`]: {\n    backgroundColor: theme.colors.atmo3,\n  },\n  [`&.${calendarCellClasses.calendarDateDisabled}`]: {\n    color: theme.colors.secondary_60,\n    cursor: \"no-drop\",\n  },\n  [`&.${calendarCellClasses.startBookend}`]: {\n    borderLeft: `1px solid ${theme.colors.secondary}`,\n  },\n  [`&.${calendarCellClasses.endBookend}`]: {\n    borderRight: `1px solid ${theme.colors.secondary}`,\n  },\n});\n\nexport const StyledDateWrapper = styled(\"div\")({\n  width: \"40px\",\n  height: \"40px\",\n  [`& .${calendarCellClasses.cellsInRange}`]: {\n    \"&:focus\": {\n      outside: \"none\",\n    },\n  },\n  [`& .${calendarCellClasses.cellsOutsideRange}`]: {\n    \"&:focus\": {\n      outside: \"none\",\n    },\n  },\n});\n"],"names":["hover","backgroundColor","theme","calendar","cellHoverColor","cursor","StyledCellContainer","process","env","NODE_ENV","target","label","border","padding","margin","calendarCellClasses","focusSelection","outline","outlineStyles","StyledCalendarDate","HvTypography","display","justifyContent","flexDirection","textAlign","height","width","calendarDateSelected","colors","atmo3","color","secondary","calendarDateNotInMonth","secondary_60","calendarDateInSelectionRange","calendarDateDisabled","startBookend","borderLeft","endBookend","borderRight","StyledDateWrapper","cellsInRange","outside","cellsOutsideRange"],"mappings":";;;;;AASA,MAAMA,QAAQ;AAAA,EACZC,iBAAiBC,MAAMC,SAASC;AAAAA,EAChCC,QAAQ;AACV;AAEO,MAAMC,sBAA6B,wBAAA,UAAQC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAClDN,QAAQ;AAAA,EACRO,QAAQ;AAAA,EACRC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRb,iBAAiB;AAAA,EACjB,CAAE,KAAIc,oBAAoBC,gBAAgB,GAAG;AAAA,IAC3C,WAAW;AAAA,MACT,GAAGhB;AAAAA,IACL;AAAA,IACA,WAAW;AAAA,MACTiB,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGjB;AAAAA,MACH,GAAGkB;AAAAA,IACL;AAAA,EACF;AACF,GAACX,QAAAC,IAAAC,aAAC,eAAA,KAAA,yvGAAA;AAEK,MAAMU,qBAA4BC,wBAAAA,cAAYb,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACrDU,SAAS;AAAA,EACTC,gBAAgB;AAAA,EAChBC,eAAe;AAAA,EACfC,WAAW;AAAA,EACXC,QAAQ;AAAA,EACRC,OAAO;AAAA,EACP,CAAE,KAAIX,oBAAoBY,sBAAsB,GAAG;AAAA,IACjD1B,iBAAiBC,MAAM0B,OAAOC;AAAAA,IAC9BC,OAAO5B,MAAM0B,OAAOG;AAAAA,IACpB,WAAW;AAAA,MACT,GAAG/B;AAAAA,IACL;AAAA,EACF;AAAA,EACA,CAAE,KAAIe,oBAAoBiB,wBAAwB,GAAG;AAAA,IACnDF,OAAO5B,MAAM0B,OAAOK;AAAAA,IACpB5B,QAAQ;AAAA,EACV;AAAA,EACA,CAAE,KAAIU,oBAAoBmB,8BAA8B,GAAG;AAAA,IACzDjC,iBAAiBC,MAAM0B,OAAOC;AAAAA,EAChC;AAAA,EACA,CAAE,KAAId,oBAAoBoB,sBAAsB,GAAG;AAAA,IACjDL,OAAO5B,MAAM0B,OAAOK;AAAAA,IACpB5B,QAAQ;AAAA,EACV;AAAA,EACA,CAAE,KAAIU,oBAAoBqB,cAAc,GAAG;AAAA,IACzCC,YAAa,aAAYnC,MAAM0B,OAAOG;AAAAA,EACxC;AAAA,EACA,CAAE,KAAIhB,oBAAoBuB,YAAY,GAAG;AAAA,IACvCC,aAAc,aAAYrC,MAAM0B,OAAOG;AAAAA,EACzC;AACF,GAACxB,QAAAC,IAAAC,aAAC,eAAA,KAAA,yvGAAA;AAEK,MAAM+B,oBAA2B,wBAAA,OAAKjC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAC7Ce,OAAO;AAAA,EACPD,QAAQ;AAAA,EACR,CAAE,MAAKV,oBAAoB0B,cAAc,GAAG;AAAA,IAC1C,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,CAAE,MAAK3B,oBAAoB4B,mBAAmB,GAAG;AAAA,IAC/C,WAAW;AAAA,MACTD,SAAS;AAAA,IACX;AAAA,EACF;AACF,GAACnC,QAAAC,IAAAC,aAAC,eAAA,KAAA,yvGAAA;"}
+{"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;AAAAA,EACxC;AAAA,EACAO,YAAY;AAAA,IACVC,aAAc,aAAYjC,MAAMsB,OAAOG;AAAAA,EACzC;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;"}

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

@@ -1,20 +1,19 @@
 import { useState, useMemo } from "react";
-import { clsx } from "clsx";
 import isNil from "lodash/isNil";
 import { isKey } from "../../../utils/keyboardUtils.js";
 import { setId } from "../../../utils/setId.js";
 import { isDate, getWeekdayNamesList, isRange } from "../utils.js";
 import { generateCalendarModel } from "../model.js";
-import { StyledCalendarContainer, StyledCalendarWrapper, StyledCalendarGrid } from "./SingleCalendar.styles.js";
-import singleCalendarClasses from "./singleCalendarClasses.js";
 import { HvCalendarCell } from "./CalendarCell.js";
 import { HvCalendarHeader } from "../CalendarHeader/CalendarHeader.js";
+import { useClasses } from "./SingleCalendar.styles.js";
+import { staticClasses } from "./SingleCalendar.styles.js";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { HvComposedNavigation } from "../CalendarNavigation/ComposedNavigation/ComposedNavigation.js";
 import { HvCalendarWeekLabel } from "../CalendarWeekLabels/CalendarWeekLabels.js";
 import { HvMonthSelector } from "../CalendarNavigation/MonthSelector/MonthSelector.js";
 const HvSingleCalendar = ({
-  classes,
+  classes: classesProp,
   className,
   id,
   locale = "en-US",
@@ -33,6 +32,10 @@ const HvSingleCalendar = ({
   ...others
 }) => {
   var _a, _b;
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const today = /* @__PURE__ */ new Date();
   const localValue = isNil(value) ? today : value;
   const [calViewMode, setCalViewMode] = useState("calendar");
@@ -65,7 +68,7 @@ const HvSingleCalendar = ({
     var _a2;
     const el = document == null ? void 0 : document.activeElement;
     const parent = (_a2 = el == null ? void 0 : el.parentElement) == null ? void 0 : _a2.parentElement;
-    const siblings = parent != null ? Array.from(parent.getElementsByClassName(singleCalendarClasses.cellContainer)) : [];
+    const siblings = parent != null ? Array.from(parent.getElementsByClassName(classes.cellContainer)) : [];
     const elIndex = el ? siblings.indexOf(el) : 0;
     if (isKey(event, "Enter")) {
       el.focus();
@@ -97,12 +100,12 @@ const HvSingleCalendar = ({
       minimumDate
     }, currentDate);
   };
-  return /* @__PURE__ */ jsx(StyledCalendarContainer, {
-    className: clsx(className, singleCalendarClasses.calendarContainer, classes == null ? void 0 : classes.calendarContainer),
+  return /* @__PURE__ */ jsx("div", {
+    className: cx(classes.calendarContainer, className),
     ...others,
-    children: /* @__PURE__ */ jsxs(StyledCalendarWrapper, {
+    children: /* @__PURE__ */ jsxs("div", {
       id,
-      className: clsx(singleCalendarClasses.calendarWrapper, classes == null ? void 0 : classes.calendarWrapper),
+      className: classes.calendarWrapper,
       children: [/* @__PURE__ */ jsx(HvCalendarHeader, {
         id: setId(id, "header"),
         locale,
@@ -118,8 +121,8 @@ const HvSingleCalendar = ({
           onViewModeChange: setCalViewMode,
           visibleYear: visibleYear || today.getFullYear(),
           visibleMonth: visibleMonth || today.getMonth() + 1
-        }), /* @__PURE__ */ jsxs(StyledCalendarGrid, {
-          className: clsx(singleCalendarClasses.calendarGrid, classes == null ? void 0 : classes.calendarGrid),
+        }), /* @__PURE__ */ jsxs("div", {
+          className: classes.calendarGrid,
           "aria-controls": (_b = (_a = HvCalendarHeader) == null ? void 0 : _a[0]) == null ? void 0 : _b.id,
           children: [/* @__PURE__ */ jsx(HvCalendarWeekLabel, {
             labels: listWeekdayNames
@@ -137,6 +140,7 @@ const HvSingleCalendar = ({
   });
 };
 export {
-  HvSingleCalendar
+  HvSingleCalendar,
+  staticClasses as singleCalendarClasses
 };
 //# sourceMappingURL=SingleCalendar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SingleCalendar.js","sources":["../../../../../src/components/Calendar/SingleCalendar/SingleCalendar.tsx"],"sourcesContent":["import { useState, useMemo } from \"react\";\n\nimport { clsx } from \"clsx\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { ViewMode } from \"../enums\";\nimport { isRange, isDate, getWeekdayNamesList } from \"../utils\";\nimport { generateCalendarModel } from \"../model\";\nimport { HvComposedNavigation, HvMonthSelector } from \"../CalendarNavigation\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"../types\";\nimport {\n  StyledCalendarContainer,\n  StyledCalendarGrid,\n  StyledCalendarWrapper,\n} from \"./SingleCalendar.styles\";\nimport singleCalendarClasses, {\n  HvSingleCalendarClasses,\n} from \"./singleCalendarClasses\";\nimport { HvCalendarCell } from \"./CalendarCell\";\nimport { HvCalendarWeekLabel } from \"../CalendarWeekLabels\";\nimport { HvCalendarHeader } from \"../CalendarHeader/CalendarHeader\";\n\nexport const HvSingleCalendar = ({\n  classes,\n  className,\n  id,\n  locale = \"en-US\",\n  value,\n  visibleMonth,\n  visibleYear,\n  minimumDate,\n  maximumDate,\n  onChange,\n  onInputChange,\n  onVisibleDateChange,\n  showEndDate,\n  showDayOfWeek,\n  invalidDateLabel,\n  children,\n  ...others\n}: HvSingleCalendarProps) => {\n  // TODO: refactor this out\n  // const { HvCalendarHeader } = useContext(HvFormElementDescriptorsContext);\n\n  const today = new Date();\n  const localValue = isNil(value) ? today : value;\n\n  const [calViewMode, setCalViewMode] = useState<ViewMode>(\"calendar\");\n\n  const rangeMode = isRange(localValue);\n  const isDateSelectionMode = rangeMode && !isDate(localValue.endDate);\n  const calModel = rangeMode\n    ? generateCalendarModel(localValue.startDate, visibleMonth, visibleYear)\n    : generateCalendarModel(localValue, visibleMonth, visibleYear);\n  const firstDayOfCurrentMonth = new Date(calModel.year, calModel.month - 1, 1);\n  const firstDayOfCurrentMonthTime = firstDayOfCurrentMonth.getTime();\n\n  const listWeekdayNames = useMemo(\n    () => getWeekdayNamesList(locale, \"narrow\"),\n    [locale]\n  );\n\n  const handleChange = (event, date: Date | DateRangeProp) => {\n    event?.preventDefault();\n    onChange?.(event, date);\n  };\n\n  const handleInputChange = (event, date) => {\n    event?.preventDefault();\n    onInputChange?.(event, date);\n  };\n\n  const getNavChild = (event: KeyboardEvent, siblings, i: number) => {\n    if (isKey(event, \"ArrowLeft\")) return siblings[i - 1];\n    if (isKey(event, \"ArrowRight\")) return siblings[i + 1];\n    if (isKey(event, \"ArrowUp\")) return siblings[i - 7];\n    if (isKey(event, \"ArrowDown\")) return siblings[i + 7];\n    return undefined;\n  };\n\n  const handleKeyDown = (event) => {\n    // This code is very brittle and should be managed with the focus wrapper\n    const el = document?.activeElement;\n    const parent = el?.parentElement?.parentElement;\n    const siblings =\n      parent != null\n        ? Array.from(\n            parent.getElementsByClassName(\n              singleCalendarClasses.cellContainer as string\n            )\n          )\n        : [];\n    const elIndex = el ? siblings.indexOf(el) : 0;\n\n    if (isKey(event, \"Enter\")) {\n      (el as HTMLElement).focus();\n      return;\n    }\n\n    const child = getNavChild(event, siblings, elIndex);\n\n    if (child) {\n      const inMonth = child.getAttribute(\"data-in-month\");\n      if (inMonth === \"true\") {\n        event?.preventDefault();\n        child?.focus();\n      }\n    }\n  };\n\n  /**\n   * Renders the element representing the received date.\n   *\n   * @param currentDate - The array representing the date [YYYY, MM, DD].\n   * @memberOf Calendar\n   */\n  const renderCalendarDate = (currentDate) => {\n    return (\n      <HvCalendarCell\n        classes={classes}\n        key={currentDate}\n        tabIndex={currentDate.getTime() === firstDayOfCurrentMonthTime ? 0 : -1}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        value={currentDate}\n        today={today}\n        calendarValue={localValue}\n        rangeMode={rangeMode}\n        isDateSelectionMode={isDateSelectionMode}\n        locale={locale}\n        firstDayOfCurrentMonth={firstDayOfCurrentMonth}\n        maximumDate={maximumDate}\n        minimumDate={minimumDate}\n      />\n    );\n  };\n\n  return (\n    <StyledCalendarContainer\n      className={clsx(\n        className,\n        singleCalendarClasses.calendarContainer,\n        classes?.calendarContainer\n      )}\n      {...others}\n    >\n      <StyledCalendarWrapper\n        id={id}\n        className={clsx(\n          singleCalendarClasses.calendarWrapper,\n          classes?.calendarWrapper\n        )}\n      >\n        <HvCalendarHeader\n          id={setId(id, \"header\")}\n          locale={locale}\n          onChange={handleInputChange}\n          showEndDate={showEndDate && !isDateSelectionMode}\n          showDayOfWeek={showDayOfWeek}\n          invalidDateLabel={invalidDateLabel}\n        />\n        {calViewMode === \"calendar\" && (\n          <div>\n            <HvComposedNavigation\n              id={id}\n              locale={locale}\n              onChange={onVisibleDateChange}\n              onViewModeChange={setCalViewMode}\n              visibleYear={visibleYear || today.getFullYear()}\n              visibleMonth={visibleMonth || today.getMonth() + 1}\n            />\n            <StyledCalendarGrid\n              className={clsx(\n                singleCalendarClasses.calendarGrid,\n                classes?.calendarGrid\n              )}\n              aria-controls={HvCalendarHeader?.[0]?.id}\n            >\n              <HvCalendarWeekLabel labels={listWeekdayNames} />\n              {calModel.dates.map(renderCalendarDate)}\n            </StyledCalendarGrid>\n          </div>\n        )}\n        {calViewMode === \"monthly\" && (\n          <HvMonthSelector\n            id={id}\n            locale={locale}\n            onChange={onVisibleDateChange}\n            onViewModeChange={setCalViewMode}\n            visibleMonth={visibleMonth || today.getMonth() + 1}\n            rangeMode={rangeMode}\n          />\n        )}\n      </StyledCalendarWrapper>\n    </StyledCalendarContainer>\n  );\n};\n\nexport interface HvSingleCalendarProps {\n  /**\n   * Styles applied from the theme.\n   */\n  classes?: HvSingleCalendarClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The class name to add at the root of the single calendar\n   */\n  className?: string;\n  /**\n   * The calendar locale.\n   *\n   */\n  locale: string;\n  /**\n   * Date that the calendar would show.\n   */\n  value?: string | Date | DateRangeProp;\n  /**\n   * Date that will be used to know which month and year should be displayed on the calendar. The value of the day is\n   * irrelevant.\n   */\n  visibleDate?: Date;\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleMonth?: number;\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleYear?: number;\n  /**\n   * Callback function to be triggered when the selected date has changed.\n   */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    value: Date | DateRangeProp\n  ) => void;\n  /**\n   * Callback function to be triggered when the selected date input has changed.\n   */\n  onInputChange?: (\n    event:\n      | React.ChangeEvent<\n          HTMLTextAreaElement | HTMLInputElement | HTMLButtonElement\n        >\n      | undefined,\n    value: Date | DateRangeProp,\n    position?: \"left\" | \"right\"\n  ) => void;\n  /**\n   * Callback function to be triggered when visible date has changed.\n   */\n  onVisibleDateChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    action: VisibilitySelectorActions,\n    value?: Date | DateRangeProp | number\n  ) => void;\n  /**\n   * The maximum selectable date after this all values are disabled.\n   */\n  maximumDate?: Date;\n  /**\n   * The minimum selectable date before this all values are disabled.\n   */\n  minimumDate?: Date;\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   * Content on the upper part of the calendar.\n   */\n  children?: React.ReactNode;\n  /**\n   * Label shown when date is invalid.\n   */\n  invalidDateLabel?: string;\n}\n"],"names":["HvSingleCalendar","classes","className","id","locale","value","visibleMonth","visibleYear","minimumDate","maximumDate","onChange","onInputChange","onVisibleDateChange","showEndDate","showDayOfWeek","invalidDateLabel","children","others","today","Date","localValue","isNil","calViewMode","setCalViewMode","useState","rangeMode","isRange","isDateSelectionMode","isDate","endDate","calModel","generateCalendarModel","startDate","firstDayOfCurrentMonth","year","month","firstDayOfCurrentMonthTime","getTime","listWeekdayNames","useMemo","getWeekdayNamesList","handleChange","event","date","preventDefault","handleInputChange","getNavChild","siblings","i","isKey","undefined","handleKeyDown","el","document","activeElement","parent","parentElement","Array","from","getElementsByClassName","singleCalendarClasses","cellContainer","elIndex","indexOf","focus","child","inMonth","getAttribute","renderCalendarDate","currentDate","HvCalendarCell","tabIndex","onKeyDown","calendarValue","StyledCalendarContainer","clsx","calendarContainer","StyledCalendarWrapper","calendarWrapper","_jsx","HvCalendarHeader","setId","HvComposedNavigation","onViewModeChange","getFullYear","getMonth","_jsxs","StyledCalendarGrid","calendarGrid","HvCalendarWeekLabel","labels","dates","map","HvMonthSelector"],"mappings":"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"}
+{"version":3,"file":"SingleCalendar.js","sources":["../../../../../src/components/Calendar/SingleCalendar/SingleCalendar.tsx"],"sourcesContent":["import { useState, useMemo } from \"react\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { ViewMode } from \"../enums\";\nimport { isRange, isDate, getWeekdayNamesList } from \"../utils\";\nimport { generateCalendarModel } from \"../model\";\nimport { HvComposedNavigation, HvMonthSelector } from \"../CalendarNavigation\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"../types\";\n\nimport { HvCalendarCell } from \"./CalendarCell\";\nimport { HvCalendarWeekLabel } from \"../CalendarWeekLabels\";\nimport { HvCalendarHeader } from \"../CalendarHeader/CalendarHeader\";\n\nimport { staticClasses, useClasses } from \"./SingleCalendar.styles\";\n\nexport { staticClasses as singleCalendarClasses };\n\nexport type HvSingleCalendarClasses = ExtractNames<typeof useClasses>;\n\nexport const HvSingleCalendar = ({\n  classes: classesProp,\n  className,\n  id,\n  locale = \"en-US\",\n  value,\n  visibleMonth,\n  visibleYear,\n  minimumDate,\n  maximumDate,\n  onChange,\n  onInputChange,\n  onVisibleDateChange,\n  showEndDate,\n  showDayOfWeek,\n  invalidDateLabel,\n  children,\n  ...others\n}: HvSingleCalendarProps) => {\n  // TODO: refactor this out\n  // const { HvCalendarHeader } = useContext(HvFormElementDescriptorsContext);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const today = new Date();\n  const localValue = isNil(value) ? today : value;\n\n  const [calViewMode, setCalViewMode] = useState<ViewMode>(\"calendar\");\n\n  const rangeMode = isRange(localValue);\n  const isDateSelectionMode = rangeMode && !isDate(localValue.endDate);\n  const calModel = rangeMode\n    ? generateCalendarModel(localValue.startDate, visibleMonth, visibleYear)\n    : generateCalendarModel(localValue, visibleMonth, visibleYear);\n  const firstDayOfCurrentMonth = new Date(calModel.year, calModel.month - 1, 1);\n  const firstDayOfCurrentMonthTime = firstDayOfCurrentMonth.getTime();\n\n  const listWeekdayNames = useMemo(\n    () => getWeekdayNamesList(locale, \"narrow\"),\n    [locale]\n  );\n\n  const handleChange = (event, date: Date | DateRangeProp) => {\n    event?.preventDefault();\n    onChange?.(event, date);\n  };\n\n  const handleInputChange = (event, date) => {\n    event?.preventDefault();\n    onInputChange?.(event, date);\n  };\n\n  const getNavChild = (event: KeyboardEvent, siblings, i: number) => {\n    if (isKey(event, \"ArrowLeft\")) return siblings[i - 1];\n    if (isKey(event, \"ArrowRight\")) return siblings[i + 1];\n    if (isKey(event, \"ArrowUp\")) return siblings[i - 7];\n    if (isKey(event, \"ArrowDown\")) return siblings[i + 7];\n    return undefined;\n  };\n\n  const handleKeyDown = (event) => {\n    // This code is very brittle and should be managed with the focus wrapper\n    const el = document?.activeElement;\n    const parent = el?.parentElement?.parentElement;\n    const siblings =\n      parent != null\n        ? Array.from(\n            parent.getElementsByClassName(classes.cellContainer as string)\n          )\n        : [];\n    const elIndex = el ? siblings.indexOf(el) : 0;\n\n    if (isKey(event, \"Enter\")) {\n      (el as HTMLElement).focus();\n      return;\n    }\n\n    const child = getNavChild(event, siblings, elIndex);\n\n    if (child) {\n      const inMonth = child.getAttribute(\"data-in-month\");\n      if (inMonth === \"true\") {\n        event?.preventDefault();\n        child?.focus();\n      }\n    }\n  };\n\n  /**\n   * Renders the element representing the received date.\n   *\n   * @param currentDate - The array representing the date [YYYY, MM, DD].\n   * @memberOf Calendar\n   */\n  const renderCalendarDate = (currentDate) => {\n    return (\n      <HvCalendarCell\n        classes={classes}\n        key={currentDate}\n        tabIndex={currentDate.getTime() === firstDayOfCurrentMonthTime ? 0 : -1}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        value={currentDate}\n        today={today}\n        calendarValue={localValue}\n        rangeMode={rangeMode}\n        isDateSelectionMode={isDateSelectionMode}\n        locale={locale}\n        firstDayOfCurrentMonth={firstDayOfCurrentMonth}\n        maximumDate={maximumDate}\n        minimumDate={minimumDate}\n      />\n    );\n  };\n\n  return (\n    <div className={cx(classes.calendarContainer, className)} {...others}>\n      <div id={id} className={classes.calendarWrapper}>\n        <HvCalendarHeader\n          id={setId(id, \"header\")}\n          locale={locale}\n          onChange={handleInputChange}\n          showEndDate={showEndDate && !isDateSelectionMode}\n          showDayOfWeek={showDayOfWeek}\n          invalidDateLabel={invalidDateLabel}\n        />\n        {calViewMode === \"calendar\" && (\n          <div>\n            <HvComposedNavigation\n              id={id}\n              locale={locale}\n              onChange={onVisibleDateChange}\n              onViewModeChange={setCalViewMode}\n              visibleYear={visibleYear || today.getFullYear()}\n              visibleMonth={visibleMonth || today.getMonth() + 1}\n            />\n            <div\n              className={classes.calendarGrid}\n              aria-controls={HvCalendarHeader?.[0]?.id}\n            >\n              <HvCalendarWeekLabel labels={listWeekdayNames} />\n              {calModel.dates.map(renderCalendarDate)}\n            </div>\n          </div>\n        )}\n        {calViewMode === \"monthly\" && (\n          <HvMonthSelector\n            id={id}\n            locale={locale}\n            onChange={onVisibleDateChange}\n            onViewModeChange={setCalViewMode}\n            visibleMonth={visibleMonth || today.getMonth() + 1}\n            rangeMode={rangeMode}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport interface HvSingleCalendarProps {\n  /**\n   * Styles applied from the theme.\n   */\n  classes?: HvSingleCalendarClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The class name to add at the root of the single calendar\n   */\n  className?: string;\n  /**\n   * The calendar locale.\n   *\n   */\n  locale: string;\n  /**\n   * Date that the calendar would show.\n   */\n  value?: string | Date | DateRangeProp;\n  /**\n   * Date that will be used to know which month and year should be displayed on the calendar. The value of the day is\n   * irrelevant.\n   */\n  visibleDate?: Date;\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleMonth?: number;\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleYear?: number;\n  /**\n   * Callback function to be triggered when the selected date has changed.\n   */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    value: Date | DateRangeProp\n  ) => void;\n  /**\n   * Callback function to be triggered when the selected date input has changed.\n   */\n  onInputChange?: (\n    event:\n      | React.ChangeEvent<\n          HTMLTextAreaElement | HTMLInputElement | HTMLButtonElement\n        >\n      | undefined,\n    value: Date | DateRangeProp,\n    position?: \"left\" | \"right\"\n  ) => void;\n  /**\n   * Callback function to be triggered when visible date has changed.\n   */\n  onVisibleDateChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    action: VisibilitySelectorActions,\n    value?: Date | DateRangeProp | number\n  ) => void;\n  /**\n   * The maximum selectable date after this all values are disabled.\n   */\n  maximumDate?: Date;\n  /**\n   * The minimum selectable date before this all values are disabled.\n   */\n  minimumDate?: Date;\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   * Content on the upper part of the calendar.\n   */\n  children?: React.ReactNode;\n  /**\n   * Label shown when date is invalid.\n   */\n  invalidDateLabel?: string;\n}\n"],"names":["HvSingleCalendar","classes","classesProp","className","id","locale","value","visibleMonth","visibleYear","minimumDate","maximumDate","onChange","onInputChange","onVisibleDateChange","showEndDate","showDayOfWeek","invalidDateLabel","children","others","cx","useClasses","today","Date","localValue","isNil","calViewMode","setCalViewMode","useState","rangeMode","isRange","isDateSelectionMode","isDate","endDate","calModel","generateCalendarModel","startDate","firstDayOfCurrentMonth","year","month","firstDayOfCurrentMonthTime","getTime","listWeekdayNames","useMemo","getWeekdayNamesList","handleChange","event","date","preventDefault","handleInputChange","getNavChild","siblings","i","isKey","undefined","handleKeyDown","el","document","activeElement","parent","parentElement","Array","from","getElementsByClassName","cellContainer","elIndex","indexOf","focus","child","inMonth","getAttribute","renderCalendarDate","currentDate","HvCalendarCell","tabIndex","onKeyDown","calendarValue","calendarContainer","calendarWrapper","_jsx","HvCalendarHeader","setId","HvComposedNavigation","onViewModeChange","getFullYear","getMonth","_jsxs","calendarGrid","HvCalendarWeekLabel","labels","dates","map","HvMonthSelector"],"mappings":"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"}

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

@@ -1,71 +1,74 @@
-import _styled from "@emotion/styled/base";
+import { createClasses } from "../../../utils/classes.js";
 import { theme } from "@hitachivantara/uikit-styles";
-import singleCalendarClasses from "./singleCalendarClasses.js";
-const StyledCalendarContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e10ihr3e2"
-} : {
-  target: "e10ihr3e2",
-  label: "StyledCalendarContainer"
-})({
-  backgroundColor: theme.colors.atmo1,
-  width: "318px",
-  minHeight: "440px",
-  position: "relative"
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvU2luZ2xlQ2FsZW5kYXIvU2luZ2xlQ2FsZW5kYXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJdUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9DYWxlbmRhci9TaW5nbGVDYWxlbmRhci9TaW5nbGVDYWxlbmRhci5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgc2luZ2xlQ2FsZW5kYXJDbGFzc2VzIGZyb20gXCIuL3NpbmdsZUNhbGVuZGFyQ2xhc3Nlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ2FsZW5kYXJDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgd2lkdGg6IFwiMzE4cHhcIixcbiAgbWluSGVpZ2h0OiBcIjQ0MHB4XCIsXG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENhbGVuZGFyV3JhcHBlciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIG92ZXJmbG93OiBcImhpZGRlblwiLFxuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgcGFkZGluZzogdGhlbWUuc3BhY2luZyhcInNtXCIpLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDYWxlbmRhckdyaWQgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgZmxleEZsb3c6IFwid3JhcFwiLFxuICB3aWR0aDogXCIyODBweFwiLFxuICBbYCYgLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNlbGxzSW5SYW5nZX1gXToge1xuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgIFtgJiAuJHtzaW5nbGVDYWxlbmRhckNsYXNzZXMuc3RhcnRCb29rZW5kfWBdOiB7XG4gICAgICBib3JkZXJMZWZ0OiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeX1gLFxuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICBib3JkZXJSaWdodDogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnl9YCxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcblxuICBbYCY6aG92ZXIgLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNlbGxzSW5SYW5nZX1gXToge1xuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgIFtgJiAuJHtzaW5nbGVDYWxlbmRhckNsYXNzZXMuc3RhcnRCb29rZW5kfWBdOiB7XG4gICAgICBib3JkZXJMZWZ0OiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeX1gLFxuICAgICAgYm9yZGVyUmlnaHQ6IFwiaW5oZXJpdFwiLFxuICAgIH0sXG4gIH0sXG5cbiAgW2AmIC4ke3NpbmdsZUNhbGVuZGFyQ2xhc3Nlcy5jZWxsc0luUmFuZ2V9OmhvdmVyYF06IHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgICBbYCYgLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNhbGVuZGFyRGF0ZX1gXToge1xuICAgICAgYm9yZGVyUmlnaHQ6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5fWAsXG4gICAgfSxcbiAgfSxcblxuICBbYCYgLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNlbGxzSW5SYW5nZX06aG92ZXIgfiAuJHtzaW5nbGVDYWxlbmRhckNsYXNzZXMuY2VsbHNJblJhbmdlfWBdOlxuICAgIHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8xLCAvLyBjb250cm9scyB0aGUgcmlnaHQgc2lkZSBvZiB0aGUgaG92ZXJlZCByYW5nZVxuICAgIH0sXG4gIFtgJiAuJHtzaW5nbGVDYWxlbmRhckNsYXNzZXMuY2VsbHNPdXRzaWRlUmFuZ2V9OmhvdmVyIH4gLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNlbGxzSW5SYW5nZX1gXTpcbiAgICB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSwgLy8gY29udHJvbCB0aGUgcmlnaHQgc2lkZSB3aGVuIGhvdmVyaW5nIG91dHNpZGUgb2YgdGhlIHJhbmdlXG4gICAgfSxcbn0pO1xuIl19 */");
-const StyledCalendarWrapper = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e10ihr3e1"
-} : {
-  target: "e10ihr3e1",
-  label: "StyledCalendarWrapper"
-})({
-  overflow: "hidden",
-  backgroundColor: theme.colors.atmo1,
-  padding: theme.spacing("sm")
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvU2luZ2xlQ2FsZW5kYXIvU2luZ2xlQ2FsZW5kYXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXcUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9DYWxlbmRhci9TaW5nbGVDYWxlbmRhci9TaW5nbGVDYWxlbmRhci5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgc2luZ2xlQ2FsZW5kYXJDbGFzc2VzIGZyb20gXCIuL3NpbmdsZUNhbGVuZGFyQ2xhc3Nlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ2FsZW5kYXJDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgd2lkdGg6IFwiMzE4cHhcIixcbiAgbWluSGVpZ2h0OiBcIjQ0MHB4XCIsXG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENhbGVuZGFyV3JhcHBlciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIG92ZXJmbG93OiBcImhpZGRlblwiLFxuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgcGFkZGluZzogdGhlbWUuc3BhY2luZyhcInNtXCIpLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDYWxlbmRhckdyaWQgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgZmxleEZsb3c6IFwid3JhcFwiLFxuICB3aWR0aDogXCIyODBweFwiLFxuICBbYCYgLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNlbGxzSW5SYW5nZX1gXToge1xuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgIFtgJiAuJHtzaW5nbGVDYWxlbmRhckNsYXNzZXMuc3RhcnRCb29rZW5kfWBdOiB7XG4gICAgICBib3JkZXJMZWZ0OiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeX1gLFxuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICBib3JkZXJSaWdodDogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnl9YCxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcblxuICBbYCY6aG92ZXIgLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNlbGxzSW5SYW5nZX1gXToge1xuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgIFtgJiAuJHtzaW5nbGVDYWxlbmRhckNsYXNzZXMuc3RhcnRCb29rZW5kfWBdOiB7XG4gICAgICBib3JkZXJMZWZ0OiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeX1gLFxuICAgICAgYm9yZGVyUmlnaHQ6IFwiaW5oZXJpdFwiLFxuICAgIH0sXG4gIH0sXG5cbiAgW2AmIC4ke3NpbmdsZUNhbGVuZGFyQ2xhc3Nlcy5jZWxsc0luUmFuZ2V9OmhvdmVyYF06IHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgICBbYCYgLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNhbGVuZGFyRGF0ZX1gXToge1xuICAgICAgYm9yZGVyUmlnaHQ6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5fWAsXG4gICAgfSxcbiAgfSxcblxuICBbYCYgLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNlbGxzSW5SYW5nZX06aG92ZXIgfiAuJHtzaW5nbGVDYWxlbmRhckNsYXNzZXMuY2VsbHNJblJhbmdlfWBdOlxuICAgIHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8xLCAvLyBjb250cm9scyB0aGUgcmlnaHQgc2lkZSBvZiB0aGUgaG92ZXJlZCByYW5nZVxuICAgIH0sXG4gIFtgJiAuJHtzaW5nbGVDYWxlbmRhckNsYXNzZXMuY2VsbHNPdXRzaWRlUmFuZ2V9OmhvdmVyIH4gLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNlbGxzSW5SYW5nZX1gXTpcbiAgICB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSwgLy8gY29udHJvbCB0aGUgcmlnaHQgc2lkZSB3aGVuIGhvdmVyaW5nIG91dHNpZGUgb2YgdGhlIHJhbmdlXG4gICAgfSxcbn0pO1xuIl19 */");
-const StyledCalendarGrid = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e10ihr3e0"
-} : {
-  target: "e10ihr3e0",
-  label: "StyledCalendarGrid"
-})({
-  display: "flex",
-  flexFlow: "wrap",
-  width: "280px",
-  [`& .${singleCalendarClasses.cellsInRange}`]: {
-    backgroundColor: theme.colors.atmo3,
-    [`& .${singleCalendarClasses.startBookend}`]: {
-      borderLeft: `1px solid ${theme.colors.secondary}`,
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvSingleCalendar", {
+  calendarContainer: {
+    backgroundColor: theme.colors.atmo1,
+    width: "318px",
+    minHeight: "440px",
+    position: "relative"
+  },
+  calendarWrapper: {
+    overflow: "hidden",
+    backgroundColor: theme.colors.atmo1,
+    padding: theme.spacing("sm")
+  },
+  calendarGrid: {
+    display: "flex",
+    flexFlow: "wrap",
+    width: "280px",
+    "& $cellsInRange": {
+      backgroundColor: theme.colors.atmo3,
+      "& $startBookend": {
+        borderLeft: `1px solid ${theme.colors.secondary}`,
+        backgroundColor: theme.colors.atmo3,
+        "&:hover": {
+          borderRight: `1px solid ${theme.colors.secondary}`
+        }
+      }
+    },
+    "&:hover $cellsInRange": {
+      backgroundColor: theme.colors.atmo3,
+      "& $startBookend": {
+        borderLeft: `1px solid ${theme.colors.secondary}`,
+        borderRight: "inherit"
+      }
+    },
+    "& $cellsInRange:hover": {
       backgroundColor: theme.colors.atmo3,
-      "&:hover": {
+      "& $calendarDate": {
         borderRight: `1px solid ${theme.colors.secondary}`
       }
+    },
+    "& $cellsInRange:hover ~ $cellsInRange": {
+      backgroundColor: theme.colors.atmo1
+      // controls the right side of the hovered range
+    },
+    "& $cellsOutsideRange:hover ~ $cellsInRange": {
+      backgroundColor: theme.colors.atmo1
+      // control the right side when hovering outside of the range
     }
   },
-  [`&:hover .${singleCalendarClasses.cellsInRange}`]: {
-    backgroundColor: theme.colors.atmo3,
-    [`& .${singleCalendarClasses.startBookend}`]: {
-      borderLeft: `1px solid ${theme.colors.secondary}`,
-      borderRight: "inherit"
-    }
-  },
-  [`& .${singleCalendarClasses.cellsInRange}:hover`]: {
-    backgroundColor: theme.colors.atmo3,
-    [`& .${singleCalendarClasses.calendarDate}`]: {
-      borderRight: `1px solid ${theme.colors.secondary}`
-    }
-  },
-  [`& .${singleCalendarClasses.cellsInRange}:hover ~ .${singleCalendarClasses.cellsInRange}`]: {
-    backgroundColor: theme.colors.atmo1
-    // controls the right side of the hovered range
+  navigationContainer: {},
+  focusSelection: {},
+  navigationMonth: {},
+  calendarDate: {},
+  calendarDateNotInMonth: {},
+  calendarDateSelected: {},
+  calendarDateInvalid: {},
+  calendarDateInSelectionRange: {},
+  startBookend: {},
+  endBookend: {},
+  cellsInRange: {
+    backgroundColor: theme.colors.atmo3
   },
-  [`& .${singleCalendarClasses.cellsOutsideRange}:hover ~ .${singleCalendarClasses.cellsInRange}`]: {
-    backgroundColor: theme.colors.atmo1
-    // control the right side when hovering outside of the range
-  }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvU2luZ2xlQ2FsZW5kYXIvU2luZ2xlQ2FsZW5kYXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQmtDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvU2luZ2xlQ2FsZW5kYXIvU2luZ2xlQ2FsZW5kYXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHNpbmdsZUNhbGVuZGFyQ2xhc3NlcyBmcm9tIFwiLi9zaW5nbGVDYWxlbmRhckNsYXNzZXNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENhbGVuZGFyQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gIHdpZHRoOiBcIjMxOHB4XCIsXG4gIG1pbkhlaWdodDogXCI0NDBweFwiLFxuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDYWxlbmRhcldyYXBwZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gIHBhZGRpbmc6IHRoZW1lLnNwYWNpbmcoXCJzbVwiKSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ2FsZW5kYXJHcmlkID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGZsZXhGbG93OiBcIndyYXBcIixcbiAgd2lkdGg6IFwiMjgwcHhcIixcbiAgW2AmIC4ke3NpbmdsZUNhbGVuZGFyQ2xhc3Nlcy5jZWxsc0luUmFuZ2V9YF06IHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgICBbYCYgLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLnN0YXJ0Qm9va2VuZH1gXToge1xuICAgICAgYm9yZGVyTGVmdDogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnl9YCxcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgYm9yZGVyUmlnaHQ6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5fWAsXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG5cbiAgW2AmOmhvdmVyIC4ke3NpbmdsZUNhbGVuZGFyQ2xhc3Nlcy5jZWxsc0luUmFuZ2V9YF06IHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgICBbYCYgLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLnN0YXJ0Qm9va2VuZH1gXToge1xuICAgICAgYm9yZGVyTGVmdDogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnl9YCxcbiAgICAgIGJvcmRlclJpZ2h0OiBcImluaGVyaXRcIixcbiAgICB9LFxuICB9LFxuXG4gIFtgJiAuJHtzaW5nbGVDYWxlbmRhckNsYXNzZXMuY2VsbHNJblJhbmdlfTpob3ZlcmBdOiB7XG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgW2AmIC4ke3NpbmdsZUNhbGVuZGFyQ2xhc3Nlcy5jYWxlbmRhckRhdGV9YF06IHtcbiAgICAgIGJvcmRlclJpZ2h0OiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeX1gLFxuICAgIH0sXG4gIH0sXG5cbiAgW2AmIC4ke3NpbmdsZUNhbGVuZGFyQ2xhc3Nlcy5jZWxsc0luUmFuZ2V9OmhvdmVyIH4gLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNlbGxzSW5SYW5nZX1gXTpcbiAgICB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSwgLy8gY29udHJvbHMgdGhlIHJpZ2h0IHNpZGUgb2YgdGhlIGhvdmVyZWQgcmFuZ2VcbiAgICB9LFxuICBbYCYgLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNlbGxzT3V0c2lkZVJhbmdlfTpob3ZlciB+IC4ke3NpbmdsZUNhbGVuZGFyQ2xhc3Nlcy5jZWxsc0luUmFuZ2V9YF06XG4gICAge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsIC8vIGNvbnRyb2wgdGhlIHJpZ2h0IHNpZGUgd2hlbiBob3ZlcmluZyBvdXRzaWRlIG9mIHRoZSByYW5nZVxuICAgIH0sXG59KTtcbiJdfQ== */");
+  cellsOutsideRange: {},
+  cellContainer: {}
+});
 export {
-  StyledCalendarContainer,
-  StyledCalendarGrid,
-  StyledCalendarWrapper
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=SingleCalendar.styles.js.map