@hitachivantara/uikit-react-core 5.24.3 → 5.24.5

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.styles.js","sources":["../../../../src/components/Calendar/Calendar.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport calendarClasses from \"./calendarClasses\";\nimport { HvSingleCalendar, HvSingleCalendarProps } from \"./SingleCalendar\";\n\nexport const StyledRoot = styled(\"div\")({\n  display: \"flex\",\n  justifyContent: \"center\",\n});\n\nexport const StyledRangeCalendarContainer = styled(\"div\")({\n  display: \"flex\",\n});\n\nexport const StyledSingleCalendar = styled((props: HvSingleCalendarProps) => (\n  <HvSingleCalendar {...props} />\n))({\n  \"&:hover\": {\n    [`& ~ .${calendarClasses.singleCalendar}`]: {\n      // target the next calendar when the former is hovered\n      \"& > div\": {\n        \"& > div:nth-child(3)\": {\n          \"& > div\": {\n            \"& > div[data-calendar-cell='calendarCell']\": {\n              backgroundColor: theme.colors.atmo1,\n            },\n          },\n        },\n      },\n    },\n  },\n});\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledRangeCalendarContainer","_styled","props","HvSingleCalendar","calendarClasses","singleCalendar","backgroundColor","theme","colors","atmo1"],"mappings":";;;;;;;;AAKO,MAAMA,aAAoB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAGtC;AAEM,MAAMC,+BAAsC,wBAAA,OAAKV,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAExD;AAEmCE,wBAAO,CAACC,8BACzCC,kBAAgB;AAAA,EAAA,GAAKD;AAAK,CAAG,GAC/BZ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACD,WAAW;AAAA,IACT,CAAE,QAAOU,gBAAgBC,gBAAgB,GAAG;AAAA;AAAA,MAE1C,WAAW;AAAA,QACT,wBAAwB;AAAA,UACtB,WAAW;AAAA,YACT,8CAA8C;AAAA,cAC5CC,iBAAiBC,MAAMC,OAAOC;AAAAA,YAChC;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,GAACnB,QAAAC,IAAAC,aAAC,eAAA,KAAA,ysDAAA;"}
+{"version":3,"file":"Calendar.styles.js","sources":["../../../../src/components/Calendar/Calendar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendar\", {\n  root: {\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n  rangeCalendarContainer: {\n    display: \"flex\",\n  },\n  singleCalendar: {\n    \"&:hover\": {\n      \"& ~ $singleCalendar\": {\n        // target the next calendar when the former is hovered\n        \"& > div\": {\n          \"& > div:nth-child(3)\": {\n            \"& > div\": {\n              \"& > div[data-calendar-cell='calendarCell']\": {\n                backgroundColor: theme.colors.atmo1,\n              },\n            },\n          },\n        },\n      },\n    },\n  },\n  focusSelection: {},\n  calendarMonthlyCell: {},\n  calendarMonthlyCellSelected: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","justifyContent","rangeCalendarContainer","singleCalendar","backgroundColor","theme","colors","atmo1","focusSelection","calendarMonthlyCell","calendarMonthlyCellSelected"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,cAAc;AAAA,EACvEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,gBAAgB;AAAA,EAClB;AAAA,EACAC,wBAAwB;AAAA,IACtBF,SAAS;AAAA,EACX;AAAA,EACAG,gBAAgB;AAAA,IACd,WAAW;AAAA,MACT,uBAAuB;AAAA;AAAA,QAErB,WAAW;AAAA,UACT,wBAAwB;AAAA,YACtB,WAAW;AAAA,cACT,8CAA8C;AAAA,gBAC5CC,iBAAiBC,MAAMC,OAAOC;AAAAA,cAChC;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACAC,gBAAgB,CAAC;AAAA,EACjBC,qBAAqB,CAAC;AAAA,EACtBC,6BAA6B,CAAC;AAChC,CAAC;"}

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

@@ -4,17 +4,17 @@ import dayjs from "dayjs";
 import localeData from "dayjs/plugin/localeData";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import customParseFormat from "dayjs/plugin/customParseFormat";
-import { clsx } from "clsx";
 import isNil from "lodash/isNil";
 import { isKey } from "../../../utils/keyboardUtils.js";
 import { setId } from "../../../utils/setId.js";
 import { isRange, isDate, formatToLocale, isSameDay } from "../utils.js";
-import calendarHeaderClasses from "./calendarHeaderClasses.js";
-import { StyledRoot, StyledHeaderDayOfWeek, StyledInput, StyledInputBorderContainer, StyledTypography } from "./CalendarHeader.styles.js";
+import { useClasses } from "./CalendarHeader.styles.js";
+import { staticClasses } from "./CalendarHeader.styles.js";
 import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
 import { HvFormElementValueContext } from "../../Forms/FormElement/context/FormElementValueContext.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);
@@ -22,7 +22,7 @@ const HvCalendarHeader = ({
   id,
   value,
   locale = "en-US",
-  classes,
+  classes: classesProp,
   onChange,
   showEndDate,
   showDayOfWeek = false,
@@ -31,6 +31,10 @@ const HvCalendarHeader = ({
   ...others
 }) => {
   var _a;
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const {
     elementId
   } = useContext(HvFormElementContext);
@@ -109,20 +113,22 @@ const HvCalendarHeader = ({
     setEditedValue(event.target.value);
   };
   return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsxs(StyledRoot, {
+    children: [/* @__PURE__ */ jsxs("div", {
       id: localId,
-      className: clsx(calendarHeaderClasses.root, classes == null ? void 0 : classes.root, !isValidValue && inputValue !== "" && clsx(calendarHeaderClasses.invalid, classes == null ? void 0 : classes.invalid)),
-      children: [showDayOfWeek && /* @__PURE__ */ jsx(StyledHeaderDayOfWeek, {
-        className: clsx(calendarHeaderClasses.headerDayOfWeek, classes == null ? void 0 : classes.headerDayOfWeek),
+      className: cx(classes.root, {
+        [classes.invalid]: !isValidValue && inputValue !== ""
+      }),
+      children: [showDayOfWeek && /* @__PURE__ */ jsx(HvTypography, {
+        className: classes.headerDayOfWeek,
         children: weekdayDisplay || " "
       }), /* @__PURE__ */ jsx("div", {
-        className: clsx(calendarHeaderClasses.headerDate, classes == null ? void 0 : classes.headerDate),
-        children: /* @__PURE__ */ jsx(StyledInput, {
+        className: classes.headerDate,
+        children: /* @__PURE__ */ jsx("input", {
           type: "text",
           id: setId(localId, "header-input"),
           placeholder: localeFormat,
           value: inputValue,
-          className: clsx(calendarHeaderClasses.input, classes == null ? void 0 : classes.input),
+          className: classes.input,
           onBlur: onBlurHandler,
           onFocus: onFocusHandler,
           onChange: onChangeHandler,
@@ -131,17 +137,17 @@ const HvCalendarHeader = ({
           ...others
         })
       })]
-    }), !isValidValue && inputValue !== "" && /* @__PURE__ */ jsx(StyledInputBorderContainer, {
+    }), !isValidValue && inputValue !== "" && /* @__PURE__ */ jsx("div", {
       role: "presentation",
-      className: clsx(calendarHeaderClasses.inputBorderContainer, classes == null ? void 0 : classes.inputBorderContainer)
+      className: classes.inputBorderContainer
     }), /* @__PURE__ */ jsx("div", {
       style: {
         height: 32
       },
-      children: !isValidValue && inputValue !== "" && /* @__PURE__ */ jsxs(StyledTypography, {
+      children: !isValidValue && inputValue !== "" && /* @__PURE__ */ jsxs(HvTypography, {
         component: "span",
         variant: "body",
-        className: clsx(calendarHeaderClasses.invalidMessageStyling, classes == null ? void 0 : classes.invalidMessageStyling),
+        className: classes == null ? void 0 : classes.invalidMessageStyling,
         children: [/* @__PURE__ */ jsx(Info, {
           color: "brand",
           iconSize: "S"
@@ -152,6 +158,7 @@ const HvCalendarHeader = ({
 };
 HvCalendarHeader.formElementType = "HvCalendarHeader";
 export {
-  HvCalendarHeader
+  HvCalendarHeader,
+  staticClasses as calendarHeaderClasses
 };
 //# sourceMappingURL=CalendarHeader.js.map

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 { clsx } from \"clsx\";\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 { isRange, isSameDay, formatToLocale, isDate } from \"../utils\";\nimport { DateRangeProp } from \"../types\";\nimport calendarHeaderClasses, {\n  HvCalendarHeaderClasses,\n} from \"./calendarHeaderClasses\";\nimport {\n  StyledHeaderDayOfWeek,\n  StyledInput,\n  StyledInputBorderContainer,\n  StyledRoot,\n  StyledTypography,\n} from \"./CalendarHeader.styles\";\n\ndayjs.extend(localeData);\ndayjs.extend(localizedFormat);\ndayjs.extend(customParseFormat);\n\nexport const HvCalendarHeader = ({\n  id,\n  value,\n  locale = \"en-US\",\n  classes,\n  onChange,\n  showEndDate,\n  showDayOfWeek = false,\n  onFocus,\n  invalidDateLabel = \"Invalid Date\",\n  ...others\n}: HvCalendarHeaderProps) => {\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      <StyledRoot\n        id={localId}\n        className={clsx(\n          calendarHeaderClasses.root,\n          classes?.root,\n          !isValidValue &&\n            inputValue !== \"\" &&\n            clsx(calendarHeaderClasses.invalid, classes?.invalid)\n        )}\n      >\n        {showDayOfWeek && (\n          <StyledHeaderDayOfWeek\n            className={clsx(\n              calendarHeaderClasses.headerDayOfWeek,\n              classes?.headerDayOfWeek\n            )}\n          >\n            {weekdayDisplay || \"\\u00A0\"}\n          </StyledHeaderDayOfWeek>\n        )}\n\n        <div\n          className={clsx(\n            calendarHeaderClasses.headerDate,\n            classes?.headerDate\n          )}\n        >\n          <StyledInput\n            type=\"text\"\n            id={setId(localId, \"header-input\")}\n            placeholder={localeFormat}\n            value={inputValue}\n            className={clsx(calendarHeaderClasses.input, 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      </StyledRoot>\n      {!isValidValue && inputValue !== \"\" && (\n        <StyledInputBorderContainer\n          role=\"presentation\"\n          className={clsx(\n            calendarHeaderClasses.inputBorderContainer,\n            classes?.inputBorderContainer\n          )}\n        />\n      )}\n      <div style={{ height: 32 }}>\n        {!isValidValue && inputValue !== \"\" && (\n          <StyledTypography\n            component=\"span\"\n            variant=\"body\"\n            className={clsx(\n              calendarHeaderClasses.invalidMessageStyling,\n              classes?.invalidMessageStyling\n            )}\n          >\n            <Info color=\"brand\" iconSize=\"S\" />\n            {invalidDateLabel}\n          </StyledTypography>\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","onChange","showEndDate","showDayOfWeek","onFocus","invalidDateLabel","others","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","_Fragment","children","_jsxs","StyledRoot","className","clsx","calendarHeaderClasses","root","invalid","_jsx","StyledHeaderDayOfWeek","headerDayOfWeek","headerDate","StyledInput","type","placeholder","input","onBlur","onKeyDown","StyledInputBorderContainer","role","inputBorderContainer","style","height","StyledTypography","component","variant","invalidMessageStyling","Info","color","iconSize","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 { 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","_Fragment","children","_jsxs","className","root","invalid","_jsx","HvTypography","headerDayOfWeek","headerDate","type","placeholder","input","onBlur","onKeyDown","role","inputBorderContainer","style","height","component","variant","invalidMessageStyling","Info","color","iconSize","formElementType"],"mappings":"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"}

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

@@ -1,87 +1,62 @@
-import _styled from "@emotion/styled/base";
-import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../../utils/classes.js";
 import { outlineStyles } from "../../../utils/focusUtils.js";
-import { jsx } from "@emotion/react/jsx-runtime";
-import { HvTypography } from "../../Typography/Typography.js";
-const StyledRoot = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1yjj6ap4"
-} : {
-  target: "e1yjj6ap4",
-  label: "StyledRoot"
-})({
-  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,
-  "&:hover, &:focus": {
-    borderBottom: `1px solid ${theme.colors.secondary}`
-  }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9DYWxlbmRhci9DYWxlbmRhckhlYWRlci9DYWxlbmRhckhlYWRlci5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHsgSHZUeXBvZ3JhcGh5IH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvVHlwb2dyYXBoeVwiO1xuaW1wb3J0IHsgb3V0bGluZVN0eWxlcyB9IGZyb20gXCJAY29yZS91dGlscy9mb2N1c1V0aWxzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgbWFyZ2luVG9wOiB0aGVtZS5zcGFjaW5nKFwieHNcIiksXG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8xLFxuICBib3JkZXJCb3R0b206IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Qm9yZGVyQm90dG9tLFxuICBib3JkZXJUb3A6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Qm9yZGVyVG9wLFxuICBib3JkZXJMZWZ0OiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEJvcmRlckxlZnQsXG4gIGJvcmRlclJpZ2h0OiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEJvcmRlclJpZ2h0LFxuICBib3JkZXJSYWRpdXM6IHRoZW1lLmNhbGVuZGFyLmJvcmRlclJhZGl1cyxcbiAgXCImOmhvdmVyLCAmOmZvY3VzXCI6IHtcbiAgICBib3JkZXJCb3R0b206IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5fWAsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZElucHV0Qm9yZGVyQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMubmVnYXRpdmUsXG4gIGhlaWdodDogMSxcbiAgbWFyZ2luVG9wOiAtMSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5wdXQgPSBzdHlsZWQoKHByb3BzKSA9PiA8aW5wdXQgey4uLnByb3BzfSAvPikoe1xuICBib3JkZXI6IFwibm9uZVwiLFxuICBiYWNrZ3JvdW5kQ29sb3I6IFwidHJhbnNwYXJlbnRcIixcbiAgcGFkZGluZzogYDVweCAke3RoZW1lLnNwYWNpbmcoXCJ4c1wiKX1gLFxuICBmb250RmFtaWx5OiB0aGVtZS5mb250RmFtaWx5LmJvZHksXG5cbiAgY29sb3I6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udENvbG9yLFxuICBmb250U2l6ZTogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRGb250U2l6ZSxcbiAgbGV0dGVyU3BhY2luZzogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRGb250TGV0dGVyU3BhY2luZyxcbiAgbGluZUhlaWdodDogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRGb250TGluZUhlaWdodCxcbiAgZm9udFdlaWdodDogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRGb250V2VpZ2h0LFxuICB3aWR0aDogXCIxMDAlXCIsXG4gIFwiJjo6cGxhY2Vob2xkZXJcIjoge1xuICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5XzYwLFxuICB9LFxuICBcIiY6Zm9jdXNcIjoge1xuICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICB9LFxuICBcIiY6Zm9jdXMtdmlzaWJsZVwiOiB7XG4gICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSGVhZGVyRGF5T2ZXZWVrID0gc3R5bGVkKEh2VHlwb2dyYXBoeSkoe1xuICBjb2xvcjogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRGb250Q29sb3IsXG4gIHBhZGRpbmdMZWZ0OiB0aGVtZS5zcGFjaW5nKFwieHNcIiksXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFR5cG9ncmFwaHkgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICBjb2xvcjogdGhlbWUuY29sb3JzLm5lZ2F0aXZlLFxufSk7XG4iXX0= */");
-const StyledInputBorderContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1yjj6ap3"
-} : {
-  target: "e1yjj6ap3",
-  label: "StyledInputBorderContainer"
-})({
-  backgroundColor: theme.colors.negative,
-  height: 1,
-  marginTop: -1
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQjBDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCB7IEh2VHlwb2dyYXBoeSB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL1R5cG9ncmFwaHlcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvZm9jdXNVdGlsc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIG1hcmdpblRvcDogdGhlbWUuc3BhY2luZyhcInhzXCIpLFxuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgYm9yZGVyQm90dG9tOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEJvcmRlckJvdHRvbSxcbiAgYm9yZGVyVG9wOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEJvcmRlclRvcCxcbiAgYm9yZGVyTGVmdDogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJMZWZ0LFxuICBib3JkZXJSaWdodDogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJSaWdodCxcbiAgYm9yZGVyUmFkaXVzOiB0aGVtZS5jYWxlbmRhci5ib3JkZXJSYWRpdXMsXG4gIFwiJjpob3ZlciwgJjpmb2N1c1wiOiB7XG4gICAgYm9yZGVyQm90dG9tOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeX1gLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnB1dEJvcmRlckNvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLm5lZ2F0aXZlLFxuICBoZWlnaHQ6IDEsXG4gIG1hcmdpblRvcDogLTEsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZElucHV0ID0gc3R5bGVkKChwcm9wcykgPT4gPGlucHV0IHsuLi5wcm9wc30gLz4pKHtcbiAgYm9yZGVyOiBcIm5vbmVcIixcbiAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gIHBhZGRpbmc6IGA1cHggJHt0aGVtZS5zcGFjaW5nKFwieHNcIil9YCxcbiAgZm9udEZhbWlseTogdGhlbWUuZm9udEZhbWlseS5ib2R5LFxuXG4gIGNvbG9yOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRDb2xvcixcbiAgZm9udFNpemU6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udFNpemUsXG4gIGxldHRlclNwYWNpbmc6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udExldHRlclNwYWNpbmcsXG4gIGxpbmVIZWlnaHQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udExpbmVIZWlnaHQsXG4gIGZvbnRXZWlnaHQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udFdlaWdodCxcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBcIiY6OnBsYWNlaG9sZGVyXCI6IHtcbiAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeV82MCxcbiAgfSxcbiAgXCImOmZvY3VzXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcbiAgXCImOmZvY3VzLXZpc2libGVcIjoge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEhlYWRlckRheU9mV2VlayA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgY29sb3I6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udENvbG9yLFxuICBwYWRkaW5nTGVmdDogdGhlbWUuc3BhY2luZyhcInhzXCIpLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRUeXBvZ3JhcGh5ID0gc3R5bGVkKEh2VHlwb2dyYXBoeSkoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgY29sb3I6IHRoZW1lLmNvbG9ycy5uZWdhdGl2ZSxcbn0pO1xuIl19 */");
-const StyledInput = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ jsx("input", {
-  ...props
-}), process.env.NODE_ENV === "production" ? {
-  target: "e1yjj6ap2"
-} : {
-  target: "e1yjj6ap2",
-  label: "StyledInput"
-})({
-  border: "none",
-  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,
-  width: "100%",
-  "&::placeholder": {
-    color: theme.colors.secondary_60
+import { theme } from "@hitachivantara/uikit-styles";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvCalendarHeader", {
+  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,
+    "&:hover, &:focus": {
+      borderBottom: `1px solid ${theme.colors.secondary}`
+    }
+  },
+  invalid: {},
+  headerDayOfWeek: {
+    color: theme.calendar.headerInputFontColor,
+    paddingLeft: theme.spacing("xs")
+  },
+  headerDate: {},
+  input: {
+    border: "none",
+    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,
+    width: "100%",
+    "&::placeholder": {
+      color: theme.colors.secondary_60
+    },
+    "&:focus": {
+      outline: "none"
+    },
+    "&:focus-visible": {
+      ...outlineStyles
+    }
   },
-  "&:focus": {
-    outline: "none"
+  inputBorderContainer: {
+    backgroundColor: theme.colors.negative,
+    height: 1,
+    marginTop: -1
   },
-  "&:focus-visible": {
-    ...outlineStyles
+  invalidMessageStyling: {
+    display: "flex",
+    alignItems: "center",
+    color: theme.colors.negative
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQjJCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCB7IEh2VHlwb2dyYXBoeSB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL1R5cG9ncmFwaHlcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvZm9jdXNVdGlsc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIG1hcmdpblRvcDogdGhlbWUuc3BhY2luZyhcInhzXCIpLFxuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgYm9yZGVyQm90dG9tOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEJvcmRlckJvdHRvbSxcbiAgYm9yZGVyVG9wOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEJvcmRlclRvcCxcbiAgYm9yZGVyTGVmdDogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJMZWZ0LFxuICBib3JkZXJSaWdodDogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJSaWdodCxcbiAgYm9yZGVyUmFkaXVzOiB0aGVtZS5jYWxlbmRhci5ib3JkZXJSYWRpdXMsXG4gIFwiJjpob3ZlciwgJjpmb2N1c1wiOiB7XG4gICAgYm9yZGVyQm90dG9tOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeX1gLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnB1dEJvcmRlckNvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLm5lZ2F0aXZlLFxuICBoZWlnaHQ6IDEsXG4gIG1hcmdpblRvcDogLTEsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZElucHV0ID0gc3R5bGVkKChwcm9wcykgPT4gPGlucHV0IHsuLi5wcm9wc30gLz4pKHtcbiAgYm9yZGVyOiBcIm5vbmVcIixcbiAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gIHBhZGRpbmc6IGA1cHggJHt0aGVtZS5zcGFjaW5nKFwieHNcIil9YCxcbiAgZm9udEZhbWlseTogdGhlbWUuZm9udEZhbWlseS5ib2R5LFxuXG4gIGNvbG9yOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRDb2xvcixcbiAgZm9udFNpemU6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udFNpemUsXG4gIGxldHRlclNwYWNpbmc6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udExldHRlclNwYWNpbmcsXG4gIGxpbmVIZWlnaHQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udExpbmVIZWlnaHQsXG4gIGZvbnRXZWlnaHQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udFdlaWdodCxcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBcIiY6OnBsYWNlaG9sZGVyXCI6IHtcbiAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeV82MCxcbiAgfSxcbiAgXCImOmZvY3VzXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcbiAgXCImOmZvY3VzLXZpc2libGVcIjoge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEhlYWRlckRheU9mV2VlayA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgY29sb3I6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udENvbG9yLFxuICBwYWRkaW5nTGVmdDogdGhlbWUuc3BhY2luZyhcInhzXCIpLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRUeXBvZ3JhcGh5ID0gc3R5bGVkKEh2VHlwb2dyYXBoeSkoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgY29sb3I6IHRoZW1lLmNvbG9ycy5uZWdhdGl2ZSxcbn0pO1xuIl19 */");
-const StyledHeaderDayOfWeek = /* @__PURE__ */ _styled(HvTypography, process.env.NODE_ENV === "production" ? {
-  target: "e1yjj6ap1"
-} : {
-  target: "e1yjj6ap1",
-  label: "StyledHeaderDayOfWeek"
-})({
-  color: theme.calendar.headerInputFontColor,
-  paddingLeft: theme.spacing("xs")
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpRHFDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCB7IEh2VHlwb2dyYXBoeSB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL1R5cG9ncmFwaHlcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvZm9jdXNVdGlsc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIG1hcmdpblRvcDogdGhlbWUuc3BhY2luZyhcInhzXCIpLFxuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgYm9yZGVyQm90dG9tOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEJvcmRlckJvdHRvbSxcbiAgYm9yZGVyVG9wOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEJvcmRlclRvcCxcbiAgYm9yZGVyTGVmdDogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJMZWZ0LFxuICBib3JkZXJSaWdodDogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJSaWdodCxcbiAgYm9yZGVyUmFkaXVzOiB0aGVtZS5jYWxlbmRhci5ib3JkZXJSYWRpdXMsXG4gIFwiJjpob3ZlciwgJjpmb2N1c1wiOiB7XG4gICAgYm9yZGVyQm90dG9tOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeX1gLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnB1dEJvcmRlckNvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLm5lZ2F0aXZlLFxuICBoZWlnaHQ6IDEsXG4gIG1hcmdpblRvcDogLTEsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZElucHV0ID0gc3R5bGVkKChwcm9wcykgPT4gPGlucHV0IHsuLi5wcm9wc30gLz4pKHtcbiAgYm9yZGVyOiBcIm5vbmVcIixcbiAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gIHBhZGRpbmc6IGA1cHggJHt0aGVtZS5zcGFjaW5nKFwieHNcIil9YCxcbiAgZm9udEZhbWlseTogdGhlbWUuZm9udEZhbWlseS5ib2R5LFxuXG4gIGNvbG9yOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRDb2xvcixcbiAgZm9udFNpemU6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udFNpemUsXG4gIGxldHRlclNwYWNpbmc6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udExldHRlclNwYWNpbmcsXG4gIGxpbmVIZWlnaHQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udExpbmVIZWlnaHQsXG4gIGZvbnRXZWlnaHQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udFdlaWdodCxcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBcIiY6OnBsYWNlaG9sZGVyXCI6IHtcbiAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeV82MCxcbiAgfSxcbiAgXCImOmZvY3VzXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcbiAgXCImOmZvY3VzLXZpc2libGVcIjoge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEhlYWRlckRheU9mV2VlayA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgY29sb3I6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udENvbG9yLFxuICBwYWRkaW5nTGVmdDogdGhlbWUuc3BhY2luZyhcInhzXCIpLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRUeXBvZ3JhcGh5ID0gc3R5bGVkKEh2VHlwb2dyYXBoeSkoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgY29sb3I6IHRoZW1lLmNvbG9ycy5uZWdhdGl2ZSxcbn0pO1xuIl19 */");
-const StyledTypography = /* @__PURE__ */ _styled(HvTypography, process.env.NODE_ENV === "production" ? {
-  target: "e1yjj6ap0"
-} : {
-  target: "e1yjj6ap0",
-  label: "StyledTypography"
-})({
-  display: "flex",
-  alignItems: "center",
-  color: theme.colors.negative
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzRGdDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCB7IEh2VHlwb2dyYXBoeSB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL1R5cG9ncmFwaHlcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvZm9jdXNVdGlsc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIG1hcmdpblRvcDogdGhlbWUuc3BhY2luZyhcInhzXCIpLFxuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgYm9yZGVyQm90dG9tOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEJvcmRlckJvdHRvbSxcbiAgYm9yZGVyVG9wOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEJvcmRlclRvcCxcbiAgYm9yZGVyTGVmdDogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJMZWZ0LFxuICBib3JkZXJSaWdodDogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJSaWdodCxcbiAgYm9yZGVyUmFkaXVzOiB0aGVtZS5jYWxlbmRhci5ib3JkZXJSYWRpdXMsXG4gIFwiJjpob3ZlciwgJjpmb2N1c1wiOiB7XG4gICAgYm9yZGVyQm90dG9tOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeX1gLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnB1dEJvcmRlckNvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLm5lZ2F0aXZlLFxuICBoZWlnaHQ6IDEsXG4gIG1hcmdpblRvcDogLTEsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZElucHV0ID0gc3R5bGVkKChwcm9wcykgPT4gPGlucHV0IHsuLi5wcm9wc30gLz4pKHtcbiAgYm9yZGVyOiBcIm5vbmVcIixcbiAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gIHBhZGRpbmc6IGA1cHggJHt0aGVtZS5zcGFjaW5nKFwieHNcIil9YCxcbiAgZm9udEZhbWlseTogdGhlbWUuZm9udEZhbWlseS5ib2R5LFxuXG4gIGNvbG9yOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRDb2xvcixcbiAgZm9udFNpemU6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udFNpemUsXG4gIGxldHRlclNwYWNpbmc6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udExldHRlclNwYWNpbmcsXG4gIGxpbmVIZWlnaHQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udExpbmVIZWlnaHQsXG4gIGZvbnRXZWlnaHQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udFdlaWdodCxcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBcIiY6OnBsYWNlaG9sZGVyXCI6IHtcbiAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeV82MCxcbiAgfSxcbiAgXCImOmZvY3VzXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcbiAgXCImOmZvY3VzLXZpc2libGVcIjoge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEhlYWRlckRheU9mV2VlayA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgY29sb3I6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udENvbG9yLFxuICBwYWRkaW5nTGVmdDogdGhlbWUuc3BhY2luZyhcInhzXCIpLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRUeXBvZ3JhcGh5ID0gc3R5bGVkKEh2VHlwb2dyYXBoeSkoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgY29sb3I6IHRoZW1lLmNvbG9ycy5uZWdhdGl2ZSxcbn0pO1xuIl19 */");
+});
 export {
-  StyledHeaderDayOfWeek,
-  StyledInput,
-  StyledInputBorderContainer,
-  StyledRoot,
-  StyledTypography
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=CalendarHeader.styles.js.map

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 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\nexport const StyledRoot = styled(\"div\")({\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\nexport const StyledInputBorderContainer = styled(\"div\")({\n  backgroundColor: theme.colors.negative,\n  height: 1,\n  marginTop: -1,\n});\n\nexport const StyledInput = styled((props) => <input {...props} />)({\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\nexport const StyledHeaderDayOfWeek = styled(HvTypography)({\n  color: theme.calendar.headerInputFontColor,\n  paddingLeft: theme.spacing(\"xs\"),\n});\n\nexport const StyledTypography = styled(HvTypography)({\n  display: \"flex\",\n  alignItems: \"center\",\n  color: theme.colors.negative,\n});\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","marginTop","theme","spacing","backgroundColor","colors","atmo1","borderBottom","calendar","headerInputBorderBottom","borderTop","headerInputBorderTop","borderLeft","headerInputBorderLeft","borderRight","headerInputBorderRight","borderRadius","secondary","StyledInputBorderContainer","negative","height","StyledInput","_styled","props","_jsx","border","padding","fontFamily","body","color","headerInputFontColor","fontSize","headerInputFontSize","letterSpacing","headerInputFontLetterSpacing","lineHeight","headerInputFontLineHeight","fontWeight","headerInputFontWeight","width","secondary_60","outline","outlineStyles","StyledHeaderDayOfWeek","HvTypography","paddingLeft","StyledTypography","display","alignItems"],"mappings":";;;;;AAOO,MAAMA,aAAoB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACtCC,WAAWC,MAAMC,QAAQ,IAAI;AAAA,EAC7BC,iBAAiBF,MAAMG,OAAOC;AAAAA,EAC9BC,cAAcL,MAAMM,SAASC;AAAAA,EAC7BC,WAAWR,MAAMM,SAASG;AAAAA,EAC1BC,YAAYV,MAAMM,SAASK;AAAAA,EAC3BC,aAAaZ,MAAMM,SAASO;AAAAA,EAC5BC,cAAcd,MAAMM,SAASQ;AAAAA,EAC7B,oBAAoB;AAAA,IAClBT,cAAe,aAAYL,MAAMG,OAAOY;AAAAA,EAC1C;AACF,GAACrB,QAAAC,IAAAC,aAAC,eAAA,KAAA,q5FAAA;AAEK,MAAMoB,6BAAoC,wBAAA,OAAKtB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACtDI,iBAAiBF,MAAMG,OAAOc;AAAAA,EAC9BC,QAAQ;AAAA,EACRnB,WAAW;AACb,GAACL,QAAAC,IAAAC,aAAC,eAAA,KAAA,q5FAAA;AAEK,MAAMuB,cAAcC,wBAAQC,CAAUC,UAAAA,oBAAA,SAAA;AAAA,EAAA,GAAWD;AAAK,CAAG,GAAC3B,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACjEyB,QAAQ;AAAA,EACRrB,iBAAiB;AAAA,EACjBsB,SAAU,OAAMxB,MAAMC,QAAQ,IAAI;AAAA,EAClCwB,YAAYzB,MAAMyB,WAAWC;AAAAA,EAE7BC,OAAO3B,MAAMM,SAASsB;AAAAA,EACtBC,UAAU7B,MAAMM,SAASwB;AAAAA,EACzBC,eAAe/B,MAAMM,SAAS0B;AAAAA,EAC9BC,YAAYjC,MAAMM,SAAS4B;AAAAA,EAC3BC,YAAYnC,MAAMM,SAAS8B;AAAAA,EAC3BC,OAAO;AAAA,EACP,kBAAkB;AAAA,IAChBV,OAAO3B,MAAMG,OAAOmC;AAAAA,EACtB;AAAA,EACA,WAAW;AAAA,IACTC,SAAS;AAAA,EACX;AAAA,EACA,mBAAmB;AAAA,IACjB,GAAGC;AAAAA,EACL;AACF,GAAC9C,QAAAC,IAAAC,aAAC,eAAA,KAAA,q5FAAA;AAEK,MAAM6C,wBAA+BC,wBAAAA,cAAYhD,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACxD6B,OAAO3B,MAAMM,SAASsB;AAAAA,EACtBe,aAAa3C,MAAMC,QAAQ,IAAI;AACjC,GAACP,QAAAC,IAAAC,aAAC,eAAA,KAAA,q5FAAA;AAEK,MAAMgD,mBAA0BF,wBAAAA,cAAYhD,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACnD+C,SAAS;AAAA,EACTC,YAAY;AAAA,EACZnB,OAAO3B,MAAMG,OAAOc;AACtB,GAACvB,QAAAC,IAAAC,aAAC,eAAA,KAAA,q5FAAA;"}
+{"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;AAAAA,IAC1C;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;AAAA,IAClCwB,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;"}

package/dist/esm/components/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.js

@@ -1,12 +1,11 @@
 import { setId } from "../../../../utils/setId.js";
-import { clsx } from "clsx";
 import { getMonthNamesList } from "../../utils.js";
-import composedNavigationClasses from "./composedNavigationClasses.js";
-import { StyledNavigationContainer, StyledNavigationMonth } from "./ComposedNavigation.styles.js";
+import { useClasses } from "./ComposedNavigation.styles.js";
+import { staticClasses } from "./ComposedNavigation.styles.js";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { Navigation } from "../Navigation/Navigation.js";
 const HvComposedNavigation = ({
-  classes,
+  classes: classesProp,
   id,
   locale,
   onChange,
@@ -15,13 +14,16 @@ const HvComposedNavigation = ({
   visibleMonth,
   ...others
 }) => {
+  const {
+    classes
+  } = useClasses(classesProp);
   const listMonthNamesLong = getMonthNamesList(locale, "long");
   const monthName = listMonthNamesLong[visibleMonth - 1];
-  return /* @__PURE__ */ jsxs(StyledNavigationContainer, {
-    className: clsx(composedNavigationClasses.navigationContainer, classes == null ? void 0 : classes.navigationContainer),
+  return /* @__PURE__ */ jsxs("div", {
+    className: classes.navigationContainer,
     ...others,
-    children: [/* @__PURE__ */ jsx(StyledNavigationMonth, {
-      className: clsx(composedNavigationClasses.navigationMonth, classes == null ? void 0 : classes.navigationMonth),
+    children: [/* @__PURE__ */ jsx("div", {
+      className: classes.navigationMonth,
       children: /* @__PURE__ */ jsx(Navigation, {
         id: setId(id, "navigation-month"),
         navigationText: monthName,
@@ -34,7 +36,7 @@ const HvComposedNavigation = ({
         onTextClick: () => {
           onViewModeChange("monthly");
         },
-        className: clsx(composedNavigationClasses.navigationMonth, classes == null ? void 0 : classes.navigationMonth)
+        className: classes.navigationMonth
       })
     }), /* @__PURE__ */ jsx(Navigation, {
       id: setId(id, "navigation-year"),
@@ -49,6 +51,7 @@ const HvComposedNavigation = ({
   });
 };
 export {
-  HvComposedNavigation
+  HvComposedNavigation,
+  staticClasses as composedNavigationClasses
 };
 //# sourceMappingURL=ComposedNavigation.js.map

package/dist/esm/components/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComposedNavigation.js","sources":["../../../../../../src/components/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.tsx"],"sourcesContent":["import { setId } from \"@core/utils/setId\";\n\nimport { clsx } from \"clsx\";\n\nimport { getMonthNamesList } from \"../../utils\";\nimport { ViewMode } from \"../../enums\";\nimport { Navigation } from \"../Navigation\";\nimport composedNavigationClasses, {\n  HvComposedNavigationClasses,\n} from \"./composedNavigationClasses\";\nimport {\n  StyledNavigationContainer,\n  StyledNavigationMonth,\n} from \"./ComposedNavigation.styles\";\nimport { VisibilitySelectorActions } from \"../../types\";\n\nexport const HvComposedNavigation = ({\n  classes,\n  id,\n  locale,\n  onChange,\n  onViewModeChange,\n  visibleYear,\n  visibleMonth,\n  ...others\n}: HvComposedNavigationProps) => {\n  const listMonthNamesLong = getMonthNamesList(locale, \"long\");\n  const monthName = listMonthNamesLong[visibleMonth - 1];\n\n  return (\n    <StyledNavigationContainer\n      className={clsx(\n        composedNavigationClasses.navigationContainer,\n        classes?.navigationContainer\n      )}\n      {...others}\n    >\n      <StyledNavigationMonth\n        className={clsx(\n          composedNavigationClasses.navigationMonth,\n          classes?.navigationMonth\n        )}\n      >\n        <Navigation\n          id={setId(id, \"navigation-month\")}\n          navigationText={monthName}\n          onNavigatePrevious={(event) => {\n            onChange?.(event, \"previous_month\");\n          }}\n          onNavigateNext={(event) => {\n            onChange?.(event, \"next_month\");\n          }}\n          onTextClick={() => {\n            onViewModeChange(\"monthly\");\n          }}\n          className={clsx(\n            composedNavigationClasses.navigationMonth,\n            classes?.navigationMonth\n          )}\n        />\n      </StyledNavigationMonth>\n\n      <Navigation\n        id={setId(id, \"navigation-year\")}\n        navigationText={visibleYear.toString()}\n        onNavigatePrevious={(event) => {\n          onChange?.(event, \"previous_year\");\n        }}\n        onNavigateNext={(event) => {\n          onChange?.(event, \"next_year\");\n        }}\n      />\n    </StyledNavigationContainer>\n  );\n};\n\nexport interface HvComposedNavigationProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvComposedNavigationClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\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, action: VisibilitySelectorActions) => void;\n  /**\n   * Callback to define the view mode.\n   */\n  onViewModeChange: (viewMode: ViewMode) => void;\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"],"names":["HvComposedNavigation","classes","id","locale","onChange","onViewModeChange","visibleYear","visibleMonth","others","listMonthNamesLong","getMonthNamesList","monthName","StyledNavigationContainer","className","clsx","composedNavigationClasses","navigationContainer","children","_jsx","StyledNavigationMonth","navigationMonth","Navigation","setId","navigationText","onNavigatePrevious","event","onNavigateNext","onTextClick","toString"],"mappings":";;;;;;;AAgBO,MAAMA,uBAAuBA,CAAC;AAAA,EACnCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACsB,MAAM;AACzBC,QAAAA,qBAAqBC,kBAAkBP,QAAQ,MAAM;AACrDQ,QAAAA,YAAYF,mBAAmBF,eAAe,CAAC;AAErD,8BACGK,2BAAyB;AAAA,IACxBC,WAAWC,KACTC,0BAA0BC,qBAC1Bf,mCAASe,mBACX;AAAA,IAAE,GACER;AAAAA,IAAMS,UAAA,CAEVC,oBAACC,uBAAqB;AAAA,MACpBN,WAAWC,KACTC,0BAA0BK,iBAC1BnB,mCAASmB,eACX;AAAA,MAAEH,8BAEDI,YAAU;AAAA,QACTnB,IAAIoB,MAAMpB,IAAI,kBAAkB;AAAA,QAChCqB,gBAAgBZ;AAAAA,QAChBa,oBAAqBC,CAAU,UAAA;AAC7BrB,+CAAWqB,OAAO;AAAA,QACpB;AAAA,QACAC,gBAAiBD,CAAU,UAAA;AACzBrB,+CAAWqB,OAAO;AAAA,QACpB;AAAA,QACAE,aAAaA,MAAM;AACjBtB,2BAAiB,SAAS;AAAA,QAC5B;AAAA,QACAQ,WAAWC,KACTC,0BAA0BK,iBAC1BnB,mCAASmB,eACX;AAAA,MAAA,CACD;AAAA,IAAA,CACoB,GAEvBF,oBAACG,YAAU;AAAA,MACTnB,IAAIoB,MAAMpB,IAAI,iBAAiB;AAAA,MAC/BqB,gBAAgBjB,YAAYsB,SAAS;AAAA,MACrCJ,oBAAqBC,CAAU,UAAA;AAC7BrB,6CAAWqB,OAAO;AAAA,MACpB;AAAA,MACAC,gBAAiBD,CAAU,UAAA;AACzBrB,6CAAWqB,OAAO;AAAA,MACpB;AAAA,IAAA,CACD,CAAC;AAAA,EAAA,CACuB;AAE/B;"}
+{"version":3,"file":"ComposedNavigation.js","sources":["../../../../../../src/components/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.tsx"],"sourcesContent":["import { setId } from \"@core/utils/setId\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { getMonthNamesList } from \"../../utils\";\nimport { ViewMode } from \"../../enums\";\nimport { Navigation } from \"../Navigation\";\nimport { VisibilitySelectorActions } from \"../../types\";\n\nimport { staticClasses, useClasses } from \"./ComposedNavigation.styles\";\n\nexport { staticClasses as composedNavigationClasses };\n\nexport type HvComposedNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport const HvComposedNavigation = ({\n  classes: classesProp,\n  id,\n  locale,\n  onChange,\n  onViewModeChange,\n  visibleYear,\n  visibleMonth,\n  ...others\n}: HvComposedNavigationProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const listMonthNamesLong = getMonthNamesList(locale, \"long\");\n  const monthName = listMonthNamesLong[visibleMonth - 1];\n\n  return (\n    <div className={classes.navigationContainer} {...others}>\n      <div className={classes.navigationMonth}>\n        <Navigation\n          id={setId(id, \"navigation-month\")}\n          navigationText={monthName}\n          onNavigatePrevious={(event) => {\n            onChange?.(event, \"previous_month\");\n          }}\n          onNavigateNext={(event) => {\n            onChange?.(event, \"next_month\");\n          }}\n          onTextClick={() => {\n            onViewModeChange(\"monthly\");\n          }}\n          className={classes.navigationMonth}\n        />\n      </div>\n\n      <Navigation\n        id={setId(id, \"navigation-year\")}\n        navigationText={visibleYear.toString()}\n        onNavigatePrevious={(event) => {\n          onChange?.(event, \"previous_year\");\n        }}\n        onNavigateNext={(event) => {\n          onChange?.(event, \"next_year\");\n        }}\n      />\n    </div>\n  );\n};\n\nexport interface HvComposedNavigationProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvComposedNavigationClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\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, action: VisibilitySelectorActions) => void;\n  /**\n   * Callback to define the view mode.\n   */\n  onViewModeChange: (viewMode: ViewMode) => void;\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"],"names":["HvComposedNavigation","classes","classesProp","id","locale","onChange","onViewModeChange","visibleYear","visibleMonth","others","useClasses","listMonthNamesLong","getMonthNamesList","monthName","className","navigationContainer","children","_jsx","navigationMonth","Navigation","setId","navigationText","onNavigatePrevious","event","onNavigateNext","onTextClick","toString"],"mappings":";;;;;;AAcO,MAAMA,uBAAuBA,CAAC;AAAA,EACnCC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACsB,MAAM;AACzB,QAAA;AAAA,IAAER;AAAAA,EAAAA,IAAYS,WAAWR,WAAW;AAEpCS,QAAAA,qBAAqBC,kBAAkBR,QAAQ,MAAM;AACrDS,QAAAA,YAAYF,mBAAmBH,eAAe,CAAC;AAErD,8BACE,OAAA;AAAA,IAAKM,WAAWb,QAAQc;AAAAA,IAAoB,GAAKN;AAAAA,IAAMO,WACrDC,oBAAA,OAAA;AAAA,MAAKH,WAAWb,QAAQiB;AAAAA,MAAgBF,8BACrCG,YAAU;AAAA,QACThB,IAAIiB,MAAMjB,IAAI,kBAAkB;AAAA,QAChCkB,gBAAgBR;AAAAA,QAChBS,oBAAqBC,CAAU,UAAA;AAC7BlB,+CAAWkB,OAAO;AAAA,QACpB;AAAA,QACAC,gBAAiBD,CAAU,UAAA;AACzBlB,+CAAWkB,OAAO;AAAA,QACpB;AAAA,QACAE,aAAaA,MAAM;AACjBnB,2BAAiB,SAAS;AAAA,QAC5B;AAAA,QACAQ,WAAWb,QAAQiB;AAAAA,MAAAA,CACpB;AAAA,IAAA,CACE,GAELD,oBAACE,YAAU;AAAA,MACThB,IAAIiB,MAAMjB,IAAI,iBAAiB;AAAA,MAC/BkB,gBAAgBd,YAAYmB,SAAS;AAAA,MACrCJ,oBAAqBC,CAAU,UAAA;AAC7BlB,6CAAWkB,OAAO;AAAA,MACpB;AAAA,MACAC,gBAAiBD,CAAU,UAAA;AACzBlB,6CAAWkB,OAAO;AAAA,MACpB;AAAA,IAAA,CACD,CAAC;AAAA,EAAA,CACC;AAET;"}

package/dist/esm/components/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.js

@@ -1,34 +1,20 @@
-import _styled from "@emotion/styled/base";
+import { createClasses } from "../../../../utils/classes.js";
 import { theme } from "@hitachivantara/uikit-styles";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const StyledNavigationContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "es2ikxx1"
-} : {
-  target: "es2ikxx1",
-  label: "StyledNavigationContainer"
-})({
-  display: "flex",
-  justifyContent: "space-between",
-  padding: theme.spacing(["xs", 0])
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJOYXZpZ2F0aW9uL0NvbXBvc2VkTmF2aWdhdGlvbi9Db21wb3NlZE5hdmlnYXRpb24uc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHeUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9DYWxlbmRhci9DYWxlbmRhck5hdmlnYXRpb24vQ29tcG9zZWROYXZpZ2F0aW9uL0NvbXBvc2VkTmF2aWdhdGlvbi5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWROYXZpZ2F0aW9uQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWJldHdlZW5cIixcbiAgcGFkZGluZzogdGhlbWUuc3BhY2luZyhbXCJ4c1wiLCAwXSksXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZE5hdmlnYXRpb25Nb250aCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIG1pbldpZHRoOiBcIjE2MHB4XCIsXG59KTtcbiJdfQ== */");
-const StyledNavigationMonth = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "es2ikxx0"
-} : {
-  target: "es2ikxx0",
-  label: "StyledNavigationMonth"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1adi3ip",
-  styles: "min-width:160px"
-} : {
-  name: "1adi3ip",
-  styles: "min-width:160px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJOYXZpZ2F0aW9uL0NvbXBvc2VkTmF2aWdhdGlvbi9Db21wb3NlZE5hdmlnYXRpb24uc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTcUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9DYWxlbmRhci9DYWxlbmRhck5hdmlnYXRpb24vQ29tcG9zZWROYXZpZ2F0aW9uL0NvbXBvc2VkTmF2aWdhdGlvbi5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWROYXZpZ2F0aW9uQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWJldHdlZW5cIixcbiAgcGFkZGluZzogdGhlbWUuc3BhY2luZyhbXCJ4c1wiLCAwXSksXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZE5hdmlnYXRpb25Nb250aCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIG1pbldpZHRoOiBcIjE2MHB4XCIsXG59KTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvComposedNavigation", {
+  navigationContainer: {
+    display: "flex",
+    justifyContent: "space-between",
+    padding: theme.spacing(["xs", 0])
+  },
+  navigationMonth: {
+    minWidth: "160px"
+  }
 });
 export {
-  StyledNavigationContainer,
-  StyledNavigationMonth
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=ComposedNavigation.styles.js.map

package/dist/esm/components/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComposedNavigation.styles.js","sources":["../../../../../../src/components/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const StyledNavigationContainer = styled(\"div\")({\n  display: \"flex\",\n  justifyContent: \"space-between\",\n  padding: theme.spacing([\"xs\", 0]),\n});\n\nexport const StyledNavigationMonth = styled(\"div\")({\n  minWidth: \"160px\",\n});\n"],"names":["StyledNavigationContainer","process","env","NODE_ENV","target","label","display","justifyContent","padding","theme","spacing","StyledNavigationMonth","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"mappings":";;;;;AAGO,MAAMA,4BAAmC,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACrDC,SAAS;AAAA,EACTC,gBAAgB;AAAA,EAChBC,SAASC,MAAMC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAClC,GAACT,QAAAC,IAAAC,aAAC,eAAA,KAAA,6iCAAA;AAEK,MAAMQ,wBAA+B,wBAAA,OAAKV,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAS,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAEjD;"}
+{"version":3,"file":"ComposedNavigation.styles.js","sources":["../../../../../../src/components/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvComposedNavigation\",\n  {\n    navigationContainer: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      padding: theme.spacing([\"xs\", 0]),\n    },\n    navigationMonth: {\n      minWidth: \"160px\",\n    },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","navigationContainer","display","justifyContent","padding","theme","spacing","navigationMonth","minWidth"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAC3C,wBACA;AAAA,EACEC,qBAAqB;AAAA,IACnBC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,SAASC,MAAMC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,EAClC;AAAA,EACAC,iBAAiB;AAAA,IACfC,UAAU;AAAA,EACZ;AACF,CACF;"}

package/dist/esm/components/Calendar/CalendarNavigation/MonthSelector/MonthSelector.js

@@ -1,11 +1,11 @@
-import { clsx } from "clsx";
 import { isKey } from "../../../../utils/keyboardUtils.js";
 import { getMonthNamesList } from "../../utils.js";
-import monthSelectorClasses from "./monthSelectorClasses.js";
-import { StyledCalendarMonthlyGrid, StyledFocusSelection, StyledCalendarMonthlyCell } from "./MonthSelector.styles.js";
+import { useClasses } from "./MonthSelector.styles.js";
+import { staticClasses } from "./MonthSelector.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { HvTypography } from "../../../Typography/Typography.js";
 const HvMonthSelector = ({
-  classes,
+  classes: classesProp,
   id,
   locale,
   onChange,
@@ -14,6 +14,10 @@ const HvMonthSelector = ({
   visibleMonth,
   ...others
 }) => {
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const listMonthNamesShort = getMonthNamesList(locale, "short");
   const onKeyDownHandler = (event, index) => {
     if (isKey(event, "Enter")) {
@@ -21,10 +25,13 @@ const HvMonthSelector = ({
       onViewModeChange("calendar");
     }
   };
-  return /* @__PURE__ */ jsx(StyledCalendarMonthlyGrid, {
-    className: clsx(monthSelectorClasses.calendarMonthlyGrid, classes == null ? void 0 : classes.calendarMonthlyGrid, rangeMode ? clsx(monthSelectorClasses.rangeModeWidth, classes == null ? void 0 : classes.rangeModeWidth) : clsx(monthSelectorClasses.normalWidth, classes == null ? void 0 : classes.normalWidth)),
-    children: listMonthNamesShort.map((monthName, index) => /* @__PURE__ */ jsx(StyledFocusSelection, {
-      className: clsx(monthSelectorClasses.focusSelection, classes == null ? void 0 : classes.focusSelection),
+  return /* @__PURE__ */ jsx("div", {
+    className: cx(classes.calendarMonthlyGrid, {
+      [classes.rangeModeWidth]: rangeMode,
+      [classes.normalWidth]: !rangeMode
+    }),
+    children: listMonthNamesShort.map((monthName, index) => /* @__PURE__ */ jsx("div", {
+      className: classes.focusSelection,
       role: "button",
       onClick: (event) => {
         onChange == null ? void 0 : onChange(event, "month", index + 1);
@@ -33,14 +40,17 @@ const HvMonthSelector = ({
       onKeyDown: (event) => onKeyDownHandler(event, index),
       tabIndex: 0,
       ...others,
-      children: /* @__PURE__ */ jsx(StyledCalendarMonthlyCell, {
-        className: clsx(monthSelectorClasses.calendarMonthlyCell, classes == null ? void 0 : classes.calendarMonthlyCell, index + 1 === visibleMonth && clsx(monthSelectorClasses.calendarMonthlyCellSelected, classes == null ? void 0 : classes.calendarMonthlyCellSelected)),
+      children: /* @__PURE__ */ jsx(HvTypography, {
+        className: cx(classes.calendarMonthlyCell, {
+          [classes.calendarMonthlyCellSelected]: index + 1 === visibleMonth
+        }),
         children: monthName
       })
     }, monthName))
   });
 };
 export {
-  HvMonthSelector
+  HvMonthSelector,
+  staticClasses as monthSelectorClasses
 };
 //# sourceMappingURL=MonthSelector.js.map