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.

<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 2024</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>

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.

<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