@toptal/picasso-calendar 2.0.1 → 3.0.0

package/src/CalendarContainer/CalendarContainer.tsx

@@ -1,16 +1,9 @@
 import type { ReactNode } from 'react'
 import React from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
-import styles from './styles'
 import { useCalendar } from '../CalendarContext'
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoCalendarContainer',
-})
-
 export type CalendarContainerProps = {
   children?: ReactNode
   hasFooter?: boolean
@@ -24,17 +17,17 @@ const CalendarContainer = ({
   hasFooter,
   isFlexible,
 }: CalendarContainerProps) => {
-  const classes = useStyles()
   const { renderRoot } = useCalendar()
 
   return renderRoot ? (
     <>{renderRoot({ hasFooter, children })}</>
   ) : (
     <div
-      className={cx(classes.root, {
-        [classes.hasFooter]: hasFooter,
-        [classes.flexible]: isFlexible,
-      })}
+      className={twJoin(
+        'p-6 text-graphite-800 flex flex-col basis-[20.5rem] shadow-5 bg-white',
+        hasFooter ? 'rounded-t-sm rounded-b-none' : 'rounded-sm',
+        !isFlexible && 'max-w-[20.5rem]'
+      )}
     >
       {children}
     </div>

package/src/CalendarDateSelector/CalendarDateSelector.tsx

@@ -3,11 +3,6 @@ import type { DropdownProps } from 'react-day-picker'
 import { Typography } from '@toptal/picasso-typography'
 import { Container } from '@toptal/picasso-container'
 import { ArrowDropDown16 } from '@toptal/picasso-icons'
-import { makeStyles, type Theme } from '@material-ui/core/styles'
-
-import styles from '../Calendar/styles'
-
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoCalendar' })
 
 const CalendarDateSelector = ({
   children,
@@ -16,13 +11,11 @@ const CalendarDateSelector = ({
   value,
   'aria-label': ariaLabel,
 }: DropdownProps) => {
-  const classes = useStyles()
-
   return (
     <label
       aria-label={ariaLabel}
       htmlFor={`month${caption}`}
-      className={classes.dropdown_label}
+      className='flex relative items-center'
     >
       <Typography
         variant='heading'
@@ -33,16 +26,16 @@ const CalendarDateSelector = ({
         {caption}
       </Typography>
       <Container
-        className={classes.icon_wrapper}
+        className='w-6 h-6'
         flex
         justifyContent='center'
         alignItems='center'
       >
-        <ArrowDropDown16 className={classes.pointer_events} color='darkGrey' />
+        <ArrowDropDown16 className='pointer-events-none' color='darkGrey' />
       </Container>
       <select
         name={`month${caption}`}
-        className={classes.select}
+        className='absolute opacity-0 text-md font-normal cursor-pointer'
         value={value}
         onChange={onChange}
       >

package/src/CalendarDay/CalendarDay.tsx

@@ -1,10 +1,8 @@
 import type { ReactNode } from 'react'
-import React, { useRef } from 'react'
+import React, { useMemo, useRef } from 'react'
 import type { DayProps } from 'react-day-picker'
 import { useDayRender } from 'react-day-picker'
-import cx from 'classnames'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 import {
   isToday as isTodayDateFns,
   endOfMonth,
@@ -14,10 +12,13 @@ import {
   startOfMonth,
 } from 'date-fns'
 
-import styles from './styles'
 import { CalendarIndicators } from '../CalendarIndicators'
 import { useCalendar } from '../CalendarContext'
 import type { DayProps as RenderDayProps } from '../Calendar'
+import { getTextColorClass } from './utils/get-text-color-class'
+import { getBackgroundColorClass } from './utils/get-background-color-class'
+import { getBorderClasses } from './utils/get-border-classes'
+import { getHoverAndFocusEffectsClasses } from './utils/get-hover-and-focus-effects-classes'
 
 export type RenderDay = (args: RenderDayProps) => ReactNode
 
@@ -31,8 +32,6 @@ const checkIfBelongsToPreviousMonth = (date: Date, currentMonth: Date) =>
 const checkIfBelongsToNextMonth = (date: Date, currentMonth: Date) =>
   isAfter(date, endOfMonth(currentMonth))
 
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoCalendar' })
-
 /**
  * The content of a day cell
  */
@@ -63,7 +62,37 @@ const CalendarDay = (dayProps: DayProps): JSX.Element => {
   const isToday = isTodayDateFns(date)
   const isoDate = getISODate(date)
 
-  const classes = useStyles()
+  const stateDependentClasses = useMemo(() => {
+    const currentComponentState = {
+      isSelected,
+      isDisabled,
+      isWeekend,
+      isToday,
+      isOutside,
+      isRangeStart,
+      isRangeMiddle: isRangeMiddle || isTemporaryRangeMiddle,
+      isRangeEnd: isRangeEnd || isTemporaryRangeEnd,
+    }
+
+    return twJoin(
+      getTextColorClass(currentComponentState),
+      getBackgroundColorClass(currentComponentState),
+      getBorderClasses(currentComponentState),
+      getHoverAndFocusEffectsClasses(currentComponentState),
+      isDisabled ? 'cursor-default' : 'cursor-pointer'
+    )
+  }, [
+    isSelected,
+    isDisabled,
+    isWeekend,
+    isToday,
+    isOutside,
+    isRangeStart,
+    isRangeMiddle,
+    isRangeEnd,
+    isTemporaryRangeMiddle,
+    isTemporaryRangeEnd,
+  ])
 
   const defaultComponent = (
     <button
@@ -74,15 +103,15 @@ const CalendarDay = (dayProps: DayProps): JSX.Element => {
       }`}
       data-calendar-day={isoDate}
       tabIndex={isDisabled ? -1 : undefined}
-      className={cx(classes.day, {
-        [classes.selected]: isSelected,
-        [classes.weekend]: isWeekend,
-        [classes.grayed]: isOutside && !isDisabled,
-        [classes.disabled]: isDisabled,
-        [classes.startSelection]: isRangeStart,
-        [classes.withinSelection]: isRangeMiddle || isTemporaryRangeMiddle,
-        [classes.endSelection]: isRangeEnd || isTemporaryRangeEnd,
-      })}
+      className={twJoin(
+        'h-10 w-10 min-w-10',
+        'm-0 p-0',
+        'text-[0.75rem]',
+        'flex items-center justify-center vertical-align-middle relative',
+        'user-select-none',
+        'outline-none',
+        stateDependentClasses
+      )}
       onClick={isDisabled ? undefined : event => buttonProps?.onClick?.(event)}
       onMouseEnter={event => {
         onDayMouseEnter?.(date)

package/src/CalendarDay/types.ts

@@ -0,0 +1,10 @@
+export type DayState = {
+  isSelected: boolean
+  isDisabled: boolean
+  isWeekend: boolean
+  isToday: boolean
+  isOutside: boolean
+  isRangeStart: boolean
+  isRangeMiddle: boolean
+  isRangeEnd: boolean
+}

package/src/CalendarDay/utils/get-background-color-class.ts

@@ -0,0 +1,26 @@
+import type { DayState } from '../types'
+
+export const getBackgroundColorClass = (state: DayState) => {
+  const {
+    isSelected,
+    isRangeEnd,
+    isDisabled,
+    isWeekend,
+    isRangeMiddle,
+    isRangeStart,
+  } = state
+
+  if (isRangeMiddle) {
+    return 'bg-blue-100'
+  }
+
+  if (isSelected || isRangeStart || isRangeEnd) {
+    return 'bg-blue-500'
+  }
+
+  if ((isDisabled && isWeekend) || isWeekend) {
+    return 'bg-gray-100'
+  }
+
+  return 'bg-white'
+}

package/src/CalendarDay/utils/get-border-classes.test.ts

@@ -0,0 +1,54 @@
+import { getBorderClasses } from './get-border-classes'
+import type { DayState } from '../types'
+
+describe('getBorderClasses', () => {
+  describe('when day is selected', () => {
+    it('returns border-none and rounded-sm for selected day', () => {
+      const state = { isSelected: true } as DayState
+
+      expect(getBorderClasses(state)).toBe('border-none rounded-sm')
+    })
+  })
+
+  describe('when day is a weekend', () => {
+    it('returns solid border with specific width and rounded-md', () => {
+      const state = { isWeekend: true } as DayState
+
+      expect(getBorderClasses(state)).toBe(
+        'border-solid border-[0.25rem] border-white rounded-md'
+      )
+    })
+  })
+
+  describe('when day is not a weekend', () => {
+    it('returns border-none and rounded-none', () => {
+      const state = {} as DayState
+
+      expect(getBorderClasses(state)).toBe('border-none rounded-none')
+    })
+  })
+
+  describe('when day is part of range', () => {
+    describe('when day is in range middle', () => {
+      it('returns border-none and rounded-none', () => {
+        const state = { isRangeMiddle: true } as DayState
+
+        expect(getBorderClasses(state)).toBe('border-none rounded-none')
+      })
+    })
+
+    describe('when day is range end', () => {
+      it('returns border-none and rounded-sm', () => {
+        const state = { isRangeEnd: true } as DayState
+
+        expect(getBorderClasses(state)).toBe('border-none rounded-sm')
+      })
+    })
+
+    it('returns border-none and rounded-sm for range start', () => {
+      const state = { isRangeStart: true } as DayState
+
+      expect(getBorderClasses(state)).toBe('border-none rounded-sm')
+    })
+  })
+})

package/src/CalendarDay/utils/get-border-classes.ts

@@ -0,0 +1,20 @@
+import type { DayState } from '../types'
+
+export const getBorderClasses = (state: DayState) => {
+  const { isSelected, isWeekend, isRangeStart, isRangeEnd, isRangeMiddle } =
+    state
+
+  if (isRangeMiddle) {
+    return 'border-none rounded-none'
+  }
+
+  if (isRangeEnd || isRangeStart || isSelected) {
+    return 'border-none rounded-sm'
+  }
+
+  if (isWeekend) {
+    return 'border-solid border-[0.25rem] border-white rounded-md'
+  }
+
+  return 'border-none rounded-none'
+}

package/src/CalendarDay/utils/get-hover-and-focus-effects-classes.test.ts

@@ -0,0 +1,72 @@
+import { getHoverAndFocusEffectsClasses } from './get-hover-and-focus-effects-classes'
+import type { DayState } from '../types'
+
+describe('getHoverAndFocusEffectsClasses', () => {
+  describe('when day is not a weekend', () => {
+    it('returns default classes', () => {
+      const state = {} as DayState
+
+      expect(getHoverAndFocusEffectsClasses(state).toString()).toBe(
+        '[&]:hover:text-black [&]:focus:text-black,[&]:hover:bg-blue-500/25 [&]:focus:bg-blue-500/25,[&]:hover:rounded-sm [&]:focus:rounded-sm'
+      )
+    })
+  })
+
+  describe('when day is outside of displayed month', () => {
+    it('returns gray text for hover and focus classes', () => {
+      const state = { isOutside: true } as DayState
+
+      expect(getHoverAndFocusEffectsClasses(state).toString()).toBe(
+        '[&]:hover:text-gray-600 [&]:focus:text-gray-600,[&]:hover:bg-blue-500/25 [&]:focus:bg-blue-500/25,[&]:hover:rounded-sm [&]:focus:rounded-sm'
+      )
+    })
+  })
+
+  describe('when day is selected', () => {
+    it('returns no classes', () => {
+      const state = { isSelected: true } as DayState
+
+      expect(getHoverAndFocusEffectsClasses(state)).toBe('')
+    })
+  })
+
+  describe('when day is disabled', () => {
+    it('returns no classes', () => {
+      const state = { isDisabled: true } as DayState
+
+      expect(getHoverAndFocusEffectsClasses(state)).toBe('')
+    })
+  })
+
+  describe('when day is a weekend', () => {
+    it('returns black text and pale blue background for hover and focus classes', () => {
+      const state = { isWeekend: true } as DayState
+
+      expect(getHoverAndFocusEffectsClasses(state).toString()).toBe(
+        '[&]:hover:border-none [&]:focus:border-none,[&]:hover:border-white [&]:focus:border-white,[&]:hover:text-black [&]:focus:text-black,[&]:hover:bg-blue-500/25 [&]:focus:bg-blue-500/25,[&]:hover:rounded-sm [&]:focus:rounded-sm'
+      )
+    })
+  })
+
+  describe('when selection is made in the calendar', () => {
+    describe('when day is a weekend and is inside of selection', () => {
+      it('returns default selection classes', () => {
+        const state = { isWeekend: true, isRangeMiddle: true } as DayState
+
+        expect(getHoverAndFocusEffectsClasses(state).toString()).toBe(
+          '[&]:hover:text-black [&]:focus:text-black,[&]:hover:bg-blue-500/25 [&]:focus:bg-blue-500/25,[&]:hover:rounded-sm [&]:focus:rounded-sm'
+        )
+      })
+    })
+
+    describe('when day is an end of selection', () => {
+      it('returns white text and blue background', () => {
+        const state = { isRangeEnd: true } as DayState
+
+        expect(getHoverAndFocusEffectsClasses(state).toString()).toBe(
+          '[&]:hover:text-white [&]:focus:text-white,[&]:hover:bg-blue-500 [&]:focus:bg-blue-500'
+        )
+      })
+    })
+  })
+})

package/src/CalendarDay/utils/get-hover-and-focus-effects-classes.ts

@@ -0,0 +1,44 @@
+import type { DayState } from '../types'
+
+export const getHoverAndFocusEffectsClasses = (state: DayState) => {
+  const {
+    isSelected,
+    isWeekend,
+    isDisabled,
+    isOutside,
+    isRangeEnd,
+    isRangeMiddle,
+  } = state
+
+  if (isDisabled || isSelected) {
+    return ''
+  }
+
+  if (isRangeEnd) {
+    return [
+      '[&]:hover:text-white [&]:focus:text-white',
+      '[&]:hover:bg-blue-500 [&]:focus:bg-blue-500',
+    ]
+  }
+
+  const defaultTextColor = isOutside
+    ? '[&]:hover:text-gray-600 [&]:focus:text-gray-600'
+    : '[&]:hover:text-black [&]:focus:text-black'
+
+  const defaultBackgroundAndBorderStyle = [
+    '[&]:hover:bg-blue-500/25 [&]:focus:bg-blue-500/25',
+    '[&]:hover:rounded-sm [&]:focus:rounded-sm',
+  ]
+
+  const defaultStyles = [defaultTextColor, ...defaultBackgroundAndBorderStyle]
+
+  if (isWeekend && !isSelected && !isRangeMiddle) {
+    return [
+      '[&]:hover:border-none [&]:focus:border-none',
+      '[&]:hover:border-white [&]:focus:border-white',
+      ...defaultStyles,
+    ]
+  }
+
+  return defaultStyles
+}

package/src/CalendarDay/utils/get-text-color-class.ts

@@ -0,0 +1,30 @@
+import type { DayState } from '../types'
+
+export const getTextColorClass = (state: DayState) => {
+  const {
+    isSelected,
+    isOutside,
+    isRangeEnd,
+    isDisabled,
+    isRangeMiddle,
+    isRangeStart,
+  } = state
+
+  if (isDisabled) {
+    return 'text-gray-500'
+  }
+
+  if (isOutside) {
+    return 'text-gray-600'
+  }
+
+  if (isRangeMiddle) {
+    return 'text-black'
+  }
+
+  if (isSelected || isRangeStart || isRangeEnd) {
+    return 'text-white'
+  }
+
+  return 'text-black'
+}

package/src/CalendarIndicators/CalendarIndicators.tsx

@@ -1,9 +1,5 @@
 import React from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
-
-import styles from './styles'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
 export interface Props {
   isSelected: boolean
@@ -11,28 +7,25 @@ export interface Props {
   isIndicated: boolean
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoCalendarIndicators',
-})
-
 export const CalendarIndicators = ({
   isIndicated,
   isSelected,
   isToday,
 }: Props) => {
-  const classes = useStyles()
-
   if (isToday || isIndicated) {
     return (
-      <div className={classes.indicators}>
+      <div className='flex flex-row	justify-around w-[1.3em] absolute bottom-[0.375rem]'>
         {isToday && (
           <div
-            className={cx(classes.today, {
-              [classes.selected]: isSelected,
-            })}
+            className={twJoin(
+              'h-1 w-1 rounded-[50%] bg-blue-500',
+              isSelected && 'bg-white'
+            )}
           />
         )}
-        {isIndicated && <div className={classes.indicated} />}
+        {isIndicated && (
+          <div className='content-[""] h-1 w-1 rounded-[50%] bg-yellow-500' />
+        )}
       </div>
     )
   }

package/dist-package/src/Calendar/styles.d.ts

@@ -1,4 +0,0 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "head" | "cell" | "table" | "row" | "caption_dropdowns" | "pointer_events" | "icon_wrapper" | "select" | "dropdown_label" | "head_row" | "head_cell" | "vhidden" | "months">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/Calendar/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Calendar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAIxB,KAAK;AAAlC,wBA6DI"}

package/dist-package/src/Calendar/styles.js

@@ -1,64 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import { rem } from '@toptal/picasso-shared';
-export default ({ palette }) => createStyles({
-    head: {
-        display: 'block',
-    },
-    caption_dropdowns: {
-        display: 'flex',
-        gap: '1rem',
-        paddingBottom: '1rem',
-    },
-    pointer_events: {
-        pointerEvents: 'none',
-    },
-    icon_wrapper: { width: '24px', height: '24px' },
-    select: {
-        opacity: '0',
-        position: 'absolute',
-        fontSize: '0.875rem',
-        fontWeight: 400,
-        cursor: 'pointer',
-    },
-    dropdown_label: {
-        display: 'flex',
-        position: 'relative',
-        alignItems: 'center',
-    },
-    head_row: {
-        display: 'flex',
-        textAlign: 'center',
-        fontSize: rem('12px'),
-        lineHeight: rem('18px'),
-        textTransform: 'uppercase',
-        color: palette.grey.main2,
-        paddingTop: rem('3px'),
-        paddingBottom: rem('11px'),
-    },
-    head_cell: {
-        padding: 0,
-        flexBasis: '15%',
-        width: '40px',
-        fontWeight: 400,
-    },
-    table: {
-        borderSpacing: '0px',
-        display: 'flex',
-        flexDirection: 'column',
-    },
-    row: {
-        display: 'flex',
-    },
-    cell: {
-        padding: 0,
-        flexBasis: '15%',
-    },
-    vhidden: {
-        display: 'none',
-    },
-    months: {
-        display: 'flex',
-        gap: rem('24px'),
-    },
-});
-//# sourceMappingURL=styles.js.map

package/dist-package/src/Calendar/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Calendar/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,OAAO,EAAE,OAAO;KACjB;IACD,iBAAiB,EAAE;QACjB,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,MAAM;QACX,aAAa,EAAE,MAAM;KACtB;IACD,cAAc,EAAE;QACd,aAAa,EAAE,MAAM;KACtB;IACD,YAAY,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE;IAC/C,MAAM,EAAE;QACN,OAAO,EAAE,GAAG;QACZ,QAAQ,EAAE,UAAU;QACpB,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,GAAG;QACf,MAAM,EAAE,SAAS;KAClB;IACD,cAAc,EAAE;QACd,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,QAAQ;KACrB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,MAAM;QACf,SAAS,EAAE,QAAQ;QACnB,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC;QACrB,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC;QACvB,aAAa,EAAE,WAAW;QAC1B,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;QACzB,UAAU,EAAE,GAAG,CAAC,KAAK,CAAC;QACtB,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC;KAC3B;IACD,SAAS,EAAE;QACT,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,KAAK;QAChB,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,GAAG;KAChB;IACD,KAAK,EAAE;QACL,aAAa,EAAE,KAAK;QACpB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;KACxB;IACD,GAAG,EAAE;QACH,OAAO,EAAE,MAAM;KAChB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,KAAK;KACjB;IACD,OAAO,EAAE;QACP,OAAO,EAAE,MAAM;KAChB;IACD,MAAM,EAAE;QACN,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,GAAG,CAAC,MAAM,CAAC;KACjB;CACF,CAAC,CAAA"}

package/dist-package/src/CalendarContainer/styles.d.ts

@@ -1,4 +0,0 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette, shadows, sizes }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "hasFooter" | "flexible">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/CalendarContainer/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/CalendarContainer/styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sDAGR,KAAK;AAAlD,wBAmBI"}

package/dist-package/src/CalendarContainer/styles.js

@@ -1,22 +0,0 @@
-import { rem } from '@toptal/picasso-shared';
-import { createStyles } from '@material-ui/core/styles';
-export default ({ palette, shadows, sizes }) => createStyles({
-    root: {
-        padding: rem('24px'),
-        color: palette.grey.darker,
-        display: 'flex',
-        flexDirection: 'column',
-        flexBasis: '20.5rem',
-        maxWidth: '20.5rem',
-        boxShadow: shadows[5],
-        borderRadius: sizes.borderRadius.small,
-        backgroundColor: palette.common.white,
-    },
-    hasFooter: {
-        borderRadius: `${sizes.borderRadius.small} ${sizes.borderRadius.small} 0 0`,
-    },
-    flexible: {
-        maxWidth: 'unset',
-    },
-});
-//# sourceMappingURL=styles.js.map

package/dist-package/src/CalendarContainer/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/CalendarContainer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAS,EAAE,EAAE,CACpD,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC;QACpB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;QAC1B,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,SAAS,EAAE,SAAS;QACpB,QAAQ,EAAE,SAAS;QACnB,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;QACrB,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK;QACtC,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;KACtC;IACD,SAAS,EAAE;QACT,YAAY,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,IAAI,KAAK,CAAC,YAAY,CAAC,KAAK,MAAM;KAC5E;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE,OAAO;KAClB;CACF,CAAC,CAAA"}

package/dist-package/src/CalendarDay/styles.d.ts

@@ -1,4 +0,0 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette, sizes }: Theme) => import("@material-ui/styles").StyleRules<{}, "disabled" | "day" | "weekend" | "selected" | "isInsideIndicatedRange" | "startSelection" | "withinSelection" | "endSelection" | "today" | "grayed">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/CalendarDay/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/CalendarDay/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;6CAIjB,KAAK;AAAzC,wBA+FI"}