Tailwind CSS Month & Year Calendars Blocks

All Blocks
Application UI
Productivity
Month & Year Calendars

Month & Year Calendars

Mini month and year calendar layouts for scanning dates, event markers, and long-range schedules.

Mini Month Calendar Card with Event Dots Pro

Compact month calendar card combines month navigation, weekday labels, date cells, and event marker dots.

Create a responsive UI block named "Mini Month Calendar Card with Event Dots" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/productivity/month-and-year-calendars/#mini-month-calendar-card-with-event-dots. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: productivity/month-and-year-calendars
- Block ID: mini-month-calendar-card-with-event-dots
- Source description: Compact month calendar card combines month navigation, weekday labels, date cells, and event marker dots.
- Preview iframe: https://preline.co/blocks/productivity/month-and-year-calendars/iframes/pro/mini-month-calendar-card-with-event-dots.html (repo path: blocks/productivity/month-and-year-calendars/iframes/pro/mini-month-calendar-card-with-event-dots.html)
- Source markup reference:
  - partials/pro/calendar-app/sources/single-monthly-calendar.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- Preserve source layout width, wrapper hierarchy, component geometry, responsive order, interaction contents, and exact visible copy.
- Do not replace custom source details with default badges, buttons, cards, placeholders, or unrelated components.
- Source content inventory (from the source markup):
  - Fixed `w-52` wrapper with no card border, background, padding, or shadow of its own - the white/neutral surface behind the preview is iframe body chrome, not part of the block.
  - Header row (`flex justify-between items-center gap-1 mb-1`): the label `January 2024` as `ps-1.5 text-xs font-medium text-muted-foreground-1`, then two `size-7` circular icon-only chevron buttons with `aria-label="Previous"` and `aria-label="Next"`.
  - Weekday row of seven `w-7` `text-[11px]` labels, Monday-first: `Mo`, `Tu`, `We`, `Th`, `Fr`, `Sa`, `Su`.
  - Six week rows of seven `m-px size-7 rounded-full` buttons: `1` through `31` for January, then muted trailing days `1`-`11` of the next month; January 1 sits in the first column with no leading blanks, so the grid holds 42 cells total.
  - Exactly one day is selected on load - `12`, styled `border-primary-line bg-primary text-xs font-medium text-primary-foreground`; every other in-month cell is `border border-transparent text-foreground` and next-month cells are `text-muted-foreground` with no border class.
  - Exactly one event dot exists, on day `3`: an absolutely positioned `bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2` span inside the day button. Do not scatter extra dots across other dates.
  - Fully static hand-written markup: no Preline JS plugins, no datepicker library, and the previous/next buttons are inert with no month-switching logic.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<div class="w-52 ">
  
  <div class="flex justify-between items-center gap-1 mb-1">
    <span class="ps-1.5 block text-xs font-medium text-muted-foreground-1">January 2026</span>

<div class="flex mb-1.5">
    <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
      Mo
    </span>
    <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
      Tu
    </span>
    <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
      We
    </span>
    <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
      Th
    </span>
    <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
      Fr
    </span>
    <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
      Sa
    </span>
    <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
      Su
    </span>
  </div>

<div class="flex">
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        1
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        2
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        3
        <span class="absolute bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2"></span>
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        4
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        5
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        6
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        7
      </button>
    </div>
  </div>

<div class="flex">
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        8
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        9
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        10
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        11
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-primary-line bg-primary text-xs font-medium text-primary-foreground hover:border-primary rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
        12
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        13
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        14
      </button>
    </div>
  </div>

<div class="flex">
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        15
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        16
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        17
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        18
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        19
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        20
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        21
      </button>
    </div>
  </div>

<div class="flex">
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        22
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        23
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        24
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        25
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        26
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        27
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        28
      </button>
    </div>
  </div>

<div class="flex">
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        29
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        30
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        31
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        1
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        2
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        3
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        4
      </button>
    </div>
  </div>

<div class="flex">
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        5
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        6
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        7
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        8
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        9
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        10
      </button>
    </div>
    <div>
      <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
        11
      </button>
    </div>
  </div>
  
</div>

Spending Heatmap Calendar with Daily Amounts New Pro

Month calendar shades each day by spend and flags days over the daily limit, with a less-to-more legend.

Create a responsive UI block named "Spending Heatmap Calendar with Daily Amounts" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/productivity/month-and-year-calendars/#spending-heatmap-calendar-with-daily-amounts. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: productivity/month-and-year-calendars
- Block ID: spending-heatmap-calendar-with-daily-amounts
- Source description: Month calendar shades each day by spend and flags days over the daily limit, with a less-to-more legend.
- Preview iframe: https://preline.co/blocks/productivity/month-and-year-calendars/iframes/pro/spending-heatmap-calendar-with-daily-amounts.html (repo path: blocks/productivity/month-and-year-calendars/iframes/pro/spending-heatmap-calendar-with-daily-amounts.html)
- Source markup reference:
  - partials/pro/finance-tracker/sources/month-calendar.html
  - partials/pro/finance-tracker/css/heat-calendar.html
  - partials/pro/finance-tracker/js/data.html
  - partials/pro/finance-tracker/js/calendar.html

Block-specific fidelity rules:
- Preserve source layout width, wrapper hierarchy, component geometry, responsive order, interaction contents, and exact visible copy.
- Do not replace custom source details with default badges, buttons, cards, placeholders, or unrelated components.
- Source content inventory (from the source markup):
  - An `h2` reading `Daily spending` sits above the calendar; the legend below reads `Less` with four increasing heat swatches then `More` on the left, and a red dot with `Over $167` on the right.
  - The calendar is a Vanilla Calendar Pro instance carrying `class="hs-heat-calendar hs-datepicker"`, configured through `data-hs-datepicker` with `applyUtilityClasses: true`, `inputMode: false`, single-date selection on `2026-07-27`, `selectedMonth: 6`, `selectedYear: 2026`, `dateToday: "2026-07-27"`, and `displayDatesOutside: true`. The legend below carries `class="hs-heat-legend"`. Every stylesheet rule hooks on those two classes, never on an id, so the elements can be renamed when the block is reused.
  - It is a heatmap panel, not a date picker: the CSS pins `.vc-dates` to a fixed `15.5rem` height and hides any sixth week row, so the panel below it never shifts between months.
  - Custom prev/next arrow templates replace the defaults with 24-viewBox chevrons and explicit `Previous month` / `Next month` labels; each date cell is `!h-12` and stacks the day number over the amount via a `!flex !flex-col` button.
  - The script writes a `$1,234`-style amount under every day that has spend, tagged `data-hs-heat-value`, sets `--hs-heat` on the cell as `amount / peak` clamped to 1, and marks it with `data-hs-heat`. One rule then shades both the day cells and the legend swatches: `background-color: color-mix(in oklab, var(--primary) calc(var(--hs-heat, 0) * 20%), transparent)`, so the legend can never drift from the calendar.
  - Days over the daily limit are flagged in red; today keeps the primary fill and forces its amount to the primary foreground so the number stays readable.
  - `js/data.html` must load before the calendar script: it exposes `julyExpensesByDate` keyed by ISO date plus `DAILY_LIMIT`, and paints every `[data-hs-limit-label]` so the `$167` in the legend is never typed twice.
  - The block depends on the `vanilla-calendar-pro` package and the Preline runtime; do not approximate it with a hand-built month grid.
  - The card has no surface of its own; it is designed to sit on a sidebar surface.

<div class="w-full">
      <h2 id="spending-calendar-heading" class="mb-3 font-medium text-foreground">Daily spending</h2>

<div id="expense-spending-datepicker" class="hs-datepicker block w-full text-sm text-foreground"
      data-hs-datepicker='{
        "applyUtilityClasses": true,
        "inputMode": false,
        "type": "default",
        "displayDatesOutside": true,
        "selectionDatesMode": "single",
        "selectedDates": ["2026-07-27"],
        "selectedMonth": 6,
        "selectedYear": 2026,
        "dateToday": "2026-07-27",
        "dateMin": "2020-01-01",
        "dateMax": "2050-12-31",
        "mode": "default",
        "styles": {
          "calendar": "hs-heat-calendar !w-full !p-0 !bg-transparent !border-0 !rounded-none !shadow-none",
          "arrowPrev": "!rounded-full",
          "arrowNext": "!rounded-full",
          "month": "!inline-flex !h-8 !items-center !leading-none",
          "year": "!inline-flex !h-8 !items-center !leading-none",
          "datesRow": "vc-dates__row",
          "date": "!h-12 !rounded-lg before:!rounded-lg hover:!text-foreground hover:before:!bg-muted-hover hover:before:!border-transparent hs-vc-date-month-prev:hover:!text-surface-3 hs-vc-date-month-next:hover:!text-surface-3 hs-vc-date-today:hover:!text-primary-foreground hs-vc-date-today:hover:before:!bg-transparent hs-vc-date-today:[&_[data-hs-heat-value]]:!text-primary-foreground hs-vc-date-selected:!bg-primary hs-vc-date-selected:!text-primary-foreground hs-vc-date-selected:hover:!text-primary-foreground hs-vc-date-selected:hover:before:!bg-transparent hs-vc-date-selected:[&_[data-hs-heat-value]]:!text-primary-foreground",
          "dateBtn": "!flex !flex-col !items-center !justify-center !rounded-lg"
        },
        "templates": {
          "arrowPrev": "<button data-vc-arrow=\"prev\" aria-label=\"Previous month\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"></path></svg></button>",
          "arrowNext": "<button data-vc-arrow=\"next\" aria-label=\"Next month\"><svg class=\"shrink-0 size-4\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></button>"
        }
      }'></div>

`hs-heat-calendar` is declared inside the datepicker's own `styles.calendar`
         option, not on the source element: Vanilla Calendar replaces the class attribute
         on the calendar root at init, so a class written in the markup would be wiped
         before these rules could match. */
      .hs-heat-calendar .vc-dates {
        height: 15.5rem;
        align-content: start;
      }

.hs-heat-calendar .vc-dates__row:nth-child(n + 6) {
        display: none;
      }

.hs-heat-calendar [data-vc="header"] > .col-span-3 > span {
        display: none;
      }

/* Month and year pickers, reachable by clicking the header labels. */
      .hs-heat-calendar [data-vc="header"][role="toolbar"] {
        background: transparent;
      }

.hs-heat-calendar [data-vc="header"][role="toolbar"] > [data-vc="header"] {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        column-gap: .5rem;
        margin-inline: 0;
        padding-block: 0 .75rem;
      }

.hs-heat-calendar [data-vc="header"][role="toolbar"] > [data-vc="header"] > .col-span-1 {
        display: flex;
        justify-content: center;
      }

.hs-heat-calendar .vc-years {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: .5rem;
        padding: 0;
      }

.hs-heat-calendar .vc-years__year {
        width: 100%;
        min-width: 0;
        height: 2.5rem;
        padding: 0 .5rem;
        justify-content: center;
      }

/* Heat shading. --hs-heat is a 0-1 intensity set per day by the calendar script and
         hardcoded on the legend swatches, so both read from one formula. */
      .hs-heat-calendar [data-vc-date-btn][data-hs-heat],
      .hs-heat-legend [data-hs-heat] {
        background-color: color-mix(in oklab, var(--primary) calc(var(--hs-heat, 0) * 20%), transparent);
      }

/* Selected and today keep their own fill from the utility classes on the date
         button, so the plugin's default backgrounds are cleared out of the way. */
      .hs-heat-calendar [data-vc-date-selected] [data-vc-date-btn],
      .hs-heat-calendar [data-vc-date-today] [data-vc-date-btn] {
        background-color: transparent;
      }
    </style>

// June 1 – July 31, 2026. One entry per day; null means "not spent yet".
        const SERIES_START = Date.UTC(2026, 5, 1);
        const DAILY_SPENDING = [
          130, 160, 145, 175, 155, 90, 120, 135, 170, 150,
          190, 110, 125, 165, 145, 180, 160, 100, 115, 140,
          185, 170, 205, 150, 130, 145, 135, 140, 120, 155,
          95, 115, 140, 125, 150, 40, 100, 165, 180, 155,
          130, 105, 120, 185, 210, 165, 150, 120, 95, 110,
          175, 195, 225, 200, 135, 160, 180, null, null, null,
          null
        ];

// June has 30 days, so July 1 is index 30 and July 27 (today) is index 56.
        const JULY_START_INDEX = 30;
        const CURRENT_DAY_INDEX = 56;

const toISODate = (index) => {
          const date = new Date(SERIES_START);

date.setUTCDate(date.getUTCDate() + index);

return [
            date.getUTCFullYear(),
            String(date.getUTCMonth() + 1).padStart(2, '0'),
            String(date.getUTCDate()).padStart(2, '0')
          ].join('-');
        };

// The calendar shades July only, keyed by ISO date so it can look days up directly.
        const julyExpensesByDate = new Map(
          DAILY_SPENDING
            .slice(JULY_START_INDEX, CURRENT_DAY_INDEX + 1)
            .map((amount, offset) => [toISODate(JULY_START_INDEX + offset), amount])
        );

return {
          DAILY_LIMIT,
          MONTHLY_BUDGET,
          SERIES_START,
          DAILY_SPENDING,
          JULY_START_INDEX,
          CURRENT_DAY_INDEX,
          julyExpensesByDate
        };
      })();

// Every "$167" in the markup is painted from the constant, never typed twice.
      window.addEventListener('load', () => {
        const limit = `$${window.HSFinanceTracker.DAILY_LIMIT.toLocaleString('en-US')}`;

document.querySelectorAll('[data-hs-limit-label]').forEach((element) => {
          element.textContent = limit;
        });
      });
    </script>

const formatDate = (date) => [
          date.getUTCFullYear(),
          String(date.getUTCMonth() + 1).padStart(2, '0'),
          String(date.getUTCDate()).padStart(2, '0')
        ].join('-');

const formatLabel = new Intl.DateTimeFormat('en', {
          dateStyle: 'long',
          timeZone: 'UTC'
        });

const { DAILY_LIMIT, julyExpensesByDate: dailyExpenses } = window.HSFinanceTracker;
        const peakAmount = Math.max(...dailyExpenses.values());

const normalizeWeekCount = () => {
          const dates = calendar.querySelector('.vc-dates');
          if (!dates) return;

const rows = Array.from(dates.children).filter((row) => row.classList.contains('vc-dates__row'));
          const fillerRow = rows.find((row) => row.hasAttribute('data-hs-calendar-filler'));
          const calendarRows = rows.filter((row) => !row.hasAttribute('data-hs-calendar-filler'));

if (calendarRows.length === 4 && fillerRow) return;
          fillerRow?.remove();
          if (calendarRows.length !== 4) return;

const lastDateValue = calendarRows.at(-1)?.lastElementChild?.getAttribute('data-vc-date');
          if (!lastDateValue) return;

const [year, month, day] = lastDateValue.split('-').map(Number);
          const nextDate = new Date(Date.UTC(year, month - 1, day));
          const nextMonthRow = calendarRows.at(-1).cloneNode(true);
          nextMonthRow.setAttribute('data-hs-calendar-filler', '');

Array.from(nextMonthRow.children).forEach((dateCell) => {
            nextDate.setUTCDate(nextDate.getUTCDate() + 1);

const dateValue = formatDate(nextDate);
            const weekDay = nextDate.getUTCDay();
            const dateButton = dateCell.querySelector('[data-vc-date-btn]');

dateCell.setAttribute('data-vc-date', dateValue);
            dateCell.setAttribute('data-vc-date-month', 'next');
            dateCell.setAttribute('data-vc-date-week-day', String(weekDay));
            dateCell.removeAttribute('data-vc-date-disabled');
            dateCell.removeAttribute('data-vc-date-holiday');
            dateCell.removeAttribute('data-vc-date-hover');
            dateCell.removeAttribute('data-vc-date-selected');
            dateCell.removeAttribute('data-vc-date-today');
            dateCell.removeAttribute('data-vc-date-week-number');
            dateCell.removeAttribute('aria-current');
            dateCell.toggleAttribute('data-vc-date-weekend', weekDay === 0 || weekDay === 6);

if (!dateButton) return;

dateButton.textContent = String(nextDate.getUTCDate());
            dateButton.setAttribute('aria-label', formatLabel.format(nextDate));
            dateButton.removeAttribute('aria-disabled');
            dateButton.removeAttribute('aria-selected');
            dateButton.removeAttribute('tabindex');
          });

dates.append(nextMonthRow);
        };

const renderDailyExpenses = () => {
          calendar.querySelectorAll('[data-vc-date]').forEach((dateCell) => {
            const dateValue = dateCell.getAttribute('data-vc-date');
            const dateButton = dateCell.querySelector('[data-vc-date-btn]');
            if (!dateValue || !dateButton) return;

const amount = dailyExpenses.get(dateValue);
            const renderKey = `${dateValue}:${amount ?? ''}`;
            if (dateButton.getAttribute('data-hs-render-key') === renderKey) return;

const date = new Date(`${dateValue}T00:00:00Z`);
            const dayNumber = document.createElement('span');
            dayNumber.className = 'block leading-none';
            dayNumber.textContent = String(date.getUTCDate());

dateButton.replaceChildren(dayNumber);

if (amount !== undefined) {
              // Shade each day in proportion to its spend so the month reads as a heatmap.
              dateButton.style.setProperty('--hs-heat', Math.min(amount / peakAmount, 1).toFixed(3));
              dateButton.setAttribute('data-hs-heat', '');

dateButton.setAttribute('data-hs-render-key', renderKey);
          });
        };

const syncCalendar = () => {
          normalizeWeekCount();
          renderDailyExpenses();
        };

let animationFrame;
        const observer = new MutationObserver(() => {
          cancelAnimationFrame(animationFrame);
          animationFrame = requestAnimationFrame(syncCalendar);
        });

observer.observe(calendar, { childList: true, subtree: true });
        syncCalendar();
      });
    </script>

Open related finance tracker template

Year Calendar Grid with Mini Month Cards Pro

Year overview layout arranges twelve mini month cards in a scrollable grid with date cells and event marker dots.

Create a responsive UI block named "Year Calendar Grid with Mini Month Cards" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/productivity/month-and-year-calendars/#year-calendar-grid-with-mini-month-cards. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: productivity/month-and-year-calendars
- Block ID: year-calendar-grid-with-mini-month-cards
- Source description: Year overview layout arranges twelve mini month cards in a scrollable grid with date cells and event marker dots.
- Preview iframe: https://preline.co/blocks/productivity/month-and-year-calendars/iframes/pro/year-calendar-grid-with-mini-month-cards.html (repo path: blocks/productivity/month-and-year-calendars/iframes/pro/year-calendar-grid-with-mini-month-cards.html)
- Source markup reference:
  - partials/pro/calendar-app/layouts-components/year.html

Block-specific fidelity rules:
- Preserve source layout width, wrapper hierarchy, component geometry, responsive order, interaction contents, and exact visible copy.
- Do not replace custom source details with default badges, buttons, cards, placeholders, or unrelated components.
- Source content inventory (from the source markup):
  - Exactly twelve mini month blocks labeled `January`, `February`, `March`, `April`, `May`, `June`, `July`, `August`, `September`, `October`, `November`, `December`, in that order.
  - The outer wrapper is a `bg-layer size-full overflow-y-auto` scroll region with thin styled scrollbars; inside it the months sit in `flex flex-wrap justify-center gap-10` (a wrapping flex row, not a fixed 3- or 4-column grid) and each month block is `w-52.5 xl:w-64`.
  - Each month starts with `ps-1.5 mb-2 block text-xs font-medium` month name only - no year, no navigation arrows, no per-month card border or background.
  - Each month then repeats a seven-item Monday-first weekday row - `Mo`, `Tu`, `We`, `Th`, `Fr`, `Sa`, `Su` at `w-7 text-center text-[11px]` - followed by full week rows of `m-px size-7 rounded-full` day buttons laid out `flex justify-between`.
  - Every month is padded with adjacent-month days rendered in `text-muted-foreground` with no border class (February, for example, opens with muted `29`, `30`, `31` before `1`), while in-month days use `border border-transparent text-foreground`.
  - Thirteen event dots total are scattered across the year - an absolutely positioned `bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2` span inside a day button, starting with January `3`.
  - No day is selected or highlighted anywhere in the year view: there is no filled primary "today" cell, unlike the single-month variant.
  - Fully static hand-written markup: no Preline JS plugins, no datepicker library, and no click handlers on the day buttons.

<div class="pb-6 bg-layer size-full overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
  
  <div class="flex flex-wrap justify-center gap-10">
    
    <div class="w-52.5 xl:w-64">
      <span class="ps-1.5 mb-2 block text-xs font-medium text-muted-foreground-2">January</span>

<div class="flex justify-between mb-1.5">
        <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
          Mo
        </span>
        <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
          Tu
        </span>
        <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
          We
        </span>
        <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
          Th
        </span>
        <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
          Fr
        </span>
        <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
          Sa
        </span>
        <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
          Su
        </span>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            1
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
            <span class="absolute bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2"></span>
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            5
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            6
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            7
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            8
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            9
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            10
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            11
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center bg-primary border border-primary-line text-xs font-medium text-primary-foreground hover:border-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
            12
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            13
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            14
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            15
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            16
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            17
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            18
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            19
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            20
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            21
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            22
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            23
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            24
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            25
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            26
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            27
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            28
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            29
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            30
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            31
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            1
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            5
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            6
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            7
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            8
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            9
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            10
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            11
          </button>
        </div>
      </div>
      
    </div>

<div class="w-52.5 xl:w-64">
      <span class="ps-1.5 mb-2 block text-xs font-medium text-muted-foreground-2">February</span>

<div class="flex justify-between mb-1.5">
        <span class="m-px w-7 block text-center text-[11px] text-muted-foreground">
          Mo
        </span>
        <span class="m-px w-7 block text-center text-[11px] text-muted-foreground">
          Tu
        </span>
        <span class="m-px w-7 block text-center text-[11px] text-muted-foreground">
          We
        </span>
        <span class="m-px w-7 block text-center text-[11px] text-muted-foreground">
          Th
        </span>
        <span class="m-px w-7 block text-center text-[11px] text-muted-foreground">
          Fr
        </span>
        <span class="m-px w-7 block text-center text-[11px] text-muted-foreground">
          Sa
        </span>
        <span class="m-px w-7 block text-center text-[11px] text-muted-foreground">
          Su
        </span>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            29
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            30
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            31
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            1
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            5
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            6
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            7
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            8
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            9
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            10
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            11
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            12
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            13
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            14
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            15
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            16
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            17
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            18
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            19
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            20
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            21
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            22
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            23
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            24
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            25
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            26
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            27
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            28
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            29
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            1
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            5
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            6
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            7
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            8
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            9
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            10
          </button>
        </div>
      </div>
      
    </div>

<div class="w-52.5 xl:w-64">
      <span class="ps-1.5 mb-2 block text-xs font-medium text-muted-foreground-2">March</span>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            26
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            27
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            28
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            29
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            1
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            5
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            6
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            7
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            8
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            9
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            10
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            11
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            12
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            13
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            14
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            15
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            16
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            17
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            18
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            19
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            20
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            21
            <span class="absolute bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2"></span>
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            22
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            23
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            24
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            25
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            26
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            27
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            28
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            29
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            30
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            31
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            1
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            5
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            6
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            7
          </button>
        </div>
      </div>
      
    </div>

<div class="w-52.5 xl:w-64">
      <span class="ps-1.5 mb-2 block text-xs font-medium text-muted-foreground-2">April</span>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            8
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            9
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            10
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            11
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            12
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            13
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            14
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            15
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            16
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            17
            <span class="absolute bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2"></span>
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            18
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            19
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            20
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            21
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            22
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            23
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            24
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            25
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            26
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            27
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            28
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            29
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            30
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            1
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            5
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            6
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            7
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            8
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            9
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            10
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            11
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            12
          </button>
        </div>
      </div>
      
    </div>

<div class="w-52.5 xl:w-64">
      <span class="ps-1.5 mb-2 block text-xs font-medium text-muted-foreground-2">May</span>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            29
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            30
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            1
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            5
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            6
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            7
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            8
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            9
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            10
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            11
            <span class="absolute bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2"></span>
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            12
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            13
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            14
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            15
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            16
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            17
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            18
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            19
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            20
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            21
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            22
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            23
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            24
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            25
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            26
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            27
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            28
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            29
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            30
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            31
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            1
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            5
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            6
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            7
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            8
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            9
          </button>
        </div>
      </div>
      
    </div>

<div class="w-52.5 xl:w-64">
      <span class="ps-1.5 mb-2 block text-xs font-medium text-muted-foreground-2">June</span>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            27
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            28
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            29
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            30
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            31
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            1
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
            <span class="absolute bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2"></span>
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            5
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            6
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            7
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            8
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            9
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            10
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            11
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            12
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            13
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            14
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            15
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            16
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            17
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            18
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            19
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            20
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            21
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            22
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            23
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            24
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            25
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            26
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            27
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            28
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            29
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            30
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            1
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            5
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            6
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            7
          </button>
        </div>
      </div>
      
    </div>

<div class="w-52.5 xl:w-64">
      <span class="ps-1.5 mb-2 block text-xs font-medium text-muted-foreground-2">July</span>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            1
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            5
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            6
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            7
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            8
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            9
            <span class="absolute bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2"></span>
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            10
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            11
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            12
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            13
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            14
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            15
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            16
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            17
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            18
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            19
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            20
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            21
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            22
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            23
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            24
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            25
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            26
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            27
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            28
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            29
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            30
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            31
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            1
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
          </button>
        </div>
      </div>

<div class="w-52.5 xl:w-64">
      <span class="ps-1.5 mb-2 block text-xs font-medium text-muted-foreground-2">August</span>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            29
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            30
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            31
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            1
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            5
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            6
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            7
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            8
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            9
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            10
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            11
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            12
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            13
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            14
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            15
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            16
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            17
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            18
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            19
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            20
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            21
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            22
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            23
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            24
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            25
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            26
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            27
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            28
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            29
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            30
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            31
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            1
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            5
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            6
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            7
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            8
          </button>
        </div>
      </div>
      
    </div>

<div class="w-52.5 xl:w-64">
      <span class="ps-1.5 mb-2 block text-xs font-medium text-muted-foreground-2">September</span>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
            <span class="absolute bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2"></span>
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            5
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            6
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            7
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            8
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            9
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            10
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            11
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            12
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            13
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            14
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            15
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            16
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            17
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            18
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            19
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            20
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            21
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            22
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            23
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            24
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            25
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            26
            <span class="absolute bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2"></span>
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            27
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            28
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            29
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            30
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            1
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            5
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            6
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            7
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            8
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            9
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            10
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            11
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            12
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            13
          </button>
        </div>
      </div>

<div class="flex justify-between">
      </div>
      
    </div>

<div class="w-52.5 xl:w-64">
      <span class="ps-1.5 mb-2 block text-xs font-medium text-muted-foreground-2">October</span>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            30
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            1
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            5
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            6
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            7
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            8
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            9
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            10
            <span class="absolute bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2"></span>
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            11
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            12
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            13
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            14
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            15
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            16
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            17
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            18
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            19
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            20
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            21
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            22
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            23
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            24
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            25
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            26
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            27
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            28
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            29
            <span class="absolute bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2"></span>
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            30
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            31
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            1
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            5
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            6
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            7
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            8
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            9
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            10
          </button>
        </div>
      </div>
      
    </div>

<div class="w-52.5 xl:w-64">
      <span class="ps-1.5 mb-2 block text-xs font-medium text-muted-foreground-2">November</span>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            28
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            29
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            30
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            31
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            1
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            5
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            6
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            7
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            8
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            9
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            10
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            11
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            12
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            13
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            14
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            15
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            16
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            17
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            18
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            19
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            20
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            21
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            22
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            23
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            24
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            25
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            26
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            27
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            28
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            29
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            30
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            1
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            5
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            6
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            7
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            8
          </button>
        </div>
      </div>
      
    </div>

<div class="w-52.5 xl:w-64">
      <span class="ps-1.5 mb-2 block text-xs font-medium text-muted-foreground-2">December</span>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            5
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            6
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            7
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            8
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            9
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            10
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            11
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            12
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            13
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            14
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            15
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            16
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            17
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            18
            <span class="absolute bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2"></span>
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            19
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            20
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            21
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            22
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            23
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            24
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            25
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            26
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            27
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            28
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            29
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            30
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            31
            <span class="absolute bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2"></span>
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            1
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            2
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            3
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            4
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            5
          </button>
        </div>
      </div>

<div class="flex justify-between">
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            6
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            7
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            8
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            9
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            10
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            11
          </button>
        </div>
        <div>
          <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
            12
          </button>
        </div>
      </div>
      
    </div>
    
  </div>
  
</div>

Open related calendar year template