@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

package/cjs/timetable/timetable-row/with-optional-popover.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("../../_virtual/_tslib.js"),require("react"),require("styled-components"),require("../../theme/index.js"),require("../../typography/typography.js"),require("../../popover-v2/popover.styles.js"),require("../../modal-v2/index.js");var r=require("../../popover-v2/popover-trigger.js");require("../../popover-v2/popover-inline/popover-inline.styles.js");exports.WithOptionalPopover=({children:o,customPopover:t})=>{if(!t)return o;const i={position:"bottom-start",customOffset:t.offset,children:o,trigger:t.trigger,delay:t.delay,popoverContent:t.content};return e.jsx(r.PopoverTrigger,Object.assign({},i))};
+"use strict";var e=require("react/jsx-runtime");require("../../_virtual/_tslib.js"),require("clsx"),require("react"),require("../../theme/theme-provider/context.js"),require("../../typography/typography.js"),require("../../card/card.styles_1gh9gs3.css"),require("../../markup/markup.js"),require("../../modal-v2/modal-v2.js"),require("../../theme/theme-provider/index.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer"),require("../../theme/utils/use-media-query.js"),require("../../popover/popover.styles_ujnf0h.css");var r=require("../../popover/popover-trigger.js");require("../../popover/popover-inline/popover-inline.styles_bkopnt.css");exports.WithOptionalPopover=({children:t,customPopover:i})=>{if(!i)return t;const s={position:"bottom-start",customOffset:i.offset,children:t,trigger:i.trigger,delay:i.delay,popoverContent:i.content};return e.jsx(r.PopoverTrigger,Object.assign({},s))};
 //# sourceMappingURL=with-optional-popover.js.map

package/cjs/timetable/timetable-row/with-optional-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"with-optional-popover.js","sources":["../../../../src/timetable/timetable-row/with-optional-popover.tsx"],"sourcesContent":["import { PopoverTrigger, PopoverV2TriggerProps } from \"../../popover-v2\";\nimport { TimeTablePopoverProps } from \"../types\";\n\ninterface ConditionalCellWrapperProps {\n    children: JSX.Element;\n    customPopover?: TimeTablePopoverProps | undefined;\n}\n\nexport const WithOptionalPopover = ({\n    children,\n    customPopover,\n}: ConditionalCellWrapperProps) => {\n    if (!customPopover) {\n        return children;\n    }\n\n    const popoverTriggerProps: PopoverV2TriggerProps = {\n        position: \"bottom-start\",\n        customOffset: customPopover.offset,\n        children: children,\n        trigger: customPopover.trigger,\n        delay: customPopover.delay,\n        popoverContent: customPopover.content,\n    };\n\n    return <PopoverTrigger {...popoverTriggerProps} />;\n};\n"],"names":["children","customPopover","popoverTriggerProps","position","customOffset","offset","trigger","delay","popoverContent","content","_jsx","PopoverTrigger","Object","assign"],"mappings":"kbAQmC,EAC/BA,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA6C,CAC/CC,SAAU,eACVC,aAAcH,EAAcI,OAC5BL,SAAUA,EACVM,QAASL,EAAcK,QACvBC,MAAON,EAAcM,MACrBC,eAAgBP,EAAcQ,SAGlC,OAAOC,EAAAA,IAACC,EAAAA,eAAcC,OAAAC,OAAA,CAAA,EAAKX,GAAuB"}
+{"version":3,"file":"with-optional-popover.js","sources":["../../../../src/timetable/timetable-row/with-optional-popover.tsx"],"sourcesContent":["import type { PopoverTriggerProps } from \"../../popover\";\nimport { PopoverTrigger } from \"../../popover\";\nimport type { TimeTablePopoverProps } from \"../types\";\n\ninterface ConditionalCellWrapperProps {\n    children: JSX.Element;\n    customPopover?: TimeTablePopoverProps | undefined;\n}\n\nexport const WithOptionalPopover = ({\n    children,\n    customPopover,\n}: ConditionalCellWrapperProps) => {\n    if (!customPopover) {\n        return children;\n    }\n\n    const popoverTriggerProps: PopoverTriggerProps = {\n        position: \"bottom-start\",\n        customOffset: customPopover.offset,\n        children: children,\n        trigger: customPopover.trigger,\n        delay: customPopover.delay,\n        popoverContent: customPopover.content,\n    };\n\n    return <PopoverTrigger {...popoverTriggerProps} />;\n};\n"],"names":["children","customPopover","popoverTriggerProps","position","customOffset","offset","trigger","delay","popoverContent","content","_jsx","PopoverTrigger","Object","assign"],"mappings":"mgCASmC,EAC/BA,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA2C,CAC7CC,SAAU,eACVC,aAAcH,EAAcI,OAC5BL,SAAUA,EACVM,QAASL,EAAcK,QACvBC,MAAON,EAAcM,MACrBC,eAAgBP,EAAcQ,SAGlC,OAAOC,EAAAA,IAACC,EAAAA,eAAcC,OAAAC,OAAA,CAAA,EAAKX,GAAuB"}

package/cjs/timetable/timetable.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),a=require("../external/dayjs/dayjs.min.js"),o=require("../external/lodash/lodash.js"),i=require("../external/react-resize-detector/build/index.esm.js"),l=require("../shared/accessibility/index.js"),n=require("../util/time-helper.js"),s=require("./const.js"),d=require("./timetable-header/timetable-header.js"),c=require("./timetable-row/row-bar.js"),m=require("./timetable.style.js");const u=t.forwardRef(((u,h)=>{const{date:x,emptyContentMessage:T,rowData:R,loading:b,minTime:w="00:00",maxTime:C="23:00",initialScrollTime:j,minDate:f,maxDate:g,totalRecords:p,showCurrentDateAsToday:y,showDateAsShortForm:D,onPage:H,onRefresh:v,onNextDayClick:E,onPreviousDayClick:S,onCalendarDateSelect:$,roundInitialScrollTime:_=!0}=u,L=e.__rest(u,["date","emptyContentMessage","rowData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","totalRecords","showCurrentDateAsToday","showDateAsShortForm","onPage","onRefresh","onNextDayClick","onPreviousDayClick","onCalendarDateSelect","roundInitialScrollTime"]),N=L["data-testid"]||"timetable",O=n.TimeHelper.roundToNearestInterval(w,60),I=n.TimeHelper.roundToNearestInterval(C,60,!0),A=n.TimeHelper.generateHourlyIntervals(O,I),k=Math.ceil(60*A.length/s.ROW_INTERVAL),W=`Timetable of resource availability, for ${a.default(x).format("D MMMM YYYY")}, from ${a.default(O,"HH:mm").format("ha")} to ${a.default(I,"HH:mm").format("ha")}`,M=(p||R.length)+1,P=k+1,q=0===p||o.lodashExports.isEmpty(R),B=q||R.length===p,F=t.useRef(null),V=t.useRef(null),[z,Y]=t.useState(!1),[Q,U]=t.useState(!1),[X,G]=t.useState(0),[J,K]=t.useState(!1);t.useImperativeHandle(h,(()=>({resetScroll:re}))),t.useEffect((()=>{const e=o.lodashExports.throttle((()=>{if(F.current&&(Y(F.current.scrollLeft>0),U(F.current.scrollTop>0)),J||!F.current)return;const{scrollTop:e,clientHeight:r,scrollHeight:t}=F.current;Math.ceil(e+r)>=t-1&&!B&&H&&!b&&(K(!0),H())}),100),r=F.current;return r&&r.addEventListener("scroll",e),()=>{r&&r.removeEventListener("scroll",e)}}),[B,J,b,H]),t.useEffect((()=>{K(!1)}),[R]),t.useEffect((()=>{re()}),[j,X,O,I]);i.useResizeDetector({onResize:()=>{if(F.current){const e=Math.ceil(60*A.length/s.ROW_INTERVAL),r=(F.current.clientWidth-s.ROW_HEADER_WIDTH)/e,t=r>s.MIN_INTERVAL_WIDTH?r:s.MIN_INTERVAL_WIDTH;G(t)}},targetRef:F,refreshMode:"debounce",refreshRate:50});const Z=(()=>{let e=0;const r=s.ROW_BAR_COLOR_SEQUENCE.length;return()=>{const t=s.ROW_BAR_COLOR_SEQUENCE[e],a=s.ROW_BAR_COLOR_ALTERNATE_COLOR[e];return e=(e+1)%r,{mainColor:t,alternateColor:a}}})(),ee=(e,r)=>{if(!e.rowHeaderPopover)return r;const a={position:"bottom-start",customOffset:e.rowHeaderPopover.offset,children:r,trigger:e.rowHeaderPopover.trigger,delay:e.rowHeaderPopover.delay,popoverContent:e.rowHeaderPopover.content};return t.createElement(m.StyledPopoverTrigger,Object.assign({},a,{key:`${e.id}-popover-trigger`,zIndex:2}),r)},re=()=>{if(j&&F.current&&X>0){const e=n.TimeHelper.calculateScrollPosition({scrollTime:j,minTime:O,maxTime:I,interval:s.ROW_INTERVAL,intervalWidth:X,options:{roundToInterval:_}});null!==e&&(F.current.scrollLeft=e)}},te=e=>{const t=r.jsxs(r.Fragment,{children:[r.jsx(m.ClickableRowHeaderTitle,{$isClickable:!!e.onRowNameClick,onClick:r=>((e,r)=>{e.onRowNameClick&&e.onRowNameClick(e,r)})(e,r),weight:"semibold","data-testid":`${e.id}-row-header-title`,children:e.name}),r.jsx(m.RowHeaderSubtitle,{weight:"bold",$show:!!e.subtitle,"data-testid":`${e.id}-row-header-subtitle`,children:e.subtitle})]});return r.jsx(m.RowHeader,{$isScrolled:z,role:"rowheader","aria-colindex":1,children:ee(e,t)},`${e.id}-row-header`)},ae=()=>{if(!b&&J)return r.jsxs(m.TimeTableRow,{children:[r.jsx(m.RowHeader,{$isScrolled:z,children:r.jsx(m.LoadingBar,{})}),r.jsx(m.LoadingWrapper,{"data-testid":"lazy-loader",role:"presentation",children:A.map(((e,t)=>r.jsx(m.LoadingCell,{$width:4*X,children:r.jsx(m.LoadingBar,{})},`lazy-load-cell-${t}`)))})]})};return q?r.jsxs(m.Container,Object.assign({},L,{"data-testid":N,children:[r.jsx(d.TimeTableHeader,{selectedDate:x,loading:b||J,tableContainerRef:F,minDate:f,maxDate:g,totalRecords:p,showCurrentDateAsToday:y,showDateAsShortForm:D,onPreviousDayClick:S,onNextDayClick:E,onRefresh:v,onCalendarDateSelect:$}),r.jsx(m.EmptyTableContainer,{className:"empty-container",tabIndex:0,"aria-live":"polite","aria-atomic":!0,"aria-busy":b,children:b?r.jsxs(r.Fragment,{children:[r.jsx(l.VisuallyHidden,{children:`Loading ${W}`}),r.jsx(m.Loader,{$isEmptyContent:q})]}):r.jsx(m.NoResultsFound,{type:"no-item-found",description:T})})]})):r.jsxs(m.Container,Object.assign({},L,{"data-testid":N,children:[r.jsx(d.TimeTableHeader,{"data-id":"timetable-date-navigator",selectedDate:x,loading:b||J,tableContainerRef:F,minDate:f,maxDate:g,totalRecords:p,showCurrentDateAsToday:y,showDateAsShortForm:D,onPreviousDayClick:S,onNextDayClick:E,onRefresh:v,onCalendarDateSelect:$}),r.jsxs(m.TimeTableContainer,{"data-id":"timetable-container","data-testid":"timetable-container",ref:F,$loading:b,$allRecordsLoaded:B||!H,role:"grid","aria-label":W,"aria-rowcount":M,"aria-colcount":P,"aria-busy":J,tabIndex:0,children:[r.jsxs(m.TimeTableHeaderRow,{role:"row","aria-rowindex":1,"data-testid":"row-header-column-id",children:[r.jsx(m.RowColumnHeader,{$isScrolledY:Q,$isScrolledX:z,role:"columnheader","aria-colindex":1,children:r.jsx(l.VisuallyHidden,{children:"Resource"})}),r.jsx(m.ColumnHeaderRow,{$numOfColumns:A.length,$intervalWidth:X,$isScrolled:Q,role:"presentation",children:A.map((e=>r.jsx(m.ColumnHeader,{"data-testid":`${e}-column`,children:r.jsx(m.ColumnHeaderTitle,{weight:"semibold",children:e})},`${e}-column-key`)))})]}),b?r.jsx(m.Loader,{$isEmptyContent:q}):r.jsxs(m.TimeTableBody,{"data-testid":"content-container-id",ref:V,role:"rowgroup",children:[R.map(((e,t)=>r.jsxs(m.TimeTableRow,{role:"row","aria-rowindex":t+2,"aria-label":e.name,children:[te(e),r.jsx(c.RowBar,Object.assign({timetableMinTime:O,timetableMaxTime:I,rowBarColor:Z(),intervalWidth:X,containerRef:V},e),`${t}-row-bar`)]},`${t}-timetable-row`))),ae()]})]})]}))}));exports.TimeTable=u;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("react"),t=require("clsx"),i=require("../external/dayjs/dayjs.min.js"),o=require("../external/lodash/lodash.js"),l=require("../external/react-resize-detector/build/index.esm.js");require("../animations/loading-dots/loading-dots.js");var n=require("../animations/loading-dots-spinner/loading-dots-spinner.js");require("../animations/loading-spinner/loading-spinner.js"),require("../theme/theme-provider/context.js");var s=require("../error-display/error-display.js"),d=require("../typography/index.js");require("../card/card.styles_1gh9gs3.css"),require("../markup/markup.js"),require("../modal-v2/modal-v2.js"),require("../theme/theme-provider/index.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var c=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js"),require("../popover/popover.styles_ujnf0h.css");var m=require("../popover/popover-trigger.js");require("../popover/popover-inline/popover-inline.styles_bkopnt.css");var u=require("../shared/accessibility/index.js"),p=require("../util/time-helper.js"),h=require("./const.js"),g=require("./timetable.styles.js"),j=require("./timetable-header/timetable-header.js"),x=require("./timetable-row/row-bar.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=f(t);const y=a.forwardRef(((t,f)=>{const{date:y,emptyContentMessage:T,rowData:b,loading:w,minTime:R="00:00",maxTime:C="23:00",initialScrollTime:H,minDate:D,maxDate:N,totalRecords:S,showCurrentDateAsToday:_,showDateAsShortForm:q,onPage:A,onRefresh:E,onNextDayClick:k,onPreviousDayClick:I,onCalendarDateSelect:O,roundInitialScrollTime:L=!0}=t,M=e.__rest(t,["date","emptyContentMessage","rowData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","totalRecords","showCurrentDateAsToday","showDateAsShortForm","onPage","onRefresh","onNextDayClick","onPreviousDayClick","onCalendarDateSelect","roundInitialScrollTime"]),W=M["data-testid"]||"timetable",P=p.TimeHelper.roundToNearestInterval(R,60),$=p.TimeHelper.roundToNearestInterval(C,60,!0),B=p.TimeHelper.generateHourlyIntervals(P,$),F=Math.ceil(60*B.length/h.ROW_INTERVAL),V=`Timetable of resource availability, for ${i.default(y).format("D MMMM YYYY")}, from ${i.default(P,"HH:mm").format("ha")} to ${i.default($,"HH:mm").format("ha")}`,z=(S||b.length)+1,Y=F+1,G=0===S||o.lodashExports.isEmpty(b),Q=G||b.length===S,U=!Q&&!!A,X=a.useRef(null),J=a.useRef(null),K=a.useRef(null),Z=a.useRef(null),[ee,re]=a.useState(!1),[ae,te]=a.useState(!1),[ie,oe]=a.useState(0),[le,ne]=a.useState(!1);a.useImperativeHandle(f,(()=>({resetScroll:ce}))),c.useApplyStyle(K,{[g.tokens.columnHeaderRow.columnWidth]:4*ie+"px"}),c.useApplyStyle(Z,{[g.tokens.loadingWrapper.cellWidth]:4*ie+"px"}),a.useEffect((()=>{const e=o.lodashExports.throttle((()=>{if(X.current&&(re(X.current.scrollLeft>0),te(X.current.scrollTop>0)),le||!X.current)return;const{scrollTop:e,clientHeight:r,scrollHeight:a}=X.current;Math.ceil(e+r)>=a-1&&!Q&&A&&!w&&(ne(!0),A())}),100),r=X.current;return r&&r.addEventListener("scroll",e),()=>{r&&r.removeEventListener("scroll",e)}}),[Q,le,w,A]),a.useEffect((()=>{ne(!1)}),[b]),a.useEffect((()=>{ce()}),[H,ie,P,$]);l.useResizeDetector({onResize:()=>{if(X.current){const e=Math.ceil(60*B.length/h.ROW_INTERVAL),r=(X.current.clientWidth-h.ROW_HEADER_WIDTH)/e,a=r>h.MIN_INTERVAL_WIDTH?r:h.MIN_INTERVAL_WIDTH;oe(a)}},targetRef:X,refreshMode:"debounce",refreshRate:50});const se=(()=>{let e=0;const r=h.ROW_BAR_COLOR_SEQUENCE.length;return()=>{const a=h.ROW_BAR_COLOR_SEQUENCE[e],t=h.ROW_BAR_COLOR_ALTERNATE_COLOR[e];return e=(e+1)%r,{mainColor:a,alternateColor:t}}})(),de=(e,r)=>{if(!e.rowHeaderPopover)return r;const t={position:"bottom-start",customOffset:e.rowHeaderPopover.offset,children:r,trigger:e.rowHeaderPopover.trigger,delay:e.rowHeaderPopover.delay,popoverContent:e.rowHeaderPopover.content};return a.createElement(m.PopoverTrigger,Object.assign({},t,{className:g.popoverTrigger,key:`${e.id}-popover-trigger`,zIndex:2}),r)},ce=()=>{if(H&&X.current&&ie>0){const e=p.TimeHelper.calculateScrollPosition({scrollTime:H,minTime:P,maxTime:$,interval:h.ROW_INTERVAL,intervalWidth:ie,options:{roundToInterval:L}});null!==e&&(X.current.scrollLeft=e)}},me=e=>{const a=r.jsxs(r.Fragment,{children:[r.jsx(d.Typography.BodyMD,{className:v.default(g.clickableRowHeaderTitle,!!e.onRowNameClick&&g.clickableRowHeaderTitleClickable),onClick:r=>((e,r)=>{e.onRowNameClick&&e.onRowNameClick(e,r)})(e,r),weight:"semibold","data-testid":`${e.id}-row-header-title`,children:e.name}),r.jsx(d.Typography.BodyXS,{weight:"bold",className:v.default(g.rowHeaderSubtitle,!e.subtitle&&g.rowHeaderSubtitleHidden),"data-testid":`${e.id}-row-header-subtitle`,children:e.subtitle})]});return r.jsx("div",{className:v.default(g.rowHeader,ee&&g.rowHeaderScrolled),role:"rowheader","aria-colindex":1,children:de(e,a)},`${e.id}-row-header`)},ue=()=>{if(!w&&le)return r.jsxs("div",{className:g.timeTableRow,children:[r.jsx("div",{className:v.default(g.rowHeader,ee&&g.rowHeaderScrolled),children:r.jsx("div",{className:g.loadingBar})}),r.jsx("div",{ref:Z,className:g.loadingWrapper,"data-testid":"lazy-loader",role:"presentation",children:B.map(((e,a)=>r.jsx("div",{className:g.loadingCell,children:r.jsx("div",{className:g.loadingBar})},`lazy-load-cell-${a}`)))})]})};return G?r.jsxs("div",Object.assign({},M,{"data-testid":W,children:[r.jsx(j.TimeTableHeader,{selectedDate:y,loading:w||le,tableContainerRef:X,minDate:D,maxDate:N,totalRecords:S,showCurrentDateAsToday:_,showDateAsShortForm:q,onPreviousDayClick:I,onNextDayClick:k,onRefresh:E,onCalendarDateSelect:O}),r.jsx("div",{className:v.default(g.emptyTableContainer,"empty-container"),tabIndex:0,"aria-live":"polite","aria-atomic":!0,"aria-busy":w,children:w?r.jsxs(r.Fragment,{children:[r.jsx(u.VisuallyHidden,{children:`Loading ${V}`}),r.jsx(n.LoadingDotsSpinner,{"data-testid":"timetable-loading-spinner",className:v.default(g.loadingSpinner,G?g.loadingSpinnerEmptyContent:g.loadingSpinnerHasContent)})]}):r.jsx(s.ErrorDisplay,{className:g.noResultsFound,type:"no-item-found",description:T})})]})):r.jsxs("div",Object.assign({},M,{"data-testid":W,children:[r.jsx(j.TimeTableHeader,{"data-id":"timetable-date-navigator",selectedDate:y,loading:w||le,tableContainerRef:X,minDate:D,maxDate:N,totalRecords:S,showCurrentDateAsToday:_,showDateAsShortForm:q,onPreviousDayClick:I,onNextDayClick:k,onRefresh:E,onCalendarDateSelect:O}),r.jsxs("div",{"data-id":"timetable-container","data-testid":"timetable-container",ref:X,className:v.default(g.timeTableContainer,U&&g.timeTableContainerNotAllLoaded,w&&g.timeTableContainerLoading),role:"grid","aria-label":V,"aria-rowcount":z,"aria-colcount":Y,"aria-busy":le,tabIndex:0,children:[r.jsxs("div",{className:g.timeTableHeaderRow,role:"row","aria-rowindex":1,"data-testid":"row-header-column-id",children:[r.jsx("div",{className:v.default(g.rowColumnHeader,(ee||ae)&&g.rowColumnHeaderScrolled,ee&&g.rowColumnHeaderScrolledX,ae&&g.rowColumnHeaderScrolledY),role:"columnheader","aria-colindex":1,children:r.jsx(u.VisuallyHidden,{children:"Resource"})}),r.jsx("div",{ref:K,className:v.default(g.columnHeaderRow,ae&&g.columnHeaderRowScrolled),role:"presentation",children:B.map((e=>r.jsx("div",{className:g.columnHeader,"data-testid":`${e}-column`,children:r.jsx(d.Typography.BodySM,{className:g.columnHeaderTitle,weight:"semibold",children:e})},`${e}-column-key`)))})]}),w?r.jsx(n.LoadingDotsSpinner,{"data-testid":"timetable-loading-spinner",className:v.default(g.loadingSpinner,G?g.loadingSpinnerEmptyContent:g.loadingSpinnerHasContent)}):r.jsxs("div",{className:g.timeTableBody,"data-testid":"content-container-id",ref:J,role:"rowgroup",children:[b.map(((e,a)=>r.jsxs("div",{className:g.timeTableRow,role:"row","aria-rowindex":a+2,"aria-label":e.name,children:[me(e),r.jsx(x.RowBar,Object.assign({timetableMinTime:P,timetableMaxTime:$,rowBarColor:se(),intervalWidth:ie,containerRef:J},e),`${a}-row-bar`)]},`${a}-timetable-row`))),ue()]})]})]}))}));exports.TimeTable=y;
 //# sourceMappingURL=timetable.js.map

package/cjs/timetable/timetable.js.map

@@ -1 +1 @@
-{"version":3,"file":"timetable.js","sources":["../../../src/timetable/timetable.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport { isEmpty, throttle } from \"lodash\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { PopoverV2TriggerProps } from \"../popover-v2\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport {\n    MIN_INTERVAL_WIDTH,\n    ROW_BAR_COLOR_ALTERNATE_COLOR,\n    ROW_BAR_COLOR_SEQUENCE,\n    ROW_HEADER_WIDTH,\n    ROW_INTERVAL,\n} from \"./const\";\nimport { TimeTableHeader } from \"./timetable-header/timetable-header\";\nimport { RowBar } from \"./timetable-row/row-bar\";\nimport {\n    ClickableRowHeaderTitle,\n    ColumnHeader,\n    ColumnHeaderRow,\n    ColumnHeaderTitle,\n    Container,\n    EmptyTableContainer,\n    Loader,\n    LoadingBar,\n    LoadingCell,\n    LoadingWrapper,\n    NoResultsFound,\n    RowColumnHeader,\n    RowHeader,\n    RowHeaderSubtitle,\n    StyledPopoverTrigger,\n    TimeTableBody,\n    TimeTableContainer,\n    TimeTableHeaderRow,\n    TimeTableRow,\n} from \"./timetable.style\";\nimport { TimeTableProps, TimeTableRef, TimeTableRowData } from \"./types\";\n\nconst Component = (props: TimeTableProps, ref: React.Ref<TimeTableRef>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        date,\n        emptyContentMessage,\n        rowData,\n        loading,\n        minTime = \"00:00\",\n        maxTime = \"23:00\",\n        initialScrollTime,\n        minDate,\n        maxDate,\n        totalRecords,\n        showCurrentDateAsToday,\n        showDateAsShortForm,\n        onPage,\n        onRefresh,\n        onNextDayClick,\n        onPreviousDayClick,\n        onCalendarDateSelect,\n        roundInitialScrollTime = true,\n        ...otherProps\n    } = props;\n    const testId = otherProps[\"data-testid\"] || \"timetable\";\n    const timetableMinTime = TimeHelper.roundToNearestInterval(minTime, 60);\n    const timetableMaxTime = TimeHelper.roundToNearestInterval(\n        maxTime,\n        60,\n        true\n    );\n    const hourlyIntervals = TimeHelper.generateHourlyIntervals(\n        timetableMinTime,\n        timetableMaxTime\n    );\n    const numberOfIntervals = Math.ceil(\n        (hourlyIntervals.length * 60) / ROW_INTERVAL\n    );\n    const formattedDate = dayjs(date).format(\"D MMMM YYYY\");\n    const timetableAriaLabel = `Timetable of resource availability, for ${formattedDate}, from ${dayjs(\n        timetableMinTime,\n        \"HH:mm\"\n    ).format(\"ha\")} to ${dayjs(timetableMaxTime, \"HH:mm\").format(\"ha\")}`;\n    const ariaRowCount = (totalRecords || rowData.length) + 1;\n    const ariaColCount = numberOfIntervals + 1;\n\n    const isEmptyContent = totalRecords === 0 || isEmpty(rowData);\n    const allRecordsLoaded = isEmptyContent || rowData.length === totalRecords;\n    const tableContainerRef = useRef<HTMLDivElement>(null);\n    const contentContainerRef = useRef<HTMLDivElement>(null);\n    const [isScrolledX, setIsScrolledX] = useState<boolean>(false);\n    const [isScrolledY, setIsScrolledY] = useState<boolean>(false);\n    const [intervalWidth, setIntervalWidth] = useState<number>(0);\n    const [loadMore, setLoadMore] = useState<boolean>(false);\n\n    // Expose imperative handle\n    useImperativeHandle(ref, () => ({\n        resetScroll,\n    }));\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const handleScroll = throttle(() => {\n            if (tableContainerRef.current) {\n                setIsScrolledX(tableContainerRef.current.scrollLeft > 0);\n                setIsScrolledY(tableContainerRef.current.scrollTop > 0);\n            }\n\n            if (loadMore || !tableContainerRef.current) return;\n\n            const { scrollTop, clientHeight, scrollHeight } =\n                tableContainerRef.current;\n            const scrollBottomTolerance = 1;\n            const isEndReached =\n                Math.ceil(scrollTop + clientHeight) >=\n                scrollHeight - scrollBottomTolerance;\n            const shouldLoadMore =\n                isEndReached && !allRecordsLoaded && onPage && !loading;\n\n            if (shouldLoadMore) {\n                setLoadMore(true);\n                onPage();\n            }\n        }, 100);\n\n        const tableContainer = tableContainerRef.current;\n\n        if (tableContainer) {\n            tableContainer.addEventListener(\"scroll\", handleScroll);\n        }\n\n        return () => {\n            if (tableContainer) {\n                tableContainer.removeEventListener(\"scroll\", handleScroll);\n            }\n        };\n    }, [allRecordsLoaded, loadMore, loading, onPage]);\n\n    useEffect(() => {\n        setLoadMore(false);\n    }, [rowData]);\n\n    // Initial scroll on mount and when dependencies change\n    useEffect(() => {\n        resetScroll();\n    }, [initialScrollTime, intervalWidth, timetableMinTime, timetableMaxTime]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    /**\n     * Handles when the TimeTable component is resized.\n     *\n     * @remarks\n     * When the component is resized, we recalculate the width of each interval\n     * in the Timetable. We do this by dividing the width of the container by\n     * the number of intervals per row bar. We also make sure that the width\n     * of each interval is at least 21px, otherwise it becomes too small.\n     */\n    const handleResize = () => {\n        if (tableContainerRef.current) {\n            const numberOfIntervalsPerRowBar = Math.ceil(\n                (hourlyIntervals.length * 60) / ROW_INTERVAL\n            );\n            const tableContainerWidth =\n                tableContainerRef.current.clientWidth - ROW_HEADER_WIDTH;\n            const calcWidth = tableContainerWidth / numberOfIntervalsPerRowBar;\n            const width =\n                calcWidth > MIN_INTERVAL_WIDTH ? calcWidth : MIN_INTERVAL_WIDTH;\n            setIntervalWidth(width);\n        }\n    };\n\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: tableContainerRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    const handleRowNameClick = (\n        data: TimeTableRowData,\n        event: React.MouseEvent\n    ) => {\n        if (data.onRowNameClick) {\n            data.onRowNameClick(data, event);\n        }\n    };\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    /**\n     * Using closures to more efficiently loop through and wrap the color sequencing instead of modding large numbers repeatedly\n     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#closure\n     */\n    const getColorFromSequence = (() => {\n        let colorIndex = 0;\n        const colorSequenceLength = ROW_BAR_COLOR_SEQUENCE.length;\n\n        return () => {\n            const mainColor = ROW_BAR_COLOR_SEQUENCE[colorIndex];\n            const alternateColor = ROW_BAR_COLOR_ALTERNATE_COLOR[colorIndex];\n            colorIndex = (colorIndex + 1) % colorSequenceLength;\n            return { mainColor, alternateColor };\n        };\n    })();\n\n    const buildPopoverTrigger = (\n        data: TimeTableRowData,\n        child: JSX.Element\n    ) => {\n        if (!data.rowHeaderPopover) {\n            return child;\n        }\n\n        const popoverTriggerProps: PopoverV2TriggerProps = {\n            position: \"bottom-start\",\n            customOffset: data.rowHeaderPopover.offset,\n            children: child,\n            trigger: data.rowHeaderPopover.trigger,\n            delay: data.rowHeaderPopover.delay,\n            popoverContent: data.rowHeaderPopover.content,\n        };\n\n        return (\n            <StyledPopoverTrigger\n                {...popoverTriggerProps}\n                key={`${data.id}-popover-trigger`}\n                zIndex={2}\n            >\n                {child}\n            </StyledPopoverTrigger>\n        );\n    };\n\n    // Function to reset scroll to initialScrollTime\n    const resetScroll = () => {\n        if (\n            initialScrollTime &&\n            tableContainerRef.current &&\n            intervalWidth > 0\n        ) {\n            const scrollPosition = TimeHelper.calculateScrollPosition({\n                scrollTime: initialScrollTime,\n                minTime: timetableMinTime,\n                maxTime: timetableMaxTime,\n                interval: ROW_INTERVAL,\n                intervalWidth,\n                options: {\n                    roundToInterval: roundInitialScrollTime,\n                },\n            });\n\n            if (scrollPosition !== null) {\n                tableContainerRef.current.scrollLeft = scrollPosition;\n            }\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderRowHeader = (data: TimeTableRowData) => {\n        const rowHeaderContent = (\n            <>\n                <ClickableRowHeaderTitle\n                    $isClickable={!!data.onRowNameClick}\n                    onClick={(event: React.MouseEvent) =>\n                        handleRowNameClick(data, event)\n                    }\n                    weight=\"semibold\"\n                    data-testid={`${data.id}-row-header-title`}\n                >\n                    {data.name}\n                </ClickableRowHeaderTitle>\n\n                <RowHeaderSubtitle\n                    weight=\"bold\"\n                    $show={!!data.subtitle}\n                    data-testid={`${data.id}-row-header-subtitle`}\n                >\n                    {data.subtitle}\n                </RowHeaderSubtitle>\n            </>\n        );\n\n        return (\n            <RowHeader\n                $isScrolled={isScrolledX}\n                key={`${data.id}-row-header`}\n                role=\"rowheader\"\n                aria-colindex={1}\n            >\n                {buildPopoverTrigger(data, rowHeaderContent)}\n            </RowHeader>\n        );\n    };\n\n    const renderColumnHeaders = () => {\n        // Don't render first column if there are no rows\n\n        return hourlyIntervals.map((columnHeader: string) => (\n            <ColumnHeader\n                key={`${columnHeader}-column-key`}\n                data-testid={`${columnHeader}-column`}\n            >\n                <ColumnHeaderTitle weight={\"semibold\"}>\n                    {columnHeader}\n                </ColumnHeaderTitle>\n            </ColumnHeader>\n        ));\n    };\n\n    const renderRows = () => {\n        if (loading) return <Loader $isEmptyContent={isEmptyContent} />;\n        return (\n            <TimeTableBody\n                data-testid=\"content-container-id\"\n                ref={contentContainerRef}\n                role=\"rowgroup\"\n            >\n                {rowData.map((data, index) => {\n                    return (\n                        <TimeTableRow\n                            key={`${index}-timetable-row`}\n                            role=\"row\"\n                            aria-rowindex={index + 2}\n                            aria-label={data.name}\n                        >\n                            {renderRowHeader(data)}\n                            <RowBar\n                                key={`${index}-row-bar`}\n                                timetableMinTime={timetableMinTime}\n                                timetableMaxTime={timetableMaxTime}\n                                rowBarColor={getColorFromSequence()}\n                                intervalWidth={intervalWidth}\n                                containerRef={contentContainerRef}\n                                {...data}\n                            />\n                        </TimeTableRow>\n                    );\n                })}\n                {renderLazyLoadRow()}\n            </TimeTableBody>\n        );\n    };\n\n    const renderLazyLoadRow = () => {\n        if (loading || !loadMore) return;\n        return (\n            <TimeTableRow>\n                <RowHeader $isScrolled={isScrolledX}>\n                    <LoadingBar />\n                </RowHeader>\n                <LoadingWrapper data-testid=\"lazy-loader\" role=\"presentation\">\n                    {hourlyIntervals.map((_, index) => (\n                        <LoadingCell\n                            key={`lazy-load-cell-${index}`}\n                            $width={intervalWidth * 4}\n                        >\n                            <LoadingBar />\n                        </LoadingCell>\n                    ))}\n                </LoadingWrapper>\n            </TimeTableRow>\n        );\n    };\n\n    if (isEmptyContent) {\n        return (\n            <Container {...otherProps} data-testid={testId}>\n                <TimeTableHeader\n                    selectedDate={date}\n                    loading={loading || loadMore}\n                    tableContainerRef={tableContainerRef}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    totalRecords={totalRecords}\n                    showCurrentDateAsToday={showCurrentDateAsToday}\n                    showDateAsShortForm={showDateAsShortForm}\n                    onPreviousDayClick={onPreviousDayClick}\n                    onNextDayClick={onNextDayClick}\n                    onRefresh={onRefresh}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                />\n                <EmptyTableContainer\n                    className=\"empty-container\"\n                    tabIndex={0}\n                    aria-live=\"polite\"\n                    aria-atomic\n                    aria-busy={loading}\n                >\n                    {!loading ? (\n                        <NoResultsFound\n                            type=\"no-item-found\"\n                            description={emptyContentMessage}\n                        />\n                    ) : (\n                        <>\n                            <VisuallyHidden>{`Loading ${timetableAriaLabel}`}</VisuallyHidden>\n                            <Loader $isEmptyContent={isEmptyContent}></Loader>\n                        </>\n                    )}\n                </EmptyTableContainer>\n            </Container>\n        );\n    }\n\n    return (\n        <Container {...otherProps} data-testid={testId}>\n            <TimeTableHeader\n                data-id=\"timetable-date-navigator\"\n                selectedDate={date}\n                loading={loading || loadMore}\n                tableContainerRef={tableContainerRef}\n                minDate={minDate}\n                maxDate={maxDate}\n                totalRecords={totalRecords}\n                showCurrentDateAsToday={showCurrentDateAsToday}\n                showDateAsShortForm={showDateAsShortForm}\n                onPreviousDayClick={onPreviousDayClick}\n                onNextDayClick={onNextDayClick}\n                onRefresh={onRefresh}\n                onCalendarDateSelect={onCalendarDateSelect}\n            />\n            <TimeTableContainer\n                data-id=\"timetable-container\"\n                data-testid=\"timetable-container\"\n                ref={tableContainerRef}\n                $loading={loading}\n                $allRecordsLoaded={allRecordsLoaded || !onPage}\n                role=\"grid\"\n                aria-label={timetableAriaLabel}\n                aria-rowcount={ariaRowCount}\n                aria-colcount={ariaColCount}\n                aria-busy={loadMore}\n                tabIndex={0}\n            >\n                <TimeTableHeaderRow\n                    role=\"row\"\n                    aria-rowindex={1}\n                    data-testid={\"row-header-column-id\"}\n                >\n                    <RowColumnHeader\n                        $isScrolledY={isScrolledY}\n                        $isScrolledX={isScrolledX}\n                        role=\"columnheader\"\n                        aria-colindex={1}\n                    >\n                        <VisuallyHidden>Resource</VisuallyHidden>\n                    </RowColumnHeader>\n                    <ColumnHeaderRow\n                        $numOfColumns={hourlyIntervals.length}\n                        $intervalWidth={intervalWidth}\n                        $isScrolled={isScrolledY}\n                        role=\"presentation\"\n                    >\n                        {renderColumnHeaders()}\n                    </ColumnHeaderRow>\n                </TimeTableHeaderRow>\n                {renderRows()}\n            </TimeTableContainer>\n        </Container>\n    );\n};\n\nexport const TimeTable = forwardRef<TimeTableRef, TimeTableProps>(Component);\n"],"names":["TimeTable","forwardRef","props","ref","date","emptyContentMessage","rowData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","totalRecords","showCurrentDateAsToday","showDateAsShortForm","onPage","onRefresh","onNextDayClick","onPreviousDayClick","onCalendarDateSelect","roundInitialScrollTime","otherProps","testId","timetableMinTime","TimeHelper","roundToNearestInterval","timetableMaxTime","hourlyIntervals","generateHourlyIntervals","numberOfIntervals","Math","ceil","length","ROW_INTERVAL","timetableAriaLabel","dayjs","format","ariaRowCount","ariaColCount","isEmptyContent","isEmpty","allRecordsLoaded","tableContainerRef","useRef","contentContainerRef","isScrolledX","setIsScrolledX","useState","isScrolledY","setIsScrolledY","intervalWidth","setIntervalWidth","loadMore","setLoadMore","useImperativeHandle","resetScroll","useEffect","handleScroll","throttle","current","scrollLeft","scrollTop","clientHeight","scrollHeight","tableContainer","addEventListener","removeEventListener","useResizeDetector","onResize","numberOfIntervalsPerRowBar","calcWidth","clientWidth","ROW_HEADER_WIDTH","width","MIN_INTERVAL_WIDTH","targetRef","refreshMode","refreshRate","getColorFromSequence","colorIndex","colorSequenceLength","ROW_BAR_COLOR_SEQUENCE","mainColor","alternateColor","ROW_BAR_COLOR_ALTERNATE_COLOR","buildPopoverTrigger","data","child","rowHeaderPopover","popoverTriggerProps","position","customOffset","offset","children","trigger","delay","popoverContent","content","_createElement","StyledPopoverTrigger","Object","assign","key","id","zIndex","scrollPosition","calculateScrollPosition","scrollTime","interval","options","roundToInterval","renderRowHeader","rowHeaderContent","_jsxs","_Fragment","_jsx","ClickableRowHeaderTitle","$isClickable","onRowNameClick","onClick","event","handleRowNameClick","weight","name","RowHeaderSubtitle","subtitle","RowHeader","$isScrolled","role","renderLazyLoadRow","TimeTableRow","LoadingBar","LoadingWrapper","map","_","index","LoadingCell","$width","Container","TimeTableHeader","selectedDate","EmptyTableContainer","className","tabIndex","VisuallyHidden","Loader","$isEmptyContent","NoResultsFound","type","description","TimeTableContainer","$loading","$allRecordsLoaded","TimeTableHeaderRow","RowColumnHeader","$isScrolledY","$isScrolledX","ColumnHeaderRow","$numOfColumns","$intervalWidth","columnHeader","ColumnHeader","ColumnHeaderTitle","TimeTableBody","RowBar","rowBarColor","containerRef"],"mappings":"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"}
+{"version":3,"file":"timetable.js","sources":["../../../src/timetable/timetable.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { isEmpty, throttle } from \"lodash\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { ErrorDisplay } from \"../error-display\";\nimport type { PopoverTriggerProps } from \"../popover\";\nimport { PopoverTrigger } from \"../popover\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport {\n    MIN_INTERVAL_WIDTH,\n    ROW_BAR_COLOR_ALTERNATE_COLOR,\n    ROW_BAR_COLOR_SEQUENCE,\n    ROW_HEADER_WIDTH,\n    ROW_INTERVAL,\n} from \"./const\";\nimport * as styles from \"./timetable.styles\";\nimport { TimeTableHeader } from \"./timetable-header/timetable-header\";\nimport { RowBar } from \"./timetable-row/row-bar\";\nimport type { TimeTableProps, TimeTableRef, TimeTableRowData } from \"./types\";\n\nconst Component = (props: TimeTableProps, ref: React.Ref<TimeTableRef>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        date,\n        emptyContentMessage,\n        rowData,\n        loading,\n        minTime = \"00:00\",\n        maxTime = \"23:00\",\n        initialScrollTime,\n        minDate,\n        maxDate,\n        totalRecords,\n        showCurrentDateAsToday,\n        showDateAsShortForm,\n        onPage,\n        onRefresh,\n        onNextDayClick,\n        onPreviousDayClick,\n        onCalendarDateSelect,\n        roundInitialScrollTime = true,\n        ...otherProps\n    } = props;\n    const testId = otherProps[\"data-testid\"] || \"timetable\";\n    const timetableMinTime = TimeHelper.roundToNearestInterval(minTime, 60);\n    const timetableMaxTime = TimeHelper.roundToNearestInterval(\n        maxTime,\n        60,\n        true\n    );\n    const hourlyIntervals = TimeHelper.generateHourlyIntervals(\n        timetableMinTime,\n        timetableMaxTime\n    );\n    const numberOfIntervals = Math.ceil(\n        (hourlyIntervals.length * 60) / ROW_INTERVAL\n    );\n    const formattedDate = dayjs(date).format(\"D MMMM YYYY\");\n    const timetableAriaLabel = `Timetable of resource availability, for ${formattedDate}, from ${dayjs(\n        timetableMinTime,\n        \"HH:mm\"\n    ).format(\"ha\")} to ${dayjs(timetableMaxTime, \"HH:mm\").format(\"ha\")}`;\n    const ariaRowCount = (totalRecords || rowData.length) + 1;\n    const ariaColCount = numberOfIntervals + 1;\n\n    const isEmptyContent = totalRecords === 0 || isEmpty(rowData);\n    const allRecordsLoaded = isEmptyContent || rowData.length === totalRecords;\n    const hasLazyLoad = !allRecordsLoaded && !!onPage;\n    const tableContainerRef = useRef<HTMLDivElement>(null);\n    const contentContainerRef = useRef<HTMLDivElement>(null);\n    const columnHeaderRowRef = useRef<HTMLDivElement>(null);\n    const loadingWrapperRef = useRef<HTMLDivElement>(null);\n    const [isScrolledX, setIsScrolledX] = useState<boolean>(false);\n    const [isScrolledY, setIsScrolledY] = useState<boolean>(false);\n    const [intervalWidth, setIntervalWidth] = useState<number>(0);\n    const [loadMore, setLoadMore] = useState<boolean>(false);\n\n    // Expose imperative handle\n    useImperativeHandle(ref, () => ({\n        resetScroll,\n    }));\n\n    useApplyStyle(columnHeaderRowRef, {\n        [styles.tokens.columnHeaderRow.columnWidth]: `${intervalWidth * 4}px`,\n    });\n\n    useApplyStyle(loadingWrapperRef, {\n        [styles.tokens.loadingWrapper.cellWidth]: `${intervalWidth * 4}px`,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const handleScroll = throttle(() => {\n            if (tableContainerRef.current) {\n                setIsScrolledX(tableContainerRef.current.scrollLeft > 0);\n                setIsScrolledY(tableContainerRef.current.scrollTop > 0);\n            }\n\n            if (loadMore || !tableContainerRef.current) return;\n\n            const { scrollTop, clientHeight, scrollHeight } =\n                tableContainerRef.current;\n            const scrollBottomTolerance = 1;\n            const isEndReached =\n                Math.ceil(scrollTop + clientHeight) >=\n                scrollHeight - scrollBottomTolerance;\n            const shouldLoadMore =\n                isEndReached && !allRecordsLoaded && onPage && !loading;\n\n            if (shouldLoadMore) {\n                setLoadMore(true);\n                onPage();\n            }\n        }, 100);\n\n        const tableContainer = tableContainerRef.current;\n\n        if (tableContainer) {\n            tableContainer.addEventListener(\"scroll\", handleScroll);\n        }\n\n        return () => {\n            if (tableContainer) {\n                tableContainer.removeEventListener(\"scroll\", handleScroll);\n            }\n        };\n    }, [allRecordsLoaded, loadMore, loading, onPage]);\n\n    useEffect(() => {\n        setLoadMore(false);\n    }, [rowData]);\n\n    // Initial scroll on mount and when dependencies change\n    useEffect(() => {\n        resetScroll();\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [initialScrollTime, intervalWidth, timetableMinTime, timetableMaxTime]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    /**\n     * Handles when the TimeTable component is resized.\n     *\n     * @remarks\n     * When the component is resized, we recalculate the width of each interval\n     * in the Timetable. We do this by dividing the width of the container by\n     * the number of intervals per row bar. We also make sure that the width\n     * of each interval is at least 21px, otherwise it becomes too small.\n     */\n    const handleResize = () => {\n        if (tableContainerRef.current) {\n            const numberOfIntervalsPerRowBar = Math.ceil(\n                (hourlyIntervals.length * 60) / ROW_INTERVAL\n            );\n            const tableContainerWidth =\n                tableContainerRef.current.clientWidth - ROW_HEADER_WIDTH;\n            const calcWidth = tableContainerWidth / numberOfIntervalsPerRowBar;\n            const width =\n                calcWidth > MIN_INTERVAL_WIDTH ? calcWidth : MIN_INTERVAL_WIDTH;\n            setIntervalWidth(width);\n        }\n    };\n\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: tableContainerRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    const handleRowNameClick = (\n        data: TimeTableRowData,\n        event: React.MouseEvent\n    ) => {\n        if (data.onRowNameClick) {\n            data.onRowNameClick(data, event);\n        }\n    };\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    /**\n     * Using closures to more efficiently loop through and wrap the color sequencing instead of modding large numbers repeatedly\n     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#closure\n     */\n    const getColorFromSequence = (() => {\n        let colorIndex = 0;\n        const colorSequenceLength = ROW_BAR_COLOR_SEQUENCE.length;\n\n        return () => {\n            const mainColor = ROW_BAR_COLOR_SEQUENCE[colorIndex];\n            const alternateColor = ROW_BAR_COLOR_ALTERNATE_COLOR[colorIndex];\n            colorIndex = (colorIndex + 1) % colorSequenceLength;\n            return { mainColor, alternateColor };\n        };\n    })();\n\n    const buildPopoverTrigger = (\n        data: TimeTableRowData,\n        child: JSX.Element\n    ) => {\n        if (!data.rowHeaderPopover) {\n            return child;\n        }\n\n        const popoverTriggerProps: PopoverTriggerProps = {\n            position: \"bottom-start\",\n            customOffset: data.rowHeaderPopover.offset,\n            children: child,\n            trigger: data.rowHeaderPopover.trigger,\n            delay: data.rowHeaderPopover.delay,\n            popoverContent: data.rowHeaderPopover.content,\n        };\n\n        return (\n            <PopoverTrigger\n                {...popoverTriggerProps}\n                className={styles.popoverTrigger}\n                key={`${data.id}-popover-trigger`}\n                zIndex={2}\n            >\n                {child}\n            </PopoverTrigger>\n        );\n    };\n\n    // Function to reset scroll to initialScrollTime\n    const resetScroll = () => {\n        if (\n            initialScrollTime &&\n            tableContainerRef.current &&\n            intervalWidth > 0\n        ) {\n            const scrollPosition = TimeHelper.calculateScrollPosition({\n                scrollTime: initialScrollTime,\n                minTime: timetableMinTime,\n                maxTime: timetableMaxTime,\n                interval: ROW_INTERVAL,\n                intervalWidth,\n                options: {\n                    roundToInterval: roundInitialScrollTime,\n                },\n            });\n\n            if (scrollPosition !== null) {\n                tableContainerRef.current.scrollLeft = scrollPosition;\n            }\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderRowHeader = (data: TimeTableRowData) => {\n        const rowHeaderContent = (\n            <>\n                <Typography.BodyMD\n                    className={clsx(\n                        styles.clickableRowHeaderTitle,\n                        !!data.onRowNameClick &&\n                            styles.clickableRowHeaderTitleClickable\n                    )}\n                    onClick={(event: React.MouseEvent) =>\n                        handleRowNameClick(data, event)\n                    }\n                    weight=\"semibold\"\n                    data-testid={`${data.id}-row-header-title`}\n                >\n                    {data.name}\n                </Typography.BodyMD>\n\n                <Typography.BodyXS\n                    weight=\"bold\"\n                    className={clsx(\n                        styles.rowHeaderSubtitle,\n                        !data.subtitle && styles.rowHeaderSubtitleHidden\n                    )}\n                    data-testid={`${data.id}-row-header-subtitle`}\n                >\n                    {data.subtitle}\n                </Typography.BodyXS>\n            </>\n        );\n\n        return (\n            <div\n                className={clsx(\n                    styles.rowHeader,\n                    isScrolledX && styles.rowHeaderScrolled\n                )}\n                key={`${data.id}-row-header`}\n                role=\"rowheader\"\n                aria-colindex={1}\n            >\n                {buildPopoverTrigger(data, rowHeaderContent)}\n            </div>\n        );\n    };\n\n    const renderColumnHeaders = () => {\n        // Don't render first column if there are no rows\n\n        return hourlyIntervals.map((columnHeader: string) => (\n            <div\n                className={styles.columnHeader}\n                key={`${columnHeader}-column-key`}\n                data-testid={`${columnHeader}-column`}\n            >\n                <Typography.BodySM\n                    className={styles.columnHeaderTitle}\n                    weight={\"semibold\"}\n                >\n                    {columnHeader}\n                </Typography.BodySM>\n            </div>\n        ));\n    };\n\n    const renderRows = () => {\n        if (loading) {\n            return (\n                <LoadingDotsSpinner\n                    data-testid=\"timetable-loading-spinner\"\n                    className={clsx(\n                        styles.loadingSpinner,\n                        isEmptyContent\n                            ? styles.loadingSpinnerEmptyContent\n                            : styles.loadingSpinnerHasContent\n                    )}\n                />\n            );\n        }\n\n        return (\n            <div\n                className={styles.timeTableBody}\n                data-testid=\"content-container-id\"\n                ref={contentContainerRef}\n                role=\"rowgroup\"\n            >\n                {rowData.map((data, index) => {\n                    return (\n                        <div\n                            className={styles.timeTableRow}\n                            key={`${index}-timetable-row`}\n                            role=\"row\"\n                            aria-rowindex={index + 2}\n                            aria-label={data.name}\n                        >\n                            {renderRowHeader(data)}\n                            <RowBar\n                                key={`${index}-row-bar`}\n                                timetableMinTime={timetableMinTime}\n                                timetableMaxTime={timetableMaxTime}\n                                rowBarColor={getColorFromSequence()}\n                                intervalWidth={intervalWidth}\n                                containerRef={contentContainerRef}\n                                {...data}\n                            />\n                        </div>\n                    );\n                })}\n                {renderLazyLoadRow()}\n            </div>\n        );\n    };\n\n    const renderLazyLoadRow = () => {\n        if (loading || !loadMore) return;\n        return (\n            <div className={styles.timeTableRow}>\n                <div\n                    className={clsx(\n                        styles.rowHeader,\n                        isScrolledX && styles.rowHeaderScrolled\n                    )}\n                >\n                    <div className={styles.loadingBar} />\n                </div>\n                <div\n                    ref={loadingWrapperRef}\n                    className={styles.loadingWrapper}\n                    data-testid=\"lazy-loader\"\n                    role=\"presentation\"\n                >\n                    {hourlyIntervals.map((_, index) => (\n                        <div\n                            className={styles.loadingCell}\n                            key={`lazy-load-cell-${index}`}\n                        >\n                            <div className={styles.loadingBar} />\n                        </div>\n                    ))}\n                </div>\n            </div>\n        );\n    };\n\n    if (isEmptyContent) {\n        return (\n            <div {...otherProps} data-testid={testId}>\n                <TimeTableHeader\n                    selectedDate={date}\n                    loading={loading || loadMore}\n                    tableContainerRef={tableContainerRef}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    totalRecords={totalRecords}\n                    showCurrentDateAsToday={showCurrentDateAsToday}\n                    showDateAsShortForm={showDateAsShortForm}\n                    onPreviousDayClick={onPreviousDayClick}\n                    onNextDayClick={onNextDayClick}\n                    onRefresh={onRefresh}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                />\n                <div\n                    className={clsx(\n                        styles.emptyTableContainer,\n                        \"empty-container\"\n                    )}\n                    tabIndex={0}\n                    aria-live=\"polite\"\n                    aria-atomic\n                    aria-busy={loading}\n                >\n                    {!loading ? (\n                        <ErrorDisplay\n                            className={styles.noResultsFound}\n                            type=\"no-item-found\"\n                            description={emptyContentMessage}\n                        />\n                    ) : (\n                        <>\n                            <VisuallyHidden>{`Loading ${timetableAriaLabel}`}</VisuallyHidden>\n                            <LoadingDotsSpinner\n                                data-testid=\"timetable-loading-spinner\"\n                                className={clsx(\n                                    styles.loadingSpinner,\n                                    isEmptyContent\n                                        ? styles.loadingSpinnerEmptyContent\n                                        : styles.loadingSpinnerHasContent\n                                )}\n                            />\n                        </>\n                    )}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <div {...otherProps} data-testid={testId}>\n            <TimeTableHeader\n                data-id=\"timetable-date-navigator\"\n                selectedDate={date}\n                loading={loading || loadMore}\n                tableContainerRef={tableContainerRef}\n                minDate={minDate}\n                maxDate={maxDate}\n                totalRecords={totalRecords}\n                showCurrentDateAsToday={showCurrentDateAsToday}\n                showDateAsShortForm={showDateAsShortForm}\n                onPreviousDayClick={onPreviousDayClick}\n                onNextDayClick={onNextDayClick}\n                onRefresh={onRefresh}\n                onCalendarDateSelect={onCalendarDateSelect}\n            />\n            <div\n                data-id=\"timetable-container\"\n                data-testid=\"timetable-container\"\n                ref={tableContainerRef}\n                className={clsx(\n                    styles.timeTableContainer,\n                    hasLazyLoad && styles.timeTableContainerNotAllLoaded,\n                    loading && styles.timeTableContainerLoading\n                )}\n                role=\"grid\"\n                aria-label={timetableAriaLabel}\n                aria-rowcount={ariaRowCount}\n                aria-colcount={ariaColCount}\n                aria-busy={loadMore}\n                tabIndex={0}\n            >\n                <div\n                    className={styles.timeTableHeaderRow}\n                    role=\"row\"\n                    aria-rowindex={1}\n                    data-testid={\"row-header-column-id\"}\n                >\n                    <div\n                        className={clsx(\n                            styles.rowColumnHeader,\n                            (isScrolledX || isScrolledY) &&\n                                styles.rowColumnHeaderScrolled,\n                            isScrolledX && styles.rowColumnHeaderScrolledX,\n                            isScrolledY && styles.rowColumnHeaderScrolledY\n                        )}\n                        role=\"columnheader\"\n                        aria-colindex={1}\n                    >\n                        <VisuallyHidden>Resource</VisuallyHidden>\n                    </div>\n                    <div\n                        ref={columnHeaderRowRef}\n                        className={clsx(\n                            styles.columnHeaderRow,\n                            isScrolledY && styles.columnHeaderRowScrolled\n                        )}\n                        role=\"presentation\"\n                    >\n                        {renderColumnHeaders()}\n                    </div>\n                </div>\n                {renderRows()}\n            </div>\n        </div>\n    );\n};\n\n// @catalog\n/**\n * A scrollable grid that visualises time slot availability across a day.\n *\n * Use `TimeTable` to display one day's schedule for multiple resources side by\n * side.\n * @keywords availability, grid, schedule\n */\nexport const TimeTable = forwardRef<TimeTableRef, TimeTableProps>(Component);\n"],"names":["TimeTable","forwardRef","props","ref","date","emptyContentMessage","rowData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","totalRecords","showCurrentDateAsToday","showDateAsShortForm","onPage","onRefresh","onNextDayClick","onPreviousDayClick","onCalendarDateSelect","roundInitialScrollTime","otherProps","testId","timetableMinTime","TimeHelper","roundToNearestInterval","timetableMaxTime","hourlyIntervals","generateHourlyIntervals","numberOfIntervals","Math","ceil","length","ROW_INTERVAL","timetableAriaLabel","dayjs","format","ariaRowCount","ariaColCount","isEmptyContent","isEmpty","allRecordsLoaded","hasLazyLoad","tableContainerRef","useRef","contentContainerRef","columnHeaderRowRef","loadingWrapperRef","isScrolledX","setIsScrolledX","useState","isScrolledY","setIsScrolledY","intervalWidth","setIntervalWidth","loadMore","setLoadMore","useImperativeHandle","resetScroll","useApplyStyle","styles.tokens","columnHeaderRow","columnWidth","loadingWrapper","cellWidth","useEffect","handleScroll","throttle","current","scrollLeft","scrollTop","clientHeight","scrollHeight","tableContainer","addEventListener","removeEventListener","useResizeDetector","onResize","numberOfIntervalsPerRowBar","calcWidth","clientWidth","ROW_HEADER_WIDTH","width","MIN_INTERVAL_WIDTH","targetRef","refreshMode","refreshRate","getColorFromSequence","colorIndex","colorSequenceLength","ROW_BAR_COLOR_SEQUENCE","mainColor","alternateColor","ROW_BAR_COLOR_ALTERNATE_COLOR","buildPopoverTrigger","data","child","rowHeaderPopover","popoverTriggerProps","position","customOffset","offset","children","trigger","delay","popoverContent","content","_createElement","PopoverTrigger","Object","assign","className","styles.popoverTrigger","key","id","zIndex","scrollPosition","calculateScrollPosition","scrollTime","interval","options","roundToInterval","renderRowHeader","rowHeaderContent","_jsxs","_Fragment","_jsx","Typography","BodyMD","clsx","styles.clickableRowHeaderTitle","onRowNameClick","styles.clickableRowHeaderTitleClickable","onClick","event","handleRowNameClick","weight","name","BodyXS","styles.rowHeaderSubtitle","subtitle","styles.rowHeaderSubtitleHidden","styles.rowHeader","styles.rowHeaderScrolled","role","renderLazyLoadRow","styles.timeTableRow","styles.loadingBar","styles.loadingWrapper","map","_","index","styles.loadingCell","TimeTableHeader","selectedDate","styles.emptyTableContainer","tabIndex","VisuallyHidden","LoadingDotsSpinner","styles.loadingSpinner","styles.loadingSpinnerEmptyContent","styles.loadingSpinnerHasContent","ErrorDisplay","styles.noResultsFound","type","description","styles.timeTableContainer","styles.timeTableContainerNotAllLoaded","styles.timeTableContainerLoading","styles.timeTableHeaderRow","styles.rowColumnHeader","styles.rowColumnHeaderScrolled","styles.rowColumnHeaderScrolledX","styles.rowColumnHeaderScrolledY","styles.columnHeaderRow","styles.columnHeaderRowScrolled","columnHeader","styles.columnHeader","BodySM","styles.columnHeaderTitle","styles.timeTableBody","RowBar","rowBarColor","containerRef"],"mappings":"m/CAgCA,MAigBaA,EAAYC,EAAAA,YAjgBP,CAACC,EAAuBC,KAItC,MAAMC,KACFA,EAAIC,oBACJA,EAAmBC,QACnBA,EAAOC,QACPA,EAAOC,QACPA,EAAU,QAAOC,QACjBA,EAAU,QAAOC,kBACjBA,EAAiBC,QACjBA,EAAOC,QACPA,EAAOC,aACPA,EAAYC,uBACZA,EAAsBC,oBACtBA,EAAmBC,OACnBA,EAAMC,UACNA,EAASC,eACTA,EAAcC,mBACdA,EAAkBC,qBAClBA,EAAoBC,uBACpBA,GAAyB,GAEzBnB,EADGoB,WACHpB,EApBE,CAAA,OAAA,sBAAA,UAAA,UAAA,UAAA,UAAA,oBAAA,UAAA,UAAA,eAAA,yBAAA,sBAAA,SAAA,YAAA,iBAAA,qBAAA,uBAAA,2BAqBAqB,EAASD,EAAW,gBAAkB,YACtCE,EAAmBC,EAAAA,WAAWC,uBAAuBlB,EAAS,IAC9DmB,EAAmBF,EAAAA,WAAWC,uBAChCjB,EACA,IACA,GAEEmB,EAAkBH,EAAAA,WAAWI,wBAC/BL,EACAG,GAEEG,EAAoBC,KAAKC,KACD,GAAzBJ,EAAgBK,OAAeC,gBAG9BC,EAAqB,2CADLC,EAAAA,QAAMhC,GAAMiC,OAAO,wBACoDD,UACzFZ,EACA,SACFa,OAAO,YAAYD,EAAAA,QAAMT,EAAkB,SAASU,OAAO,QACvDC,GAAgBzB,GAAgBP,EAAQ2B,QAAU,EAClDM,EAAeT,EAAoB,EAEnCU,EAAkC,IAAjB3B,GAAsB4B,EAAAA,cAAAA,QAAQnC,GAC/CoC,EAAmBF,GAAkBlC,EAAQ2B,SAAWpB,EACxD8B,GAAeD,KAAsB1B,EACrC4B,EAAoBC,EAAAA,OAAuB,MAC3CC,EAAsBD,EAAAA,OAAuB,MAC7CE,EAAqBF,EAAAA,OAAuB,MAC5CG,EAAoBH,EAAAA,OAAuB,OAC1CI,GAAaC,IAAkBC,EAAAA,UAAkB,IACjDC,GAAaC,IAAkBF,EAAAA,UAAkB,IACjDG,GAAeC,IAAoBJ,EAAAA,SAAiB,IACpDK,GAAUC,IAAeN,EAAAA,UAAkB,GAGlDO,EAAAA,oBAAoBvD,GAAK,KAAA,CACrBwD,mBAGJC,EAAAA,cAAcb,EAAoB,CAC9B,CAACc,EAAAA,OAAcC,gBAAgBC,aAAiC,EAAhBT,GAAH,OAGjDM,EAAAA,cAAcZ,EAAmB,CAC7B,CAACa,EAAAA,OAAcG,eAAeC,WAA+B,EAAhBX,GAAH,OAM9CY,EAAAA,WAAU,KACN,MAAMC,EAAeC,EAAAA,cAAAA,UAAS,KAM1B,GALIxB,EAAkByB,UAClBnB,GAAeN,EAAkByB,QAAQC,WAAa,GACtDjB,GAAeT,EAAkByB,QAAQE,UAAY,IAGrDf,KAAaZ,EAAkByB,QAAS,OAE5C,MAAME,UAAEA,EAASC,aAAEA,EAAYC,aAAEA,GAC7B7B,EAAkByB,QAGlBtC,KAAKC,KAAKuC,EAAYC,IACtBC,EAH0B,IAKT/B,GAAoB1B,IAAWT,IAGhDkD,IAAY,GACZzC,IACJ,GACD,KAEG0D,EAAiB9B,EAAkByB,QAMzC,OAJIK,GACAA,EAAeC,iBAAiB,SAAUR,GAGvC,KACCO,GACAA,EAAeE,oBAAoB,SAAUT,EACjD,CACH,GACF,CAACzB,EAAkBc,GAAUjD,EAASS,IAEzCkD,EAAAA,WAAU,KACNT,IAAY,EAAM,GACnB,CAACnD,IAGJ4D,EAAAA,WAAU,KACNP,IAAa,GAEd,CAACjD,EAAmB4C,GAAe9B,EAAkBG,IA4BxDkD,oBAAkB,CACdC,SAfiB,KACjB,GAAIlC,EAAkByB,QAAS,CAC3B,MAAMU,EAA6BhD,KAAKC,KACV,GAAzBJ,EAAgBK,OAAeC,gBAI9B8C,GADFpC,EAAkByB,QAAQY,YAAcC,EAAAA,kBACJH,EAClCI,EACFH,EAAYI,EAAAA,mBAAqBJ,EAAYI,EAAAA,mBACjD7B,GAAiB4B,EACrB,GAKAE,UAAWzC,EACX0C,YAAa,WACbC,YAAa,KAGjB,MAgBMC,GAAuB,MACzB,IAAIC,EAAa,EACjB,MAAMC,EAAsBC,EAAAA,uBAAuB1D,OAEnD,MAAO,KACH,MAAM2D,EAAYD,EAAAA,uBAAuBF,GACnCI,EAAiBC,EAAAA,8BAA8BL,GAErD,OADAA,GAAcA,EAAa,GAAKC,EACzB,CAAEE,YAAWC,iBAAgB,CAE3C,EAV4B,GAYvBE,GAAsB,CACxBC,EACAC,KAEA,IAAKD,EAAKE,iBACN,OAAOD,EAGX,MAAME,EAA2C,CAC7CC,SAAU,eACVC,aAAcL,EAAKE,iBAAiBI,OACpCC,SAAUN,EACVO,QAASR,EAAKE,iBAAiBM,QAC/BC,MAAOT,EAAKE,iBAAiBO,MAC7BC,eAAgBV,EAAKE,iBAAiBS,SAG1C,OACIC,EAAAA,cAACC,EAAAA,eAAcC,OAAAC,OAAA,CAAA,EACPZ,EAAmB,CACvBa,UAAWC,EAAAA,eACXC,IAAK,GAAGlB,EAAKmB,qBACbC,OAAQ,IAEPnB,EACY,EAKnBtC,GAAc,KAChB,GACIjD,GACAkC,EAAkByB,SAClBf,GAAgB,EAClB,CACE,MAAM+D,EAAiB5F,EAAAA,WAAW6F,wBAAwB,CACtDC,WAAY7G,EACZF,QAASgB,EACTf,QAASkB,EACT6F,SAAUtF,EAAAA,aACVoB,iBACAmE,QAAS,CACLC,gBAAiBrG,KAIF,OAAnBgG,IACAzE,EAAkByB,QAAQC,WAAa+C,EAE/C,GAMEM,GAAmB3B,IACrB,MAAM4B,EACFC,EAAAA,KAAAC,EAAAA,SAAA,CAAAvB,SAAA,CACIwB,EAAAA,IAACC,EAAAA,WAAWC,OAAM,CACdjB,UAAWkB,EAAAA,QACPC,EAAAA,0BACEnC,EAAKoC,gBACHC,oCAERC,QAAUC,GA7FC,EACvBvC,EACAuC,KAEIvC,EAAKoC,gBACLpC,EAAKoC,eAAepC,EAAMuC,EAC9B,EAwFgBC,CAAmBxC,EAAMuC,GAE7BE,OAAO,WAAU,cACJ,GAAGzC,EAAKmB,sBAAqBZ,SAEzCP,EAAK0C,OAGVX,EAAAA,IAACC,EAAAA,WAAWW,OAAM,CACdF,OAAO,OACPzB,UAAWkB,EAAAA,QACPU,EAAAA,mBACC5C,EAAK6C,UAAYC,EAAAA,yBACrB,cACY,GAAG9C,EAAKmB,yBAAwBZ,SAE5CP,EAAK6C,cAKlB,OACId,EAAAA,IAAA,MAAA,CACIf,UAAWkB,EAAAA,QACPa,EAAAA,UACA9F,IAAe+F,EAAAA,mBAGnBC,KAAK,4BACU,EAAC1C,SAEfR,GAAoBC,EAAM4B,IAJtB,GAAG5B,EAAKmB,gBAKX,EAwER+B,GAAoB,KACtB,IAAI3I,GAAYiD,GAChB,OACIqE,EAAAA,KAAA,MAAA,CAAKb,UAAWmC,EAAAA,aAAmB5C,SAAA,CAC/BwB,EAAAA,IAAA,MAAA,CACIf,UAAWkB,EAAAA,QACPa,EAAAA,UACA9F,IAAe+F,EAAAA,mBAClBzC,SAEDwB,EAAAA,IAAA,MAAA,CAAKf,UAAWoC,EAAAA,eAEpBrB,EAAAA,IAAA,MAAA,CACI5H,IAAK6C,EACLgE,UAAWqC,EAAAA,eAAqB,cACpB,cACZJ,KAAK,eAAc1C,SAElB3E,EAAgB0H,KAAI,CAACC,EAAGC,IACrBzB,EAAAA,WACIf,UAAWyC,EAAAA,YAAkBlD,SAG7BwB,EAAAA,IAAA,MAAA,CAAKf,UAAWoC,EAAAA,cAFX,kBAAkBI,WAMjC,EAId,OAAIhH,EAEIqF,EAAAA,KAAA,MAAAf,OAAAC,OAAA,CAAA,EAASzF,EAAU,CAAA,cAAeC,EAAMgF,SAAA,CACpCwB,MAAC2B,EAAAA,gBAAe,CACZC,aAAcvJ,EACdG,QAASA,GAAWiD,GACpBZ,kBAAmBA,EACnBjC,QAASA,EACTC,QAASA,EACTC,aAAcA,EACdC,uBAAwBA,EACxBC,oBAAqBA,EACrBI,mBAAoBA,EACpBD,eAAgBA,EAChBD,UAAWA,EACXG,qBAAsBA,IAE1B2G,EAAAA,IAAA,MAAA,CACIf,UAAWkB,EAAAA,QACP0B,sBACA,mBAEJC,SAAU,EAAC,YACD,SAAQ,eAAA,EAAA,YAEPtJ,EAAOgG,SAEhBhG,EAOEsH,EAAAA,KAAAC,EAAAA,SAAA,CAAAvB,SAAA,CACIwB,EAAAA,IAAC+B,EAAAA,eAAc,CAAAvD,SAAE,WAAWpE,MAC5B4F,EAAAA,IAACgC,qBAAkB,CAAA,cACH,4BACZ/C,UAAWkB,EAAAA,QACP8B,iBACAxH,EACMyH,EAAAA,2BACAC,EAAAA,+BAdlBnC,EAAAA,IAACoC,EAAAA,aAAY,CACTnD,UAAWoD,EAAAA,eACXC,KAAK,gBACLC,YAAajK,UAsBjCwH,EAAAA,KAAA,MAAAf,OAAAC,OAAA,CAAA,EAASzF,EAAU,CAAA,cAAeC,EAAMgF,SAAA,CACpCwB,EAAAA,IAAC2B,EAAAA,gBAAe,CAAA,UACJ,2BACRC,aAAcvJ,EACdG,QAASA,GAAWiD,GACpBZ,kBAAmBA,EACnBjC,QAASA,EACTC,QAASA,EACTC,aAAcA,EACdC,uBAAwBA,EACxBC,oBAAqBA,EACrBI,mBAAoBA,EACpBD,eAAgBA,EAChBD,UAAWA,EACXG,qBAAsBA,IAE1ByG,EAAAA,KAAA,MAAA,CAAA,UACY,sBAAqB,cACjB,sBACZ1H,IAAKyC,EACLoE,UAAWkB,EAAAA,QACPqC,qBACA5H,GAAe6H,EAAAA,+BACfjK,GAAWkK,EAAAA,2BAEfxB,KAAK,OAAM,aACC9G,EAAkB,gBACfG,EAAY,gBACZC,EAAY,YAChBiB,GACXqG,SAAU,EAACtD,SAAA,CAEXsB,EAAAA,KAAA,MAAA,CACIb,UAAW0D,EAAAA,mBACXzB,KAAK,MAAK,gBACK,EAAC,cACH,uBAAsB1C,SAAA,CAEnCwB,EAAAA,IAAA,MAAA,CACIf,UAAWkB,UACPyC,EAAAA,iBACC1H,IAAeG,KACZwH,0BACJ3H,IAAe4H,EAAAA,yBACfzH,IAAe0H,EAAAA,0BAEnB7B,KAAK,eAAc,gBACJ,EAAC1C,SAEhBwB,EAAAA,IAAC+B,EAAAA,eAAc,CAAAvD,SAAA,eAEnBwB,EAAAA,IAAA,MAAA,CACI5H,IAAK4C,EACLiE,UAAWkB,UACP6C,EAAAA,gBACA3H,IAAe4H,EAAAA,yBAEnB/B,KAAK,eAAc1C,SA9M5B3E,EAAgB0H,KAAK2B,GACxBlD,EAAAA,WACIf,UAAWkE,EAAAA,2BAEE,GAAGD,WAAqB1E,SAErCwB,EAAAA,IAACC,EAAAA,WAAWmD,QACRnE,UAAWoE,EAAAA,kBACX3C,OAAQ,WAAUlC,SAEjB0E,KAPA,GAAGA,uBAcZ1K,EAEIwH,EAAAA,IAACgC,EAAAA,mBAAkB,CAAA,cACH,4BACZ/C,UAAWkB,EAAAA,QACP8B,iBACAxH,EACMyH,EAAAA,2BACAC,EAAAA,4BAOlBrC,EAAAA,KAAA,MAAA,CACIb,UAAWqE,EAAAA,cAAoB,cACnB,uBACZlL,IAAK2C,EACLmG,KAAK,WAAU1C,SAAA,CAEdjG,EAAQgJ,KAAI,CAACtD,EAAMwD,IAEZ3B,EAAAA,KAAA,MAAA,CACIb,UAAWmC,EAAAA,aAEXF,KAAK,MAAK,gBACKO,EAAQ,EAAC,aACZxD,EAAK0C,KAAInC,SAAA,CAEpBoB,GAAgB3B,GACjB+B,EAAAA,IAACuD,SAAMxE,OAAAC,OAAA,CAEHvF,iBAAkBA,EAClBG,iBAAkBA,EAClB4J,YAAa/F,KACblC,cAAeA,GACfkI,aAAc1I,GACVkD,GANC,GAAGwD,eAPP,GAAGA,qBAkBnBN,cAyJH"}

package/cjs/timetable/timetable.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./timetable.styles_7rp8kz.css");exports.clickableRowHeaderTitle="c1wixfzv",exports.clickableRowHeaderTitleClickable="c1ydv4q1",exports.columnHeader="cu00ucx",exports.columnHeaderRow="club8pr",exports.columnHeaderRowScrolled="c1ww0xmb",exports.columnHeaderTitle="c78q521",exports.emptyTableContainer="erxhy6s",exports.loadingBar="lwaowax",exports.loadingCell="l1gsk7y7",exports.loadingSpinner="lywjuzz",exports.loadingSpinnerEmptyContent="l1x75bdd",exports.loadingSpinnerHasContent="l1c8n8nw",exports.loadingWrapper="l5bp49u",exports.noResultsFound="n1c42c7o",exports.popoverTrigger="p1l2dqit",exports.rowColumnHeader="rlj7vfj",exports.rowColumnHeaderScrolled="r1wcbob7",exports.rowColumnHeaderScrolledX="rwd1dpu",exports.rowColumnHeaderScrolledY="r14gjl6n",exports.rowHeader="r1bl65p4",exports.rowHeaderScrolled="r18q97gy",exports.rowHeaderSubtitle="r1g67qip",exports.rowHeaderSubtitleHidden="rr9vcmw",exports.timeTableBody="t12ob72k",exports.timeTableContainer="t1e3v70i",exports.timeTableContainerLoading="t1gzwlj3",exports.timeTableContainerNotAllLoaded="t1rmyx7n",exports.timeTableHeaderRow="tvbecqk",exports.timeTableRow="tcjynx9",exports.tokens={columnHeaderRow:{columnWidth:"--fds-internal-timetable-columnHeaderRow-columnWidth"},loadingWrapper:{cellWidth:"--fds-internal-timetable-loadingWrapper-cellWidth"}};
+//# sourceMappingURL=timetable.styles.js.map

package/cjs/timetable/timetable.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timetable.styles.js","sources":["../../../src/timetable/timetable.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Shadow, Spacing } from \"../theme\";\nimport {\n    MIN_HOURLY_INTERVAL_WIDTH,\n    ROW_HEADER_WIDTH,\n    ROW_HEIGHT,\n} from \"./const\";\n\nexport const tokens = {\n    rowColumnHeader: {\n        clipRight: \"--fds-internal-timetable-rowColumnHeader-clipRight\",\n        clipBottom: \"--fds-internal-timetable-rowColumnHeader-clipBottom\",\n    },\n    columnHeaderRow: {\n        columnWidth: \"--fds-internal-timetable-columnHeaderRow-columnWidth\",\n    },\n    loadingWrapper: {\n        cellWidth: \"--fds-internal-timetable-loadingWrapper-cellWidth\",\n    },\n};\n\n// -----------------------------------------------------------------------------\n// TABLE\n// -----------------------------------------------------------------------------\n\nexport const emptyTableContainer = css`\n    display: grid;\n    overflow: scroll;\n    position: relative;\n    grid-template-columns: ${ROW_HEADER_WIDTH}px auto;\n`;\n\nexport const timeTableContainer = css`\n    display: grid;\n    align-content: start;\n    overflow: scroll;\n    position: relative;\n    isolation: isolate;\n`;\n\nexport const timeTableContainerNotAllLoaded = css`\n    padding-bottom: 128px;\n`;\n\nexport const timeTableContainerLoading = css`\n    &:hover {\n        cursor: not-allowed;\n    }\n`;\n\n// -----------------------------------------------------------------------------\n// TABLE HEADER\n// -----------------------------------------------------------------------------\n\nexport const rowColumnHeader = css`\n    ${tokens.rowColumnHeader.clipRight}: 0;\n    ${tokens.rowColumnHeader.clipBottom}: 0;\n\n    position: sticky;\n    top: 0;\n    left: 0;\n    background-color: ${Colour[\"bg\"]};\n    width: ${ROW_HEADER_WIDTH}px;\n    height: ${ROW_HEIGHT}px;\n    z-index: 2;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    box-shadow: none;\n    clip-path: inset(0);\n    transition: box-shadow 0.5s ease-in-out, clip-path 0.5s ease-in-out;\n`;\n\nexport const rowColumnHeaderScrolled = css`\n    box-shadow: ${Shadow[\"md-subtle\"]};\n    clip-path: inset(\n        0 var(${tokens.rowColumnHeader.clipRight})\n            var(${tokens.rowColumnHeader.clipBottom}) 0\n    );\n`;\n\nexport const rowColumnHeaderScrolledX = css`\n    ${tokens.rowColumnHeader.clipRight}: -0.12px;\n`;\n\nexport const rowColumnHeaderScrolledY = css`\n    ${tokens.rowColumnHeader.clipBottom}: -0.12px;\n`;\n\nexport const timeTableHeaderRow = css`\n    display: grid;\n    position: sticky;\n    top: 0;\n    z-index: 4;\n    background-color: ${Colour[\"bg\"]};\n    grid-template-columns: ${ROW_HEADER_WIDTH}px max-content;\n    width: max-content;\n    min-width: 100%;\n    height: ${ROW_HEIGHT}px;\n`;\n\nexport const columnHeaderRow = css`\n    display: grid;\n    background-color: ${Colour[\"bg\"]};\n    height: ${ROW_HEIGHT}px;\n    grid-auto-flow: column;\n    grid-auto-columns: max(\n        var(${tokens.columnHeaderRow.columnWidth}),\n        ${MIN_HOURLY_INTERVAL_WIDTH}px\n    );\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    transition: all 0.5s ease-in-out;\n`;\n\nexport const columnHeaderRowScrolled = css`\n    box-shadow: ${Shadow[\"md-subtle\"]};\n`;\n\nexport const columnHeader = css`\n    min-width: ${MIN_HOURLY_INTERVAL_WIDTH}px;\n    display: flex;\n    align-items: flex-end;\n    padding-bottom: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const columnHeaderTitle = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// TABLE BODY\n// -----------------------------------------------------------------------------\n\nexport const timeTableBody = css`\n    width: max-content;\n    min-width: 100%;\n`;\n\nexport const timeTableRow = css`\n    display: grid;\n    grid-template-columns: ${ROW_HEADER_WIDTH}px max-content;\n    width: max-content;\n    min-width: 100%;\n    height: ${ROW_HEIGHT}px;\n`;\n\nexport const rowHeader = css`\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    justify-content: center;\n    position: sticky;\n    left: 0;\n    background-color: ${Colour[\"bg\"]};\n    z-index: 3;\n    width: ${ROW_HEADER_WIDTH}px;\n    height: ${ROW_HEIGHT}px;\n    text-align: right;\n    padding: 0 ${Spacing[\"spacing-16\"]} 0 ${Spacing[\"spacing-32\"]};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-right: ${Border[\"width-005\"]} ${Border[\"solid\"]}\n        ${Colour[\"border-primary\"]};\n    border-left: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    transition: all 0.5s ease-in-out;\n`;\n\nexport const rowHeaderScrolled = css`\n    box-shadow: ${Shadow[\"md-subtle\"]};\n    clip-path: inset(0 -6px 0 0);\n`;\n\nexport const clickableRowHeaderTitle = css`\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 100%;\n    white-space: nowrap;\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const clickableRowHeaderTitleClickable = css`\n    &:hover {\n        cursor: pointer;\n    }\n`;\n\nexport const rowHeaderSubtitle = css`\n    display: inline-flex;\n    gap: ${Spacing[\"spacing-4\"]};\n    align-items: center;\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const rowHeaderSubtitleHidden = css`\n    display: none;\n`;\n\n// -----------------------------------------------------------------------------\n// LOADING AND ERROR\n// -----------------------------------------------------------------------------\n\nexport const loadingSpinner = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    grid-row: 2;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const loadingSpinnerEmptyContent = css`\n    grid-column: 1 / -1;\n`;\n\nexport const loadingSpinnerHasContent = css`\n    grid-column: 2 / -1;\n`;\n\nexport const noResultsFound = css`\n    grid-column: 1 / -1;\n    grid-row: 2;\n    padding: ${Spacing[\"spacing-72\"]} 0;\n`;\n\n// -----------------------------------------------------------------------------\n// LAZY LOADING\n// -----------------------------------------------------------------------------\n\nexport const loadingWrapper = css`\n    /* reset variable to prevent leaking to child components */\n    ${tokens.loadingWrapper.cellWidth}: initial;\n\n    display: flex;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const loadingCell = css`\n    border-right: ${Border[\"width-005\"]} ${Border[\"solid\"]}\n        ${Colour[\"border-primary\"]};\n    width: var(${tokens.loadingWrapper.cellWidth});\n    height: 100%;\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-12\"]};\n`;\n\nexport const loadingBar = css`\n    @keyframes timetable-loading-gradient {\n        0% {\n            background-position: -468px 0;\n        }\n        100% {\n            background-position: 468px 0;\n        }\n    }\n\n    height: 28px;\n    width: 100%;\n    background: linear-gradient(\n        to right,\n        ${Colour.Primitive[\"neutral-95\"]} 8%,\n        ${Colour.Primitive[\"neutral-100\"]} 18%,\n        ${Colour.Primitive[\"neutral-95\"]} 33%\n    );\n    background-size: 800px 104px;\n    animation: timetable-loading-gradient 1.5s forwards infinite;\n`;\n\n// -----------------------------------------------------------------------------\n// MISCELLANEOUS\n// -----------------------------------------------------------------------------\n\nexport const popoverTrigger = css`\n    max-width: 24rem !important;\n    &:hover {\n        cursor: default;\n    }\n`;\n"],"names":["columnHeaderRow","columnWidth","loadingWrapper","cellWidth"],"mappings":"+GA0KoC,oDASS,gCA9DpB,kCAjBG,0CAaQ,qCAWN,sCAlGE,6BAyNT,8BARC,kCAnCG,6CASY,4CAIF,kCAcV,iCAVA,kCAoDA,mCAtNC,0CAiBQ,4CAQC,2CAIA,6BA6Df,qCAoBQ,qCAoBA,2CAOM,gCA5DV,sCAnGK,6CAYO,kDAJK,sCA+CZ,+BAiDN,yBAhIH,CAKlBA,gBAAiB,CACbC,YAAa,wDAEjBC,eAAgB,CACZC,UAAW"}

package/cjs/timetable/timetable.styles_7rp8kz.css

@@ -0,0 +1,46 @@
+@layer fds{.erxhy6s{display:-ms-grid;display:grid;overflow:scroll;position:relative;-ms-grid-columns:252px auto;grid-template-columns:252px auto;}
+.t1e3v70i{display:-ms-grid;display:grid;-webkit-align-content:start;-ms-flex-line-pack:start;align-content:start;overflow:scroll;position:relative;isolation:isolate;}
+.t1rmyx7n{padding-bottom:128px;}
+.t1gzwlj3:hover{cursor:not-allowed;}
+.rlj7vfj{--fds-internal-timetable-rowColumnHeader-clipRight:0;--fds-internal-timetable-rowColumnHeader-clipBottom:0;position:-webkit-sticky;position:sticky;top:0;left:0;background-color:var(--fds-colour-bg);width:252px;height:68px;z-index:2;border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);box-shadow:none;-webkit-clip-path:inset(0);clip-path:inset(0);-webkit-transition:box-shadow 0.5s ease-in-out,clip-path 0.5s ease-in-out;transition:box-shadow 0.5s ease-in-out,clip-path 0.5s ease-in-out;}
+.r1wcbob7{box-shadow:var(--fds-shadow-md-subtle);-webkit-clip-path:inset(
+        0 var(--fds-internal-timetable-rowColumnHeader-clipRight)
+            var(--fds-internal-timetable-rowColumnHeader-clipBottom) 0
+    );clip-path:inset(
+        0 var(--fds-internal-timetable-rowColumnHeader-clipRight)
+            var(--fds-internal-timetable-rowColumnHeader-clipBottom) 0
+    );}
+.rwd1dpu{--fds-internal-timetable-rowColumnHeader-clipRight:-0.12px;}
+.r14gjl6n{--fds-internal-timetable-rowColumnHeader-clipBottom:-0.12px;}
+.tvbecqk{display:-ms-grid;display:grid;position:-webkit-sticky;position:sticky;top:0;z-index:4;background-color:var(--fds-colour-bg);-ms-grid-columns:252px max-content;grid-template-columns:252px max-content;width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:100%;height:68px;}
+.club8pr{display:-ms-grid;display:grid;background-color:var(--fds-colour-bg);height:68px;-ms-grid-auto-flow:column;grid-auto-flow:column;-ms-grid-auto-columns:max(
+        var(--fds-internal-timetable-columnHeaderRow-columnWidth),
+        84px
+    );grid-auto-columns:max(
+        var(--fds-internal-timetable-columnHeaderRow-columnWidth),
+        84px
+    );border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
+.c1ww0xmb{box-shadow:var(--fds-shadow-md-subtle);}
+.cu00ucx{min-width:84px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;padding-bottom:var(--fds-spacing-4);}
+.c78q521{color:var(--fds-colour-text-subtler);}
+.t12ob72k{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:100%;}
+.tcjynx9{display:-ms-grid;display:grid;-ms-grid-columns:252px max-content;grid-template-columns:252px max-content;width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:100%;height:68px;}
+.r1bl65p4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:-webkit-sticky;position:sticky;left:0;background-color:var(--fds-colour-bg);z-index:3;width:252px;height:68px;text-align:right;padding:0 var(--fds-spacing-16) 0 var(--fds-spacing-32);border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-right:var(--fds-border-width-005) var(--fds-border-style-solid) var(--fds-colour-border-primary);border-left:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
+.r18q97gy{box-shadow:var(--fds-shadow-md-subtle);-webkit-clip-path:inset(0 -6px 0 0);clip-path:inset(0 -6px 0 0);}
+.c1wixfzv{display:inline-block;text-overflow:ellipsis;overflow:hidden;width:100%;white-space:nowrap;color:var(--fds-colour-text-primary);}
+.c1ydv4q1:hover{cursor:pointer;}
+.r1g67qip{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;gap:var(--fds-spacing-4);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--fds-colour-text-subtler);}
+.rr9vcmw{display:none;}
+.lywjuzz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-ms-grid-row:2;grid-row:2;width:100%;height:100%;}
+.l1x75bdd{-ms-grid-column:1/-1;grid-column:1/-1;}
+.l1c8n8nw{-ms-grid-column:2/-1;grid-column:2/-1;}
+.n1c42c7o{-ms-grid-column:1/-1;grid-column:1/-1;-ms-grid-row:2;grid-row:2;padding:var(--fds-spacing-72) 0;}
+.l5bp49u{--fds-internal-timetable-loadingWrapper-cellWidth:initial;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.l1gsk7y7{border-right:var(--fds-border-width-005) var(--fds-border-style-solid) var(--fds-colour-border-primary);width:var(--fds-internal-timetable-loadingWrapper-cellWidth);height:100%;padding:var(--fds-spacing-20) var(--fds-spacing-12);}
+.lwaowax{height:28px;width:100%;background:linear-gradient(
+        to right,
+        var(--fds-colour-neutral-95) 8%,
+        var(--fds-colour-neutral-100) 18%,
+        var(--fds-colour-neutral-95) 33%
+    );-webkit-background-size:800px 104px;background-size:800px 104px;-webkit-animation:timetable-loading-gradient-lwaowax 1.5s forwards infinite;animation:timetable-loading-gradient-lwaowax 1.5s forwards infinite;}@-webkit-keyframes timetable-loading-gradient-lwaowax{0%{-webkit-background-position:-468px 0;background-position:-468px 0;}100%{-webkit-background-position:468px 0;background-position:468px 0;}}@keyframes timetable-loading-gradient-lwaowax{0%{-webkit-background-position:-468px 0;background-position:-468px 0;}100%{-webkit-background-position:468px 0;background-position:468px 0;}}
+.p1l2dqit{max-width:24rem!important;}.p1l2dqit:hover{cursor:default;}}

package/cjs/toast/toast.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("@lifesg/react-icons"),s=require("@react-spring/web"),n=require("react"),r=require("../external/react-responsive/dist/react-responsive.js"),a=require("styled-components"),l=require("../shared/accessibility/index.js"),o=require("../theme/index.js"),c=require("./toast.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=u(n);const p=4e3,x={success:i.TickCircleFillIcon,warning:i.ExclamationTriangleFillIcon,error:i.ExclamationCircleFillIcon,info:i.ICircleFillIcon};exports.Toast=u=>{var{type:m="success",title:f,label:y,autoDismiss:j,autoDismissTime:h=p,onDismiss:v,fixed:C=!0,actionButton:E}=u,T=e.__rest(u,["type","title","label","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton"]);const g=n.useRef(null),[q,D]=n.useState(!1),b=n.useContext(a.ThemeContext),k=o.Breakpoint["lg-max"]({theme:b}),I=r.reactResponsiveExports.useMediaQuery({maxWidth:k});n.useEffect((()=>{D(!0)}),[]),n.useEffect((()=>{if(!j)return;const e=setTimeout((()=>{D(!1)}),h);return()=>clearTimeout(e)}),[j]),n.useEffect((()=>{const e=e=>{var t;"Escape"===e.key&&(null===(t=g.current)||void 0===t?void 0:t.contains(document.activeElement))&&$()};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}}),[]);const $=()=>{D(!1)},B=s.useSpring({opacity:q?1:0,transform:q?I?"translateY(0%)":"translateX(0%)":I?"translateY(-1500%)":"translateX(150%)",config:{easing:s.easings.easeInOutQuart,duration:1e3},onRest:()=>{q||null==v||v()}});return t.jsxs(c.Wrapper,Object.assign({ref:g,style:B,$type:m,$fixed:C,role:"alert",inert:l.inertValue(!q)},T,{children:[t.jsx(l.VisuallyHidden,{children:m}),t.jsxs(c.ContentWrapper,{children:[t.jsxs(c.TextIconWrapper,{$type:m,children:[(()=>{const e=x[m];return e&&t.jsx(e,{"aria-hidden":!0})})(),t.jsxs(c.TextContainer,{children:[f&&(d.default.isValidElement(f)?f:t.jsx(c.Title,{$type:m,role:"presentation",children:f})),y&&(d.default.isValidElement(y)?y:f?t.jsx(c.DescriptionMD,{$type:m,children:y}):t.jsx(c.DescriptionBL,{$type:m,children:y}))]})]}),E&&t.jsx(c.ActionButton,{styleType:"light",onClick:E.onClick,children:E.label})]}),t.jsxs(c.DismissButton,{$type:m,onClick:$,children:[t.jsx(l.VisuallyHidden,{role:"presentation",children:"Close notification"}),t.jsx(i.CrossIcon,{"aria-hidden":!0})]})]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),s=require("@lifesg/react-icons"),t=require("@react-spring/web"),r=require("clsx"),a=require("react"),n=require("../button/button.js"),l=require("../shared/accessibility/index.js"),c=require("../shared/clickable-icon/clickable-icon.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var o=require("../theme/utils/use-media-query.js"),u=require("../typography/index.js"),d=require("./toast.styles.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=m(r),p=m(a);const h=4e3,y={success:s.TickCircleFillIcon,warning:s.ExclamationTriangleFillIcon,error:s.ExclamationCircleFillIcon,info:s.ICircleFillIcon};exports.Toast=r=>{var{type:m="success",title:x,label:f,className:q,autoDismiss:v,autoDismissTime:g=h,onDismiss:b,fixed:k=!0,actionButton:E}=r,N=e.__rest(r,["type","title","label","className","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton"]);const T=a.useRef(null),[C,I]=a.useState(!1),B=o.useMaxWidthMediaQuery("lg");a.useEffect((()=>{I(!0)}),[]),a.useEffect((()=>{if(!v)return;const e=setTimeout((()=>{I(!1)}),g);return()=>clearTimeout(e)}),[v,g]),a.useEffect((()=>{const e=e=>{var i;"Escape"===e.key&&(null===(i=T.current)||void 0===i?void 0:i.contains(document.activeElement))&&D()};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}}),[]);const D=()=>{I(!1)},w=t.useSpring({opacity:C?1:0,transform:C?B?"translateY(0%)":"translateX(0%)":B?"translateY(-1500%)":"translateX(150%)",config:{easing:t.easings.easeInOutQuart,duration:1e3},onRest:()=>{C||null==b||b()}});return i.jsxs(t.animated.div,Object.assign({ref:T,style:w,className:j.default(d.wrapper,q),"data-type":m,"data-fixed":k,role:"alert",inert:l.inertValue(!C)},N,{children:[i.jsx(l.VisuallyHidden,{children:m}),i.jsxs("div",{className:d.contentWrapper,children:[i.jsxs("div",{className:d.textIconWrapper,"data-type":m,children:[(()=>{const e=y[m];return e&&i.jsx(e,{"aria-hidden":!0})})(),i.jsxs("div",{className:d.textContainer,children:[x&&(p.default.isValidElement(x)?x:i.jsx("h2",{className:d.title,role:"presentation",children:x})),f&&(p.default.isValidElement(f)?f:x?i.jsx(u.Typography.BodyMD,{className:d.description,children:f}):i.jsx(u.Typography.BodyBL,{className:d.description,children:f}))]})]}),E&&i.jsx(n.Button,{className:d.actionButton,styleType:"light",onClick:E.onClick,sizeType:"small",children:E.label})]}),i.jsxs(c.ClickableIcon,{className:d.dismissButton,onClick:D,children:[i.jsx(l.VisuallyHidden,{role:"presentation",children:"Close notification"}),i.jsx(s.CrossIcon,{"aria-hidden":!0})]})]}))};
 //# sourceMappingURL=toast.js.map

package/cjs/toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sources":["../../../src/toast/toast.tsx"],"sourcesContent":["import {\n    CrossIcon,\n    ExclamationCircleFillIcon,\n    ExclamationTriangleFillIcon,\n    ICircleFillIcon,\n    TickCircleFillIcon,\n} from \"@lifesg/react-icons\";\nimport { easings, useSpring } from \"@react-spring/web\";\nimport React, { useContext, useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\nimport { VisuallyHidden, inertValue } from \"../shared/accessibility\";\nimport { Breakpoint } from \"../theme\";\nimport {\n    ActionButton,\n    ContentWrapper,\n    DescriptionBL,\n    DescriptionMD,\n    DismissButton,\n    TextContainer,\n    TextIconWrapper,\n    Title,\n    Wrapper,\n} from \"./toast.styles\";\nimport { ToastProps } from \"./types\";\n\nconst DEFAULT_AUTO_DISMISS_TIME = 4000;\n\nconst TOAST_ICON_MAP = {\n    success: TickCircleFillIcon,\n    warning: ExclamationTriangleFillIcon,\n    error: ExclamationCircleFillIcon,\n    info: ICircleFillIcon,\n};\n\nexport const Toast = ({\n    type = \"success\",\n    title,\n    label,\n    autoDismiss,\n    autoDismissTime = DEFAULT_AUTO_DISMISS_TIME,\n    onDismiss,\n    fixed = true,\n    actionButton,\n    ...otherProps\n}: ToastProps) => {\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const toastRef = useRef<HTMLDivElement>(null);\n    const [isVisible, setVisible] = useState<boolean>(false);\n\n    const theme = useContext(ThemeContext);\n\n    const mobileBreakpoint = Breakpoint[\"lg-max\"]({ theme });\n    const isMobile = useMediaQuery({\n        maxWidth: mobileBreakpoint,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(true);\n    }, []);\n\n    useEffect(() => {\n        if (!autoDismiss) return;\n\n        const timeout = setTimeout(() => {\n            setVisible(false);\n        }, autoDismissTime);\n\n        return () => clearTimeout(timeout);\n    }, [autoDismiss]);\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (\n                event.key === \"Escape\" &&\n                toastRef.current?.contains(document.activeElement)\n            ) {\n                handleDismiss();\n            }\n        };\n\n        document.addEventListener(\"keydown\", handleKeyDown);\n        return () => {\n            document.removeEventListener(\"keydown\", handleKeyDown);\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = () => {\n        setVisible(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const transitions = useSpring({\n        opacity: isVisible ? 1 : 0,\n        transform: isVisible\n            ? isMobile\n                ? `translateY(0%)`\n                : `translateX(0%)`\n            : isMobile\n            ? `translateY(-1500%)`\n            : `translateX(150%)`,\n        config: {\n            easing: easings.easeInOutQuart,\n            duration: 1000,\n        },\n        onRest: () => {\n            if (!isVisible) onDismiss?.();\n        },\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIcon = () => {\n        const Icon = TOAST_ICON_MAP[type];\n        return Icon && <Icon aria-hidden />;\n    };\n\n    const renderTitle = () => {\n        if (React.isValidElement(title)) {\n            return title;\n        } else {\n            return (\n                <Title $type={type} role=\"presentation\">\n                    {title}\n                </Title>\n            );\n        }\n    };\n\n    const renderDesc = () => {\n        if (React.isValidElement(label)) {\n            return label;\n        } else if (title) {\n            return <DescriptionMD $type={type}>{label}</DescriptionMD>;\n        } else {\n            return <DescriptionBL $type={type}>{label}</DescriptionBL>;\n        }\n    };\n\n    return (\n        <Wrapper\n            ref={toastRef}\n            style={transitions}\n            $type={type}\n            $fixed={fixed}\n            role=\"alert\"\n            inert={inertValue(!isVisible)}\n            {...otherProps}\n        >\n            <VisuallyHidden>{type}</VisuallyHidden>\n            <ContentWrapper>\n                <TextIconWrapper $type={type}>\n                    {renderIcon()}\n                    <TextContainer>\n                        {title && renderTitle()}\n                        {label && renderDesc()}\n                    </TextContainer>\n                </TextIconWrapper>\n\n                {actionButton && (\n                    <ActionButton\n                        styleType=\"light\"\n                        onClick={actionButton.onClick}\n                    >\n                        {actionButton.label}\n                    </ActionButton>\n                )}\n            </ContentWrapper>\n            <DismissButton $type={type} onClick={handleDismiss}>\n                <VisuallyHidden role=\"presentation\">\n                    Close notification\n                </VisuallyHidden>\n                <CrossIcon aria-hidden />\n            </DismissButton>\n        </Wrapper>\n    );\n};\n"],"names":["DEFAULT_AUTO_DISMISS_TIME","TOAST_ICON_MAP","success","TickCircleFillIcon","warning","ExclamationTriangleFillIcon","error","ExclamationCircleFillIcon","info","ICircleFillIcon","_a","type","title","label","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton","otherProps","__rest","toastRef","useRef","isVisible","setVisible","useState","theme","useContext","ThemeContext","mobileBreakpoint","Breakpoint","isMobile","useMediaQuery","maxWidth","useEffect","timeout","setTimeout","clearTimeout","handleKeyDown","event","key","current","contains","document","activeElement","handleDismiss","addEventListener","removeEventListener","transitions","useSpring","opacity","transform","config","easing","easings","easeInOutQuart","duration","onRest","_jsxs","Wrapper","Object","assign","ref","style","$type","$fixed","role","inert","inertValue","children","_jsx","VisuallyHidden","ContentWrapper","TextIconWrapper","Icon","renderIcon","TextContainer","React","isValidElement","Title","DescriptionMD","DescriptionBL","ActionButton","styleType","onClick","DismissButton","CrossIcon"],"mappings":"ucA0BA,MAAMA,EAA4B,IAE5BC,EAAiB,CACnBC,QAASC,EAAAA,mBACTC,QAASC,EAAAA,4BACTC,MAAOC,EAAAA,0BACPC,KAAMC,EAAAA,+BAGYC,QAAAC,KAClBA,EAAO,UAASC,MAChBA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,gBACXA,EAAkBf,EAAyBgB,UAC3CA,EAASC,MACTA,GAAQ,EAAIC,aACZA,GAAYR,EACTS,EAAUC,EAAAA,OAAAV,EATK,CAAA,OAAA,QAAA,QAAA,cAAA,kBAAA,YAAA,QAAA,iBAclB,MAAMW,EAAWC,EAAAA,OAAuB,OACjCC,EAAWC,GAAcC,EAAAA,UAAkB,GAE5CC,EAAQC,EAAAA,WAAWC,gBAEnBC,EAAmBC,EAAAA,WAAW,UAAU,CAAEJ,UAC1CK,EAAWC,EAAAA,uBAAAA,cAAc,CAC3BC,SAAUJ,IAMdK,EAAAA,WAAU,KACNV,GAAW,EAAK,GACjB,IAEHU,EAAAA,WAAU,KACN,IAAKpB,EAAa,OAElB,MAAMqB,EAAUC,YAAW,KACvBZ,GAAW,EAAM,GAClBT,GAEH,MAAO,IAAMsB,aAAaF,EAAQ,GACnC,CAACrB,IAEJoB,EAAAA,WAAU,KACN,MAAMI,EAAiBC,UAED,WAAdA,EAAMC,MACU,QAAhB9B,EAAAW,EAASoB,eAAO,IAAA/B,OAAA,EAAAA,EAAEgC,SAASC,SAASC,iBAEpCC,GACJ,EAIJ,OADAF,SAASG,iBAAiB,UAAWR,GAC9B,KACHK,SAASI,oBAAoB,UAAWT,EAAc,CACzD,GACF,IAKH,MAAMO,EAAgB,KAClBrB,GAAW,EAAM,EAMfwB,EAAcC,EAAAA,UAAU,CAC1BC,QAAS3B,EAAY,EAAI,EACzB4B,UAAW5B,EACLQ,EACI,iBACA,iBACJA,EACA,qBACA,mBACNqB,OAAQ,CACJC,OAAQC,EAAAA,QAAQC,eAChBC,SAAU,KAEdC,OAAQ,KACClC,GAAWP,SAAAA,GAAa,IAkCrC,OACI0C,EAAAA,KAACC,UAAOC,OAAAC,OAAA,CACJC,IAAKzC,EACL0C,MAAOf,EAAWgB,MACXrD,EAAIsD,OACHhD,EACRiD,KAAK,QACLC,MAAOC,EAAAA,YAAY7C,IACfJ,EAAU,CAAAkD,SAAA,CAEdC,MAACC,EAAAA,eAAc,CAAAF,SAAE1D,IACjB+C,EAAAA,KAACc,EAAAA,eAAc,CAAAH,SAAA,CACXX,EAAAA,KAACe,EAAAA,gBAAe,CAAAT,MAAQrD,EAAI0D,SAAA,CAvCrB,MACf,MAAMK,EAAOzE,EAAeU,GAC5B,OAAO+D,GAAQJ,EAAAA,IAACI,qBAAmB,EAsCtBC,GACDjB,EAAAA,KAACkB,EAAAA,cAAa,CAAAP,SAAA,CACTzD,IApCbiE,EAAAA,QAAMC,eAAelE,GACdA,EAGH0D,EAAAA,IAACS,QAAK,CAAAf,MAAQrD,EAAMuD,KAAK,eAAcG,SAClCzD,KAgCIC,IAzBbgE,EAAAA,QAAMC,eAAejE,GACdA,EACAD,EACA0D,EAAAA,IAACU,EAAAA,cAAa,CAAAhB,MAAQrD,EAAI0D,SAAGxD,IAE7ByD,EAAAA,IAACW,EAAAA,cAAa,CAAAjB,MAAQrD,EAAI0D,SAAGxD,WAwB/BK,GACGoD,EAAAA,IAACY,EAAAA,aAAY,CACTC,UAAU,QACVC,QAASlE,EAAakE,QAAOf,SAE5BnD,EAAaL,WAI1B6C,OAAC2B,EAAAA,cAAa,CAAArB,MAAQrD,EAAMyE,QAASvC,EAAawB,SAAA,CAC9CC,EAAAA,IAACC,EAAAA,gBAAeL,KAAK,eAAcG,SAAA,uBAGnCC,MAACgB,EAAAA,UAAS,CAAA,eAAA,UAER"}
+{"version":3,"file":"toast.js","sources":["../../../src/toast/toast.tsx"],"sourcesContent":["import {\n    CrossIcon,\n    ExclamationCircleFillIcon,\n    ExclamationTriangleFillIcon,\n    ICircleFillIcon,\n    TickCircleFillIcon,\n} from \"@lifesg/react-icons\";\nimport { animated, easings, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./toast.styles\";\nimport type { ToastProps } from \"./types\";\n\nconst DEFAULT_AUTO_DISMISS_TIME = 4000;\nconst EASING_DURATION = 1000;\n\nconst TOAST_ICON_MAP = {\n    success: TickCircleFillIcon,\n    warning: ExclamationTriangleFillIcon,\n    error: ExclamationCircleFillIcon,\n    info: ICircleFillIcon,\n};\n\n// @catalog\n/**\n * A brief notification that appears on screen to provide feedback about an\n * operation or event.\n *\n * Use `Toast` to surface status messages without interrupting the user's workflow.\n * @keywords alert, feedback, notification, snackbar\n */\nexport const Toast = ({\n    type = \"success\",\n    title,\n    label,\n    className,\n    autoDismiss,\n    autoDismissTime = DEFAULT_AUTO_DISMISS_TIME,\n    onDismiss,\n    fixed = true,\n    actionButton,\n    ...otherProps\n}: ToastProps) => {\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const toastRef = useRef<HTMLDivElement>(null);\n    const [isVisible, setVisible] = useState<boolean>(false);\n\n    const isMobile = useMaxWidthMediaQuery(\"lg\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(true);\n    }, []);\n\n    useEffect(() => {\n        if (!autoDismiss) return;\n\n        const timeout = setTimeout(() => {\n            setVisible(false);\n        }, autoDismissTime);\n\n        return () => clearTimeout(timeout);\n    }, [autoDismiss, autoDismissTime]);\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (\n                event.key === \"Escape\" &&\n                toastRef.current?.contains(document.activeElement)\n            ) {\n                handleDismiss();\n            }\n        };\n\n        document.addEventListener(\"keydown\", handleKeyDown);\n        return () => {\n            document.removeEventListener(\"keydown\", handleKeyDown);\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = () => {\n        setVisible(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const transitions = useSpring({\n        opacity: isVisible ? 1 : 0,\n        transform: isVisible\n            ? isMobile\n                ? `translateY(0%)`\n                : `translateX(0%)`\n            : isMobile\n            ? `translateY(-1500%)`\n            : `translateX(150%)`,\n        config: {\n            easing: easings.easeInOutQuart,\n            duration: EASING_DURATION,\n        },\n        onRest: () => {\n            if (!isVisible) onDismiss?.();\n        },\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIcon = () => {\n        const Icon = TOAST_ICON_MAP[type];\n        return Icon && <Icon aria-hidden />;\n    };\n\n    const renderTitle = () => {\n        if (React.isValidElement(title)) {\n            return title;\n        } else {\n            return (\n                <h2 className={styles.title} role=\"presentation\">\n                    {title}\n                </h2>\n            );\n        }\n    };\n\n    const renderDesc = () => {\n        if (React.isValidElement(label)) {\n            return label;\n        } else if (title) {\n            return (\n                <Typography.BodyMD className={styles.description}>\n                    {label}\n                </Typography.BodyMD>\n            );\n        } else {\n            return (\n                <Typography.BodyBL className={styles.description}>\n                    {label}\n                </Typography.BodyBL>\n            );\n        }\n    };\n\n    return (\n        <animated.div\n            ref={toastRef}\n            style={transitions}\n            className={clsx(styles.wrapper, className)}\n            data-type={type}\n            data-fixed={fixed}\n            role=\"alert\"\n            inert={inertValue(!isVisible)}\n            {...otherProps}\n        >\n            <VisuallyHidden>{type}</VisuallyHidden>\n            <div className={styles.contentWrapper}>\n                <div className={styles.textIconWrapper} data-type={type}>\n                    {renderIcon()}\n                    <div className={styles.textContainer}>\n                        {title && renderTitle()}\n                        {label && renderDesc()}\n                    </div>\n                </div>\n\n                {actionButton && (\n                    <Button\n                        className={styles.actionButton}\n                        styleType=\"light\"\n                        onClick={actionButton.onClick}\n                        sizeType=\"small\"\n                    >\n                        {actionButton.label}\n                    </Button>\n                )}\n            </div>\n            <ClickableIcon\n                className={styles.dismissButton}\n                onClick={handleDismiss}\n            >\n                <VisuallyHidden role=\"presentation\">\n                    Close notification\n                </VisuallyHidden>\n                <CrossIcon aria-hidden />\n            </ClickableIcon>\n        </animated.div>\n    );\n};\n"],"names":["DEFAULT_AUTO_DISMISS_TIME","TOAST_ICON_MAP","success","TickCircleFillIcon","warning","ExclamationTriangleFillIcon","error","ExclamationCircleFillIcon","info","ICircleFillIcon","_a","type","title","label","className","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton","otherProps","__rest","toastRef","useRef","isVisible","setVisible","useState","isMobile","useMaxWidthMediaQuery","useEffect","timeout","setTimeout","clearTimeout","handleKeyDown","event","key","current","contains","document","activeElement","handleDismiss","addEventListener","removeEventListener","transitions","useSpring","opacity","transform","config","easing","easings","easeInOutQuart","duration","onRest","_jsxs","animated","div","Object","assign","ref","style","clsx","styles.wrapper","role","inert","inertValue","children","_jsx","VisuallyHidden","styles.contentWrapper","styles.textIconWrapper","Icon","renderIcon","styles.textContainer","React","isValidElement","styles.title","Typography","BodyMD","styles.description","BodyBL","Button","styles.actionButton","styleType","onClick","sizeType","ClickableIcon","styles.dismissButton","CrossIcon"],"mappings":"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"}

package/cjs/toast/toast.styles.js

@@ -1,99 +1,2 @@
-"use strict";var e=require("@react-spring/web"),r=require("styled-components"),t=require("../button/button.js"),o=require("../shared/clickable-icon/clickable-icon.js"),i=require("../theme/index.js"),n=require("../typography/typography.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=a(r);const d=e=>{const r={success:{Background:"bg-success",Border:"border-success",Text:"text-success",Icon:"icon-success"},warning:{Background:"bg-warning",Border:"border-warning",Text:"text-warning",Icon:"icon-warning"},error:{Background:"bg-error",Border:"border-error",Text:"text-error",Icon:"icon-error"},info:{Background:"bg-info",Border:"border-info",Text:"text-info",Icon:"icon-info"}}[e.$type];return{Background:i.Colour[r.Background],Border:i.Colour[r.Border],Text:i.Colour[r.Text],Icon:i.Colour[r.Icon]}},c=e.animated(s.default.div`
-    display: flex;
-    flex-direction: row;
-    position: ${e=>e.$fixed?"fixed":"relative"};
-    margin: ${e=>e.$fixed?"1rem":0};
-    top: 0;
-    right: 0;
-    padding: 1rem;
-    border-radius: ${i.Radius.md};
-    z-index: 10;
-    align-items: center;
-    gap: 2rem;
-
-    ${i.MediaQuery.MaxWidth.lg} {
-        left: 0;
-    }
-
-    ${e=>r.css`
-            background: ${d(e).Background};
-            border: 1px solid ${d(e).Border};
-            color: ${d(e).Text};
-        `};
-`),l=s.default.div`
-    display: flex;
-    align-items: center;
-    gap: 2rem;
-    flex: 1;
-    justify-content: space-between;
-
-    ${i.MediaQuery.MaxWidth.sm} {
-        display: flex;
-        align-items: flex-start;
-        flex-direction: column;
-        gap: 0.75rem;
-    }
-`,u=s.default.div`
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-
-    ${e=>r.css`
-            & > svg {
-                flex-shrink: 0;
-                width: 1.5rem;
-                height: 1.5rem;
-                margin-top: 0.0625rem;
-                margin-right: 0.5rem;
-                color: ${d(e).Icon};
-            }
-        `};
-`,x=s.default.div`
-    display: flex;
-    flex-direction: column;
-`,g=s.default.h2`
-    display: flex;
-    ${i.Font["body-baseline-semibold"]}
-
-    ${e=>r.css`
-            color: ${d(e).Text};
-        `}
-`,f=s.default(n.Typography.BodyMD)`
-    ${e=>r.css`
-            color: ${d(e).Text};
-        `}
-`,p=s.default(n.Typography.BodyBL)`
-    ${e=>r.css`
-            color: ${d(e).Text};
-        `}
-`,m=s.default(t.Button.Small)`
-    align-self: center;
-    margin-left: auto;
-    height: auto;
-    width: fit-content;
-    flex-shrink: 0;
-
-    ${i.MediaQuery.MaxWidth.sm} {
-        align-self: flex-start;
-        margin-left: 2rem;
-    }
-`,h=s.default(o.ClickableIcon)`
-    padding: 0.75rem;
-    margin: -0.75rem;
-    align-self: stretch;
-
-    ${e=>r.css`
-            svg {
-                width: 1.5rem;
-                height: 1.5rem;
-                color: ${d(e).Text};
-            }
-            &:hover {
-                background: transparent;
-            }
-            ${i.MediaQuery.MaxWidth.sm} {
-                align-self: center;
-            }
-        `};
-`;exports.ActionButton=m,exports.ContentWrapper=l,exports.DescriptionBL=p,exports.DescriptionMD=f,exports.DismissButton=h,exports.TextContainer=x,exports.TextIconWrapper=u,exports.Title=g,exports.Wrapper=c;
+"use strict";require("./toast.styles_57j3lf.css");exports.actionButton="a10z10pl",exports.contentWrapper="c1ll5mdk",exports.description="dmmbr7j",exports.dismissButton="d1jd4l4i",exports.textContainer="t1j1n9on",exports.textIconWrapper="t1mt05g8",exports.title="t1see4ey",exports.wrapper="wqf508q";
 //# sourceMappingURL=toast.styles.js.map

package/cjs/toast/toast.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.styles.js","sources":["../../../src/toast/toast.styles.tsx"],"sourcesContent":["import { animated } from \"@react-spring/web\";\nimport styled, { css } from \"styled-components\";\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\nimport { SemanticColourSet } from \"../theme/types\";\nimport { Typography } from \"../typography/typography\";\nimport { ToastType } from \"./types\";\n\n//=============================================================================\n// STYLE INTERFACE\n//=============================================================================\ninterface StyleProps {\n    $type: ToastType;\n    $fixed?: boolean | undefined;\n}\n\nconst getValidationColorAttributes = (props: StyleProps) => {\n    const type = props.$type;\n\n    const typeMapping: Record<\n        ToastType,\n        Record<string, keyof SemanticColourSet>\n    > = {\n        success: {\n            Background: \"bg-success\",\n            Border: \"border-success\",\n            Text: \"text-success\",\n            Icon: \"icon-success\",\n        },\n        warning: {\n            Background: \"bg-warning\",\n            Border: \"border-warning\",\n            Text: \"text-warning\",\n            Icon: \"icon-warning\",\n        },\n        error: {\n            Background: \"bg-error\",\n            Border: \"border-error\",\n            Text: \"text-error\",\n            Icon: \"icon-error\",\n        },\n        info: {\n            Background: \"bg-info\",\n            Border: \"border-info\",\n            Text: \"text-info\",\n            Icon: \"icon-info\",\n        },\n    };\n\n    const selectedTypeMapping = typeMapping[type];\n\n    return {\n        Background: Colour[selectedTypeMapping.Background],\n        Border: Colour[selectedTypeMapping.Border],\n        Text: Colour[selectedTypeMapping.Text],\n        Icon: Colour[selectedTypeMapping.Icon],\n    };\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = animated(styled.div<StyleProps>`\n    display: flex;\n    flex-direction: row;\n    position: ${(props) => (props.$fixed ? \"fixed\" : \"relative\")};\n    margin: ${(props) => (props.$fixed ? \"1rem\" : 0)};\n    top: 0;\n    right: 0;\n    padding: 1rem;\n    border-radius: ${Radius[\"md\"]};\n    z-index: 10;\n    align-items: center;\n    gap: 2rem;\n\n    ${MediaQuery.MaxWidth.lg} {\n        left: 0;\n    }\n\n    ${(props) => {\n        return css`\n            background: ${getValidationColorAttributes(props).Background};\n            border: 1px solid ${getValidationColorAttributes(props).Border};\n            color: ${getValidationColorAttributes(props).Text};\n        `;\n    }};\n`);\n\nexport const ContentWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    gap: 2rem;\n    flex: 1;\n    justify-content: space-between;\n\n    ${MediaQuery.MaxWidth.sm} {\n        display: flex;\n        align-items: flex-start;\n        flex-direction: column;\n        gap: 0.75rem;\n    }\n`;\n\nexport const TextIconWrapper = styled.div<StyleProps>`\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n\n    ${(props) => {\n        return css`\n            & > svg {\n                flex-shrink: 0;\n                width: 1.5rem;\n                height: 1.5rem;\n                margin-top: 0.0625rem;\n                margin-right: 0.5rem;\n                color: ${getValidationColorAttributes(props).Icon};\n            }\n        `;\n    }};\n`;\n\nexport const TextContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const Title = styled.h2<StyleProps>`\n    display: flex;\n    ${Font[\"body-baseline-semibold\"]}\n\n    ${(props) => {\n        return css`\n            color: ${getValidationColorAttributes(props).Text};\n        `;\n    }}\n`;\n\nexport const DescriptionMD = styled(Typography.BodyMD)<StyleProps>`\n    ${(props) => {\n        return css`\n            color: ${getValidationColorAttributes(props).Text};\n        `;\n    }}\n`;\n\nexport const DescriptionBL = styled(Typography.BodyBL)<StyleProps>`\n    ${(props) => {\n        return css`\n            color: ${getValidationColorAttributes(props).Text};\n        `;\n    }}\n`;\n\nexport const ActionButton = styled(Button.Small)`\n    align-self: center;\n    margin-left: auto;\n    height: auto;\n    width: fit-content;\n    flex-shrink: 0;\n\n    ${MediaQuery.MaxWidth.sm} {\n        align-self: flex-start;\n        margin-left: 2rem;\n    }\n`;\n\nexport const DismissButton = styled(ClickableIcon)<StyleProps>`\n    padding: 0.75rem;\n    margin: -0.75rem;\n    align-self: stretch;\n\n    ${(props) => {\n        return css`\n            svg {\n                width: 1.5rem;\n                height: 1.5rem;\n                color: ${getValidationColorAttributes(props).Text};\n            }\n            &:hover {\n                background: transparent;\n            }\n            ${MediaQuery.MaxWidth.sm} {\n                align-self: center;\n            }\n        `;\n    }};\n`;\n"],"names":["getValidationColorAttributes","props","selectedTypeMapping","success","Background","Border","Text","Icon","warning","error","info","$type","Colour","Wrapper","animated","styled","div","$fixed","Radius","MediaQuery","MaxWidth","lg","css","ContentWrapper","sm","TextIconWrapper","TextContainer","Title","h2","Font","DescriptionMD","Typography","BodyMD","DescriptionBL","BodyBL","ActionButton","Button","Small","DismissButton","ClickableIcon"],"mappings":"mUAiBA,MAAMA,EAAgCC,IAClC,MAgCMC,EA3BF,CACAC,QAAS,CACLC,WAAY,aACZC,OAAQ,iBACRC,KAAM,eACNC,KAAM,gBAEVC,QAAS,CACLJ,WAAY,aACZC,OAAQ,iBACRC,KAAM,eACNC,KAAM,gBAEVE,MAAO,CACHL,WAAY,WACZC,OAAQ,eACRC,KAAM,aACNC,KAAM,cAEVG,KAAM,CACFN,WAAY,UACZC,OAAQ,cACRC,KAAM,YACNC,KAAM,cA5BDN,EAAMU,OAkCnB,MAAO,CACHP,WAAYQ,EAAAA,OAAOV,EAAoBE,YACvCC,OAAQO,EAAAA,OAAOV,EAAoBG,QACnCC,KAAMM,EAAAA,OAAOV,EAAoBI,MACjCC,KAAMK,EAAAA,OAAOV,EAAoBK,MACpC,EAMQM,EAAUC,EAAAA,SAASC,EAAAA,QAAOC,GAAe;;;gBAGrCf,GAAWA,EAAMgB,OAAS,QAAU;cACtChB,GAAWA,EAAMgB,OAAS,OAAS;;;;qBAI7BC,EAAAA,OAAW;;;;;MAK1BC,EAAAA,WAAWC,SAASC;;;;MAInBpB,GACQqB,KAAG;0BACQtB,EAA6BC,GAAOG;gCAC9BJ,EAA6BC,GAAOI;qBAC/CL,EAA6BC,GAAOK;;GAK5CiB,EAAiBR,EAAAA,QAAOC,GAAG;;;;;;;MAOlCG,EAAAA,WAAWC,SAASI;;;;;;EAQbC,EAAkBV,EAAAA,QAAOC,GAAe;;;;;MAK9Cf,GACQqB,KAAG;;;;;;;yBAOOtB,EAA6BC,GAAOM;;;EAMhDmB,EAAgBX,EAAAA,QAAOC,GAAG;;;EAK1BW,EAAQZ,EAAAA,QAAOa,EAAc;;MAEpCC,EAAAA,KAAK;;MAEJ5B,GACQqB,KAAG;qBACGtB,EAA6BC,GAAOK;;EAK5CwB,EAAgBf,EAAAA,QAAOgB,aAAWC,OAAmB;MAC3D/B,GACQqB,KAAG;qBACGtB,EAA6BC,GAAOK;;EAK5C2B,EAAgBlB,EAAAA,QAAOgB,aAAWG,OAAmB;MAC3DjC,GACQqB,KAAG;qBACGtB,EAA6BC,GAAOK;;EAK5C6B,EAAepB,EAAAA,QAAOqB,SAAOC,MAAM;;;;;;;MAO1ClB,EAAAA,WAAWC,SAASI;;;;EAMbc,EAAgBvB,EAAAA,QAAOwB,EAAAA,cAA0B;;;;;MAKvDtC,GACQqB,KAAG;;;;yBAIOtB,EAA6BC,GAAOK;;;;;cAK/Ca,EAAAA,WAAWC,SAASI;;;;"}
+{"version":3,"file":"toast.styles.js","sources":["../../../src/toast/toast.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\n\nexport const wrapper = css`\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    margin: 0;\n    top: 0;\n    right: 0;\n    padding: 1rem;\n    border-radius: ${Radius[\"md\"]};\n    z-index: 10;\n    align-items: center;\n    gap: 2rem;\n\n    ${MediaQuery.MaxWidth.lg} {\n        left: 0;\n    }\n\n    &[data-fixed=\"true\"] {\n        position: fixed;\n        margin: 1rem;\n    }\n\n    &[data-type=\"success\"] {\n        background: ${Colour[\"bg-success\"]};\n        border: 1px solid ${Colour[\"border-success\"]};\n        color: ${Colour[\"text-success\"]};\n    }\n\n    &[data-type=\"warning\"] {\n        background: ${Colour[\"bg-warning\"]};\n        border: 1px solid ${Colour[\"border-warning\"]};\n        color: ${Colour[\"text-warning\"]};\n    }\n\n    &[data-type=\"error\"] {\n        background: ${Colour[\"bg-error\"]};\n        border: 1px solid ${Colour[\"border-error\"]};\n        color: ${Colour[\"text-error\"]};\n    }\n\n    &[data-type=\"info\"] {\n        background: ${Colour[\"bg-info\"]};\n        border: 1px solid ${Colour[\"border-info\"]};\n        color: ${Colour[\"text-info\"]};\n    }\n`;\n\nexport const contentWrapper = css`\n    display: flex;\n    align-items: center;\n    gap: 2rem;\n    flex: 1;\n    justify-content: space-between;\n\n    ${MediaQuery.MaxWidth.sm} {\n        display: flex;\n        align-items: flex-start;\n        flex-direction: column;\n        gap: 0.75rem;\n    }\n`;\n\nexport const textIconWrapper = css`\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n\n    & > svg {\n        flex-shrink: 0;\n        width: 1.5rem;\n        height: 1.5rem;\n        margin-top: 0.0625rem;\n        margin-right: 0.5rem;\n    }\n\n    &[data-type=\"success\"] > svg {\n        color: ${Colour[\"icon-success\"]};\n    }\n\n    &[data-type=\"warning\"] > svg {\n        color: ${Colour[\"icon-warning\"]};\n    }\n\n    &[data-type=\"error\"] > svg {\n        color: ${Colour[\"icon-error\"]};\n    }\n\n    &[data-type=\"info\"] > svg {\n        color: ${Colour[\"icon-info\"]};\n    }\n`;\n\nexport const textContainer = css`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const title = css`\n    display: flex;\n    ${Font[\"body-baseline-semibold\"]}\n    color: inherit;\n`;\n\nexport const description = css`\n    color: inherit;\n`;\n\nexport const actionButton = css`\n    align-self: center;\n    margin-left: auto;\n    width: fit-content;\n    flex-shrink: 0;\n\n    ${MediaQuery.MaxWidth.sm} {\n        align-self: flex-start;\n        margin-left: 2rem;\n    }\n`;\n\nexport const dismissButton = css`\n    padding: 0.75rem;\n    margin: -0.75rem;\n    align-self: stretch;\n    color: inherit;\n\n    &:hover {\n        background: transparent;\n    }\n\n    svg {\n        width: 1.5rem;\n        height: 1.5rem;\n        color: inherit;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        align-self: center;\n    }\n`;\n"],"names":[],"mappings":"4FA+GyB,kCA5DE,+BAwDH,gCAgBE,iCA3BA,mCA9BE,yBAmCV,2BAjGE"}

package/cjs/toast/toast.styles_57j3lf.css

@@ -0,0 +1,8 @@
+@layer fds{.wqf508q{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;position:relative;margin:0;top:0;right:0;padding:1rem;border-radius:var(--fds-radius-md);z-index:10;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:2rem;}:where(body.fds-breakpoint-lg-max) .wqf508q{left:0;}.wqf508q[data-fixed="true"]{position:fixed;margin:1rem;}.wqf508q[data-type="success"]{background:var(--fds-colour-bg-success);border:1px solid var(--fds-colour-border-success);color:var(--fds-colour-text-success);}.wqf508q[data-type="warning"]{background:var(--fds-colour-bg-warning);border:1px solid var(--fds-colour-border-warning);color:var(--fds-colour-text-warning);}.wqf508q[data-type="error"]{background:var(--fds-colour-bg-error);border:1px solid var(--fds-colour-border-error);color:var(--fds-colour-text-error);}.wqf508q[data-type="info"]{background:var(--fds-colour-bg-info);border:1px solid var(--fds-colour-border-info);color:var(--fds-colour-text-info);}
+.c1ll5mdk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:2rem;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;}:where(body.fds-breakpoint-sm-max) .c1ll5mdk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0.75rem;}
+.t1mt05g8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.t1mt05g8>svg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:1.5rem;height:1.5rem;margin-top:0.0625rem;margin-right:0.5rem;}.t1mt05g8[data-type="success"]>svg{color:var(--fds-colour-icon-success);}.t1mt05g8[data-type="warning"]>svg{color:var(--fds-colour-icon-warning);}.t1mt05g8[data-type="error"]>svg{color:var(--fds-colour-icon-error);}.t1mt05g8[data-type="info"]>svg{color:var(--fds-colour-icon-info);}
+.t1j1n9on{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.t1see4ey{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:inherit;}
+.dmmbr7j{color:inherit;}
+.a10z10pl{-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;margin-left:auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}:where(body.fds-breakpoint-sm-max) .a10z10pl{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;margin-left:2rem;}
+.d1jd4l4i{padding:0.75rem;margin:-0.75rem;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;color:inherit;}.d1jd4l4i:hover{background:transparent;}.d1jd4l4i svg{width:1.5rem;height:1.5rem;color:inherit;}:where(body.fds-breakpoint-sm-max) .d1jd4l4i{-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;}}

package/cjs/toggle/toggle-icon.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),r=require("@lifesg/react-icons/circle"),c=require("@lifesg/react-icons/circle-dot"),i=require("@lifesg/react-icons/cross"),s=require("@lifesg/react-icons/square"),a=require("@lifesg/react-icons/square-tick-fill"),t=require("@lifesg/react-icons/tick"),l=require("clsx"),o=require("./toggle-icon.styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=n(l);exports.ToggleIcon=({type:l,active:n=!1,disabled:d,className:f,error:p})=>{let q;switch(l){case"checkbox":q=n?e.jsx(a.SquareTickFillIcon,{}):e.jsx(s.SquareIcon,{});break;case"radio":q=n?e.jsx(c.CircleDotIcon,{}):e.jsx(r.CircleIcon,{});break;case"tick":q=e.jsx(t.TickIcon,{});break;case"cross":q=e.jsx(i.CrossIcon,{});break;default:q=null}return e.jsx("div",{className:u.default(o.wrapperBase,n?d?o.wrapperActiveDisabled:p?o.wrapperError:o.wrapperActive:d?o.wrapperDisabled:void 0,f),"aria-hidden":!0,children:q})};
+//# sourceMappingURL=toggle-icon.js.map

package/cjs/toggle/toggle-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-icon.js","sources":["../../../src/toggle/toggle-icon.tsx"],"sourcesContent":["import { CircleIcon } from \"@lifesg/react-icons/circle\";\nimport { CircleDotIcon } from \"@lifesg/react-icons/circle-dot\";\nimport { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { SquareIcon } from \"@lifesg/react-icons/square\";\nimport { SquareTickFillIcon } from \"@lifesg/react-icons/square-tick-fill\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\n\nimport * as styles from \"./toggle-icon.styles\";\n\nexport type ToggleIconType = \"checkbox\" | \"radio\" | \"tick\" | \"cross\";\n\nexport interface ToggleIconProps {\n    type: ToggleIconType;\n    active?: boolean | undefined;\n    disabled?: boolean | undefined;\n    error?: boolean | undefined;\n    className?: string | undefined;\n}\n\nexport const ToggleIcon = ({\n    type,\n    active = false,\n    disabled,\n    className,\n    error,\n}: ToggleIconProps) => {\n    let component: JSX.Element | null;\n\n    const getWrapperStateClass = () => {\n        if (active) {\n            if (disabled) {\n                return styles.wrapperActiveDisabled;\n            }\n\n            if (error) {\n                return styles.wrapperError;\n            }\n\n            return styles.wrapperActive;\n        }\n\n        if (disabled) {\n            return styles.wrapperDisabled;\n        }\n\n        return undefined;\n    };\n\n    switch (type) {\n        case \"checkbox\":\n            component = active ? <SquareTickFillIcon /> : <SquareIcon />;\n            break;\n        case \"radio\":\n            component = active ? <CircleDotIcon /> : <CircleIcon />;\n            break;\n        case \"tick\":\n            component = <TickIcon />;\n            break;\n        case \"cross\":\n            component = <CrossIcon />;\n            break;\n        default:\n            component = null;\n            break;\n    }\n\n    return (\n        <div\n            className={clsx(\n                styles.wrapperBase,\n                getWrapperStateClass(),\n                className\n            )}\n            aria-hidden\n        >\n            {component}\n        </div>\n    );\n};\n"],"names":["type","active","disabled","className","error","component","_jsx","SquareTickFillIcon","SquareIcon","CircleDotIcon","CircleIcon","TickIcon","CrossIcon","clsx","styles.wrapperBase","styles.wrapperActiveDisabled","styles.wrapperError","styles.wrapperActive","styles.wrapperDisabled"],"mappings":"wcAoB0B,EACtBA,OACAC,UAAS,EACTC,WACAC,YACAC,YAEA,IAAIC,EAsBJ,OAAQL,GACJ,IAAK,WACDK,EAAYJ,EAASK,EAAAA,IAACC,EAAAA,mBAAkB,CAAA,GAAMD,EAAAA,IAACE,EAAAA,eAC/C,MACJ,IAAK,QACDH,EAAYJ,EAASK,EAAAA,IAACG,EAAAA,cAAa,CAAA,GAAMH,EAAAA,IAACI,EAAAA,eAC1C,MACJ,IAAK,OACDL,EAAYC,EAAAA,IAACK,EAAAA,SAAQ,IACrB,MACJ,IAAK,QACDN,EAAYC,EAAAA,IAACM,EAAAA,UAAS,IACtB,MACJ,QACIP,EAAY,KAIpB,OACIC,EAAAA,IAAA,MAAA,CACIH,UAAWU,EAAAA,QACPC,EAAAA,YAxCJb,EACIC,EACOa,EAAAA,sBAGPX,EACOY,EAAAA,aAGJC,EAAAA,cAGPf,EACOgB,EAAAA,qBADX,EA8BQf,6BAIHE,GACC"}

package/cjs/toggle/toggle-icon.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./toggle-icon.styles_o6dxr3.css");exports.wrapperActive="w1d4lch6",exports.wrapperActiveDisabled="w1egk5xb",exports.wrapperBase="wxufi5f",exports.wrapperDisabled="wo9gzbp",exports.wrapperError="w1tlwg9n";
+//# sourceMappingURL=toggle-icon.styles.js.map

package/cjs/toggle/toggle-icon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-icon.styles.js","sources":["../../../src/toggle/toggle-icon.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const wrapperBase = css`\n    height: 1.625rem;\n    width: 1.625rem;\n    margin-right: 0.5rem;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-subtle\"]};\n\n    svg {\n        height: 100%;\n        width: 100%;\n    }\n`;\n\nexport const wrapperDisabled = css`\n    color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\nexport const wrapperError = css`\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const wrapperActive = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const wrapperActiveDisabled = css`\n    color: ${Colour[\"icon-selected-disabled\"]};\n`;\n"],"names":[],"mappings":"oGA4B0B,yCAIQ,+BAzBV,kCAaI,+BAIH"}

package/cjs/toggle/toggle-icon.styles_o6dxr3.css

@@ -0,0 +1,5 @@
+@layer fds{.wxufi5f{height:1.625rem;width:1.625rem;margin-right:0.5rem;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon-subtle);}.wxufi5f svg{height:100%;width:100%;}
+.wo9gzbp{color:var(--fds-colour-icon-disabled-subtle);}
+.w1tlwg9n{color:var(--fds-colour-icon-error-strong);}
+.w1d4lch6{color:var(--fds-colour-icon-selected);}
+.w1egk5xb{color:var(--fds-colour-icon-selected-disabled);}}