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

package/progress-indicator/progress-indicator.style.d.ts

@@ -2,14 +2,46 @@ export declare const INDICATOR_BAR_MARGIN_RIGHT_TABLET = 0.5;
 interface IndicatorProps {
     $highlighted: boolean;
 }
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const IndicatorBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IndicatorProps>> & string;
-export declare const IndicatorTitleDesktop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, IndicatorProps>> & string;
-export declare const IndicatorTitleTablet: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const Indicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const IndicatorBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$highlighted"> & IndicatorProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$highlighted"> & IndicatorProps, never>>> & string;
+export declare const IndicatorTitleDesktop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, "$highlighted"> & IndicatorProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, "$highlighted"> & IndicatorProps, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const IndicatorTitleTablet: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const Indicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export {};

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

@@ -1,2 +1,2 @@
 import type { RadioButtonProps } from "./types";
-export declare const RadioButton: ({ className, checked, disabled, displaySize, onChange, ...otherProps }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioButton: ({ className, checked, disabled, displaySize, focusableWhenDisabled, onChange, tabIndex, ...otherProps }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;

package/radio-button/radio-button.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as a,jsx as d}from"react/jsx-runtime";import{Container as i,Input as t,StyledCheckedIcon as s,StyledUnCheckedIcon as r}from"./radio-button.styles.js";const l=l=>{var{className:o,checked:c,disabled:n,displaySize:h="default",onChange:b}=l,m=e(l,["className","checked","disabled","displaySize","onChange"]);return a(i,{$selected:c,$disabled:n,className:o,$displaySize:h,"data-testid":"radio-button",children:[d(t,Object.assign({type:"radio","data-testid":"radio-input",onChange:e=>{n||null==b||b(e)},checked:c,disabled:n},m)),c?d(s,{"data-testid":"radio-checked",$disabled:n,"aria-hidden":!0}):d(r,{"data-testid":"radio-unchecked",$disabled:n,"aria-hidden":!0})]})};export{l as RadioButton};
+import{__rest as a}from"../_virtual/_tslib.js";import{jsxs as e,jsx as d}from"react/jsx-runtime";import{CircleDotIcon as i,CircleIcon as t}from"@lifesg/react-icons";import s from"clsx";import{input as r,inputActive as l,container as n,icon as o,checkedIconDisabled as c,checkedIcon as m,uncheckedIconDisabled as b,uncheckedIcon as h}from"./radio-button.styles.js";const p=p=>{var{className:u,checked:f,disabled:x,displaySize:N="default",focusableWhenDisabled:g,onChange:k,tabIndex:y}=p,j=a(p,["className","checked","disabled","displaySize","focusableWhenDisabled","onChange","tabIndex"]);const v=!!x&&!!g,z=!!x&&!g;return e("div",{className:s(n,u),"data-display-size":N,"data-testid":"radio-button",children:[d("input",Object.assign({type:"radio","data-testid":"radio-input",onChange:a=>{x?a.preventDefault():null==k||k(a)},checked:f,disabled:z,"aria-disabled":v,tabIndex:v?0:y,className:s(r,!x&&l)},j)),f?d(i,{"data-testid":"radio-checked",className:s(o,x?c:m),"aria-hidden":!0}):d(t,{"data-testid":"radio-unchecked",className:s(o,x?b:h),"aria-hidden":!0})]})};export{p as RadioButton};
 //# sourceMappingURL=radio-button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio-button.js","sources":["../../src/radio-button/radio-button.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport {\n    Container,\n    Input,\n    StyledCheckedIcon,\n    StyledUnCheckedIcon,\n} from \"./radio-button.styles\";\nimport type { RadioButtonProps } from \"./types\";\n\nexport const RadioButton = ({\n    className,\n    checked,\n    disabled,\n    displaySize = \"default\",\n    onChange,\n    ...otherProps\n}: RadioButtonProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (!disabled) {\n            onChange?.(event);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderIcon = () => {\n        return checked ? (\n            <StyledCheckedIcon\n                data-testid=\"radio-checked\"\n                $disabled={disabled}\n                aria-hidden\n            />\n        ) : (\n            <StyledUnCheckedIcon\n                data-testid=\"radio-unchecked\"\n                $disabled={disabled}\n                aria-hidden\n            />\n        );\n    };\n\n    return (\n        <Container\n            $selected={checked}\n            $disabled={disabled}\n            className={className}\n            $displaySize={displaySize}\n            data-testid=\"radio-button\"\n        >\n            <Input\n                type=\"radio\"\n                data-testid=\"radio-input\"\n                onChange={handleOnChange}\n                checked={checked}\n                disabled={disabled}\n                {...otherProps}\n            />\n            {renderIcon()}\n        </Container>\n    );\n};\n"],"names":["RadioButton","_a","className","checked","disabled","displaySize","onChange","otherProps","__rest","_jsxs","Container","$selected","$disabled","$displaySize","children","_jsx","Input","Object","assign","type","event","StyledCheckedIcon","StyledUnCheckedIcon"],"mappings":"iNAUO,MAAMA,EAAeC,IAAA,IAAAC,UACxBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,YACRA,EAAc,UAASC,SACvBA,GAAQL,EACLM,EAAUC,EAAAP,EANW,6DAqCxB,OACIQ,EAACC,EAAS,CAAAC,UACKR,EAAOS,UACPR,EACXF,UAAWA,EAASW,aACNR,gBACF,eAAcS,SAAA,CAE1BC,EAACC,EAAKC,OAAAC,OAAA,CACFC,KAAK,sBACO,cACZb,SArCYc,IACfhB,GACDE,SAAAA,EAAWc,EACf,EAmCQjB,QAASA,EACTC,SAAUA,GACNG,IA7BLJ,EACHY,EAACM,EAAiB,CAAA,cACF,gBAAeT,UAChBR,EAAQ,eAAA,IAIvBW,EAACO,EAAmB,CAAA,cACJ,kBAAiBV,UAClBR,EAAQ,eAAA,MAuBf"}
+{"version":3,"file":"radio-button.js","sources":["../../src/radio-button/radio-button.tsx"],"sourcesContent":["import { CircleDotIcon, CircleIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport type { ChangeEvent } from \"react\";\n\nimport * as styles from \"./radio-button.styles\";\nimport type { RadioButtonProps } from \"./types\";\n\nexport const RadioButton = ({\n    className,\n    checked,\n    disabled,\n    displaySize = \"default\",\n    focusableWhenDisabled,\n    onChange,\n    tabIndex,\n    ...otherProps\n}: RadioButtonProps) => {\n    // =============================================================================\n    // CONST\n    // =============================================================================\n    const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        onChange?.(event);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderIcon = () => {\n        return checked ? (\n            <CircleDotIcon\n                data-testid=\"radio-checked\"\n                className={clsx(\n                    styles.icon,\n                    disabled ? styles.checkedIconDisabled : styles.checkedIcon\n                )}\n                aria-hidden\n            />\n        ) : (\n            <CircleIcon\n                data-testid=\"radio-unchecked\"\n                className={clsx(\n                    styles.icon,\n                    disabled\n                        ? styles.uncheckedIconDisabled\n                        : styles.uncheckedIcon\n                )}\n                aria-hidden\n            />\n        );\n    };\n\n    return (\n        <div\n            className={clsx(styles.container, className)}\n            data-display-size={displaySize}\n            data-testid=\"radio-button\"\n        >\n            <input\n                type=\"radio\"\n                data-testid=\"radio-input\"\n                onChange={handleOnChange}\n                checked={checked}\n                disabled={isNativeDisabled}\n                aria-disabled={isFocusableWhenDisabled}\n                tabIndex={isFocusableWhenDisabled ? 0 : tabIndex}\n                className={clsx(styles.input, !disabled && styles.inputActive)}\n                {...otherProps}\n            />\n            {renderIcon()}\n        </div>\n    );\n};\n"],"names":["RadioButton","_a","className","checked","disabled","displaySize","focusableWhenDisabled","onChange","tabIndex","otherProps","__rest","isFocusableWhenDisabled","isNativeDisabled","_jsxs","clsx","styles.container","children","_jsx","Object","assign","type","event","preventDefault","styles.input","styles.inputActive","CircleDotIcon","styles.icon","styles.checkedIconDisabled","styles.checkedIcon","CircleIcon","styles.uncheckedIconDisabled","styles.uncheckedIcon"],"mappings":"4WAOO,MAAMA,EAAeC,QAAAC,UACxBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,YACRA,EAAc,UAASC,sBACvBA,EAAqBC,SACrBA,EAAQC,SACRA,GAAQP,EACLQ,EAAUC,EAAAT,EARW,gGAaxB,MAAMU,IAA4BP,KAAcE,EAC1CM,IAAqBR,IAAaE,EAyCxC,OACIO,EAAA,MAAA,CACIX,UAAWY,EAAKC,EAAkBb,GAAU,oBACzBG,gBACP,eAAcW,SAAA,CAE1BC,EAAA,QAAAC,OAAAC,OAAA,CACIC,KAAK,QAAO,cACA,cACZb,SA7CYc,IAChBjB,EACAiB,EAAMC,iBAIVf,SAAAA,EAAWc,EAAM,EAwCTlB,QAASA,EACTC,SAAUQ,EAAgB,gBACXD,EACfH,SAAUG,EAA0B,EAAIH,EACxCN,UAAWY,EAAKS,GAAenB,GAAYoB,IACvCf,IAtCLN,EACHc,EAACQ,EAAa,CAAA,cACE,gBACZvB,UAAWY,EACPY,EACAtB,EAAWuB,EAA6BC,sBAKhDX,EAACY,EAAU,CAAA,cACK,kBACZ3B,UAAWY,EACPY,EACAtB,EACM0B,EACAC,GACT,eAAA,MAwBH"}

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

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

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

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

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

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

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

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

package/radio-button/types.d.ts

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"schedule-day-view.js","sources":["../../../src/schedule/schedule-day-view/schedule-day-view.tsx"],"sourcesContent":["import { ChevronLeftIcon, ChevronRightIcon } from \"@lifesg/react-icons\";\nimport { useMemo, useRef } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport { DateHelper } from \"../../util/date-helper\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport {\n    calculateSlotOffset,\n    findSlotsStartingInTimeRange,\n    isTimeCellCovered,\n    minutesToTime,\n    useInitialScroll,\n    useTimelineOffset,\n} from \"../shared\";\nimport { WithOptionalPopover } from \"../shared/with-optional-popover\";\nimport { TimeIndicator } from \"../time-indicator/time-indicator\";\nimport type { ScheduleEntityProps, ScheduleSlotProps } from \"../types\";\nimport {\n    ArrowButton,\n    ArrowContainer,\n    BlankCell,\n    BodyContainer,\n    Description,\n    EmptySlot,\n    HeaderContainer,\n    LoadingContainer,\n    ScheduleContainer,\n    ServiceColumn,\n    ServiceContainer,\n    ServiceHeaderContainer,\n    SlotAvailability,\n    SlotCell,\n    SlotColumn,\n    SlotContent,\n    SlotGrid,\n    SlotTime,\n    Timeline,\n    Title,\n} from \"./schedule-day-view.styles\";\nimport type { ScheduleDayViewProps } from \"./types\";\n\nexport const ScheduleDayView = ({\n    serviceData,\n    isMobile,\n    onNextService,\n    onPrevService,\n    onEmptySlotClick,\n    showPrevArrow,\n    showNextArrow,\n    minTime,\n    maxTime,\n    initialScrollTime,\n    containerRef,\n    loading,\n    emptySlotPopover,\n    blockedMessage = \"Unavailable\",\n}: ScheduleDayViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const timelineOffset = useTimelineOffset(minTime, maxTime);\n    const bodyRef = useInitialScroll(loading, minTime, initialScrollTime);\n    const headerRef = useRef<HTMLDivElement>(null);\n    const timeSlots = useMemo(\n        () => TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime),\n        [minTime, maxTime]\n    );\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    // Handle empty slot click with slot details\n    const handleEmptySlotClick = (time: string, serviceName: string) => {\n        if (onEmptySlotClick) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            onEmptySlotClick({\n                startTime: time,\n                endTime: endTimeString,\n                name: serviceName,\n            });\n        }\n    };\n\n    // Synchronize horizontal scrolling between header and body\n    const handleBodyScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            // Set a fixed buffer (17px) to prevent over-scrolling and misalignment\n            const SCROLL_BUFFER = 17;\n            const maxScrollLeft =\n                bodyRef.current.scrollWidth -\n                bodyRef.current.clientWidth -\n                SCROLL_BUFFER;\n            const currentScrollLeft = bodyRef.current.scrollLeft;\n            if (currentScrollLeft > maxScrollLeft) {\n                bodyRef.current.scrollLeft = maxScrollLeft;\n                headerRef.current.scrollLeft = maxScrollLeft;\n            } else {\n                headerRef.current.scrollLeft = currentScrollLeft;\n            }\n        }\n    };\n    const handleHeaderScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            bodyRef.current.scrollLeft = headerRef.current.scrollLeft;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    // Find all slots that should be displayed in a given time cell\n    const findSlotsForTimeCell = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): ScheduleSlotProps[] => {\n        if (!service.slots) return [];\n        const timeSlotMinutes = TimeHelper.timeToMinutes(timeSlot);\n        const nextTime = minutesToTime(timeSlotMinutes + 30);\n\n        const slots = findSlotsStartingInTimeRange(\n            service.slots,\n            timeSlot,\n            nextTime\n        );\n\n        return slots;\n    };\n\n    // Check if a time slot is covered by any existing booking\n    const isServiceTimeSlotCovered = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): boolean => {\n        return service.slots\n            ? isTimeCellCovered(service.slots, timeSlot)\n            : false;\n    };\n\n    const getPopoverConfig = (\n        service: ScheduleEntityProps,\n        slot: ScheduleSlotProps | undefined,\n        time: string\n    ) => {\n        if (slot?.customPopover) {\n            return slot.customPopover;\n        }\n        if (!isServiceTimeSlotCovered(service, time) && emptySlotPopover) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            const emptySlotData = {\n                startTime: time,\n                endTime: endTimeString,\n                name: service.name,\n            };\n            return emptySlotPopover(emptySlotData);\n        }\n\n        return undefined;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderHeader = () => {\n        return (\n            <ServiceContainer $columnCount={serviceData.length}>\n                {serviceData.map((service) => (\n                    <ServiceColumn key={service.id}>\n                        {isMobile && (\n                            <ArrowContainer>\n                                {showPrevArrow && onPrevService && (\n                                    <ArrowButton\n                                        styleType=\"light\"\n                                        sizeType=\"small\"\n                                        onClick={onPrevService}\n                                        aria-label=\"Previous service\"\n                                    >\n                                        <ChevronLeftIcon aria-hidden />\n                                    </ArrowButton>\n                                )}\n                            </ArrowContainer>\n                        )}\n                        <ServiceHeaderContainer>\n                            <Title>{service.name}</Title>\n                            <Description>\n                                <span>\n                                    {\n                                        service.slots.filter(\n                                            (cell) =>\n                                                cell.status === \"available\"\n                                        ).length\n                                    }\n                                </span>{\" \"}\n                                available\n                            </Description>\n                        </ServiceHeaderContainer>\n                        {isMobile && showNextArrow && onNextService && (\n                            <ArrowButton\n                                styleType=\"light\"\n                                sizeType=\"small\"\n                                onClick={onNextService}\n                                aria-label=\"Next service\"\n                            >\n                                <ChevronRightIcon aria-hidden />\n                            </ArrowButton>\n                        )}\n                    </ServiceColumn>\n                ))}\n            </ServiceContainer>\n        );\n    };\n\n    const renderSlotContent = (\n        slot: ScheduleSlotProps,\n        timeSlotStart: string\n    ) => {\n        const duration = TimeHelper.calculateDuration(\n            slot.startTime,\n            slot.endTime\n        );\n        const offsetTop = calculateSlotOffset(slot.startTime, timeSlotStart);\n        return (\n            <SlotContent\n                $status={slot.status}\n                $duration={duration}\n                $offsetTop={offsetTop}\n                onClick={(e) => slot.onClick && slot.onClick(slot, e)}\n            >\n                {duration >= 15 && (\n                    <>\n                        <SlotTime>\n                            {TimeHelper.parseInput(slot.startTime, \"12hr\")}\n                            {\"\\u2013\"}{\" \"}\n                            {TimeHelper.parseInput(slot.endTime, \"12hr\")}\n                        </SlotTime>\n                        <SlotAvailability>\n                            {slot.status === \"blocked\"\n                                ? blockedMessage\n                                : `${slot.booked} / ${slot.capacity}`}\n                        </SlotAvailability>\n                    </>\n                )}\n            </SlotContent>\n        );\n    };\n\n    const renderSlotCell = (service: ScheduleEntityProps, time: string) => {\n        const slots = findSlotsForTimeCell(service, time);\n        if (slots.length > 0) {\n            return (\n                <SlotCell key={time} $dashed={time.endsWith(\":00\")}>\n                    {slots.map((slot, index) => {\n                        const popoverConfig = getPopoverConfig(\n                            service,\n                            slot,\n                            time\n                        );\n                        return (\n                            <WithOptionalPopover\n                                key={`${slot.id}-${index}`}\n                                containerRef={containerRef}\n                                customPopover={popoverConfig}\n                            >\n                                {renderSlotContent(slot, time)}\n                            </WithOptionalPopover>\n                        );\n                    })}\n                </SlotCell>\n            );\n        } else {\n            return (\n                <SlotCell\n                    key={time}\n                    $dashed={time.endsWith(\":00\")}\n                    onClick={() => handleEmptySlotClick(time, service.name)}\n                >\n                    <WithOptionalPopover\n                        containerRef={containerRef}\n                        customPopover={getPopoverConfig(\n                            service,\n                            undefined,\n                            time\n                        )}\n                    >\n                        <EmptySlot />\n                    </WithOptionalPopover>\n                </SlotCell>\n            );\n        }\n    };\n\n    const renderTimeSlotGrid = () => {\n        return (\n            <SlotGrid $columnCount={serviceData.length}>\n                {timelineOffset !== null && <Timeline $top={timelineOffset} />}\n                {serviceData.map((service) => (\n                    <SlotColumn key={service.id}>\n                        {timeSlots.map((time) => renderSlotCell(service, time))}\n                    </SlotColumn>\n                ))}\n            </SlotGrid>\n        );\n    };\n\n    return (\n        <ScheduleContainer>\n            {loading ? (\n                <LoadingContainer>\n                    <ThemedLoadingSpinner />\n                </LoadingContainer>\n            ) : (\n                <>\n                    {/* Service Name Header Row */}\n                    <HeaderContainer\n                        ref={headerRef}\n                        onScroll={handleHeaderScroll}\n                        $isMobile={isMobile}\n                    >\n                        <BlankCell />\n                        {renderHeader()}\n                    </HeaderContainer>\n\n                    <BodyContainer ref={bodyRef} onScroll={handleBodyScroll}>\n                        {/* Time labels */}\n                        <TimeIndicator\n                            minTime={minTime}\n                            maxTime={maxTime}\n                            format=\"24hr\"\n                            timelineOffset={timelineOffset}\n                        />\n                        {/* Time slot grid */}\n                        {renderTimeSlotGrid()}\n                    </BodyContainer>\n                </>\n            )}\n        </ScheduleContainer>\n    );\n};\n"],"names":["ScheduleDayView","serviceData","isMobile","onNextService","onPrevService","onEmptySlotClick","showPrevArrow","showNextArrow","minTime","maxTime","initialScrollTime","containerRef","loading","emptySlotPopover","blockedMessage","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","headerRef","useRef","timeSlots","useMemo","TimeHelper","generateTimings","getPopoverConfig","service","slot","time","customPopover","timeSlot","slots","isTimeCellCovered","isServiceTimeSlotCovered","emptySlotData","startTime","endTime","DateHelper","addMinutesToTime","name","renderSlotContent","timeSlotStart","duration","calculateDuration","offsetTop","calculateSlotOffset","_jsx","SlotContent","$status","status","$duration","onClick","e","children","_jsxs","_Fragment","SlotTime","parseInput","SlotAvailability","booked","capacity","renderSlotCell","timeSlotMinutes","timeToMinutes","nextTime","minutesToTime","findSlotsStartingInTimeRange","findSlotsForTimeCell","length","SlotCell","$dashed","endsWith","map","index","popoverConfig","WithOptionalPopover","id","serviceName","endTimeString","handleEmptySlotClick","undefined","EmptySlot","ScheduleContainer","LoadingContainer","ThemedLoadingSpinner","HeaderContainer","ref","onScroll","_e","current","scrollLeft","$isMobile","BlankCell","ServiceContainer","$columnCount","ServiceColumn","ArrowContainer","ArrowButton","styleType","sizeType","ChevronLeftIcon","ServiceHeaderContainer","Title","Description","filter","cell","ChevronRightIcon","BodyContainer","SCROLL_BUFFER","maxScrollLeft","scrollWidth","clientWidth","currentScrollLeft","TimeIndicator","format","SlotGrid","Timeline","$top","SlotColumn"],"mappings":"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"}
+{"version":3,"file":"schedule-day-view.js","sources":["../../../src/schedule/schedule-day-view/schedule-day-view.tsx"],"sourcesContent":["import { ChevronLeftIcon, ChevronRightIcon } from \"@lifesg/react-icons\";\nimport type { MouseEvent } from \"react\";\nimport { useMemo, useRef } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport { DateHelper } from \"../../util/date-helper\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport {\n    calculateSlotOffset,\n    findSlotsStartingInTimeRange,\n    isTimeCellCovered,\n    minutesToTime,\n    useInitialScroll,\n    useTimelineOffset,\n} from \"../shared\";\nimport { WithOptionalPopover } from \"../shared/with-optional-popover\";\nimport { TimeIndicator } from \"../time-indicator/time-indicator\";\nimport type { ScheduleEntityProps, ScheduleSlotProps } from \"../types\";\nimport * as styles from \"./schedule-day-view.styles\";\nimport type { ScheduleDayViewProps } from \"./types\";\n\nconst {\n    ServiceContainer,\n    ServiceColumn,\n    ArrowContainer,\n    ArrowButton,\n    ServiceHeaderContainer,\n    Title,\n    Description,\n    SlotContent,\n    SlotTime,\n    SlotAvailability,\n    SlotCell,\n    EmptySlot,\n    SlotGrid,\n    Timeline,\n    SlotColumn,\n    ScheduleContainer,\n    LoadingContainer,\n    HeaderContainer,\n    BlankCell,\n    BodyContainer,\n} = styles;\n\nexport const ScheduleDayView = ({\n    serviceData,\n    isMobile,\n    onNextService,\n    onPrevService,\n    onEmptySlotClick,\n    showPrevArrow,\n    showNextArrow,\n    minTime,\n    maxTime,\n    initialScrollTime,\n    containerRef,\n    loading,\n    emptySlotPopover,\n    blockedMessage = \"Unavailable\",\n}: ScheduleDayViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const timelineOffset = useTimelineOffset(minTime, maxTime);\n    const bodyRef = useInitialScroll(loading, minTime, initialScrollTime);\n    const headerRef = useRef<HTMLDivElement>(null);\n    const timeSlots = useMemo(\n        () => TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime),\n        [minTime, maxTime]\n    );\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    // Handle empty slot click with slot details\n    const handleEmptySlotClick = (time: string, serviceName: string) => {\n        if (onEmptySlotClick) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            onEmptySlotClick({\n                startTime: time,\n                endTime: endTimeString,\n                name: serviceName,\n            });\n        }\n    };\n\n    // Synchronize horizontal scrolling between header and body\n    const handleBodyScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            // Set a fixed buffer (17px) to prevent over-scrolling and misalignment\n            const SCROLL_BUFFER = 17;\n            const maxScrollLeft =\n                bodyRef.current.scrollWidth -\n                bodyRef.current.clientWidth -\n                SCROLL_BUFFER;\n            const currentScrollLeft = bodyRef.current.scrollLeft;\n            if (currentScrollLeft > maxScrollLeft) {\n                bodyRef.current.scrollLeft = maxScrollLeft;\n                headerRef.current.scrollLeft = maxScrollLeft;\n            } else {\n                headerRef.current.scrollLeft = currentScrollLeft;\n            }\n        }\n    };\n    const handleHeaderScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            bodyRef.current.scrollLeft = headerRef.current.scrollLeft;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    // Find all slots that should be displayed in a given time cell\n    const findSlotsForTimeCell = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): ScheduleSlotProps[] => {\n        if (!service.slots) return [];\n        const timeSlotMinutes = TimeHelper.timeToMinutes(timeSlot);\n        const nextTime = minutesToTime(timeSlotMinutes + 30);\n\n        const slots = findSlotsStartingInTimeRange(\n            service.slots,\n            timeSlot,\n            nextTime\n        );\n\n        return slots;\n    };\n\n    // Check if a time slot is covered by any existing booking\n    const isServiceTimeSlotCovered = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): boolean => {\n        return service.slots\n            ? isTimeCellCovered(service.slots, timeSlot)\n            : false;\n    };\n\n    const getPopoverConfig = (\n        service: ScheduleEntityProps,\n        slot: ScheduleSlotProps | undefined,\n        time: string\n    ) => {\n        if (slot?.customPopover) {\n            return slot.customPopover;\n        }\n        if (!isServiceTimeSlotCovered(service, time) && emptySlotPopover) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            const emptySlotData = {\n                startTime: time,\n                endTime: endTimeString,\n                name: service.name,\n            };\n            return emptySlotPopover(emptySlotData);\n        }\n\n        return undefined;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderHeader = () => {\n        return (\n            <ServiceContainer $columnCount={serviceData.length}>\n                {serviceData.map((service) => (\n                    <ServiceColumn key={service.id}>\n                        {isMobile && (\n                            <ArrowContainer>\n                                {showPrevArrow && onPrevService && (\n                                    <ArrowButton\n                                        styleType=\"light\"\n                                        sizeType=\"small\"\n                                        onClick={onPrevService}\n                                        aria-label=\"Previous service\"\n                                        icon={<ChevronLeftIcon aria-hidden />}\n                                    />\n                                )}\n                            </ArrowContainer>\n                        )}\n                        <ServiceHeaderContainer>\n                            <Title>{service.name}</Title>\n                            <Description>\n                                <span>\n                                    {\n                                        service.slots.filter(\n                                            (cell) =>\n                                                cell.status === \"available\"\n                                        ).length\n                                    }\n                                </span>{\" \"}\n                                available\n                            </Description>\n                        </ServiceHeaderContainer>\n                        {isMobile && showNextArrow && onNextService && (\n                            <ArrowButton\n                                styleType=\"light\"\n                                sizeType=\"small\"\n                                onClick={onNextService}\n                                aria-label=\"Next service\"\n                                icon={<ChevronRightIcon aria-hidden />}\n                            />\n                        )}\n                    </ServiceColumn>\n                ))}\n            </ServiceContainer>\n        );\n    };\n\n    const renderSlotContent = (\n        slot: ScheduleSlotProps,\n        timeSlotStart: string\n    ) => {\n        const duration = TimeHelper.calculateDuration(\n            slot.startTime,\n            slot.endTime\n        );\n        const offsetTop = calculateSlotOffset(slot.startTime, timeSlotStart);\n        return (\n            <SlotContent\n                $status={slot.status}\n                $duration={duration}\n                $offsetTop={offsetTop}\n                onClick={(e: MouseEvent) =>\n                    slot.onClick && slot.onClick(slot, e)\n                }\n            >\n                {duration >= 15 && (\n                    <>\n                        <SlotTime>\n                            {TimeHelper.parseInput(slot.startTime, \"12hr\")}\n                            {\"\\u2013\"}{\" \"}\n                            {TimeHelper.parseInput(slot.endTime, \"12hr\")}\n                        </SlotTime>\n                        <SlotAvailability>\n                            {slot.status === \"blocked\"\n                                ? blockedMessage\n                                : `${slot.booked} / ${slot.capacity}`}\n                        </SlotAvailability>\n                    </>\n                )}\n            </SlotContent>\n        );\n    };\n\n    const renderSlotCell = (service: ScheduleEntityProps, time: string) => {\n        const slots = findSlotsForTimeCell(service, time);\n        if (slots.length > 0) {\n            return (\n                <SlotCell key={time} $dashed={time.endsWith(\":00\")}>\n                    {slots.map((slot, index) => {\n                        const popoverConfig = getPopoverConfig(\n                            service,\n                            slot,\n                            time\n                        );\n                        return (\n                            <WithOptionalPopover\n                                key={`${slot.id}-${index}`}\n                                containerRef={containerRef}\n                                customPopover={popoverConfig}\n                            >\n                                {renderSlotContent(slot, time)}\n                            </WithOptionalPopover>\n                        );\n                    })}\n                </SlotCell>\n            );\n        } else {\n            return (\n                <SlotCell\n                    key={time}\n                    $dashed={time.endsWith(\":00\")}\n                    onClick={() => handleEmptySlotClick(time, service.name)}\n                >\n                    <WithOptionalPopover\n                        containerRef={containerRef}\n                        customPopover={getPopoverConfig(\n                            service,\n                            undefined,\n                            time\n                        )}\n                    >\n                        <EmptySlot />\n                    </WithOptionalPopover>\n                </SlotCell>\n            );\n        }\n    };\n\n    const renderTimeSlotGrid = () => {\n        return (\n            <SlotGrid $columnCount={serviceData.length}>\n                {timelineOffset !== null && <Timeline $top={timelineOffset} />}\n                {serviceData.map((service) => (\n                    <SlotColumn key={service.id}>\n                        {timeSlots.map((time) => renderSlotCell(service, time))}\n                    </SlotColumn>\n                ))}\n            </SlotGrid>\n        );\n    };\n\n    return (\n        <ScheduleContainer>\n            {loading ? (\n                <LoadingContainer>\n                    <ThemedLoadingSpinner />\n                </LoadingContainer>\n            ) : (\n                <>\n                    {/* Service Name Header Row */}\n                    <HeaderContainer\n                        ref={headerRef}\n                        onScroll={handleHeaderScroll}\n                        $isMobile={isMobile}\n                    >\n                        <BlankCell />\n                        {renderHeader()}\n                    </HeaderContainer>\n\n                    <BodyContainer ref={bodyRef} onScroll={handleBodyScroll}>\n                        {/* Time labels */}\n                        <TimeIndicator\n                            minTime={minTime}\n                            maxTime={maxTime}\n                            format=\"24hr\"\n                            timelineOffset={timelineOffset}\n                        />\n                        {/* Time slot grid */}\n                        {renderTimeSlotGrid()}\n                    </BodyContainer>\n                </>\n            )}\n        </ScheduleContainer>\n    );\n};\n"],"names":["ServiceContainer","ServiceColumn","ArrowContainer","ArrowButton","ServiceHeaderContainer","Title","Description","SlotContent","SlotTime","SlotAvailability","SlotCell","EmptySlot","SlotGrid","Timeline","SlotColumn","ScheduleContainer","LoadingContainer","HeaderContainer","BlankCell","BodyContainer","styles","ScheduleDayView","serviceData","isMobile","onNextService","onPrevService","onEmptySlotClick","showPrevArrow","showNextArrow","minTime","maxTime","initialScrollTime","containerRef","loading","emptySlotPopover","blockedMessage","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","headerRef","useRef","timeSlots","useMemo","TimeHelper","generateTimings","getPopoverConfig","service","slot","time","customPopover","timeSlot","slots","isTimeCellCovered","isServiceTimeSlotCovered","emptySlotData","startTime","endTime","DateHelper","addMinutesToTime","name","renderSlotContent","timeSlotStart","duration","calculateDuration","offsetTop","calculateSlotOffset","_jsx","$status","status","$duration","onClick","e","children","_jsxs","_Fragment","parseInput","booked","capacity","renderSlotCell","timeSlotMinutes","timeToMinutes","nextTime","minutesToTime","findSlotsStartingInTimeRange","findSlotsForTimeCell","length","$dashed","endsWith","map","index","popoverConfig","WithOptionalPopover","id","serviceName","endTimeString","handleEmptySlotClick","undefined","ThemedLoadingSpinner","ref","onScroll","_e","current","scrollLeft","$isMobile","$columnCount","styleType","sizeType","icon","ChevronLeftIcon","filter","cell","ChevronRightIcon","SCROLL_BUFFER","maxScrollLeft","scrollWidth","clientWidth","currentScrollLeft","TimeIndicator","format","$top"],"mappings":"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"}

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

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