@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.3

package/radio-button/radio-button.styles.d.ts

@@ -1,21 +1,9 @@
-import type { RadioButtonProps, RadioButtonSize } from "./types";
-interface StyleProps {
-    $selected?: boolean;
-    $disabled?: boolean;
-    $displaySize?: RadioButtonSize | undefined;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const StyledUnCheckedIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, StyleProps>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const StyledCheckedIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, StyleProps>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, RadioButtonProps>> & string;
-export {};
+export declare const classes: {};
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const icon: import("@linaria/core").LinariaClassName;
+export declare const uncheckedIcon: import("@linaria/core").LinariaClassName;
+export declare const uncheckedIconDisabled: import("@linaria/core").LinariaClassName;
+export declare const checkedIcon: import("@linaria/core").LinariaClassName;
+export declare const checkedIconDisabled: import("@linaria/core").LinariaClassName;
+export declare const input: import("@linaria/core").LinariaClassName;
+export declare const inputActive: import("@linaria/core").LinariaClassName;

package/radio-button/radio-button.styles.js

@@ -1,41 +1,2 @@
-import{CircleIcon as e,CircleDotIcon as i}from"@lifesg/react-icons";import t,{css as o}from"styled-components";import{V3_Motion as n,V3_Colour as r}from"../v3_theme/index.js";const d=t.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    ${e=>"small"===e.$displaySize?o`
-                height: 1.5rem;
-                width: 1.5rem;
-            `:o`
-                height: 2rem;
-                width: 2rem;
-            `}
-    position: relative;
-`,s=t(e)`
-    height: 100%;
-    width: 100%;
-    color: ${e=>e.$disabled?r["icon-disabled-subtle"](e):r["icon-subtle"](e)};
-    transition: ${n["duration-150"]} ${n["ease-default"]};
-`,a=t(i)`
-    height: 100%;
-    width: 100%;
-    color: ${e=>e.$disabled?r["icon-selected-disabled"](e):r["icon-selected"](e)};
-
-    transition: ${n["duration-150"]} ${n["ease-default"]};
-`,l=t.input`
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    cursor: ${e=>e.disabled?"not-allowed":"pointer"};
-    z-index: 1;
-
-    appearance: none;
-    background: transparent;
-    border: none;
-
-    &:hover + ${s}, &:hover + ${a} {
-        @media (pointer: fine) {
-            color: ${e=>!e.disabled&&r["icon-hover"](e)};
-        }
-    }
-`;export{d as Container,l as Input,a as StyledCheckedIcon,s as StyledUnCheckedIcon};
+import"./radio-button.styles_1c4v6v.css";const c="c22ppgr",t="iwrt33w",o="u16bhkcz",i="ubjq3ci",r="crf4g3g",b="c1bv24bs",s="ie6234c",p="i1pcowd9";export{r as checkedIcon,b as checkedIconDisabled,c as container,t as icon,s as input,p as inputActive,o as uncheckedIcon,i as uncheckedIconDisabled};
 //# sourceMappingURL=radio-button.styles.js.map

package/radio-button/radio-button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.styles.js","sources":["../../src/radio-button/radio-button.styles.tsx"],"sourcesContent":["import { CircleDotIcon, CircleIcon } from \"@lifesg/react-icons\";\nimport styled, { css } from \"styled-components\";\n\nimport { V3_Colour, V3_Motion } from \"../v3_theme\";\nimport type { RadioButtonProps, RadioButtonSize } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $selected?: boolean;\n    $disabled?: boolean;\n    $displaySize?: RadioButtonSize | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Container = styled.div<StyleProps>`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    ${(props) => {\n        if (props.$displaySize === \"small\") {\n            return css`\n                height: 1.5rem;\n                width: 1.5rem;\n            `;\n        } else {\n            return css`\n                height: 2rem;\n                width: 2rem;\n            `;\n        }\n    }}\n    position: relative;\n`;\n\nexport const StyledUnCheckedIcon = styled(CircleIcon)<StyleProps>`\n    height: 100%;\n    width: 100%;\n    color: ${(props) =>\n        props.$disabled\n            ? V3_Colour[\"icon-disabled-subtle\"](props)\n            : V3_Colour[\"icon-subtle\"](props)};\n    transition: ${V3_Motion[\"duration-150\"]} ${V3_Motion[\"ease-default\"]};\n`;\n\nexport const StyledCheckedIcon = styled(CircleDotIcon)<StyleProps>`\n    height: 100%;\n    width: 100%;\n    color: ${(props) =>\n        props.$disabled\n            ? V3_Colour[\"icon-selected-disabled\"](props)\n            : V3_Colour[\"icon-selected\"](props)};\n\n    transition: ${V3_Motion[\"duration-150\"]} ${V3_Motion[\"ease-default\"]};\n`;\n\nexport const Input = styled.input<RadioButtonProps>`\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n    z-index: 1;\n\n    appearance: none;\n    background: transparent;\n    border: none;\n\n    &:hover + ${StyledUnCheckedIcon}, &:hover + ${StyledCheckedIcon} {\n        @media (pointer: fine) {\n            color: ${(props) =>\n                !props.disabled && V3_Colour[\"icon-hover\"](props)};\n        }\n    }\n`;\n"],"names":["Container","styled","div","props","$displaySize","css","StyledUnCheckedIcon","CircleIcon","$disabled","V3_Colour","V3_Motion","StyledCheckedIcon","CircleDotIcon","Input","input","disabled"],"mappings":"+KAoBO,MAAMA,EAAYC,EAAOC,GAAe;;;;MAIxCC,GAC4B,UAAvBA,EAAMC,aACCC,CAAG;;;cAKHA,CAAG;;;;;EASTC,EAAsBL,EAAOM,EAAuB;;;aAGnDJ,GACNA,EAAMK,UACAC,EAAU,wBAAwBN,GAClCM,EAAU,eAAeN;kBACrBO,EAAU,mBAAmBA,EAAU;EAG5CC,EAAoBV,EAAOW,EAA0B;;;aAGpDT,GACNA,EAAMK,UACAC,EAAU,0BAA0BN,GACpCM,EAAU,iBAAiBN;;kBAEvBO,EAAU,mBAAmBA,EAAU;EAG5CG,EAAQZ,EAAOa,KAAuB;;;;cAIpCX,GAAWA,EAAMY,SAAW,cAAgB;;;;;;;gBAO3CT,gBAAkCK;;qBAE5BR,IACLA,EAAMY,UAAYN,EAAU,cAAcN;;;"}
+{"version":3,"file":"radio-button.styles.js","sources":["../../src/radio-button/radio-button.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Motion } from \"../theme\";\n\nexport const classes = {} as const;\n\nexport const container = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n\n    &[data-display-size=\"small\"] {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n\n    &[data-display-size=\"default\"] {\n        height: 2rem;\n        width: 2rem;\n    }\n`;\n\nexport const icon = css`\n    height: 100%;\n    width: 100%;\n    transition: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const uncheckedIcon = css`\n    color: ${Colour[\"icon-subtle\"]};\n`;\n\nexport const uncheckedIconDisabled = css`\n    color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\nexport const checkedIcon = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const checkedIconDisabled = css`\n    color: ${Colour[\"icon-selected-disabled\"]};\n`;\n\nexport const input = css`\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    cursor: not-allowed;\n    z-index: 1;\n\n    appearance: none;\n    background: transparent;\n    border: none;\n`;\n\nexport const inputActive = css`\n    cursor: pointer;\n\n    &:hover + svg {\n        @media (pointer: fine) {\n            color: ${Colour[\"icon-hover\"]};\n        }\n    }\n`;\n"],"names":["container","icon","uncheckedIcon","uncheckedIconDisabled","checkedIcon","checkedIconDisabled","input","inputActive"],"mappings":"qEAMO,MAAMA,EAAS,UAiBTC,EAAI,UAMJC,EAAa,WAIbC,EAAqB,UAIrBC,EAAW,UAIXC,EAAmB,WAInBC,EAAK,UAYLC,EAAW"}

package/radio-button/radio-button.styles_1c4v6v.css

@@ -0,0 +1,8 @@
+.c22ppgr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;}.c22ppgr[data-display-size="small"]{height:1.5rem;width:1.5rem;}.c22ppgr[data-display-size="default"]{height:2rem;width:2rem;}
+.iwrt33w{height:100%;width:100%;-webkit-transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);}
+.u16bhkcz{color:var(--fds-colour-icon-subtle);}
+.ubjq3ci{color:var(--fds-colour-icon-disabled-subtle);}
+.crf4g3g{color:var(--fds-colour-icon-selected);}
+.c1bv24bs{color:var(--fds-colour-icon-selected-disabled);}
+.ie6234c{position:absolute;height:100%;width:100%;cursor:not-allowed;z-index:1;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:transparent;border:none;}
+.i1pcowd9{cursor:pointer;}@media (pointer: fine){.i1pcowd9:hover+svg{color:var(--fds-colour-icon-hover);}}

package/radio-button/types.d.ts

@@ -1,4 +1,5 @@
 export type RadioButtonSize = "small" | "default";
 export interface RadioButtonProps extends React.InputHTMLAttributes<HTMLInputElement> {
     displaySize?: RadioButtonSize | undefined;
+    focusableWhenDisabled?: boolean | undefined;
 }

package/schedule/schedule-day-view/schedule-day-view.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as r,Fragment as i}from"react/jsx-runtime";import{ChevronLeftIcon as t,ChevronRightIcon as n}from"@lifesg/react-icons";import{useRef as o,useMemo as l}from"react";import{ThemedLoadingSpinner as s}from"../../animations/themed-loading-spinner/themed-loading-spinner.js";import{DateHelper as c}from"../../util/date-helper.js";import{TimeHelper as a}from"../../util/time-helper.js";import{useTimelineOffset as m,useInitialScroll as d}from"../shared/hooks.js";import{minutesToTime as h,findSlotsStartingInTimeRange as u,calculateSlotOffset as p,isTimeCellCovered as f}from"../shared/utils.js";import{WithOptionalPopover as T}from"../shared/with-optional-popover.js";import{TimeIndicator as v}from"../time-indicator/time-indicator.js";import{ScheduleContainer as g,LoadingContainer as $,HeaderContainer as k,BlankCell as y,BodyContainer as b,ServiceContainer as j,ServiceColumn as C,ArrowContainer as P,ArrowButton as x,ServiceHeaderContainer as S,Title as w,Description as L,SlotGrid as M,Timeline as W,SlotColumn as N,SlotCell as R,EmptySlot as z,SlotContent as A,SlotTime as D,SlotAvailability as I}from"./schedule-day-view.styles.js";const E=({serviceData:E,isMobile:O,onNextService:U,onPrevService:q,onEmptySlotClick:B,showPrevArrow:F,showNextArrow:G,minTime:H,maxTime:J,initialScrollTime:K,containerRef:Q,loading:V,emptySlotPopover:X,blockedMessage:Y="Unavailable"})=>{const Z=m(H,J),_=d(V,H,K),ee=o(null),re=l((()=>a.generateTimings(30,"24hr",H,J)),[H,J]),ie=(e,r,i)=>{if(null==r?void 0:r.customPopover)return r.customPopover;if(!((e,r)=>!!e.slots&&f(e.slots,r))(e,i)&&X){const r={startTime:i,endTime:c.addMinutesToTime(i,30),name:e.name};return X(r)}},te=(t,n)=>{const o=a.calculateDuration(t.startTime,t.endTime),l=p(t.startTime,n);return e(A,{$status:t.status,$duration:o,$offsetTop:l,onClick:e=>t.onClick&&t.onClick(t,e),children:o>=15&&r(i,{children:[r(D,{children:[a.parseInput(t.startTime,"12hr"),"–"," ",a.parseInput(t.endTime,"12hr")]}),e(I,{children:"blocked"===t.status?Y:`${t.booked} / ${t.capacity}`})]})})},ne=(r,i)=>{const t=((e,r)=>{if(!e.slots)return[];const i=a.timeToMinutes(r),t=h(i+30);return u(e.slots,r,t)})(r,i);return t.length>0?e(R,{$dashed:i.endsWith(":00"),children:t.map(((t,n)=>{const o=ie(r,t,i);return e(T,{containerRef:Q,customPopover:o,children:te(t,i)},`${t.id}-${n}`)}))},i):e(R,{$dashed:i.endsWith(":00"),onClick:()=>((e,r)=>{if(B){const i=c.addMinutesToTime(e,30);B({startTime:e,endTime:i,name:r})}})(i,r.name),children:e(T,{containerRef:Q,customPopover:ie(r,void 0,i),children:e(z,{})})},i)};return e(g,{children:V?e($,{children:e(s,{})}):r(i,{children:[r(k,{ref:ee,onScroll:e=>{ee.current&&_.current&&(_.current.scrollLeft=ee.current.scrollLeft)},$isMobile:O,children:[e(y,{}),e(j,{$columnCount:E.length,children:E.map((i=>r(C,{children:[O&&e(P,{children:F&&q&&e(x,{styleType:"light",sizeType:"small",onClick:q,"aria-label":"Previous service",children:e(t,{"aria-hidden":!0})})}),r(S,{children:[e(w,{children:i.name}),r(L,{children:[e("span",{children:i.slots.filter((e=>"available"===e.status)).length})," ","available"]})]}),O&&G&&U&&e(x,{styleType:"light",sizeType:"small",onClick:U,"aria-label":"Next service",children:e(n,{"aria-hidden":!0})})]},i.id)))})]}),r(b,{ref:_,onScroll:e=>{if(ee.current&&_.current){const e=17,r=_.current.scrollWidth-_.current.clientWidth-e,i=_.current.scrollLeft;i>r?(_.current.scrollLeft=r,ee.current.scrollLeft=r):ee.current.scrollLeft=i}},children:[e(v,{minTime:H,maxTime:J,format:"24hr",timelineOffset:Z}),r(M,{$columnCount:E.length,children:[null!==Z&&e(W,{$top:Z}),E.map((r=>e(N,{children:re.map((e=>ne(r,e)))},r.id)))]})]})]})})};export{E as ScheduleDayView};
+import{jsx as e,jsxs as r,Fragment as i}from"react/jsx-runtime";import{ChevronLeftIcon as t,ChevronRightIcon as n}from"@lifesg/react-icons";import{useRef as o,useMemo as l}from"react";import{ThemedLoadingSpinner as s}from"../../animations/themed-loading-spinner/themed-loading-spinner.js";import{DateHelper as c}from"../../util/date-helper.js";import{TimeHelper as a}from"../../util/time-helper.js";import{useTimelineOffset as m,useInitialScroll as d}from"../shared/hooks.js";import{minutesToTime as h,findSlotsStartingInTimeRange as u,calculateSlotOffset as p,isTimeCellCovered as f}from"../shared/utils.js";import{WithOptionalPopover as T}from"../shared/with-optional-popover.js";import{TimeIndicator as v}from"../time-indicator/time-indicator.js";import*as C from"./schedule-day-view.styles.js";const{ServiceContainer:S,ServiceColumn:g,ArrowContainer:y,ArrowButton:$,ServiceHeaderContainer:k,Title:b,Description:j,SlotContent:w,SlotTime:P,SlotAvailability:x,SlotCell:L,EmptySlot:M,SlotGrid:A,Timeline:W,SlotColumn:B,ScheduleContainer:D,LoadingContainer:N,HeaderContainer:R,BlankCell:z,BodyContainer:E}=C,H=({serviceData:C,isMobile:H,onNextService:I,onPrevService:G,onEmptySlotClick:O,showPrevArrow:U,showNextArrow:q,minTime:F,maxTime:J,initialScrollTime:K,containerRef:Q,loading:V,emptySlotPopover:X,blockedMessage:Y="Unavailable"})=>{const Z=m(F,J),_=d(V,F,K),ee=o(null),re=l((()=>a.generateTimings(30,"24hr",F,J)),[F,J]),ie=(e,r,i)=>{if(null==r?void 0:r.customPopover)return r.customPopover;if(!((e,r)=>!!e.slots&&f(e.slots,r))(e,i)&&X){const r={startTime:i,endTime:c.addMinutesToTime(i,30),name:e.name};return X(r)}},te=(t,n)=>{const o=a.calculateDuration(t.startTime,t.endTime),l=p(t.startTime,n);return e(w,{$status:t.status,$duration:o,$offsetTop:l,onClick:e=>t.onClick&&t.onClick(t,e),children:o>=15&&r(i,{children:[r(P,{children:[a.parseInput(t.startTime,"12hr"),"–"," ",a.parseInput(t.endTime,"12hr")]}),e(x,{children:"blocked"===t.status?Y:`${t.booked} / ${t.capacity}`})]})})},ne=(r,i)=>{const t=((e,r)=>{if(!e.slots)return[];const i=a.timeToMinutes(r),t=h(i+30);return u(e.slots,r,t)})(r,i);return t.length>0?e(L,{$dashed:i.endsWith(":00"),children:t.map(((t,n)=>{const o=ie(r,t,i);return e(T,{containerRef:Q,customPopover:o,children:te(t,i)},`${t.id}-${n}`)}))},i):e(L,{$dashed:i.endsWith(":00"),onClick:()=>((e,r)=>{if(O){const i=c.addMinutesToTime(e,30);O({startTime:e,endTime:i,name:r})}})(i,r.name),children:e(T,{containerRef:Q,customPopover:ie(r,void 0,i),children:e(M,{})})},i)};return e(D,{children:V?e(N,{children:e(s,{})}):r(i,{children:[r(R,{ref:ee,onScroll:e=>{ee.current&&_.current&&(_.current.scrollLeft=ee.current.scrollLeft)},$isMobile:H,children:[e(z,{}),e(S,{$columnCount:C.length,children:C.map((i=>r(g,{children:[H&&e(y,{children:U&&G&&e($,{styleType:"light",sizeType:"small",onClick:G,"aria-label":"Previous service",icon:e(t,{"aria-hidden":!0})})}),r(k,{children:[e(b,{children:i.name}),r(j,{children:[e("span",{children:i.slots.filter((e=>"available"===e.status)).length})," ","available"]})]}),H&&q&&I&&e($,{styleType:"light",sizeType:"small",onClick:I,"aria-label":"Next service",icon:e(n,{"aria-hidden":!0})})]},i.id)))})]}),r(E,{ref:_,onScroll:e=>{if(ee.current&&_.current){const e=17,r=_.current.scrollWidth-_.current.clientWidth-e,i=_.current.scrollLeft;i>r?(_.current.scrollLeft=r,ee.current.scrollLeft=r):ee.current.scrollLeft=i}},children:[e(v,{minTime:F,maxTime:J,format:"24hr",timelineOffset:Z}),r(A,{$columnCount:C.length,children:[null!==Z&&e(W,{$top:Z}),C.map((r=>e(B,{children:re.map((e=>ne(r,e)))},r.id)))]})]})]})})};export{H as ScheduleDayView};
 //# sourceMappingURL=schedule-day-view.js.map

package/schedule/schedule-day-view/schedule-day-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-day-view.js","sources":["../../../src/schedule/schedule-day-view/schedule-day-view.tsx"],"sourcesContent":["import { ChevronLeftIcon, ChevronRightIcon } from \"@lifesg/react-icons\";\nimport { useMemo, useRef } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport { DateHelper } from \"../../util/date-helper\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport {\n    calculateSlotOffset,\n    findSlotsStartingInTimeRange,\n    isTimeCellCovered,\n    minutesToTime,\n    useInitialScroll,\n    useTimelineOffset,\n} from \"../shared\";\nimport { WithOptionalPopover } from \"../shared/with-optional-popover\";\nimport { TimeIndicator } from \"../time-indicator/time-indicator\";\nimport type { ScheduleEntityProps, ScheduleSlotProps } from \"../types\";\nimport {\n    ArrowButton,\n    ArrowContainer,\n    BlankCell,\n    BodyContainer,\n    Description,\n    EmptySlot,\n    HeaderContainer,\n    LoadingContainer,\n    ScheduleContainer,\n    ServiceColumn,\n    ServiceContainer,\n    ServiceHeaderContainer,\n    SlotAvailability,\n    SlotCell,\n    SlotColumn,\n    SlotContent,\n    SlotGrid,\n    SlotTime,\n    Timeline,\n    Title,\n} from \"./schedule-day-view.styles\";\nimport type { ScheduleDayViewProps } from \"./types\";\n\nexport const ScheduleDayView = ({\n    serviceData,\n    isMobile,\n    onNextService,\n    onPrevService,\n    onEmptySlotClick,\n    showPrevArrow,\n    showNextArrow,\n    minTime,\n    maxTime,\n    initialScrollTime,\n    containerRef,\n    loading,\n    emptySlotPopover,\n    blockedMessage = \"Unavailable\",\n}: ScheduleDayViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const timelineOffset = useTimelineOffset(minTime, maxTime);\n    const bodyRef = useInitialScroll(loading, minTime, initialScrollTime);\n    const headerRef = useRef<HTMLDivElement>(null);\n    const timeSlots = useMemo(\n        () => TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime),\n        [minTime, maxTime]\n    );\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    // Handle empty slot click with slot details\n    const handleEmptySlotClick = (time: string, serviceName: string) => {\n        if (onEmptySlotClick) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            onEmptySlotClick({\n                startTime: time,\n                endTime: endTimeString,\n                name: serviceName,\n            });\n        }\n    };\n\n    // Synchronize horizontal scrolling between header and body\n    const handleBodyScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            // Set a fixed buffer (17px) to prevent over-scrolling and misalignment\n            const SCROLL_BUFFER = 17;\n            const maxScrollLeft =\n                bodyRef.current.scrollWidth -\n                bodyRef.current.clientWidth -\n                SCROLL_BUFFER;\n            const currentScrollLeft = bodyRef.current.scrollLeft;\n            if (currentScrollLeft > maxScrollLeft) {\n                bodyRef.current.scrollLeft = maxScrollLeft;\n                headerRef.current.scrollLeft = maxScrollLeft;\n            } else {\n                headerRef.current.scrollLeft = currentScrollLeft;\n            }\n        }\n    };\n    const handleHeaderScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            bodyRef.current.scrollLeft = headerRef.current.scrollLeft;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    // Find all slots that should be displayed in a given time cell\n    const findSlotsForTimeCell = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): ScheduleSlotProps[] => {\n        if (!service.slots) return [];\n        const timeSlotMinutes = TimeHelper.timeToMinutes(timeSlot);\n        const nextTime = minutesToTime(timeSlotMinutes + 30);\n\n        const slots = findSlotsStartingInTimeRange(\n            service.slots,\n            timeSlot,\n            nextTime\n        );\n\n        return slots;\n    };\n\n    // Check if a time slot is covered by any existing booking\n    const isServiceTimeSlotCovered = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): boolean => {\n        return service.slots\n            ? isTimeCellCovered(service.slots, timeSlot)\n            : false;\n    };\n\n    const getPopoverConfig = (\n        service: ScheduleEntityProps,\n        slot: ScheduleSlotProps | undefined,\n        time: string\n    ) => {\n        if (slot?.customPopover) {\n            return slot.customPopover;\n        }\n        if (!isServiceTimeSlotCovered(service, time) && emptySlotPopover) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            const emptySlotData = {\n                startTime: time,\n                endTime: endTimeString,\n                name: service.name,\n            };\n            return emptySlotPopover(emptySlotData);\n        }\n\n        return undefined;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderHeader = () => {\n        return (\n            <ServiceContainer $columnCount={serviceData.length}>\n                {serviceData.map((service) => (\n                    <ServiceColumn key={service.id}>\n                        {isMobile && (\n                            <ArrowContainer>\n                                {showPrevArrow && onPrevService && (\n                                    <ArrowButton\n                                        styleType=\"light\"\n                                        sizeType=\"small\"\n                                        onClick={onPrevService}\n                                        aria-label=\"Previous service\"\n                                    >\n                                        <ChevronLeftIcon aria-hidden />\n                                    </ArrowButton>\n                                )}\n                            </ArrowContainer>\n                        )}\n                        <ServiceHeaderContainer>\n                            <Title>{service.name}</Title>\n                            <Description>\n                                <span>\n                                    {\n                                        service.slots.filter(\n                                            (cell) =>\n                                                cell.status === \"available\"\n                                        ).length\n                                    }\n                                </span>{\" \"}\n                                available\n                            </Description>\n                        </ServiceHeaderContainer>\n                        {isMobile && showNextArrow && onNextService && (\n                            <ArrowButton\n                                styleType=\"light\"\n                                sizeType=\"small\"\n                                onClick={onNextService}\n                                aria-label=\"Next service\"\n                            >\n                                <ChevronRightIcon aria-hidden />\n                            </ArrowButton>\n                        )}\n                    </ServiceColumn>\n                ))}\n            </ServiceContainer>\n        );\n    };\n\n    const renderSlotContent = (\n        slot: ScheduleSlotProps,\n        timeSlotStart: string\n    ) => {\n        const duration = TimeHelper.calculateDuration(\n            slot.startTime,\n            slot.endTime\n        );\n        const offsetTop = calculateSlotOffset(slot.startTime, timeSlotStart);\n        return (\n            <SlotContent\n                $status={slot.status}\n                $duration={duration}\n                $offsetTop={offsetTop}\n                onClick={(e) => slot.onClick && slot.onClick(slot, e)}\n            >\n                {duration >= 15 && (\n                    <>\n                        <SlotTime>\n                            {TimeHelper.parseInput(slot.startTime, \"12hr\")}\n                            {\"\\u2013\"}{\" \"}\n                            {TimeHelper.parseInput(slot.endTime, \"12hr\")}\n                        </SlotTime>\n                        <SlotAvailability>\n                            {slot.status === \"blocked\"\n                                ? blockedMessage\n                                : `${slot.booked} / ${slot.capacity}`}\n                        </SlotAvailability>\n                    </>\n                )}\n            </SlotContent>\n        );\n    };\n\n    const renderSlotCell = (service: ScheduleEntityProps, time: string) => {\n        const slots = findSlotsForTimeCell(service, time);\n        if (slots.length > 0) {\n            return (\n                <SlotCell key={time} $dashed={time.endsWith(\":00\")}>\n                    {slots.map((slot, index) => {\n                        const popoverConfig = getPopoverConfig(\n                            service,\n                            slot,\n                            time\n                        );\n                        return (\n                            <WithOptionalPopover\n                                key={`${slot.id}-${index}`}\n                                containerRef={containerRef}\n                                customPopover={popoverConfig}\n                            >\n                                {renderSlotContent(slot, time)}\n                            </WithOptionalPopover>\n                        );\n                    })}\n                </SlotCell>\n            );\n        } else {\n            return (\n                <SlotCell\n                    key={time}\n                    $dashed={time.endsWith(\":00\")}\n                    onClick={() => handleEmptySlotClick(time, service.name)}\n                >\n                    <WithOptionalPopover\n                        containerRef={containerRef}\n                        customPopover={getPopoverConfig(\n                            service,\n                            undefined,\n                            time\n                        )}\n                    >\n                        <EmptySlot />\n                    </WithOptionalPopover>\n                </SlotCell>\n            );\n        }\n    };\n\n    const renderTimeSlotGrid = () => {\n        return (\n            <SlotGrid $columnCount={serviceData.length}>\n                {timelineOffset !== null && <Timeline $top={timelineOffset} />}\n                {serviceData.map((service) => (\n                    <SlotColumn key={service.id}>\n                        {timeSlots.map((time) => renderSlotCell(service, time))}\n                    </SlotColumn>\n                ))}\n            </SlotGrid>\n        );\n    };\n\n    return (\n        <ScheduleContainer>\n            {loading ? (\n                <LoadingContainer>\n                    <ThemedLoadingSpinner />\n                </LoadingContainer>\n            ) : (\n                <>\n                    {/* Service Name Header Row */}\n                    <HeaderContainer\n                        ref={headerRef}\n                        onScroll={handleHeaderScroll}\n                        $isMobile={isMobile}\n                    >\n                        <BlankCell />\n                        {renderHeader()}\n                    </HeaderContainer>\n\n                    <BodyContainer ref={bodyRef} onScroll={handleBodyScroll}>\n                        {/* Time labels */}\n                        <TimeIndicator\n                            minTime={minTime}\n                            maxTime={maxTime}\n                            format=\"24hr\"\n                            timelineOffset={timelineOffset}\n                        />\n                        {/* Time slot grid */}\n                        {renderTimeSlotGrid()}\n                    </BodyContainer>\n                </>\n            )}\n        </ScheduleContainer>\n    );\n};\n"],"names":["ScheduleDayView","serviceData","isMobile","onNextService","onPrevService","onEmptySlotClick","showPrevArrow","showNextArrow","minTime","maxTime","initialScrollTime","containerRef","loading","emptySlotPopover","blockedMessage","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","headerRef","useRef","timeSlots","useMemo","TimeHelper","generateTimings","getPopoverConfig","service","slot","time","customPopover","timeSlot","slots","isTimeCellCovered","isServiceTimeSlotCovered","emptySlotData","startTime","endTime","DateHelper","addMinutesToTime","name","renderSlotContent","timeSlotStart","duration","calculateDuration","offsetTop","calculateSlotOffset","_jsx","SlotContent","$status","status","$duration","onClick","e","children","_jsxs","_Fragment","SlotTime","parseInput","SlotAvailability","booked","capacity","renderSlotCell","timeSlotMinutes","timeToMinutes","nextTime","minutesToTime","findSlotsStartingInTimeRange","findSlotsForTimeCell","length","SlotCell","$dashed","endsWith","map","index","popoverConfig","WithOptionalPopover","id","serviceName","endTimeString","handleEmptySlotClick","undefined","EmptySlot","ScheduleContainer","LoadingContainer","ThemedLoadingSpinner","HeaderContainer","ref","onScroll","_e","current","scrollLeft","$isMobile","BlankCell","ServiceContainer","$columnCount","ServiceColumn","ArrowContainer","ArrowButton","styleType","sizeType","ChevronLeftIcon","ServiceHeaderContainer","Title","Description","filter","cell","ChevronRightIcon","BodyContainer","SCROLL_BUFFER","maxScrollLeft","scrollWidth","clientWidth","currentScrollLeft","TimeIndicator","format","SlotGrid","Timeline","$top","SlotColumn"],"mappings":"ioCAyCO,MAAMA,EAAkB,EAC3BC,cACAC,WACAC,gBACAC,gBACAC,mBACAC,gBACAC,gBACAC,UACAC,UACAC,oBACAC,eACAC,UACAC,mBACAC,iBAAiB,kBAKjB,MAAMC,EAAiBC,EAAkBR,EAASC,GAC5CQ,EAAUC,EAAiBN,EAASJ,EAASE,GAC7CS,GAAYC,EAAuB,MACnCC,GAAYC,GACd,IAAMC,EAAWC,gBAAgB,GAAI,OAAQhB,EAASC,IACtD,CAACD,EAASC,IAyERgB,GAAmB,CACrBC,EACAC,EACAC,KAEA,GAAID,aAAI,EAAJA,EAAME,cACN,OAAOF,EAAKE,cAEhB,IAjB6B,EAC7BH,EACAI,MAEOJ,EAAQK,OACTC,EAAkBN,EAAQK,MAAOD,GAYlCG,CAAyBP,EAASE,IAASf,EAAkB,CAC9D,MACMqB,EAAgB,CAClBC,UAAWP,EACXQ,QAHkBC,EAAWC,iBAAiBV,EAAM,IAIpDW,KAAMb,EAAQa,MAElB,OAAO1B,EAAiBqB,EAC5B,CAEgB,EAwDdM,GAAoB,CACtBb,EACAc,KAEA,MAAMC,EAAWnB,EAAWoB,kBACxBhB,EAAKQ,UACLR,EAAKS,SAEHQ,EAAYC,EAAoBlB,EAAKQ,UAAWM,GACtD,OACIK,EAACC,EAAW,CAAAC,QACCrB,EAAKsB,OAAMC,UACTR,aACCE,EACZO,QAAUC,GAAMzB,EAAKwB,SAAWxB,EAAKwB,QAAQxB,EAAMyB,GAAEC,SAEpDX,GAAY,IACTY,EAAAC,EAAA,CAAAF,SAAA,CACIC,EAACE,EAAQ,CAAAH,SAAA,CACJ9B,EAAWkC,WAAW9B,EAAKQ,UAAW,QACtC,IAAU,IACVZ,EAAWkC,WAAW9B,EAAKS,QAAS,WAEzCU,EAACY,EAAgB,CAAAL,SACI,YAAhB1B,EAAKsB,OACAnC,EACA,GAAGa,EAAKgC,YAAYhC,EAAKiC,iBAIjC,EAIhBC,GAAiB,CAACnC,EAA8BE,KAClD,MAAMG,EAxImB,EACzBL,EACAI,KAEA,IAAKJ,EAAQK,MAAO,MAAO,GAC3B,MAAM+B,EAAkBvC,EAAWwC,cAAcjC,GAC3CkC,EAAWC,EAAcH,EAAkB,IAQjD,OANcI,EACVxC,EAAQK,MACRD,EACAkC,EAGQ,EA0HEG,CAAqBzC,EAASE,GAC5C,OAAIG,EAAMqC,OAAS,EAEXtB,EAACuB,EAAQ,CAAAC,QAAqB1C,EAAK2C,SAAS,gBACvCxC,EAAMyC,KAAI,CAAC7C,EAAM8C,KACd,MAAMC,EAAgBjD,GAClBC,EACAC,EACAC,GAEJ,OACIkB,EAAC6B,EAAmB,CAEhBhE,aAAcA,EACdkB,cAAe6C,EAAarB,SAE3Bb,GAAkBb,EAAMC,IAJpB,GAAGD,EAAKiD,MAAMH,IAKD,KAdnB7C,GAqBfkB,EAACuB,EAAQ,CAAAC,QAEI1C,EAAK2C,SAAS,OACvBpB,QAAS,IA1MI,EAACvB,EAAciD,KACxC,GAAIxE,EAAkB,CAClB,MAAMyE,EAAgBzC,EAAWC,iBAAiBV,EAAM,IACxDvB,EAAiB,CACb8B,UAAWP,EACXQ,QAAS0C,EACTvC,KAAMsC,GAEd,GAkM2BE,CAAqBnD,EAAMF,EAAQa,MAAKc,SAEvDP,EAAC6B,EAAmB,CAChBhE,aAAcA,EACdkB,cAAeJ,GACXC,OACAsD,EACApD,GACHyB,SAEDP,EAACmC,EAAS,CAAA,MAZTrD,EAgBjB,EAgBJ,OACIkB,EAACoC,EAAiB,CAAA7B,SACbzC,EACGkC,EAACqC,EAAgB,CAAA9B,SACbP,EAACsC,EAAoB,CAAA,KAGzB9B,eAEIA,EAAC+B,EAAe,CACZC,IAAKnE,GACLoE,SAtNQC,IACpBrE,GAAUsE,SAAWxE,EAAQwE,UAC7BxE,EAAQwE,QAAQC,WAAavE,GAAUsE,QAAQC,WACnD,EAmN4CC,UACjBzF,YAEX4C,EAAC8C,MAzJb9C,EAAC+C,EAAgB,CAAAC,aAAe7F,EAAYmE,OAAMf,SAC7CpD,EAAYuE,KAAK9C,GACd4B,EAACyC,EAAa,CAAA1C,SAAA,CACTnD,GACG4C,EAACkD,EAAc,CAAA3C,SACV/C,GAAiBF,GACd0C,EAACmD,EAAW,CACRC,UAAU,QACVC,SAAS,QACThD,QAAS/C,eACE,mBAAkBiD,SAE7BP,EAACsD,EAAe,CAAA,eAAA,QAKhC9C,EAAC+C,EAAsB,CAAAhD,SAAA,CACnBP,EAACwD,EAAK,CAAAjD,SAAE3B,EAAQa,OAChBe,EAACiD,EAAW,CAAAlD,SAAA,CACRP,EAAA,OAAA,CAAAO,SAEQ3B,EAAQK,MAAMyE,QACTC,GACmB,cAAhBA,EAAKxD,SACXmB,SAEF,IAAG,kBAIlBlE,GAAYK,GAAiBJ,GAC1B2C,EAACmD,EAAW,CACRC,UAAU,QACVC,SAAS,QACThD,QAAShD,EAAa,aACX,eAAckD,SAEzBP,EAAC4D,EAAgB,CAAA,eAAA,QApCThF,EAAQkD,WA2J5BtB,EAACqD,EAAa,CAACrB,IAAKrE,EAASsE,SA9OnBC,IACtB,GAAIrE,GAAUsE,SAAWxE,EAAQwE,QAAS,CAEtC,MAAMmB,EAAgB,GAChBC,EACF5F,EAAQwE,QAAQqB,YAChB7F,EAAQwE,QAAQsB,YAChBH,EACEI,EAAoB/F,EAAQwE,QAAQC,WACtCsB,EAAoBH,GACpB5F,EAAQwE,QAAQC,WAAamB,EAC7B1F,GAAUsE,QAAQC,WAAamB,GAE/B1F,GAAUsE,QAAQC,WAAasB,CAEvC,GA+NmE3D,SAAA,CAEnDP,EAACmE,EAAa,CACVzG,QAASA,EACTC,QAASA,EACTyG,OAAO,OACPnG,eAAgBA,IAnChCuC,EAAC6D,EAAQ,CAAArB,aAAe7F,EAAYmE,OAAMf,SAAA,CAClB,OAAnBtC,GAA2B+B,EAACsE,EAAQ,CAAAC,KAAOtG,IAC3Cd,EAAYuE,KAAK9C,GACdoB,EAACwE,EAAU,CAAAjE,SACNhC,GAAUmD,KAAK5C,GAASiC,GAAenC,EAASE,MADpCF,EAAQkD,gBAuCjB"}
+{"version":3,"file":"schedule-day-view.js","sources":["../../../src/schedule/schedule-day-view/schedule-day-view.tsx"],"sourcesContent":["import { ChevronLeftIcon, ChevronRightIcon } from \"@lifesg/react-icons\";\nimport type { MouseEvent } from \"react\";\nimport { useMemo, useRef } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport { DateHelper } from \"../../util/date-helper\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport {\n    calculateSlotOffset,\n    findSlotsStartingInTimeRange,\n    isTimeCellCovered,\n    minutesToTime,\n    useInitialScroll,\n    useTimelineOffset,\n} from \"../shared\";\nimport { WithOptionalPopover } from \"../shared/with-optional-popover\";\nimport { TimeIndicator } from \"../time-indicator/time-indicator\";\nimport type { ScheduleEntityProps, ScheduleSlotProps } from \"../types\";\nimport * as styles from \"./schedule-day-view.styles\";\nimport type { ScheduleDayViewProps } from \"./types\";\n\nconst {\n    ServiceContainer,\n    ServiceColumn,\n    ArrowContainer,\n    ArrowButton,\n    ServiceHeaderContainer,\n    Title,\n    Description,\n    SlotContent,\n    SlotTime,\n    SlotAvailability,\n    SlotCell,\n    EmptySlot,\n    SlotGrid,\n    Timeline,\n    SlotColumn,\n    ScheduleContainer,\n    LoadingContainer,\n    HeaderContainer,\n    BlankCell,\n    BodyContainer,\n} = styles;\n\nexport const ScheduleDayView = ({\n    serviceData,\n    isMobile,\n    onNextService,\n    onPrevService,\n    onEmptySlotClick,\n    showPrevArrow,\n    showNextArrow,\n    minTime,\n    maxTime,\n    initialScrollTime,\n    containerRef,\n    loading,\n    emptySlotPopover,\n    blockedMessage = \"Unavailable\",\n}: ScheduleDayViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const timelineOffset = useTimelineOffset(minTime, maxTime);\n    const bodyRef = useInitialScroll(loading, minTime, initialScrollTime);\n    const headerRef = useRef<HTMLDivElement>(null);\n    const timeSlots = useMemo(\n        () => TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime),\n        [minTime, maxTime]\n    );\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    // Handle empty slot click with slot details\n    const handleEmptySlotClick = (time: string, serviceName: string) => {\n        if (onEmptySlotClick) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            onEmptySlotClick({\n                startTime: time,\n                endTime: endTimeString,\n                name: serviceName,\n            });\n        }\n    };\n\n    // Synchronize horizontal scrolling between header and body\n    const handleBodyScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            // Set a fixed buffer (17px) to prevent over-scrolling and misalignment\n            const SCROLL_BUFFER = 17;\n            const maxScrollLeft =\n                bodyRef.current.scrollWidth -\n                bodyRef.current.clientWidth -\n                SCROLL_BUFFER;\n            const currentScrollLeft = bodyRef.current.scrollLeft;\n            if (currentScrollLeft > maxScrollLeft) {\n                bodyRef.current.scrollLeft = maxScrollLeft;\n                headerRef.current.scrollLeft = maxScrollLeft;\n            } else {\n                headerRef.current.scrollLeft = currentScrollLeft;\n            }\n        }\n    };\n    const handleHeaderScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            bodyRef.current.scrollLeft = headerRef.current.scrollLeft;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    // Find all slots that should be displayed in a given time cell\n    const findSlotsForTimeCell = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): ScheduleSlotProps[] => {\n        if (!service.slots) return [];\n        const timeSlotMinutes = TimeHelper.timeToMinutes(timeSlot);\n        const nextTime = minutesToTime(timeSlotMinutes + 30);\n\n        const slots = findSlotsStartingInTimeRange(\n            service.slots,\n            timeSlot,\n            nextTime\n        );\n\n        return slots;\n    };\n\n    // Check if a time slot is covered by any existing booking\n    const isServiceTimeSlotCovered = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): boolean => {\n        return service.slots\n            ? isTimeCellCovered(service.slots, timeSlot)\n            : false;\n    };\n\n    const getPopoverConfig = (\n        service: ScheduleEntityProps,\n        slot: ScheduleSlotProps | undefined,\n        time: string\n    ) => {\n        if (slot?.customPopover) {\n            return slot.customPopover;\n        }\n        if (!isServiceTimeSlotCovered(service, time) && emptySlotPopover) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            const emptySlotData = {\n                startTime: time,\n                endTime: endTimeString,\n                name: service.name,\n            };\n            return emptySlotPopover(emptySlotData);\n        }\n\n        return undefined;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderHeader = () => {\n        return (\n            <ServiceContainer $columnCount={serviceData.length}>\n                {serviceData.map((service) => (\n                    <ServiceColumn key={service.id}>\n                        {isMobile && (\n                            <ArrowContainer>\n                                {showPrevArrow && onPrevService && (\n                                    <ArrowButton\n                                        styleType=\"light\"\n                                        sizeType=\"small\"\n                                        onClick={onPrevService}\n                                        aria-label=\"Previous service\"\n                                        icon={<ChevronLeftIcon aria-hidden />}\n                                    />\n                                )}\n                            </ArrowContainer>\n                        )}\n                        <ServiceHeaderContainer>\n                            <Title>{service.name}</Title>\n                            <Description>\n                                <span>\n                                    {\n                                        service.slots.filter(\n                                            (cell) =>\n                                                cell.status === \"available\"\n                                        ).length\n                                    }\n                                </span>{\" \"}\n                                available\n                            </Description>\n                        </ServiceHeaderContainer>\n                        {isMobile && showNextArrow && onNextService && (\n                            <ArrowButton\n                                styleType=\"light\"\n                                sizeType=\"small\"\n                                onClick={onNextService}\n                                aria-label=\"Next service\"\n                                icon={<ChevronRightIcon aria-hidden />}\n                            />\n                        )}\n                    </ServiceColumn>\n                ))}\n            </ServiceContainer>\n        );\n    };\n\n    const renderSlotContent = (\n        slot: ScheduleSlotProps,\n        timeSlotStart: string\n    ) => {\n        const duration = TimeHelper.calculateDuration(\n            slot.startTime,\n            slot.endTime\n        );\n        const offsetTop = calculateSlotOffset(slot.startTime, timeSlotStart);\n        return (\n            <SlotContent\n                $status={slot.status}\n                $duration={duration}\n                $offsetTop={offsetTop}\n                onClick={(e: MouseEvent) =>\n                    slot.onClick && slot.onClick(slot, e)\n                }\n            >\n                {duration >= 15 && (\n                    <>\n                        <SlotTime>\n                            {TimeHelper.parseInput(slot.startTime, \"12hr\")}\n                            {\"\\u2013\"}{\" \"}\n                            {TimeHelper.parseInput(slot.endTime, \"12hr\")}\n                        </SlotTime>\n                        <SlotAvailability>\n                            {slot.status === \"blocked\"\n                                ? blockedMessage\n                                : `${slot.booked} / ${slot.capacity}`}\n                        </SlotAvailability>\n                    </>\n                )}\n            </SlotContent>\n        );\n    };\n\n    const renderSlotCell = (service: ScheduleEntityProps, time: string) => {\n        const slots = findSlotsForTimeCell(service, time);\n        if (slots.length > 0) {\n            return (\n                <SlotCell key={time} $dashed={time.endsWith(\":00\")}>\n                    {slots.map((slot, index) => {\n                        const popoverConfig = getPopoverConfig(\n                            service,\n                            slot,\n                            time\n                        );\n                        return (\n                            <WithOptionalPopover\n                                key={`${slot.id}-${index}`}\n                                containerRef={containerRef}\n                                customPopover={popoverConfig}\n                            >\n                                {renderSlotContent(slot, time)}\n                            </WithOptionalPopover>\n                        );\n                    })}\n                </SlotCell>\n            );\n        } else {\n            return (\n                <SlotCell\n                    key={time}\n                    $dashed={time.endsWith(\":00\")}\n                    onClick={() => handleEmptySlotClick(time, service.name)}\n                >\n                    <WithOptionalPopover\n                        containerRef={containerRef}\n                        customPopover={getPopoverConfig(\n                            service,\n                            undefined,\n                            time\n                        )}\n                    >\n                        <EmptySlot />\n                    </WithOptionalPopover>\n                </SlotCell>\n            );\n        }\n    };\n\n    const renderTimeSlotGrid = () => {\n        return (\n            <SlotGrid $columnCount={serviceData.length}>\n                {timelineOffset !== null && <Timeline $top={timelineOffset} />}\n                {serviceData.map((service) => (\n                    <SlotColumn key={service.id}>\n                        {timeSlots.map((time) => renderSlotCell(service, time))}\n                    </SlotColumn>\n                ))}\n            </SlotGrid>\n        );\n    };\n\n    return (\n        <ScheduleContainer>\n            {loading ? (\n                <LoadingContainer>\n                    <ThemedLoadingSpinner />\n                </LoadingContainer>\n            ) : (\n                <>\n                    {/* Service Name Header Row */}\n                    <HeaderContainer\n                        ref={headerRef}\n                        onScroll={handleHeaderScroll}\n                        $isMobile={isMobile}\n                    >\n                        <BlankCell />\n                        {renderHeader()}\n                    </HeaderContainer>\n\n                    <BodyContainer ref={bodyRef} onScroll={handleBodyScroll}>\n                        {/* Time labels */}\n                        <TimeIndicator\n                            minTime={minTime}\n                            maxTime={maxTime}\n                            format=\"24hr\"\n                            timelineOffset={timelineOffset}\n                        />\n                        {/* Time slot grid */}\n                        {renderTimeSlotGrid()}\n                    </BodyContainer>\n                </>\n            )}\n        </ScheduleContainer>\n    );\n};\n"],"names":["ServiceContainer","ServiceColumn","ArrowContainer","ArrowButton","ServiceHeaderContainer","Title","Description","SlotContent","SlotTime","SlotAvailability","SlotCell","EmptySlot","SlotGrid","Timeline","SlotColumn","ScheduleContainer","LoadingContainer","HeaderContainer","BlankCell","BodyContainer","styles","ScheduleDayView","serviceData","isMobile","onNextService","onPrevService","onEmptySlotClick","showPrevArrow","showNextArrow","minTime","maxTime","initialScrollTime","containerRef","loading","emptySlotPopover","blockedMessage","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","headerRef","useRef","timeSlots","useMemo","TimeHelper","generateTimings","getPopoverConfig","service","slot","time","customPopover","timeSlot","slots","isTimeCellCovered","isServiceTimeSlotCovered","emptySlotData","startTime","endTime","DateHelper","addMinutesToTime","name","renderSlotContent","timeSlotStart","duration","calculateDuration","offsetTop","calculateSlotOffset","_jsx","$status","status","$duration","onClick","e","children","_jsxs","_Fragment","parseInput","booked","capacity","renderSlotCell","timeSlotMinutes","timeToMinutes","nextTime","minutesToTime","findSlotsStartingInTimeRange","findSlotsForTimeCell","length","$dashed","endsWith","map","index","popoverConfig","WithOptionalPopover","id","serviceName","endTimeString","handleEmptySlotClick","undefined","ThemedLoadingSpinner","ref","onScroll","_e","current","scrollLeft","$isMobile","$columnCount","styleType","sizeType","icon","ChevronLeftIcon","filter","cell","ChevronRightIcon","SCROLL_BUFFER","maxScrollLeft","scrollWidth","clientWidth","currentScrollLeft","TimeIndicator","format","$top"],"mappings":"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"}

package/schedule/schedule-day-view/schedule-day-view.styles.d.ts

@@ -18,30 +18,82 @@ interface SlotContentStyleProps {
 interface TimelineStyleProps {
     $top: number;
 }
-export declare const ArrowButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("../..").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ArrowContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ScheduleContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const LoadingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const HeaderContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, HeaderContainerStyleProps>> & string;
-export declare const BlankCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ServiceContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ServiceContainerStyleProps>> & string;
-export declare const ServiceColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ServiceHeaderContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const BodyContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SlotGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SlotGridStyleProps>> & string;
-export declare const SlotColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SlotCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SlotCellStyleProps>> & string;
-export declare const SlotContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, SlotContentStyleProps>> & string;
-export declare const SlotTime: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const SlotAvailability: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const Timeline: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TimelineStyleProps>> & string;
-export declare const EmptySlot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ArrowButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<((props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null) & {
+    Default: (props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+    Small: (props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+    Large: (props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+}, keyof import("react").Component<any, {}, any>>;
+export declare const ArrowContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ScheduleContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const LoadingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const HeaderContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isMobile"> & HeaderContainerStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isMobile"> & HeaderContainerStyleProps, never>>> & string;
+export declare const BlankCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ServiceContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$columnCount"> & ServiceContainerStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$columnCount"> & ServiceContainerStyleProps, never>>> & string;
+export declare const ServiceColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ServiceHeaderContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const BodyContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const SlotGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$columnCount"> & SlotGridStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$columnCount"> & SlotGridStyleProps, never>>> & string;
+export declare const SlotColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const SlotCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$dashed"> & SlotCellStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$dashed"> & SlotCellStyleProps, never>>> & string;
+export declare const SlotContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, keyof SlotContentStyleProps> & SlotContentStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, keyof SlotContentStyleProps> & SlotContentStyleProps, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const SlotTime: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+export declare const SlotAvailability: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+export declare const Timeline: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$top"> & TimelineStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$top"> & TimelineStyleProps, never>>> & string;
+export declare const EmptySlot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export {};

package/schedule/schedule-day-view/schedule-day-view.styles.js

@@ -1,12 +1,12 @@
-import i,{css as e}from"styled-components";import{IconButton as o}from"../../icon-button/icon-button.js";import{lineClampCss as t}from"../../shared/styles/index.js";import{Typography as r}from"../../typography/index.js";import{V3_Colour as d,V3_Border as n,V3_Radius as s,V3_Spacing as a,V3_Font as l}from"../../v3_theme/index.js";import{HEADER_HEIGHT as p,TIME_INDICATOR_WIDTH as $,MIN_COLUMN_WIDTH as g,CELL_HEIGHT as c}from"../const.js";const b=i(o)`
+import e,{css as i}from"styled-components";import{Button as o}from"../../button/button.js";import{lineClampCss as t}from"../../shared/styles/index.js";import{Typography as r}from"../../typography/index.js";import{V3_Colour as d,V3_Border as n,V3_Radius as s,V3_Spacing as a,V3_Font as l}from"../../v3_theme/index.js";import{HEADER_HEIGHT as p,TIME_INDICATOR_WIDTH as $,MIN_COLUMN_WIDTH as g,CELL_HEIGHT as c}from"../const.js";const b=e(o)`
     color: ${d.icon};
-`,h=i.div`
+`,h=e.div`
     width: 2rem;
-`,m=i.div`
+`,m=e.div`
     display: flex;
     flex-direction: column;
     height: 100%;
-`,u=i.div`
+`,u=e.div`
     display: flex;
     justify-content: center;
     align-items: center;
@@ -15,7 +15,7 @@ import i,{css as e}from"styled-components";import{IconButton as o}from"../../ico
     border: ${n["width-010"]} ${n.solid} ${d.border};
     border-radius: ${s.md};
     background: ${d.bg};
-`,x=i.div`
+`,x=e.div`
     z-index: 3;
     max-height: ${p}px;
     border-top-right-radius: ${s.md};
@@ -25,22 +25,22 @@ import i,{css as e}from"styled-components";import{IconButton as o}from"../../ico
     overflow-x: hidden;
     overflow-y: hidden;
 
-    ${i=>i.$isMobile?e`
+    ${e=>e.$isMobile?i`
                   display: block;
                   overflow: hidden;
-              `:e`
+              `:i`
                   display: grid;
                   grid-template-columns: ${$}px 1fr;
               `}
-`,f=i.div`
+`,f=e.div`
     min-width: ${$}px;
     background: ${d["bg-strong"]};
     position: sticky;
     left: 0;
-`,w=i.div`
+`,w=e.div`
     display: grid;
-    grid-template-columns: repeat(${i=>i.$columnCount}, 1fr);
-`,v=i.div`
+    grid-template-columns: repeat(${e=>e.$columnCount}, 1fr);
+`,v=e.div`
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -52,17 +52,17 @@ import i,{css as e}from"styled-components";import{IconButton as o}from"../../ico
     &:last-child {
         border-right: none;
     }
-`,y=i.div`
+`,y=e.div`
     width: 15rem;
     padding-left: ${a["spacing-16"]};
-`,k=i(r.BodyMD)`
+`,k=e(r.BodyMD)`
     color: ${d["text-primary"]};
     font-weight: ${l.Spec["weight-semibold"]};
     margin-top: 0;
     ${t(2)}
     text-overflow: ellipsis;
     word-wrap: break-word;
-`,j=i(r.BodySM)`
+`,j=e(r.BodySM)`
     margin-top: ${a["spacing-8"]};
     background-color: ${d["bg-success-hover"]};
     border-radius: ${s.full};
@@ -73,7 +73,7 @@ import i,{css as e}from"styled-components";import{IconButton as o}from"../../ico
     span {
         font-weight: ${l.Spec["weight-semibold"]};
     }
-`,S=i.div`
+`,S=e.div`
     display: grid;
     grid-template-columns: ${$}px 1fr;
     width: 100%;
@@ -85,12 +85,12 @@ import i,{css as e}from"styled-components";import{IconButton as o}from"../../ico
     border-top: none;
     border-bottom-right-radius: ${s.md};
     border-bottom-left-radius: ${s.md};
-`,z=i.div`
+`,z=e.div`
     display: grid;
-    grid-template-columns: repeat(${i=>i.$columnCount}, 1fr);
+    grid-template-columns: repeat(${e=>e.$columnCount}, 1fr);
     min-width: max-content;
     position: relative;
-`,B=i.div`
+`,B=e.div`
     display: flex;
     flex-direction: column;
     min-width: ${g}px;
@@ -100,28 +100,28 @@ import i,{css as e}from"styled-components";import{IconButton as o}from"../../ico
     &:last-child {
         border-right: none;
     }
-`,M=i.div`
+`,M=e.div`
     min-height: ${c}px;
     position: relative;
     border-bottom: ${n["width-010"]} solid ${d.border};
-    ${i=>i.$dashed&&e`
+    ${e=>e.$dashed&&i`
             border-bottom-style: dashed;
         `}
     cursor: pointer;
-`,C=i(r.BodyXS)`
+`,C=e(r.BodyXS)`
     margin-top: 0;
     overflow: hidden;
     width: calc(100% - 27px);
     padding: 2px ${a["spacing-8"]};
     position: absolute;
-    top: ${i=>i.$offsetTop||0}px;
+    top: ${e=>e.$offsetTop||0}px;
     ${l["body-xs-semibold"]};
     border-radius: ${s.sm};
     z-index: 1;
-    height: ${i=>i.$duration?i.$duration/30*c-1+"px":c-1+"px"};
+    height: ${e=>e.$duration?e.$duration/30*c-1+"px":c-1+"px"};
     display: flex;
     justify-content: space-between;
-    background: ${i=>{switch(i.$status){case"pending":return e`
+    background: ${e=>{switch(e.$status){case"pending":return i`
                     repeating-linear-gradient(
                         135deg,
                         ${d["bg-warning"]},
@@ -131,22 +131,22 @@ import i,{css as e}from"styled-components";import{IconButton as o}from"../../ico
                     )
                 `;case"blocked":return d["bg-inverse-subtle"];case"available":return d["bg-success-hover"];case"booked":return d["bg-primary-subtler"];default:return d.bg}}};
 
-    color: ${i=>"blocked"===i.$status?d["text-inverse"]:d["text-subtle"]};
+    color: ${e=>"blocked"===e.$status?d["text-inverse"]:d["text-subtle"]};
 
     border-left: ${n["width-040"]} solid
-        ${i=>"available"===i.$status?d["icon-success"]:"none"};
-`,D=i.span`
+        ${e=>"available"===e.$status?d["icon-success"]:"none"};
+`,D=e.span`
     ${l["body-xs-regular"]};
-`,T=i.span`
+`,T=e.span`
     ${l["body-xs-semibold"]};
-`,X=i.div`
+`,X=e.div`
     position: absolute;
     width: 100%;
     height: 2px;
     background: ${d["icon-primary"]};
-    top: ${i=>i.$top}px;
+    top: ${e=>e.$top}px;
     z-index: 2;
-`,_=i.div`
+`,_=e.div`
     width: 100%;
     height: ${c-1}px;
 `;export{b as ArrowButton,h as ArrowContainer,f as BlankCell,S as BodyContainer,j as Description,_ as EmptySlot,x as HeaderContainer,u as LoadingContainer,m as ScheduleContainer,v as ServiceColumn,w as ServiceContainer,y as ServiceHeaderContainer,T as SlotAvailability,M as SlotCell,B as SlotColumn,C as SlotContent,z as SlotGrid,D as SlotTime,X as Timeline,k as Title};

package/schedule/schedule-day-view/schedule-day-view.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-day-view.styles.js","sources":["../../../src/schedule/schedule-day-view/schedule-day-view.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { IconButton } from \"../../icon-button\";\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Typography } from \"../../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\nimport {\n    CELL_HEIGHT,\n    HEADER_HEIGHT,\n    MIN_COLUMN_WIDTH,\n    TIME_INDICATOR_WIDTH,\n} from \"../const\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface HeaderContainerStyleProps {\n    $isMobile: boolean;\n}\n\ninterface ServiceContainerStyleProps {\n    $columnCount: number;\n}\n\ninterface SlotGridStyleProps {\n    $columnCount: number;\n}\n\ninterface SlotCellStyleProps {\n    $dashed?: boolean;\n}\n\ninterface SlotContentStyleProps {\n    $status?: string;\n    $duration?: number;\n    $offsetTop?: number;\n}\n\ninterface TimelineStyleProps {\n    $top: number;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const ArrowButton = styled(IconButton)`\n    color: ${V3_Colour[\"icon\"]};\n`;\nexport const ArrowContainer = styled.div`\n    width: 2rem;\n`;\n\nexport const ScheduleContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n`;\n\nexport const LoadingContainer = styled.div`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 25rem;\n    height: 100%;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"md\"]};\n    background: ${V3_Colour[\"bg\"]};\n`;\n\nexport const HeaderContainer = styled.div<HeaderContainerStyleProps>`\n    z-index: 3;\n    max-height: ${HEADER_HEIGHT}px;\n    border-top-right-radius: ${V3_Radius[\"md\"]};\n    border-top-left-radius: ${V3_Radius[\"md\"]};\n    position: sticky;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    overflow-x: hidden;\n    overflow-y: hidden;\n\n    ${(props) =>\n        props.$isMobile\n            ? css`\n                  display: block;\n                  overflow: hidden;\n              `\n            : css`\n                  display: grid;\n                  grid-template-columns: ${TIME_INDICATOR_WIDTH}px 1fr;\n              `}\n`;\n\nexport const BlankCell = styled.div`\n    min-width: ${TIME_INDICATOR_WIDTH}px;\n    background: ${V3_Colour[\"bg-strong\"]};\n    position: sticky;\n    left: 0;\n`;\nexport const ServiceContainer = styled.div<ServiceContainerStyleProps>`\n    display: grid;\n    grid-template-columns: repeat(${(props) => props.$columnCount}, 1fr);\n`;\n\nexport const ServiceColumn = styled.div`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    min-width: ${MIN_COLUMN_WIDTH}px;\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-8\"]};\n    background: ${V3_Colour[\"bg-strong\"]};\n    border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border\"]};\n    &:last-child {\n        border-right: none;\n    }\n`;\n\nexport const ServiceHeaderContainer = styled.div`\n    width: 15rem;\n    padding-left: ${V3_Spacing[\"spacing-16\"]};\n`;\n\nexport const Title = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-primary\"]};\n    font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n    margin-top: 0;\n    ${lineClampCss(2)}\n    text-overflow: ellipsis;\n    word-wrap: break-word;\n`;\n\nexport const Description = styled(Typography.BodySM)`\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n    background-color: ${V3_Colour[\"bg-success-hover\"]};\n    border-radius: ${V3_Radius[\"full\"]};\n    width: fit-content;\n    padding: ${V3_Spacing[\"spacing-4\"]} ${V3_Spacing[\"spacing-8\"]};\n    color: ${V3_Colour[\"text-success\"]};\n    font-weight: ${V3_Font.Spec[\"weight-regular\"]};\n    span {\n        font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n    }\n`;\n\nexport const BodyContainer = styled.div`\n    display: grid;\n    grid-template-columns: ${TIME_INDICATOR_WIDTH}px 1fr;\n    width: 100%;\n    overflow-x: auto;\n    overflow-y: auto;\n    flex: 1;\n    height: 100%;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    border-top: none;\n    border-bottom-right-radius: ${V3_Radius[\"md\"]};\n    border-bottom-left-radius: ${V3_Radius[\"md\"]};\n`;\n\nexport const SlotGrid = styled.div<SlotGridStyleProps>`\n    display: grid;\n    grid-template-columns: repeat(${(props) => props.$columnCount}, 1fr);\n    min-width: max-content;\n    position: relative;\n`;\n\nexport const SlotColumn = styled.div`\n    display: flex;\n    flex-direction: column;\n    min-width: ${MIN_COLUMN_WIDTH}px;\n    min-height: fit-content;\n    border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border\"]};\n    &:last-child {\n        border-right: none;\n    }\n`;\n\nexport const SlotCell = styled.div<SlotCellStyleProps>`\n    min-height: ${CELL_HEIGHT}px;\n    position: relative;\n    border-bottom: ${V3_Border[\"width-010\"]} solid ${V3_Colour[\"border\"]};\n    ${(props) =>\n        props.$dashed &&\n        css`\n            border-bottom-style: dashed;\n        `}\n    cursor: pointer;\n`;\n\nexport const SlotContent = styled(Typography.BodyXS)<SlotContentStyleProps>`\n    margin-top: 0;\n    overflow: hidden;\n    width: calc(100% - 27px);\n    padding: 2px ${V3_Spacing[\"spacing-8\"]};\n    position: absolute;\n    top: ${(props) => props.$offsetTop || 0}px;\n    ${V3_Font[\"body-xs-semibold\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    z-index: 1;\n    height: ${(props) =>\n        props.$duration\n            ? `${(props.$duration / 30) * CELL_HEIGHT - 1}px`\n            : `${CELL_HEIGHT - 1}px`};\n    display: flex;\n    justify-content: space-between;\n    background: ${(props) => {\n        switch (props.$status) {\n            case \"pending\":\n                return css`\n                    repeating-linear-gradient(\n                        135deg,\n                        ${V3_Colour[\"bg-warning\"]},\n                        ${V3_Colour[\"bg-warning\"]} 5px,\n                        ${V3_Colour[\"bg-warning-hover\"]} 5px,\n                        ${V3_Colour[\"bg-warning-hover\"]} 10px\n                    )\n                `;\n            case \"blocked\":\n                return V3_Colour[\"bg-inverse-subtle\"];\n            case \"available\":\n                return V3_Colour[\"bg-success-hover\"];\n            case \"booked\":\n                return V3_Colour[\"bg-primary-subtler\"];\n            default:\n                return V3_Colour[\"bg\"];\n        }\n    }};\n\n    color: ${(props) =>\n        props.$status === \"blocked\"\n            ? V3_Colour[\"text-inverse\"]\n            : V3_Colour[\"text-subtle\"]};\n\n    border-left: ${V3_Border[\"width-040\"]} solid\n        ${(props) =>\n            props.$status === \"available\" ? V3_Colour[\"icon-success\"] : \"none\"};\n`;\n\nexport const SlotTime = styled.span`\n    ${V3_Font[\"body-xs-regular\"]};\n`;\n\nexport const SlotAvailability = styled.span`\n    ${V3_Font[\"body-xs-semibold\"]};\n`;\n\nexport const Timeline = styled.div<TimelineStyleProps>`\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    background: ${V3_Colour[\"icon-primary\"]};\n    top: ${(props) => props.$top}px;\n    z-index: 2;\n`;\n\nexport const EmptySlot = styled.div`\n    width: 100%;\n    height: ${CELL_HEIGHT - 1}px;\n`;\n"],"names":["ArrowButton","styled","IconButton","V3_Colour","ArrowContainer","div","ScheduleContainer","LoadingContainer","V3_Border","solid","V3_Radius","HeaderContainer","HEADER_HEIGHT","props","$isMobile","css","TIME_INDICATOR_WIDTH","BlankCell","ServiceContainer","$columnCount","ServiceColumn","MIN_COLUMN_WIDTH","V3_Spacing","ServiceHeaderContainer","Title","Typography","BodyMD","V3_Font","Spec","lineClampCss","Description","BodySM","BodyContainer","SlotGrid","SlotColumn","SlotCell","CELL_HEIGHT","$dashed","SlotContent","BodyXS","$offsetTop","$duration","$status","SlotTime","span","SlotAvailability","Timeline","$top","EmptySlot"],"mappings":"8bAmDaA,EAAcC,EAAOC,EAAW;aAChCC,EAAgB;EAEhBC,EAAiBH,EAAOI,GAAG;;EAI3BC,EAAoBL,EAAOI,GAAG;;;;EAM9BE,EAAmBN,EAAOI,GAAG;;;;;;cAM5BG,EAAU,gBAAgBA,EAAUC,SAASN,EAAkB;qBACxDO,EAAc;kBACjBP,EAAc;EAGnBQ,EAAkBV,EAAOI,GAA8B;;kBAElDO;+BACaF,EAAc;8BACfA,EAAc;;cAE9BF,EAAU,gBAAgBA,EAAUC,SAASN,EAAkB;;;;MAItEU,GACCA,EAAMC,UACAC,CAAG;;;gBAIHA,CAAG;;2CAE0BC;;EAI9BC,EAAYhB,EAAOI,GAAG;iBAClBW;kBACCb,EAAU;;;EAIfe,EAAmBjB,EAAOI,GAA+B;;oCAEjCQ,GAAUA,EAAMM;EAGxCC,EAAgBnB,EAAOI,GAAG;;;;iBAItBgB;eACFC,EAAW,iBAAiBA,EAAW;kBACpCnB,EAAU;oBACRK,EAAU,gBAAgBA,EAAUC;UAC9CN,EAAkB;;;;EAMfoB,EAAyBtB,EAAOI,GAAG;;oBAE5BiB,EAAW;EAGlBE,EAAQvB,EAAOwB,EAAWC,OAAO;aACjCvB,EAAU;mBACJwB,EAAQC,KAAK;;MAE1BC,EAAa;;;EAKNC,EAAc7B,EAAOwB,EAAWM,OAAO;kBAClCT,EAAW;wBACLnB,EAAU;qBACbO,EAAgB;;eAEtBY,EAAW,gBAAgBA,EAAW;aACxCnB,EAAU;mBACJwB,EAAQC,KAAK;;uBAETD,EAAQC,KAAK;;EAIvBI,EAAgB/B,EAAOI,GAAG;;6BAEVW;;;;;;cAMfR,EAAU,gBAAgBA,EAAUC,SAASN,EAAkB;;kCAE3CO,EAAc;iCACfA,EAAc;EAGlCuB,EAAWhC,EAAOI,GAAuB;;oCAEjBQ,GAAUA,EAAMM;;;EAKxCe,EAAajC,EAAOI,GAAG;;;iBAGnBgB;;oBAEGb,EAAU,gBAAgBA,EAAUC;UAC9CN,EAAkB;;;;EAMfgC,EAAWlC,EAAOI,GAAuB;kBACpC+B;;qBAEG5B,EAAU,sBAAsBL,EAAkB;MAChEU,GACCA,EAAMwB,SACNtB,CAAG;;;;EAMEuB,EAAcrC,EAAOwB,EAAWc,OAA8B;;;;mBAIxDjB,EAAW;;WAElBT,GAAUA,EAAM2B,YAAc;MACpCb,EAAQ;qBACOjB,EAAc;;cAEpBG,GACPA,EAAM4B,UACI5B,EAAM4B,UAAY,GAAML,EAAc,EAA1C,KACGA,EAAc,EAAjB;;;kBAGKvB,IACX,OAAQA,EAAM6B,SACV,IAAK,UACD,OAAO3B,CAAG;;;0BAGAZ,EAAU;0BACVA,EAAU;0BACVA,EAAU;0BACVA,EAAU;;kBAGxB,IAAK,UACD,OAAOA,EAAU,qBACrB,IAAK,YACD,OAAOA,EAAU,oBACrB,IAAK,SACD,OAAOA,EAAU,sBACrB,QACI,OAAOA,EAAc;;aAIvBU,GACY,YAAlBA,EAAM6B,QACAvC,EAAU,gBACVA,EAAU;;mBAELK,EAAU;UAClBK,GACmB,cAAlBA,EAAM6B,QAA0BvC,EAAU,gBAAkB;EAG3DwC,EAAW1C,EAAO2C,IAAI;MAC7BjB,EAAQ;EAGDkB,EAAmB5C,EAAO2C,IAAI;MACrCjB,EAAQ;EAGDmB,EAAW7C,EAAOI,GAAuB;;;;kBAIpCF,EAAU;WAChBU,GAAUA,EAAMkC;;EAIfC,EAAY/C,EAAOI,GAAG;;cAErB+B,EAAc;"}
+{"version":3,"file":"schedule-day-view.styles.js","sources":["../../../src/schedule/schedule-day-view/schedule-day-view.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Button } from \"../../button\";\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Typography } from \"../../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\nimport {\n    CELL_HEIGHT,\n    HEADER_HEIGHT,\n    MIN_COLUMN_WIDTH,\n    TIME_INDICATOR_WIDTH,\n} from \"../const\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface HeaderContainerStyleProps {\n    $isMobile: boolean;\n}\n\ninterface ServiceContainerStyleProps {\n    $columnCount: number;\n}\n\ninterface SlotGridStyleProps {\n    $columnCount: number;\n}\n\ninterface SlotCellStyleProps {\n    $dashed?: boolean;\n}\n\ninterface SlotContentStyleProps {\n    $status?: string;\n    $duration?: number;\n    $offsetTop?: number;\n}\n\ninterface TimelineStyleProps {\n    $top: number;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const ArrowButton = styled(Button)`\n    color: ${V3_Colour[\"icon\"]};\n`;\nexport const ArrowContainer = styled.div`\n    width: 2rem;\n`;\n\nexport const ScheduleContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n`;\n\nexport const LoadingContainer = styled.div`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 25rem;\n    height: 100%;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"md\"]};\n    background: ${V3_Colour[\"bg\"]};\n`;\n\nexport const HeaderContainer = styled.div<HeaderContainerStyleProps>`\n    z-index: 3;\n    max-height: ${HEADER_HEIGHT}px;\n    border-top-right-radius: ${V3_Radius[\"md\"]};\n    border-top-left-radius: ${V3_Radius[\"md\"]};\n    position: sticky;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    overflow-x: hidden;\n    overflow-y: hidden;\n\n    ${(props) =>\n        props.$isMobile\n            ? css`\n                  display: block;\n                  overflow: hidden;\n              `\n            : css`\n                  display: grid;\n                  grid-template-columns: ${TIME_INDICATOR_WIDTH}px 1fr;\n              `}\n`;\n\nexport const BlankCell = styled.div`\n    min-width: ${TIME_INDICATOR_WIDTH}px;\n    background: ${V3_Colour[\"bg-strong\"]};\n    position: sticky;\n    left: 0;\n`;\nexport const ServiceContainer = styled.div<ServiceContainerStyleProps>`\n    display: grid;\n    grid-template-columns: repeat(${(props) => props.$columnCount}, 1fr);\n`;\n\nexport const ServiceColumn = styled.div`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    min-width: ${MIN_COLUMN_WIDTH}px;\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-8\"]};\n    background: ${V3_Colour[\"bg-strong\"]};\n    border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border\"]};\n    &:last-child {\n        border-right: none;\n    }\n`;\n\nexport const ServiceHeaderContainer = styled.div`\n    width: 15rem;\n    padding-left: ${V3_Spacing[\"spacing-16\"]};\n`;\n\nexport const Title = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-primary\"]};\n    font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n    margin-top: 0;\n    ${lineClampCss(2)}\n    text-overflow: ellipsis;\n    word-wrap: break-word;\n`;\n\nexport const Description = styled(Typography.BodySM)`\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n    background-color: ${V3_Colour[\"bg-success-hover\"]};\n    border-radius: ${V3_Radius[\"full\"]};\n    width: fit-content;\n    padding: ${V3_Spacing[\"spacing-4\"]} ${V3_Spacing[\"spacing-8\"]};\n    color: ${V3_Colour[\"text-success\"]};\n    font-weight: ${V3_Font.Spec[\"weight-regular\"]};\n    span {\n        font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n    }\n`;\n\nexport const BodyContainer = styled.div`\n    display: grid;\n    grid-template-columns: ${TIME_INDICATOR_WIDTH}px 1fr;\n    width: 100%;\n    overflow-x: auto;\n    overflow-y: auto;\n    flex: 1;\n    height: 100%;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    border-top: none;\n    border-bottom-right-radius: ${V3_Radius[\"md\"]};\n    border-bottom-left-radius: ${V3_Radius[\"md\"]};\n`;\n\nexport const SlotGrid = styled.div<SlotGridStyleProps>`\n    display: grid;\n    grid-template-columns: repeat(${(props) => props.$columnCount}, 1fr);\n    min-width: max-content;\n    position: relative;\n`;\n\nexport const SlotColumn = styled.div`\n    display: flex;\n    flex-direction: column;\n    min-width: ${MIN_COLUMN_WIDTH}px;\n    min-height: fit-content;\n    border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border\"]};\n    &:last-child {\n        border-right: none;\n    }\n`;\n\nexport const SlotCell = styled.div<SlotCellStyleProps>`\n    min-height: ${CELL_HEIGHT}px;\n    position: relative;\n    border-bottom: ${V3_Border[\"width-010\"]} solid ${V3_Colour[\"border\"]};\n    ${(props) =>\n        props.$dashed &&\n        css`\n            border-bottom-style: dashed;\n        `}\n    cursor: pointer;\n`;\n\nexport const SlotContent = styled(Typography.BodyXS)<SlotContentStyleProps>`\n    margin-top: 0;\n    overflow: hidden;\n    width: calc(100% - 27px);\n    padding: 2px ${V3_Spacing[\"spacing-8\"]};\n    position: absolute;\n    top: ${(props) => props.$offsetTop || 0}px;\n    ${V3_Font[\"body-xs-semibold\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    z-index: 1;\n    height: ${(props) =>\n        props.$duration\n            ? `${(props.$duration / 30) * CELL_HEIGHT - 1}px`\n            : `${CELL_HEIGHT - 1}px`};\n    display: flex;\n    justify-content: space-between;\n    background: ${(props) => {\n        switch (props.$status) {\n            case \"pending\":\n                return css`\n                    repeating-linear-gradient(\n                        135deg,\n                        ${V3_Colour[\"bg-warning\"]},\n                        ${V3_Colour[\"bg-warning\"]} 5px,\n                        ${V3_Colour[\"bg-warning-hover\"]} 5px,\n                        ${V3_Colour[\"bg-warning-hover\"]} 10px\n                    )\n                `;\n            case \"blocked\":\n                return V3_Colour[\"bg-inverse-subtle\"];\n            case \"available\":\n                return V3_Colour[\"bg-success-hover\"];\n            case \"booked\":\n                return V3_Colour[\"bg-primary-subtler\"];\n            default:\n                return V3_Colour[\"bg\"];\n        }\n    }};\n\n    color: ${(props) =>\n        props.$status === \"blocked\"\n            ? V3_Colour[\"text-inverse\"]\n            : V3_Colour[\"text-subtle\"]};\n\n    border-left: ${V3_Border[\"width-040\"]} solid\n        ${(props) =>\n            props.$status === \"available\" ? V3_Colour[\"icon-success\"] : \"none\"};\n`;\n\nexport const SlotTime = styled.span`\n    ${V3_Font[\"body-xs-regular\"]};\n`;\n\nexport const SlotAvailability = styled.span`\n    ${V3_Font[\"body-xs-semibold\"]};\n`;\n\nexport const Timeline = styled.div<TimelineStyleProps>`\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    background: ${V3_Colour[\"icon-primary\"]};\n    top: ${(props) => props.$top}px;\n    z-index: 2;\n`;\n\nexport const EmptySlot = styled.div`\n    width: 100%;\n    height: ${CELL_HEIGHT - 1}px;\n`;\n"],"names":["ArrowButton","styled","Button","V3_Colour","ArrowContainer","div","ScheduleContainer","LoadingContainer","V3_Border","solid","V3_Radius","HeaderContainer","HEADER_HEIGHT","props","$isMobile","css","TIME_INDICATOR_WIDTH","BlankCell","ServiceContainer","$columnCount","ServiceColumn","MIN_COLUMN_WIDTH","V3_Spacing","ServiceHeaderContainer","Title","Typography","BodyMD","V3_Font","Spec","lineClampCss","Description","BodySM","BodyContainer","SlotGrid","SlotColumn","SlotCell","CELL_HEIGHT","$dashed","SlotContent","BodyXS","$offsetTop","$duration","$status","SlotTime","span","SlotAvailability","Timeline","$top","EmptySlot"],"mappings":"gbAmDaA,EAAcC,EAAOC,EAAO;aAC5BC,EAAgB;EAEhBC,EAAiBH,EAAOI,GAAG;;EAI3BC,EAAoBL,EAAOI,GAAG;;;;EAM9BE,EAAmBN,EAAOI,GAAG;;;;;;cAM5BG,EAAU,gBAAgBA,EAAUC,SAASN,EAAkB;qBACxDO,EAAc;kBACjBP,EAAc;EAGnBQ,EAAkBV,EAAOI,GAA8B;;kBAElDO;+BACaF,EAAc;8BACfA,EAAc;;cAE9BF,EAAU,gBAAgBA,EAAUC,SAASN,EAAkB;;;;MAItEU,GACCA,EAAMC,UACAC,CAAG;;;gBAIHA,CAAG;;2CAE0BC;;EAI9BC,EAAYhB,EAAOI,GAAG;iBAClBW;kBACCb,EAAU;;;EAIfe,EAAmBjB,EAAOI,GAA+B;;oCAEjCQ,GAAUA,EAAMM;EAGxCC,EAAgBnB,EAAOI,GAAG;;;;iBAItBgB;eACFC,EAAW,iBAAiBA,EAAW;kBACpCnB,EAAU;oBACRK,EAAU,gBAAgBA,EAAUC;UAC9CN,EAAkB;;;;EAMfoB,EAAyBtB,EAAOI,GAAG;;oBAE5BiB,EAAW;EAGlBE,EAAQvB,EAAOwB,EAAWC,OAAO;aACjCvB,EAAU;mBACJwB,EAAQC,KAAK;;MAE1BC,EAAa;;;EAKNC,EAAc7B,EAAOwB,EAAWM,OAAO;kBAClCT,EAAW;wBACLnB,EAAU;qBACbO,EAAgB;;eAEtBY,EAAW,gBAAgBA,EAAW;aACxCnB,EAAU;mBACJwB,EAAQC,KAAK;;uBAETD,EAAQC,KAAK;;EAIvBI,EAAgB/B,EAAOI,GAAG;;6BAEVW;;;;;;cAMfR,EAAU,gBAAgBA,EAAUC,SAASN,EAAkB;;kCAE3CO,EAAc;iCACfA,EAAc;EAGlCuB,EAAWhC,EAAOI,GAAuB;;oCAEjBQ,GAAUA,EAAMM;;;EAKxCe,EAAajC,EAAOI,GAAG;;;iBAGnBgB;;oBAEGb,EAAU,gBAAgBA,EAAUC;UAC9CN,EAAkB;;;;EAMfgC,EAAWlC,EAAOI,GAAuB;kBACpC+B;;qBAEG5B,EAAU,sBAAsBL,EAAkB;MAChEU,GACCA,EAAMwB,SACNtB,CAAG;;;;EAMEuB,EAAcrC,EAAOwB,EAAWc,OAA8B;;;;mBAIxDjB,EAAW;;WAElBT,GAAUA,EAAM2B,YAAc;MACpCb,EAAQ;qBACOjB,EAAc;;cAEpBG,GACPA,EAAM4B,UACI5B,EAAM4B,UAAY,GAAML,EAAc,EAA1C,KACGA,EAAc,EAAjB;;;kBAGKvB,IACX,OAAQA,EAAM6B,SACV,IAAK,UACD,OAAO3B,CAAG;;;0BAGAZ,EAAU;0BACVA,EAAU;0BACVA,EAAU;0BACVA,EAAU;;kBAGxB,IAAK,UACD,OAAOA,EAAU,qBACrB,IAAK,YACD,OAAOA,EAAU,oBACrB,IAAK,SACD,OAAOA,EAAU,sBACrB,QACI,OAAOA,EAAc;;aAIvBU,GACY,YAAlBA,EAAM6B,QACAvC,EAAU,gBACVA,EAAU;;mBAELK,EAAU;UAClBK,GACmB,cAAlBA,EAAM6B,QAA0BvC,EAAU,gBAAkB;EAG3DwC,EAAW1C,EAAO2C,IAAI;MAC7BjB,EAAQ;EAGDkB,EAAmB5C,EAAO2C,IAAI;MACrCjB,EAAQ;EAGDmB,EAAW7C,EAAOI,GAAuB;;;;kBAIpCF,EAAU;WAChBU,GAAUA,EAAMkC;;EAIfC,EAAY/C,EAAOI,GAAG;;cAErB+B,EAAc;"}