@fluentui/react-calendar-compat 0.0.0-nightly-20250717-0406.1 → 0.0.0-nightly-20250718-0405.1

package/CHANGELOG.md

@@ -1,25 +1,35 @@
 # Change Log - @fluentui/react-calendar-compat
 
-This log was last generated on Thu, 17 Jul 2025 04:21:06 GMT and should not be manually modified.
+This log was last generated on Fri, 18 Jul 2025 04:20:26 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20250717-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-calendar-compat_v0.0.0-nightly-20250717-0406.1)
+## [0.0.0-nightly-20250718-0405.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-calendar-compat_v0.0.0-nightly-20250718-0405.1)
 
-Thu, 17 Jul 2025 04:21:06 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-calendar-compat_v0.3.3..@fluentui/react-calendar-compat_v0.0.0-nightly-20250717-0406.1)
+Fri, 18 Jul 2025 04:20:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-calendar-compat_v0.3.4..@fluentui/react-calendar-compat_v0.0.0-nightly-20250718-0405.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20250717-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f0495e8b8894cf07db8628dd12264bb8ef07e4e) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250717-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f0495e8b8894cf07db8628dd12264bb8ef07e4e) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250717-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f0495e8b8894cf07db8628dd12264bb8ef07e4e) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20250717-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f0495e8b8894cf07db8628dd12264bb8ef07e4e) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20250717-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f0495e8b8894cf07db8628dd12264bb8ef07e4e) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20250717-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f0495e8b8894cf07db8628dd12264bb8ef07e4e) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20250717-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f0495e8b8894cf07db8628dd12264bb8ef07e4e) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250717-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f0495e8b8894cf07db8628dd12264bb8ef07e4e) by beachball)
+- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20250718-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/ab7d5b05ebda00ad8978b3c581cc55924d972bf7) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250718-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/ab7d5b05ebda00ad8978b3c581cc55924d972bf7) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250718-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/ab7d5b05ebda00ad8978b3c581cc55924d972bf7) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20250718-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/ab7d5b05ebda00ad8978b3c581cc55924d972bf7) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20250718-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/ab7d5b05ebda00ad8978b3c581cc55924d972bf7) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20250718-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/ab7d5b05ebda00ad8978b3c581cc55924d972bf7) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20250718-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/ab7d5b05ebda00ad8978b3c581cc55924d972bf7) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250718-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/ab7d5b05ebda00ad8978b3c581cc55924d972bf7) by beachball)
+
+## [0.3.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-calendar-compat_v0.3.4)
+
+Thu, 17 Jul 2025 13:49:35 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-calendar-compat_v0.3.3..@fluentui/react-calendar-compat_v0.3.4)
+
+### Patches
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
 
 ## [0.3.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-calendar-compat_v0.3.3)
 

package/lib/components/Calendar/useCalendarStyles.styles.raw.js

@@ -0,0 +1,115 @@
+import { tokens } from '@fluentui/react-theme';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+/**
+ * @internal
+ */ export const calendarClassNames = {
+    root: 'fui-Calendar',
+    divider: 'fui-Calendar__divider',
+    goTodayButton: 'fui-Calendar__goTodayButton',
+    monthPickerWrapper: 'fui-Calendar__monthPickerWrapper',
+    liveRegion: 'fui-Calendar__liveRegion'
+};
+const useRootStyles = makeStyles({
+    base: {
+        display: 'flex',
+        width: '220px'
+    },
+    normalize: {
+        boxShadow: 'none',
+        boxSizing: 'border-box',
+        margin: '0',
+        padding: '0'
+    },
+    monthPickerNotVisible: {
+        flexDirection: 'column'
+    },
+    dayAndMonthPickersVisible: {
+        width: '440px'
+    },
+    dayPickerVisibleAndWeekNumbersShown: {
+        width: '250px'
+    },
+    dayAndMonthPickersVisibleAndWeekNumbersShown: {
+        width: '470px'
+    }
+});
+const useDividerStyles = makeStyles({
+    base: {
+        borderRight: `1px solid ${tokens.colorNeutralStroke2}`,
+        top: 0
+    }
+});
+const useMonthPickerWrapperStyles = makeStyles({
+    base: {
+        display: 'flex',
+        flexDirection: 'column'
+    }
+});
+const useGoTodayButtonStyles = makeStyles({
+    base: {
+        alignSelf: 'flex-end',
+        backgroundColor: tokens.colorTransparentBackground,
+        ...shorthands.borderStyle('none'),
+        bottom: 0,
+        boxSizing: 'content-box',
+        color: tokens.colorNeutralForeground1,
+        fontFamily: 'inherit',
+        fontSize: tokens.fontSizeBase200,
+        height: '30px',
+        lineHeight: '30px',
+        marginRight: '16px',
+        marginTop: '3px',
+        overflow: 'visible',
+        padding: '0 4px',
+        '& div': {
+            fontSize: tokens.fontSizeBase200
+        },
+        '&:hover': {
+            backgroundColor: tokens.colorTransparentBackground,
+            color: tokens.colorBrandForeground1,
+            cursor: 'pointer',
+            '@media (forced-colors: active)': {
+                outline: tokens.strokeWidthThin,
+                borderRadius: tokens.borderRadiusSmall
+            }
+        },
+        '&:hover:active': {
+            color: tokens.colorBrandForeground2
+        },
+        '&:disabled': {
+            color: tokens.colorNeutralForegroundDisabled,
+            pointerEvents: 'none'
+        }
+    }
+});
+const useLiveRegionStyles = makeStyles({
+    base: {
+        border: 'none',
+        height: '1px',
+        margin: '-1px',
+        overflow: 'hidden',
+        padding: '0',
+        position: 'absolute',
+        width: '1px'
+    }
+});
+/**
+ * @internal
+ *
+ * Apply styling to the Calendar slots based on the state
+ */ export const useCalendarStyles_unstable = (props)=>{
+    'use no memo';
+    const rootStyles = useRootStyles();
+    const dividerStyles = useDividerStyles();
+    const monthPickerWrapperStyles = useMonthPickerWrapperStyles();
+    const goTodayButtonStyles = useGoTodayButtonStyles();
+    const liveRegionStyles = useLiveRegionStyles();
+    const { className, isDayPickerVisible, isMonthPickerVisible, showWeekNumbers } = props;
+    return {
+        root: mergeClasses(calendarClassNames.root, rootStyles.base, rootStyles.normalize, !isMonthPickerVisible && rootStyles.monthPickerNotVisible, isDayPickerVisible && isMonthPickerVisible && !showWeekNumbers && rootStyles.dayAndMonthPickersVisible, isDayPickerVisible && !isMonthPickerVisible && showWeekNumbers && rootStyles.dayPickerVisibleAndWeekNumbersShown, isDayPickerVisible && isMonthPickerVisible && showWeekNumbers && rootStyles.dayAndMonthPickersVisibleAndWeekNumbersShown, className),
+        divider: mergeClasses(calendarClassNames.divider, dividerStyles.base),
+        monthPickerWrapper: mergeClasses(calendarClassNames.monthPickerWrapper, monthPickerWrapperStyles.base),
+        goTodayButton: mergeClasses(calendarClassNames.goTodayButton, goTodayButtonStyles.base),
+        liveRegion: mergeClasses(calendarClassNames.liveRegion, liveRegionStyles.base)
+    };
+};

package/lib/components/Calendar/useCalendarStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Calendar/useCalendarStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CalendarStyles, CalendarStyleProps } from './Calendar.types';\n\n/**\n * @internal\n */\nexport const calendarClassNames: SlotClassNames<CalendarStyles> = {\n  root: 'fui-Calendar',\n  divider: 'fui-Calendar__divider',\n  goTodayButton: 'fui-Calendar__goTodayButton',\n  monthPickerWrapper: 'fui-Calendar__monthPickerWrapper',\n  liveRegion: 'fui-Calendar__liveRegion',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'flex',\n    width: '220px',\n  },\n  normalize: {\n    boxShadow: 'none',\n    boxSizing: 'border-box',\n    margin: '0',\n    padding: '0',\n  },\n  monthPickerNotVisible: {\n    flexDirection: 'column',\n  },\n  dayAndMonthPickersVisible: {\n    width: '440px',\n  },\n  dayPickerVisibleAndWeekNumbersShown: {\n    width: '250px',\n  },\n  dayAndMonthPickersVisibleAndWeekNumbersShown: {\n    width: '470px',\n  },\n});\n\nconst useDividerStyles = makeStyles({\n  base: {\n    borderRight: `1px solid ${tokens.colorNeutralStroke2}`,\n    top: 0,\n  },\n});\n\nconst useMonthPickerWrapperStyles = makeStyles({\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n});\n\nconst useGoTodayButtonStyles = makeStyles({\n  base: {\n    alignSelf: 'flex-end',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderStyle('none'),\n    bottom: 0,\n    boxSizing: 'content-box',\n    color: tokens.colorNeutralForeground1,\n    fontFamily: 'inherit',\n    fontSize: tokens.fontSizeBase200,\n    height: '30px',\n    lineHeight: '30px',\n    marginRight: '16px',\n    marginTop: '3px',\n    overflow: 'visible',\n    padding: '0 4px',\n\n    '& div': {\n      fontSize: tokens.fontSizeBase200,\n    },\n    '&:hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n      color: tokens.colorBrandForeground1,\n      cursor: 'pointer',\n\n      '@media (forced-colors: active)': {\n        outline: tokens.strokeWidthThin,\n        borderRadius: tokens.borderRadiusSmall,\n      },\n    },\n    '&:hover:active': {\n      color: tokens.colorBrandForeground2,\n    },\n    '&:disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n      pointerEvents: 'none',\n    },\n  },\n});\n\nconst useLiveRegionStyles = makeStyles({\n  base: {\n    border: 'none',\n    height: '1px',\n    margin: '-1px',\n    overflow: 'hidden',\n    padding: '0',\n    position: 'absolute',\n    width: '1px',\n  },\n});\n\n/**\n * @internal\n *\n * Apply styling to the Calendar slots based on the state\n */\nexport const useCalendarStyles_unstable = (props: CalendarStyleProps): CalendarStyles => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const dividerStyles = useDividerStyles();\n  const monthPickerWrapperStyles = useMonthPickerWrapperStyles();\n  const goTodayButtonStyles = useGoTodayButtonStyles();\n  const liveRegionStyles = useLiveRegionStyles();\n\n  const { className, isDayPickerVisible, isMonthPickerVisible, showWeekNumbers } = props;\n\n  return {\n    root: mergeClasses(\n      calendarClassNames.root,\n      rootStyles.base,\n      rootStyles.normalize,\n      !isMonthPickerVisible && rootStyles.monthPickerNotVisible,\n      isDayPickerVisible && isMonthPickerVisible && !showWeekNumbers && rootStyles.dayAndMonthPickersVisible,\n      isDayPickerVisible && !isMonthPickerVisible && showWeekNumbers && rootStyles.dayPickerVisibleAndWeekNumbersShown,\n      isDayPickerVisible &&\n        isMonthPickerVisible &&\n        showWeekNumbers &&\n        rootStyles.dayAndMonthPickersVisibleAndWeekNumbersShown,\n      className,\n    ),\n    divider: mergeClasses(calendarClassNames.divider, dividerStyles.base),\n    monthPickerWrapper: mergeClasses(calendarClassNames.monthPickerWrapper, monthPickerWrapperStyles.base),\n    goTodayButton: mergeClasses(calendarClassNames.goTodayButton, goTodayButtonStyles.base),\n    liveRegion: mergeClasses(calendarClassNames.liveRegion, liveRegionStyles.base),\n  };\n};\n"],"names":["tokens","makeStyles","mergeClasses","shorthands","calendarClassNames","root","divider","goTodayButton","monthPickerWrapper","liveRegion","useRootStyles","base","display","width","normalize","boxShadow","boxSizing","margin","padding","monthPickerNotVisible","flexDirection","dayAndMonthPickersVisible","dayPickerVisibleAndWeekNumbersShown","dayAndMonthPickersVisibleAndWeekNumbersShown","useDividerStyles","borderRight","colorNeutralStroke2","top","useMonthPickerWrapperStyles","useGoTodayButtonStyles","alignSelf","backgroundColor","colorTransparentBackground","borderStyle","bottom","color","colorNeutralForeground1","fontFamily","fontSize","fontSizeBase200","height","lineHeight","marginRight","marginTop","overflow","colorBrandForeground1","cursor","outline","strokeWidthThin","borderRadius","borderRadiusSmall","colorBrandForeground2","colorNeutralForegroundDisabled","pointerEvents","useLiveRegionStyles","border","position","useCalendarStyles_unstable","props","rootStyles","dividerStyles","monthPickerWrapperStyles","goTodayButtonStyles","liveRegionStyles","className","isDayPickerVisible","isMonthPickerVisible","showWeekNumbers"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/CalendarDay/useCalendarDayStyles.styles.raw.js

@@ -0,0 +1,142 @@
+import { tokens } from '@fluentui/react-theme';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { DURATION_2, EASING_FUNCTION_2, FADE_IN } from '../../utils/animations';
+/**
+ * @internal
+ */ export const calendarDayClassNames = {
+    root: 'fui-CalendarDay',
+    header: 'fui-CalendarDay__header',
+    monthAndYear: 'fui-CalendarDay__monthAndYear',
+    monthComponents: 'fui-CalendarDay__monthComponents',
+    headerIconButton: 'fui-CalendarDay__headerIconButton',
+    disabledStyle: 'fui-CalendarDay__disabledStyle'
+};
+const useRootStyles = makeStyles({
+    base: {
+        boxSizing: 'content-box',
+        padding: '12px',
+        width: '196px'
+    },
+    normalize: {
+        boxShadow: 'none',
+        boxSizing: 'border-box',
+        margin: '0',
+        padding: '0'
+    },
+    showWeekNumbers: {
+        width: '226px'
+    }
+});
+const useHeaderStyles = makeStyles({
+    base: {
+        display: 'inline-flex',
+        height: '28px',
+        lineHeight: '44px',
+        position: 'relative',
+        width: '100%'
+    }
+});
+const useMonthAndYearStyles = makeStyles({
+    base: {
+        alignItems: 'center',
+        backgroundColor: tokens.colorTransparentBackground,
+        ...shorthands.borderStyle('none'),
+        borderRadius: tokens.borderRadiusMedium,
+        color: tokens.colorNeutralForeground1,
+        display: 'inline-block',
+        flexGrow: 1,
+        fontFamily: 'inherit',
+        fontSize: tokens.fontSizeBase300,
+        fontWeight: tokens.fontWeightSemibold,
+        lineHeight: '28px',
+        overflow: 'hidden',
+        padding: '0 4px 0 10px',
+        textAlign: 'left',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+    },
+    animation: {
+        animationDuration: DURATION_2,
+        animationFillMode: 'both',
+        animationName: FADE_IN,
+        animationTimingFunction: EASING_FUNCTION_2
+    },
+    headerIsClickable: {
+        '&:hover': {
+            backgroundColor: tokens.colorBrandBackgroundInvertedHover,
+            color: tokens.colorBrandForegroundOnLightHover,
+            cursor: 'pointer',
+            outline: `1px solid ${tokens.colorTransparentStroke}`
+        },
+        '&:hover:active': {
+            backgroundColor: tokens.colorBrandBackgroundInvertedPressed,
+            color: tokens.colorBrandForegroundOnLightPressed,
+            cursor: 'pointer',
+            outline: `1px solid ${tokens.colorTransparentStroke}`
+        }
+    }
+});
+const useMonthComponentsStyles = makeStyles({
+    base: {
+        alignSelf: 'flex-end',
+        display: 'inline-flex'
+    }
+});
+const useHeaderIconButtonStyles = makeStyles({
+    base: {
+        backgroundColor: tokens.colorTransparentBackground,
+        ...shorthands.borderStyle('none'),
+        borderRadius: tokens.borderRadiusMedium,
+        color: tokens.colorNeutralForeground3,
+        display: 'block',
+        fontFamily: 'inherit',
+        fontSize: tokens.fontSizeBase200,
+        height: '28px',
+        lineHeight: '28px',
+        overflow: 'visible',
+        padding: '0',
+        position: 'relative',
+        textAlign: 'center',
+        width: '28px',
+        '&:hover': {
+            backgroundColor: tokens.colorBrandBackgroundInvertedHover,
+            color: tokens.colorBrandForegroundOnLightHover,
+            cursor: 'pointer',
+            outline: `1px solid ${tokens.colorTransparentStroke}`
+        },
+        '&:hover:active': {
+            backgroundColor: tokens.colorBrandBackgroundInvertedPressed,
+            color: tokens.colorBrandForegroundOnLightPressed
+        }
+    }
+});
+const useDisabledStyleStyles = makeStyles({
+    base: {
+        '&, &:disabled, & button': {
+            color: tokens.colorNeutralForegroundDisabled,
+            pointerEvents: 'none'
+        }
+    }
+});
+/**
+ * @internal
+ *
+ * Apply styling to the CalendarDay slots based on the state
+ */ export const useCalendarDayStyles_unstable = (props)=>{
+    'use no memo';
+    const rootStyles = useRootStyles();
+    const headerStyles = useHeaderStyles();
+    const monthAndYearStyles = useMonthAndYearStyles();
+    const monthComponentsStyles = useMonthComponentsStyles();
+    const headerIconButtonStyles = useHeaderIconButtonStyles();
+    const disabledStyleStyles = useDisabledStyleStyles();
+    const { className, headerIsClickable, showWeekNumbers } = props;
+    return {
+        root: mergeClasses(calendarDayClassNames.root, rootStyles.normalize, rootStyles.base, showWeekNumbers && rootStyles.showWeekNumbers, className),
+        header: mergeClasses(calendarDayClassNames.header, headerStyles.base),
+        monthAndYear: mergeClasses(calendarDayClassNames.monthAndYear, monthAndYearStyles.base, monthAndYearStyles.animation, headerIsClickable && monthAndYearStyles.headerIsClickable),
+        monthComponents: mergeClasses(calendarDayClassNames.monthComponents, monthComponentsStyles.base),
+        headerIconButton: mergeClasses(calendarDayClassNames.headerIconButton, headerIconButtonStyles.base),
+        disabledStyle: mergeClasses(calendarDayClassNames.disabledStyle, disabledStyleStyles.base)
+    };
+};

package/lib/components/CalendarDay/useCalendarDayStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CalendarDay/useCalendarDayStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { DURATION_2, EASING_FUNCTION_2, FADE_IN } from '../../utils/animations';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CalendarDayStyles, CalendarDayStyleProps } from './CalendarDay.types';\n\n/**\n * @internal\n */\nexport const calendarDayClassNames: SlotClassNames<CalendarDayStyles> = {\n  root: 'fui-CalendarDay',\n  header: 'fui-CalendarDay__header',\n  monthAndYear: 'fui-CalendarDay__monthAndYear',\n  monthComponents: 'fui-CalendarDay__monthComponents',\n  headerIconButton: 'fui-CalendarDay__headerIconButton',\n  disabledStyle: 'fui-CalendarDay__disabledStyle',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    boxSizing: 'content-box',\n    padding: '12px',\n    width: '196px',\n  },\n  normalize: {\n    boxShadow: 'none',\n    boxSizing: 'border-box',\n    margin: '0',\n    padding: '0',\n  },\n  showWeekNumbers: {\n    width: '226px',\n  },\n});\n\nconst useHeaderStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    height: '28px',\n    lineHeight: '44px',\n    position: 'relative',\n    width: '100%',\n  },\n});\n\nconst useMonthAndYearStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderStyle('none'),\n    borderRadius: tokens.borderRadiusMedium,\n    color: tokens.colorNeutralForeground1,\n    display: 'inline-block',\n    flexGrow: 1,\n    fontFamily: 'inherit',\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: '28px',\n    overflow: 'hidden',\n    padding: '0 4px 0 10px',\n    textAlign: 'left',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  animation: {\n    animationDuration: DURATION_2,\n    animationFillMode: 'both',\n    animationName: FADE_IN,\n    animationTimingFunction: EASING_FUNCTION_2,\n  },\n  headerIsClickable: {\n    '&:hover': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n      color: tokens.colorBrandForegroundOnLightHover,\n      cursor: 'pointer',\n      outline: `1px solid ${tokens.colorTransparentStroke}`,\n    },\n    '&:hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n      color: tokens.colorBrandForegroundOnLightPressed,\n      cursor: 'pointer',\n      outline: `1px solid ${tokens.colorTransparentStroke}`,\n    },\n  },\n});\n\nconst useMonthComponentsStyles = makeStyles({\n  base: {\n    alignSelf: 'flex-end',\n    display: 'inline-flex',\n  },\n});\n\nconst useHeaderIconButtonStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderStyle('none'),\n    borderRadius: tokens.borderRadiusMedium,\n    color: tokens.colorNeutralForeground3,\n    display: 'block',\n    fontFamily: 'inherit',\n    fontSize: tokens.fontSizeBase200,\n    height: '28px',\n    lineHeight: '28px',\n    overflow: 'visible',\n    padding: '0',\n    position: 'relative',\n    textAlign: 'center',\n    width: '28px',\n\n    '&:hover': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n      color: tokens.colorBrandForegroundOnLightHover,\n      cursor: 'pointer',\n      outline: `1px solid ${tokens.colorTransparentStroke}`,\n    },\n    '&:hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n      color: tokens.colorBrandForegroundOnLightPressed,\n    },\n  },\n});\n\nconst useDisabledStyleStyles = makeStyles({\n  base: {\n    '&, &:disabled, & button': {\n      color: tokens.colorNeutralForegroundDisabled,\n      pointerEvents: 'none',\n    },\n  },\n});\n\n/**\n * @internal\n *\n * Apply styling to the CalendarDay slots based on the state\n */\nexport const useCalendarDayStyles_unstable = (props: CalendarDayStyleProps): CalendarDayStyles => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const headerStyles = useHeaderStyles();\n  const monthAndYearStyles = useMonthAndYearStyles();\n  const monthComponentsStyles = useMonthComponentsStyles();\n  const headerIconButtonStyles = useHeaderIconButtonStyles();\n  const disabledStyleStyles = useDisabledStyleStyles();\n\n  const { className, headerIsClickable, showWeekNumbers } = props;\n\n  return {\n    root: mergeClasses(\n      calendarDayClassNames.root,\n      rootStyles.normalize,\n      rootStyles.base,\n      showWeekNumbers && rootStyles.showWeekNumbers,\n      className,\n    ),\n    header: mergeClasses(calendarDayClassNames.header, headerStyles.base),\n    monthAndYear: mergeClasses(\n      calendarDayClassNames.monthAndYear,\n      monthAndYearStyles.base,\n      monthAndYearStyles.animation,\n      headerIsClickable && monthAndYearStyles.headerIsClickable,\n    ),\n    monthComponents: mergeClasses(calendarDayClassNames.monthComponents, monthComponentsStyles.base),\n    headerIconButton: mergeClasses(calendarDayClassNames.headerIconButton, headerIconButtonStyles.base),\n    disabledStyle: mergeClasses(calendarDayClassNames.disabledStyle, disabledStyleStyles.base),\n  };\n};\n"],"names":["tokens","makeStyles","mergeClasses","shorthands","DURATION_2","EASING_FUNCTION_2","FADE_IN","calendarDayClassNames","root","header","monthAndYear","monthComponents","headerIconButton","disabledStyle","useRootStyles","base","boxSizing","padding","width","normalize","boxShadow","margin","showWeekNumbers","useHeaderStyles","display","height","lineHeight","position","useMonthAndYearStyles","alignItems","backgroundColor","colorTransparentBackground","borderStyle","borderRadius","borderRadiusMedium","color","colorNeutralForeground1","flexGrow","fontFamily","fontSize","fontSizeBase300","fontWeight","fontWeightSemibold","overflow","textAlign","textOverflow","whiteSpace","animation","animationDuration","animationFillMode","animationName","animationTimingFunction","headerIsClickable","colorBrandBackgroundInvertedHover","colorBrandForegroundOnLightHover","cursor","outline","colorTransparentStroke","colorBrandBackgroundInvertedPressed","colorBrandForegroundOnLightPressed","useMonthComponentsStyles","alignSelf","useHeaderIconButtonStyles","colorNeutralForeground3","fontSizeBase200","useDisabledStyleStyles","colorNeutralForegroundDisabled","pointerEvents","useCalendarDayStyles_unstable","props","rootStyles","headerStyles","monthAndYearStyles","monthComponentsStyles","headerIconButtonStyles","disabledStyleStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}