npm - @12-apps/ui - Versions diffs - 6.78.3 → 6.78.4 - Mend

@12-apps/ui 6.78.3 → 6.78.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/dist/_internal/components/form/Calendar/Calendar.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import {
   Calendar,
   Calendar_default
-} from "../../../../chunk-R53ZOW4B.js";
+} from "../../../../chunk-NDGA7ZE6.js";
 import "../../../../chunk-2ZRZTGWP.js";
 import "../../../../chunk-SUALMVL7.js";
-import "../../../../chunk-AG3DY5TH.js";
-import "../../../../chunk-6PU3JYVY.js";
-import "../../../../chunk-H3AQQOTI.js";
+import "../../../../chunk-HHPJXK4Z.js";
+import "../../../../chunk-6DAIC2MG.js";
+import "../../../../chunk-HKGKQKQT.js";
 import "../../../../chunk-E2Y7G4MP.js";
 import "../../../../chunk-FFQ4NOJT.js";
 import "../../../../chunk-TERT6TIS.js";

package/dist/_internal/components/form/Calendar/CalendarDay.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import {
   CalendarDay
-} from "../../../../chunk-H3AQQOTI.js";
+} from "../../../../chunk-HKGKQKQT.js";
 import "../../../../chunk-YKCAJ2TN.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {

package/dist/_internal/components/form/Calendar/CalendarDayCell.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import {
   CalendarDayCell
-} from "../../../../chunk-6PU3JYVY.js";
-import "../../../../chunk-H3AQQOTI.js";
+} from "../../../../chunk-6DAIC2MG.js";
+import "../../../../chunk-HKGKQKQT.js";
 import "../../../../chunk-E2Y7G4MP.js";
 import "../../../../chunk-TERT6TIS.js";
 import "../../../../chunk-YKCAJ2TN.js";

package/dist/_internal/components/form/Calendar/CalendarMonth.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import {
   CalendarMonth
-} from "../../../../chunk-AG3DY5TH.js";
-import "../../../../chunk-6PU3JYVY.js";
-import "../../../../chunk-H3AQQOTI.js";
+} from "../../../../chunk-HHPJXK4Z.js";
+import "../../../../chunk-6DAIC2MG.js";
+import "../../../../chunk-HKGKQKQT.js";
 import "../../../../chunk-E2Y7G4MP.js";
 import "../../../../chunk-TERT6TIS.js";
 import "../../../../chunk-YKCAJ2TN.js";

package/dist/_internal/components/form/DateRangePicker/DateRangePicker.js CHANGED Viewed

@@ -2,7 +2,7 @@
 import {
   DateRangePicker,
   DateRangePicker_default
-} from "../../../../chunk-KHIUYLKY.js";
+} from "../../../../chunk-MNZ6MCOK.js";
 import "../../../../chunk-QKLSHNOH.js";
 import "../../../../chunk-AXZCCX7O.js";
 import "../../../../chunk-6KKQHJE7.js";
@@ -10,12 +10,12 @@ import "../../../../chunk-3YLRR4JM.js";
 import "../../../../chunk-NTO5DALI.js";
 import "../../../../chunk-FRAVVI4A.js";
 import "../../../../chunk-BO6S47KI.js";
-import "../../../../chunk-R53ZOW4B.js";
+import "../../../../chunk-NDGA7ZE6.js";
 import "../../../../chunk-2ZRZTGWP.js";
 import "../../../../chunk-SUALMVL7.js";
-import "../../../../chunk-AG3DY5TH.js";
-import "../../../../chunk-6PU3JYVY.js";
-import "../../../../chunk-H3AQQOTI.js";
+import "../../../../chunk-HHPJXK4Z.js";
+import "../../../../chunk-6DAIC2MG.js";
+import "../../../../chunk-HKGKQKQT.js";
 import "../../../../chunk-E2Y7G4MP.js";
 import "../../../../chunk-FFQ4NOJT.js";
 import "../../../../chunk-TERT6TIS.js";

package/dist/_internal/components/form/index.js CHANGED Viewed

@@ -121,7 +121,7 @@ import "../../../chunk-YOKUDQIJ.js";
 import "../../../chunk-BN6POCYF.js";
 import {
   DateRangePicker
-} from "../../../chunk-KHIUYLKY.js";
+} from "../../../chunk-MNZ6MCOK.js";
 import {
   DEFAULT_QUICK_RANGES,
   DEFAULT_QUICK_RANGE_LABELS,
@@ -164,12 +164,12 @@ import "../../../chunk-JXS56EW5.js";
 import "../../../chunk-BO6S47KI.js";
 import {
   Calendar
-} from "../../../chunk-R53ZOW4B.js";
+} from "../../../chunk-NDGA7ZE6.js";
 import "../../../chunk-2ZRZTGWP.js";
 import "../../../chunk-SUALMVL7.js";
-import "../../../chunk-AG3DY5TH.js";
-import "../../../chunk-6PU3JYVY.js";
-import "../../../chunk-H3AQQOTI.js";
+import "../../../chunk-HHPJXK4Z.js";
+import "../../../chunk-6DAIC2MG.js";
+import "../../../chunk-HKGKQKQT.js";
 import "../../../chunk-E2Y7G4MP.js";
 import "../../../chunk-FFQ4NOJT.js";
 import "../../../chunk-TERT6TIS.js";

package/dist/_internal/components/index.js CHANGED Viewed

@@ -346,7 +346,7 @@ import "../../chunk-YOKUDQIJ.js";
 import "../../chunk-BN6POCYF.js";
 import {
   DateRangePicker
-} from "../../chunk-KHIUYLKY.js";
+} from "../../chunk-MNZ6MCOK.js";
 import {
   DEFAULT_QUICK_RANGES,
   DEFAULT_QUICK_RANGE_LABELS,
@@ -407,12 +407,12 @@ import "../../chunk-JXS56EW5.js";
 import "../../chunk-BO6S47KI.js";
 import {
   Calendar
-} from "../../chunk-R53ZOW4B.js";
+} from "../../chunk-NDGA7ZE6.js";
 import "../../chunk-2ZRZTGWP.js";
 import "../../chunk-SUALMVL7.js";
-import "../../chunk-AG3DY5TH.js";
-import "../../chunk-6PU3JYVY.js";
-import "../../chunk-H3AQQOTI.js";
+import "../../chunk-HHPJXK4Z.js";
+import "../../chunk-6DAIC2MG.js";
+import "../../chunk-HKGKQKQT.js";
 import "../../chunk-E2Y7G4MP.js";
 import "../../chunk-FFQ4NOJT.js";
 import "../../chunk-TERT6TIS.js";

package/dist/{chunk-6PU3JYVY.js → chunk-6DAIC2MG.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   CalendarDay
-} from "./chunk-H3AQQOTI.js";
+} from "./chunk-HKGKQKQT.js";
 import {
   buildDayArgs
 } from "./chunk-E2Y7G4MP.js";
@@ -40,4 +40,4 @@ var CalendarDayCell = ({
 export {
   CalendarDayCell
 };
-//# sourceMappingURL=chunk-6PU3JYVY.js.map
+//# sourceMappingURL=chunk-6DAIC2MG.js.map

package/dist/{chunk-AG3DY5TH.js → chunk-HHPJXK4Z.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   CalendarDayCell
-} from "./chunk-6PU3JYVY.js";
+} from "./chunk-6DAIC2MG.js";
 import {
   getMonthName
 } from "./chunk-TERT6TIS.js";
@@ -16,7 +16,8 @@ import IconButton from "@mui/material/IconButton/index.js";
 import Typography from "@mui/material/Typography/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var SPACER_WIDTH = sxRem(32);
-var GRID_SX = { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 0.5 };
+var GRID_SX = { display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))", gap: 0.5 };
+var MONTH_SX = { flex: `1 1 ${sxRem(280)}`, minWidth: 0, maxWidth: sxRem(304) };
 var MonthNavHeader = ({ title, showPrevious, showNext, onPreviousMonth, onNextMonth }) => /* @__PURE__ */ jsxs(
   Box,
   {
@@ -75,7 +76,7 @@ var CalendarMonth = ({
        January's 5th and February's. Without a per-month hook a test can only
        reach a day positionally, which is exactly what the flakiness gate
        refuses. Additive: `calendar-grid` below is unchanged. */
-    /* @__PURE__ */ jsxs(Box, { sx: { minWidth: sxRem(280) }, "data-testid": `calendar-month-${monthIndex}`, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: MONTH_SX, "data-testid": `calendar-month-${monthIndex}`, children: [
       /* @__PURE__ */ jsx(
         MonthNavHeader,
         {
@@ -104,4 +105,4 @@ var CalendarMonth = ({
 export {
   CalendarMonth
 };
-//# sourceMappingURL=chunk-AG3DY5TH.js.map
+//# sourceMappingURL=chunk-HHPJXK4Z.js.map

package/dist/chunk-HHPJXK4Z.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/form/Calendar/CalendarMonth.tsx"],"sourcesContent":["import ChevronLeft from '@mui/icons-material/ChevronLeft';\nimport ChevronRight from '@mui/icons-material/ChevronRight';\nimport Box from '@mui/material/Box/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { sxRem } from '../../../tokens/relative';\n\nimport { getMonthName } from './Calendar.dates';\nimport type { CalendarProps, MonthMatrix } from './Calendar.types';\nimport type { DayCellContext } from './CalendarDayCell';\nimport { CalendarDayCell } from './CalendarDayCell';\n\n/** The nav spacer's width and the weekday row's height, 32 design px through the type scale. */\nconst SPACER_WIDTH = sxRem(32);\n\n// `minmax(0, 1fr)`, not `1fr`: a bare `1fr` keeps each column at least its\n// content's width, which is what held the grid at 304px (FUT-3861).\nconst GRID_SX = { display: 'grid', gridTemplateColumns: 'repeat(7, minmax(0, 1fr))', gap: 0.5 } as const;\n\n/**\n * A month takes the room it is given, from nothing up to seven full cells and\n * their gaps (7 × 40 + 6 × 4 design px). Months side by side keep a 280 basis,\n * so a multi-month calendar still wraps rather than squeezing every month.\n */\nconst MONTH_SX = { flex: `1 1 ${sxRem(280)}`, minWidth: 0, maxWidth: sxRem(304) } as const;\n\n// Only the outermost months carry arrows; the ones between get a spacer so their\n// titles stay centred.\nconst MonthNavHeader: FC<{\n title: React.ReactNode;\n showPrevious: boolean;\n showNext: boolean;\n onPreviousMonth: () => void;\n onNextMonth: () => void;\n}> = ({ title, showPrevious, showNext, onPreviousMonth, onNextMonth }) => (\n <Box\n sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}\n data-testid=\"calendar-header\"\n >\n {showPrevious && (\n <IconButton onClick={onPreviousMonth} size=\"small\" data-testid=\"calendar-prev-month\">\n <ChevronLeft />\n </IconButton>\n )}\n\n <Typography\n variant=\"h6\"\n component=\"h2\"\n sx={{ fontWeight: 'bold', flex: 1, textAlign: 'center' }}\n >\n {title}\n </Typography>\n\n {showNext && (\n <IconButton onClick={onNextMonth} size=\"small\" data-testid=\"calendar-next-month\">\n <ChevronRight />\n </IconButton>\n )}\n\n {!showPrevious && !showNext && <Box sx={{ width: SPACER_WIDTH }} />}\n </Box>\n);\n\nconst WeekdayHeader: FC<{ weekdayNames: string[] }> = ({ weekdayNames }) => (\n <Box sx={{ ...GRID_SX, mb: 1 }}>\n {weekdayNames.map((weekday, index) => (\n <Box\n // Narrow weekday names repeat within a week ('S', 'T'), so position is\n // the only stable key here.\n key={`weekday-${index}`}\n role=\"columnheader\"\n data-testid={`calendar-weekday-${index}`}\n sx={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: SPACER_WIDTH,\n fontSize: sxRem(14),\n fontWeight: 'bold',\n color: 'text.secondary',\n }}\n >\n {weekday}\n </Box>\n ))}\n </Box>\n);\n\nexport interface CalendarMonthProps {\n matrix: MonthMatrix;\n monthIndex: number;\n monthsToShow: number;\n locale: string;\n weekdayNames: string[];\n renderHeader?: CalendarProps['renderHeader'];\n onPreviousMonth: () => void;\n onNextMonth: () => void;\n dayContext: DayCellContext;\n}\n\nexport const CalendarMonth: FC<CalendarMonthProps> = ({\n matrix,\n monthIndex,\n monthsToShow,\n locale,\n weekdayNames,\n renderHeader,\n onPreviousMonth,\n onNextMonth,\n dayContext,\n}) => {\n const monthName = getMonthName(matrix.month, matrix.year, locale);\n const title = renderHeader ? renderHeader({ month: matrix.month, year: matrix.year }) : monthName;\n\n return (\n /* The month is addressable by its position, because in a multi-month\n calendar every day number appears once PER MONTH — `calendar-date-5` is\n January's 5th and February's. Without a per-month hook a test can only\n reach a day positionally, which is exactly what the flakiness gate\n refuses. Additive: `calendar-grid` below is unchanged. */\n <Box sx={MONTH_SX} data-testid={`calendar-month-${monthIndex}`}>\n <MonthNavHeader\n title={title}\n showPrevious={monthIndex === 0}\n showNext={monthIndex === monthsToShow - 1}\n onPreviousMonth={onPreviousMonth}\n onNextMonth={onNextMonth}\n />\n\n <WeekdayHeader weekdayNames={weekdayNames} />\n\n <Box\n role=\"grid\"\n aria-labelledby={`month-${monthIndex}`}\n data-testid=\"calendar-grid\"\n sx={GRID_SX}\n >\n {matrix.weeks.flat().map((day) => (\n <CalendarDayCell key={day.key} day={day} {...dayContext} />\n ))}\n </Box>\n </Box>\n );\n};\n"],"mappings":";;;;;;;;;;;AAAA,OAAO,iBAAiB;AACxB,OAAO,kBAAkB;AACzB,OAAO,SAAS;AAChB,OAAO,gBAAgB;AACvB,OAAO,gBAAgB;AAkCrB,SAMM,KANN;AAtBF,IAAM,eAAe,MAAM,EAAE;AAI7B,IAAM,UAAU,EAAE,SAAS,QAAQ,qBAAqB,6BAA6B,KAAK,IAAI;AAO9F,IAAM,WAAW,EAAE,MAAM,OAAO,MAAM,GAAG,CAAC,IAAI,UAAU,GAAG,UAAU,MAAM,GAAG,EAAE;AAIhF,IAAM,iBAMD,CAAC,EAAE,OAAO,cAAc,UAAU,iBAAiB,YAAY,MAClE;AAAA,EAAC;AAAA;AAAA,IACC,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,gBAAgB,iBAAiB,IAAI,EAAE;AAAA,IACpF,eAAY;AAAA,IAEX;AAAA,sBACC,oBAAC,cAAW,SAAS,iBAAiB,MAAK,SAAQ,eAAY,uBAC7D,8BAAC,eAAY,GACf;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,IAAI,EAAE,YAAY,QAAQ,MAAM,GAAG,WAAW,SAAS;AAAA,UAEtD;AAAA;AAAA,MACH;AAAA,MAEC,YACC,oBAAC,cAAW,SAAS,aAAa,MAAK,SAAQ,eAAY,uBACzD,8BAAC,gBAAa,GAChB;AAAA,MAGD,CAAC,gBAAgB,CAAC,YAAY,oBAAC,OAAI,IAAI,EAAE,OAAO,aAAa,GAAG;AAAA;AAAA;AACnE;AAGF,IAAM,gBAAgD,CAAC,EAAE,aAAa,MACpE,oBAAC,OAAI,IAAI,EAAE,GAAG,SAAS,IAAI,EAAE,GAC1B,uBAAa,IAAI,CAAC,SAAS,UAC1B;AAAA,EAAC;AAAA;AAAA,IAIC,MAAK;AAAA,IACL,eAAa,oBAAoB,KAAK;AAAA,IACtC,IAAI;AAAA,MACF,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,UAAU,MAAM,EAAE;AAAA,MAClB,YAAY;AAAA,MACZ,OAAO;AAAA,IACT;AAAA,IAEC;AAAA;AAAA,EAbI,WAAW,KAAK;AAcvB,CACD,GACH;AAeK,IAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,YAAY,aAAa,OAAO,OAAO,OAAO,MAAM,MAAM;AAChE,QAAM,QAAQ,eAAe,aAAa,EAAE,OAAO,OAAO,OAAO,MAAM,OAAO,KAAK,CAAC,IAAI;AAExF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAME,qBAAC,OAAI,IAAI,UAAU,eAAa,kBAAkB,UAAU,IAC1D;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,cAAc,eAAe;AAAA,UAC7B,UAAU,eAAe,eAAe;AAAA,UACxC;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAEA,oBAAC,iBAAc,cAA4B;AAAA,MAE3C;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,mBAAiB,SAAS,UAAU;AAAA,UACpC,eAAY;AAAA,UACZ,IAAI;AAAA,UAEH,iBAAO,MAAM,KAAK,EAAE,IAAI,CAAC,QACxB,oBAAC,mBAA8B,KAAW,GAAG,cAAvB,IAAI,GAA+B,CAC1D;AAAA;AAAA,MACH;AAAA,OACF;AAAA;AAEJ;","names":[]}

package/dist/{chunk-H3AQQOTI.js → chunk-HKGKQKQT.js} RENAMED Viewed

@@ -43,8 +43,15 @@ var dayCellSx = (day, visible) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
+  // 40 is the size it ASKS for, so the month's intrinsic width stays 304 and a
+  // shrink-wrapping parent (the picker is inline-flex) still sizes to it; the
+  // column's `minmax(0, 1fr)` and this `maxWidth` let it give way below that.
   width: CELL_SIZE,
-  height: CELL_SIZE,
+  maxWidth: "100%",
+  aspectRatio: "1 / 1",
+  justifySelf: "center",
+  boxSizing: "border-box",
+  padding: 0,
   border: "none",
   borderRadius: 1,
   cursor: day.disabled ? "not-allowed" : "pointer",
@@ -99,4 +106,4 @@ var CalendarDay = ({
 export {
   CalendarDay
 };
-//# sourceMappingURL=chunk-H3AQQOTI.js.map
+//# sourceMappingURL=chunk-HKGKQKQT.js.map

package/dist/chunk-HKGKQKQT.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/form/Calendar/CalendarDay.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { rem, sxRem } from '../../../tokens/relative';\n\nimport type { DayRenderArgs } from './Calendar.types';\n\n/**\n * A day cell's LARGEST edge, 40 design px through the theme's type scale. The\n * cell is a square that fills its grid column up to this size, so the month\n * shrinks with its container instead of holding a fixed 304px floor (FUT-3861).\n */\nconst CELL_SIZE = sxRem(40);\n\ninterface DayState extends DayRenderArgs {\n outside: boolean;\n focused: boolean;\n}\n\n// Order matters: these land on the element in the order listed.\nconst CLASS_FLAGS: Array<[keyof DayState, string]> = [\n ['selected', 'selected'],\n ['inRange', 'in-range'],\n ['rangeStart', 'range-start'],\n ['rangeEnd', 'range-end'],\n ['disabled', 'disabled'],\n ['today', 'today'],\n ['outside', 'outside'],\n ['hovered', 'hovered'],\n ['focused', 'focused'],\n];\n\nconst dayClassNames = (state: DayState, custom?: string): string =>\n [\n 'calendar-day',\n ...CLASS_FLAGS.filter(([flag]) => state[flag]).map(([, name]) => name),\n ...(custom ? [custom] : []),\n ].join(' ');\n\nconst isEndpoint = (day: DayRenderArgs): boolean =>\n day.selected || day.rangeStart || day.rangeEnd;\n\nconst backgroundFor = (day: DayRenderArgs): string => {\n if (isEndpoint(day)) return 'primary.main';\n if (day.inRange || day.hovered) return 'primary.light';\n return 'transparent';\n};\n\nconst colorFor = (day: DayRenderArgs, visible: boolean): string => {\n if (isEndpoint(day)) return 'primary.contrastText';\n if (day.disabled) return 'text.disabled';\n // Outside days that are switched off still occupy the grid, they just have\n // nothing to show.\n if (!visible) return 'transparent';\n return 'text.primary';\n};\n\nconst hoverBackgroundFor = (day: DayRenderArgs): string | undefined => {\n if (day.disabled) return undefined;\n return day.selected ? 'primary.dark' : 'action.hover';\n};\n\nconst dayCellSx = (day: DayRenderArgs, visible: boolean): SxProps<Theme> => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n // 40 is the size it ASKS for, so the month's intrinsic width stays 304 and a\n // shrink-wrapping parent (the picker is inline-flex) still sizes to it; the\n // column's `minmax(0, 1fr)` and this `maxWidth` let it give way below that.\n width: CELL_SIZE,\n maxWidth: '100%',\n aspectRatio: '1 / 1',\n justifySelf: 'center',\n boxSizing: 'border-box',\n padding: 0,\n border: 'none',\n borderRadius: 1,\n cursor: day.disabled ? 'not-allowed' : 'pointer',\n backgroundColor: backgroundFor(day),\n color: colorFor(day, visible),\n opacity: !day.inCurrentMonth && visible ? 0.5 : 1,\n fontWeight: day.today ? 'bold' : 'normal',\n '&:hover': {\n backgroundColor: hoverBackgroundFor(day),\n },\n '&:focus': {\n outline: (theme: Theme) => `${rem(theme, 2)} solid`,\n outlineColor: 'primary.main',\n outlineOffset: sxRem(1),\n },\n});\n\nexport interface CalendarDayProps {\n day: DayRenderArgs;\n focused: boolean;\n showOutsideDays: boolean;\n dayClassName?: (args: DayRenderArgs) => string;\n onSelect: (date: Date) => void;\n onHover: (date: Date) => void;\n onHoverEnd: () => void;\n}\n\nexport const CalendarDay: FC<CalendarDayProps> = ({\n day,\n focused,\n showOutsideDays,\n dayClassName,\n onSelect,\n onHover,\n onHoverEnd,\n}) => {\n const visible = day.inCurrentMonth || showOutsideDays;\n const state: DayState = { ...day, outside: !day.inCurrentMonth, focused };\n\n return (\n <Box\n component=\"button\"\n role=\"gridcell\"\n tabIndex={focused ? 0 : -1}\n aria-selected={day.selected}\n aria-disabled={day.disabled}\n aria-current={day.today ? 'date' : undefined}\n className={dayClassNames(state, dayClassName?.(day))}\n data-testid={`calendar-date-${day.date.getDate()}`}\n onClick={() => onSelect(day.date)}\n onMouseEnter={() => onHover(day.date)}\n onMouseLeave={onHoverEnd}\n sx={dayCellSx(day, visible)}\n >\n {day.selected && (\n <Box component=\"span\" data-testid=\"calendar-selected-date\" sx={{ display: 'none' }} />\n )}\n {day.today && (\n <Box component=\"span\" data-testid=\"calendar-today\" sx={{ display: 'none' }} />\n )}\n {visible ? day.date.getDate() : ''}\n </Box>\n );\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-KHIUYLKY.js → chunk-MNZ6MCOK.js} RENAMED Viewed

@@ -15,7 +15,7 @@ import {
 } from "./chunk-FRAVVI4A.js";
 import {
   Calendar
-} from "./chunk-R53ZOW4B.js";
+} from "./chunk-NDGA7ZE6.js";
 // src/components/form/DateRangePicker/DateRangePicker.tsx
 import Box from "@mui/material/Box/index.js";
@@ -181,4 +181,4 @@ export {
   DateRangePicker,
   DateRangePicker_default
 };
-//# sourceMappingURL=chunk-KHIUYLKY.js.map
+//# sourceMappingURL=chunk-MNZ6MCOK.js.map

package/dist/{chunk-R53ZOW4B.js → chunk-NDGA7ZE6.js} RENAMED Viewed

@@ -6,7 +6,7 @@ import {
 } from "./chunk-SUALMVL7.js";
 import {
   CalendarMonth
-} from "./chunk-AG3DY5TH.js";
+} from "./chunk-HHPJXK4Z.js";
 import {
   rem,
   sxRem
@@ -87,4 +87,4 @@ export {
   Calendar,
   Calendar_default
 };
-//# sourceMappingURL=chunk-R53ZOW4B.js.map
+//# sourceMappingURL=chunk-NDGA7ZE6.js.map

package/dist/form/Calendar.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import "../chunk-BO6S47KI.js";
 import {
   Calendar
-} from "../chunk-R53ZOW4B.js";
+} from "../chunk-NDGA7ZE6.js";
 import "../chunk-2ZRZTGWP.js";
 import "../chunk-SUALMVL7.js";
-import "../chunk-AG3DY5TH.js";
-import "../chunk-6PU3JYVY.js";
-import "../chunk-H3AQQOTI.js";
+import "../chunk-HHPJXK4Z.js";
+import "../chunk-6DAIC2MG.js";
+import "../chunk-HKGKQKQT.js";
 import "../chunk-E2Y7G4MP.js";
 import "../chunk-FFQ4NOJT.js";
 import "../chunk-TERT6TIS.js";

package/dist/form/DateRangePicker.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import "../chunk-BN6POCYF.js";
 import {
   DateRangePicker
-} from "../chunk-KHIUYLKY.js";
+} from "../chunk-MNZ6MCOK.js";
 import {
   DEFAULT_QUICK_RANGES,
   DEFAULT_QUICK_RANGE_LABELS,
@@ -16,12 +16,12 @@ import {
 } from "../chunk-NTO5DALI.js";
 import "../chunk-FRAVVI4A.js";
 import "../chunk-BO6S47KI.js";
-import "../chunk-R53ZOW4B.js";
+import "../chunk-NDGA7ZE6.js";
 import "../chunk-2ZRZTGWP.js";
 import "../chunk-SUALMVL7.js";
-import "../chunk-AG3DY5TH.js";
-import "../chunk-6PU3JYVY.js";
-import "../chunk-H3AQQOTI.js";
+import "../chunk-HHPJXK4Z.js";
+import "../chunk-6DAIC2MG.js";
+import "../chunk-HKGKQKQT.js";
 import "../chunk-E2Y7G4MP.js";
 import "../chunk-FFQ4NOJT.js";
 import "../chunk-TERT6TIS.js";

package/dist/types/components/form/Calendar/CalendarDay.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CalendarDay.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Calendar/CalendarDay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKhC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;~~AA4EtD~~,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,aAAa,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,MAAM,CAAC;IAC/C,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC9B,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAoC5C,CAAC"}
1	+ {"version":3,"file":"CalendarDay.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Calendar/CalendarDay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKhC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAuFtD,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,aAAa,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,MAAM,CAAC;IAC/C,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC9B,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAoC5C,CAAC"}

package/dist/types/components/form/Calendar/CalendarMonth.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CalendarMonth.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Calendar/CalendarMonth.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMhC,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;~~AAsExD~~,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,EAAE,cAAc,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA2ChD,CAAC"}
1	+ {"version":3,"file":"CalendarMonth.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Calendar/CalendarMonth.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMhC,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AA+ExD,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,EAAE,cAAc,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA2ChD,CAAC"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.78.3",
+  "version": "6.78.4",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/form/Calendar/Calendar.md CHANGED Viewed

@@ -116,6 +116,13 @@ export interface CalendarProps {
 - Enforce `minRangeLength`/`maxRangeLength`. If invalid, ignore or snap (configurable via your handler).
 - Fire `onIntermediateRangeChange` as user hovers. Fire `onRangeChange` once both ends are chosen.
+### Width
+- The day grid is fluid: seven `minmax(0, 1fr)` columns, each day a square that fills its column up to 40 design px.
+- A month takes the room it is given, up to 304 design px (7 × 40 + 6 × 4). Side by side, months wrap rather than squeeze, at the same width as before.
+- A custom `renderDay` element is the grid item, so it is held to its column: keep it within 40 design px or it overlaps the next day.
+- So a one-month calendar fits a 320 bottom sheet and a 390 `Dialog` with no consumer CSS (FUT-3861). Pinned by the `FitsA320Sheet` and `FitsA390Dialog` stories in `DateRangePicker.test.stories.tsx`.
 ### Navigation
 - Header buttons move month (or year with modifier keys if desired).

package/src/components/form/Calendar/CalendarDay.tsx CHANGED Viewed

@@ -7,7 +7,11 @@ import { rem, sxRem } from '../../../tokens/relative';
 import type { DayRenderArgs } from './Calendar.types';
-/** A day cell's edge, 40 design px through the theme's type scale. */
+/**
+ * A day cell's LARGEST edge, 40 design px through the theme's type scale. The
+ * cell is a square that fills its grid column up to this size, so the month
+ * shrinks with its container instead of holding a fixed 304px floor (FUT-3861).
+ */
 const CELL_SIZE = sxRem(40);
 interface DayState extends DayRenderArgs {
@@ -62,8 +66,15 @@ const dayCellSx = (day: DayRenderArgs, visible: boolean): SxProps<Theme> => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
+  // 40 is the size it ASKS for, so the month's intrinsic width stays 304 and a
+  // shrink-wrapping parent (the picker is inline-flex) still sizes to it; the
+  // column's `minmax(0, 1fr)` and this `maxWidth` let it give way below that.
   width: CELL_SIZE,
-  height: CELL_SIZE,
+  maxWidth: '100%',
+  aspectRatio: '1 / 1',
+  justifySelf: 'center',
+  boxSizing: 'border-box',
+  padding: 0,
   border: 'none',
   borderRadius: 1,
   cursor: day.disabled ? 'not-allowed' : 'pointer',

package/src/components/form/Calendar/CalendarMonth.tsx CHANGED Viewed

@@ -16,7 +16,16 @@ import { CalendarDayCell } from './CalendarDayCell';
 /** The nav spacer's width and the weekday row's height, 32 design px through the type scale. */
 const SPACER_WIDTH = sxRem(32);
-const GRID_SX = { display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 0.5 } as const;
+// `minmax(0, 1fr)`, not `1fr`: a bare `1fr` keeps each column at least its
+// content's width, which is what held the grid at 304px (FUT-3861).
+const GRID_SX = { display: 'grid', gridTemplateColumns: 'repeat(7, minmax(0, 1fr))', gap: 0.5 } as const;
+/**
+ * A month takes the room it is given, from nothing up to seven full cells and
+ * their gaps (7 × 40 + 6 × 4 design px). Months side by side keep a 280 basis,
+ * so a multi-month calendar still wraps rather than squeezing every month.
+ */
+const MONTH_SX = { flex: `1 1 ${sxRem(280)}`, minWidth: 0, maxWidth: sxRem(304) } as const;
 // Only the outermost months carry arrows; the ones between get a spacer so their
 // titles stay centred.
@@ -112,7 +121,7 @@ export const CalendarMonth: FC<CalendarMonthProps> = ({
        January's 5th and February's. Without a per-month hook a test can only
        reach a day positionally, which is exactly what the flakiness gate
        refuses. Additive: `calendar-grid` below is unchanged. */
-    <Box sx={{ minWidth: sxRem(280) }} data-testid={`calendar-month-${monthIndex}`}>
+    <Box sx={MONTH_SX} data-testid={`calendar-month-${monthIndex}`}>
       <MonthNavHeader
         title={title}
         showPrevious={monthIndex === 0}

package/dist/chunk-AG3DY5TH.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../src/components/form/Calendar/CalendarMonth.tsx"],"sourcesContent":["import ChevronLeft from '@mui/icons-material/ChevronLeft';\nimport ChevronRight from '@mui/icons-material/ChevronRight';\nimport Box from '@mui/material/Box/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { sxRem } from '../../../tokens/relative';\n\nimport { getMonthName } from './Calendar.dates';\nimport type { CalendarProps, MonthMatrix } from './Calendar.types';\nimport type { DayCellContext } from './CalendarDayCell';\nimport { CalendarDayCell } from './CalendarDayCell';\n\n/** The nav spacer's width and the weekday row's height, 32 design px through the type scale. */\nconst SPACER_WIDTH = sxRem(32);\n\nconst GRID_SX = { display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 0.5 } as const;\n\n// Only the outermost months carry arrows; the ones between get a spacer so their\n// titles stay centred.\nconst MonthNavHeader: FC<{\n title: React.ReactNode;\n showPrevious: boolean;\n showNext: boolean;\n onPreviousMonth: () => void;\n onNextMonth: () => void;\n}> = ({ title, showPrevious, showNext, onPreviousMonth, onNextMonth }) => (\n <Box\n sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}\n data-testid=\"calendar-header\"\n >\n {showPrevious && (\n <IconButton onClick={onPreviousMonth} size=\"small\" data-testid=\"calendar-prev-month\">\n <ChevronLeft />\n </IconButton>\n )}\n\n <Typography\n variant=\"h6\"\n component=\"h2\"\n sx={{ fontWeight: 'bold', flex: 1, textAlign: 'center' }}\n >\n {title}\n </Typography>\n\n {showNext && (\n <IconButton onClick={onNextMonth} size=\"small\" data-testid=\"calendar-next-month\">\n <ChevronRight />\n </IconButton>\n )}\n\n {!showPrevious && !showNext && <Box sx={{ width: SPACER_WIDTH }} />}\n </Box>\n);\n\nconst WeekdayHeader: FC<{ weekdayNames: string[] }> = ({ weekdayNames }) => (\n <Box sx={{ ...GRID_SX, mb: 1 }}>\n {weekdayNames.map((weekday, index) => (\n <Box\n // Narrow weekday names repeat within a week ('S', 'T'), so position is\n // the only stable key here.\n key={`weekday-${index}`}\n role=\"columnheader\"\n data-testid={`calendar-weekday-${index}`}\n sx={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: SPACER_WIDTH,\n fontSize: sxRem(14),\n fontWeight: 'bold',\n color: 'text.secondary',\n }}\n >\n {weekday}\n </Box>\n ))}\n </Box>\n);\n\nexport interface CalendarMonthProps {\n matrix: MonthMatrix;\n monthIndex: number;\n monthsToShow: number;\n locale: string;\n weekdayNames: string[];\n renderHeader?: CalendarProps['renderHeader'];\n onPreviousMonth: () => void;\n onNextMonth: () => void;\n dayContext: DayCellContext;\n}\n\nexport const CalendarMonth: FC<CalendarMonthProps> = ({\n matrix,\n monthIndex,\n monthsToShow,\n locale,\n weekdayNames,\n renderHeader,\n onPreviousMonth,\n onNextMonth,\n dayContext,\n}) => {\n const monthName = getMonthName(matrix.month, matrix.year, locale);\n const title = renderHeader ? renderHeader({ month: matrix.month, year: matrix.year }) : monthName;\n\n return (\n /* The month is addressable by its position, because in a multi-month\n calendar every day number appears once PER MONTH — `calendar-date-5` is\n January's 5th and February's. Without a per-month hook a test can only\n reach a day positionally, which is exactly what the flakiness gate\n refuses. Additive: `calendar-grid` below is unchanged. */\n <Box sx={{ minWidth: sxRem(280) }} data-testid={`calendar-month-${monthIndex}`}>\n <MonthNavHeader\n title={title}\n showPrevious={monthIndex === 0}\n showNext={monthIndex === monthsToShow - 1}\n onPreviousMonth={onPreviousMonth}\n onNextMonth={onNextMonth}\n />\n\n <WeekdayHeader weekdayNames={weekdayNames} />\n\n <Box\n role=\"grid\"\n aria-labelledby={`month-${monthIndex}`}\n data-testid=\"calendar-grid\"\n sx={GRID_SX}\n >\n {matrix.weeks.flat().map((day) => (\n <CalendarDayCell key={day.key} day={day} {...dayContext} />\n ))}\n </Box>\n </Box>\n );\n};\n"],"mappings":";;;;;;;;;;;AAAA,OAAO,iBAAiB;AACxB,OAAO,kBAAkB;AACzB,OAAO,SAAS;AAChB,OAAO,gBAAgB;AACvB,OAAO,gBAAgB;AAyBrB,SAMM,KANN;AAbF,IAAM,eAAe,MAAM,EAAE;AAE7B,IAAM,UAAU,EAAE,SAAS,QAAQ,qBAAqB,kBAAkB,KAAK,IAAI;AAInF,IAAM,iBAMD,CAAC,EAAE,OAAO,cAAc,UAAU,iBAAiB,YAAY,MAClE;AAAA,EAAC;AAAA;AAAA,IACC,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,gBAAgB,iBAAiB,IAAI,EAAE;AAAA,IACpF,eAAY;AAAA,IAEX;AAAA,sBACC,oBAAC,cAAW,SAAS,iBAAiB,MAAK,SAAQ,eAAY,uBAC7D,8BAAC,eAAY,GACf;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,IAAI,EAAE,YAAY,QAAQ,MAAM,GAAG,WAAW,SAAS;AAAA,UAEtD;AAAA;AAAA,MACH;AAAA,MAEC,YACC,oBAAC,cAAW,SAAS,aAAa,MAAK,SAAQ,eAAY,uBACzD,8BAAC,gBAAa,GAChB;AAAA,MAGD,CAAC,gBAAgB,CAAC,YAAY,oBAAC,OAAI,IAAI,EAAE,OAAO,aAAa,GAAG;AAAA;AAAA;AACnE;AAGF,IAAM,gBAAgD,CAAC,EAAE,aAAa,MACpE,oBAAC,OAAI,IAAI,EAAE,GAAG,SAAS,IAAI,EAAE,GAC1B,uBAAa,IAAI,CAAC,SAAS,UAC1B;AAAA,EAAC;AAAA;AAAA,IAIC,MAAK;AAAA,IACL,eAAa,oBAAoB,KAAK;AAAA,IACtC,IAAI;AAAA,MACF,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,UAAU,MAAM,EAAE;AAAA,MAClB,YAAY;AAAA,MACZ,OAAO;AAAA,IACT;AAAA,IAEC;AAAA;AAAA,EAbI,WAAW,KAAK;AAcvB,CACD,GACH;AAeK,IAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,YAAY,aAAa,OAAO,OAAO,OAAO,MAAM,MAAM;AAChE,QAAM,QAAQ,eAAe,aAAa,EAAE,OAAO,OAAO,OAAO,MAAM,OAAO,KAAK,CAAC,IAAI;AAExF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAME,qBAAC,OAAI,IAAI,EAAE,UAAU,MAAM,GAAG,EAAE,GAAG,eAAa,kBAAkB,UAAU,IAC1E;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,cAAc,eAAe;AAAA,UAC7B,UAAU,eAAe,eAAe;AAAA,UACxC;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAEA,oBAAC,iBAAc,cAA4B;AAAA,MAE3C;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,mBAAiB,SAAS,UAAU;AAAA,UACpC,eAAY;AAAA,UACZ,IAAI;AAAA,UAEH,iBAAO,MAAM,KAAK,EAAE,IAAI,CAAC,QACxB,oBAAC,mBAA8B,KAAW,GAAG,cAAvB,IAAI,GAA+B,CAC1D;AAAA;AAAA,MACH;AAAA,OACF;AAAA;AAEJ;","names":[]}

package/dist/chunk-H3AQQOTI.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../src/components/form/Calendar/CalendarDay.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { rem, sxRem } from '../../../tokens/relative';\n\nimport type { DayRenderArgs } from './Calendar.types';\n\n/** A day cell's edge, 40 design px through the theme's type scale. */\nconst CELL_SIZE = sxRem(40);\n\ninterface DayState extends DayRenderArgs {\n outside: boolean;\n focused: boolean;\n}\n\n// Order matters: these land on the element in the order listed.\nconst CLASS_FLAGS: Array<[keyof DayState, string]> = [\n ['selected', 'selected'],\n ['inRange', 'in-range'],\n ['rangeStart', 'range-start'],\n ['rangeEnd', 'range-end'],\n ['disabled', 'disabled'],\n ['today', 'today'],\n ['outside', 'outside'],\n ['hovered', 'hovered'],\n ['focused', 'focused'],\n];\n\nconst dayClassNames = (state: DayState, custom?: string): string =>\n [\n 'calendar-day',\n ...CLASS_FLAGS.filter(([flag]) => state[flag]).map(([, name]) => name),\n ...(custom ? [custom] : []),\n ].join(' ');\n\nconst isEndpoint = (day: DayRenderArgs): boolean =>\n day.selected || day.rangeStart || day.rangeEnd;\n\nconst backgroundFor = (day: DayRenderArgs): string => {\n if (isEndpoint(day)) return 'primary.main';\n if (day.inRange || day.hovered) return 'primary.light';\n return 'transparent';\n};\n\nconst colorFor = (day: DayRenderArgs, visible: boolean): string => {\n if (isEndpoint(day)) return 'primary.contrastText';\n if (day.disabled) return 'text.disabled';\n // Outside days that are switched off still occupy the grid, they just have\n // nothing to show.\n if (!visible) return 'transparent';\n return 'text.primary';\n};\n\nconst hoverBackgroundFor = (day: DayRenderArgs): string | undefined => {\n if (day.disabled) return undefined;\n return day.selected ? 'primary.dark' : 'action.hover';\n};\n\nconst dayCellSx = (day: DayRenderArgs, visible: boolean): SxProps<Theme> => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: CELL_SIZE,\n height: CELL_SIZE,\n border: 'none',\n borderRadius: 1,\n cursor: day.disabled ? 'not-allowed' : 'pointer',\n backgroundColor: backgroundFor(day),\n color: colorFor(day, visible),\n opacity: !day.inCurrentMonth && visible ? 0.5 : 1,\n fontWeight: day.today ? 'bold' : 'normal',\n '&:hover': {\n backgroundColor: hoverBackgroundFor(day),\n },\n '&:focus': {\n outline: (theme: Theme) => `${rem(theme, 2)} solid`,\n outlineColor: 'primary.main',\n outlineOffset: sxRem(1),\n },\n});\n\nexport interface CalendarDayProps {\n day: DayRenderArgs;\n focused: boolean;\n showOutsideDays: boolean;\n dayClassName?: (args: DayRenderArgs) => string;\n onSelect: (date: Date) => void;\n onHover: (date: Date) => void;\n onHoverEnd: () => void;\n}\n\nexport const CalendarDay: FC<CalendarDayProps> = ({\n day,\n focused,\n showOutsideDays,\n dayClassName,\n onSelect,\n onHover,\n onHoverEnd,\n}) => {\n const visible = day.inCurrentMonth || showOutsideDays;\n const state: DayState = { ...day, outside: !day.inCurrentMonth, focused };\n\n return (\n <Box\n component=\"button\"\n role=\"gridcell\"\n tabIndex={focused ? 0 : -1}\n aria-selected={day.selected}\n aria-disabled={day.disabled}\n aria-current={day.today ? 'date' : undefined}\n className={dayClassNames(state, dayClassName?.(day))}\n data-testid={`calendar-date-${day.date.getDate()}`}\n onClick={() => onSelect(day.date)}\n onMouseEnter={() => onHover(day.date)}\n onMouseLeave={onHoverEnd}\n sx={dayCellSx(day, visible)}\n >\n {day.selected && (\n <Box component=\"span\" data-testid=\"calendar-selected-date\" sx={{ display: 'none' }} />\n )}\n {day.today && (\n <Box component=\"span\" data-testid=\"calendar-today\" sx={{ display: 'none' }} />\n )}\n {visible ? day.date.getDate() : ''}\n </Box>\n );\n};\n"],"mappings":"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","names":[]}

/package/dist/{chunk-6PU3JYVY.js.map → chunk-6DAIC2MG.js.map} RENAMED Viewed

File without changes

/package/dist/{chunk-KHIUYLKY.js.map → chunk-MNZ6MCOK.js.map} RENAMED Viewed

File without changes

/package/dist/{chunk-R53ZOW4B.js.map → chunk-NDGA7ZE6.js.map} RENAMED Viewed

File without changes