@kne/react-calendar 1.0.6 → 1.1.1

package/dist/index.css

@@ -528,6 +528,433 @@
   border-radius: 12px;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
 }
+.kne-react-calendar_0I96A {
+  --time-window-primary: #1677ff;
+  --time-window-primary-rgb: 22, 119, 255;
+  --time-window-surface: #fff;
+  --time-window-track: #f7f8fa;
+  --time-window-border: #ebedf1;
+  --time-window-text: #1d2129;
+  --time-window-muted: #86909c;
+  --time-window-day: #f08c00;
+  --time-window-tick-hour: #8a929e;
+  --time-window-tick-half: #a9b0bb;
+  --time-window-tick-quarter: #c3c8d0;
+  --time-window-tick-minute: #dcdfe5;
+  --time-window-wheel-shade-rgb: 30, 41, 59;
+  --time-window-radius: 12px;
+  --time-window-gap: 8px;
+  --time-window-padding-y: 12px;
+  --time-window-padding-x: 16px;
+  --time-window-label-min: 14px;
+  --time-window-label-max: 16px;
+  --time-window-pill-font: 12px;
+  --time-window-pill-line: 18px;
+  --time-window-pill-padding: 8px;
+  --time-window-track-min: 30px;
+  --time-window-track-max: 36px;
+  --time-window-track-radius: 8px;
+  --time-window-scale-gap: 5px;
+  --time-window-tick-label-font: 11px;
+  --time-window-tick-label-line: 16px;
+  --time-window-edge-min: 10px;
+  --time-window-switch-width: 28px;
+  --time-window-switch-height: 16px;
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  gap: var(--time-window-gap);
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: clamp(8px, 3cqi, var(--time-window-padding-y)) clamp(10px, 4cqi, var(--time-window-padding-x));
+  border: 1px solid var(--time-window-border);
+  border-radius: var(--time-window-radius);
+  background: var(--time-window-surface);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 4px 16px -8px rgba(15, 23, 42, 0.08);
+  color: var(--time-window-text);
+  font-variant-numeric: tabular-nums;
+}
+
+.kne-react-calendar_eGwaj {
+  --time-window-radius: 14px;
+  --time-window-gap: 12px;
+  --time-window-padding-y: 16px;
+  --time-window-padding-x: 20px;
+  --time-window-label-min: 15px;
+  --time-window-label-max: 19px;
+  --time-window-pill-padding: 9px;
+  --time-window-track-min: 36px;
+  --time-window-track-max: 44px;
+  --time-window-track-radius: 10px;
+  --time-window-scale-gap: 6px;
+  --time-window-tick-label-line: 18px;
+  --time-window-edge-min: 12px;
+  --time-window-switch-width: 32px;
+  --time-window-switch-height: 18px;
+}
+
+.kne-react-calendar_h50YK {
+  --time-window-radius: 10px;
+  --time-window-gap: 6px;
+  --time-window-padding-y: 8px;
+  --time-window-padding-x: 12px;
+  --time-window-label-min: 13px;
+  --time-window-label-max: 14px;
+  --time-window-pill-font: 11px;
+  --time-window-pill-line: 16px;
+  --time-window-pill-padding: 6px;
+  --time-window-track-min: 22px;
+  --time-window-track-max: 26px;
+  --time-window-track-radius: 6px;
+  --time-window-scale-gap: 4px;
+  --time-window-tick-label-font: 10px;
+  --time-window-tick-label-line: 14px;
+  --time-window-edge-min: 8px;
+  --time-window-switch-width: 24px;
+  --time-window-switch-height: 14px;
+}
+
+.kne-react-calendar_oV0dZ {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 6px 12px;
+  min-width: 0;
+}
+
+.kne-react-calendar_ES-Jt {
+  min-width: 0;
+  font-size: clamp(var(--time-window-label-min), 4.2cqi, var(--time-window-label-max));
+  font-weight: 600;
+  line-height: 1.4;
+  letter-spacing: -0.01em;
+  overflow-wrap: anywhere;
+}
+
+.kne-react-calendar_TWzY7 {
+  margin: 0 2px;
+  color: #c0c6cf;
+  font-weight: 400;
+}
+
+.kne-react-calendar_FiXT7 {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 8px;
+}
+
+.kne-react-calendar_uBaQO {
+  position: relative;
+  flex: none;
+  width: var(--time-window-switch-width);
+  height: var(--time-window-switch-height);
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: #d5dae2;
+  cursor: pointer;
+  transition: background-color 0.18s ease;
+}
+
+.kne-react-calendar_uBaQO i {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: calc(var(--time-window-switch-height) - 4px);
+  height: calc(var(--time-window-switch-height) - 4px);
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
+  transition: transform 0.18s ease;
+}
+
+.kne-react-calendar_c1XaN {
+  background: var(--time-window-primary);
+}
+
+.kne-react-calendar_c1XaN i {
+  transform: translateX(calc(var(--time-window-switch-width) - var(--time-window-switch-height)));
+}
+
+.kne-react-calendar_uBaQO:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(var(--time-window-primary-rgb), 0.16);
+}
+
+.kne-react-calendar_UnlvI {
+  flex: none;
+  padding: 1px var(--time-window-pill-padding);
+  border: 1px solid rgba(var(--time-window-primary-rgb), 0.18);
+  border-radius: 999px;
+  background: rgba(var(--time-window-primary-rgb), 0.06);
+  color: var(--time-window-primary);
+  font-size: var(--time-window-pill-font);
+  font-weight: 500;
+  line-height: var(--time-window-pill-line);
+  white-space: nowrap;
+}
+
+.kne-react-calendar_2q4r3 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--time-window-scale-gap);
+  min-width: 0;
+}
+
+.kne-react-calendar_Psk8T {
+  position: relative;
+  height: clamp(var(--time-window-track-min), 12cqi, var(--time-window-track-max));
+  overflow: hidden;
+  border-radius: var(--time-window-track-radius);
+  background: var(--time-window-track);
+  box-shadow: inset 0 0 0 1px var(--time-window-border);
+  cursor: grab;
+  outline: none;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: box-shadow 0.18s ease;
+}
+
+.kne-react-calendar_Psk8T:hover {
+  box-shadow: inset 0 0 0 1px #dde1e7;
+}
+
+.kne-react-calendar_Psk8T:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--time-window-primary), 0 0 0 3px rgba(var(--time-window-primary-rgb), 0.14);
+}
+
+.kne-react-calendar_lDK6o .kne-react-calendar_Psk8T {
+  cursor: grabbing;
+}
+
+.kne-react-calendar_RAKOV {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.kne-react-calendar_0-sBN {
+  position: absolute;
+  bottom: 0;
+  width: 1px;
+  border-radius: 1px 1px 0 0;
+  transform: translateX(-50%);
+}
+
+.kne-react-calendar_KR68F {
+  height: 14%;
+  background: var(--time-window-tick-minute);
+}
+
+.kne-react-calendar_KG7-G {
+  height: 22%;
+  background: var(--time-window-tick-quarter);
+}
+
+.kne-react-calendar_cxGhs {
+  height: 30%;
+  background: var(--time-window-tick-half);
+}
+
+.kne-react-calendar_eLF-c {
+  height: 44%;
+  background: var(--time-window-tick-hour);
+}
+
+.kne-react-calendar_bVU-- {
+  top: 0;
+  width: 2px;
+  height: auto;
+  border-radius: 0;
+  background: linear-gradient(180deg, rgba(240, 140, 0, 0.25) 0%, var(--time-window-day) 100%);
+}
+
+.kne-react-calendar_RAKOV,
+.kne-react-calendar_ahayU {
+  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
+}
+
+.kne-react-calendar_Crt1q {
+  opacity: 0.35;
+}
+
+.kne-react-calendar_6YDSw .kne-react-calendar_RAKOV,
+.kne-react-calendar_6YDSw + .kne-react-calendar_ahayU {
+  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.35) 6%, #000 26%, #000 74%, rgba(0, 0, 0, 0.35) 94%, transparent 100%);
+}
+
+.kne-react-calendar_zo6Jy {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background: linear-gradient(90deg, rgba(var(--time-window-wheel-shade-rgb), 0.045) 0%, rgba(var(--time-window-wheel-shade-rgb), 0.015) 14%, rgba(var(--time-window-wheel-shade-rgb), 0) 30%, rgba(var(--time-window-wheel-shade-rgb), 0) 70%, rgba(var(--time-window-wheel-shade-rgb), 0.015) 86%, rgba(var(--time-window-wheel-shade-rgb), 0.045) 100%);
+  box-shadow: inset 8px 0 10px -10px rgba(var(--time-window-wheel-shade-rgb), 0.18), inset -8px 0 10px -10px rgba(var(--time-window-wheel-shade-rgb), 0.18);
+}
+
+.kne-react-calendar_7IH3i {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+  background: repeating-linear-gradient(135deg, rgba(134, 144, 156, 0.06) 0 5px, rgba(134, 144, 156, 0.14) 5px 10px);
+}
+
+.kne-react-calendar_jm61m {
+  left: 0;
+  box-shadow: inset -1px 0 0 #d0d5dc;
+}
+
+.kne-react-calendar_H6JJo {
+  right: 0;
+  box-shadow: inset 1px 0 0 #d0d5dc;
+}
+
+.kne-react-calendar_FpwgD {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  min-width: 4px;
+  box-sizing: border-box;
+  border: 1.5px solid rgba(var(--time-window-primary-rgb), 0.85);
+  border-radius: var(--time-window-track-radius);
+  background: rgba(var(--time-window-primary-rgb), 0.1);
+  box-shadow: 0 2px 10px -2px rgba(var(--time-window-primary-rgb), 0.25);
+  pointer-events: none;
+  transition: background-color 0.18s ease, box-shadow 0.18s ease;
+}
+
+.kne-react-calendar_Psk8T:hover .kne-react-calendar_FpwgD {
+  background: rgba(var(--time-window-primary-rgb), 0.14);
+}
+
+.kne-react-calendar_lDK6o .kne-react-calendar_FpwgD {
+  background: rgba(var(--time-window-primary-rgb), 0.18);
+  box-shadow: 0 4px 14px -2px rgba(var(--time-window-primary-rgb), 0.35);
+}
+
+.kne-react-calendar_zx86H {
+  border-left-width: 2px;
+  border-right-width: 2px;
+  border-left-color: var(--time-window-primary);
+  border-right-color: var(--time-window-primary);
+}
+
+.kne-react-calendar_e3Rls {
+  border-width: 1px;
+  border-color: rgba(var(--time-window-primary-rgb), 0.55);
+  background: rgba(var(--time-window-primary-rgb), 0.08);
+  box-shadow: none;
+}
+
+.kne-react-calendar_XWaYx {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  cursor: ew-resize;
+  pointer-events: auto;
+  touch-action: none;
+}
+
+.kne-react-calendar_Lk0dI {
+  left: -8px;
+}
+
+.kne-react-calendar_-iQoy {
+  right: -8px;
+}
+
+.kne-react-calendar_XWaYx::after {
+  content: "";
+  display: block;
+  box-sizing: border-box;
+  width: 6px;
+  height: 46%;
+  min-height: var(--time-window-edge-min);
+  border: 1.5px solid var(--time-window-primary);
+  border-radius: 3px;
+  background: var(--time-window-surface);
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.16);
+  transition: height 0.16s ease, background-color 0.16s ease;
+}
+
+.kne-react-calendar_XWaYx:hover::after,
+.kne-react-calendar_U0aKK::after {
+  height: 62%;
+  background: var(--time-window-primary);
+}
+
+.kne-react-calendar_59sUX .kne-react-calendar_Psk8T,
+.kne-react-calendar_59sUX .kne-react-calendar_Psk8T * {
+  cursor: ew-resize;
+}
+
+.kne-react-calendar_59sUX .kne-react-calendar_FpwgD {
+  background: rgba(var(--time-window-primary-rgb), 0.16);
+}
+
+.kne-react-calendar_kvOXQ {
+  border-radius: 4px;
+}
+
+.kne-react-calendar_ahayU {
+  position: relative;
+  height: var(--time-window-tick-label-line);
+  overflow: hidden;
+}
+
+.kne-react-calendar_4LHqw {
+  position: absolute;
+  top: 0;
+  color: var(--time-window-muted);
+  font-size: var(--time-window-tick-label-font);
+  line-height: var(--time-window-tick-label-line);
+  white-space: nowrap;
+  transform: translateX(-50%);
+}
+
+.kne-react-calendar_S5S1g {
+  padding: 0 0.5em;
+  border-radius: 999px;
+  background: rgba(240, 140, 0, 0.1);
+  color: #d46b08;
+  font-weight: 600;
+}
+
+.kne-react-calendar_A9Acq {
+  --time-window-gap: 0px;
+}
+.kne-react-calendar_U1upa {
+  position: relative;
+}
+
+.kne-react-calendar_vKocI {
+  overflow: auto;
+}
+
+:root {
+  --kne-viewport-width: 100vw;
+  --kne-viewport-height: 100dvh;
+  --kne-viewport-inline-size: 100vw;
+  --kne-viewport-block-size: 100dvh;
+}
+
+.kne-react-calendar_U1upa {
+  --kne-viewport-width: 100vw;
+  --kne-viewport-height: 100dvh;
+  --kne-viewport-inline-size: 100vw;
+  --kne-viewport-block-size: 100dvh;
+}
+
 .kne-react-calendar_Ftp-V {
   position: relative;
   display: flex;
@@ -560,141 +987,321 @@
   background: transparent;
 }
 
-.kne-react-calendar_ArIB7 {
-  display: flex;
-  flex-direction: column;
-  gap: 7px;
-  padding: 8px 16px 18px;
+.kne-react-calendar_EaUED {
+  position: relative;
+  flex: 0 0 auto;
+  margin: 12px 0 16px;
+  --timeline-primary: var(--primary-color, #1677ff);
+}
+
+.kne-react-calendar_X2W6x {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 52px;
+  pointer-events: none;
 }
-.kne-react-calendar_ArIB7 [data-slot-index] {
+
+.kne-react-calendar_NvxDW {
+  position: absolute;
+  right: 8px;
+  transform: translateY(-50%);
+  color: rgba(32, 33, 36, 0.45);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.kne-react-calendar_gTav1 {
+  position: absolute;
+  inset: 0 14px 0 52px;
+  cursor: cell;
+  touch-action: pan-y;
   user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
 }
 
-.kne-react-calendar_zOHks {
+.kne-react-calendar_4qf3- {
+  cursor: grabbing;
   touch-action: none;
-  overscroll-behavior: none;
-  -webkit-user-select: none;
-          user-select: none;
 }
 
-.schedule-calendar-touch-dragging {
-  touch-action: none !important;
-  overscroll-behavior: none;
-  user-select: none;
-  -webkit-user-select: none;
-  -webkit-touch-callout: none;
+.kne-react-calendar_Tp2ES {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 0;
+  border-top: 1px dashed rgba(32, 33, 36, 0.06);
+  pointer-events: none;
 }
 
-.schedule-calendar-touch-dragging .kne-react-calendar_fkkFH {
-  transition: none;
+.kne-react-calendar_M5-iS {
+  border-top: 1px solid rgba(32, 33, 36, 0.1);
 }
 
-.kne-react-calendar_fkkFH {
+.kne-react-calendar_-g-DR {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 1;
   display: flex;
-  width: 100%;
-  min-height: 38px;
-  border: 0;
-  border-radius: 10px;
-  background: #fff;
-  align-items: center;
-  justify-content: center;
-  gap: 7px;
-  padding: 7px 10px;
-  text-align: left;
-  cursor: pointer;
-  user-select: none;
-  -webkit-user-select: none;
-  -webkit-touch-callout: none;
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
-  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
+  align-items: flex-start;
+  padding: 4px 8px;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: 6px;
+  background: repeating-linear-gradient(-45deg, rgba(32, 33, 36, 0.05) 0 6px, rgba(32, 33, 36, 0.09) 6px 12px);
+  cursor: not-allowed;
 }
 
-.kne-react-calendar_fkkFH:hover {
-  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
-  transform: translateY(-1px);
+.kne-react-calendar_3vFqg {
+  color: rgba(32, 33, 36, 0.5);
+  font-size: 11px;
+  line-height: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.kne-react-calendar_XjojI {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: #57c88f;
-  flex: 0 0 auto;
+.kne-react-calendar_Wd-9L {
+  --timeline-event-color: #e06b6b;
+  position: absolute;
+  z-index: 2;
+  margin-top: 1px;
+  padding: 4px 8px 4px 9px;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: 6px;
+  border-left: 3px solid var(--timeline-event-color);
+  background: color-mix(in srgb, var(--timeline-event-color) 12%, #fff);
+  color: #202124;
+  cursor: pointer;
+  transition: box-shadow 0.16s ease;
 }
 
-.kne-react-calendar_343hW {
-  min-width: 88px;
-  color: #3f4248;
-  font-size: 14px;
-  font-weight: 500;
-  text-align: center;
+.kne-react-calendar_Wd-9L:hover {
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
 }
 
-.kne-react-calendar_mkuiI {
-  color: rgba(0, 0, 0, 0.65);
+.kne-react-calendar_WKbMK {
   overflow: hidden;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+  white-space: nowrap;
   text-overflow: ellipsis;
+}
+
+.kne-react-calendar_K98yc {
+  color: rgba(32, 33, 36, 0.55);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  line-height: 14px;
   white-space: nowrap;
 }
 
-.kne-react-calendar_7kzzQ {
-  background: #fff;
+.kne-react-calendar_WrUNC {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding-block: 0;
+}
+.kne-react-calendar_WrUNC .kne-react-calendar_K98yc {
+  flex: 0 0 auto;
 }
 
-.kne-react-calendar_gdNm7 {
-  background: #fff7f7;
+.kne-react-calendar_C4d2- {
+  --timeline-event-color: #9aa0aa;
+  cursor: default;
 }
 
-.kne-react-calendar_gdNm7 .kne-react-calendar_XjojI {
-  background: #e06b6b;
+.kne-react-calendar_0T5mO {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  display: flex;
+  align-items: flex-start;
+  padding: 3px 8px;
+  box-sizing: border-box;
+  border: 1px dashed color-mix(in srgb, var(--timeline-primary) 45%, transparent);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--timeline-primary) 5%, transparent);
+  color: var(--timeline-primary);
+  font-size: 11px;
+  line-height: 14px;
+  pointer-events: none;
 }
 
-.kne-react-calendar_2LDxX {
-  background: #e8eaee;
-  color: rgba(32, 33, 36, 0.5);
-  cursor: not-allowed;
+.kne-react-calendar_AzaVv {
+  position: absolute;
+  left: -6px;
+  right: 0;
+  z-index: 4;
+  height: 0;
+  border-top: 1.5px solid #f5222d;
+  pointer-events: none;
+}
+.kne-react-calendar_AzaVv::before {
+  content: "";
+  position: absolute;
+  top: -4.5px;
+  left: 0;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #f5222d;
 }
 
-.kne-react-calendar_2LDxX .kne-react-calendar_XjojI {
-  background: #9aa0aa;
+.kne-react-calendar_WtBzl {
+  position: absolute;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  opacity: 0;
 }
 
-.kne-react-calendar_2LDxX .kne-react-calendar_343hW,
-.kne-react-calendar_2LDxX .kne-react-calendar_mkuiI {
-  color: rgba(32, 33, 36, 0.5);
+.kne-react-calendar_z-uOR {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 3;
+  display: flex;
+  align-items: flex-start;
+  box-sizing: border-box;
+  border: 1.5px solid var(--timeline-primary);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--timeline-primary) 14%, transparent);
+  box-shadow: 0 6px 18px color-mix(in srgb, var(--timeline-primary) 20%, transparent);
+  cursor: grab;
+  touch-action: none;
+  transition: top 0.08s ease-out, height 0.08s ease-out;
 }
 
-.kne-react-calendar_2LDxX:hover {
-  box-shadow: none;
-  transform: none;
+.kne-react-calendar_MbeJu {
+  cursor: grabbing;
+  transition: none;
 }
 
-.kne-react-calendar_TYAi6 {
-  background: var(--primary-color, #202124);
-  box-shadow: 0 7px 18px rgba(32, 33, 36, 0.12);
+.kne-react-calendar_7nYLD {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  color: var(--timeline-primary);
+  font-size: 12px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: 16px;
+  pointer-events: none;
 }
 
-.kne-react-calendar_TYAi6 .kne-react-calendar_343hW,
-.kne-react-calendar_TYAi6 .kne-react-calendar_mkuiI {
-  color: #fff;
+.kne-react-calendar_CpsWx .kne-react-calendar_7nYLD {
+  padding-block: 0;
+  font-size: 11px;
+  line-height: 14px;
 }
 
-.kne-react-calendar_-xuUf {
-  margin-inline-end: 0;
-  border: 0;
+.kne-react-calendar_NqiWA {
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  box-sizing: border-box;
   border-radius: 999px;
-  background: rgba(32, 33, 36, 0.08);
-  color: rgba(32, 33, 36, 0.56);
-  font-size: 11px;
+  background: #fa8c16;
+  color: #fff;
+  font-size: 10px;
+  line-height: 16px;
+  text-align: center;
+}
+
+.kne-react-calendar_XQQ3E {
+  border-color: #fa8c16;
+  background: repeating-linear-gradient(-45deg, rgba(250, 140, 22, 0.14) 0 6px, rgba(250, 140, 22, 0.22) 6px 12px);
+  box-shadow: 0 6px 18px rgba(250, 140, 22, 0.2);
+}
+.kne-react-calendar_XQQ3E .kne-react-calendar_7nYLD {
+  color: #d46b08;
 }
 
-.kne-react-calendar_2LDxX .kne-react-calendar_-xuUf {
-  background: rgba(32, 33, 36, 0.1);
-  color: rgba(32, 33, 36, 0.48);
+.kne-react-calendar_s2EvF {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  height: 10px;
+  cursor: ns-resize;
+}
+.kne-react-calendar_s2EvF::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  width: 22px;
+  height: 4px;
+  margin-left: -11px;
+  border: 1.5px solid var(--timeline-primary);
+  border-radius: 999px;
+  background: #fff;
+  box-sizing: border-box;
 }
 
+.kne-react-calendar_XQQ3E .kne-react-calendar_s2EvF::after {
+  border-color: #fa8c16;
+}
+
+.kne-react-calendar_PcIon {
+  top: -5px;
+}
+.kne-react-calendar_PcIon::after {
+  top: 3px;
+}
+
+.kne-react-calendar_nS8Mr {
+  bottom: -5px;
+}
+.kne-react-calendar_nS8Mr::after {
+  bottom: 3px;
+}
+
+@container kne-responsive (max-width: 768px) {
+  .kne-react-calendar_EaUED {
+    margin: 10px 0 12px;
+  }
+  .kne-react-calendar_X2W6x {
+    width: 44px;
+  }
+  .kne-react-calendar_NvxDW {
+    right: 6px;
+  }
+  .kne-react-calendar_gTav1 {
+    inset: 0 8px 0 44px;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .kne-react-calendar_s2EvF {
+    height: 24px;
+  }
+  .kne-react-calendar_s2EvF::after {
+    width: 30px;
+    height: 6px;
+    margin-left: -15px;
+  }
+  .kne-react-calendar_PcIon {
+    top: -12px;
+  }
+  .kne-react-calendar_PcIon::after {
+    top: 9px;
+  }
+  .kne-react-calendar_nS8Mr {
+    bottom: -12px;
+  }
+  .kne-react-calendar_nS8Mr::after {
+    bottom: 9px;
+  }
+  .kne-react-calendar_7nYLD,
+  .kne-react-calendar_WKbMK {
+    font-size: 13px;
+  }
+}
 .kne-react-calendar_W-I5J {
   width: 300px;
   max-width: calc(100vw - 48px);
@@ -704,33 +1311,253 @@
   max-width: calc(100vw - 24px);
 }
 
-.kne-react-calendar_rVLO8 .ant-popover-inner {
+.kne-react-calendar_rVLO8.ant-popover .ant-popover-inner,
+.kne-react-calendar_rVLO8.ant-popover .ant-popover-container {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
   max-width: calc(100vw - 24px);
-  max-height: calc(100vh - 48px);
-  overflow: auto;
+  max-height: calc(100vh - 16px);
+  max-height: calc(100dvh - 16px);
+  overflow: hidden;
+  padding-right: 0 !important;
+  padding-inline-end: 0 !important;
 }
 
 .kne-react-calendar_rVLO8 .ant-popover-inner-content {
   max-width: calc(100vw - 56px);
 }
 
+.kne-react-calendar_rVLO8 .kne-react-calendar_W-I5J {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  width: 300px;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  min-height: 0;
+  max-height: calc(100vh - 40px);
+  max-height: calc(100dvh - 40px);
+}
+
+.kne-react-calendar_rVLO8 .kne-react-calendar_mMpFQ {
+  flex: none;
+  padding-right: 12px;
+}
+
+.kne-react-calendar_rVLO8 .kne-react-calendar_9eAK6 {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+.kne-react-calendar_rVLO8 .kne-react-calendar_9eAK6 > *,
+.kne-react-calendar_rVLO8 .kne-react-calendar_9eAK6 > * > .ant-flex {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+.kne-react-calendar_rVLO8 .kne-react-calendar_9eAK6 > * > .ant-flex {
+  gap: 0 !important;
+}
+
+.kne-react-calendar_rVLO8 .kne-react-calendar_DubfV {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  padding-right: 6px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(15, 23, 42, 0.28) transparent;
+}
+.kne-react-calendar_rVLO8 .kne-react-calendar_DubfV::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  background: transparent;
+}
+.kne-react-calendar_rVLO8 .kne-react-calendar_DubfV::-webkit-scrollbar-track {
+  background: transparent;
+}
+.kne-react-calendar_rVLO8 .kne-react-calendar_DubfV::-webkit-scrollbar-thumb {
+  background: rgba(15, 23, 42, 0.28);
+  border-radius: 999px;
+}
+.kne-react-calendar_rVLO8 .kne-react-calendar_DubfV::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.kne-react-calendar_rVLO8 .kne-react-calendar_Wd4qh {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.kne-react-calendar_rVLO8 .kne-react-calendar_4NPv0 {
+  flex: none;
+  margin-top: 8px;
+  padding-right: 12px;
+}
+
+.kne-react-calendar_rVLO8 .kne-react-calendar_Dc-t3 {
+  max-height: calc(100vh - 40px);
+  max-height: calc(100dvh - 40px);
+  padding-right: 6px;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(15, 23, 42, 0.28) transparent;
+}
+.kne-react-calendar_rVLO8 .kne-react-calendar_Dc-t3::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  background: transparent;
+}
+.kne-react-calendar_rVLO8 .kne-react-calendar_Dc-t3::-webkit-scrollbar-track {
+  background: transparent;
+}
+.kne-react-calendar_rVLO8 .kne-react-calendar_Dc-t3::-webkit-scrollbar-thumb {
+  background: rgba(15, 23, 42, 0.28);
+  border-radius: 999px;
+}
+.kne-react-calendar_rVLO8 .kne-react-calendar_Dc-t3::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
 .kne-react-calendar_mMpFQ {
-  margin-bottom: 12px;
+  margin-bottom: 8px;
   color: #202124;
   font-size: 14px;
   font-weight: 700;
 }
 
-.kne-react-calendar_xYptY {
-  width: 260px;
-  max-width: calc(100vw - 48px);
+.kne-react-calendar_n-MRC .ant-drawer-content {
+  border-radius: 16px 16px 0 0;
 }
 
-.kne-react-calendar_oagF- {
-  margin-bottom: 8px;
+.kne-react-calendar_n-MRC .ant-drawer-content-wrapper {
+  max-height: 88vh;
+}
+
+.kne-react-calendar_n-MRC .ant-drawer-body {
+  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
+}
+
+.kne-react-calendar_ZaEkY {
+  width: 100%;
+  max-width: none;
+}
+.kne-react-calendar_ZaEkY::before {
+  content: "";
+  display: block;
+  width: 36px;
+  height: 4px;
+  margin: 0 auto 12px;
+  border-radius: 999px;
+  background: rgba(32, 33, 36, 0.16);
+}
+.kne-react-calendar_ZaEkY .kne-react-calendar_4NPv0 {
+  position: sticky;
+  bottom: 0;
+  padding-top: 10px;
+  background: #fff;
+}
+.kne-react-calendar_ZaEkY .kne-react-calendar_4NPv0 .ant-btn {
+  flex: 1;
+  height: 44px;
+  font-size: 16px;
+}
+.kne-react-calendar_ZaEkY .kne-react-calendar_mMpFQ {
+  margin-bottom: 12px;
+  font-size: 17px;
+}
+.kne-react-calendar_ZaEkY .kne-react-calendar_PpU92 {
+  font-size: 14px;
+  line-height: 20px;
+}
+.kne-react-calendar_ZaEkY input,
+.kne-react-calendar_ZaEkY textarea,
+.kne-react-calendar_ZaEkY select {
+  font-size: 16px;
+}
+
+.kne-react-calendar_Wd4qh {
+  margin: 0 -2px 12px;
+}
+
+.kne-react-calendar_PpU92 {
+  margin-bottom: 12px;
+  padding: 6px 10px;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.kne-react-calendar_Dc-t3 {
+  --timeline-event-color: #e06b6b;
+  display: flex;
+  gap: 10px;
+  width: 240px;
+  max-width: calc(100vw - 56px);
+  border-radius: 6px;
+}
+
+.kne-react-calendar_C3waU {
+  cursor: pointer;
+}
+.kne-react-calendar_C3waU:hover .kne-react-calendar_FkbSR {
+  color: var(--primary-color, #1677ff);
+}
+
+.kne-react-calendar_UsltM {
+  --timeline-event-color: #9aa0aa;
+}
+
+.kne-react-calendar_ZETY4 {
+  flex: 0 0 3px;
+  border-radius: 999px;
+  background: var(--timeline-event-color);
+}
+
+.kne-react-calendar_v9RjG {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+}
+
+.kne-react-calendar_FkbSR {
   color: #202124;
   font-size: 14px;
-  font-weight: 700;
+  font-weight: 600;
+  line-height: 20px;
+  word-break: break-word;
+  transition: color 0.16s ease;
+}
+
+.kne-react-calendar_NT-kw {
+  color: rgba(32, 33, 36, 0.55);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  line-height: 18px;
+}
+
+.kne-react-calendar_vOb62 {
+  margin-top: 4px;
+  color: rgba(32, 33, 36, 0.72);
+  font-size: 12px;
+  line-height: 18px;
+  word-break: break-word;
+}
+
+.kne-react-calendar_rs8bh {
+  margin: 6px 0 0;
 }
 
 .kne-react-calendar_4NPv0 {
@@ -741,11 +1568,44 @@
 }
 
 [data-schedule-layout='stacked'] .kne-react-calendar_W-I5J,
-[data-schedule-layout='stacked'] .kne-react-calendar_xYptY {
-  width: min(360px, 100% - 32px);
-  max-width: calc(100% - 32px);
-  max-height: min(70vh, 520px);
-  overflow: auto;
+[data-schedule-layout='stacked'] .kne-react-calendar_n-MRC .ant-drawer-content {
+  border-radius: 16px 16px 0 0;
+}
+[data-schedule-layout='stacked'] .kne-react-calendar_n-MRC .ant-drawer-content-wrapper {
+  max-height: 88vh;
+}
+[data-schedule-layout='stacked'] .kne-react-calendar_n-MRC .ant-drawer-body {
+  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
+}
+[data-schedule-layout='stacked'] .kne-react-calendar_ZaEkY {
+  width: 100%;
+  max-width: none;
+}
+[data-schedule-layout='stacked'] .kne-react-calendar_ZaEkY::before {
+  content: "";
+  display: block;
+  width: 36px;
+  height: 4px;
+  margin: 0 auto 12px;
+  border-radius: 999px;
+  background: rgba(32, 33, 36, 0.16);
+}
+[data-schedule-layout='stacked'] .kne-react-calendar_ZaEkY .kne-react-calendar_4NPv0 {
+  position: sticky;
+  bottom: 0;
+  padding-top: 10px;
+  background: #fff;
+}
+[data-schedule-layout='stacked'] .kne-react-calendar_ZaEkY .kne-react-calendar_4NPv0 .ant-btn {
+  flex: 1;
+  height: 44px;
+  font-size: 16px;
+}
+[data-schedule-layout='stacked'] .kne-react-calendar_Wd4qh {
+  margin: 0 -2px 12px;
+}
+[data-schedule-layout='stacked'] .kne-react-calendar_PpU92 {
+  margin-bottom: 12px;
 }
 [data-schedule-layout='stacked'] .kne-react-calendar_4NPv0 {
   position: sticky;
@@ -753,7 +1613,31 @@
   padding-top: 10px;
   background: #fff;
 }
+.kne-react-calendar_gh14z {
+  position: relative;
+}
+
+.kne-react-calendar_Kfn6L {
+  overflow: auto;
+}
+
+:root {
+  --kne-viewport-width: 100vw;
+  --kne-viewport-height: 100dvh;
+  --kne-viewport-inline-size: 100vw;
+  --kne-viewport-block-size: 100dvh;
+}
+
+.kne-react-calendar_gh14z {
+  --kne-viewport-width: 100vw;
+  --kne-viewport-height: 100dvh;
+  --kne-viewport-inline-size: 100vw;
+  --kne-viewport-block-size: 100dvh;
+}
+
 .kne-react-calendar_csu63 {
+  container-type: inline-size;
+  container-name: kne-responsive;
   width: 100%;
   border-radius: var(--schedule-calendar-radius, 16px);
   box-shadow: var(--schedule-calendar-shadow, 0 18px 48px rgba(15, 23, 42, 0.08));
@@ -778,8 +1662,8 @@
 }
 
 .kne-react-calendar_nd7DK {
-  flex: 0 0 50%;
-  width: 50%;
+  flex: 0 0 var(--schedule-calendar-side-width, 50%);
+  width: var(--schedule-calendar-side-width, 50%);
   min-width: 0;
   padding: 18px 22px 22px;
   box-sizing: border-box;
@@ -790,7 +1674,7 @@
   position: absolute;
   top: 0;
   right: 0;
-  width: 50%;
+  left: var(--schedule-calendar-side-width, 50%);
   height: 100%;
   min-width: 0;
   min-height: 0;
@@ -816,7 +1700,8 @@
   position: relative;
   top: auto;
   right: auto;
-  flex: 0 0 50%;
+  left: auto;
+  flex: 1 1 0;
   height: auto;
   overflow: visible;
 }