@lifesg/react-design-system 4.0.0-alpha.2 → 4.0.0-alpha.4

package/progress-indicator/progress-indicator.styles_1c038s4.css

@@ -0,0 +1,8 @@
+.w103113g{position:relative;width:100%;margin:2rem 0;}:where(body.fds-breakpoint-xl-max) .w103113g{margin:1.5rem 0;}:where(body.fds-breakpoint-lg-max) .w103113g{margin:1rem 0;}
+.ck7dr6z{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;width:100%;}
+.i1k6bqsf{height:4px;margin-bottom:var(--fds-spacing-8);border-radius:var(--fds-radius-full);background-color:var(--fds-colour-bg-disabled);}
+.inywq69{background-color:var(--fds-colour-bg-primary-subtle);}
+.i1ubzlq2{overflow-wrap:anywhere;color:var(--fds-colour-text-disabled);}
+.i8ugwdc{color:var(--fds-colour-text-primary);}
+.i8128on{overflow-wrap:anywhere;color:var(--fds-colour-text);}
+.i1vcego5{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;}.i1vcego5:not(:last-child){margin-right:0.5rem;}

package/progress-indicator/types.d.ts

@@ -1,14 +1,8 @@
-type FadePosition = "left" | "right" | "both";
 export interface ProgressIndicatorProps<T> {
     steps: T[];
     currentIndex: number;
-    /** @deprecated Scrolling behaviour has been removed hence this attribute is no longer needed */
-    fadeColor?: string[] | undefined;
-    /** @deprecated Scrolling behaviour has been removed hence this attribute is no longer needed */
-    fadePosition?: FadePosition | undefined;
     displayExtractor?: ((item: T) => string) | undefined;
     className?: string | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
 }
-export {};

package/schedule/const.js

@@ -1,2 +1,2 @@
-const o=48,t=42,c=130,e=30,n=280;export{o as CELL_HEIGHT,c as HEADER_HEIGHT,n as MIN_COLUMN_WIDTH,e as SLOT_INTERVAL,t as TIME_INDICATOR_WIDTH};
+const o=48,t=30;export{o as CELL_HEIGHT,t as SLOT_INTERVAL};
 //# sourceMappingURL=const.js.map

package/schedule/const.js.map

@@ -1 +1 @@
-{"version":3,"file":"const.js","sources":["../../src/schedule/const.ts"],"sourcesContent":["export const CELL_HEIGHT = 48; //the height of each cell in the grid (unit: px)\nexport const TIME_INDICATOR_WIDTH = 42; //the width of the time indicator column (unit: px)\nexport const HEADER_HEIGHT = 130; //the height of the header (unit: px)\nexport const SLOT_INTERVAL = 30; // minutes per slot\nexport const MIN_COLUMN_WIDTH = 280; //the min width of the column (unit: px)\n\n// Constants for slot positioning in week view\nexport const SLOT_WIDTH = 30;\nexport const SLOT_GAP = 2;\nexport const MAX_VISIBLE_SLOTS = 3;\n"],"names":["CELL_HEIGHT","TIME_INDICATOR_WIDTH","HEADER_HEIGHT","SLOT_INTERVAL","MIN_COLUMN_WIDTH"],"mappings":"AAAO,MAAMA,EAAc,GACdC,EAAuB,GACvBC,EAAgB,IAChBC,EAAgB,GAChBC,EAAmB"}
+{"version":3,"file":"const.js","sources":["../../src/schedule/const.ts"],"sourcesContent":["export const CELL_HEIGHT = 48; //the height of each cell in the grid (unit: px)\nexport const TIME_INDICATOR_WIDTH = 42; //the width of the time indicator column (unit: px)\nexport const HEADER_HEIGHT = 130; //the height of the header (unit: px)\nexport const SLOT_INTERVAL = 30; // minutes per slot\nexport const MIN_COLUMN_WIDTH = 280; //the min width of the column (unit: px)\n\n// Constants for slot positioning in week view\nexport const SLOT_WIDTH = 30;\nexport const SLOT_GAP = 2;\nexport const MAX_VISIBLE_SLOTS = 3;\n"],"names":["CELL_HEIGHT","SLOT_INTERVAL"],"mappings":"AAAO,MAAMA,EAAc,GAGdC,EAAgB"}

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*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};
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{ChevronLeftIcon as i,ChevronRightIcon as s}from"@lifesg/react-icons";import o from"clsx";import{useRef as l,useMemo as n}from"react";import{ThemedLoadingSpinner as a}from"../../animations/themed-loading-spinner/themed-loading-spinner.js";import{Button as m}from"../../button/button.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as c}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{Typography as d}from"../../typography/index.js";import{DateHelper as p}from"../../util/date-helper.js";import{TimeHelper as h}from"../../util/time-helper.js";import{useTimelineOffset as u,useInitialScroll as f}from"../shared/hooks.js";import{minutesToTime as v,findSlotsStartingInTimeRange as N,calculateSlotOffset as T,isTimeCellCovered as j}from"../shared/utils.js";import{ScheduleSlotContent as y}from"../schedule-slot-content/schedule-slot-content.js";import{WithOptionalPopover as g}from"../shared/with-optional-popover.js";import{TimeIndicator as b}from"../time-indicator/time-indicator.js";import{tokens as k,scheduleContainer as x,loadingContainer as S,blankCell as M,headerContainer as $,headerContainerMobile as C,bodyContainer as P,serviceContainer as w,serviceColumn as L,arrowContainer as D,arrowButton as R,serviceHeaderContainer as W,title as q,description as z,slotGrid as A,timeline as B,slotColumn as I,emptySlot as E,slotCell as G,slotCellDashed as O,slotContentAvailable as U,slotContentBlocked as F,slotContent as H,slotTime as J,slotAvailability as K}from"./schedule-day-view.styles.js";const Q=({slot:i,timeSlotStart:s,blockedMessage:o})=>{const l=T(i.startTime,s),n=h.calculateDuration(i.startTime,i.endTime);return e(y,{slot:i,offsetTop:l,tokens:k.slotContent,classNames:{container:H,blocked:F,available:U},children:n>=15&&t(r,{children:[t("span",{className:J,children:[h.parseInput(i.startTime,"12hr"),"–"," ",h.parseInput(i.endTime,"12hr")]}),e("span",{className:K,children:"blocked"===i.status?o:`${i.booked} / ${i.capacity}`})]})})},V=({serviceData:T,isMobile:y,onNextService:U,onPrevService:F,onEmptySlotClick:H,showPrevArrow:J,showNextArrow:K,minTime:V,maxTime:X,initialScrollTime:Y,containerRef:Z,loading:_,emptySlotPopover:ee,blockedMessage:te="Unavailable"})=>{const re=u(V,X),ie=f(_,V,Y),se=l(null),oe=l(null),le=l(null),ne=l(null),ae=n((()=>h.generateTimings(30,"24hr",V,X)),[V,X]);c(oe,{[k.serviceContainer.columnCount]:`${T.length}`}),c(le,{[k.slotGrid.columnCount]:`${T.length}`}),c(ne,{[k.timeline.top]:null===re?null:`${re}px`});const me=(e,t,r)=>{if(null==t?void 0:t.customPopover)return t.customPopover;if(!((e,t)=>!!e.slots&&j(e.slots,t))(e,r)&&ee){const t={startTime:r,endTime:p.addMinutesToTime(r,30),name:e.name};return ee(t)}},ce=(t,r)=>e(Q,{slot:t,timeSlotStart:r,blockedMessage:te}),de=e=>o(G,e.endsWith(":00")&&O),pe=(t,r)=>e("div",{className:de(r),onClick:()=>((e,t)=>{if(H){const r=p.addMinutesToTime(e,30);H({startTime:e,endTime:r,name:t})}})(r,t.name),"data-testid":`empty-slot-${t.id}-${r}`,children:e(g,{containerRef:Z,customPopover:me(t,void 0,r),children:e("div",{className:E})})},r),he=(t,r)=>{const i=((e,t)=>{if(!e.slots)return[];const r=h.timeToMinutes(t),i=v(r+30);return N(e.slots,t,i)})(t,r);return i.length>0?((t,r,i)=>e("div",{className:de(r),children:i.map(((i,s)=>e(g,{containerRef:Z,customPopover:me(t,i,r),children:ce(i,r)},`${i.id}-${s}`)))},r))(t,r,i):pe(t,r)};return e("div",{className:x,children:_?e("div",{className:S,children:e(a,{"data-testid":"loading-spinner"})}):t(r,{children:[t("div",{ref:se,onScroll:e=>{se.current&&ie.current&&(ie.current.scrollLeft=se.current.scrollLeft)},className:o($,y&&C),children:[e("div",{className:M}),e("div",{ref:oe,className:w,children:T.map((r=>t("div",{className:L,children:[y&&e("div",{className:D,children:J&&F&&e(m,{className:R,styleType:"light",sizeType:"small",onClick:F,"aria-label":"Previous service",icon:e(i,{"aria-hidden":!0})})}),t("div",{className:W,children:[e(d.BodyMD,{className:q,children:r.name}),t(d.BodySM,{className:z,children:[e("span",{children:r.slots.filter((e=>"available"===e.status)).length})," ","available"]})]}),y&&K&&U&&e(m,{className:R,styleType:"light",sizeType:"small",onClick:U,"aria-label":"Next service",icon:e(s,{"aria-hidden":!0})})]},r.id)))})]}),t("div",{className:P,ref:ie,onScroll:e=>{if(se.current&&ie.current){const e=17,t=ie.current.scrollWidth-ie.current.clientWidth-e,r=ie.current.scrollLeft;r>t?(ie.current.scrollLeft=t,se.current.scrollLeft=t):se.current.scrollLeft=r}},children:[e(b,{minTime:V,maxTime:X,format:"24hr",timelineOffset:re}),t("div",{ref:le,className:A,children:[null!==re&&e("div",{ref:ne,className:B}),T.map((t=>e("div",{className:I,children:ae.map((e=>he(t,e)))},t.id)))]})]})]})})};export{V 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 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":"8xBAqBA,MAAMA,iBACFA,EAAgBC,cAChBA,EAAaC,eACbA,EAAcC,YACdA,EAAWC,uBACXA,EAAsBC,MACtBA,EAAKC,YACLA,EAAWC,YACXA,EAAWC,SACXA,EAAQC,iBACRA,EAAgBC,SAChBA,EAAQC,UACRA,EAASC,SACTA,EAAQC,SACRA,EAAQC,WACRA,EAAUC,kBACVA,EAAiBC,iBACjBA,EAAgBC,gBAChBA,EAAeC,UACfA,EAASC,cACTA,GACAC,EAESC,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,EAsDdM,GAAoB,CACtBb,EACAc,KAEA,MAAMC,EAAWnB,EAAWoB,kBACxBhB,EAAKQ,UACLR,EAAKS,SAEHQ,EAAYC,EAAoBlB,EAAKQ,UAAWM,GACtD,OACIK,EAAC5D,EAAW,CAAA6D,QACCpB,EAAKqB,OAAMC,UACTP,aACCE,EACZM,QAAUC,GACNxB,EAAKuB,SAAWvB,EAAKuB,QAAQvB,EAAMwB,GAAEC,SAGxCV,GAAY,IACTW,EAAAC,EAAA,CAAAF,SAAA,CACIC,EAAClE,EAAQ,CAAAiE,SAAA,CACJ7B,EAAWgC,WAAW5B,EAAKQ,UAAW,QACtC,IAAU,IACVZ,EAAWgC,WAAW5B,EAAKS,QAAS,WAEzCU,EAAC1D,EAAgB,CAAAgE,SACI,YAAhBzB,EAAKqB,OACAlC,EACA,GAAGa,EAAK6B,YAAY7B,EAAK8B,iBAIjC,EAIhBC,GAAiB,CAAChC,EAA8BE,KAClD,MAAMG,EAxImB,EACzBL,EACAI,KAEA,IAAKJ,EAAQK,MAAO,MAAO,GAC3B,MAAM4B,EAAkBpC,EAAWqC,cAAc9B,GAC3C+B,EAAWC,EAAcH,EAAkB,IAQjD,OANcI,EACVrC,EAAQK,MACRD,EACA+B,EAGQ,EA0HEG,CAAqBtC,EAASE,GAC5C,OAAIG,EAAMkC,OAAS,EAEXnB,EAACzD,EAAQ,CAAA6E,QAAqBtC,EAAKuC,SAAS,gBACvCpC,EAAMqC,KAAI,CAACzC,EAAM0C,KACd,MAAMC,EAAgB7C,GAClBC,EACAC,EACAC,GAEJ,OACIkB,EAACyB,EAAmB,CAEhB5D,aAAcA,EACdkB,cAAeyC,EAAalB,SAE3BZ,GAAkBb,EAAMC,IAJpB,GAAGD,EAAK6C,MAAMH,IAKD,KAdnBzC,GAqBfkB,EAACzD,EAAQ,CAAA6E,QAEItC,EAAKuC,SAAS,OACvBjB,QAAS,IA1MI,EAACtB,EAAc6C,KACxC,GAAIpE,EAAkB,CAClB,MAAMqE,EAAgBrC,EAAWC,iBAAiBV,EAAM,IACxDvB,EAAiB,CACb8B,UAAWP,EACXQ,QAASsC,EACTnC,KAAMkC,GAEd,GAkM2BE,CAAqB/C,EAAMF,EAAQa,MAAKa,SAEvDN,EAACyB,EAAmB,CAChB5D,aAAcA,EACdkB,cAAeJ,GACXC,OACAkD,EACAhD,GACHwB,SAEDN,EAACxD,EAAS,CAAA,MAZTsC,EAgBjB,EAgBJ,OACIkB,EAACpD,EAAiB,CAAA0D,SACbxC,EACGkC,EAACnD,EAAgB,CAAAyD,SACbN,EAAC+B,EAAoB,CAAA,KAGzBxB,eAEIA,EAACzD,EAAe,CACZkF,IAAK3D,GACL4D,SAtNQC,IACpB7D,GAAU8D,SAAWhE,EAAQgE,UAC7BhE,EAAQgE,QAAQC,WAAa/D,GAAU8D,QAAQC,WACnD,EAmN4CC,UACjBjF,YAEX4C,EAACjD,MAzJbiD,EAACnE,EAAgB,CAAAyG,aAAenF,EAAYgE,OAAMb,SAC7CnD,EAAYmE,KAAK1C,GACd2B,EAACzE,EAAa,CAAAwE,SAAA,CACTlD,GACG4C,EAACjE,EAAc,CAAAuE,SACV9C,GAAiBF,GACd0C,EAAChE,EAAW,CACRuG,UAAU,QACVC,SAAS,QACTpC,QAAS9C,EAAa,aACX,mBACXmF,KAAMzC,EAAC0C,EAAe,CAAA,eAAA,QAKtCnC,EAACtE,EAAsB,CAAAqE,SAAA,CACnBN,EAAC9D,EAAK,CAAAoE,SAAE1B,EAAQa,OAChBc,EAACpE,EAAW,CAAAmE,SAAA,CACRN,EAAA,OAAA,CAAAM,SAEQ1B,EAAQK,MAAM0D,QACTC,GACmB,cAAhBA,EAAK1C,SACXiB,SAEF,IAAG,kBAIlB/D,GAAYK,GAAiBJ,GAC1B2C,EAAChE,EAAW,CACRuG,UAAU,QACVC,SAAS,QACTpC,QAAS/C,eACE,eACXoF,KAAMzC,EAAC6C,EAAgB,CAAA,eAAA,QAlCfjE,EAAQ8C,WA2J5BnB,EAACvD,EAAa,CAACgF,IAAK7D,EAAS8D,SA9OnBC,IACtB,GAAI7D,GAAU8D,SAAWhE,EAAQgE,QAAS,CAEtC,MAAMW,EAAgB,GAChBC,EACF5E,EAAQgE,QAAQa,YAChB7E,EAAQgE,QAAQc,YAChBH,EACEI,EAAoB/E,EAAQgE,QAAQC,WACtCc,EAAoBH,GACpB5E,EAAQgE,QAAQC,WAAaW,EAC7B1E,GAAU8D,QAAQC,WAAaW,GAE/B1E,GAAU8D,QAAQC,WAAac,CAEvC,GA+NmE5C,SAAA,CAEnDN,EAACmD,EAAa,CACVzF,QAASA,EACTC,QAASA,EACTyF,OAAO,OACPnF,eAAgBA,IAnChCsC,EAAC9D,EAAQ,CAAA6F,aAAenF,EAAYgE,OAAMb,SAAA,CAClB,OAAnBrC,GAA2B+B,EAACtD,EAAQ,CAAA2G,KAAOpF,IAC3Cd,EAAYmE,KAAK1C,GACdoB,EAACrD,EAAU,CAAA2D,SACN/B,GAAU+C,KAAKxC,GAAS8B,GAAehC,EAASE,MADpCF,EAAQ8C,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 clsx from \"clsx\";\nimport { useMemo, useRef } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport { Button } from \"../../button\";\nimport { useApplyStyle } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport { DateHelper } from \"../../util/date-helper\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport {\n    calculateSlotOffset,\n    findSlotsStartingInTimeRange,\n    isTimeCellCovered,\n    minutesToTime,\n    ScheduleSlotContent,\n    useInitialScroll,\n    useTimelineOffset,\n} from \"../schedule-slot-content\";\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\ninterface SlotContentItemProps {\n    slot: ScheduleSlotProps;\n    timeSlotStart: string;\n    blockedMessage: string;\n}\n\nconst SlotContentItem = ({\n    slot,\n    timeSlotStart,\n    blockedMessage,\n}: SlotContentItemProps) => {\n    const offsetTop = calculateSlotOffset(slot.startTime, timeSlotStart);\n    const duration = TimeHelper.calculateDuration(slot.startTime, slot.endTime);\n\n    return (\n        <ScheduleSlotContent\n            slot={slot}\n            offsetTop={offsetTop}\n            tokens={styles.tokens.slotContent}\n            classNames={{\n                container: styles.slotContent,\n                blocked: styles.slotContentBlocked,\n                available: styles.slotContentAvailable,\n            }}\n        >\n            {duration >= 15 && (\n                <>\n                    <span className={styles.slotTime}>\n                        {TimeHelper.parseInput(slot.startTime, \"12hr\")}\n                        {\"\\u2013\"} {TimeHelper.parseInput(slot.endTime, \"12hr\")}\n                    </span>\n                    <span className={styles.slotAvailability}>\n                        {slot.status === \"blocked\"\n                            ? blockedMessage\n                            : `${slot.booked} / ${slot.capacity}`}\n                    </span>\n                </>\n            )}\n        </ScheduleSlotContent>\n    );\n};\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 serviceContainerRef = useRef<HTMLDivElement>(null);\n    const slotGridRef = useRef<HTMLDivElement>(null);\n    const timelineRef = useRef<HTMLDivElement>(null);\n    const timeSlots = useMemo(\n        () => TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime),\n        [minTime, maxTime]\n    );\n\n    useApplyStyle(serviceContainerRef, {\n        [styles.tokens.serviceContainer.columnCount]: `${serviceData.length}`,\n    });\n\n    useApplyStyle(slotGridRef, {\n        [styles.tokens.slotGrid.columnCount]: `${serviceData.length}`,\n    });\n\n    useApplyStyle(timelineRef, {\n        [styles.tokens.timeline.top]:\n            timelineOffset === null ? null : `${timelineOffset}px`,\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            <div ref={serviceContainerRef} className={styles.serviceContainer}>\n                {serviceData.map((service) => (\n                    <div key={service.id} className={styles.serviceColumn}>\n                        {isMobile && (\n                            <div className={styles.arrowContainer}>\n                                {showPrevArrow && onPrevService && (\n                                    <Button\n                                        className={styles.arrowButton}\n                                        styleType=\"light\"\n                                        sizeType=\"small\"\n                                        onClick={onPrevService}\n                                        aria-label=\"Previous service\"\n                                        icon={<ChevronLeftIcon aria-hidden />}\n                                    />\n                                )}\n                            </div>\n                        )}\n                        <div className={styles.serviceHeaderContainer}>\n                            <Typography.BodyMD className={styles.title}>\n                                {service.name}\n                            </Typography.BodyMD>\n                            <Typography.BodySM className={styles.description}>\n                                <span>\n                                    {\n                                        service.slots.filter(\n                                            (cell) =>\n                                                cell.status === \"available\"\n                                        ).length\n                                    }\n                                </span>{\" \"}\n                                available\n                            </Typography.BodySM>\n                        </div>\n                        {isMobile && showNextArrow && onNextService && (\n                            <Button\n                                className={styles.arrowButton}\n                                styleType=\"light\"\n                                sizeType=\"small\"\n                                onClick={onNextService}\n                                aria-label=\"Next service\"\n                                icon={<ChevronRightIcon aria-hidden />}\n                            />\n                        )}\n                    </div>\n                ))}\n            </div>\n        );\n    };\n\n    const renderSlotContent = (\n        slot: ScheduleSlotProps,\n        timeSlotStart: string\n    ) => {\n        return (\n            <SlotContentItem\n                slot={slot}\n                timeSlotStart={timeSlotStart}\n                blockedMessage={blockedMessage}\n            />\n        );\n    };\n\n    const getSlotCellClassName = (time: string) =>\n        clsx(styles.slotCell, time.endsWith(\":00\") && styles.slotCellDashed);\n\n    const renderFilledSlotCell = (\n        service: ScheduleEntityProps,\n        time: string,\n        slots: ScheduleSlotProps[]\n    ) => {\n        return (\n            <div key={time} className={getSlotCellClassName(time)}>\n                {slots.map((slot, index) => (\n                    <WithOptionalPopover\n                        key={`${slot.id}-${index}`}\n                        containerRef={containerRef}\n                        customPopover={getPopoverConfig(service, slot, time)}\n                    >\n                        {renderSlotContent(slot, time)}\n                    </WithOptionalPopover>\n                ))}\n            </div>\n        );\n    };\n\n    const renderEmptySlotCell = (\n        service: ScheduleEntityProps,\n        time: string\n    ) => {\n        return (\n            <div\n                key={time}\n                className={getSlotCellClassName(time)}\n                onClick={() => handleEmptySlotClick(time, service.name)}\n                data-testid={`empty-slot-${service.id}-${time}`}\n            >\n                <WithOptionalPopover\n                    containerRef={containerRef}\n                    customPopover={getPopoverConfig(service, undefined, time)}\n                >\n                    <div className={styles.emptySlot} />\n                </WithOptionalPopover>\n            </div>\n        );\n    };\n\n    const renderSlotCell = (service: ScheduleEntityProps, time: string) => {\n        const slots = findSlotsForTimeCell(service, time);\n\n        return slots.length > 0\n            ? renderFilledSlotCell(service, time, slots)\n            : renderEmptySlotCell(service, time);\n    };\n\n    const renderTimeSlotGrid = () => {\n        return (\n            <div ref={slotGridRef} className={styles.slotGrid}>\n                {timelineOffset !== null && (\n                    <div ref={timelineRef} className={styles.timeline} />\n                )}\n                {serviceData.map((service) => (\n                    <div key={service.id} className={styles.slotColumn}>\n                        {timeSlots.map((time) => renderSlotCell(service, time))}\n                    </div>\n                ))}\n            </div>\n        );\n    };\n\n    return (\n        <div className={styles.scheduleContainer}>\n            {loading ? (\n                <div className={styles.loadingContainer}>\n                    <ThemedLoadingSpinner data-testid=\"loading-spinner\" />\n                </div>\n            ) : (\n                <>\n                    {/* Service Name Header Row */}\n                    <div\n                        ref={headerRef}\n                        onScroll={handleHeaderScroll}\n                        className={clsx(\n                            styles.headerContainer,\n                            isMobile && styles.headerContainerMobile\n                        )}\n                    >\n                        <div className={styles.blankCell} />\n                        {renderHeader()}\n                    </div>\n\n                    <div\n                        className={styles.bodyContainer}\n                        ref={bodyRef}\n                        onScroll={handleBodyScroll}\n                    >\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                    </div>\n                </>\n            )}\n        </div>\n    );\n};\n"],"names":["SlotContentItem","slot","timeSlotStart","blockedMessage","offsetTop","calculateSlotOffset","startTime","duration","TimeHelper","calculateDuration","endTime","_jsx","ScheduleSlotContent","tokens","styles.tokens","slotContent","classNames","container","styles.slotContent","blocked","styles.slotContentBlocked","available","styles.slotContentAvailable","children","_jsxs","_Fragment","className","styles.slotTime","parseInput","styles.slotAvailability","status","booked","capacity","ScheduleDayView","serviceData","isMobile","onNextService","onPrevService","onEmptySlotClick","showPrevArrow","showNextArrow","minTime","maxTime","initialScrollTime","containerRef","loading","emptySlotPopover","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","headerRef","useRef","serviceContainerRef","slotGridRef","timelineRef","timeSlots","useMemo","generateTimings","useApplyStyle","serviceContainer","columnCount","length","slotGrid","timeline","top","getPopoverConfig","service","time","customPopover","timeSlot","slots","isTimeCellCovered","isServiceTimeSlotCovered","emptySlotData","DateHelper","addMinutesToTime","name","renderSlotContent","getSlotCellClassName","clsx","styles.slotCell","endsWith","styles.slotCellDashed","renderEmptySlotCell","onClick","serviceName","endTimeString","handleEmptySlotClick","id","WithOptionalPopover","undefined","styles.emptySlot","renderSlotCell","timeSlotMinutes","timeToMinutes","nextTime","minutesToTime","findSlotsStartingInTimeRange","findSlotsForTimeCell","map","index","renderFilledSlotCell","styles.scheduleContainer","styles.loadingContainer","ThemedLoadingSpinner","ref","onScroll","_e","current","scrollLeft","styles.headerContainer","styles.headerContainerMobile","styles.blankCell","styles.serviceContainer","styles.serviceColumn","styles.arrowContainer","Button","styles.arrowButton","styleType","sizeType","icon","ChevronLeftIcon","styles.serviceHeaderContainer","Typography","BodyMD","styles.title","BodySM","styles.description","filter","cell","ChevronRightIcon","styles.bodyContainer","SCROLL_BUFFER","maxScrollLeft","scrollWidth","clientWidth","currentScrollLeft","TimeIndicator","format","styles.slotGrid","styles.timeline","styles.slotColumn"],"mappings":"qyDA+BA,MAAMA,EAAkB,EACpBC,OACAC,gBACAC,qBAEA,MAAMC,EAAYC,EAAoBJ,EAAKK,UAAWJ,GAChDK,EAAWC,EAAWC,kBAAkBR,EAAKK,UAAWL,EAAKS,SAEnE,OACIC,EAACC,EAAmB,CAChBX,KAAMA,EACNG,UAAWA,EACXS,OAAQC,EAAcC,YACtBC,WAAY,CACRC,UAAWC,EACXC,QAASC,EACTC,UAAWC,GACdC,SAEAhB,GAAY,IACTiB,EAAAC,EAAA,CAAAF,SAAA,CACIC,EAAA,OAAA,CAAME,UAAWC,EAAeJ,SAAA,CAC3Bf,EAAWoB,WAAW3B,EAAKK,UAAW,QACtC,IAAQ,IAAGE,EAAWoB,WAAW3B,EAAKS,QAAS,WAEpDC,EAAA,OAAA,CAAMe,UAAWG,WACI,YAAhB5B,EAAK6B,OACA3B,EACA,GAAGF,EAAK8B,YAAY9B,EAAK+B,iBAIzB,EAIjBC,EAAkB,EAC3BC,cACAC,WACAC,gBACAC,gBACAC,mBACAC,gBACAC,gBACAC,UACAC,UACAC,oBACAC,eACAC,UACAC,oBACA3C,kBAAiB,kBAKjB,MAAM4C,GAAiBC,EAAkBP,EAASC,GAC5CO,GAAUC,EAAiBL,EAASJ,EAASE,GAC7CQ,GAAYC,EAAuB,MACnCC,GAAsBD,EAAuB,MAC7CE,GAAcF,EAAuB,MACrCG,GAAcH,EAAuB,MACrCI,GAAYC,GACd,IAAMjD,EAAWkD,gBAAgB,GAAI,OAAQjB,EAASC,IACtD,CAACD,EAASC,IAGdiB,EAAcN,GAAqB,CAC/B,CAACvC,EAAc8C,iBAAiBC,aAAc,GAAG3B,EAAY4B,WAGjEH,EAAcL,GAAa,CACvB,CAACxC,EAAciD,SAASF,aAAc,GAAG3B,EAAY4B,WAGzDH,EAAcJ,GAAa,CACvB,CAACzC,EAAckD,SAASC,KACD,OAAnBlB,GAA0B,KAAO,GAAGA,SAO5C,MAkEMmB,GAAmB,CACrBC,EACAlE,EACAmE,KAEA,GAAInE,aAAI,EAAJA,EAAMoE,cACN,OAAOpE,EAAKoE,cAEhB,IAjB6B,EAC7BF,EACAG,MAEOH,EAAQI,OACTC,EAAkBL,EAAQI,MAAOD,GAYlCG,CAAyBN,EAASC,IAAStB,GAAkB,CAC9D,MACM4B,EAAgB,CAClBpE,UAAW8D,EACX1D,QAHkBiE,EAAWC,iBAAiBR,EAAM,IAIpDS,KAAMV,EAAQU,MAElB,OAAO/B,GAAiB4B,EAC5B,CAEgB,EA0DdI,GAAoB,CACtB7E,EACAC,IAGIS,EAACX,EAAe,CACZC,KAAMA,EACNC,cAAeA,EACfC,eAAgBA,KAKtB4E,GAAwBX,GAC1BY,EAAKC,EAAiBb,EAAKc,SAAS,QAAUC,GAsB5CC,GAAsB,CACxBjB,EACAC,IAGIzD,EAAA,MAAA,CAEIe,UAAWqD,GAAqBX,GAChCiB,QAAS,IA1LQ,EAACjB,EAAckB,KACxC,GAAIhD,EAAkB,CAClB,MAAMiD,EAAgBZ,EAAWC,iBAAiBR,EAAM,IACxD9B,EAAiB,CACbhC,UAAW8D,EACX1D,QAAS6E,EACTV,KAAMS,GAEd,GAkLuBE,CAAqBpB,EAAMD,EAAQU,MAAK,cAC1C,cAAcV,EAAQsB,MAAMrB,IAAM7C,SAE/CZ,EAAC+E,EAAmB,CAChB9C,aAAcA,EACdyB,cAAeH,GAAiBC,OAASwB,EAAWvB,GAAK7C,SAEzDZ,EAAA,MAAA,CAAKe,UAAWkE,OATfxB,GAeXyB,GAAiB,CAAC1B,EAA8BC,KAClD,MAAMG,EAjKmB,EACzBJ,EACAG,KAEA,IAAKH,EAAQI,MAAO,MAAO,GAC3B,MAAMuB,EAAkBtF,EAAWuF,cAAczB,GAC3C0B,EAAWC,EAAcH,EAAkB,IAQjD,OANcI,EACV/B,EAAQI,MACRD,EACA0B,EAGQ,EAmJEG,CAAqBhC,EAASC,GAE5C,OAAOG,EAAMT,OAAS,EA5CG,EACzBK,EACAC,EACAG,IAGI5D,EAAA,MAAA,CAAgBe,UAAWqD,GAAqBX,GAAK7C,SAChDgD,EAAM6B,KAAI,CAACnG,EAAMoG,IACd1F,EAAC+E,EAAmB,CAEhB9C,aAAcA,EACdyB,cAAeH,GAAiBC,EAASlE,EAAMmE,GAAK7C,SAEnDuD,GAAkB7E,EAAMmE,IAJpB,GAAGnE,EAAKwF,MAAMY,QAHrBjC,GAuCRkC,CAAqBnC,EAASC,EAAMG,GACpCa,GAAoBjB,EAASC,EAAK,EAkB5C,OACIzD,EAAA,MAAA,CAAKe,UAAW6E,EAAwBhF,SACnCsB,EACGlC,EAAA,MAAA,CAAKe,UAAW8E,WACZ7F,EAAC8F,EAAoB,CAAA,cAAa,sBAGtCjF,EAAAC,EAAA,CAAAF,SAAA,CAEIC,EAAA,MAAA,CACIkF,IAAKvD,GACLwD,SA5MQC,IACpBzD,GAAU0D,SAAW5D,GAAQ4D,UAC7B5D,GAAQ4D,QAAQC,WAAa3D,GAAU0D,QAAQC,WACnD,EA0MgBpF,UAAWsD,EACP+B,EACA5E,GAAY6E,aAGhBrG,EAAA,MAAA,CAAKe,UAAWuF,IAlJ5BtG,EAAA,MAAA,CAAK+F,IAAKrD,GAAqB3B,UAAWwF,EAAuB3F,SAC5DW,EAAYkE,KAAKjC,GACd3C,EAAA,MAAA,CAAsBE,UAAWyF,EAAoB5F,SAAA,CAChDY,GACGxB,SAAKe,UAAW0F,WACX7E,GAAiBF,GACd1B,EAAC0G,GACG3F,UAAW4F,EACXC,UAAU,QACVC,SAAS,QACTnC,QAAShD,eACE,mBACXoF,KAAM9G,EAAC+G,EAAe,CAAA,eAAA,QAKtClG,EAAA,MAAA,CAAKE,UAAWiG,EAA6BpG,SAAA,CACzCZ,EAACiH,EAAWC,QAAOnG,UAAWoG,EAAYvG,SACrC4C,EAAQU,OAEbrD,EAACoG,EAAWG,OAAM,CAACrG,UAAWsG,EAAkBzG,SAAA,CAC5CZ,mBAEQwD,EAAQI,MAAM0D,QACTC,GACmB,cAAhBA,EAAKpG,SACXgC,SAEF,IAAG,kBAIlB3B,GAAYK,GAAiBJ,GAC1BzB,EAAC0G,GACG3F,UAAW4F,EACXC,UAAU,QACVC,SAAS,QACTnC,QAASjD,eACE,eACXqF,KAAM9G,EAACwH,EAAgB,CAAA,eAAA,QAtCzBhE,EAAQsB,WAoJlBjE,EAAA,MAAA,CACIE,UAAW0G,EACX1B,IAAKzD,GACL0D,SA1OMC,IACtB,GAAIzD,GAAU0D,SAAW5D,GAAQ4D,QAAS,CAEtC,MAAMwB,EAAgB,GAChBC,EACFrF,GAAQ4D,QAAQ0B,YAChBtF,GAAQ4D,QAAQ2B,YAChBH,EACEI,EAAoBxF,GAAQ4D,QAAQC,WACtC2B,EAAoBH,GACpBrF,GAAQ4D,QAAQC,WAAawB,EAC7BnF,GAAU0D,QAAQC,WAAawB,GAE/BnF,GAAU0D,QAAQC,WAAa2B,CAEvC,GA2N0ClH,SAAA,CAG1BZ,EAAC+H,EAAa,CACVjG,QAASA,EACTC,QAASA,EACTiG,OAAO,OACP5F,eAAgBA,KA5ChCvB,EAAA,MAAA,CAAKkF,IAAKpD,GAAa5B,UAAWkH,EAAerH,SAAA,CACzB,OAAnBwB,IACGpC,EAAA,MAAA,CAAK+F,IAAKnD,GAAa7B,UAAWmH,IAErC3G,EAAYkE,KAAKjC,GACdxD,EAAA,MAAA,CAAsBe,UAAWoH,EAAiBvH,SAC7CiC,GAAU4C,KAAKhC,GAASyB,GAAe1B,EAASC,MAD3CD,EAAQsB,gBA8CxB"}

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

@@ -1,99 +1,39 @@
-interface HeaderContainerStyleProps {
-    $isMobile: boolean;
-}
-interface ServiceContainerStyleProps {
-    $columnCount: number;
-}
-interface SlotGridStyleProps {
-    $columnCount: number;
-}
-interface SlotCellStyleProps {
-    $dashed?: boolean;
-}
-interface SlotContentStyleProps {
-    $status?: string;
-    $duration?: number;
-    $offsetTop?: number;
-}
-interface TimelineStyleProps {
-    $top: number;
-}
-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 {};
+export declare const tokens: {
+    serviceContainer: {
+        columnCount: string;
+    };
+    slotGrid: {
+        columnCount: string;
+    };
+    slotContent: {
+        offsetTop: string;
+        height: string;
+    };
+    timeline: {
+        top: string;
+    };
+};
+export declare const arrowButton: import("@linaria/core").LinariaClassName;
+export declare const arrowContainer: import("@linaria/core").LinariaClassName;
+export declare const scheduleContainer: import("@linaria/core").LinariaClassName;
+export declare const loadingContainer: import("@linaria/core").LinariaClassName;
+export declare const headerContainer: import("@linaria/core").LinariaClassName;
+export declare const headerContainerMobile: import("@linaria/core").LinariaClassName;
+export declare const blankCell: import("@linaria/core").LinariaClassName;
+export declare const serviceContainer: import("@linaria/core").LinariaClassName;
+export declare const serviceColumn: import("@linaria/core").LinariaClassName;
+export declare const serviceHeaderContainer: import("@linaria/core").LinariaClassName;
+export declare const title: import("@linaria/core").LinariaClassName;
+export declare const description: import("@linaria/core").LinariaClassName;
+export declare const bodyContainer: import("@linaria/core").LinariaClassName;
+export declare const slotGrid: import("@linaria/core").LinariaClassName;
+export declare const slotColumn: import("@linaria/core").LinariaClassName;
+export declare const slotCell: import("@linaria/core").LinariaClassName;
+export declare const slotCellDashed: import("@linaria/core").LinariaClassName;
+export declare const slotContent: import("@linaria/core").LinariaClassName;
+export declare const slotContentBlocked: import("@linaria/core").LinariaClassName;
+export declare const slotContentAvailable: import("@linaria/core").LinariaClassName;
+export declare const slotTime: import("@linaria/core").LinariaClassName;
+export declare const slotAvailability: import("@linaria/core").LinariaClassName;
+export declare const timeline: import("@linaria/core").LinariaClassName;
+export declare const emptySlot: import("@linaria/core").LinariaClassName;

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

@@ -1,153 +1,2 @@
-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=e.div`
-    width: 2rem;
-`,m=e.div`
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-`,u=e.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 25rem;
-    height: 100%;
-    border: ${n["width-010"]} ${n.solid} ${d.border};
-    border-radius: ${s.md};
-    background: ${d.bg};
-`,x=e.div`
-    z-index: 3;
-    max-height: ${p}px;
-    border-top-right-radius: ${s.md};
-    border-top-left-radius: ${s.md};
-    position: sticky;
-    border: ${n["width-010"]} ${n.solid} ${d.border};
-    overflow-x: hidden;
-    overflow-y: hidden;
-
-    ${e=>e.$isMobile?i`
-                  display: block;
-                  overflow: hidden;
-              `:i`
-                  display: grid;
-                  grid-template-columns: ${$}px 1fr;
-              `}
-`,f=e.div`
-    min-width: ${$}px;
-    background: ${d["bg-strong"]};
-    position: sticky;
-    left: 0;
-`,w=e.div`
-    display: grid;
-    grid-template-columns: repeat(${e=>e.$columnCount}, 1fr);
-`,v=e.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    min-width: ${g}px;
-    padding: ${a["spacing-16"]} ${a["spacing-8"]};
-    background: ${d["bg-strong"]};
-    border-right: ${n["width-010"]} ${n.solid}
-        ${d.border};
-    &:last-child {
-        border-right: none;
-    }
-`,y=e.div`
-    width: 15rem;
-    padding-left: ${a["spacing-16"]};
-`,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=e(r.BodySM)`
-    margin-top: ${a["spacing-8"]};
-    background-color: ${d["bg-success-hover"]};
-    border-radius: ${s.full};
-    width: fit-content;
-    padding: ${a["spacing-4"]} ${a["spacing-8"]};
-    color: ${d["text-success"]};
-    font-weight: ${l.Spec["weight-regular"]};
-    span {
-        font-weight: ${l.Spec["weight-semibold"]};
-    }
-`,S=e.div`
-    display: grid;
-    grid-template-columns: ${$}px 1fr;
-    width: 100%;
-    overflow-x: auto;
-    overflow-y: auto;
-    flex: 1;
-    height: 100%;
-    border: ${n["width-010"]} ${n.solid} ${d.border};
-    border-top: none;
-    border-bottom-right-radius: ${s.md};
-    border-bottom-left-radius: ${s.md};
-`,z=e.div`
-    display: grid;
-    grid-template-columns: repeat(${e=>e.$columnCount}, 1fr);
-    min-width: max-content;
-    position: relative;
-`,B=e.div`
-    display: flex;
-    flex-direction: column;
-    min-width: ${g}px;
-    min-height: fit-content;
-    border-right: ${n["width-010"]} ${n.solid}
-        ${d.border};
-    &:last-child {
-        border-right: none;
-    }
-`,M=e.div`
-    min-height: ${c}px;
-    position: relative;
-    border-bottom: ${n["width-010"]} solid ${d.border};
-    ${e=>e.$dashed&&i`
-            border-bottom-style: dashed;
-        `}
-    cursor: pointer;
-`,C=e(r.BodyXS)`
-    margin-top: 0;
-    overflow: hidden;
-    width: calc(100% - 27px);
-    padding: 2px ${a["spacing-8"]};
-    position: absolute;
-    top: ${e=>e.$offsetTop||0}px;
-    ${l["body-xs-semibold"]};
-    border-radius: ${s.sm};
-    z-index: 1;
-    height: ${e=>e.$duration?e.$duration/30*c-1+"px":c-1+"px"};
-    display: flex;
-    justify-content: space-between;
-    background: ${e=>{switch(e.$status){case"pending":return i`
-                    repeating-linear-gradient(
-                        135deg,
-                        ${d["bg-warning"]},
-                        ${d["bg-warning"]} 5px,
-                        ${d["bg-warning-hover"]} 5px,
-                        ${d["bg-warning-hover"]} 10px
-                    )
-                `;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: ${e=>"blocked"===e.$status?d["text-inverse"]:d["text-subtle"]};
-
-    border-left: ${n["width-040"]} solid
-        ${e=>"available"===e.$status?d["icon-success"]:"none"};
-`,D=e.span`
-    ${l["body-xs-regular"]};
-`,T=e.span`
-    ${l["body-xs-semibold"]};
-`,X=e.div`
-    position: absolute;
-    width: 100%;
-    height: 2px;
-    background: ${d["icon-primary"]};
-    top: ${e=>e.$top}px;
-    z-index: 2;
-`,_=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};
+import"./schedule-day-view.styles_8ti149.css";const e={serviceContainer:{columnCount:"--fds-internal-scheduleDayView-serviceContainer-columnCount"},slotGrid:{columnCount:"--fds-internal-scheduleDayView-slotGrid-columnCount"},slotContent:{offsetTop:"--fds-internal-scheduleDayView-slotContent-offsetTop",height:"--fds-internal-scheduleDayView-slotContent-height"},timeline:{top:"--fds-internal-scheduleDayView-timeline-top"}},s="a1gk5ipc",t="ac6jj8s",n="syko8xg",o="lfazoz2",i="h7zv0mp",l="h189uqeu",d="bcdvy5w",c="s1shiknn",u="s16mh3td",a="surbskl",h="t1vhhu8o",r="d1s1gqx7",y="b10f0jd9",f="ssw76ta",m="s1ftjtjk",w="s1m5etm4",C="s5nw100",p="s1kbe3yg",k="s1c4k21e",v="s4ebyxx",x="s1cpyxi3",g="s2as1da",b="t42sdto",j="e1xn1uhc";export{s as arrowButton,t as arrowContainer,d as blankCell,y as bodyContainer,r as description,j as emptySlot,i as headerContainer,l as headerContainerMobile,o as loadingContainer,n as scheduleContainer,u as serviceColumn,c as serviceContainer,a as serviceHeaderContainer,g as slotAvailability,w as slotCell,C as slotCellDashed,m as slotColumn,p as slotContent,v as slotContentAvailable,k as slotContentBlocked,f as slotGrid,x as slotTime,b as timeline,h as title,e as tokens};
 //# sourceMappingURL=schedule-day-view.styles.js.map

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 { 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;"}
+{"version":3,"file":"schedule-day-view.styles.js","sources":["../../../src/schedule/schedule-day-view/schedule-day-view.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../../theme\";\nimport {\n    CELL_HEIGHT,\n    HEADER_HEIGHT,\n    MIN_COLUMN_WIDTH,\n    TIME_INDICATOR_WIDTH,\n} from \"../const\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const tokens = {\n    serviceContainer: {\n        columnCount:\n            \"--fds-internal-scheduleDayView-serviceContainer-columnCount\",\n    },\n    slotGrid: {\n        columnCount: \"--fds-internal-scheduleDayView-slotGrid-columnCount\",\n    },\n    slotContent: {\n        offsetTop: \"--fds-internal-scheduleDayView-slotContent-offsetTop\",\n        height: \"--fds-internal-scheduleDayView-slotContent-height\",\n    },\n    timeline: {\n        top: \"--fds-internal-scheduleDayView-timeline-top\",\n    },\n};\n\nexport const arrowButton = css`\n    color: ${Colour[\"icon\"]};\n`;\nexport const arrowContainer = css`\n    width: 2rem;\n`;\n\nexport const scheduleContainer = css`\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n`;\n\nexport const loadingContainer = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 25rem;\n    height: 100%;\n    border: ${Border[\"width-010\"]} ${Border.solid} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"md\"]};\n    background: ${Colour[\"bg\"]};\n`;\n\nexport const headerContainer = css`\n    z-index: 3;\n    max-height: ${HEADER_HEIGHT}px;\n    border-top-right-radius: ${Radius[\"md\"]};\n    border-top-left-radius: ${Radius[\"md\"]};\n    position: sticky;\n    border: ${Border[\"width-010\"]} ${Border.solid} ${Colour[\"border\"]};\n    overflow-x: hidden;\n    overflow-y: hidden;\n    display: grid;\n    grid-template-columns: ${TIME_INDICATOR_WIDTH}px 1fr;\n`;\n\nexport const headerContainerMobile = css`\n    display: block;\n    overflow: hidden;\n`;\n\nexport const blankCell = css`\n    min-width: ${TIME_INDICATOR_WIDTH}px;\n    background: ${Colour[\"bg-strong\"]};\n    position: sticky;\n    left: 0;\n`;\nexport const serviceContainer = css`\n    ${tokens.serviceContainer.columnCount}: 1;\n    display: grid;\n    grid-template-columns: repeat(\n        var(${tokens.serviceContainer.columnCount}),\n        1fr\n    );\n`;\n\nexport const serviceColumn = css`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    min-width: ${MIN_COLUMN_WIDTH}px;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-8\"]};\n    background: ${Colour[\"bg-strong\"]};\n    border-right: ${Border[\"width-010\"]} ${Border.solid} ${Colour[\"border\"]};\n    &:last-child {\n        border-right: none;\n    }\n`;\n\nexport const serviceHeaderContainer = css`\n    width: 15rem;\n    padding-left: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const title = css`\n    color: ${Colour[\"text-primary\"]};\n    font-weight: ${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 = css`\n    margin-top: ${Spacing[\"spacing-8\"]};\n    background-color: ${Colour[\"bg-success-hover\"]};\n    border-radius: ${Radius[\"full\"]};\n    width: fit-content;\n    padding: ${Spacing[\"spacing-4\"]} ${Spacing[\"spacing-8\"]};\n    color: ${Colour[\"text-success\"]};\n    font-weight: ${Font.Spec[\"weight-regular\"]};\n    span {\n        font-weight: ${Font.Spec[\"weight-semibold\"]};\n    }\n`;\n\nexport const bodyContainer = css`\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: ${Border[\"width-010\"]} ${Border.solid} ${Colour[\"border\"]};\n    border-top: none;\n    border-bottom-right-radius: ${Radius[\"md\"]};\n    border-bottom-left-radius: ${Radius[\"md\"]};\n`;\n\nexport const slotGrid = css`\n    ${tokens.slotGrid.columnCount}: 1;\n    display: grid;\n    grid-template-columns: repeat(var(${tokens.slotGrid.columnCount}), 1fr);\n    min-width: max-content;\n    position: relative;\n`;\n\nexport const slotColumn = css`\n    display: flex;\n    flex-direction: column;\n    min-width: ${MIN_COLUMN_WIDTH}px;\n    min-height: fit-content;\n    border-right: ${Border[\"width-010\"]} ${Border.solid} ${Colour[\"border\"]};\n    &:last-child {\n        border-right: none;\n    }\n`;\n\nexport const slotCell = css`\n    min-height: ${CELL_HEIGHT}px;\n    position: relative;\n    border-bottom: ${Border[\"width-010\"]} solid ${Colour[\"border\"]};\n    cursor: pointer;\n    background: none;\n    width: 100%;\n    padding: 0;\n    text-align: left;\n`;\n\nexport const slotCellDashed = css`\n    border-bottom-style: dashed;\n`;\n\nexport const slotContent = css`\n    ${tokens.slotContent.offsetTop}: 0px;\n    ${tokens.slotContent.height}: ${CELL_HEIGHT - 1}px;\n    margin-top: 0;\n    overflow: hidden;\n    width: calc(100% - 27px);\n    padding: 2px ${Spacing[\"spacing-8\"]};\n    position: absolute;\n    top: var(${tokens.slotContent.offsetTop});\n    ${Font[\"body-xs-semibold\"]};\n    border-radius: ${Radius[\"sm\"]};\n    z-index: 1;\n    height: var(${tokens.slotContent.height});\n    display: flex;\n    justify-content: space-between;\n    color: ${Colour[\"text-subtle\"]};\n`;\n\nexport const slotContentBlocked = css`\n    color: ${Colour[\"text-inverse\"]};\n`;\n\nexport const slotContentAvailable = css`\n    border-left: ${Border[\"width-040\"]} solid ${Colour[\"icon-success\"]};\n`;\n\nexport const slotTime = css`\n    ${Font[\"body-xs-regular\"]};\n`;\n\nexport const slotAvailability = css`\n    ${Font[\"body-xs-semibold\"]};\n`;\n\nexport const timeline = css`\n    ${tokens.timeline.top}: 0px;\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    background: ${Colour[\"icon-primary\"]};\n    top: var(${tokens.timeline.top});\n    z-index: 2;\n`;\n\nexport const emptySlot = css`\n    width: 100%;\n    height: ${CELL_HEIGHT - 1}px;\n`;\n"],"names":["tokens","serviceContainer","columnCount","slotGrid","slotContent","offsetTop","height","timeline","top","arrowButton","arrowContainer","scheduleContainer","loadingContainer","headerContainer","headerContainerMobile","blankCell","serviceColumn","serviceHeaderContainer","title","description","bodyContainer","slotColumn","slotCell","slotCellDashed","slotContentBlocked","slotContentAvailable","slotTime","slotAvailability","emptySlot"],"mappings":"wFAcO,MAAMA,EAAS,CAClBC,iBAAkB,CACdC,YACI,+DAERC,SAAU,CACND,YAAa,uDAEjBE,YAAa,CACTC,UAAW,uDACXC,OAAQ,qDAEZC,SAAU,CACNC,IAAK,gDAIAC,EAAW,WAGXC,EAAc,UAIdC,EAAiB,UAMjBC,EAAgB,UAWhBC,EAAe,UAafC,EAAqB,WAKrBC,EAAS,UAMTd,EAAgB,WAShBe,EAAa,WAabC,EAAsB,UAKtBC,EAAK,WASLC,EAAW,WAaXC,EAAa,WAcbjB,EAAQ,UAQRkB,EAAU,WAWVC,EAAQ,WAWRC,EAAc,UAIdnB,EAAW,WAkBXoB,EAAkB,WAIlBC,EAAoB,UAIpBC,EAAQ,WAIRC,EAAgB,UAIhBpB,EAAQ,UAURqB,EAAS"}

package/schedule/schedule-day-view/schedule-day-view.styles_8ti149.css

@@ -0,0 +1,30 @@
+.a1gk5ipc{color:var(--fds-colour-icon);}
+.ac6jj8s{width:2rem;}
+.syko8xg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;}
+.lfazoz2{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;min-height:25rem;height:100%;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-md);background:var(--fds-colour-bg);}
+.h7zv0mp{z-index:3;max-height:130px;border-top-right-radius:var(--fds-radius-md);border-top-left-radius:var(--fds-radius-md);position:-webkit-sticky;position:sticky;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);overflow-x:hidden;overflow-y:hidden;display:-ms-grid;display:grid;-ms-grid-columns:42px 1fr;grid-template-columns:42px 1fr;}
+.h189uqeu{display:block;overflow:hidden;}
+.bcdvy5w{min-width:42px;background:var(--fds-colour-bg-strong);position:-webkit-sticky;position:sticky;left:0;}
+.s1shiknn{--fds-internal-scheduleDayView-serviceContainer-columnCount:1;display:-ms-grid;display:grid;-ms-grid-columns:repeat(
+        var(--fds-internal-scheduleDayView-serviceContainer-columnCount),
+        1fr
+    );grid-template-columns:repeat(
+        var(--fds-internal-scheduleDayView-serviceContainer-columnCount),
+        1fr
+    );}
+.s16mh3td{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:280px;padding:var(--fds-spacing-16) var(--fds-spacing-8);background:var(--fds-colour-bg-strong);border-right:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.s16mh3td:last-child{border-right:none;}
+.surbskl{width:15rem;padding-left:var(--fds-spacing-16);}
+.t1vhhu8o{color:var(--fds-colour-text-primary);font-weight:var(--fds-font-weight-semibold);margin-top:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;}
+.d1s1gqx7{margin-top:var(--fds-spacing-8);background-color:var(--fds-colour-bg-success-hover);border-radius:var(--fds-radius-full);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:var(--fds-spacing-4) var(--fds-spacing-8);color:var(--fds-colour-text-success);font-weight:var(--fds-font-weight-regular);}.d1s1gqx7 span{font-weight:var(--fds-font-weight-semibold);}
+.b10f0jd9{display:-ms-grid;display:grid;-ms-grid-columns:42px 1fr;grid-template-columns:42px 1fr;width:100%;overflow-x:auto;overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;height:100%;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-top:none;border-bottom-right-radius:var(--fds-radius-md);border-bottom-left-radius:var(--fds-radius-md);}
+.ssw76ta{--fds-internal-scheduleDayView-slotGrid-columnCount:1;display:-ms-grid;display:grid;-ms-grid-columns:repeat(var(--fds-internal-scheduleDayView-slotGrid-columnCount), 1fr);grid-template-columns:repeat(var(--fds-internal-scheduleDayView-slotGrid-columnCount), 1fr);min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;position:relative;}
+.s1ftjtjk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-width:280px;min-height:-webkit-fit-content;min-height:-moz-fit-content;min-height:fit-content;border-right:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.s1ftjtjk:last-child{border-right:none;}
+.s1m5etm4{min-height:48px;position:relative;border-bottom:var(--fds-border-width-010) solid var(--fds-colour-border);cursor:pointer;background:none;width:100%;padding:0;text-align:left;}
+.s5nw100{border-bottom-style:dashed;}
+.s1kbe3yg{--fds-internal-scheduleDayView-slotContent-offsetTop:0px;--fds-internal-scheduleDayView-slotContent-height:47px;margin-top:0;overflow:hidden;width:calc(100% - 27px);padding:2px var(--fds-spacing-8);position:absolute;top:var(--fds-internal-scheduleDayView-slotContent-offsetTop);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);border-radius:var(--fds-radius-sm);z-index:1;height:var(--fds-internal-scheduleDayView-slotContent-height);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;color:var(--fds-colour-text-subtle);}
+.s1c4k21e{color:var(--fds-colour-text-inverse);}
+.s4ebyxx{border-left:var(--fds-border-width-040) solid var(--fds-colour-icon-success);}
+.s1cpyxi3{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);}
+.s2as1da{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);}
+.t42sdto{--fds-internal-scheduleDayView-timeline-top:0px;position:absolute;width:100%;height:2px;background:var(--fds-colour-icon-primary);top:var(--fds-internal-scheduleDayView-timeline-top);z-index:2;}
+.e1xn1uhc{width:100%;height:47px;}

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

@@ -1,19 +1,11 @@
-import type { RefObject } from "react";
-import type { ScheduleEmptySlotProps, ScheduleEntityProps, SchedulePopoverProps } from "../types";
-export interface ScheduleDayViewProps {
-    date: string;
+import type { CommonScheduleViewProps, ScheduleEmptySlotProps, ScheduleEntityProps, SchedulePopoverProps } from "../types";
+export interface ScheduleDayViewProps extends CommonScheduleViewProps {
     serviceData: ScheduleEntityProps[];
-    loading: boolean;
-    minTime: string;
-    maxTime: string;
-    initialScrollTime?: string | undefined;
     isMobile: boolean;
-    containerRef: RefObject<HTMLDivElement>;
     onNextService?: () => void | undefined;
     onPrevService?: () => void | undefined;
     onEmptySlotClick?: (slot: ScheduleEmptySlotProps) => void | undefined;
     showPrevArrow: boolean;
     showNextArrow: boolean;
     emptySlotPopover?: ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps) | undefined;
-    blockedMessage?: string | undefined;
 }